vue手搓悬浮在线客服按钮

html 复制代码
<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>
相关推荐
琹箐34 分钟前
Ant ASpin自定义 indicator 报错
前端·javascript·typescript
小小小小小惠38 分钟前
Responsetype blob会把接口接收的二进制文件转换成blob格式
前端·javascript
爱电摇的小码农38 分钟前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
爱编程的喵1 小时前
React入门实战:从静态渲染到动态状态管理
前端·javascript
Tttian6221 小时前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm
唐叔在学习2 小时前
不用装插件!3轮对话,我用油猴脚本+AI复刻了掘金闪念笔记,真香!
javascript·浏览器
AliciaIr2 小时前
深入React事件机制:解密“合成事件”与“事件委托”的底层奥秘
javascript·react.js
一只毛驴2 小时前
面试:SASS/LESS/SCSS区别
css
chao_7892 小时前
CSS表达式——下篇【selenium】
css·python·selenium·算法
元气小嘉2 小时前
前端技术小结
开发语言·前端·javascript·vue.js·人工智能