vue手搓悬浮在线客服按钮
<template><div id="app">
<Header></Header>
<!-- 悬浮按钮 -->
<div class="floating-module">
<button class="floating-button" id="online-service" @click="kefu()">
<img src="@/assets/icon/客服.png" alt="在线客服">
</button>
<button class="floating-button" id="phone-service" @click="dianhua()">
<img src="@/assets/icon/电话.png" alt="电话咨询">
</button>
</div>
<!-- 路由挂载 -->
<router-view></router-view>
<Footer></Footer>
</div>
</template>
<script>
import Header from '@/components/Header/Header'
import Footer from '@/components/Footer/Footer'
export default {
name: 'App',
components: {
Header,
Footer
},
methods:{
kefu(){
alert('客服')
},
dianhua(){
alert('电话')
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* text-align: center; */
/* color: #2c3e50; */
/* margin-top: 60px; */
/* padding-top:100px; */
}
a{
text-decoration: none;
color: #000000;
}
li{
list-style: none;
}
*{
margin: 0;
padding: 0;
}
@media screen and (max-width:768px) {
/* #app {
padding-top:200px;
} */
}
.floating-module {
position: fixed;
right: 10px;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
align-items: center;
z-index: 999;
}
.floating-button {
width: 50px;
height: 50px;
background-color: #ffffff;
color: white;
border: none;
border-radius: 50%;
margin: 5px 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
transition: background-color 0.3s, transform 0.3s;
}
.floating-button:hover {
background-color: #4095e5;
transform: scale(1.1);
}
.floating-button img {
width: 50%;
height: 50%;
}
</style>
https://i-blog.csdnimg.cn/direct/aea9fc748bad4fe29e82df706d4ecff4.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]