gaojian/app_tree_planting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

个人信息页面调整

Browse Source
This commit is contained in:
itgaojian 2023-02-20 14:20:32 +08:00
parent 5d9a26e568
commit 50ff566841
1 changed files with 146 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

170
pages/user/changeMineInfo.vue
View File

@ -2,20 +2,28 @@
<view class="page">
<view class="content">
<view class="base-person">
<view class="item">
<view class="thick-divider"></view>
<view class="item-box">
<view class="item-title">姓名</view>
<input @input="inputBaseName" :value="name" placeholder="请输入您的姓名" />
<input @input="inputBaseName" :value="name" placeholder="请输入您的姓名" class="item-content"
placeholder-class="item-input" />
</view>
<view class="item">
<view class="thick-divider"></view>
<view class="item-box">
<view class="item-title">联系电话</view>
<input @input="inputBasePhone" :value="phone" placeholder="请输入常用手机号码" />
<input @input="inputBasePhone" :value="phone" placeholder="请输入常用手机号码" class="item-content"
placeholder-class="item-input" />
</view>
<view class="item">
<view class="thick-divider"></view>
<view class="item-box">
<view class="item-title">身份证号码</view>
<input @input="inputBaseIdCard" :value="idcard" placeholder="请输入身份证号码" />
<input @input="inputBaseIdCard" :value="idcard" placeholder="请输入身份证号码" class="item-content"
placeholder-class="item-input" />
</view>
</view>
<view class="save-btn" @click="doSave">确认提交</view>
<view class="btn-box">
<view class="save-btn" @click="doSave">确认提交</view>
</view>
</view>
<pageLoading v-if="showPageLoading"></pageLoading>
</view>
@ -162,8 +170,9 @@
display: flex;
flex: 1;
flex-direction: column;
overflow: auto;
overflow: hidden;
height: 100%;
background: white;
}
.content {
@ -179,22 +188,115 @@
flex-direction: column;
justify-content: center;
align-items: flex-start;
font-size: 32rpx;
background: white;
font-size: 20rpx;
margin-bottom: 20rpx;
margin-top: 30rpx;
width: 100%;
.thick-divider {
height: 5rpx;
background: #f2f2f2;
width: 100%;
}
.hint-txt {
padding: 10rpx 40rpx;
color: darkred;
font-size: 20rpx;
background: #f2f2f2;
}
.item-box-v {
display: flex;
flex-direction: column;
justify-content: space-between;
margin-top: 10rpx;
background: white;
align-items: flex-start;
width: 100%;
padding-bottom: 50rpx;
.item-title {
font-size: 28rpx;
padding: 10rpx 30rpx;
}
.item-content {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
padding: 10rpx 30rpx;
font-size: 28rpx;
input {
font-size: 28rpx;
}
}
.item-content-bg {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding: 20rpx;
width: 85%;
background: #f3f3f3;
border-radius: 10rpx;
align-self: center;
height: 220rpx;
textarea {
font-size: 28rpx;
text-align: left;
width: 100%;
}
.hint-num {
align-self: flex-end;
}
}
}
.item-box {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 10rpx;
background: white;
align-items: center;
width: 100%;
.item-input {
font-size: 28rpx;
}
.item-title {
font-size: 28rpx;
flex: 0.5;
padding: 15rpx 30rpx;
}
.item-content {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
flex: 1.5;
padding: 15rpx 30rpx;
}
}
.item {
display: flex;
flex-direction: column;
flex-direction: row;
margin: 20rpx;
justify-content: flex-start;
align-items: center;
width: 95%;
.item-title {
font-size: 32rpx;
font-size: 25rpx;
width: 100%;
background: #e4f3f2;
padding: 10rpx;
@ -223,7 +325,7 @@
margin-top: 20rpx;
padding: 10rpx;
width: 95%;
font-size: 32rpx;
font-size: 25rpx;
border: 1rpx #d3d3d3 solid;
}
}
@ -241,15 +343,35 @@
padding: 10rpx;
}
.save-btn {
color: white;
background-color: green;
border-radius: 10rpx;
text-align: center;
align-self: center;
margin: 30rpx 40rpx;
width: 500rpx;
padding: 20rpx;
font-size: 32rpx;
.btn-box {
width: 100%;
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
background: white;
bottom: 0;
position: fixed;
.save-btn {
color: white;
background-color: green;
width: 95%;
border-radius: 10rpx;
text-align: center;
align-self: center;
margin-top: 5rpx;
border-radius: 10rpx;
padding: 10rpx;
}
}
.type-change-box {
margin-top: 20rpx;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
}
</style>