lab-mobile/src/views/learning/index.vue

<template>
  <div id="index">
    <admin-frame :useTop="false" :usePage="false" :useNav="false">
      <template v-slot:info>
        <van-col span="24" class="one">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item, index) in imageList" :key="index">
              <van-image :src="item.url"></van-image>
            </van-swipe-item>
          </van-swipe>
        </van-col>
        <van-col span="24" class="two">
          <van-grid :gutter="5" :column-num="2">
            <van-grid-item class="list" v-for="(item, index) in menu" :key="index" :to="item.router">
              <p>{{ item.label }}</p>
            </van-grid-item>
          </van-grid>
        </van-col>
      </template>
    </admin-frame>
  </div>
</template>

<script>
import adminFrame from '@common/src/components/mobile-frame/mobile-main.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'index',
  props: {},
  components: {
    adminFrame,
  },
  data: function () {
    return {
      // 轮播图
      imageList: [{ url: require('@a/lab-2.png') }],
      menu: [
        {
          label: '社会服务活动',
          router: '/learning/sociology/index',
        },
        {
          label: '技术服务活动',
          router: '/learning/technology/index',
        },
        {
          label: '科普活动',
          router: '/learning/science/index',
        },
        {
          label: '分析/建议/决策/咨询报告',
          router: '/learning/report/index',
        },
      ],
    };
  },
  async created() {},
  methods: {},
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.one {
  height: 200px;
  background-color: #fff;
  margin: 0 0 5px 0;
  .van-swipe {
    height: 200px;
    overflow: hidden;
  }
}
.two {
  .list {
    height: 80px;
    p {
      color: #fff;
      font-size: 14px;
      padding: 0px 5px;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      word-break: break-all;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
    /deep/.van-grid-item__content {
      border-radius: 10px;
    }
  }
  .list:nth-child(1) {
    /deep/.van-grid-item__content {
      background-color: #ffc0cb;
    }
  }
  .list:nth-child(2) {
    /deep/.van-grid-item__content {
      background-color: #ee82ee;
    }
  }
  .list:nth-child(3) {
    /deep/.van-grid-item__content {
      background-color: #7b68ee;
    }
  }
  .list:nth-child(4) {
    /deep/.van-grid-item__content {
      background-color: #4169e1;
    }
  }
  .list:nth-child(5) {
    /deep/.van-grid-item__content {
      background-color: #00bfff;
    }
  }
  .list:nth-child(6) {
    /deep/.van-grid-item__content {
      background-color: #48d1cc;
    }
  }
  .list:nth-child(7) {
    /deep/.van-grid-item__content {
      background-color: #98fb98;
    }
  }
}
</style>