<template>
<div class="signal-box">
<ul>
<li :class="signalValue == 1 ? 'signal-red': signalValue == 2 ? 'signal-yellow': signalValue == 3 ? 'signal-green' : 'signal-default'"></li>
<li :class="signalValue == 1 ? 'signal-default': signalValue == 2 ? 'signal-yellow': signalValue == 3 ? 'signal-green' : 'signal-default'"></li>
<li :class="signalValue == 1 ? 'signal-default': signalValue == 2 ? 'signal-default': signalValue == 3 ? 'signal-green' : 'signal-default'"></li>
</ul>
</div>
</template>
<script>
export default {
name: 'SignalTower',
props: {
signalValue: {
type: Number,
default: 1
}
},
computed: {
}
}
</script>
<style scoped>
.signal-box {
display: inline-block;
}
ul {
position: relative;
width: 20px;
height: 20px;
margin: 0;
}
li {
width: 5px;
position: absolute;
bottom: 0;
border-radius: 10px;
list-style: none;
}
ul li:nth-child(1) {
height: 6px;
left: 0px;
}
ul li:nth-child(2) {
height: 9px;
left: 6px;
}
ul li:nth-child(3) {
height: 12px;
left: 12px;
}
.signal-default {
background: rgba(0, 0, 0, .5);
}
.signal-red {
background-color: red;
}
.signal-yellow {
background-color: #E7D055;
}
.signal-green {
background-color: #40D7C1;
}
</style>
使用:
效果: