dl_site_nuxt/components/side-nav.vue

<template>
  <div class="side-content">
    <ul class="side-nav">
      <li class="side-item" v-for="(item, index) in sideiItem" :key="index">
        <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>
    <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>

export default {
  name: 'SideNav',
  data() {
    return {
      sideiItem: [
        { 
          icon: require('../assets/image/icon/contact.png'),
          label: this.$t('common.Contact'),
          desc: `<div>
              <h6>${this.$t('contactUs.contactUs')}</h6>
              <p>0086 182 5311 2969</p>
            </div>`
        },
        { 
          icon: require('../assets/image/icon/online.png'),
          label: this.$t('common.Online'),
        },
        { 
          icon: require('../assets/image/icon/whats.png'),
          label: this.$t('common.Whats'),
        },
        { 
          icon: require('../assets/image/icon/email1.png'),
          label: this.$t('common.E-mail'),
        }
      ]
    }
  },
  methods:{
    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>