caimei-authentic-www/pages/ph/index.vue

<template>
  <div class="page">
    <div class="page-top flex flex-col justify-center items-center">
      <img class="logo" src="https://picsum.photos/200/200" />
      <span class="name mt-2">上海品辉医疗科技有限公司</span>
    </div>
    <div class="page-content">
      <keep-alive>
        <div class="list">
          <div
            class="section flex flex-col justify-center items-center mt-6 mb-6 rounded-md"
            v-for="item in list"
            :key="item.id"
            @click="toDetail(item)"
            @mouseover="onMouseover(item)"
            @mouseleave="onMouselevel(item)"
          >
            <icon-image
              class="icon"
              :name="item.image"
              v-if="!item.active"
            ></icon-image>
            <icon-image class="icon" :name="item.hover" v-else></icon-image>
            <div class="name mt-4" v-text="item.name"></div>
          </div>
        </div>
      </keep-alive>
    </div>
  </div>
</template>

<script>
export default {
  layout: 'app',
  data() {
    return {
      list: [],
    }
  },
  asyncData() {
    return {
      list: [
        {
          id: 0,
          name: '授权认证',
          image: 'icon-approve.png',
          hover: 'icon-approve-active.png',
          path: '/ph/approve',
          active: false,
        },
        {
          id: 1,
          name: '资料库',
          image: 'icon-doc.png',
          hover: 'icon-doc-active.png',
          path: '/ph/database/article',
          active: false,
        },
        {
          id: 2,
          name: '意见反馈',
          image: 'icon-feedback.png',
          hover: 'icon-feedback-active.png',
          path: '/ph/feedback',
          active: false,
        },
      ],
    }
  },
  created() {},
  methods: {
    toDetail(item) {
      this.$router.push(item.path)
    },
    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-top {
    height: 360px;
    background: url(https://static.caimei365.com/www/authentic/pc/bg-home.png);
    background-size: auto 360px;
    .logo {
      display: block;
      width: 120px;
      height: 120px;
      border-radius: 50%;
    }
    .name {
      font-size: 30px;
      color: #fff;
    }
  }

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

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

    .section {
      width: 380px;
      height: 260px;
      margin-left: auto;
      margin-right: auto;
      background-color: #fff;
      transition: all 0.4s;
      cursor: pointer;

      &:hover {
        background-color: #bc1724;
        transform: translateY(-10px);

        .name {
          color: #fff;
        }
      }

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

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

// 移动 端
@media screen and (max-width: 768px) {
  .page-top {
    height: 46vw;
    background: url(https://static.caimei365.com/www/authentic/h5/bg-home.png);
    background-size: auto 46vw;
    .logo {
      display: block;
      width: 14.8vw;
      height: 14.8vw;
      border-radius: 50%;
    }
    .name {
      font-size: 4vw;
      color: #fff;
    }
  }

  .page-content {
    .section {
      width: 85.6vw;
      height: 58vw;
      margin-left: auto;
      margin-right: auto;
      box-shadow: 0px 0.4vw 2vw rgba(0, 6, 32, 0.08);

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

      .name {
        font-size: 4.8vw;
        color: #404040;
      }
    }
  }
}
</style>