自定义步骤条

青旅半醒 2022-09-06 00:22 204阅读 0赞

# 展示图： #

![在这里插入图片描述][53977bd759d340328ab1a31de6011018.png]

<template>
      <div class='createorder'>
        
        <div class="createorder_top">
          <div class="createorder_top_left">
            
            <span class="createorder_left_set" :class="value == 0||value ==1||value ==2||value ==3||value ==4?'activeSet':''">
              <span class="look" v-if="value ==1||value ==2||value ==3||value ==4">√</span>
              <span class="look" v-else>1</span>
            店长信息</span>
            <span class="createorder_left_setdivision" :class="value ==1||value ==2||value ==3||value ==4?'createorder_left_setdivisions':''"></span>
            
            <span class="createorder_left_set" :class="value ==1||value ==2||value ==3||value ==4?'activeSet':''">
              <span class="look" v-if="value ==2||value ==3||value ==4">√</span>
              <span class="look" v-else>2</span>
            企业及法人信息</span>
            <span class="createorder_left_setdivision" :class="value ==2||value ==3||value ==4?'createorder_left_setdivisions':''"></span>
            
            <span class="createorder_left_set" :class="value ==2||value ==3||value ==4?'activeSet':''">
              <span class="look" v-if="value ==3||value ==4">√</span>
              <span class="look" v-else>3</span>
              药店信息</span>
            <span class="createorder_left_setdivision" :class="value ==3||value ==4?'createorder_left_setdivisions':''"></span>
            
            <span class="createorder_left_set" :class="value ==3||value ==4?'activeSet':''">
              <span class="look" v-if="value ==4">√</span>
              <span class="look" v-else>4</span>
              服务能力</span>
            <span class="createorder_left_setdivision" :class="value ==4?'createorder_left_setdivisions':''"></span>
            
            <span class="createorder_left_set" :class="value ==4?'activeSet':''">
              <span class="look" v-if="value ==4">√</span>
              <span class="look" v-else>5</span>
            入驻成功</span>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    export default { 
       props: { 
        value: { 
          type: Number,
          default: "",
        },
      },
        data(){ return{ }},
        created(){ },
        mounted () { },
        methods: { }
    }
    
    </script>
    
    <style scoped lang='less'>
    .look{ 
      text-align: center;
      font-size: 20px;
      display: inline-block;
      width: 25px;
      height: 25px;
      line-height: 25px;
      border-radius: 42px;
      border: 2px solid;
      margin-right: 5px;
    }
    .createorder_top { 
      background-color: #F9F9F9;
      border-radius:50px;
      width: 99%;
      margin: 0 auto;
      margin-top: 10px;
    }
    .createorder_top .createorder_top_left{ 
      padding: 20px 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    
    }
    .createorder_top .createorder_top_left .createorder_left_set { 
      font-size: 18px;
      color: #ABACB3;
    }
    
    .createorder_top .createorder_top_left .activeSet { 
      color: #2846FF;
    }
    
    .createorder_top .createorder_top_left .createorder_left_setdivision { 
        display: inline-block;
        background-color: #F1EFF2;
        width: 123px;
        height: 2px;
        margin: 10px 25px;
        margin-bottom: 5px;
    }
    .createorder_top .createorder_top_left .createorder_left_setdivisions { 
        display: inline-block;
        background-color: #2846FF;
        width: 123px;
        height: 2px;
        margin: 10px 25px;
        margin-bottom: 5px;
    }
    
    </style>

[53977bd759d340328ab1a31de6011018.png]: /images/20220829/bc7179d16d7b4d04aed1086dd3f94e6f.png