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;
}