dl_site_nuxt/components/side-nav.vue

<template>
  <div class="side-content">
    <no-ssr>
      <ul class="side-nav">
        <li 
          class="side-item" 
          v-for="(item, index) in sideiItem" 
          :key="index"
          @click="jump(item)"
        >
          <div class="side-label">
            <img :src="item.icon" :alt="item.label" />
            <h4>{{ item.label }}</h4>
          </div>
          <div v-if="item.desc" class="side-desc" v-html="item.desc"></div>
        </li>
      </ul>
    </no-ssr>
    <div class="top-btn" @click="goTop">
      <div class="side-label">
        <img src="~/assets//image/icon/top.png" alt="返回顶部" />
        <h4>{{ $t('common.TOP') }}</h4>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'SideNav',
  data() {
    return {
      maxCatgId: ''
    }
  },
  computed: {
    ...mapState({
      footerInfo: state => state.footerInfo
    }),
    sideiItem() {
      return [
        {
          icon: require('../assets/image/icon/contact.png'),
          label: this.$t('common.Contact'),
          url: `tel:${this.footerInfo.tel}`,
          thirdSoft: 'Tel',
          desc: `<div">
              <h6>${this.$t('contactUs.contactUs')}</h6>
              <p>${this.footerInfo.tel}</p>
            </div>`
        },
        {
          icon: require('../assets/image/icon/online.png'),
          label: this.$t('common.Online'),
          url: `/inquiry?maxCatgId=${this.maxCatgId}`
        },
        {
          icon: require('../assets/image/icon/whats.png'),
          label: this.$t('common.Whats'),
          thirdSoft: 'WhatsApp',
          url: `https://wa.me/${this.footerInfo.whatsapp}`,
          desc: `<div>
            <h6>${this.$t('common.Whats')}</h6>
            <p>${this.footerInfo.whatsapp}</p>
          </div>`
        },
        {
          icon: require('../assets/image/icon/email1.png'),
          label: this.$t('common.E-mail'),
          thirdSoft: 'Email',
          url: `mailto:${this.footerInfo.email}`,
          desc: `<div>
            <h6>${this.$t('common.E-mail')}</h6>
            <p>${this.footerInfo.email}</p>
          </div>`
        }
      ]
    },
  },
  beforeMount() {
    this.$axios.get('/web/getCatgIdApp?catgName=Contact').then(res => {
      this.maxCatgId = res.data
    })
  },
  methods:{
    async jump(row) {
      let data = {
        equipment: this.$store.state.device,
        thirdSoft: row.thirdSoft,
      }
      if (row.thirdSoft) {
        try {
          await this.$axios.post('/web/thirdItemSave', data)
        } catch(err) {
          console.log(err);
        }
      }
      if (row.url) {
        window.open(row.url)
      }
    },
    goTop() {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }
  }
}
</script>

<style lang="scss" scoped>
.side-content {
  position: fixed;
  top: 40%;
  right: 1rem;
  z-index: 999;
}
.side-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  @mixin active {
    .side-desc {
      width: max-content;
      padding: .625rem 1.375rem;
      visibility: visible;
    }
  }
  .side-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    &:hover {
      @include active;
    }
    .side-label {
      width: 4.5rem;
      height: 4.5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      box-shadow: 0px 2px 6px 1px rgba(1,95,232,0.13);
      img {
        width: 1.5rem;
        height: 1.5rem;
        margin-bottom: .3125rem;
      }
      h4 {
        color: #323436;
        font-size: .75rem;
      }
    }
    .side-desc {
      width: 0;
      height: 4.5rem;
      visibility: hidden;
      background-color: #015fe8;
      color: #fff;
    }
  }
  .side-item-active {
    @include active;
  }
}

.top-btn {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
  .side-label {
    width: 4.5rem;
    height: 4.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    box-shadow: 0px 2px 6px 1px rgba(1,95,232,0.13);
    img {
      width: 1.5rem;
      height: 1.5rem;
      margin-bottom: .3125rem;
    }
    h4 {
      color: #323436;
      font-size: .75rem;
    }
  }
}

</style>