流程进度条案例

---

前言

最近在公司里面看到了流程进度条的需求，然后在网上找了许多案例发现使用起来有些复杂，所以就根据公司的需求自己写了一个小案例，主要是使用vue+css实现，下面是我的代码，可以直接放在组件中引入使用，数据我是直接写死在data中这样更直观

---

# 二、代码 代码和图片示例如下（示例）：

下面展示代码。

// An highlighted block
<template>
<div class="box">
   <div class="container"
    v-for="(item,index) in option"
    :key="index"
   >
      <span class="big_circle"
      :style="{border:  item.state === 'true' ? '2px solid rgb(128, 174, 243)' : '2px solid rgb(197, 195, 195)'}"
      ></span>
     <span class="circle"
      :style="{background:  item.state === 'true' ? ' rgb(128, 174, 243)' : ' rgb(197, 195, 195)'}"
     ></span>
     <span class="border"
     :style="{background:  item.state === 'true' ? 'rgb(107, 162, 233)' : ' rgb(211, 218, 228)'}"
     ></span>
     <h4 class="title">{{item.name}}</h4>
     <h5 class="date"
     :style="{display: item.state === 'true' ? 'block' : 'none'}"
     >{{item.date}}</h5>
   </div>
</div>
</template>
  
<script>
export default{
   data() {
     return{
       option: [{name: '审批开始', date: '2012-12-10',state: 'true'},
       {name: '审批中', date: '2012-12-11',state: 'false',},
       {name: '审批成功', date: '2012-12-12',state: 'false'}]
     }
   }
 }
</script>

<style lang="less" scoped>
.box {
  width: 600px;
  height: 200px;
  position: relative;
  top: 100px;
  left: 100px;
  .container {
    width:200px;;
    height: 200px;
    float: left;
    position: relative;
    .big_circle{
       display: inline-block;
        position: absolute;
        top: 50px;
        left: 0px;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        box-sizing: border-box;
        border: 2px solid rgb(128, 174, 243);
        background: rgb(248, 249, 250);
        z-index: 998;
    }
      .circle{
        display: inline-block;
        position: absolute;
        top: 54px;
        left: 4px;
        height: 12px;
        width: 12px;
        border-radius: 50%;
        box-sizing: border-box;
       background: rgb(107, 162, 243);
        z-index: 999;
      }
      .border{
        position: absolute;
        top: 55px;
        left: 1px;
        display: inline-block;
        width: 100%;
        height: 10px;
        background: rgb(211, 218, 228);
        z-index: 1;
      }
      .title {
         position: absolute;
         top: 100px;
        left: 0;
      }
      .date{
        position: absolute;
        left: 0px;
        top: 125px;
      }
  }
  .container:last-child .border{
    display: none;
  }
}
</style>

---

总结

第一次写文章，有问题希望大佬指点指正