初始化

component/LevelProgress.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="level-container">
+    <!-- SVG 轨道 + 滤镜定义 -->
+    <svg class="level-svg" viewBox="0 0 500 150">
+      <!-- 高光滤镜定义 -->
+      <defs>
+        <filter id="glowFilter">
+          <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
+          <feColorMatrix type="matrix" values="
+                        1 0 0 0 0
+                        0 1 0 0 0
+                        0 0 1 0 0
+                        0 0 0 0.5 0" />
+          <feBlend in2="SourceGraphic" mode="normal" />
+        </filter>
+      </defs>
+
+      <!-- 绘制向上弯曲的轨道曲线 -->
+      <path class="track" d="M 50 75 
+                   Q 250 25 450 75" />
+			<template v-for="(ele,index) in lvList" :key="index">
+				<circle v-if="index === 0" :class="ele.level === currentIndex ? 'highlight-dot' : 'normal-dot'" cx="50" cy="75" r="6" />
+				<circle v-if="index === 1" :class="ele.level === currentIndex ? 'highlight-dot' : 'normal-dot'" cx="250" cy="50" r="8" fill="#fff"
+				  style="filter: drop-shadow(0 0 8px rgba(255,255,255,1));" />
+				  <circle v-if="index === 2" :class="ele.level === currentIndex ? 'highlight-dot' : 'normal-dot'" cx="450" cy="75" r="6" />
+			</template>     
+    </svg>
+	<template v-if="lvList && lvList.length">
+		<div v-for="(ele,index) in lvList" class="level-text" :class="`text-${index+1}`">{{`Lv.${ele.level}`}}</div>
+	</template>
+  </div>
+</template>
+<script>
+	export default {
+		props: {
+			lvList: {
+				type: Array,
+				default: () => [],
+			},
+			currentIndex:{
+				type: Number,
+				default: () => 0,
+			}
+		},
+	}
+
+</script>
+<style scoped>
+    .level-container {
+      position: relative;
+      width: 100%;
+      height: 110px;
+      /* 深色背景模拟原图 */
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .level-svg {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+
+    /* 绘制曲线轨道 */
+    .track {
+      stroke: rgba(255, 255, 255, 0.3);
+      stroke-width: 2;
+      fill: none;
+      stroke-linecap: round;
+      filter: url(#glowFilter);
+      /* 应用高光滤镜 */
+    }
+
+    /* Lv.2 高光节点样式 */
+    .highlight-dot {
+      fill: #fff;
+      filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.8));
+      /* 发光效果 */
+    }
+
+    /* 普通节点样式 */
+    .normal-dot {
+      fill: rgba(255, 255, 255, 0.3);
+    }
+
+    /* 文字样式 */
+    .level-text {
+      position: absolute;
+      color: #fff;
+      font-size: 14px;
+      bottom: 10px;
+    }
+
+    /* 文字位置 */
+    .text-1 {
+      left: 60rpx;
+    }
+
+    .text-2 {
+      /* left: 250px; */
+    }
+
+    .text-3 {
+      right: 60rpx;
+    }
+
+    /* SVG 高光滤镜定义 */
+    svg {
+      overflow: visible;
+    }
+
+    #glowFilter {
+      filterUnits: userSpaceOnUse;
+    }
+
+    #glowFilter feGaussianBlur {
+      stdDeviation: 3;
+      /* 高光模糊范围 */
+      result: blur;
+    }
+
+/*    #glowFilter feMerge {
+      <feMergeNode in="blur" /><feMergeNode in="SourceGraphic" />
+    } */
+</style>