141 lines
3.2 KiB
Vue
141 lines
3.2 KiB
Vue
<template>
|
|
<div class="right_con">
|
|
<div class="kefu">
|
|
<ul>
|
|
<li>
|
|
<NuxtLink class="kf-gy kf-a1"><img src="@/assets/images/kf-a1.png" alt=""/></NuxtLink>
|
|
<span>定制方案</span>
|
|
</li>
|
|
<li>
|
|
<NuxtLink class="kf-gy kf-a1"><img src="@/assets/images/kf-b1.png" alt=""/></NuxtLink>
|
|
<span>13303358557 0335-8909696</span>
|
|
</li>
|
|
<li>
|
|
<NuxtLink class="kf-gy kf-a1"><img src="@/assets/images/kf-d1.png" alt=""/></NuxtLink>
|
|
<span>
|
|
<img src="@/assets/images/img19.png" alt=""/>
|
|
<img src="@/assets/images/img20.png" alt=""/>
|
|
</span>
|
|
</li>
|
|
<li v-show="showBackTop" class="back" @click="scrollToTop">
|
|
<div class="kf-gy kf-a1"><img src="@/assets/images/kf-e1.png" alt=""/></div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, onUnmounted } from "vue";
|
|
|
|
const showBackTop = ref(false);
|
|
|
|
const handleScroll = () => {
|
|
showBackTop.value = window.scrollY > 300;
|
|
};
|
|
|
|
const scrollToTop = () => {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: "smooth",
|
|
});
|
|
};
|
|
|
|
onMounted(() => {
|
|
window.addEventListener("scroll", handleScroll);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener("scroll", handleScroll);
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.kefu{
|
|
position:fixed;
|
|
z-index:99999;
|
|
top:30%;
|
|
right:50px;
|
|
width:48px;
|
|
ul{
|
|
li{
|
|
position:relative;
|
|
margin-bottom:12px;
|
|
list-style: none;
|
|
cursor: pointer;
|
|
a, div{
|
|
width:48px;
|
|
height:48px;
|
|
background:#fff;
|
|
border:1px solid #eee;
|
|
display:block;
|
|
text-align:center;
|
|
line-height:48px;
|
|
color:#333;
|
|
border-radius:50px;
|
|
box-shadow: 0 4px 16px rgba(28,67,125,.08);
|
|
transition: all 0.5s ease-out 0s;
|
|
font-size: 18px;
|
|
|
|
img{
|
|
width:24px;
|
|
height: 24px;
|
|
margin: 12px auto;
|
|
}
|
|
}
|
|
span{
|
|
position: absolute;
|
|
box-shadow: rgba(28, 67, 125, 0.08) 0 4px 16px;
|
|
font-size: 16px;
|
|
line-height: 22px;
|
|
top: 0;
|
|
text-align: center;
|
|
right: 20px;
|
|
padding: 16px 10px;
|
|
white-space: nowrap;
|
|
background: rgb(255, 255, 255);
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: rgba(180, 183, 192, 0.12);
|
|
border-image: initial;
|
|
border-radius: 4px;
|
|
transition: 0.3s;
|
|
font-weight: bold;
|
|
color: #1d78ff;
|
|
display: none;
|
|
img{
|
|
margin-right: 10px;
|
|
}
|
|
|
|
&::after {
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
background-color: inherit;
|
|
width: 12px;
|
|
height: 12px;
|
|
top: 20px;
|
|
right: -4.25px;
|
|
transform: rotate(315deg);
|
|
content: "";
|
|
transition: 250ms ease-in-out;
|
|
border-right: 1px solid rgba(180, 183, 192, 0.12);
|
|
border-bottom: 1px solid rgba(180, 183, 192, 0.12);
|
|
}
|
|
}
|
|
&:hover{
|
|
span{
|
|
display: block;
|
|
}
|
|
a,div{
|
|
background: #90ceff;
|
|
border:1px solid #90ceff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|