登录验证码页样式改版

common/styles/global/pages.scss

@@ -55,8 +55,8 @@
 		  }
 	}
 
-	.tel-btn-disabled{background-image: url("@/static/images/login/login-btn-bj-disabled.png");color:#999b9a;}
-	.tel-btn-normal{background-image: url("@/static/images/login/login-btn-bj.png");color:#fff;}
+	.login-btn-disabled{background-image: url("@/static/images/login/login-btn-bj-disabled.png");color:#999b9a;}
+	.login-btn-normal{background-image: url("@/static/images/login/login-btn-bj.png");color:#fff;}
 	.bottom-btn-box{
 		position: absolute;bottom:8%;left: 50%;transform: translateX(-50%);
 		.bottom-tip{color: #999;font-size: 28rpx;text-align: center;margin-bottom: 60rpx;}
@@ -80,19 +80,22 @@
 		width: 317rpx;height: 77rpx;@include ezy-no-repeat-cover;margin-right: auto;
 		background-image: url("@/static/images/login/login-yzm.png");
 	}
+	.yzm-show{width: 662rpx;font-size: 30rpx;color: #666;margin: 0 0 24rpx 12rpx;}
 	.yzm-btn{margin-top: 42rpx;}
-	.yzm-show{font-size: 28rpx;color: #ffffffd9;margin: 24rpx 0 0 20rpx;}
-	.login-btn-disabled{background-image: url("@/static/images/login/login-btn-bj-disabled.png");}
-	.login-btn-normal{background-image: url("@/static/images/login/login-btn-bj.png");}
-	.cxfs-btn{font-size: 30rpx;color: #3257b9;display: inline-block;margin: 20rpx auto 60rpx;}
+	.cxfs-btn{font-size: 30rpx;color: #3257b9;display: inline-block;margin: 60rpx auto 160rpx;}
 	.cxfs-btn-disabled{color: #777;}
-	.login-text{font-size: 28rpx;color: #3257b9;margin: 16rpx 0 0 20rpx;}
+	.login-text{
+		font-size: 30rpx;color: #888;margin: 16rpx auto 0 56rpx;
+		text{color: #64a8e3;}
+	}
 
 	/* 针对小屏幕设备 */
 	@media (max-height: 750px) {
 		padding-top: 150rpx;
 		.login-body-box{margin: 100rpx auto 0;  }
 		.login-btn{margin-top: 56rpx;}
+		// 验证码
+		.yzm-btn{margin-top: 36rpx;}
 	}
 	@media (max-height: 650px) {
 		padding-top: 100rpx;
@@ -102,14 +105,13 @@
 			bottom: 5%;
 			.bottom-tip{margin-bottom: 32rpx;}
 		}
+		// 验证码
+		.cxfs-btn{margin: 42rpx auto 100rpx;}
 	}
 	@media (max-height: 550px) {
 		min-height: 1100rpx;
 	 
 	}
-	@media (max-height: 600px) {
-		
-	}
 }
 
 // 用户协议弹窗

pages/login/index.vue

@@ -86,7 +86,7 @@
 	let indexData = reactive({
 		phoneNumber: null,
 		clearTelIcon: false,
-		telStatus: 'tel-btn-disabled',
+		telStatus: 'login-btn-disabled',
 		isAgreed: false,
 		sliderObj: {},
 	})
@@ -142,7 +142,7 @@
 		})
 	}
 	const getYzmBtn = () => {
-		if (indexData.telStatus === 'tel-btn-normal') {
+		if (indexData.telStatus === 'login-btn-normal') {
 			if (indexData.isAgreed === true) {
 				uni.redirectTo({
 					url: `/pages/login/login?telNum=${indexData.phoneNumber}`
@@ -196,9 +196,9 @@
 	const validatePhoneNumber = (value) => {
 		const phoneRegex = /^1[3-9]\d{9}$/;
 		if (phoneRegex.test(value)) {
-			indexData.telStatus = 'tel-btn-normal';
+			indexData.telStatus = 'login-btn-normal';
 		} else {
-			indexData.telStatus = 'tel-btn-disabled';
+			indexData.telStatus = 'login-btn-disabled';
 		}
 	}
 
@@ -213,7 +213,7 @@
 
 	const clearTel = () => {
 		indexData.phoneNumber = '';
-		indexData.telStatus = 'tel-btn-disabled';
+		indexData.telStatus = 'login-btn-disabled';
 		indexData.clearTelIcon = false;
 	}
 

pages/login/login.vue

@@ -1,10 +1,9 @@
 <template>
 	<view class="ezy-login-page">
 		<view @click="goIndex" class="ezy-nav-bar-icon yzm-nav-bar-icon"></view>
+		<icon class="login-img"></icon>
 		<view class="ezy-login-wrap">
-			<icon class="login-e-img"></icon>
 			<view class="login-body-box">
-				<view class="login-title-img"></view>
 				<view class="yzm-show">验证码已发送至：{{loginData.phoneNumber}}</view>
 
 				<view class="phone-input-box">
@@ -12,11 +11,11 @@
 						maxlength="4" @input="clearYzmInput" />
 					<view class="close-btn" v-if="loginData.clearYzmIcon" @click="clearYzm"></view>
 				</view>
-				<view class="login-btn yzm-btn" @click="loginBtn" :class="loginData.yzmStatus"></view>
+				<view class="login-btn yzm-btn" @click="loginBtn" :class="loginData.yzmStatus">登录</view>
 				<text class="cxfs-btn" @click="startCountdown"
 					:class="{ 'cxfs-btn-disabled': loginData.isDisabled}">{{loginData.buttonText}}</text>
 				<text class="login-text" @click="goIndex">无法收到验证码</text>
-				<text class="login-text">客服电话:4001750778</text>
+				<text class="login-text">客服电话：<text>4001750778</text></text>
 			</view>
 		</view>
 		<captcha ref="captcha" :config="config" @captchaSuccess="captchaSuccess" @captchaError="captchaError"