登录页第一版

common/styles/global/components.scss

@@ -30,6 +30,15 @@ $titleBar-page: 100vh;
 $titleBar-tabBar-page: calc(100vh - var(--status-bar-height));
 /*  #endif  */
 
+/***** 页面背景图 *****/
+//  no-repeat  cover
+@mixin ezy-no-repeat-cover($position: center) {
+  background-position: $position;background-size: cover;background-repeat: no-repeat;
+}
+//  no-repeat  contain
+@mixin ezy-no-repeat-contain($position: center) {
+  background-position: $position;background-size: contain;background-repeat: no-repeat;
+}
 
 /***** 模拟标题栏 *****/
 .ezy-title-bar {

common/styles/global/pages.scss

@@ -1,90 +1,59 @@
 /***** 这里放页面样式 *****/
 // 登录页
-.mobile-login-page {
-		width: 100%;
-		height: 100%;
-		background: #FFF;
-		text-align: center;
-		position: absolute;
-		overflow: auto;
-
-		.login-top {
-			height: 540rpx;
-			background-size: cover;
-			background-image: url("@/static/images/login/login-bj-sj.png");
-			// logo
-
-		}
-
-		.login-logo {
-			width: 266rpx;
-			max-height: 100rpx;
-			margin-top: 156rpx;
-		}
-
-		.login-text {
-			display: block;
-			font-size: 64rpx;
-			color: #FFF;
-			margin: 24rpx 0 0;
-			font-weight: 700
-		}
-
-		// 登录区域
-		.login-body {
-			width: 100%;
-			padding: 0 60px;
-			box-sizing: border-box;
-			margin: 140rpx auto 0;
-
-			.input-container {
-				display: flex;
-				align-items: center;
-				/* 垂直对齐 */
-				position: relative;
-				height: 100rpx;
-				border-radius: 50rpx;
-				background-color: #F7F7F7;
-				padding: 0;
-				margin-bottom: 40rpx;
-
-			}
-
-			.input-icon {
-				margin-left: 20rpx;
-				/* 图标和输入框之间的间距 */
-				color: #999;
-			}
-
-
-		}
-
-		// 输入框
-		.login-btn {
-			width: 100%;
-			height: 100rpx;
-			margin-top: 60rpx;
-			font-size: 36rpx;
-			letter-spacing: 7.2rpx;
-			background: linear-gradient(0deg, #436aff 0%, #234ff7 100%);
-			border-radius: 50rpx;
-			border: 0;
-			color: #F7F7F7;
-			line-height: 100rpx;
+.ezy-login-page {
+	width:100%;height:100vh;background-color: #01a1ff;position: relative;
+	background-image: url("@/static/images/login/login-bj.jpg");@include ezy-no-repeat-cover(top);
+	.tel-box{
+		display: flex;flex-direction: column;box-sizing: border-box;padding: 0 53rpx;
+		position: absolute;top:calc(690rpx + var(--status-bar-height));
+		left: var(--window-left);right: var(--window-right);
+	}
+	.tel-img{
+		width: 411rpx;height: 73rpx;@include ezy-no-repeat-cover;
+		background-image: url("@/static/images/login/login-tel.png");
+	}
+	.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;
+		.phone-prefix {
+		  font-size: 20px;color: #ffffffd9;font-weight: normal;display: flex;align-items: center;
+		  span{padding: 0 10px;}
 		}
-
-		.login-change {
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-
-			.checkbox-zhanghao {
-				font-size: 24rpx;
-				color: #565656;
-
-			}
+		.phone-prefix::after{content: '';width: 1rpx;height: 40rpx;display: inline-block;;background-color: #ffffffd9;}
+		.phone-input {font-size: 20px;padding: 0 22rpx;box-sizing: border-box;color: #fff;}
+		.uni-input-placeholder {font-size: 16px;color: #ffffffd9;
 		}
+		.close-btn{width: 42rpx;height: 42rpx;margin-right: 30rpx;@include ezy-no-repeat-cover;
+		background-image: url("@/static/images/login/login-close-icon.png");}
+	}
+		 
+	.agreement-checkbox-box {
+		  display: flex;justify-content: center;margin-top: 4rpx;;
+		  .agreement-checkbox {
+		  	.uni-checkbox-wrapper{
+		  		color: #ffffffd9;font-size: 14px;line-height: 1;
+		  		flex-direction: row;flex-wrap: wrap;
+		  		.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");margin-right: 4rpx;
+		  			svg {width: 28;height: 28rpx;top: 48%;left: 50%;}
+		  		}
+		  	}
+		  	.agreement-text{color: #e3f524;}
+		  }
+	}
+		 
+	.yzm-btn-img{
+		width: 644rpx;height: 106rpx;margin-top: 84rpx;
+		background-image: url("@/static/images/login/login-zym-bj.png");@include ezy-no-repeat-cover;
+	}
+	.wx-btn-img{
+		width: 96rpx;height: 96rpx;position: absolute;bottom:3%;
+		left: 50%;transform:translateX(-50%) ;
+		background-image: url("@/static/images/login/login-wx-icon.png");@include ezy-no-repeat-cover;
 	}
+}
 	
 .lli-develop-expect-page{
 	display: flex;flex-direction: column;justify-content: space-between;align-items: center;

pages/login.vue

@@ -1,33 +1,26 @@
 <template>
-	<view class="mobile-login-page">
-		<view class="login-top">
-			<img class="login-logo" src="../static/images/login/login-logo-sj.png">
-			<text class="login-text">
-				{{systemName}}
-			</text>
-		</view>
-		<view class="login-body">
-			<view class="input-container">
-				<uni-icons type="auth" size="30" class="input-icon"></uni-icons>
-				<input type="text" v-model="username" placeholder="请输入用户名" class="input-item-1" />
-			</view>
-			<view class="input-container">
-				<uni-icons type="locked" size="30" class="input-icon"></uni-icons>
-				<input type="password" v-model="password" placeholder="请输入密码" class="input-item-1" />
-			</view>
-			<view class="login-change">
-				<checkbox-group>
-					<label class="checkbox-zhanghao">
-						<checkbox value="cb" color="#0550e5" checked="true" />记住此账号
-					</label>
-				</checkbox-group>
-				<text class="checkbox-zhanghao">
-					忘记密码？
-				</text>
-			</view>
-			<button class="login-btn" @click="handleLogin">登录</button>
-		</view>
-	</view>
+  <view class="ezy-login-page">
+	  <view class="tel-box">
+	  		<view class="tel-img"></view>
+	  		<!-- 手机号输入框（使用+86前缀，并隐藏真实号码部分数字） -->
+	  		  <view class="phone-input-box">
+	  		    <text class="phone-prefix">+86</text>
+	  		    <input class="phone-input" type="text" v-model="phoneNumber" placeholder="请输入手机号" />
+				<view class="close-btn"></view>
+	  		  </view>
+	  		  <!-- 协议勾选框和按钮 -->
+	  		  <view class="agreement-checkbox-box">
+	  		    <checkbox class="agreement-checkbox" color="#FFFFFF" :checked="isAgreed" @change="handleAgreementChange">
+				  我已阅读并同意
+				  <text class="agreement-text">《用户协议》</text>
+				  和
+				  <text class="agreement-text">《隐私政策》</text>
+	  		    </checkbox>
+	  		  </view>
+			  <view class="yzm-btn-img"></view>
+	  	  </view>
+		  <view class="wx-btn-img"></view>
+  </view>
 </template>
 
 <script setup>
@@ -51,7 +44,10 @@
 
 	}
 	const handleLogin = () => {
-		console.log('Username:', username.value);
+		uni.switchTab({
+			url: '/pages/score/index'
+		});
+		/* console.log('Username:', username.value);
 		console.log('Password:', password.value);
 		let req = {
 			password: 'sslQR4MPhS/du9qQ7/sRc6OFaVIZ0GwHDWmgAhUj08+BBlTzo+kEMgfgi0rrLFx59mrK5ypJc71Ojn3bHciHSlRGcIJex80RHVQyknC1i1HnkQ1T6vgKWBFHISQpd9qEo2fXCEYSRh8Rl3/qfO8XD5NuCrQxqF/REaVUX3fLVB8=',
@@ -78,6 +74,6 @@
 			// 		console.log(res)
 			// 	})
 			// }, 5000)
-		})
+		}) */
 	}
 </script>