diff --git a/apps/jingrow/frontend/src/app/layouts/BackToTop.vue b/apps/jingrow/frontend/src/app/layouts/BackToTop.vue index 44161be..51dc081 100644 --- a/apps/jingrow/frontend/src/app/layouts/BackToTop.vue +++ b/apps/jingrow/frontend/src/app/layouts/BackToTop.vue @@ -7,23 +7,23 @@ :title="t('Back to top')" > - + ([]) // SVG 圆形进度条的半径 -const radius = 26 +const radius = 23 const circumference = computed(() => 2 * Math.PI * radius) // 进度条偏移量(用于显示进度) @@ -240,8 +240,8 @@ onUnmounted(() => { right: 24px; bottom: 24px; z-index: 1000; - width: 56px; - height: 56px; + width: 48px; + height: 48px; background: white; border: 1px solid #e5e7eb; border-radius: 50%; @@ -249,14 +249,13 @@ onUnmounted(() => { display: flex; align-items: center; justify-content: center; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .back-to-top-btn:hover { transform: translateY(-2px); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); - border-color: #22c55e; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); } .progress-ring { @@ -266,14 +265,17 @@ onUnmounted(() => { width: 100%; height: 100%; transform: rotate(-90deg); + pointer-events: none; } .progress-ring-bg { transition: stroke 0.3s ease; + opacity: 1; } .progress-ring-progress { transition: stroke-dashoffset 0.1s linear; + opacity: 1; } .arrow-icon { @@ -283,10 +285,6 @@ onUnmounted(() => { transition: color 0.3s ease; } -.back-to-top-btn:hover .arrow-icon { - color: #16a34a; -} - /* 移动端调整位置 */ @media (max-width: 768px) { .back-to-top-btn {