<template>
<div class="customer-service-panel">
<div class="mice-chain" @click="goMiceChain">
<div
class="mice-chain-cont"
:class="current === 1 ? 'activeMice' : ''"
@mouseenter="current = 1"
@mouseleave="current = 0"
>
<img
class="mice-chain-img"
:src="current === 1 ? miceChainActive : miceChain"
alt=""
/>
</div>
</div>
<div class="customer-service">
<div class="customer-item" :class="current === 2 ? 'active' : ''">
<div class="customer-cont" v-if="current === 2">
<div class="service-box">
<div class="tel-box">
<div class="tel-title">客服电话</div>
<div class="tel-val">0755 - 83220948</div>
</div>
<div class="day-box">周一至周五<br />9:30 ~ 18:30</div>
</div>
</div>
<div
class="customer-title"
@mouseenter="current = 2"
@mouseleave="current = 0"
>
<img
:src="current === 2 ? serviceActive : service"
class="icon-img"
alt=""
/>
</div>
</div>
<div class="customer-item" :class="current === 3 ? 'active' : ''">
<div class="customer-cont code-wrap" v-if="current === 3">
<div class="qrCode">
<div class="code">
<img :src="code" alt="" />
</div>
<div class="code-tip">微信扫一扫<br />关注公众号咨询</div>
</div>
</div>
<div
class="customer-title"
@mouseenter="current = 3"
@mouseleave="current = 0"
>
<img
:src="current === 3 ? qrCodeActive : qrCode"
class="icon-img"
alt=""
/>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "customerService",
data() {
return {
current: 0,
isMobile: Number(localStorage.getItem("ismobile")),
miceChain: require("@/assets/customerService/miceChain.png"),
miceChainActive: require("@/assets/customerService/miceChainActive.png"),
qrCode: require("@/assets/customerService/qrCode.png"),
qrCodeActive: require("@/assets/customerService/qrCodeActive.png"),
service: require("@/assets/customerService/service.png"),
serviceActive: require("@/assets/customerService/serviceActive.png"),
code: require("@/assets/customerService/code.png"),
};
},
methods: {
// 跳转会链通官网
goMiceChain() {
var tempwindow = window.open("_blank");
tempwindow.location = "https://www.micechain.cn/";
},
},
};
</script>
<style lang='scss' scoped>
.customer-service-panel {
.mice-chain {
position: fixed;
right: 5px;
bottom: 240px;
z-index: 99999999999;
.mice-chain-cont {
width: 62px;
height: 77px;
box-shadow: 2px 2px 8px 0px rgba(203, 219, 243, 0.47);
border-radius: 4px;
background: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.mice-chain-img {
width: 60px;
height: 61px;
}
}
.activeMice {
background: #0064ff !important;
}
.customer-service {
position: fixed;
right: 20px;
bottom: 120px;
z-index: 99999999999;
.customer-item {
margin-bottom: 13px;
position: relative;
.customer-title {
width: 40px;
height: 40px;
background: #ffffff;
border-radius: 4px;
box-shadow: 2px 2px 8px 0px rgba(203, 219, 243, 0.47);
display: flex;
justify-content: center;
align-items: center;
.icon-img {
width: 24px;
height: 24px;
display: block;
}
}
.customer-cont {
// width: 170px;
background: #f9fbfe;
box-shadow: 0px 0px 8px 0px rgba(203, 219, 243, 0.8);
position: absolute;
right: 60px;
top: -30px;
// position: relative;
}
.code-wrap {
top: -50px;
.qrCode::after {
content: "";
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #fff;
position: absolute;
top: 60px;
right: -10px;
}
}
.service-box {
width: 170px;
height: 154px;
display: flex;
flex-direction: column;
position: relative;
.tel-box {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
.tel-title {
font-size: 18px;
font-family: PingFangSC, PingFangSC-Medium;
font-weight: 500;
text-align: center;
color: #333333;
line-height: 18px;
margin-bottom: 16px;
}
.tel-val {
font-size: 16px;
font-family: SourceHanSansCN, SourceHanSansCN-Bold;
font-weight: 700;
text-align: center;
color: #0064ff;
line-height: 24px;
}
}
.day-box {
height: 54px;
background: #ffffff;
font-size: 14px;
font-family: PingFangSC, PingFangSC-Medium;
font-weight: 500;
text-align: center;
color: #333333;
line-height: 18px;
letter-spacing: 3px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
}
.service-box::after {
content: "";
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #fff;
position: absolute;
top: 40px;
right: -10px;
}
.qrCode {
width: 140px;
height: 180px;
background: #f9fbfe;
box-shadow: 0px 0px 8px 0px rgba(203, 219, 243, 0.8);
display: flex;
flex-direction: column;
.code {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
img {
width: 125px;
height: 125px;
}
}
.code-tip {
display: flex;
flex-direction: column;
justify-content: space-around;
height: 50px;
background: #ffffff;
border-radius: 0px 0px 2px 2px;
font-size: 14px;
font-family: PingFangSC, PingFangSC-Medium;
font-weight: 500;
text-align: center;
color: #333333;
line-height: 18px;
}
}
.customer-title:hover + .customer-cont {
display: block;
}
}
.customer-item:hover {
cursor: pointer;
}
.active {
.customer-title {
background: #0064ff !important;
}
}
}
}
</style>