qa-deu-tv/pages/index/premium_recommendation.vue

<template>
  <view>
    <!--    <app-loading v-if="loading" />-->
    <view class="top">
      <view class="left">
        <unitv-zone
          id="premium_recommendation_first_zone"
          class="premium_recommendation_first_zone"
          up="tabs_zone"
          right="premium_recommendation_second_zone"
          down="premium_recommendation_third_zone"
          :values="list.slice(0, 2)"
          :column="list.slice(0, 2).length"
        >
          <unitv-item
            v-for="(item, index) in list.slice(0, 2)"
            :key="index"
            :item="index"
            class="item"
            @click="fnCurriculumDetails"
          >
            <image :src="item.img" mode="widthFix" />
            <view class="title line-1">{{ item.title }}</view>
          </unitv-item>
        </unitv-zone>
      </view>
      <view class="right">
        <unitv-zone
          id="premium_recommendation_second_zone"
          class="premium_recommendation_second_zone"
          up="tabs_zone"
          left="premium_recommendation_first_zone"
          down="premium_recommendation_third_zone"
          :values="list.slice(2, 4)"
          :column="1"
          :row="list.slice(2, 4).length"
        >
          <unitv-item
            v-for="(item, index) in list.slice(2, 4)"
            :key="index"
            :item="index"
            class="item"
            @click="fnCurriculumDetails"
          >
            <image :src="item.img" mode="widthFix" />
            <view class="title line-1">{{ item.title }}</view>
          </unitv-item>
        </unitv-zone>
      </view>
    </view>
    <view class="bottom">
      <unitv-zone
        id="premium_recommendation_third_zone"
        class="premium_recommendation_third_zone"
        up="premium_recommendation_first_zone"
        :values="list.slice(4)"
        :column="list.slice(4).length"
      >
        <unitv-item
          v-for="(item, index) in list.slice(4)"
          :key="index"
          :item="index"
          class="item"
          @click="fnCurriculumDetails"
        >
          <image :src="item.img" mode="widthFix" />
          <view class="title line-1">{{ item.title }}</view>
        </unitv-item>
      </unitv-zone>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // loading: true,
      list: [],
    };
  },
  created() {
    this.fnGetData();
  },
  methods: {
    async fnGetData() {
      // setTimeout(() => {
      this.list.push({
        img: require(`../../static/public_images/video_bg1.jpg`),
        title: "气体基础知识",
      });
      this.list.push({
        img: require(`../../static/public_images/video_bg2.jpg`),
        title: "现场一线员工全面安全培训",
      });
      this.list.push({
        img: require(`../../static/public_images/video_bg3.jpg`),
        title: "出差人员基础安全知识与应急处置",
      });
      this.list.push({
        img: require(`../../static/public_images/video_bg4.jpg`),
        title: "现场安全负责人全面安全培训",
      });
      this.list.push({
        img: require(`../../static/public_images/video_bg5.jpg`),
        title: "《四川省安全生产条例》特色解读",
      });
      this.list.push({
        img: require(`../../static/public_images/video_bg6.jpg`),
        title: "企业贯彻落实《四川省安全生产条例》精要",
      });
      this.list.push({
        img: require(`../../static/public_images/video_bg7.jpg`),
        title: "《四川省安全生产举报奖励办法》解读",
      });
      this.list.push({
        img: require(`../../static/public_images/video_bg8.jpg`),
        title: "应急管理部关于进一步加强安全生产举报工作的指导意见",
      });
      //   this.loading = false;
      // }, 5000);
    },
    fnCurriculumDetails() {
      uni.navigateTo({
        url: "/pages/curriculum/details",
      });
    },
  },
};
</script>

<style scoped lang="scss">
.top {
  padding-top: 19rpx;
  display: flex;
  justify-content: space-between;

  .left {
    width: 510rpx;
    height: 169rpx;

    .premium_recommendation_first_zone {
      display: flex;
      justify-content: space-between;

      .item {
        width: 164rpx;
        position: relative;
        border: 2px solid transparent;
        border-radius: 4rpx;
        font-size: 0;
        height: 169rpx;

        &:first-child {
          width: 335rpx;
        }

        image {
          width: 100%;
          height: 100% !important;
          border-radius: 4rpx;
        }

        .title {
          width: 80%;
          font-size: 12rpx;
          color: #fff;
          position: absolute;
          bottom: 9rpx;
          left: 7rpx;
        }

        &.hover {
          border: 2rpx solid rgba(0, 180, 255, 0.79);
        }
      }
    }
  }

  .right {
    margin-left: 11rpx;
    flex: 1;

    .premium_recommendation_second_zone {
      .item {
        width: 164rpx;
        position: relative;
        border: 2px solid transparent;
        border-radius: 4rpx;
        font-size: 0;
        height: 81rpx;
        margin-top: 7rpx;

        &:first-child {
          margin-top: 0;
        }

        image {
          width: 100%;
          height: 100% !important;
          border-radius: 4rpx;
        }

        .title {
          width: 80%;
          font-size: 12rpx;
          color: #fff;
          position: absolute;
          bottom: 9rpx;
          left: 7rpx;
        }

        &.hover {
          border: 2rpx solid rgba(0, 180, 255, 0.79);
        }
      }
    }
  }
}

.bottom {
  margin-top: 10rpx;

  .premium_recommendation_third_zone {
    display: flex;
    justify-content: space-between;

    .item {
      width: 159rpx;
      position: relative;
      border: 2px solid transparent;
      border-radius: 4rpx;
      font-size: 0;
      height: 117rpx;

      image {
        width: 100%;
        height: 100% !important;
        border-radius: 4rpx;
      }

      .title {
        width: 80%;
        font-size: 12rpx;
        color: #fff;
        position: absolute;
        bottom: 9rpx;
        left: 7rpx;
      }

      &.hover {
        border: 2rpx solid rgba(0, 180, 255, 0.79);
      }
    }
  }
}
</style>