gil/web-temp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix. top버튼 게임 공통 이미지 적용

Browse Source
This commit is contained in:
clkim
2025-10-27 10:46:03 +09:00
parent 634818c7e1
commit 24a934576c
4 changed files with 9 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
layers/components/atoms/Button/ScrollTop.vue
View File

@@ -11,7 +11,6 @@ const handleScrollToTop = () => {
<template>
<Transition name="fade">
<button v-if="showBtn" class="btn-top" @click="handleScrollToTop">
<AtomsIconsTopLine class="icon-top" />
<span class="sr-only">top</span>
</button>
</Transition>
@@ -19,24 +18,11 @@ const handleScrollToTop = () => {
<style scoped>
.btn-top {
@apply relative rounded-full flex items-center justify-center bg-black/20 z-[100]
@apply relative rounded-full bg-[image:var(--button-top)] bg-center bg-cover bg-no-repeat z-[100]
w-[40px] h-[40px] md:w-[48px] md:h-[48px]
before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:border before:border-[rgba(255,255,255,0.06)] before:rounded-full before:transition-all before:duration-300 before:ease-in-out
after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:rounded-full after:opacity-0 after:transition-all after:duration-300 after:ease-in-out;
}
.btn-top:hover {
@apply after:opacity-10;
}
.btn-top:hover .icon-top {
@apply opacity-100;
}
.icon-top {
@apply opacity-50 transition-opacity duration-300 ease-in-out;
}
[data-theme='light'] {
.btn-top {
@apply bg-white/10;
}
}
</style>