123 lines
2.0 KiB
Vue
123 lines
2.0 KiB
Vue
<template>
|
|
<view class="fixed">
|
|
<view class="signal" v-if="!online">
|
|
<view class="bar red" v-for="i in 5"></view>
|
|
<view class="bar-no">
|
|
<u-icon name="close"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="signal" v-else-if="Number(value) > 0 && Number(value) <= 16">
|
|
<view v-for="(_, i) in 4" :class="['bar', Number(value) > (8 * i) ? 'orange' : '']" />
|
|
<view :class="['bar', Number(value) > 30 ? 'green' : '']" />
|
|
</view>
|
|
<view class="signal" v-else>
|
|
<view v-for="(_, i) in 4" :class="['bar', Number(value) > (8 * i) ? 'green' : '']" />
|
|
<view :class="['bar', Number(value) > 30 ? 'green' : '']" />
|
|
</view>
|
|
<text>({{ value }})</text>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "Signal",
|
|
props: {
|
|
// 在线状态
|
|
online: {
|
|
type: Boolean,
|
|
default: false,
|
|
required: true
|
|
},
|
|
// 信号强度
|
|
value: {
|
|
type: [String, Number],
|
|
default: 0,
|
|
required: true
|
|
},
|
|
// 运营商
|
|
isp: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
// 显示数值
|
|
showValue: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
fontColor: {
|
|
type: String,
|
|
default: "#333",
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
barno: true,
|
|
}
|
|
},
|
|
methods: {}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
// 信号
|
|
.signal {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
height: 17px;
|
|
|
|
.bar {
|
|
width: 2px;
|
|
background-color: #999;
|
|
border-radius: 2px;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.bar:nth-child(1) {
|
|
height: 4px;
|
|
}
|
|
|
|
.bar:nth-child(2) {
|
|
height: 7px;
|
|
|
|
}
|
|
|
|
.bar:nth-child(3) {
|
|
height: 10px;
|
|
|
|
}
|
|
|
|
.bar:nth-child(4) {
|
|
height: 13px;
|
|
|
|
}
|
|
|
|
.bar:nth-child(5) {
|
|
height: 16px;
|
|
|
|
}
|
|
|
|
.bar.red {
|
|
background-color: #e60012;
|
|
}
|
|
|
|
.bar.orange {
|
|
background-color: #ffa200;
|
|
}
|
|
|
|
.bar.green {
|
|
background-color: #39ac4f;
|
|
}
|
|
|
|
.bar-no {
|
|
position: absolute;
|
|
left: -2px;
|
|
bottom: 3px;
|
|
|
|
::v-deep.u-icon__icon {
|
|
font-weight: bold;
|
|
font-size: 18rpx !important;
|
|
}
|
|
}
|
|
}
|
|
</style> |