caimei-authentic-www/views/RossHomePage.vue

<template>
  <div class="page">
    <div class="page-top">
      <img class="logo" src="~/assets/theme-images/ross/ross-logo.png" />
      <span></span>
      <div class="name mt-2">来自西班牙殿堂级创新技术</div>
    </div>
    <div class="page-content">
      <keep-alive>
        <div class="list">
          <div
            class="section flex flex-col justify-center items-center"
            v-for="item in list"
            :key="item.id"
            @click="toDetail(item)"
            @mouseover="onMouseover(item)"
            @mouseleave="onMouselevel(item)"
          >
            <div class="icon-image" :class="'item' + item.id"></div>
            <div class="name mt-4" v-text="item.name"></div>
          </div>
        </div>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { toAuthorization } from '~/utils'
import { isWeChat } from '~/utils/validator'
export default {
  name: 'RossHomePage',
  data() {
    return {
      list: [],
    }
  },
  computed: {
    ...mapGetters([
      'supplierInfo',
      'authUserId',
      'appId',
      'routePrefix',
      'accountType',
    ]),
  },
  created() {
    this.initEntryItems()
  },
  beforeDestroy() {
    this.$removeStorage(this.routePrefix, 'login_redicret')
  },
  methods: {
    // 初始化入口图标
    initEntryItems() {
      this.list = [
        {
          id: 0,
          name: '正品授权申请入口',
          path: '/form/club-register',
          active: false,
        },
        {
          id: 1,
          name: '正品授权',
          path: '/approve',
          active: false,
        },
        {
          id: 2,
          name: '资料库',
          path: '/database/article',
          active: false,
        },
        {
          id: 3,
          name: '意见反馈',
          path: '/feedback',
          active: false,
        },
      ]
    },

    toDetail(item) {
      const hasLogin = this.$store.getters.accessToken
      // 保存登录重定向路由
      this.$setStorage(
        this.routePrefix,
        'login_redicret',
        this.routePrefix + item.path
      )
      if (item.id > 1 && !hasLogin) {
        // 在微信浏览器中使用微信授权登录
        if (isWeChat() && this.appId && this.accountType === 2) {
          const payload = {
            authUserId: this.authUserId,
            routePrefix: this.routePrefix,
          }
          return toAuthorization(this.appId, payload)
        }
        this.$toast({ message: '请先登录', duration: 1000 })
        this.$store.commit('app/SHOW_LOGIN')
        return
      }

      if (item.id === 0) {
        const url = this.routePrefix + item.path
        this.$router.push(url)
      } else {
        const url = this.routePrefix + item.path
        this.$router.push(url)
      }
    },
    onMouseover(item) {
      const isPc = this.$store.getters.isPc
      if (!isPc) return
      item.active = true
    },
    onMouselevel(item) {
      const isPc = this.$store.getters.isPc
      if (!isPc) return
      item.active = false
    },
  },
}
</script>

<style scoped lang="scss">
// pc 端
@media screen and (min-width: 768px) {
  .page {
    min-height: calc(100vh - 160px);
    @include themify($themes) {
      background-size: auto 100%;
      background: themed('pc-banner-home') no-repeat center;
    }
  }

  .page-top {
    width: 1200px;
    margin: 0 auto;
    padding: 75px 0 129px;
    .logo {
      display: block;
      width: 119px;
    }

    span {
      display: block;
      width: 46px;
      height: 3px;
      margin: 40px 0 32px;
      @include themify($themes) {
        background: themed('color');
      }
    }

    .name {
      color: #fff;
      font-size: 34px;
    }
  }

  .page-content {
    width: 1200px;
    margin: 0 auto;

    .list {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .section {
      width: 284px;
      height: 260px;
      margin-left: auto;
      margin-right: auto;
      background: rgba(255, 255, 255, 0.69);
      cursor: pointer;
      border-radius: 4px;
      transition: all 0.4s;

      &:hover {
        transform: translateY(-10px);
      }

      &:nth-child(2n-1) {
        transform: translateY(60px);

        &:hover {
          transform: translateY(50px);
        }
      }

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

        &.item0 {
          @include themify($themes) {
            background-image: themed('pc-icon-home-edit');
          }
        }

        &.item1 {
          @include themify($themes) {
            background-image: themed('pc-icon-home-approve');
          }
        }

        &.item2 {
          @include themify($themes) {
            background-image: themed('pc-icon-home-doc');
          }
        }

        &.item3 {
          @include themify($themes) {
            background-image: themed('pc-icon-home-feedback');
          }
        }
      }

      &:hover {
        @include themify($themes) {
          background: url(~assets/theme-images/ross/pc-icon-approve-hover.png)
            no-repeat center;
          background-size: 100% auto;
        }

        .icon-image {
          &.item0 {
            background-image: url(~assets/theme-images/common/pc-icon-edit-active.png) !important;
          }

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

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

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

        .name {
          color: #fff;
        }
      }

      .icon {
        width: 86px;
        height: 86px;
      }

      .name {
        font-size: 24px;
        color: #404040;
      }
    }
  }
}

// 移动 端
@media screen and (max-width: 768px) {
  .page {
    min-height: calc(100vh - 12.8vw - 12.4vw);
    padding-bottom: 16vw;
    @include themify($themes) {
      background: themed('h5-banner-home') no-repeat center;
      background-size: cover;
    }
  }

  .page-top {
    padding: 11.5vw 7.2vw 15.5vw;
    .logo {
      display: block;
      width: 14.3vw;
    }

    span {
      display: block;
      width: 7.2vw;
      height: 0.5vw;
      background: #fff;
      margin: 6.2vw 0 4vw;
    }

    .name {
      font-size: 4.8vw;
      color: #fff;
    }
  }

  .page-content {
    .list {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 0 7.2vw;
    }

    .section {
      width: 41vw;
      height: 38vw;
      box-shadow: 0px 0.4vw 2vw rgba(0, 6, 32, 0.08);
      margin-bottom: 8.8vw;
      border-radius: 4px;

      &:nth-child(2n-1) {
        transform: translateY(16vw);
      }

      .icon {
        width: 16vw;
        height: 16vw;
      }

      .name {
        font-size: 4vw;
        color: #fff;
      }

      .icon-image {
        width: 16vw;
        height: 16vw;
        background-size: 16vw 16vw;
        background-repeat: no-repeat;
        background-position: center;

        &.item0 {
          background-image: url(~assets/theme-images/common/pc-icon-edit-active.png) !important;
        }

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

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

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

      @include themify($themes) {
        background: url(~assets/theme-images/ross/h5-icon-approve-hover.png)
          no-repeat center;
        background-size: 100% auto;
      }
    }
  }
}
</style>