nuxtProject/components/sidebar.vue

<template>
  <div class="client-sidebar mta-hidden-xs">
    <ul>
      <!--      <li><a class="sidebar-default-box" :href="linkForKefu" target="_blank"><i></i>-->
      <!--        <p>在线资讯</p></a></li>-->
      <li>
        <div class="sidebar-default-box"><i></i>
          <p>电话资讯</p></div>
        <div class="sidebar-hover-box">
          <span>服务热线</span><h4>400-099-0883</h4>
        </div>
      </li>
      <li>
        <div class="sidebar-default-box"><i></i>
          <p>客户经理</p></div>
        <div class="sidebar-hover-box">
          <img :src="img1">
        </div>
      </li>
      <li v-if="btnFlag">
        <div class="sidebar-default-box">
          <i @click="backTop"></i>
          <p>置顶</p></div>
      </li>

    </ul>
  </div>
</template>

<script>
import {linkForKefu} from "~/defaultConfig"

export default {
  name: 'mtaSidebar',
  // vue的两个生命钩子，这里不多解释。
  // window对象，所有浏览器都支持window对象。它表示浏览器窗口，监听滚动事件
  mounted() {
    window.addEventListener('scroll', this.scrollToTop)
  },
  destroyed() {
    window.removeEventListener('scroll', this.scrollToTop)
  },
  data() {
    return {
      btnFlag: false,
      img1: require('static/codeImage/code-jingli.png'),
      linkForKefu
    }
  },
  methods: {
    // 点击图片回到顶部方法，加计时器是为了过渡顺滑
    backTop() {
      const that = this
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
        if (that.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 16)
    },

    // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
    scrollToTop() {
      const that = this
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      that.scrollTop = scrollTop
      if (that.scrollTop > 60) {
        that.btnFlag = true
      } else {
        that.btnFlag = false
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.client-sidebar {
  //display: none;
  position: fixed;
  z-index: 100;
  top: 100px;
  right: 20px;

  li {
    width: 84px;
    height: 68px;
    position: relative;
    cursor: pointer;
    margin-bottom: 14px;


    i {
      width: 30px;
      height: 30px;
      display: block;
      margin: 4px auto;
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat
    }

    p {
      font-size: 14px;
      color: #00b96b;
      text-align: center;
    }

    .sidebar-default-box {
      border: 1px solid #eee;
      box-sizing: border-box;
      background: #fff;
      z-index: 2;
      background: #fff;
      position: absolute;
      border-radius: 8px;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

    .sidebar-hover-box {
      width: 220px;
      height: 102px;
      display: block;
      padding: 24px;
      border: 1px solid #eee;
      transition: all 0.5s;
      position: absolute;
      right: -240px;
      background: #fff;
      top: 0;
      box-sizing: border-box;
      z-index: 1;

      span {
        font-size: 16px;
        display: block;
        color: #1f1f1f;
        margin-bottom: 10px
      }

      h4 {
        font-size: 18px;
        color: #00b96b;
        font-weight: bold;
      }

      img {
        height: 50px;
        width: auto;
      }
    }
  }

  li:hover {
    .sidebar-default-box {
    }

    .sidebar-hover-box {
      right: 92px;
    }
  }

  //li:nth-child(1) i {
  //  background-image: url("~static/gangweiIcon/z142.png");
  //}

  li:nth-child(1) i {
    background-image: url("~static/gangweiIcon/z143.png");
  }
  li:nth-child(1) {
    .sidebar-hover-box {
      width: 180px;
    }
  }


  li:nth-child(2) i {
    background-image: url("~static/gangweiIcon/z145.png");
  }

  li:nth-child(2) {
    .sidebar-hover-box {
      width: 220px;
      height: 220px;


      img {
        height: 170px;
        height: 170px;
      }
    }
  }

  li:nth-child(3) i {
    background-image: url("~static/gangweiIcon/z144.png");
  }
}
</style>