customerService

<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>