jingrowlocal/jingrow-framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

美化返回顶部图标样式

Browse Source
This commit is contained in:
jingrow 2025-11-02 03:11:56 +08:00
parent b072f5eeca
commit eed4098dff
1 changed files with 16 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
apps/jingrow/frontend/src/app/layouts/BackToTop.vue
View File

@ -7,23 +7,23 @@
:title="t('Back to top')" :title="t('Back to top')"
> >
<!-- SVG 圆形进度条 --> <!-- SVG 圆形进度条 -->
<svg class="progress-ring" viewBox="0 0 56 56"> <svg class="progress-ring" viewBox="0 0 48 48">
<!-- 背景圆圈（灰色） --> <!-- 背景圆圈（灰色） -->
<circle <circle
class="progress-ring-bg" class="progress-ring-bg"
cx="28" cx="24"
cy="28" cy="24"
r="26" r="23"
fill="none" fill="none"
stroke="#e5e7eb" stroke="#d1d5db"
stroke-width="2" stroke-width="2"
/> />
<!-- 进度圆圈（绿色） --> <!-- 进度圆圈（绿色） -->
<circle <circle
class="progress-ring-progress" class="progress-ring-progress"
cx="28" cx="24"
cy="28" cy="24"
r="26" r="23"
fill="none" fill="none"
stroke="#22c55e" stroke="#22c55e"
stroke-width="2" stroke-width="2"
@ -56,7 +56,7 @@ const scrollProgress = ref(0)
const registeredContainers = ref<(Element | Window)[]>([]) const registeredContainers = ref<(Element | Window)[]>([])
// SVG 圆形进度条的半径 // SVG 圆形进度条的半径
const radius = 26 const radius = 23
const circumference = computed(() => 2 * Math.PI * radius) const circumference = computed(() => 2 * Math.PI * radius)
// 进度条偏移量（用于显示进度） // 进度条偏移量（用于显示进度）
@ -240,8 +240,8 @@ onUnmounted(() => {
right: 24px; right: 24px;
bottom: 24px; bottom: 24px;
z-index: 1000; z-index: 1000;
width: 56px; width: 48px;
height: 56px; height: 48px;
background: white; background: white;
border: 1px solid #e5e7eb; border: 1px solid #e5e7eb;
border-radius: 50%; border-radius: 50%;
@ -249,14 +249,13 @@ onUnmounted(() => {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: 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); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
} }
.back-to-top-btn:hover { .back-to-top-btn:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
border-color: #22c55e;
} }
.progress-ring { .progress-ring {
@ -266,14 +265,17 @@ onUnmounted(() => {
width: 100%; width: 100%;
height: 100%; height: 100%;
transform: rotate(-90deg); transform: rotate(-90deg);
pointer-events: none;
} }
.progress-ring-bg { .progress-ring-bg {
transition: stroke 0.3s ease; transition: stroke 0.3s ease;
opacity: 1;
} }
.progress-ring-progress { .progress-ring-progress {
transition: stroke-dashoffset 0.1s linear; transition: stroke-dashoffset 0.1s linear;
opacity: 1;
} }
.arrow-icon { .arrow-icon {
@ -283,10 +285,6 @@ onUnmounted(() => {
transition: color 0.3s ease; transition: color 0.3s ease;
} }
.back-to-top-btn:hover .arrow-icon {
color: #16a34a;
}
/* 移动端调整位置 */ /* 移动端调整位置 */
@media (max-width: 768px) { @media (max-width: 768px) {
.back-to-top-btn { .back-to-top-btn {