步骤条纯css

阳光穿透心脏的1/2处 2023-07-19 12:04 97阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzQyMzM4OTYy_size_1_color_FFFFFF_t_70]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzQyMzM4OTYy_size_1_color_FFFFFF_t_70 1]

### 做了一个丑丑的步骤条，记录一下 ###

<template>
      <div>
        <Alert show-icon style="width: 900px;">审批单号：{ { stepInfo.no}}</Alert>
        <div class="stepOut">
          <ul class="ulStyle">
            <li class="stepItem" v-for="(stepItem, index) in stepInfo.list" :key="index">
              <p class="stepStatus">{ { stepItem.title}}</p>
              
              <Icon type="ios-checkmark-circle-outline" class="iconAir" v-if="stepItem.status===0"/>
              <Icon type="ios-close-circle-outline" class="iconAir2" v-else/>
              
              
              <div class="line lineActive" v-show="index!==stepInfo.list.length-1" v-if="stepInfo.step >= index+2"></div>
              <div class="line lineActive2" v-show="index!==stepInfo.list.length-1" v-else></div>
              <p class="stepStatus">{ { stepItem.tag}}</p>
              <p :style="stepItem.status===0?'color: green;':'color: red'">{ { stepItem.opinion}}</p>
              <p class="statusTime">{ { stepItem.time}}</p>
            </li>
          </ul>
        </div>
      </div>
    </template>
    
    <script>
    export default { 
      name: 'MySteps',
      props: { 
        // 传递步骤参数
        stepInfo: { 
          type: Object,
          default: function () { 
            return { 
              list: [],
              step: 0,
              no:''
            }
          }
        }
      }
    }
    </script>
    
    <style lang="less" scoped>
    .stepOut { 
      width: 100%;
      height: 160px;
      display: flex;
      justify-content: left;
      .ulStyle { 
          list-style: none;
          // width: 100%;
          justify-content: space-between;
          white-space: nowrap;
          overflow-y: hidden;
          overflow-x: scroll;
          display: flex;
          margin-bottom: -9px;
      }
      .stepItem { 
        width: 210px;
        height: 70px;
        float: left;
        font-family: SimSun;
        font-size: 16px;
        text-align: center;
        position: relative;
        .icon { 
          width: 13px;
          height: 13px;
          border-radius: 50%;
          background: rgba(226, 226, 226, 1);
          margin: 0 auto;
          position: relative;
          z-index: 888;
        }
        .active { 
          background-color: #2d8cf0;
        }
        .line { 
          position: absolute;
          top: 6px;
          left: 50%;
          border-bottom: 1px dashed rgba(3, 2, 2, 0.7);
          width: 260px;
          z-index: 111;
          width: 170px;
        }
        .lineActive { 
          margin: 36px 0px 0px 20px;
          border-bottom: 2px solid #2d8cf0;
          width: 115px;
        }
        .lineActive2 { 
          margin: 36px 0px 0px 20px;
          border-bottom: 2px solid red;
          width: 115px;
        }
        .iconAir { 
          // margin: 0 30px 11px 0px;
          margin: 0 0px 11px 0px;
          color: #2d8cf0;
        }
        .iconAir2 { 
          margin: 0 0px 11px 0px;
          color: red;
        }
        .stepStatus { 
          color: rgba(87, 87, 87, 1);
          line-height: 36px;
        }
        .statusTime { 
          color: rgba(87, 87, 87, 1);
          opacity: 0.5;
        }
      }
    }
    </style>

后来我又更新了一下，也不知道哪个好看，就都留在这吧

