css:步骤条样式

77快乐

于 2022-01-04 16:18:54 发布

阅读量1.5k

点赞数 1

分类专栏： uni-app 文章标签： css 前端 css3

本文链接：https://blog.youkuaiyun.com/qq_44429079/article/details/122213939

版权

uni-app 专栏收录该内容

13 篇文章

订阅专栏

步骤条样式

效果如图

在这里插入图片描述

<!-- 步骤条 -->
    <view class="flex dotsList">
      <view
        class="flex align-center"
        v-for="(item, index) in dotList"
        :key="index"
      >
        <view
          class="dots flex justify-center align-center"
          :class="nowIndex === index ? 'activied' : ''"
          @tap="dotsClick(index)"
          ><text>{{ item.num }}</text></view
        >
        <view :class="index != dotList.length - 1 ? 'lines' : ''"> </view>
      </view>
    </view>

nowIndex: 0,
dotList: [
        {
          status: 0,
          num: 1,
        },
        {
          status: 0,
          num: 2,
        },
        {
          status: 0,
          num: 3,
        },
      ],

.dotsList {
    margin: 62rpx 0 0 100rpx;

    .lines {
      width: 181rpx;
      height: 4rpx;
      background-color: #d8d8d8;
    }

    .dots {
      width: 65rpx;
      height: 65rpx;
      border-radius: 50%;
      background-color: #d8d8d8;

      font-family: PingFangSC-Medium, PingFang SC;
      font-size: 33rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
    }

    .activied {
      background-color: #5cadfb;
      width: 78rpx;
      height: 78rpx;
    }
  }