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

<template>
  <div class="page">
    <div class="page-top"></div>
    <div class="page-content">
      <keep-alive>
        <div class="list">
          <div
            class="section flex flex-col justify-center items-center rounded-md"
            v-for="item in list"
            :key="item.id"
          >
            <icon-image class="icon" :name="item.image"></icon-image>
            <div
              class="name mt-4"
              v-text="item.name"
              @click="toDetail(item)"
            ></div>
          </div>
        </div>
      </keep-alive>
    </div>
    <div class="page-footer flex flex-col justify-center">
      <div class="name mb-1">需要帮助吗？</div>
      <div class="contact">联系我们 +86 1382160616</div>
    </div>
  </div>
</template>

<script>
export default {
  layout: 'app-ldm',
  data() {
    return {
      list: [],
    }
  },
  asyncData() {
    return {
      list: [
        {
          id: 0,
          name: '授权认证',
          image: 'ldm-icon-approve.png',
          path: '/ldm/approve',
        },
        {
          id: 1,
          name: '官方产品资料',
          image: 'ldm-icon-database.png',
          path: '/ldm/database/package',
        },
      ],
    }
  },

  methods: {
    toDetail(item) {
      const hasLogin = this.$store.getters.accessToken
      if (item.id > 0 && !hasLogin) {
        this.$toast({ message: '请先登录', duration: 1000 })
        this.$store.commit('app/SHOW_LOGIN')
        return
      }
      this.$router.push(item.path)
    },
  },
}
</script>

<style scoped lang="scss">
@media screen and (min-width: 768px) {
  .page-top {
    height: 596px;
    background: url(https://static.caimei365.com/www/authentic/pc/ldm-bg-home.png)
      no-repeat center;
    background-size: auto 596px;
  }

  .page-content {
    width: 700px;
    margin: 0 auto;
    min-height: calc(100vh - 596px - 100px);
    overflow: hidden;
    .list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 124px;
      margin-bottom: 314px;
      .section {
        .icon {
          width: 120px;
          height: 120px;
        }

        .name {
          width: 241px;
          height: 73px;
          background: #000;
          text-align: center;
          line-height: 73px;
          color: #fff;
          font-size: 22px;
          cursor: pointer;
        }
      }
    }
  }

  .page-footer {
    position: relative;
    height: 100px;
    padding-left: 194px;
    background: linear-gradient(to bottom, #f1f1f1, #fdfdfd, #f1f1f1);
    .name {
      font-size: 24px;
      color: #9d9d9d;
    }
    .contact {
      font-size: 19px;
      color: #9d9d9d;
    }
    &::before {
      position: absolute;
      left: 120px;
      top: 50%;
      transform: translateY(-50%);
      content: '';
      display: block;
      width: 56px;
      height: 56px;
      background: url(https://static.caimei365.com/www/authentic/h5/ldm-icon-contact1.png)
        no-repeat center;
      background-size: 56px auto;
    }
  }
}

@media screen and (max-width: 768px) {
  .page-top {
    height: 59.6vw;
    background: url(https://static.caimei365.com/www/authentic/h5/ldm-bg-home.png);
    background-size: auto 59.6vw;
  }

  .page-content {
    min-height: calc(100vh - 59.6vw - 15.4vw);
    overflow: hidden;
    .list {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 10.9vw;
      .section {
        width: 80vw;
        height: 48vw;
        background: #f8f8f8;
        border: 0.1vw solid #bfbfbf;
        margin-bottom: 5.8vw;

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

        .name {
          width: 37.8vw;
          height: 11.4vw;
          background: #000;
          text-align: center;
          line-height: 11.4vw;
          color: #fff;
        }
      }
    }
  }

  .page-footer {
    position: relative;
    height: 15.4vw;
    padding-left: 12.5vw;
    background: linear-gradient(to bottom, #f1f1f1, #fdfdfd, #f1f1f1);
    .name {
      font-size: 3.2vw;
      color: #9d9d9d;
    }
    .contact {
      font-size: 2.6vw;
      color: #9d9d9d;
    }
    &::before {
      position: absolute;
      left: 2.4vw;
      top: 50%;
      transform: translateY(-50%);
      content: '';
      display: block;
      width: 7.5vw;
      height: 7.5vw;
      background: url(https://static.caimei365.com/www/authentic/h5/ldm-icon-contact1.png)
        no-repeat center;
      background-size: 7.4vw auto;
    }
  }
}
</style>