caimei-authentic-www/pages/_template/app/approve/index.vue

<template>
  <div class="page">
    <div class="page-top flex flex-col justify-center items-center">
      <!-- <img class="logo" :src="supplierInfo.logo" /> -->
      <div class="name mt-2" v-text="supplierInfo.shopName + '正品授权'"></div>
    </div>
    <div class="page-content">
      <div class="list">
        <div
          class="section flex flex-col justify-center items-center mt-5 mb-5"
          v-for="item in list"
          :key="item.id"
          @click="toDetail(item)"
        >
          <div class="icon-image" :class="'item' + item.id"></div>
          <div class="mt-3 mb-3"></div>
          <div class="name" v-text="item.name"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  layout: 'app',
  data() {
    return {
      list: [],
    }
  },
  computed: {
    ...mapGetters(['supplierInfo', 'routePrefix', 'themeName']),
  },
  created() {
    this.list = this.generateList()
  },
  methods: {
    generateList() {
      return [
        {
          id: 1,
          name: '机构认证',
          path: '/approve/club',
        },
        {
          id: 2,
          name: '设备认证',
          path: '/approve/device',
        },
        {
          id: 3,
          name: this.themeName === 'ross' ? '体疗师认证' : '医师认证',
          path: '/approve/personnel/operate',
        },
      ]
    },

    toDetail(item) {
      const url = this.routePrefix + item.path
      this.$router.push(url)
    },
  },
}
</script>

<style scoped lang="scss">
// pc 端
@media screen and (min-width: 768px) {
  .page {
    min-height: calc(100vh - 80px - 80px);
    background-color: #fff;
  }
  .page-top {
    height: 360px;
    @include themify($themes) {
      background: themed('pc-banner-approve');
      background-size: auto 360px;
    }
    .logo {
      display: block;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: #fff;
    }
    .name {
      font-size: 30px;
      color: #fff;
    }
  }
  .page-content {
    width: 1200px;
    margin: 0 auto;
    .list {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .section {
      width: 380px;
      height: 220px;
      background-size: 380px 220px;
      margin-left: auto;
      margin-right: auto;
      cursor: pointer;
      transition: all 0.4s;

      &:hover {
        box-shadow: 0 0 32px rgba(0, 0, 0, 0.4);
      }
      .icon {
        width: 48px;
        height: 48px;
      }
      .line {
        width: 24px;
        height: 2px;
        @include themify($themes) {
          background-color: themed('color');
        }
      }
      .name {
        font-size: 20px;
        color: #fff;
      }

      .icon-image {
        width: 48px;
        height: 48px;
        background-size: 48px 48px;
        background-repeat: no-repeat;
        background-position: center;

        &.item1 {
          background-image: url(~assets/theme-images/common/pc-icon-club.png);
        }

        &.item2 {
          background-image: url(~assets/theme-images/common/pc-icon-device.png);
        }

        &.item3 {
          background-image: url(~assets/theme-images/common/pc-icon-doctor.png);
        }
      }

      &:nth-child(1) {
        @include themify($themes) {
          background-image: themed('pc-entry-club-bg');
        }
      }
      &:nth-child(2) {
        @include themify($themes) {
          background-image: themed('pc-entry-device-bg');
        }
      }
      &:nth-child(3) {
        @include themify($themes) {
          background-image: themed('pc-entry-doctor-bg');
        }
      }
    }
  }
}

// 移动 端
@media screen and (max-width: 768px) {
  .page-top {
    height: 46vw;
    @include themify($themes) {
      background: themed('h5-banner-approve');
      background-size: auto 46vw;
    }
    .logo {
      display: block;
      width: 14.8vw;
      height: 14.8vw;
      border-radius: 50%;
      background: #fff;
    }
    .name {
      font-size: 4vw;
      color: #fff;
    }
  }
  .page-content {
    .section {
      width: 92vw;
      height: 42vw;
      background-size: 92vw 42vw;
      margin-left: auto;
      margin-right: auto;
      .icon {
        width: 8.8vw;
        height: 8.8vw;
      }
      .line {
        width: 4.2vw;
        height: 0.3vw;
        @include themify($themes) {
          background-color: themed('color');
        }
      }
      .name {
        font-size: 4.2vw;
        color: #fff;
      }

      .icon-image {
        width: 48px;
        height: 48px;
        background-size: 48px 48px;
        background-repeat: no-repeat;
        background-position: center;

        &.item1 {
          background-image: url(~assets/theme-images/common/pc-icon-club.png);
        }

        &.item2 {
          background-image: url(~assets/theme-images/common/pc-icon-device.png);
        }

        &.item3 {
          background-image: url(~assets/theme-images/common/pc-icon-doctor.png);
        }
      }

      &:nth-child(1) {
        @include themify($themes) {
          background-image: themed('pc-entry-club-bg');
        }
      }
      &:nth-child(2) {
        @include themify($themes) {
          background-image: themed('pc-entry-device-bg');
        }
      }
      &:nth-child(3) {
        @include themify($themes) {
          background-image: themed('pc-entry-doctor-bg');
        }
      }
    }
  }
}
</style>