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="pad-24 bg-pri2 flex justify-between align-center">
		<div class="fos-16" style="color:#62EAFF;">查询号码183****3214</div>
		<div class="padlr-36 lih-70 round bg-def1 foc-white" style="background:#369AFF;">查找方式</div>
	</div>
	<div class="flex padtb-30 padlr-30 justify-between bg-white">
		<div @click="cur=i" :class="cur==i?'foc-pri2':''" class="item padlr-40 text-center posr" v-for="(vo,i) in ['进行中','已完成','退撤单','全部',]">
			{{vo}}
			<div v-if="cur==i" class="round wid-100 hei-4 posa bot--30 lef-0" style="background:#00D4FF;"></div>
		</div>
	</div>
	<div class="mar-24 bg-white padlr-24 padtb-30">
		<div class="flex justify-between">订单编号:20220308095627482471 <span class="foc-red">故障修复</span></div>
        <div class="padt-30 flex">
            <img class="wid10-13" src="https://api.ldzj.cc/img/zyx/a1.png" alt="">
            <div class="padl-24">
                <div class="foc-999">受理信息:宽带-修障</div>
                <div class="foc-999 padt-14">受理渠道:省10000号运营中心</div>
                <div class="foc-999 padt-14">受理时间:2022-03-08 09:56:30</div>
            </div>
        </div>
        <div class="flex justify-end padt-24">
            <div class="round padlr-30 padtb-20 fos-18 foc-pri2 lih0-1" style="background:#EBF1FF;">评价</div>
            <div class="round padlr-30 padtb-20 fos-18 bg-pri2 foc-white marl-12 lih0-1">进度查询</div>
        </div>
    </div>
    <div class="padtb-44 foc-999 text-center">— 仅可查看近3个月装移修订单 —</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;
}