From 50ff566841d3580bbd90397c7067871bef61724a Mon Sep 17 00:00:00 2001
From: itgaojian <itgaojian@163.com>
Date: Mon, 20 Feb 2023 14:20:32 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E4=BF=A1=E6=81=AF=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/user/changeMineInfo.vue | 170 +++++++++++++++++++++++++++++-----
 1 file changed, 146 insertions(+), 24 deletions(-)

diff --git a/pages/user/changeMineInfo.vue b/pages/user/changeMineInfo.vue
index 069a492..d3f9e74 100755
--- a/pages/user/changeMineInfo.vue
+++ b/pages/user/changeMineInfo.vue
@@ -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>