OpenPlatForm/pages/domain.vue

<template>
  <div class="control">
    <Header />

    <div class="nuxt-child">
      <nuxt-child keep-alive />

    </div>

    <!-- 页面浮动功能点 -->
    <div class="suspension-box">
      <el-tooltip effect="dark" content="投诉建议" placement="left">
        <div class="item">
          <i class="iconfont MinIcontousu"></i>
        </div>
      </el-tooltip>
      <el-tooltip effect="dark" placement="left">
        <div slot="content">
          <img class="tooltip-img" src="@/static/img/boos.png" alt="" />
          <p class="tooltip-p">扫码添加专属客服</p>
        </div>
        <div class="item">
          <i class="iconfont MinIconlianxi"></i>
        </div>
      </el-tooltip>
      <el-tooltip effect="dark" content="回到顶部" placement="left">
        <div class="item" @click="onScrollInto">
          <i class="iconfont MinIconhuidaodingbu"></i>
        </div>
      </el-tooltip>
    </div>
  </div>
</template>


<script>
import Header from "@/components/domain/header";

export default {
  meta: { title: "控制台" },

  components: {
    Header,
  },
  methods: {
    // 回到顶部
    onScrollInto: function () {
      // 控制回到该元素可见范围内
      // document.getElementById("target").scrollIntoView();
      // 带过渡效果的回到顶部
      const upRoll = setInterval(() => {
        const top = document.documentElement.scrollTop; // 每次获取页面被卷去的部分
        const speed = top / 10; // 每次滚动多少 （步长值）
        if (document.documentElement.scrollTop !== 0) {
          document.documentElement.scrollTop -= speed; // 不在顶部 每次滚动到的位置
        } else {
          clearInterval(upRoll); // 回到顶部清除定时器
        }
      }, 20);
    },

  },
};
</script>

<style lang="scss" scoped>
.control {
  width: 100%;
  // min-height: calc(100vh - 80px);
  min-height: 100vh;
  background: #f7f8fa;
}

.suspension-box {
  position: fixed;
  width: 52px;
  right: 20px;
  top: 60%;
  z-index: 99;
  .item {
    width: 52px;
    height: 52px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #dddddd;
    box-shadow: 0px 2px 10px 0px rgba(51, 51, 51, 0.1);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.6s, box-shadow 0.6s;
    i {
      font-size: 25px;
      color: #515151;
      transition: color 0.6s;
    }
  }
  .item:hover {
    background-color: #1890ff;
    box-shadow: 0px 2px 10px 0px rgba(24, 144, 255, 0.6);
    transition: background-color 0.6s, box-shadow 0.6s;
    i {
      color: #fff;
      transition: color 0.6s;
    }
  }
}
.tooltip-img {
  width: 112px;
  height: 112px;
}
.tooltip-p {
  text-align: center;
}

.nuxt-child {
  width: 1200px;
  margin: 20px auto 0;
  padding-bottom: 20px;
}


</style>