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 {