提交

pages/mine/Changehepassword.vue

@@ -5,7 +5,7 @@
 				<view class="inpTextLable">
 					<view class="inpTextName">原密码</view>
 				</view>
-				<input placeholder="请输入原密码" placeholder-class="inpTextBox" class="inpTextBox1" maxlength="12"
+				<input placeholder="请输入原密码" placeholder-class="placeInpTextBox" class="inpTextBox1" maxlength="12"
 				v-model="password"	type="text"></input>
 			</view>
 		</view>
@@ -14,20 +14,20 @@
 				<view class="inpTextLable">
 					<view class="inpTextName">新密码</view>
 				</view>
-				<input placeholder="请输入6-12位新密码" placeholder-class="inpTextBox" class="inpTextBox1" maxlength="12"
+				<input placeholder="请输入6-12位新密码" placeholder-class="placeInpTextBox" class="inpTextBox1" maxlength="12"
 				v-model="newPassword"	type="password"></input>
 			</view>
 		</view>
-		<view class="inpText" >
+		<view class="inpText" style="padding-bottom: 8rpx;" >
 			<view class="inpTextBox" style="border: none;">
 				<view class="inpTextLable">
 					<view class="inpTextName">确认密码</view>
 				</view>
-				<input placeholder="请确认密码" placeholder-class="inpTextBox" class="inpTextBox1" maxlength="12"
+				<input placeholder="请确认密码" placeholder-class="placeInpTextBox" class="inpTextBox1" maxlength="12"
 				v-model="queryPassword"	type="password"></input>
 			</view>
 		</view>
-		<button class="save" @tap="savePassword">保存</button>
+		<button class="save" @tap="savePassword">确定</button>
 	</view>
 </template>
 
@@ -87,15 +87,16 @@
 		}
 	};
 </script>
-<style>
+<style lang="scss">
 	.inpText {
+		padding: 0 30rpx;
 		width: 100%;
 		box-sizing: border-box;
-		padding: 0 20rpx;
 		background-color: #FFFFFF;
 	}
 
 	.inpTextBox {
+		padding: 36rpx 0 28rpx;
 		color: #BBBFC8;
 		text-align: left;
 		border-bottom: 1px solid #EEEEEE;
@@ -105,13 +106,28 @@
 		-webkit-box-align: center;
 		-webkit-align-items: center;
 		align-items: center;
-		height: 109rpx;
+	}
+	
+	.placeInpTextBox {
+		color: #999;
+		font-size: 30rpx;
 	}
 
 	.inpTextLable {
+		position: relative;
 		width: 155rpx;
 		display: flex;
 		align-items: center;
+		
+		&::before {
+			content: '';
+			display: block;
+			position: absolute;
+			right: 0;
+			width: 2rpx;
+			height: 30rpx;
+			background: #999999;
+		}
 	}
 
 	.inpTextName {

pages/mine/Myprofile.vue

@@ -1,22 +1,23 @@
 <template>
-	<view>
+	<view class="main">
 		<view class="setBox">
 			<view class="setList" @tap="setHead" style="height: 140rpx;line-height: 120rpx;">
 				<text style="font-size: 30rpx;color: #333333;">头像</text>
-				<image src="/static/images/arrow.png" class="more">
-				</image>
-				<image
-					:src="avatar||'https://qufang.oss-cn-beijing.aliyuncs.com/upload/icon/xcx/zkgj/headPicture.png'"
-					class="headPicture"></image>
+				<view class="setList-right">
+					<image :src="avatar||'https://qufang.oss-cn-beijing.aliyuncs.com/upload/icon/xcx/zkgj/headPicture.png'"
+						class="headPicture"></image>
+					<image src="/static/images/arrow.png" class="more"></image>
+				</view>
 			</view>
 			<view>
-				
 				<navigator class="setList" :url="'/pages/mine/nickname?userName=' + name + '&imgSrc=' + imgSrc">
-					<text style="font-size: 30rpx;color: #333333;">昵称</text>
-					<image src="/static/images/arrow.png" class="more"></image>
-					<text class="userName">{{name||"暂无昵称"}}</text>
+					<text style="font-size: 30rpx;color: #333333;">名字</text>
+					
+					<view class="setList-right">
+						<text class="userName">{{name||"暂无昵称"}}</text>
+						<image src="/static/images/arrow.png" class="more"></image>
+					</view>
 				</navigator>
-				
 				<!-- <navigator class="setList" url="/pages/mine/signature">
 					<text style="font-size: 30rpx;color: #333333;">签名</text>
 					<image src="/static/images/arrow.png"	class="more"></image>
@@ -111,32 +112,42 @@
 		}
 	};
 </script>
-<style>
-	page {
-		width: 100%;
-		height: 100%;
-		background: #fff;
+
+
+<style lang="scss" scoped>
+	.main {
+		width: 100vw;
+		min-height: calc(100vh - var(--window-top));
+		background: #F8F8F8;
+		display: flex;
+		flex-direction: column;
 	}
 
 	.setBox {
-		padding-top: 20rpx;
-		padding-left: 30rpx;
-		padding-right: 30rpx;
+		margin-top: 20rpx;
+		flex-grow: 1;
+		background: #fff;
 	}
 
 	.setList {
+		padding: 36rpx 30rpx;
 		width: 100%;
-		height: 100rpx;
-		background: #fff;
 		box-sizing: border-box;
-		line-height: 100rpx;
 		border-bottom: 1rpx solid #EEEEEE;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		
+		.setList-right {
+			display: flex;
+			align-items: center;
+		}
 	}
 
 	.headPicture {
 		border-radius: 50%;
-		width: 100rpx;
-		height: 100rpx;
+		width: 120rpx;
+		height: 120rpx;
 		float: right;
 		object-fit: cover;
 		-o-object-fit: cover;
@@ -144,14 +155,12 @@
 	}
 
 	.userName {
-		float: right;
+		
 	}
 
 	.more {
 		width: 18rpx;
 		height: 32rpx;
-		float: right;
-		margin-top: 32rpx;
 		margin-left: 20rpx;
 	}