微信小程序文章界面简单布局

---

效果图：

---

wxml文件：

    <view class="content">
        <!-- 头像 -->
        <view class="author-date"> 
            <image src="/images/4.png" class="author"></image>
            <text class="date">logo 2017年七月</text>
        </view>
        <!-- 标题内容 -->
         <text class="title">那年夏天你在哪里</text>
         <image class="image" src="/images/6.jpg"></image>
         <text class="article-content">天不言自高，地不言自厚，奇迹，是不会在容易的道路上绽放的。人生没有如果，只有后果和结果，过去的不再回来，回来的不再完美。</text>
        <view >

          <image class="article-images" src="../../images/icon/chat.png"></image>
          <text  class="article-text">66</text>

          <image class="article-images" src="../../images/icon/view.png"></image>
          <text class="article-text">88</text>

        </view>


    </view>

---

wxss样式文件：

swiper{
  width:100%;
  height:500rpx;
}
swiper image{
   width:100%;
  height:500rpx;
}
.content{
   /* display: flex;  */
   flex-direction: colum;
   margin-top: 30rpx;
   margin-bottom: 30rpx;
   background-color: #fff;
   /* border-bottom: 1px solid #ededed;  */
   border-top: 1px solid #ededed; 
   padding-bottom: 5px; 
}
 .author-date{ 
  /* margin-top: 10rpx;
  margin-bottom: 20rpx;
  margin-left: 10rpx; */
  margin: 10rpx 0 20rpx 10rpx;
}
.author{
  width: 60rpx;
  height: 60rpx;
   vertical-align: middle; 
}
.date{
  margin-left: 20rpx;
  vertical-align: middle;
  margin-bottom: 5px;
   font-size: 26rpx; 
}
.title{
  font-size: 34rpx;
  font-weight: 600;
  color:#333;
  margin-bottom: 20px;
}
.image{
  margin-left: 16px;
  width: 100%;
  height: 200px;
  margin: auto 0;
  margin-top: 10px;
  margin-bottom: 10px;
}
.article-content{
  color: #666;
  font-size: 28rpx;
  margin-bottom: 20rpx;
  margin-left: 30rpx;
  line-height: 40rpx;
  letter-spacing: 2rpx;
}
.article-images{
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: middle;
}
.article-text{
  vertical-align: middle;
}

清晨日暮，有你的光阴，值得虚度。