97 lines
1.6 KiB
Vue
97 lines
1.6 KiB
Vue
<script setup>
|
|
import { useDark, useToggle } from '@vueuse/core'
|
|
import {ChatDotRound} from "@element-plus/icons-vue";
|
|
import {ref} from "vue";
|
|
|
|
const showChat = ref(false)
|
|
const toggleChat = () => {
|
|
showChat.value = !showChat.value
|
|
}
|
|
useDark({
|
|
selector: 'html',
|
|
attribute: 'class',
|
|
valueDark: 'dark',
|
|
valueLight: 'light'
|
|
})
|
|
|
|
useDark({
|
|
onChanged(dark) { useToggle(dark) }
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<header>
|
|
<div class="wrapper">
|
|
<router-view/>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<style scoped>
|
|
header {
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.chat-button {
|
|
position: fixed;
|
|
right: 30px;
|
|
bottom: 30px;
|
|
z-index: 1000;
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 30px;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
|
|
animation: float 3s ease-in-out infinite;
|
|
background: linear-gradient(145deg, #4dabff, #409EFF);
|
|
border: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
@keyframes float {
|
|
0% {
|
|
transform: translateY(0px);
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
|
|
}
|
|
50% {
|
|
transform: translateY(-10px);
|
|
box-shadow: 0 15px 15px rgba(0, 0, 0, 0.1);
|
|
}
|
|
100% {
|
|
transform: translateY(0px);
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
|
|
}
|
|
}
|
|
|
|
.chat-button:hover {
|
|
animation-play-state: paused;
|
|
background: linear-gradient(145deg, #5bb4ff, #50a8ff);
|
|
transform: scale(1.05);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.chat-button:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.chat-button .el-icon {
|
|
font-size: 28px;
|
|
animation: pulse 2s infinite;
|
|
color: #ffffff;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.1);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
</style>
|