夜光带你走进 微信小程序开发（二十三）擅长的领域

夜光序言：

 

无论前路怎样坎坷，只要是你选择的，我一定在你身边。

 

 

 

 
 
正文：
 
                                              以道御术 / 以术识道

注意大小写的错误都不可以，要严谨一点

 

之后呢，就是把数据加载到新的页面就可以

其实啊，我们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;
}