<template>
|
<div class="Connect">
|
<!-- 固定按钮 -->
|
<div
|
class="connectBox"
|
@mouseenter="showConnectBox"
|
@mouseleave="hiddenConnectBox"
|
v-if="isShowConnectBox"
|
>
|
<div class="tele">
|
<div class="title">
|
<span class="iconfont"></span>售前咨询电话
|
</div>
|
<div class="teleNum">010-84155885</div>
|
</div>
|
|
<div class="advice" @click="jump1()">
|
<div class="title"><span class="iconfont"></span>建议反馈</div>
|
<div class="des">您的每一条建议声音，我们都认真对待</div>
|
</div>
|
</div>
|
|
<!-- <div
|
class="connect"
|
@mouseenter="showConnectBox"
|
@mouseleave="hiddenConnectBox"
|
>
|
<span class="iconfont"></span>联系我们
|
</div> -->
|
<div class="backToTop iconfont" v-if="showConnect" @click="backToTop">
|

|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
isShowConnectBox: false, //固定定位弹层
|
showConnect: false, //显示联系我们与回到顶部
|
};
|
},
|
created() {
|
window.addEventListener("scroll", this.scrollListener);
|
},
|
destroyed() {
|
window.removeEventListener("scroll", this.scrollListener);
|
},
|
methods: {
|
// 回到顶部
|
backToTop() {
|
const _this = this;
|
cancelAnimationFrame(_this.timer);
|
_this.timer = requestAnimationFrame(function fn() {
|
var oTop =
|
document.body.scrollTop || document.documentElement.scrollTop;
|
if (oTop > 0) {
|
document.body.scrollTop = document.documentElement.scrollTop =
|
oTop - 90;
|
//这里的100代表回到顶部的速度，可以按照实际情况调整
|
_this.timer = requestAnimationFrame(fn);
|
} else {
|
cancelAnimationFrame(_this.timer);
|
}
|
});
|
},
|
showConnectBox() {
|
if (this.ConnectTimer) {
|
clearTimeout(this.ConnectTimer);
|
this.ConnectTimer = null;
|
}
|
this.isShowConnectBox = true;
|
},
|
hiddenConnectBox() {
|
const _this = this;
|
this.ConnectTimer = setTimeout(() => {
|
_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/consult");
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.connectBox {
|
position: fixed;
|
right: 94px;
|
top: 662px;
|
padding: 10px 0;
|
box-sizing: border-box;
|
width: 268px;
|
height: 149px;
|
background: #ffffff;
|
box-shadow: 0px 4px 12px rgba(0, 51, 128, 0.18);
|
border-radius: 8px;
|
z-index: 2;
|
|
.tele,
|
.advice {
|
box-sizing: border-box;
|
padding: 0 20px 0 10px;
|
overflow: hidden;
|
height: 64px;
|
|
&:hover {
|
background-color: #fafafa;
|
|
span,
|
.title,
|
.teleNum,
|
.des {
|
color: #0065ff;
|
}
|
}
|
}
|
|
.advice {
|
cursor: pointer;
|
}
|
|
.title {
|
display: flex;
|
align-items: center;
|
margin-top: 8px;
|
font-weight: bold;
|
font-size: 14px;
|
}
|
|
span {
|
margin-right: 10px;
|
font-size: 24px;
|
font-weight: 700;
|
}
|
|
.teleNum {
|
margin-top: 6px;
|
margin-left: 34px;
|
color: #0065ff;
|
font-size: 12px;
|
}
|
|
.des {
|
margin-top: 6px;
|
margin-left: 34px;
|
color: #666666;
|
font-size: 12px;
|
}
|
}
|
|
.connect {
|
position: fixed;
|
box-sizing: border-box;
|
width: 44px;
|
height: 120px;
|
top: 662px;
|
right: 40px;
|
z-index: 2;
|
padding: 10px 14px;
|
background: #ffffff;
|
box-shadow: 0px 4px 8px rgba(85, 93, 106, 0.12);
|
border-radius: 22px;
|
text-align: center;
|
line-height: 20px;
|
font-size: 14px;
|
cursor: pointer;
|
|
&:hover {
|
color: #0065ff;
|
box-shadow: 0px 4px 12px rgba(0, 51, 128, 0.18);
|
}
|
}
|
|
.backToTop {
|
position: fixed;
|
right: 40px;
|
top: 802px;
|
width: 44px;
|
height: 44px;
|
border-radius: 50%;
|
color: #666;
|
text-align: center;
|
line-height: 44px;
|
font-size: 18px;
|
background-color: #fff;
|
box-shadow: 0px 4px 8px rgba(85, 93, 106, 0.12);
|
cursor: pointer;
|
|
&:hover {
|
color: #0065ff;
|
box-shadow: 0px 4px 12px rgba(0, 51, 128, 0.18);
|
}
|
}
|
</style>
|
