Luminous te lleva al campo del desarrollo de pequeños programas WeChat (23)

Prólogo luminoso:

 

No importa cuán accidentado esté el camino, siempre que elijas, definitivamente estaré a tu lado.

 

 

 

 
 
Texto:
 
                                              Reconocer el Tao con el Tao

Preste atención a los errores de capitalización. Sea estricto

 

Después de eso, solo carga los datos en una nueva página

De hecho, si jugamos más CSS, encontraremos que hay muchos estilos que tienen el mismo efecto.

<!--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;
}