|
@@ -108,7 +108,7 @@
|
|
|
<ul class="list-plans flex justify-evenly mb-4">
|
|
|
<li v-for="item in plans" class="pt-7 cursor-pointer hover:brightness-125"
|
|
|
:class="{ 'active': item.id === currentPlan }" @click="handlePickPlan(item)">
|
|
|
- <div class="text-base">{{ item.feature }}</div>
|
|
|
+ <div class="text-base"><span class="tuli" :style="{backgroundColor:item.color}"></span>{{ item.feature }}</div>
|
|
|
<div class="text-sm py-1">距离 <span class="num">{{ item.distance }}</span> 公里</div>
|
|
|
<div class="text-sm">风险度:<span class="num">{{ item.risk }}</span></div>
|
|
|
</li>
|
|
@@ -235,9 +235,9 @@ const results = ref([
|
|
|
])
|
|
|
|
|
|
let plans = ref([
|
|
|
- { id: '1',name:'originalPath', feature: '接近原方案', distance: '', risk: '50' },
|
|
|
- { id: '2',name:'safePath', feature: '地面风险较低', distance: '', risk: '10' },
|
|
|
- { id: '3',name:'shortestPath', feature: '距离最短', distance: '', risk: '50' },
|
|
|
+ { id: '1',name:'originalPath', feature: '接近原方案',color:'#FFA500', distance: '', risk: '50' },
|
|
|
+ { id: '2',name:'safePath', feature: '地面风险较低',color:'#00FF00', distance: '', risk: '10' },
|
|
|
+ { id: '3',name:'shortestPath', feature: '距离最短',color:'#FFA5FF', distance: '', risk: '50' },
|
|
|
])
|
|
|
|
|
|
function handlePickPlan(plan) {
|
|
@@ -622,7 +622,12 @@ onBeforeUnmount(() => {
|
|
|
background: url('../../../assets/images/page/bg-plan.png');
|
|
|
background-size: 100% !important;
|
|
|
text-align: center;
|
|
|
-
|
|
|
+ .tuli{
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 4px;
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ }
|
|
|
.num {
|
|
|
color: #8CBCFF;
|
|
|
}
|