vue手搓悬浮在线客服按钮

1. <template>
2.   <div id="app">
3.   <Header></Header>
4.     <!-- 悬浮按钮 -->
5.     <div class="floating-module">
6.         <button class="floating-button" id="online-service" @click="kefu()">
7.             <img src="@/assets/icon/客服.png" alt="在线客服">
8.         </button>
9.         <button class="floating-button" id="phone-service" @click="dianhua()">
10.             <img src="@/assets/icon/电话.png" alt="电话咨询">
11.         </button>
12.     </div>
14.     <!-- 路由挂载 -->
15.     <router-view></router-view>
17.   <Footer></Footer>
18.   </div>
19. </template>
21. <script>
22. import Header from '@/components/Header/Header'
23. import Footer from '@/components/Footer/Footer'
25. export default {
26.   name: 'App',
27.   components: {
28.     Header,
29.     Footer
30.   },
31.   methods:{
32.     kefu(){
33.       alert('客服')
34.     },
35.     dianhua(){
36.       alert('电话')
37.     }
38.   }
39. }
40. </script>
42. <style>
43. #app {
44.   font-family: Avenir, Helvetica, Arial, sans-serif;
45.   -webkit-font-smoothing: antialiased;
46.   -moz-osx-font-smoothing: grayscale;
47.   /* text-align: center; */
48.   /* color: #2c3e50; */
49.   /* margin-top: 60px; */
50.   /* padding-top:100px; */
51. }
52. a{
53.   text-decoration: none;
54.   color: #000000;
55. }
56. li{
57.   list-style: none;
58. }
59. *{
60.   margin: 0;
61.   padding: 0;
62. }
63. @media screen and (max-width:768px) {
64.   /* #app {
65.     padding-top:200px;
66.   } */
67. }
69. .floating-module {
70.             position: fixed;
71.             right: 10px;
72.             top: 50%;
73.             transform: translateY(-50%);
74.             display: flex;
75.             flex-direction: column;
76.             align-items: center;
77.             z-index: 999;
78.         }
79.         .floating-button {
80.             width: 50px;
81.             height: 50px;
82.             background-color: #ffffff;
83.             color: white;
84.             border: none;
85.             border-radius: 50%;
86.             margin: 5px 0;
87.             display: flex;
88.             align-items: center;
89.             justify-content: center;
90.             cursor: pointer;
91.             box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
92.             transition: background-color 0.3s, transform 0.3s;
93.         }
94.         .floating-button:hover {
95.             background-color: #4095e5;
96.             transform: scale(1.1);
97.         }
98.         .floating-button img {
99.             width: 50%;
100.             height: 50%;
101.         }
103. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。