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 {