From 069d96b6b6f46601ff6198c37702ab7dac36f199 Mon Sep 17 00:00:00 2001 From: Peanut Date: Sun, 15 Mar 2026 09:25:55 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E5=A4=8D=E8=B7=AF=E5=BE=84?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=97=B6=E9=97=B4=E8=BD=B4=E8=8A=82=E7=82=B9?= =?UTF-8?q?=E5=8F=91=E5=85=89=E5=92=8C=E8=84=89=E5=86=B2=E5=8A=A8=E7=94=BB?= =?UTF-8?q?=EF=BC=88=E5=8E=9F=E5=9E=8B=E8=BF=98=E5=8E=9F=2070%=E2=86=9290%?= =?UTF-8?q?=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mini-program/src/pages/main/PathView.vue | 66 +++++++++++++----------- 1 file changed, 37 insertions(+), 29 deletions(-) diff --git a/mini-program/src/pages/main/PathView.vue b/mini-program/src/pages/main/PathView.vue index 504a493..ba3ab29 100644 --- a/mini-program/src/pages/main/PathView.vue +++ b/mini-program/src/pages/main/PathView.vue @@ -27,9 +27,7 @@ :key="index" class="timeline-item" > - - - + 节点 {{ index + 1 }} @@ -142,6 +140,10 @@ onMounted(() => { .target-card { padding: 40rpx; margin-bottom: 16rpx; + /* 金色玻璃态 + 左侧紫色边框 */ + border-left: 4rpx solid #C084FC; + box-shadow: inset 0 0 20rpx rgba(168, 85, 247, 0.05), + 0 4rpx 16rpx rgba(168, 85, 247, 0.1); } .target-label { @@ -174,53 +176,59 @@ onMounted(() => { left: 30rpx; top: 30rpx; bottom: 30rpx; - width: 2rpx; - background: linear-gradient(to bottom, #C084FC, rgba(192, 132, 252, 0.2), transparent); - opacity: 0.3; + width: 4rpx; + background: linear-gradient(180deg, + rgba(168, 85, 247, 0.4) 0%, + rgba(168, 85, 247, 0.2) 50%, + rgba(168, 85, 247, 0.05) 100% + ); + border-radius: 4rpx; + box-shadow: 0 0 15px rgba(168, 85, 247, 0.2); } .timeline-item { position: relative; } -.timeline-dot { +.timeline-node { position: absolute; left: -46rpx; top: 24rpx; width: 48rpx; height: 48rpx; border-radius: 50%; - border: 2rpx solid rgba(255, 255, 255, 0.1); - background: #0F071A; + background: linear-gradient(135deg, #A855F7 0%, #9333EA 100%); + border: 4rpx solid #C084FC; + /* 原型标准:节点发光 */ + box-shadow: 0 0 15px rgba(168, 85, 247, 0.4), + inset 0 0 10rpx rgba(255, 255, 255, 0.2); + z-index: 2; display: flex; align-items: center; justify-content: center; - z-index: 2; } -.timeline-dot.done { - border-color: #C084FC; - box-shadow: 0 0 30rpx rgba(192, 132, 252, 0.4); +.timeline-node.completed { + animation: node-pulse 2s ease-in-out infinite; } -.dot-inner { - width: 16rpx; - height: 16rpx; - border-radius: 50%; - background: rgba(255, 255, 255, 0.1); +@keyframes node-pulse { + 0%, 100% { + box-shadow: 0 0 15px rgba(168, 85, 247, 0.4), + inset 0 0 10rpx rgba(255, 255, 255, 0.2); + transform: scale(1); + } + 50% { + box-shadow: 0 0 25px rgba(168, 85, 247, 0.6), + inset 0 0 15rpx rgba(255, 255, 255, 0.3); + transform: scale(1.05); + } } -.dot-inner.done { - background: #C084FC; -} - -.dot-inner.pulse { - animation: pulse 2s ease-in-out infinite; -} - -@keyframes pulse { - 0%, 100% { opacity: 1; transform: scale(1); } - 50% { opacity: 0.6; transform: scale(1.2); } +.timeline-node.pending { + background: #0F071A; + border-color: rgba(255, 255, 255, 0.1); + box-shadow: 0 0 10px rgba(168, 85, 247, 0.1); } .step-card {