微信小程序入门与实战(2)——阅读文章列表页面html/css部分

先自定义填写数据，完成css样式的编写。

posts.wxml

<!--pages/posts/posts.wxml-->
<swiper indicator-dots="{{true}}" vertical="{{false}}" autoplay="{{true}}" intervsl="3000">
  <swiper-item>
    <image src="/img/wx.png" />
  </swiper-item>
  <swiper-item>
    <image src="/img/vr.png" />
  </swiper-item>
  <swiper-item>
    <image src="/img/iqiyi.png" />
  </swiper-item>
</swiper>


<view class="post-container">
  <view class="post-author-date">
    <image class="post-author" src="/img/avatar/1.png"></image>
    <text class="post-date">Oct 20,2020</text>
  </view>
  <text class="post-title">正是虾肥蟹壮时</text>
  <image class="post-image" src="/img/post/crab.png"></image>
  <text class="post-content">"菊黄蟹正肥，品尝秋之味。徐志摩把,“看初花的荻芦”和“到楼外楼吃蟹”,并列为秋天来杭州不能错过的风雅之事；用林妹妹的话讲是“螯封嫩玉双双满，"</text>
  <view class="post-like">
    <image class="post-like-image" src="../../img/icon/chat.png"></image>
    <text class="post-like-font">112</text>
    <image class="post-like-image" src="../../img/icon/view.png"></image>
    <text class="post-like-font">996</text>
  </view>
</view>

posts.wxss

/* pages/posts/posts.wxss */
swiper{
  width:100%;
  height:600rpx;
}

swiper image{
  width: 100%;
  height:600rpx;
}

.post-container{
  display: flex;
  flex-direction: column;
  border-top:1px solid #ededed;
  border-bottom:1px solid #ededed;
  margin-top: 20rpx;
  background-color: #fff;
}
.post-author-date{
  display: flex;
  flex-direction: row;
  margin: 10rpx 0 20rpx 10rpx;
  align-items: center;
}
.post-author{
  height: 60rpx ;
  width: 60rpx;
}
.post-date{
  margin-left: 20rpx;
  font-size: 26rpx;
}
.post-title{
  font-size: 34rpx;
  font-weight: 600;
  margin-left: 10rpx;
  margin-bottom: 10rpx;
  color:#333;
}
.post-image{
  width: 100%;
  height: 340rpx;
  margin-bottom: 15rpx;
}
.post-content{
  font-size: 28rpx;
  color:#666;
  letter-spacing: 2rpx;
  margin-left: 20rpx;
  margin-bottom: 20rpx;
}
.post-like{
  display: flex;
  flex-direction: row;
  font-size: 26rpx;
  margin-left: 20rpx;
  align-items: center;
}
.post-like-image{
  height: 32rpx;
  width: 32rpx;
  margin-right: 16rpx;
}
.post-like-font{
  margin-right: 40rpx;
}