78 lines
1.5 KiB
Vue
78 lines
1.5 KiB
Vue
|
||
<style lang="scss" scoped>
|
||
.signal-gps-grid-list-ctn{
|
||
position: relative;
|
||
width: 60rpx;
|
||
margin-left: 12rpx;
|
||
}
|
||
.signal-gps-grid-list{
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-top: 6rpx;
|
||
}
|
||
.signal-gps-grid{
|
||
width: 6rpx;
|
||
height: 24rpx;
|
||
background-color: #BADED6;
|
||
margin-right: 4rpx;
|
||
&:last-child{
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<template>
|
||
<view class="signal-gps-grid-list-ctn">
|
||
<view class="signal-gps-grid-list">
|
||
<view class="signal-gps-grid" v-for="(item,index) in 5" :key="index"></view>
|
||
</view>
|
||
<view class="signal-gps-grid-list">
|
||
<view class="signal-gps-grid" v-for="(item,index) in getValueInterval" style="background-color:#11BF96;" :key="index"></view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
/*
|
||
* 信号组件
|
||
* value: 80以上5格，60以上4格，40以上3格，20以上2格，0以上1格，0无信号
|
||
* 例:<signal value="80"></signal>
|
||
*/
|
||
export default{
|
||
data(){
|
||
return {}
|
||
},
|
||
props:{
|
||
// 信号值0-100
|
||
value:{
|
||
type: [String, Number],
|
||
default: 0
|
||
}
|
||
},
|
||
computed:{
|
||
getValueInterval(){
|
||
let value = parseInt(this.value);
|
||
if (value >=80) {
|
||
return 5;
|
||
} else if(value >=60 && value < 80){
|
||
return 4;
|
||
} else if(value >=40 && value < 60){
|
||
return 3;
|
||
} else if(value >=20 && value < 40){
|
||
return 2;
|
||
}else if(value >0 && value < 20){
|
||
return 1;
|
||
} else{
|
||
return 0;
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|