微信小程序（六） 文章詳情靜態頁面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"
}