console
Vue.createApp({
data() {
return {
cur:0,
}
}
}).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-pri" id="app">
<img class="wid-100 dis-block" src="https://api.ldzj.cc/img/zyx/i1.png" alt="">
<div class="marlr-20 bor-30 flex bg-def1 tab borbl-0 borbr-0">
<div @click="cur=i" :class="cur==i?'bg-white foc-pri borbl-0 borbr-0':'foc-white'" class="posr wid0-3 text-center padtb-30 bg-def1 bor-30" v-for="(vo,i) in ['联系电话','宽带','订单','身份证',]" :key="i">
{{vo}}
<img class="wid-32 dis-none posa top-20 lef0-1 marl-10 zin-0" src="https://api.ldzj.cc/img/zyx/i2.png" alt="">
</div>
</div>
<div class="bg-white marlr-20 padlr-50 padtb-40 hei-100vh">
<div class="flex align-center padtb-44 solid-bottom">
<img class="wid-42 marr-16" src="https://api.ldzj.cc/img/zyx/i3.png" alt="">
<div class="foc-999 miw10-9">省市选择</div>
<input type="" value="贵州省 贵阳市" class="dc-input text-right">
<i class="cuIcon-right"></i>
</div>
<div class="flex align-center padtb-44 solid-bottom" v-if="cur==3">
<img class="wid-42 marr-16" src="https://api.ldzj.cc/img/zyx/i8.png" alt="">
<div class="foc-999 miw10-9">姓名</div>
<input type="" value="" placeholder="请输入身份证姓名" class="dc-input text-right">
</div>
<div class="flex align-center padtb-44 solid-bottom" v-if="cur==3">
<img class="wid-42 marr-16" src="https://api.ldzj.cc/img/zyx/i9.png" alt="">
<div class="foc-999 miw10-9">身份证</div>
<input type="" value="" placeholder="请输入身份证号码" class="dc-input text-right">
</div>
<div class="flex align-center padtb-44 solid-bottom" v-if="cur==1">
<img class="wid-42 marr-16" src="https://api.ldzj.cc/img/zyx/i7.png" alt="">
<div class="foc-999 miw10-9">宽带账号</div>
<input type="" value="" placeholder="请输入您的宽带账号" class="dc-input text-right">
</div>
<div class="flex align-center padtb-44 solid-bottom" v-if="cur==2">
<img class="wid-42 marr-16" src="https://api.ldzj.cc/img/zyx/i7.png" alt="">
<div class="foc-999 miw10-9">订单号码</div>
<input type="" value="" placeholder="请输入装机或移机器订单号码" class="dc-input text-right">
</div>
<div class="flex align-center padtb-44 solid-bottom">
<img class="wid-42 marr-16" src="https://api.ldzj.cc/img/zyx/i4.png" alt="">
<div class="foc-999 miw10-9">手机号</div>
<input type="" value="183****3214" class="dc-input text-right">
</div>
<div class="flex align-center padtb-44 solid-bottom">
<img class="wid-42 marr-16" src="https://api.ldzj.cc/img/zyx/i5.png" alt="">
<input type="" placeholder="短信验证码" class="dc-input text-left">
<div class="foc-pri miw10-14">获取验证码</div>
</div>
<div class="flex align-center padtb-16 solid-bottom">
<img class="wid-42 marr-16" src="https://api.ldzj.cc/img/zyx/i6.png" alt="">
<input type="" placeholder="图像验证码" value="" class="dc-input text-left">
<div class="foc-666 miw10-18">
<img class="wid10-18 hei10-9" src="" alt="">
</div>
</div>
<div class="mart-40 round bg-def1 foc-white lih-88 text-center hov">
立即查询
</div>
<div class="hei-90"></div>
</div>
</div>
.bg-pri{
background-color: #3A6EFB;
}
.foc-pri{
color: #3A6EFB;
}
.bg-def1{
background-color: #5D98FF;
}
*{
font-size: 14px;
color: #333;
font-weight: 800;
}
.tab .foc-pri.bg-white>img{
display: block;
}