美化返回顶部图标样式
This commit is contained in:
parent
b072f5eeca
commit
eed4098dff
@ -7,23 +7,23 @@
|
||||
:title="t('Back to top')"
|
||||
>
|
||||
<!-- SVG 圆形进度条 -->
|
||||
<svg class="progress-ring" viewBox="0 0 56 56">
|
||||
<svg class="progress-ring" viewBox="0 0 48 48">
|
||||
<!-- 背景圆圈(灰色) -->
|
||||
<circle
|
||||
class="progress-ring-bg"
|
||||
cx="28"
|
||||
cy="28"
|
||||
r="26"
|
||||
cx="24"
|
||||
cy="24"
|
||||
r="23"
|
||||
fill="none"
|
||||
stroke="#e5e7eb"
|
||||
stroke="#d1d5db"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<!-- 进度圆圈(绿色) -->
|
||||
<circle
|
||||
class="progress-ring-progress"
|
||||
cx="28"
|
||||
cy="28"
|
||||
r="26"
|
||||
cx="24"
|
||||
cy="24"
|
||||
r="23"
|
||||
fill="none"
|
||||
stroke="#22c55e"
|
||||
stroke-width="2"
|
||||
@ -56,7 +56,7 @@ const scrollProgress = ref(0)
|
||||
const registeredContainers = ref<(Element | Window)[]>([])
|
||||
|
||||
// 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 {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user