198 lines
4.0 KiB
Vue
198 lines
4.0 KiB
Vue
<script setup>
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<div class="one-content">
|
||
<div class="content2">
|
||
<van-uploader>
|
||
<div class="wrap1">
|
||
<div class="wrap1_1">
|
||
<div class="wrap1_1_1">
|
||
<img src="@/assets/images/zu1172@2x.png" alt="">
|
||
</div>
|
||
<div class="wrap1_1_2">更换</div>
|
||
</div>
|
||
<div class="wrap1_2">上传身份证人像面</div>
|
||
</div>
|
||
</van-uploader>
|
||
</div>
|
||
<div class="content3">
|
||
<van-uploader>
|
||
<div class="wrap1">
|
||
<div class="wrap1_1">
|
||
<div class="wrap1_1_1">
|
||
<img src="@/assets/images/zu1172@2x.png" alt="">
|
||
</div>
|
||
<div class="wrap1_1_2">更换</div>
|
||
</div>
|
||
<div class="wrap1_2">上传身份证国徽面</div>
|
||
</div>
|
||
</van-uploader>
|
||
</div>
|
||
<div class="content4">
|
||
<div class="wrap1">
|
||
<div class="wrap1_1">
|
||
<div class="wrap1_1_1">姓名</div>
|
||
<div class="wrap1_1_2">某某某</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="wrap1">
|
||
<div class="wrap1_1">
|
||
<div class="wrap1_1_1">姓名</div>
|
||
<div class="wrap1_1_2">某某某</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="content5">*自动识别内容，请仔细核对</div>
|
||
<div class="content6">证件即将过期，请尽快更新，否则将影响部分功能使用！</div>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.one-content{
|
||
margin-bottom: 54px;
|
||
}
|
||
.content6{
|
||
margin-top: 5px;
|
||
width: 100%;
|
||
height: 46px;
|
||
background-color: #E74747;
|
||
color: #fff;
|
||
font-size: 12px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 10px;
|
||
}
|
||
.content5{
|
||
text-align: right;
|
||
font-size: 10px;
|
||
color: #FFFFFF;
|
||
margin-top: 8px;
|
||
}
|
||
.content4{
|
||
margin-top: 20px;
|
||
background-color: #fff;
|
||
overflow: hidden;
|
||
border-radius: 12px;
|
||
.wrap1{
|
||
padding-left: 14px;
|
||
padding-right: 14px;
|
||
&:last-child .wrap1_1{
|
||
border-bottom:none;
|
||
}
|
||
.wrap1_1{
|
||
padding-top: 14px;
|
||
padding-bottom: 14px;
|
||
border-bottom: #BBC5E0 solid 1px;
|
||
display: flex;
|
||
|
||
.wrap1_1_2{
|
||
padding-left: 10px;
|
||
color: #24437E;
|
||
font-size: 12px;
|
||
}
|
||
.wrap1_1_1{
|
||
border-right: #BBC5E0 solid 1px;
|
||
width: 92px;
|
||
font-size: 12px;
|
||
color: #000;
|
||
padding-left: 10px;
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.content3 {
|
||
.wrap1 {
|
||
width: 332px;
|
||
height: 220px;
|
||
background-color: #fff;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.wrap1_2{
|
||
margin-top: 3px;
|
||
color: #2159C4;
|
||
font-size: 12px;
|
||
}
|
||
.wrap1_1 {
|
||
width: 293px;
|
||
height: 170px;
|
||
position: relative;
|
||
.wrap1_1_2{
|
||
font-size: 14px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: white;
|
||
background-color: #2159C4;
|
||
width: 48px;
|
||
height: 32px;
|
||
border-radius: 20px;
|
||
position: absolute;
|
||
bottom: 12px;
|
||
right: 12px;
|
||
}
|
||
.wrap1_1_1{
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
.content2 {
|
||
margin-bottom: 20px;
|
||
.wrap1 {
|
||
width: 332px;
|
||
height: 220px;
|
||
background-color: #fff;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.wrap1_2{
|
||
margin-top: 3px;
|
||
color: #2159C4;
|
||
font-size: 12px;
|
||
}
|
||
.wrap1_1 {
|
||
width: 293px;
|
||
height: 170px;
|
||
position: relative;
|
||
.wrap1_1_2{
|
||
font-size: 14px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: white;
|
||
background-color: #2159C4;
|
||
width: 48px;
|
||
height: 32px;
|
||
border-radius: 20px;
|
||
position: absolute;
|
||
bottom: 12px;
|
||
right: 12px;
|
||
}
|
||
.wrap1_1_1{
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
</style>
|