<!--index.wxml-->

<view class="container">

  <view class = "selection">

    <swiper indicator-dots="true"

    autoplay="true" interval="" duration="">

    <block wx:for="{{imgUrls}}">

      <swiper-item>

        <image src="{{item}}" class="slide-image" width="" height=""/>

      </swiper-item>

    </block>

    </swiper>

  </view>

   <view class = "selection">

    <view class = "header">

      <text>精品推荐</text>

       <text class = "all_text">精品推荐</text>

    </view>

    <view class = "content">

    <!--for循环-->

      <view class = "content_item" wx:for = "{{content_item}}">

        <image src="../../images/3.png"/>

        <view class = "text_item">

          <text>我是标题哟哟!!!</text>

        </view>

         </view>

      </view>

  </view>

   <view class = "selection">

    <view class = "header">

      <text>热门评测</text>

       <text class = "all_text">全部评测</text>

    </view>

    <view class = "list_item" wx:for = "{{list_item}}">

     <view class = "big_image">

      <image src="../../images/4.png" class = "big_image"/>

      <image src="../../images/2.png" class = "avater" />

     </view>

     <view class = "list_item_title_text">

      <text>思思思思思思思思思思思思思思思思思思思思思思思思思思</text>

     </view>

     <view class = "list_item_content_text">

      <text>思思思思思思思思思思思思思思思思思思思</text>

     </view>

    </view>

  </view>

</view>

.header{

  border-left-width: 2px;

  border-left-color: green;

  border-left-style: solid;

  /*flex布局*/

  display: flex;

  /*两端对齐*/

  justify-content: space-between;

  /*居中对齐*/

  align-content: center;

  padding-left: 10rpx;

  padding-right: 10rpx;

  margin-top: 10rpx;

  margin-bottom: 10rpx;

}

.all_text{

  color: green;

  font: 10px;

}

.content{

  display: flex;

  /*换行*/

  flex-wrap: wrap;

  /*方向*/

  flex-direction: row;

  /*水平方向居中对齐*/

  justify-content: center;

}

.content_item{

  width: %;

  height: 250rpx;

  background-color: darkgoldenrod;

  margin: 5px;

  /*绝对定位*/

  position: relative;

}

/*设置图片样式*/

.content_item image{

  width: %;

  height: %;

}

.text_item text{

  /*相对布局*/

  position: absolute;

  bottom: 0px;

  color: white;

  font: 10px;

  /*设置渐变  参数一:从哪开始,参数二:设置颜色 黑色 参数三:到哪哪  透明*/

  background: -webkit-linear-gradient(bottom,rgba(, , , 0.5),rgba(, , , ));

  height: 125rpx;

  width: %;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  padding-left: %;

  padding-right: %;

}

/*列表*/

.list_item{

  height: 500rpx;

  width: %;

  /*position: relative;*/

  background: gainsboro;

}

.big_image{

  height: 300rpx;

  width: %;

  position: relative;

}

/*列表大图*/

/*.big_image image{

  height: 100%;

  width: 100%;

}*/

/*.big_image{

  height: 100%;

  width: 100%;

}*/

.list_item_text text{

  height: 200rpx;

  width: %;

}

.avater{

  height: 100rpx;

  width: 100rpx;

  /*弧度*/

  border-radius: %;

  bottom: -50rpx;

  right: 50rpx;

  /*绝对定位*/

  position: absolute;

}

.list_item_title_text{

  color: black;

  font: 15px;

  margin-top: 70rpx;

  padding-left: 10rpx;

  padding-right: 10rpx;

}

.list_item_content_text{

  color: lightgray;

  font: 8px;

  padding-left: 10rpx;

  padding-right: 10rpx;

  margin-top: 10rpx;

}