夜光序言:
无论前路怎样坎坷,只要是你选择的,我一定在你身边。
正文:
以道御术 / 以术识道
注意大小写的错误都不可以,要严谨一点
之后呢,就是把数据加载到新的页面就可以
其实啊,我们css玩多了就会发现,有很多样式是有异曲同工之妙的
<!--pages/news/news-detail/news-detail.wxml-->
<view class="news-detail-container">
<image class="head-img" src="../../images/115.jpg" mode="widthFix"></image>
<view class="author-time">
<image class="author-avatar" src="../../images/114.jpg" mode="widthFix"></image>
<text class="author-name">GeniusTeam</text>
<text class="const-text">发表于</text>
<text class="time">2020/3/9</text>
<!-- <image catchtap="playermusic" class="music" src=""></image> -->
</view>
<text class="title">I am the bone of my sword. 身为剑体</text>
<view class="tool">
<view class="circle-img">
<image src="../../images/a.jpg" mode="widthFix"></image>
<!-- <image></image> -->
<image class="share-img" src="../../images/b.jpg" mode="widthFix"></image>
</view>
<view class="horizon"></view>
</view>
<text class="detail">I am the bone of my sword. 身为剑体 Steel is my body, and fire is my blood. 钢铁之血灼璃之心 I have created over a thousand blades. 手创千剑历经百战 Unknown to death,Nor known to life. 无一败绩无一知己 Have withstood pain to create many weapons. 常独自一人自醉与剑丘之巅 Yet, those 乏讥催客诎九挫循旦末hands will never hold anything. 因此此生亦无任何意义 So as I pray, unlimited blade works. 则其身定为无限剑制</text>
</view>
/* pages/news/news-detail/news-detail.wxss */
.news-detail-container{
display: flex;
flex-direction: column
}
.head-img{
width: 100%
}
.author-time{
flex-direction: row;
margin-left: 30rpx;
margin-top: 20rpx;
}
.author-avatar{
height: 64rpx;
width: 64rpx;
vertical-align: middle
}
.author-name{
font-size: 30rpx;
font-weight: 640;
margin-left: 20rpx;
vertical-align: middle;
color: #666;
}
.const-text{
font-size: 24rpx;
color: #999;
margin-left: 20rpx;
}
.time{
font-size: 26rpx;
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: 50rpx;
height: 50rpx;
}
.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-top: 20rpx;
margin-right: 30rpx;
margin-left: 30rpx;
line-height: 44rpx;
font-size: 24rpx;
}