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