微信小程序新闻详情页面效果实现

<!--pages/post/post-detail/post-detail.wxml-->
<!--先静后动，先样式再数据-->
<view class="detail-container">
  <image class="head-image" src="/images/post/vr.png"></image>
  <view class="author-date">
    <image class="avatar" src="/images/avatar/2.png"></image>
    <text class="author">迪丽热巴</text>
    <text class="const-text">发表于</text>
    <text class="date">三天前</text>
  </view>
  <text class="title">迪丽热巴（Dilraba）</text>
  <view class="tool">
    <view class="circle-img">
      <image src="/images/icon/collection.png"></image>
      <image class="share-img" src="/images/icon/share.png"></image>
    </view>
    <view class="horizon"></view>
  </view>
  <text class="detail">迪丽热巴（Dilraba），1992年6月3日出生于新疆乌鲁木齐市，中国内地影视女演员、歌手，毕业于上海戏剧学院。</text>
</view>

/* pages/post/post-detail/post-detail.wxss */

.detail-container {
  display: flex;
  flex-direction: column;
}
.head-image {
  background-color: #ff6900;
  width: 100%;
  height: 460rpx;
}

.author-date {
  flex-direction: row;
  margin-left: 30rpx;
  margin-top: 20rpx;
}

.avatar {
  height: 64rpx;
  width: 64rpx;
  vertical-align: middle;
}

.author {
  font-size: 30rpx;
  font-weight: 300;
  margin-left: 20rpx;
  vertical-align: middle;
  color: #666;
}

.const-text {
  font-size: 24rpx;
  color: #999;
  margin-left: 20rpx;
}

.date {
  font-size: 24rpx;
  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: 90rpx;
  height: 90rpx;
}

.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-left: 30rpx;
  margin-top: 20rpx;
  margin-right: 30rpx;
  line-height: 44rpx;
  letter-spacing: 2px;
  font-size: 24rpx;
  font-family: MicroSoft Yahei;
}