Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-14 09:38:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(backTop): 优化 hover 样式

Browse Source
This commit is contained in:
BTMuli
2023-04-03 09:09:01 +08:00
parent 1383c8a4d1
commit 87370c4d9e
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/t-backTop.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<transition name="fade"> <transition name="fade">
<div class="back-top" v-show="canTop" @click="handleScrollTop"> <div class="back-top" v-show="canTop" @click="handleScrollTop">
<img src="../assets/icons/arrow-top.svg" class="back-icon" alt="back-icon" /> <img src="../assets/icons/arrow-top.svg" alt="back-icon" />
</div> </div>
</transition> </transition>
</template> </template>
@@ -56,19 +56,19 @@ onMounted(() => {
width: 60px; width: 60px;
height: 60px; height: 60px;
border-radius: 50%; border-radius: 50%;
border: 0; transition: all 0.3s linear;
transition: all 0.3s;
} }
.back-top :hover { .back-top :hover {
border: 5px solid #4b5366;
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
transition: all 0.3s; transform: scale(0.9);
transition: all 0.3s linear;
box-shadow: 0 0 10px 5px #546d8b;
} }
.back-icon { .back-top img {
transition: all 0.3s; transition: all 0.3s linear;
width: 60px; width: 60px;
height: 60px; height: 60px;
} }