<template>
      <div>
        <Alert show-icon style="width: 900px;">审批单号：{ { stepInfo2.no}}</Alert>
        <div class="stepOut">
          <ul class="ulStyle">
            <li class="stepItem" v-for="(stepItem, index) in stepInfo2.list" :key="index">
              <p class="stepStatus">{ { stepItem.username||'_'}}</p>
              
              <Icon type="ios-close-circle-outline" class="iconAir2" v-if="index===stepInfo2.step"/>
              <Icon type="ios-checkmark-circle-outline" class="iconAir" v-else/>
              
              
              <div class="line lineActive2" v-show="index!==stepInfo2.list.length-1"  v-if="index===stepInfo2.step-1"></div>
              <div class="line lineActive" v-show="index!==stepInfo2.list.length-1" v-else></div>
              <p class="stepStatus">{ { stepItem.NAME_}}</p>
              <p :style="index<stepInfo2.step?'color: green;':'color: red'">{ { stepItem.outcome}}</p>
              <Tooltip content="审核开始时间" placement="top-start">
                <p class="statusTime">{ { stepItem.START_TIME_}}</p>
              </Tooltip></br>
              <Tooltip content="审核结束时间" placement="top-start">
                <p class="statusTime">{ { stepItem.END_TIME_}}</p>
              </Tooltip>
            </li>
          </ul>
        </div>
      </div>
    </template>
    
    <script>
    import Cookies from 'js-cookie'
    export default { 
      name: 'MySteps',
      props: { 
        // 传递步骤参数
        stepInfo: { 
          type: Object,
          default: function () { 
            return { 
              list: [],
              step: 0,
              no:''
            }
          }
        }
      },
      data(){ 
          return{ 
            stepInfo2: { 
              list: [],//审批节点信息
              step: 0,//异常位置，如果没有驳回的就给他数组长度
              no:''//审批单号
            },
          }},
      methods : { 
        showapprovalDetail(params,tableName,stateColName){ 
          if(`${ params.row[stateColName]}`==='1'){ 
            this.stepInfo2={ 
              list: [],
              step: 0,
              no:params.row["contract_no"]
            }
          }else{ 
            this.$Spin.show({  render: h => {  return h("div", [ h("Icon", {  props: {  type: "ios-loading", size: 50 } }), h("div",{  style:{  marginTop: '10px' } }, '加载中。。。')]); } });
            this.Http(this.Api.queryAuditProcess, { orderId:tableName==='kzsp'?params.row["pid"]:params.row["id"],token:Cookies.get("token_back"),tableName:tableName}).then(res => { 
              this.stepInfo2={ 
                list: res.data.object.reverse(),
                step: `${ params.row[stateColName]}`==='4'?res.data.object.length-1:res.data.object.length+1,
                no:params.row["contract_no"]
              }
              this.$Spin.hide();
            })
          }
        },
      }
    }
    </script>
    
    <style lang="less" scoped>
    .stepOut { 
      width: 100%;
      height: 190px;
      display: flex;
      justify-content: left;
      .ulStyle { 
          list-style: none;
          // width: 100%;
          justify-content: space-between;
          white-space: nowrap;
          overflow-y: hidden;
          overflow-x: scroll;
          display: flex;
          margin-bottom: -9px;
      }
      .stepItem { 
        width: 210px;
        height: 70px;
        float: left;
        font-family: SimSun;
        font-size: 16px;
        text-align: center;
        position: relative;
        margin-right: 10px;
        margin-left: 50px;
        .icon { 
          width: 13px;
          height: 13px;
          border-radius: 50%;
          background: rgba(226, 226, 226, 1);
          margin: 0 auto;
          position: relative;
          z-index: 888;
        }
        .active { 
          background-color: #2d8cf0;
        }
        .line { 
          position: absolute;
          top: 6px;
          left: 50%;
          border-bottom: 1px dashed rgba(3, 2, 2, 0.7);
          width: 260px;
          z-index: 111;
          width: 170px;
        }
        .lineActive { 
          margin: 36px 20px 0px 20px;
          border-bottom: 2px solid #2d8cf0;
          // width: 115px;
          // min-width: 110px;
          // max-width: 155px;
        }
        .lineActive2 { 
          margin: 36px 20px 0px 20px;
          border-bottom: 2px solid red;
          // width: 115px;
          // min-width: 110px;
          // max-width: 155px;
        }
        .iconAir { 
          // margin: 0 30px 11px 0px;
          margin: 0 0px 11px 0px;
          color: #2d8cf0;
        }
        .iconAir2 { 
          margin: 0 0px 11px 0px;
          color: red;
        }
        .stepStatus { 
          color: rgba(87, 87, 87, 1);
          line-height: 36px;
        }
        .statusTime { 
          color: rgba(87, 87, 87, 1);
          opacity: 0.5;
        }
      }
    }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzQyMzM4OTYy_size_1_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200330201117777.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzQyMzM4OTYy,size_1,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzQyMzM4OTYy_size_1_color_FFFFFF_t_70 1]: /images/20230528/c29bf5a8fe044ebca05e1c82f2518186.png