zxz

pages/login/step1.vue

@@ -5,7 +5,28 @@
 				<h2>填写基础信息<span>1</span>/4</h2>
 				<p>交友第一步，简单介绍下自己吧~</p>
 			</view>
+			
 			<view class="jpLogin-main">
+				<view class="form-tit">
+					<span>*</span>
+					<p>为必填项，著名保密箱的为不对外公开信息</p>
+				</view>
+				<view class="jpLogin-sex">
+					<view class="jpLogin-sex-item">
+						<u-image class="newsList-img" src="/static/img/sexMan.png" height="200" width="200" border-radius="10"></u-image>
+						<!-- <u-image class="newsList-img" src="/static/img/sexMan2.png" height="200" width="200" border-radius="10"></u-image> -->
+					</view>
+					<view class="jpLogin-sex-item">
+						<!-- <u-image class="newsList-img" src="/static/img/sexWoman.png" height="200" width="200" border-radius="10"></u-image> -->
+						<u-image class="newsList-img" src="/static/img/sexWoman2.png" height="200" width="200" border-radius="10"></u-image>
+					</view>
+				</view>
+				<view class="form-tit">
+					<p>注册完成，你的性别就不能修改了哦~</p>
+				</view>
+				<view class="form-tit" style="margin-top: 36px;">
+					<p>设置生日、身高和体重</p>
+				</view>
 				<u-form :model="form" ref="uForm">
 					<view class="jpLogin-input">
 						<u-form-item required="true"><u-input v-model="form.sex" type="select" placeholder="请选择生日"/></u-form-item>
@@ -47,6 +68,25 @@
 </script>
 
 <style lang="scss" scoped>
