Mars
d2c0b575b7
将玩家端组件与核心页面全面切换为统一主题变量，优化卡片、按钮、弹窗、列表和盘口相关模块的视觉表现，并补充多语言文案以匹配新的交互与布局风格。 Co-authored-by: Cursor <cursoragent@cursor.com>
80 lines
1.7 KiB
Vue
80 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { toRef } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useBackToTop } from '../composables/useBackToTop';
|
|
|
|
const props = defineProps<{
|
|
scrollEl: HTMLElement | null;
|
|
aboveNav?: boolean;
|
|
}>();
|
|
|
|
const { t } = useI18n();
|
|
const { visible, scrollToTop } = useBackToTop(toRef(props, 'scrollEl'));
|
|
</script>
|
|
|
|
<template>
|
|
<Transition name="back-top-fade">
|
|
<button
|
|
v-if="visible"
|
|
type="button"
|
|
class="back-top-btn"
|
|
:class="{ 'above-nav': aboveNav }"
|
|
:aria-label="t('common.back_to_top')"
|
|
@click="scrollToTop"
|
|
>
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<path
|
|
d="M12 5.5 6 11.5l1.4 1.4 3.6-3.6V18h2V9.3l3.6 3.6 1.4-1.4-6-6Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</Transition>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.back-top-btn {
|
|
position: fixed;
|
|
right: 16px;
|
|
bottom: calc(12px + env(safe-area-inset-bottom, 0px));
|
|
z-index: 120;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 50%;
|
|
border: none;
|
|
background: var(--gradient-primary);
|
|
color: #FFFFFF;
|
|
box-shadow: var(--shadow-glow), 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
cursor: pointer;
|
|
transition: opacity 0.2s, transform 0.2s;
|
|
}
|
|
|
|
.back-top-btn.above-nav {
|
|
bottom: calc(68px + env(safe-area-inset-bottom, 0px));
|
|
}
|
|
|
|
.back-top-btn:active {
|
|
opacity: 0.9;
|
|
transform: scale(0.96);
|
|
}
|
|
|
|
.back-top-btn svg {
|
|
width: 22px;
|
|
height: 22px;
|
|
}
|
|
|
|
.back-top-fade-enter-active,
|
|
.back-top-fade-leave-active {
|
|
transition: opacity 0.2s ease, transform 0.2s ease;
|
|
}
|
|
|
|
.back-top-fade-enter-from,
|
|
.back-top-fade-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(8px);
|
|
}
|
|
</style>
|