Przeglądaj źródła

修改登录注册部分

wangchao 3 lat temu
rodzic
commit
9a2a34544c
4 zmienionych plików z 60 dodań i 27 usunięć
  1. 9 0
      App.vue
  2. 13 8
      pages/public/login.vue
  3. 27 10
      pages/public/login_account_number.vue
  4. 11 9
      pages/public/register.vue

+ 9 - 0
App.vue

@@ -806,4 +806,13 @@
 			}
 		}
 	}
+/* 	/deep/.uni-input-placeholder{
+		font-family: PingFangSC-Regular, PingFang SC;
+		font-weight: 400;
+		color: #AFB3BF;
+	}
+	/deep/.uni-input-input{
+		font-family: PingFangSC-Regular, PingFang SC;
+		font-weight: 400;
+	} */
 </style>

+ 13 - 8
pages/public/login.vue

@@ -7,12 +7,13 @@
 			<h2 class="title Semibold">欢迎使用易粮易运</h2>
 			<view style='width:100%;margin-top:50px;border-bottom:1px solid #E8E9ED;padding:10px;' class="flex">
 				<view class="phone-before-num NumberMedium">+86</view>
-				<view style='width:85%;'><input style='padding-left:10px;' v-model='phone' @input='changephone' placeholder="请输入手机号码" type="number" maxlength="11"></view>
+				<view style='width:85%;'><input style='padding-left:10px;' class="NumberMedium" v-model='phone' @input='changephone' placeholder="请输入手机号码" type="number" maxlength="11"></view>
 				<image v-if='phone!=""' @click='phone=""' class='close' src='../../static/img/login/guanbi@2x.png'></image>
 			</view>
-			<button @click='gocode' :class='codestatus?"active":""' class='verificationCode'>获取验证码</button>
-			<button @click='goregister' class='verificationCode active'>手机号一键注册</button>
-			<view @click='gonumber' style='text-align:center;color:#6A6A6A;margin-top:10px;'>使用账号密码登录</view>
+			<button @click='gocode' :class='codestatus?"active":""' class='Regular verificationCode'>获取验证码</button>
+			<view @click='gonumber' class="Regular use-password" style='text-align:center;color:#6A6A6A;'>使用账号密码登录</view>
+			
+			<button @click='goregister' class='Regular register active'>手机号一键注册</button>
 		</view>
 		<view v-if="loginType === 'phone'" class="register-section">
 			还没有账号?
@@ -903,13 +904,14 @@
 	}
 	.register{
 		position:absolute;
-		bottom:20px;
+		bottom:136rpx;
 		left:50%;
 		transform: translateX(-50%);
 		color:#333333;
-		height:50px;
-		line-height:50px;
-		border-radius:30px;border: 1px solid #444444;
+		border-radius:43rpx;
+		border: 1px solid #444444;
+		font-size: 28rpx;
+		
 	}
 	.register:after{
 		border:none;
@@ -923,4 +925,7 @@
 		font-weight: 500;
 		color: #333333;
 	}
+	.use-password{
+		margin-top: 31rpx;
+	}
 </style>

+ 27 - 10
pages/public/login_account_number.vue

@@ -4,22 +4,26 @@
 		<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
 		<view class="wrapper">
 			<image style='width:38px;height:38px;margin-bottom:10px;' src='../../static/img/login/logo@2x.png'></image>
-			<h2>欢迎使用易粮易运</h2>
-			<view style='position:relative;width:100%;margin-top:50px;border-bottom:1px solid #E8E9ED;padding:10px;' class="flex">
-				<view style='width:15%;border-right:1px solid #E8E9ED;'>+86</view>
-				<view style='width:85%;'><input style='padding-left:10px;' maxlength='11' v-model='phone' placeholder="请输入手机号码" type="number"></view>
+			<h2 class="title Semibold">欢迎使用易粮易运</h2>
+			<view style='position:relative;width:100%;margin-top:50px;border-bottom:1px solid #E8E9ED;padding:10px;align-items: center;' class="flex">
+				<view class="phone-before-num NumberMedium">+86</view>
+				<view style='width:85%;'>
+					<u-input class="phone-number" :custom-style='{"fontSize":"16px"}'  maxlength='11' v-model='phone' placeholder="请输入手机号码" type="number"/>
+					<!-- <input style='padding-left:10px;' maxlength='11' v-model='phone' placeholder="请输入手机号码" type="number"> -->
+					</view>
 			<image v-if='phone!=""' @click='phone=""' class='close' src='../../static/img/login/guanbi@2x.png'></image>
 			</view>
 			<view style='margin-top:20px;border-bottom:1px solid #E8E9ED;position:relative;'>
-				<input class='password' style='height:40px;' v-model='password' placeholder="请输入密码,6-16位字符" :type="type" value="" />
+				<u-input class='password' style='height:40px;' :custom-style='{"fontSize":"16px"}' v-model='password' placeholder="请输入密码,6-16位字符" :type="type" value="" />
+				<!-- <input class='password' style='height:40px;' v-model='password' placeholder="请输入密码,6-16位字符" :type="type" value="" />
 				<view @click='switchover' style='position:absolute;right:0;top:38%;z-index:10;cursor:pointer;' class="iconfont " :class='type=="password"?"icon-yanjing-biyan":"icon-yanjing-zhengyan"'></view>
-				<image v-if='password!=""' @click='password=""' class='close2' src='../../static/img/login/guanbi@2x.png'></image>
+				<image v-if='password!=""' @click='password=""' class='close2' src='../../static/img/login/guanbi@2x.png'></image> -->
 			</view>
