原生步骤条书写

步骤条预览

第一步:

第二步:

第三步:

代码展示

html

html 复制代码
  <div class="contract">

    <div class="step-box">
      <div class="step-part" v-for="(step,index) in stepArray" :key="index">
        <div class="step-txt">
          <span :class="active >= step.id ? 'step-id-active' : 'step-id'" >
          <!--    van-icon 是框架vant,如果你的项目未使用vant框架,可以换成一个本地的小图标  
         		   判断条件不要忘记 v-if="active > step.id"     
          -->
            <van-icon v-if="active > step.id" name="checked" color="#1989fa" size="20" style="background: #FFFFFF;"/>
            <span v-else>{{step.id + 1}}</span>
          </span>
          <span :class="active > step.id ? 'step-line-active' : 'step-line'" v-show="step.id !== 2"></span>
        </div>
        <span class="step-name">{{step.name}}</span>
        <span class="step-detail">{{step.detail}}</span>
      </div>
    </div>

    <br>
    <br>
    <br>
    <button @click="active = 0 ">0</button>
    <button @click="active = 1 ">1</button>
    <button @click="active = 2 ">2</button>

  </div>

js

基于vue

js 复制代码
import {reactive, ref} from "vue";

const active = ref(0);
const stepArray = reactive([
  {
    id:0,
    name:'合同信息',
    detail:'填写合同信息',
  },
  {
    id:1,
    name:'合同模板',
    detail:'填写合同信息',
  },
  {
    id:2,
    name:'合同发起',
    detail:'预览和发起',
  }
])

css

css 复制代码
.contract{
  width: 100%;
  height: 100%;
  overflow: auto;

  .step-box{
    width: 100%;
    height: 120px;
    background: #FFFFFF;
    display: flex;
    justify-content: center;
    text-align: center;

    .step-part{
      width: 30%;
      text-align: center;

      .step-txt{
        padding-top: 10px;
        display: flex;
        position: relative;

        .step-id-active{
          display: block;
          background: #409EFF;
          width: 20px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          border-radius: 50px;
          color: #FFFFFF;
          font-size: 12px;
          margin-left: calc(50% - 10px);
        }

        .step-id{
          display: block;
          background: #DCDEE0;
          width: 20px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          border-radius: 50px;
          color: #FFFFFF;
          font-size: 12px;
          margin-left: calc(50% - 10px);
        }

        .step-line-active{
          width: calc(100% - 20px);
          height: 3px;
          background: #409EFF;
          display: block;
          position: absolute;
          top: 18px;
          left: calc(50% + 11px);
        }

        .step-line{
          width: calc(100% - 20px);
          height: 3px;
          background: #DCDEE0;
          display: block;
          position: absolute;
          top: 18px;
          left: calc(50% + 11px);
        }
      }


      .step-name{
        display: block;
        color: #323233;
      }

      .step-detail{
        display: block;
        font-size: 12px;
        color: #969799;
      }
    }
  }
}
相关推荐
前端小巷子几秒前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹4 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器10 分钟前
指定阿里镜像原理
前端
枷锁—sha15 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha17 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
心情好的小球藻24 分钟前
Python应用进阶DAY9--类型注解Type Hinting
开发语言·python
群联云防护小杜33 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
惜.己36 分钟前
使用python读取json数据,简单的处理成元组数组
开发语言·python·测试工具·json
Y40900142 分钟前
C语言转Java语言,相同与相异之处
java·c语言·开发语言·笔记
DanB241 小时前
html复习
javascript·microsoft·html