登录页样式改版

common/styles/global/pages.scss

@@ -1,27 +1,22 @@
 /***** 这里放页面样式 *****/
 // 登录页  padding-bottom: env(safe-area-inset-bottom); box-sizing: unset;
 .ezy-login-page {
-	width:100%;height:100vh; background-color: #80dfff;position: relative;
-	.ezy-login-wrap{width:100%;height: 1623.08rpx;background-image: url("@/static/images/login/login-bj.png");@include ezy-no-repeat-cover(top);}
-	.login-e-img{
-		width: 692rpx;height: 625rpx;@include ezy-no-repeat-cover;
-		background-image: url("@/static/images/login/login-e-img.gif");
-		position: absolute;top: -180rpx;left: -180rpx;
+	width:100%;height:100vh; background-color: #f9f9fb;position: relative;
+	box-sizing: border-box;padding-top: 240rpx;
+	.login-img{
+		width: 272rpx;height: 260rpx;@include ezy-no-repeat-cover;margin: 0 auto;
+		background-image: url("@/static/images/login/login-logo.png");display: block;
 	}
 	.login-body-box{
-		display: flex;flex-direction: column;display: flex;box-sizing: border-box;
-		position: absolute;top:690rpx;left: 50%;transform: translateX(-50%);
+		display: flex;flex-direction: column;align-items: center;margin: 160rpx auto 0;  
 	}
-	.index-title-img{
-		width: 411rpx;height: 73rpx;@include ezy-no-repeat-cover;margin-right: auto;
-		background-image: url("@/static/images/login/login-tel.png");
-	}
-	.login-btn{width: 644rpx;height: 106rpx;margin-top: 84rpx;@include ezy-no-repeat-cover;}
+	.login-btn{width: 655rpx;height: 92rpx;line-height: 92rpx;text-align: center;font-size:32rpx;
+	margin-top: 84rpx;@include ezy-no-repeat-cover;font-weight: bold;}
 	/***** 输入手机号页面*****/
 	.phone-input-box{
-		width: 644rpx;height: 144rpx;box-sizing: border-box;padding-bottom: 20rpx;
-		display: flex;align-items: center;margin-top: 50rpx;
-		background-image: url("@/static/images/login/login-tel-bj.png");@include ezy-no-repeat-cover;
+		width: 662rpx;height: 122rpx;
+		display: flex;align-items: center;@include ezy-no-repeat-cover;
+		background-image: url("@/static/images/login/login-tel-bj.png");
 		.phone-prefix {
 		  width: 90rpx;margin-left:18rpx;font-size: 38rpx;color: #ffffffd9;
 		  font-weight: normal;display: flex;align-items: center;justify-content: space-between;flex-shrink: 0;
@@ -35,31 +30,48 @@
 	}
 
 	.agreement-checkbox-box {
-		  display: flex;justify-content: center;margin-top: 10rpx;
+		  display: flex;justify-content: center;margin-top: 32rpx;line-height: 1;
 		  uni-checkbox-group{font-size: 0;}
-		  .agreement-checkbox-input{width: 40rpx;height: 40rpx;border: 0;margin-right: 4rpx;font-size: 0;}
+		  .agreement-checkbox-input{
+			  width: 80rpx;height: 80rpx;
+			  border: 0;margin-right: 4rpx;font-size: 0;}
 		  .uni-checkbox-input{
-			  width: 40rpx;height: 40rpx;border: 0;background-color: unset;@include ezy-no-repeat-cover;
-			  background-image: url("@/static/images/login/login-checked-bj.png");
-		  	svg {width: 28;height: 28rpx;top: 48%;left: 50%;}
+			  width: 80rpx;height: 80rpx;border: 0;background-color: unset;position: relative;
+			  display: flex;align-items: center;justify-content: flex-end;
+			 /* @include ezy-no-repeat-cover;
+			  background-image: url("@/static/images/login/login-checked-bj.png"); */
+		  	svg {
+				width: 27rpx;height: 27rpx;top: 39rpx;left: 60rpx;background-color: #379af8;border-radius: 50%;
+				path{display: none;}
+				}
+		  }
+		  .uni-checkbox-input::before{
+			   content: '';width: 30rpx;height: 30rpx;border: 1rpx solid #379af8;display: block;
+			   border-radius: 50%;box-sizing: border-box;margin:0 5rpx;
 		  }
 		  .agreement-text-box {
-		  		color: #ffffffd9;font-size: 27rpx;
-		  		flex-direction: row;display: flex;align-items: center;
-		  	.agreement-text{color: #e3f524;display: contents;}
+		  		color: #333;font-size: 28rpx;flex-direction: row;display: flex;align-items: center;
+				.agreement-text{color: #379af8;display: contents;}
 		  }
 	}
 
-	.tel-btn-disabled{background-image: url("@/static/images/login/login-zym-bj-disabled.png");}
-	.tel-btn-normal{background-image: url("@/static/images/login/login-zym-bj.png");}
+	.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;}
 	.bottom-btn-box{
-		position: absolute;bottom:5%;left: 50%;transform: translateX(-50%);display: flex;
-		.wx-btn,.yk-btn,.apple-btn{
-			width: 125rpx;height: 144rpx;@include ezy-no-repeat-cover;margin: 0 20rpx;
+		position: absolute;bottom:8%;left: 50%;transform: translateX(-50%);
+		.bottom-tip{color: #999;font-size: 28rpx;text-align: center;margin-bottom: 60rpx;}
+		.btn-box{
+			display: flex;
+			.wx-btn,.yk-btn,.apple-btn{
+				width: 150rpx;display: flex;align-items: center;flex-direction: column;
+				color: #666;font-size: 26rpx;
+				icon{width: 50rpx;height: 42rpx;@include ezy-no-repeat-cover;margin-bottom: 12rpx;}
+			}
+			.wx-btn icon{background-image: url("@/static/images/login/login-wx-btn.jpg");}
+			.yk-btn icon{background-image: url("@/static/images/login/login-yk-btn.jpg");}
+			.apple-btn icon{background-image: url("@/static/images/login/login-apple-btn.jpg");}
 		}
-		.wx-btn{background-image: url("@/static/images/login/login-wx-btn.png");}
-		.yk-btn{background-image: url("@/static/images/login/login-yk-btn.png");}
-		.apple-btn{background-image: url("@/static/images/login/login-apple-btn.png");}
+		
 	}
 
 	/***** 输入验证码页面*****/
@@ -77,30 +89,26 @@
 	.login-text{font-size: 28rpx;color: #3257b9;margin: 16rpx 0 0 20rpx;}
 
 	/* 针对小屏幕设备 */
-	@media (max-height: 800px) {
-		.login-body-box{top:660rpx;}
-		.bottom-btn-box{bottom:2%;}
-		.login-btn{margin-top: 64rpx;}
-		// 输入验证码页面
-		.yzm-btn{margin-top: 32rpx;}
-		.cxfs-btn{margin: 16rpx auto 30rpx;}
+	@media (max-height: 750px) {
+		padding-top: 150rpx;
+		.login-body-box{margin: 100rpx auto 0;  }
+		.login-btn{margin-top: 56rpx;}
 	}
-	@media (max-height: 736px) {
-		.login-btn{margin-top: 42rpx;}
+	@media (max-height: 650px) {
+		padding-top: 100rpx;
+		.login-body-box{margin: 60rpx auto 0;  }
+		.login-btn{margin-top: 32rpx;}
+		.bottom-btn-box{
+			bottom: 5%;
+			.bottom-tip{margin-bottom: 32rpx;}
+		}
 	}
-	@media (max-height: 700px) {
-	   .login-body-box{top:640rpx;}
-	   .login-btn{margin-top: 46rpx;}
-	  .phone-input-box{margin-top: 24rpx;}
-
-	  // 输入验证码页面
-	  .yzm-btn{margin-top: 24rpx;}
-	  .cxfs-btn{margin: 12rpx auto 20rpx;}
+	@media (max-height: 550px) {
+		min-height: 1100rpx;
+	 
 	}
 	@media (max-height: 600px) {
-		.bottom-btn-box{bottom:5%;}
-		.login-btn{margin-top: 36rpx;}
-		.ezy-login-wrap{height: 1360rpx;position: relative;}
+		
 	}
 }
 

pages/login/index.vue

@@ -1,10 +1,8 @@
 <template>
 	<view class="ezy-login-page">
-		<view class="ezy-login-wrap">
-			<icon class="login-e-img"></icon>
+			<icon class="login-img"></icon>
 			<!-- 手机号 -->
 			<view class="login-body-box">
-				<view class="index-title-img"></view>
 				<view class="phone-input-box">
 					<view class="phone-prefix">+86</view>
 					<input class="phone-input" type="text" v-model="indexData.phoneNumber" placeholder="请输入手机号"
@@ -17,17 +15,28 @@
 						<checkbox class="agreement-checkbox-input" color="#FFFFFF" value="agree"
 							:checked="indexData.isAgreed" />
 					</checkbox-group>
-					<view class="agreement-text-box">
-						登录注册代表您已同意<view class="agreement-text" @click="agreeBtn('yhxy')">《鹅状元用户协议》</view>和<view
-							@click="agreeBtn('ystk')" class="agreement-text">《鹅状元隐私政策》</view>
+					<view class="agreement-text-box"> 
+						我已阅读并同意<view class="agreement-text" @click="agreeBtn('yhxy')">《用户协议》</view>和<view
+							@click="agreeBtn('ystk')" class="agreement-text">《隐私政策》</view>
 					</view>
-				</view>
-				<view class="login-btn" @click="getYzmBtn" :class="indexData.telStatus"></view>
 			</view>
+			<view class="login-btn" @click="getYzmBtn" :class="indexData.telStatus">发送验证码</view>
 			<view class="bottom-btn-box">
-				<view class="yk-btn" @click="ykBtn"></view>
-				<view v-if="wxFlag" class="wx-btn" @click="wxLoginClick"></view>
-				<view class="apple-btn" v-if="showAppleLogin" @click="appleLoginClick"></view>
+				<view class="bottom-tip">选择第三方登录</view>
+				<view class="btn-box">
+					<view v-if="wxFlag" class="wx-btn" @click="wxLoginClick">
+						<icon></icon>
+						<view>微信登录</view>
+					</view>
+					<view class="yk-btn" @click="ykBtn">
+						<icon></icon>
+						<view>游客登录</view>
+					</view>
+					<view class="apple-btn" v-if="showAppleLogin" @click="appleLoginClick">
+						<icon></icon>
+						<view>苹果登录</view>
+					</view>
+				</view>
 			</view>
 		</view>
 		<agree-content-dialog ref="agreeContentDialogRef" :agreeType="agreeType"></agree-content-dialog>