## 构建新闻详情页
`post-detail.wxml`
~~~html
<view class='container'>
<image class='head-image' src="/images/post/sls.jpg"></image>
<view class="author-date">
<image class="avatar" src="/images/avatar/2.png"></image>
<text class="author">胡歌</text>
<text class="const-text">发表于</text>
<text class="date">三天前</text>
</view>
<text class="title">琅琊榜好看吗？</text>
<view class="tool">
<view class="circle-img">
<image src='/images/icon/collection.png'></image>
<image class="share-img" src='/images/icon/share.png'></image>
</view>
<view class="horizon"></view>
</view>
<text class="detail">琅琊榜能不好看吗？胡歌的电视剧都是很好看的...</text>
</view>
~~~
`post-detail.wxss`
~~~css
.container{
display: flex;
flex-direction: column;
}
.head-image{
width: 100%;
height: 460rpx;
}
.author-date{
flex-direction: row;
margin-left: 30rpx;
margin-top: 20rpx;
}
.avatar{
height: 64rpx;
width: 64rpx;
vertical-align: middle;
}
.author{
font-size: 30rpx;
font-weight: 300;
margin-left: 20rpx;
vertical-align: middle;
color: #666;
}
.const-text{
font-size: 24rpx;
color: #999;
margin-left: 20rpx;
}
.date{
font-size: 24rpx;
margin-left: 30rpx;
vertical-align: middle;
color: #999;
}
.title{
margin-left: 40rpx;
font-size: 36rpx;
font-weight: 700;
margin-top: 30rpx;
letter-spacing: 2px;
color: #4b556c;
}
.tool{
margin-top: 20rpx;
}
.circle-img{
float: right;
margin-right: 40rpx;
vertical-align: middle;
}
.circle-img image{
width: 90rpx;
height: 90rpx;
}
.share-img{
margin-left: 30rpx;
}
.horizon{
width: 660rpx;
height: 1px;
background-color: #e5e5e5;
vertical-align: middle;
position: relative;
top: 46rpx;
margin: 0 auto;
z-index: -99;
}
.detail{
color: #666;
margin-left: 30rpx;
margin-top: 20rpx;
margin-right: 30rpx;
line-height: 44rpx;
letter-spacing: 2px;
font-size: 24rpx;
}
~~~
`app.wxss`
~~~css
text{
font-family: MicroSoft Yahei;
font-size: 24rpx;
}
~~~
### 添加音乐播放按钮
`post-detail.wxml`
~~~wxml
<image class="audio" src="/images/music/music-start.png"></image>
~~~
`post-detail.wxss`
~~~css
.audio{
width: 102rpx;
height: 110rpx;
position: absolute;
left: 50%;
margin-left: -51rpx;
top: 180rpx;
opacity: 0.6;
}
~~~
### 修改全局导航栏颜色
`app.json`
~~~json
"window":{
"navigationBarBackgroundColor":"#405f80"
}
~~~
`welcome.json`
~~~json
{
"navigationBarBackgroundColor": "#b3d4db"
}
~~~
