夜光帶你走進 微信小程序開發（二十三）擅長的領域

夜光序言：

 

無論前路怎樣坎坷，只要是你選擇的，我一定在你身邊。

 

 

 

 
 
正文：
 
                                              以道御術 / 以術識道

注意大小寫的錯誤都不可以，要嚴謹一點

 

之後呢，就是把數據加載到新的頁面就可以

其實啊，我們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;
}