nuxtProject/components/sidebar.vue

<template>
  <div class="client-sidebar mta-hidden-xs">
      <ul>
          <li><a class="sidebar-default-box"><i></i><p>在线资讯</p></a></li>
          <li>
            <div class="sidebar-default-box"><i @click="backTop"></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"><i @click="backTop"></i><p>置顶</p></li>
      </ul>
  </div>
</template>

<script>
    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')
        }
      },
      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: 300px;
    right: 0;
    li{
      width: 94px;height: 102px;position: relative;
      i{width: 45px;height: 40px;display: block;margin: 16px auto;background-position: center;background-size: contain;background-repeat: no-repeat}
      p{font-size:18px;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;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: -150px;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(2) i{background-image: url("~static/gangweiIcon/z143.png");}
    li:nth-child(3) i{background-image: url("~static/gangweiIcon/z145.png");}
    li:nth-child(4) i{background-image: url("~static/gangweiIcon/z144.png");}
}
</style>