128 lines
3.0 KiB
Vue
128 lines
3.0 KiB
Vue
|
<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>
|