CSS实现手机信号格（Vue）

前端晚自习

于 2024-04-25 16:08:33 发布

阅读量287

点赞数 6

分类专栏：前端 CSS 文章标签： vue.js css javascript

本文链接：https://blog.csdn.net/weican57/article/details/138192255

版权

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

效果图

QQ截图20240425152132.png

Vue代码

<!-- active值为12345 -->
<div class="signal">
    <div
      class="signal-item"
      v-for="(item, index) in 5"
      :key="index"
      :style="[
        { '--i': index + 1 },
        { background: index < active ? '#409eff' : '' }
      ]"
    ></div>
</div>

.signal {
    display: flex;
    justify-content: center;
    align-items: flex-end;

    &-item {
      width: 4px;
      height: calc(4px * var(--i));
      background: #d7d7d7;

      +.signal-item {
        margin-left: 2px;
      }
    }
}