微信小程序静态初步

内容板块搭建

前面我已经做好首页，现在搭建一个静态的内容板块，由于是初学，所以技术有限，只能做到查看一个轮播图，作者头像和作者信息，一个图片，大概简介，还有静态浏览量和收藏数
思路：
1.顶部有一个三张图片的轮播图效果
2.建立两个分割线，其中顶部分割线距轮播图有一定距离
3.作者头像和作者信息均横向布局，且头像和信息之间有一定距离，头像距左端有距离，文字和头像尽量符合一般新闻类头像和文字设置
4.标题文字 加粗，字号放大，距左端有间隙
5.加入相关图片
6.简介文字比标题小，并设置行间距和段间距，符合正常视图，简介距左端有一定间距
7.收藏和浏览均横向布局，且设置有间距，并且缩小
8.以上大的框架使用纵向布局
代码如下：

<!--pages/content/content.wxml-->
<!--轮播图-->
<view>
  <swiper indicator-dots="true" indicator-active-color="#E6E6FA" autoplay="true" vertical="true" circular="true" easing-function="easeInOutCubic">
    <swiper-item>
      <image src="../images/active/QQ图片20190930231411.jpg"></image>
    </swiper-item>

    <swiper-item>
      <image src="../images/active/5454.jpg"></image>
    </swiper-item>

    <swiper-item>
      <image src="../images/active/新闻部1575553924982 .jpg"></image>
    </swiper-item>

    <swiper-item>
      <image src="../images/active/6999.jpg"></image>
    </swiper-item>
  </swiper>
</view>

<!--内容-->
<view class="content-text">
  <view class="content-anther-data">
    <!--作者头像和作者姓名-->
    <image class="content-anther" src="../images/active/01.png"></image>
    <text class="content-data">NvN 2020</text>
  </view>

  <!--标题-->
  <text class="content-body">南羊小学第一次活动</text>

  <!--图片-->
  <image class="content-image" src="../images/active/新闻部1575553924982 .jpg"></image>

  <!--简介-->
  <text class="content-jianjie">金秋十月，师者圆梦队成员于鄠邑区南羊小学共同参加"庆祝祖国71诞辰活动",活动中南羊小学师生用精彩的表演向各位来宾展示自己的才艺，用自己实际行动来表达对祖国母亲的热爱</text>

  <!--浏览收藏数-->
  <view class="contont-like">
    <image class="contont-look" src="../images/active/eye.png"></image>
    <text class="contont-font">300</text>
    <image class="contont-look" src="../images/active/favorite.png"></image>
    <text class="contont-font">300</text>
  </view>
  
</view>

/* pages/content/content.wxss */
swiper{
  width: auto;
  height: 500rpx;
}
swiper image{
  width: 100%;
  height: 500rpx;
}

.content-text{
  display: flex;
  flex-direction: column;
}
.content-text{
  margin-top: 30rpx;
  margin-bottom: 30rpx;
  border-bottom: 2px solid #ededed;
  border-top: 2px solid #ededed;
  padding-bottom: 10rpx;
}

.content-anther-data{
  display: flex;
  flex-direction: row;
  margin-top: 40rpx;
  margin-left: 20rpx;
  align-items: center;
}
.content-anther{
  width: 90rpx;
  height: 90rpx;
}
.content-data{
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  margin-left: 30rpx;
  font-size: 30rpx;
}

.content-body{
  margin-top: 30rpx;
  margin-bottom: 20rpx;
  margin-left: 20rpx;
  font-weight: bold;
}

.content-image{
  width: 100%;
  height: 500rpx;
  margin-bottom: 30rpx;
}
.content-jianjie{
  font-size: 35rpx;
  margin-left: 20rpx;
  /* 行间距 */
  line-height: 10prx;
  /* 字间距 */
  letter-spacing:3px
}

.contont-like{
  display: flex;
  flex-direction: row;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  margin-left: 20rpx;
}
.contont-look{
  width: 35rpx;
  height: 35rpx;
  margin-right: 16rpx;
}
.contont-font{
  font-size: 30rpx;
  margin-right: 16rpx;
}

效果如图