179 lines
4.1 KiB
Vue
179 lines
4.1 KiB
Vue
<template>
|
|
<div class="large-container">
|
|
<div class="content1">
|
|
<div class="wrap1">
|
|
<image src="../../static/zy68.png"></image>
|
|
</div>
|
|
<div class="wrap2">
|
|
<div class="wrap2_1">恢复默认头像</div>
|
|
<div class="wrap2_2" @click="changeAvatar">更换头像</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>
|
|
<div class="wrap1_2">xxx</div>
|
|
</div>
|
|
<div class="wrap1">
|
|
<div class="wrap1_1">
|
|
<div class="wrap1_1_1">身份证号</div>
|
|
</div>
|
|
<div class="wrap1_2">292199922283726657</div>
|
|
</div>
|
|
<div class="wrap1">
|
|
<div class="wrap1_1">
|
|
<div class="wrap1_1_1">微信号</div>
|
|
</div>
|
|
<div class="wrap1_2">12318881999</div>
|
|
</div>
|
|
</div>
|
|
<div class="content3">*来自微信数据共享</div>
|
|
<div class="content4">
|
|
<div class="wrap1">注销账号</div>
|
|
<div class="wrap2">退出登录</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
const changeAvatar=()=>{
|
|
uni.uploadFile({
|
|
|
|
})
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.large-container{
|
|
flex-grow: 1;
|
|
background-image: url('https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/16968647-fc99-46fe-b95c-620c55b7646f.png');
|
|
background-size: 100%;
|
|
padding: 38rpx 32rpx 0 32rpx;
|
|
position: relative;
|
|
.content4{
|
|
bottom: 104rpx;
|
|
position: absolute;
|
|
padding-left: 32rpx;
|
|
padding-right: 32rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.wrap2{
|
|
width:292rpx ;
|
|
height: 56rpx;
|
|
border-radius: 40rpx;
|
|
font-size: 32rpx;
|
|
color: #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color:#3E3E3E;
|
|
}
|
|
.wrap1{
|
|
margin-right: 38rpx;
|
|
background-color:#ED6666 ;
|
|
width:292rpx ;
|
|
height: 56rpx;
|
|
border-radius: 40rpx;
|
|
font-size: 32rpx;
|
|
color: #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
.content3{
|
|
margin-top: 18rpx;
|
|
text-align: right;
|
|
font-size: 20rpx;
|
|
color:#939393 ;
|
|
}
|
|
.content2{
|
|
margin-top: 38rpx;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
padding-left: 18rpx;
|
|
padding-right: 32rpx;
|
|
.wrap1{
|
|
padding-left: 14rpx;
|
|
padding-top: 26rpx;
|
|
padding-bottom: 22rpx;
|
|
border-bottom: 1rpx solid #E4EAF1;;
|
|
display: flex;
|
|
.wrap1_2{
|
|
padding-left: 36rpx;
|
|
font-size: 24rpx;
|
|
color: #939393;
|
|
}
|
|
.wrap1_1{
|
|
display: flex;
|
|
align-items: center;
|
|
width: 192rpx;
|
|
border-right: 1rpx solid #E4EAF1;
|
|
.wrap1_1_1{
|
|
font-size: 24rpx;
|
|
color: #626262;
|
|
margin-right: 12rpx;
|
|
}
|
|
.wrap1_1_2{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 16rpx;
|
|
color: #fff;
|
|
width: 80rpx;
|
|
height: 28rpx;
|
|
background-color:#FFCD5C ;
|
|
border-radius: 24rpx;
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
.content1{
|
|
display: flex;
|
|
.wrap2{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
padding-top: 12rpx;
|
|
padding-bottom: 12rpx;
|
|
.wrap2_2{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 348rpx;
|
|
height: 56rpx;
|
|
background-color:#F7963B;
|
|
border-radius: 40rpx;
|
|
font-size: 32rpx;
|
|
color: #fff;
|
|
}
|
|
.wrap2_1{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 348rpx;
|
|
height: 56rpx;
|
|
font-size: 32rpx;
|
|
color: #fff;
|
|
background-color: #000;
|
|
border-radius: 40rpx;
|
|
}
|
|
.wrap2_2{
|
|
|
|
}
|
|
}
|
|
.wrap1{
|
|
margin-left: 76rpx;
|
|
margin-right: 42rpx;
|
|
image{
|
|
width: 154rpx;
|
|
height: 154rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|