设备管理 样式调整

mark

2022-10-25 f20a554bdb24e9dfde9dc6a69d78595944f61d15

 src/components/Connect.vue

@@ -13,14 +13,11 @@
        </div>
        <div class="teleNum">010-84155885</div>
      </div>
      <router-link to="/connectUs">
        <div class="advice">
          <div class="title">
            <span class="iconfont">&#xe612;</span>建议反馈
          </div>
          <div class="des">您的每一条建议声音，我们都认真对待</div>
        </div>
      </router-link>

      <div class="advice" @click="jump1()">
        <div class="title"><span class="iconfont">&#xe612;</span>建议反馈</div>
        <div class="des">您的每一条建议声音，我们都认真对待</div>
      </div>
    </div>

    <div
@@ -30,7 +27,9 @@
    >
      <span class="iconfont">&#xe611;</span>联系我们
    </div>
    <div class="backToTop iconfont" @click="backToTop">&#xe610;</div>
    <div class="backToTop iconfont" v-if="showConnect" @click="backToTop">
      &#xe610;
    </div>
  </div>
</template>

@@ -39,7 +38,14 @@
  data() {
    return {
      isShowConnectBox: false, //固定定位弹层
      showConnect: false, //显示联系我们与回到顶部
    };
  },
  created() {
    window.addEventListener("scroll", this.scrollListener);
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollListener);
  },
  methods: {
    // 回到顶部
@@ -72,6 +78,25 @@
        _this.isShowConnectBox = false;
      }, 100);
    },
    //添加滚动监听
    scrollListener() {
      //页面滑动触发事件 (滚动条移动则调用是否显示返回顶部按钮事件)
      var a = document.documentElement.clientHeight; // 滚动容器的可视高
      var b = document.documentElement.scrollTop; // 滚动条距离顶部的高度
      var c = document.documentElement.scrollHeight; // 滚动容器的整个高度

      if (c === a + b) {
        //当滚动容器的可视高+滚动容器滚动了的高度（滚动条顶部距离滚动容器顶部的距离） = 滚动容器的整个高度时，说明滚动条到底了
        this.showConnect = true;
      } else {
        this.showConnect = false;
      }

      //检查滚动条是否在顶部，控制返回顶部按钮的隐藏和显示
    },
    jump1() {
      window.open("http://smartai.com/contact");
    },
  },
};
</script>