water_affairs/pages/facility/modules/network.vue

<template>
    <div class="test">
        <view v-if="tips" class="text">{{ tips }}</view>
        <view class="box">
            <view class='item'><text v-if="num >= 10" /></view>
            <view class='item'><text v-if="num >= 20" /></view>
            <view class='item'><text v-if="num >= 30" /></view>
            <view class='item'><text v-if="num >= 40" /></view>
            <view class='item'><text v-if="num >= 50" /></view>
            <view class='item'><text v-if="num >= 60" /></view>
            <view class='item'><text v-if="num >= 70" /></view>
            <view class='item'><text v-if="num >= 80" /></view>
            <view class='item'><text v-if="num >= 90" /></view>
            <view class='item'><text v-if="num >= 100" /></view>
        </view>
    </div>
</template>
  
<script>
export default {
    name: 'network',
    props: {
        num: {
            type: [String, Number],
            default: 0
        },
        tips: {
            type: String,
        }
    }
}
</script>
  
<style lang="less" scoped>
.test {
    position: absolute;
    display: flex;
    top: 10px;
    left: 14px;

    .text {
        color: #fff;
        font-size: 12px;
        margin-top: 4px;
    }

    .box {
        width: 40px;
        height: 20px;
        display: flex;
        justify-content: space-around;
        overflow: hidden;
        padding: 0;

        .item {
            width: 8%;
            border-radius: 2px;
            background: rgba(0, 0, 0, 0.5);
            position: relative;

            text {
                position: absolute;
                top: 0;
                left: 0;
                display: inline-block;
                width: 100%;
                height: 100%;
                background: limegreen;
            }

            &:nth-child(1) {
                height: 4px;
                margin-top: 18px;

                text {
                    background: rgb(255, 0, 0);
                }
            }

            &:nth-child(2) {
                height: 6px;
                margin-top: 16px;

                text {
                    background: rgb(255, 50, 0);
                }
            }

            &:nth-child(3) {
                height: 8px;
                margin-top: 14px;

                text {
                    background: rgb(255, 90, 0);
                }
            }

            &:nth-child(4) {
                height: 10px;
                margin-top: 12px;

                text {
                    background: rgb(255, 130, 0);
                }
            }

            &:nth-child(5) {
                height: 12px;
                margin-top: 10px;
            }

            &:nth-child(6) {
                height: 14px;
                margin-top: 8px;
            }

            &:nth-child(7) {
                height: 16px;
                margin-top: 6px;
            }

            &:nth-child(8) {
                height: 18px;
                margin-top: 4px;
            }

            &:nth-child(9) {
                height: 20px;
                margin-top: 2px;
            }

            &:nth-child(10) {
                height: 22px;
                margin-top: 0px;
            }
        }
    }
}
</style>