-			<button :class='phone!=""&&password!=""?"active":""' @click='passlogin' class='verificationCode'>登录</button>
-			<button @click='goregister' class='verificationCode active'>手机号一键注册</button>
+			<button :class='phone!=""&&password!=""?"active":""' @click='passlogin' class='Regular verificationCode'>登录</button>
+			<button @click='goregister' class='verificationCode active Regular'>手机号一键注册</button>
 			<view class='flex' style='color:#6A6A6A;margin-top:10px;'>
-				<view style='flex:1;text-align:center;border-right:1px solid #E8E9ED;' @click="forgetpass()">忘记密码</view>
-				<view @click='gocode' style='flex:1;text-align:center;'>验证码登录</view>
+				<view style='flex:1;text-align:center;border-right:1px solid #E8E9ED;' class="Regular" @click="forgetpass()">忘记密码</view>
+				<view @click='gocode' style='flex:1;text-align:center;' class="Regular">验证码登录</view>
 			</view>
 		</view>
 		</view>
@@ -933,4 +937,17 @@ username: "13333333333"}).then(res1 => {
 	.register:after{
 		border:none;
 	}
+	.phone-before-num{
+		font-size: 34rpx;
+		color: #333333;
+		border-right: 1px solid #E8E9ED;
+		padding-right: 20rpx;
+	}
+	.phone-number{
+		margin-left: 20rpx;
+		font-size: 34rpx;
+		font-family: DINPro-Medium, DINPro;
+		font-weight: 500;
+		color: #333333;
+	}
 </style>

+ 11 - 9
pages/public/register.vue

@@ -3,23 +3,24 @@
 		<view class="back-btn cuIcon-back" @click="navBack"></view>
 		
 		<view class="wrapper">
-			<h2>手机号注册</h2>
+			<h2 class="Semibold">手机号注册</h2>
 			<view style='width:100%;margin-top:50px;border-bottom:1px solid #E8E9ED;padding:10px;position:relative;' class="flex">
-				<view style='width:15%;border-right:1px solid #E8E9ED;'>+86</view>
-				<view style='width:85%;'><input maxlength="11" v-model='phone' @input='phoneinput' style='padding-left:10px;' placeholder="请输入手机号码" type="text"></view>
+				<view class="NumberMedium" style='width:15%;border-right:1px solid #E8E9ED;'>+86</view>
+				<view style='width:85%;'><input maxlength="11" v-model='phone' @input='phoneinput' style='padding-left:10px;' placeholder="请输入手机号码" type="number" class="Regular"></view>
 			<image v-if='phone!=""' @click='phone=""' class='close' src='../../static/img/login/guanbi@2x.png'></image>
 			</view>
 			<view style='width:100%;border-bottom:1px solid #E8E9ED;position:relative;padding:10px;' class="flex">
 				<view style='width:70%;position:relative;'>
-					<input  v-model='verifyCode' placeholder="请输入验证码" type="text">
+					<input  v-model='verifyCode' class="Regular" placeholder="请输入验证码" type="number">
 					<image v-if='verifyCode!=""' @click='verifyCode=""' class='close1' src='../../static/img/login/guanbi@2x.png'></image>
 					</view>
-				<button :class='codestatus&&!sendDisabled?"active":""' @click='getcode' class='getcode'>{{sendText}}</button>
+				<button :class='codestatus&&!sendDisabled?"active":""' @click='getcode' class='getcode Regular'>{{sendText}}</button>
 			</view>
 			<view style='border-bottom:1px solid #E8E9ED;padding:10px;position:relative;'>
-				<input maxlength='16' class='password' style='height:30px;' v-model='password' placeholder="请输入密码,6-16位字符" :type="type">
-				<image v-if='password!=""' @click='password=""' class='close2' src='../../static/img/login/guanbi@2x.png'></image>
-				<view @click='switchover' style='position:absolute;right:0;top:38%;z-index:10;cursor:pointer;' class="iconfont " :class='type=="password"?"icon-yanjing-biyan":"icon-yanjing-zhengyan"'></view>
+				<u-input maxlength='16' class='Regular input-style' style='height:30px;' v-model='password' placeholder="请输入密码,6-16位字符" :type="type"/>
+<!-- 				<input maxlength='16' class='password Regular input-style' style='height:30px;' v-model='password' placeholder="请输入密码,6-16位字符" :type="type"> -->
+				<!-- <image v-if='password!=""' @click='password=""' class='close2' src='../../static/img/login/guanbi@2x.png'></image> -->
+				<!-- <view @click='switchover' style='position:absolute;right:0;top:38%;z-index:10;cursor:pointer;' class="iconfont " :class='type=="password"?"icon-yanjing-biyan":"icon-yanjing-zhengyan"'></view> -->
 			</view>
 			<button  :class='phone!=""&&verifyCode!=""&&password!=""?"active":""' @click='register' class='verificationCode'>注册</button>
 			<view style='color:#6A6A6A;margin-top:10px;text-align:center;'>
@@ -62,7 +63,7 @@
 				},
 				consentStatus:false,
 				codestatus:false,
-				type:'text',
+				type:'password',
 				inputStatus:'none',
 				verifyCode:null,
 				sendText:'获取验证码',
@@ -982,6 +983,7 @@ username: "13333333333"}).then(res1 => {
 	.password{
 		border:none;
 		outline: none;
+		
 	}
 	.apple{
 		background: #000;