133 lines
2.9 KiB
Vue
133 lines
2.9 KiB
Vue
|
<template>
|
||
|
|
<div class="com-root">
|
||
|
|
<div class="content1">
|
||
|
|
<div class="wrap1">
|
||
|
|
<image src="../../static/06@3x (2).png"></image>
|
||
|
|
</div>
|
||
|
|
<div class="wrap2">
|
||
|
|
<div class="wrap2_1">恢复默认头像</div>
|
||
|
|
<div class="wrap2_2">更换头像</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="content2">
|
||
|
|
<div class="wrap1">
|
||
|
|
<div class="wrap1_1">
|
||
|
|
<div class="wrap1_1_1">姓名</div>
|
||
|
|
<div class="wrap1_1_2">已实名</div>
|
||
|
|
<div class="wrap1_1_3">XXX</div>
|
||
|
|
</div>
|
||
|
|
<div class="wrap1_1">
|
||
|
|
<div class="wrap1_1_1">身份证号</div>
|
||
|
|
<div class="wrap1_1_3">292199922283726657</div>
|
||
|
|
</div>
|
||
|
|
<div class="wrap1_1">
|
||
|
|
<div class="wrap1_1_1">手机号</div>
|
||
|
|
<div class="wrap1_1_3">12318881999</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="wrap1" style="margin-top: 30rpx">
|
||
|
|
<div class="wrap1_1">
|
||
|
|
<div class="wrap1_1_1">微信号</div>
|
||
|
|
<div class="wrap1_1_3">12318881999/may1299</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "set-up"
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style lang="scss">
|
||
|
|
.com-root{
|
||
|
|
padding-left: 32rpx;
|
||
|
|
padding-right: 32rpx;
|
||
|
|
padding-top: 44rpx;
|
||
|
|
.content2{
|
||
|
|
|
||
|
|
|
||
|
|
.wrap2{
|
||
|
|
padding: 26rpx 32rpx 22rpx 18rpx;
|
||
|
|
}
|
||
|
|
.wrap1{
|
||
|
|
border-radius: 20rpx;
|
||
|
|
background-color: #FFFFFF;
|
||
|
|
padding: 0rpx 32rpx 0rpx 18rpx;
|
||
|
|
.wrap1_1{
|
||
|
|
padding-left: 14rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding-bottom: 22rpx;
|
||
|
|
padding-top: 26rpx;
|
||
|
|
border-bottom: 1px solid #DBE4ED;
|
||
|
|
&:last-child{
|
||
|
|
border-bottom: none;
|
||
|
|
}
|
||
|
|
.wrap1_1_1{
|
||
|
|
margin-right: 28rpx;
|
||
|
|
color: #626262;
|
||
|
|
font-size: 24rpx;
|
||
|
|
}
|
||
|
|
.wrap1_1_3{
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding-left: 36rpx;
|
||
|
|
font-size: 24rpx;
|
||
|
|
margin-left: auto;
|
||
|
|
width: 444rpx;
|
||
|
|
color:#939393 ;
|
||
|
|
border-left: 1px solid #E4EAF1;
|
||
|
|
}
|
||
|
|
.wrap1_1_2{
|
||
|
|
border-radius: 24rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
color: #fff;
|
||
|
|
font-size: 16rpx;
|
||
|
|
width: 80rpx;
|
||
|
|
height: 28rpx;
|
||
|
|
background-color: #40BE94;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.content1{
|
||
|
|
display: flex;
|
||
|
|
padding-left: 76rpx;
|
||
|
|
padding-right: 66rpx;
|
||
|
|
margin-bottom: 38rpx;
|
||
|
|
.wrap2{
|
||
|
|
.wrap2_2{
|
||
|
|
border-radius: 40rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
width: 348rpx;
|
||
|
|
height: 56rpx;
|
||
|
|
background-color: #40BE94;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
.wrap2_1{
|
||
|
|
margin-bottom: 20rpx;
|
||
|
|
border-radius: 40rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
width: 348rpx;
|
||
|
|
height: 56rpx;
|
||
|
|
background-color: #000;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.wrap1{
|
||
|
|
margin-right:42rpx;
|
||
|
|
image{
|
||
|
|
width: 154rpx;
|
||
|
|
height: 154rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|