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

<template>
  <view>
    <!--    <app-loading v-if="loading" />-->
    <view class="top">
      <unitv-zone
        id="home_first_zone"
        class="home_first_zone"
        up="tabs_zone"
        down="home_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="fnNavigate('/pages/curriculum/details')"
        >
          <image :src="item.img" mode="widthFix" />
          <view class="title line-1">{{ item.title }}</view>
        </unitv-item>
      </unitv-zone>
    </view>
    <view class="bottom">
      <view class="left">
        <unitv-zone
          id="home_third_zone"
          class="home_third_zone"
          up="home_first_zone"
          right="home_fourth_zone"
          :values="[0, 1]"
          :column="1"
          :row="2"
        >
          <unitv-item
            :item="0"
            class="item"
            @click="fnNavigate('/pages/mine/curriculum/index?tabIndex=1')"
          >
            <image src="/static/xuexi.png" mode="widthFix" />
          </unitv-item>
          <unitv-item
            :item="1"
            class="item"
            @click="fnNavigate('/pages/mine/curriculum/index?tabIndex=2')"
          >
            <image src="/static/examination.png" mode="widthFix" />
          </unitv-item>
        </unitv-zone>
      </view>
      <view class="right">
        <unitv-zone
          id="home_fourth_zone"
          class="home_fourth_zone"
          up="home_first_zone"
          left="home_third_zone"
          :values="list.slice(2)"
          :column="list.slice(2).length"
        >
          <unitv-item
            v-for="(item, index) in list.slice(2)"
            :key="index"
            :item="index"
            class="item"
            @click="fnNavigate('/pages/curriculum/details')"
          >
            <image :src="item.img" mode="widthFix" />
            <view class="title line-1">{{ item.title }}</view>
          </unitv-item>
        </unitv-zone>
      </view>
    </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.loading = false;
      // }, 5000);
    },
    fnNavigate(url) {
      uni.navigateTo({ url });
    },
  },
};
</script>

<style scoped lang="scss">
.top {
  padding-top: 19rpx;

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

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

      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;
  color: #fff;
  font-size: 12rpx;
  display: flex;

  .left {
    width: 175rpx;

    .home_third_zone {
      .item {
        margin-top: 10rpx;
        width: 100%;
        border-radius: 4rpx;
        height: 57rpx;
        text-align: center;
        border: 2rpx solid transparent;

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

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

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

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

    .home_fourth_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>