| | |
| | | > |
| | | <span class="iconfont"></span>联系我们 |
| | | </div> |
| | | <div class="backToTop iconfont" @click="backToTop"></div> |
| | | <div class="backToTop iconfont" v-if="showConnect" @click="backToTop"></div> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | data() { |
| | | return { |
| | | isShowConnectBox: false, //固定定位弹层 |
| | | showConnect: false, //显示联系我们与回到顶部 |
| | | }; |
| | | }, |
| | | created() { |
| | | window.addEventListener("scroll", this.scrollListener); |
| | | }, |
| | | destroyed() { |
| | | window.removeEventListener("scroll", this.scrollListener); |
| | | }, |
| | | methods: { |
| | | // 回到顶部 |
| | |
| | | _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; |
| | | } |
| | | |
| | | //检查滚动条是否在顶部,控制返回顶部按钮的隐藏和显示 |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |
| | |
| | | background: #ffffff; |
| | | box-shadow: 0px 4px 12px rgba(0, 51, 128, 0.18); |
| | | border-radius: 8px; |
| | | z-index: 2; |
| | | |
| | | .tele, |
| | | .advice { |
| | |
| | | margin-top: 6px; |
| | | margin-left: 34px; |
| | | color: #0065ff; |
| | | font-size: 12px; |
| | | } |
| | | |
| | | .des { |
| | | margin-top: 6px; |
| | | margin-left: 34px; |
| | | color: #666666; |
| | | font-size: 12px; |
| | | } |
| | | } |
| | | |
| | |
| | | border-radius: 22px; |
| | | text-align: center; |
| | | line-height: 20px; |
| | | font-size: 14px; |
| | | cursor: pointer; |
| | | |
| | | &:hover { |