+	.jpLogin-sex{
+		display: flex;
+		margin-bottom: 5px;
+		.jpLogin-sex-item{
+			margin-right: 15px;
+		}
+	}
+	.form-tit{
+		display: flex;
+		align-items: center;
+		span{
+			color:#EE3138 ;
+			
+		}
+		p{
+			color: #999;
+			margin-bottom: 8px;
+		}
+	}
 	.jpLogin {
 		background: url(/static/img/loginBg.png) top center no-repeat;
 		background-size: 100%;

pages/login/step2.vue

@@ -44,14 +44,34 @@
 						<u-form-item required="true"><u-input v-model="form.sex" type="select" placeholder="我的子女状况"/></u-form-item>
 					</view>
 					
-					<view class="form-tit">
+					<view class="form-tit" style="margin-top: 36px;">
 						自我评价
 					</view>
 					<view class="jpLogin-textarea">
 						<u-form-item>
-							<u-input v-model="form.value" type="textarea" placeholder="" />
+							<u-input v-model="form.value" type="textarea" height="140" placeholder="" />
 						</u-form-item>
 					</view>
+					
+					<view class="form-tit" style="margin-top: 36px;">
+						选中我的兴趣爱好（可多选）
+					</view>
+					<view class="jpLogin-interest">
+						<view class="interest-item active">摄影</view>
+						<view class="interest-item">烹饪</view>
+						<view class="interest-item">健身</view>
+						<view class="interest-item active">看电影</view>
+						<view class="interest-item">旅行</view>
+						<view class="interest-item">打游戏</view>
+						<view class="interest-item">修身养性</view>
+						<view class="interest-item">摄影</view>
+						<view class="interest-item">烹饪</view>
+						<view class="interest-item">健身</view>
+						<view class="interest-item">看电影</view>
+						<view class="interest-item">旅行</view>
+						<view class="interest-item">打游戏</view>
+						<view class="interest-item">修身养性</view>
+					</view>
 				</u-form>
 			</view>
 			<view style="margin-top: 60px;">
@@ -83,9 +103,24 @@
 </script>
 
 <style lang="scss" scoped>
+	.jpLogin-interest{
+		display: flex;
+		flex-wrap: wrap;
+		.interest-item{
+			padding: 4px 10px;
+			background-color: #E5E7EA;
+			border-radius: 4px;
+			margin-right: 10px;
+			margin-bottom: 10px;
+		}
+		.active{
+			background-color: #FFC1BC;
+		}
+	}
 	.form-tit{
 		color: #999;
 		margin-bottom: 8px;
+		
 	}
 	.jpLogin-textarea{
 		background: #fff;

pages/login/step3.vue

@@ -37,7 +37,7 @@
 					</view>
 					<view class="jpLogin-textarea">
 						<u-form-item>
-							<u-input v-model="form.value" type="textarea" placeholder="" />
+							<u-input v-model="form.value" type="textarea"  height="140" placeholder="" />
 						</u-form-item>
 					</view>
 				</u-form>

pages/login/step4.vue

@@ -6,7 +6,21 @@
 				<p>选择一张你的优质照片作为头像吧~</p>
 			</view>
 			<view class="jpLogin-main">
-				<u-upload :action="action" :file-list="fileList" ></u-upload>
+				<view class="jpLogin-upload">
+					<u-image class="newsList-img" src="/static/img/head.png" height="320" width="320" border-radius="10"></u-image>
+				</view>
+				<p>点击上传头像</p>
+				<view class="jpLogin-case">
+					<view class="jpLogin-case-item">
+						<u-image class="newsList-img" src="/static/img/user1.jpg" height="170" width="170" border-radius="10"></u-image>
+					</view>
+					<view class="jpLogin-case-item">
+						<u-image class="newsList-img" src="/static/img/user4.jpg" height="170" width="170" border-radius="10"></u-image>
+					</view>
+					<view class="jpLogin-case-item">
+						<u-image class="newsList-img" src="/static/img/user3.jpg" height="170" width="170" border-radius="10"></u-image>
+					</view>
+				</view>
 			</view>
 			<view style="margin-top: 60px;">
 				<u-button type="error" shape="circle" :custom-style="customStyle">确认提交</u-button>
@@ -20,12 +34,7 @@
 	export default {
 		data() {
 			return {
-				action: 'http://www.example.com/upload',
-				fileList: [
-					{
-						url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg',
-					}
-				]
+
 			}
 			methods: {
 
@@ -65,66 +74,25 @@
 
 	.jpLogin-main {
 		margin-top: 40px;
-	}
-
-	.jpLogin-input {
-		height: 48px;
-		background-color: #fff;
-		border: 1px solid #EEDCDC;
-		border-radius: 50px;
-		display: flex;
-		width: 100%;
-		padding: 0 20px;
-		margin-bottom: 20px;
-		.u-form-item{
-			flex: 1;
-		}
-		.jpLogin-icon{
-			font-size: 20px;
-			color:#FFC1C1;
-			margin-right: 20px;
-			position: relative;
-			&:after{
-				content: '';
-				width: 1px;
-				height: 16px;
-				background-color:#E6D6D6;
-				position: absolute;
-				right: -10px;
-				top: 15px;
-			}
+		p{
+			font-size: 16px;
+			color:#958F90;
+			text-align: center;
+			margin: 10px 0 60px;
 		}
 	}
-
-	.jpLogin-link {
+	.jpLogin-case{
 		display: flex;
 		justify-content: space-between;
-		align-items: center;
-		font-size: 14px;
-
-		.jpLogin-link-l {
-			display: flex;
-			align-items: center;
-
-			p {
-				color: #4f4646;
-			}
-		}
-
-		span {
-			color: #1677FF;
-		}
 	}
-	.jpLogin-radio{
-		margin-top: 16px;
-		text-align: center;
+	.jpLogin-upload{
+		border: 1px dashed #FFA199;
+		border-radius: 12px;
+		overflow: hidden;
+		width: 160px;
+		margin: 0 auto;
 		p{
-			font-size: 14px;
-			color: #a0a4b8;
-		}
-		span{
-			color:#ff5e5e;
-			font-size: 14px;
+			margin-top: 5px;
 		}
 	}
 </style>