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="page">
<view class="content"> <view class="content">
<view class="base-person"> <view class="base-person">
<view class="item"> <view class="thick-divider"></view>
<view class="item-box">
<view class="item-title">姓名</view> <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>
<view class="item"> <view class="thick-divider"></view>
<view class="item-box">
<view class="item-title">联系电话</view> <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>
<view class="item"> <view class="thick-divider"></view>
<view class="item-box">
<view class="item-title">身份证号码</view> <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> </view>
<view class="save-btn" @click="doSave">确认提交</view> <view class="btn-box">
<view class="save-btn" @click="doSave">确认提交</view>
</view>
</view> </view>
<pageLoading v-if="showPageLoading"></pageLoading> <pageLoading v-if="showPageLoading"></pageLoading>
</view> </view>
@ -162,8 +170,9 @@
display: flex; display: flex;
flex: 1; flex: 1;
flex-direction: column; flex-direction: column;
overflow: auto; overflow: hidden;
height: 100%; height: 100%;
background: white;
} }
.content { .content {
@ -179,22 +188,115 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: flex-start; align-items: flex-start;
font-size: 32rpx; font-size: 20rpx;
background: white;
margin-bottom: 20rpx; margin-bottom: 20rpx;
margin-top: 30rpx;
width: 100%; 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 { .item {
display: flex; display: flex;
flex-direction: column; flex-direction: row;
margin: 20rpx; margin: 20rpx;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
width: 95%; width: 95%;
.item-title { .item-title {
font-size: 32rpx; font-size: 25rpx;
width: 100%; width: 100%;
background: #e4f3f2; background: #e4f3f2;
padding: 10rpx; padding: 10rpx;
@ -223,7 +325,7 @@
margin-top: 20rpx; margin-top: 20rpx;
padding: 10rpx; padding: 10rpx;
width: 95%; width: 95%;
font-size: 32rpx; font-size: 25rpx;
border: 1rpx #d3d3d3 solid; border: 1rpx #d3d3d3 solid;
} }
} }
@ -241,15 +343,35 @@
padding: 10rpx; padding: 10rpx;
} }
.save-btn { .btn-box {
color: white; width: 100%;
background-color: green; align-items: center;
border-radius: 10rpx; display: flex;
text-align: center; flex-direction: row;
align-self: center; justify-content: center;
margin: 30rpx 40rpx; background: white;
width: 500rpx; bottom: 0;
padding: 20rpx; position: fixed;
font-size: 32rpx;
.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> </style>