微信小程序（六） 文章详情静态页面detail

文章详情静态页面detail：

 

 

detail.wxml代码如下：

<!--pages/detail/detail.wxml-->
<view class="detailContainer">
<image class="headImg" src="/static/images/test1.jpg"></image>
<view class="avatar_date">
<image src="/static/images/011.jpg"></image>
<text>美国队长</text>
<text>发布于</text>
<text>Jan 16 2019</text>
</view>
<text class="company">阿童木</text>
<view class="collection_share_container">
<view class="collection_share">
<image src="/static/images/sc.png"></image>
<image src="/static/images/share2.png"></image>
</view>
<view class="line"></view>
</view>
<button>转发此文章</button>
<text class="content">熟人社交产品没办法做得过微信的关键并不在于通讯的形式是文字语音，
还是视频，而在于整体的替代成本太高俞军老师的价值公式是，产品价值=（新体验 - 旧体验）-
替代成本。替代成本是所有或者哪怕一部分微信关系链都迁移到多闪，这都是高到离谱的。比较有争
议的在于视频作为即时通讯的新形式，之于微信，会不会就像微信用语音功能新体验压制了短信的旧
体验一样，有着极大的体验差。</text>
</view>

detail.wxss样式代码如下：

/* pages/detail/detail.wxss */
.detailContainer{
display:flex;
flex-direction: column;
}
.headImg{
width:100%;
height:460rpx;

}
.avatar_date{
padding: 10rpx;
}

.avatar_date image{
width:64rpx;
height:64rpx;
vertical-align: middle;
border-radius: 50%; /*设置图片圆角*/
}
.avatar_date text{
font-size: 28rpx;
margin-left:10rpx;
}
.company{
font-size: 38rpx;
font-weight: bold;
margin-left: 10rpx;
}
.collection_share_container{
position: relative;
}
.collection_share{
float:right;
margin-right: 50rpx;
}
.collection_share image{
width:90rpx;
height:90rpx;
border-radius: 50%;
margin-right: 20rpx;
}
.line{ /*设置虚线 */
width: 90%;
height:1rpx;
background: #eee;
position:absolute;
top:45rpx;
left:5%;
z-index: -1; /*虚线优先级*/
}
button{
width:280rpx;
height: 80rpx;
}
.content{
margin-top: 20rpx;
font-size: 32rpx;
text-indent: 64rpx;
}

 

detail.json代码如下：

{
"navigationBarBackgroundColor": "#489B81",
"navigationBarTitleText": "文章详情",
"navigationBarTextStyle": "white"
}