Rank 排名标签 ​

<template>
    <div class="example">
        <h5>告警排名</h5>
        <span class="biz-rank-icon top-1"><i class="iconfont icon-num-1"></i></span>
        <span class="biz-rank-icon top-2"><i class="iconfont icon-num-2"></i></span>
        <span class="biz-rank-icon top-3"><i class="iconfont icon-num-3"></i></span>
        <span class="biz-rank-icon"><i class="iconfont icon-num-4"></i></span>
        <span class="biz-rank-icon"><i class="iconfont icon-num-5"></i></span>
        <span class="biz-rank-icon"><i class="iconfont icon-num-6"></i></span>
        <span class="biz-rank-icon"><i class="iconfont icon-num-7"></i></span>
        <br />
        <h5>危险源等级</h5>
        <span class="biz-rank-icon level-1"><i class="iconfont icon-first"></i></span>
        <span class="biz-rank-icon level-2"><i class="iconfont icon-second"></i></span>
        <span class="biz-rank-icon level-3"><i class="iconfont icon-third"></i></span>
        <span class="biz-rank-icon level-4"><i class="iconfont icon-fourth"></i></span>
    </div>
</template>

<script setup></script>

<style lang="scss">
[class^='biz-rank-'] {
    display: inline-block;
    margin: 10px 20px 10px 0;
    .iconfont {
        font-size: var(--h5);
    }
}
</style>

<template>
    <div class="example">
        <span class="biz-rank-icon one"><i class="iconfont icon-num-1"></i></span>
        <span class="biz-rank-icon two"><i class="iconfont icon-num-2"></i></span>
        <span class="biz-rank-icon three"><i class="iconfont icon-num-3"></i></span>
    </div>
</template>
<script setup></script>

<style lang="scss">
.biz-rank-icon {
    &.one {
        --color: 255, 77, 77;
    }
    &.two {
        --color: 32, 237, 89;
    }
    &.three {
        --color: 36, 252, 255;
    }
}
</style>