LuminousはWeChat小規模プログラム開発の分野にあなたを連れて行きます（23）

発光プロローグ：

 

どんなに険しい道でも、あなたが選択する限り、私は間違いなくあなたのそばにいます。

 

 

 

 
 
テキスト：
 
                                              タオでタオを認識する

大文字のエラーに注意してください。

 

その後、データを新しいページにロードするだけです

実際、より多くの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;
}