SOURCE

console 命令行工具 X clear

                    
>
console
Vue.createApp({
  data() {
    return {
      cur:2,
    }
  }
}).mount('#app')
<link rel="stylesheet" href="https://api.ldzj.cc/dcui/css/dcuirem.css">
<link rel="stylesheet" href="https://api.ldzj.cc/dcui/css/icon.css">
<script src="https://api.ldzj.cc/dcui/js/rem.js">

</script>
<script src="https://unpkg.com/vue@next">

</script>
<div class="wid-100 hei-100vh bg-f9" id="app">
	<div class="hei-46"></div>
	<div class="padlr-48 flex justify-between padb-40">
		<div class="item posr" :class="i<=cur?'':''" v-for="(vo,i) in [{n:'故障受理',v:'4'},{n:'故障派单',v:'5'},{n:'上门服务',v:'6'},{n:'故障修复',v:'7'},]">
			<div :class="i<cur?'bg-pri2':'bg-999'" class="posa wid-88 hei-4 top-38 lef10-10" v-if="i<3"></div>
			<div class="wid-80 hei-80 round posr mar-a">
				<div :class="i<=cur?'bg-def1':'bg-none'" class="posa wid-100 hei-100 bg-pri2 opt-2 lef-0 top-0 round"></div>
				<div :class="i<=cur?'bg-pri2':'bg-999'" class="wid-70 hei-70 flex align-center justify-center round posr lef-5 top-5">
					<img class="wid-42" :src="'https://api.ldzj.cc/img/zyx/a'+vo.v+'.png'" alt=""> 
                </div>
            </div>
            <div :class="i<=cur?'foc-pri2':'foc-666'" class="padt-20">{{vo.n}}</div>
        </div>
    </div>
    <div class="bg-white marlr-24 padlr-24 padtb-30 posr">
        <div class="posa rig-10 top-10 wid10-12 lih-70 text-center foc-pri2 hov round" style="background:#EBF1FF;">评价</div>
        <div class="flex align-center fow0-8 padb-16"><img class="wid-36 marr-10" src="https://api.ldzj.cc/img/zyx/a2.png" alt=""> 订单信息</div>
        <div class="foc-999 flex padtb-12"><div class="miw10-18 foc-666">工单编号</div>20220308095627481271</div>
        <div class="foc-999 flex padtb-12"><div class="miw10-18 foc-666">预约上门时间</div>2022-03-08 09:56:36</div>
        <div class="foc-999 flex padtb-12"><div class="miw10-18 foc-666">受理信息</div>宽带-修障</div>
        <div class="foc-999 flex padtb-12"><div class="miw10-18 foc-666">故障号码</div>08510012817272</div>
        <div class="foc-999 flex padtb-12"><div class="miw10-18 foc-666">受理渠道</div>省10000号运营中心</div>
        <div class="foc-999 flex padtb-12"><div class="miw10-18 foc-666">受理工号</div>5555</div>
        <div class="foc-999 flex padtb-12"><div class="miw10-18 foc-666">受理时间</div>2022-03-08 09:56:30</div>
    </div>
    <div class="bg-white marlr-24 padlr-24 padtb-30 posr mart-24">
        <div class="flex align-center fow0-8 padb-16"><img class="wid-36 marr-10" src="https://api.ldzj.cc/img/zyx/a3.png" alt=""> 进度-{{cur==0?'故障受理':cur==1?'故障派单':cur==2?'上门服务':'故障修复'}}    </div>
        <div class="flex padtb-12 justify-between foc-pri2 posr algin-start">
            <div  class="posa wid-2 top-40 zin-0 lef-9 bg-def1" style="height:88%;"></div>
            <div class="wid-20 hei-20 bg-pri2 round marr-18 mart-16"></div>
            <div class="wid10-32 foc-pri2 flex align-center lih0-8 padr-88">安装完成</div>
            <div class="foc-pri2 lih0-8  wid10-28">2022-03-08 09:56:30</div>
        </div>
        <div class="flex padtb-12 justify-between foc-pri2 posr algin-start">
            <div  class="posa wid-2 top-40 zin-0 lef-9 bg-def1" style="height:88%;"></div>
            <div class="wid-20 hei-20 bg-pri2 round marr-18 mart-16"></div>
            <div class="wid10-32 foc-pri2 flex align-center lih0-8 padr-88">已派单给外线施工装维人员</div>
            <div class="foc-pri2 lih0-8 wid10-28">2022-03-08 09:56:30<br>王光辉 18111900722</div>
        </div>
        <div class="flex padtb-12 justify-between foc-999 posr algin-start">
            <div  class="posa wid-2 top-40 zin-0 lef-9 bg-999" style="height:88%;"></div>
            <div class="wid-20 hei-20 bg-999 round marr-18 mart-16"></div>
            <div class="wid10-32 foc-999 flex align-center lih0-8 padr-88">维修人员已上门维修</div>
            <div class="foc-999 lih0-8 wid10-28">2022-03-08 09:56:37<br><span class="foc-pri2">王光辉 18111900722</span></div>
        </div>
        <div class="flex padtb-12 justify-between foc-pri2 posr algin-start">
            <!-- <div  class="posa wid-2 hei-100 top-30 zin-0 lef-9 bg-999"></div> -->
            <div class="wid-20 hei-20 bg-999 round marr-18 mart-16"></div>
            <div class="wid10-32 foc-999 flex align-center lih0-8 padr-88">业务已受理</div>
            <div class="foc-999 lih0-8  wid10-28">2022-03-08 09:56:30</div>
        </div>
    </div>
    <div class=" foc-ccc padlr-24 padtb-40 lih0-8" style="color:#BBBCC1">
国家工业和信息化部规定的业务开通、移机时限:<br>
1、对于不具备线路条件、但可以进行线路施工的情况:
城镇:平均值≤10个工作日,最长为16个工作日;
农村:平均值≤15个工作日,最长为20个工作日。<br>
2、对于已具备线路条件的情况,平均值≤5个工作日,最长为7个工作日(不区分城镇和农村)。详见《工业和信息化部关于印发(互联网介入服务规范)的通知》(工信部电管[2013]261号)。<br>
注:工作日是国家法定假日及休息日之外的日期。
    </div>
</div>
.bg-pri2{
    background-color: #3A6EFB;
}
.foc-pri2{
    color: #3A6EFB;
}
.bg-def1{
    background-color: #5D98FF;
}
*{
    font-size: 14px;
    color: #333;
    font-weight: 800;
}
.tab .foc-pri.bg-white>img{
    display: block;
}