hongze_yb_xcx/pages-report/classify.vue

<template>
  <view class="classify-page">
    <swiper class="swiper" autoplay interval>
      <swiper-item>
        <image src="https://hzstatic.hzinsights.com/static/icon/hzyb/idcard_exp.jpg" mode="aspectFill"/>
      </swiper-item>
    </swiper>
    <view class="list">
      <van-row gutter="20">
        <van-col span="6">
          <view class="item">
            
          </view>
        </van-col>
        <van-col span="6">
          <view class="item"></view>
        </van-col>
        <van-col span="6">
          <view class="item"></view>
        </van-col>
        <van-col span="6">
          <view class="item"></view>
        </van-col>
        <van-col span="6">
          <view class="item"></view>
        </van-col>
        <van-col span="6">
          <view class="item"></view>
        </van-col>
      </van-row>
    </view>
  </view>
</template>

<script>
export default {
  data () {
    return {
      list:[
        {
          name:"晨报",
          img:''
        },
        {
          name:"周报",
          img:''
        },
        {
          name:"双周报",
          img:''
        },
        {
          name:"月报",
          img:''
        },
      ]
    }
  }
};
</script>

<style lang="scss" scoped>
.classify-page {
  padding: 34rpx;
  .swiper{
    height: 300rpx;
    overflow: hidden;
    image{
      width: 100%;
      height: 100%;
      display: block;
    }
  }
  .list{
    margin-top: 40rpx;
    .item{
      width: 100%;
      height: 150rpx;
      background-color: #ccc;
      margin-bottom: 20rpx;
    }
  }
}
</style>