add: complete login page

pages.json

@@ -23,6 +23,18 @@
       "style": {
         "navigationStyle": "custom"
       }
+    },
+    {
+      "path": "pages/login/account_login/account_login",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/login/register/register",
+      "style": {
+        "navigationStyle": "custom"
+      }
     }
   ],
   "uniIdRouter": {},

pages/login/account_login/account_login.vue

@@ -1,17 +1,350 @@
 <template>
-  <view>
+  <view class="background">
-
+	<!-- 欢迎 -->
+	<image class="welcome" src="../../../static/login/account_login/welcome.png"></image>
+	<!-- 登录部分 -->
+	<view class="login_part">
+		<!-- 导航栏 -->
+		<view class="login_ways">
+			<view class="account_words" @click="toPassageEvent" 
+				:style="{borderBottomColor:passageWordsBottomColor, borderBottom:passageWordsBottomBorder}">
+				密码登录
+			</view>
+			<view class="captcha_words" @click="toCaptchaEvent" 
+				:style="{borderBottomColor:captchaWordsBottomColor, borderBottom:captchaWordsBottomBorder}">
+				验证码登录
+			</view>
+		</view>
+		<!-- 表单部分 -->
+		<form class="login_form">
+			<view class="form_input">
+				<view class="account_box login_form_item">
+					<input class="account" name="account" type="text" placeholder="请输入你的电话号码"/>
+				</view>
+				<!-- 密码登录 -->
+				<view class="passage_box login_form_item" v-if="isPassagePage">
+					<input class="passage" name="passage" :password="isOpened" type="text" placeholder="请输入你的密码"/>
+					<image @click="openEyesEvent" class="eyes" :src="eyesStateIcon"></image>
+				</view>
+				<view class="captcha_box login_form_item" v-else>
+					<input class="captcha" name="captcha" type="text" placeholder="请输入你的验证码"/>
+					<button class="captcha_button" @click="sendCaptchaEvent" 
+						:style="{color:captchaButtonColor, backgroundColor:captchaButtonBackgroundColor}">
+						{{captchaButtonText}}
+					</button>
+				</view>
+				<view class="forget_passage">忘了密码？</view>
+				<view class="button_box login_form_item">
+					<button name="submit_button" class="login_button">登录</button>
+				</view>
+			</view>
+		</form>
+	</view>
+	<!-- 前往注册 -->
+	<navigator url="/pages/login/register/register">
+		<image class="goto_register" src="../../../static/login/account_login/register.png"></image>
+	</navigator>
+	<!-- 其他登录部分 -->
+	<view class="otherways_part">
+		<image class="otherways_tips" src="../../../static/login/account_login/other_ways.png"></image>
+		<view class="two_ways">
+			<image class="qq_icon" src="../../../static/login/account_login/qq_icon.png"></image>
+			<image class="weixin_icon" src="../../../static/login/account_login/weixin_icon.png"></image>
+		</view>
+	</view>
   </view>
 </template>
 
-<script>
+<script setup>
-export default {
+import { ref, computed } from 'vue';
-  data() {
+
-    return {};
+const isSendCaptcha = ref(false);	//是否发送了验证码的标志
-  }
+var codeTime = ref(0);	//验证码的倒计时
+const captchaButtonBackgroundColor = computed(() => isSendCaptcha.value ? "#ABCBFF" : "#ffffff"); //验证码按钮的背景颜色
+const captchaButtonColor = computed(() => isSendCaptcha.value ? "#ffffff" : "#000364");//验证码按钮的字体颜色
+const captchaButtonText = computed(() => isSendCaptcha.value ? (codeTime.value+"s后重新发送"):"发送验证码")
+
+const isPassagePage = ref(true);	//是否是密码登录页的标志；
+const passageWordsBottomBorder = computed(() => isPassagePage.value? "solid":"none");	//密码登录导航的下边框
+const passageWordsBottomColor = computed(() => isPassagePage.value? "#094ABC":"#ffffff");//密码登录导航的下边框颜色
+const captchaWordsBottomBorder = computed(() => isPassagePage.value? "none":"solid");	//验证码登录导航的下边框
+const captchaWordsBottomColor = computed(() => isPassagePage.value? "#ffffff":"#094ABC");//验证码登录导航的下边框颜色
+const isOpened = ref(true);	//密码是否明文显示的标志
+const eyesStateIcon = ref("../../../static/login/account_login/login_part/closedeyes.png");	//是否明文显示的图标
+
+
+//进入验证码登录页面
+function toCaptchaEvent(){
+	isPassagePage.value = false;
+}
+//发送验证码事件
+function sendCaptchaEvent(){
+	console.log("send captcha");
+	if (codeTime.value>0){	//说明在倒计时
+		uni.showToast({	//弹出提示框
+			title: '不能重复获取',
+			icon:"none"
+		});
+	} else{	//说明没有发送，也没倒计时
+		codeTime.value = 60;
+		isSendCaptcha.value = true;
+		var timer = setInterval(()=>{
+			codeTime.value--;
+			if(codeTime.value<1){
+				clearInterval(timer);
+				isSendCaptcha.value = false;
+				codeTime.value = 0;
+			}
+		},1000)
+	};
+}
+
+//进入密码登录页面
+function toPassageEvent(){
+	isPassagePage.value = true;
+}
+// 判断密码是否要明文显示
+function openEyesEvent()
+{
+	if (isOpened.value)
+	 {
+		 isOpened.value = false;
+		 eyesStateIcon.value = "../../../static/login/account_login/login_part/openedeyes.png"
+	 }
+	else
+	 {
+		 isOpened.value =true;
+		 eyesStateIcon.value = "../../../static/login/account_login/login_part/closedeyes.png";
+	 }
 }
+
 </script>
 
 <style lang="scss">
-
+.background{
+	background-image: url("../../../static/login/account_login/background.png");
+	background-size: cover;
+	background-position: center;
+	height: 100vh;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	position: relative;
+	object-fit: contain;
+	.welcome{
+		position: absolute;
+		width: 62%;
+		height: 19%;
+		top: 20%;
+		object-fit: contain;
+	}
+	.login_part{
+		/* 登录 */
+		position: absolute;
+		width: 76%;
+		height: 30%;
+		top: 41%;
+		// left: calc(50% - 314px/2 + 3px);
+		.login_ways{
+			position: absolute;
+			width: 49%;
+			height: 8.1%;
+			display: flex;
+			.account_words{
+				// width:36.1%;
+				// height: 90%;
+				margin-right: 10%;
+				border-bottom: solid medium #094ABC;
+				/* 密码登录 */
+				width: 56px;
+				height: 24px;
+				/* Body */
+				font-family: 'PingFang SC';
+				font-style: normal;
+				font-weight: 400;
+				font-size: 14px;
+				line-height: 24px;
+				/* identical to box height, or 171% */
+				display: flex;
+				align-items: center;
+				color: #000364;
+				/* Inside auto layout */
+				flex: none;
+				order: 0;
+				flex-grow: 0;
+			}
+			.captcha_words{
+				// width:45.2%;
+				// height: 90%;
+				margin-left: 5%;
+				/* 验证码登录 */
+				width: 70px;
+				height: 24px;
+				/* Body */
+				font-family: 'PingFang SC';
+				font-style: normal;
+				font-weight: 400;
+				font-size: 14px;
+				line-height: 24px;
+				/* identical to box height, or 171% */
+				display: flex;
+				align-items: center;
+				color: #000364;
+				/* Inside auto layout */
+				flex: none;
+				order: 1;
+				flex-grow: 0;
+			}
+		}
+		.login_form{
+			position: absolute;
+			width: 97.8%;
+			height: 73.1%;
+			top: 20%;
+			.form_input{
+				position: absolute;
+				width: 100%;
+				height: 100%;
+				.login_form_item{
+					height: 25%;
+					margin-bottom: 10px;
+				}
+				.account_box{
+					padding-left: 10px;
+					background-color: #D5E9FF;
+					border-radius: 12px;
+					.account{
+						height: 100%;
+						padding-left: 30px;
+						background-image: url("../../../static/login/account_login/login_part/phone_icon.png");
+						background-repeat: no-repeat;
+						background-size: 4%;
+						background-position: 8px 50%;
+					}
+				}
+				.passage_box{
+					display: flex;
+					justify-content: space-around;
+					align-items: center;
+					background-color: #D5E9FF;
+					border-radius: 12px;
+					.passage{
+						height: 100%;
+						padding-left: 22px;
+						background-image: url("../../../static/login/account_login/login_part/lock_icon.png");
+						background-repeat: no-repeat;
+						background-size: 6%;
+						background-position: 0px 50%;
+					}
+					.eyes{
+						/* User Interface / No Preview */
+						width: 20px;
+						height: 20px;
+						/* Inside auto layout */
+						flex: none;
+						order: 3;
+						flex-grow: 0;
+					}
+				}
+				.captcha_box{
+					display: flex;
+					justify-content: space-around;
+					align-items: center;
+					background-color: #D5E9FF;
+					border-radius: 12px;
+					.captcha{
+						height: 100%;
+						padding-left: 40px;
+						background-image: url("../../../static/login/account_login/login_part/captcha_icon.png");
+						background-repeat: no-repeat;
+						background-size: 7%;
+						background-position: 16px 50%;
+					}
+					.captcha_button{
+						/* 发送验证码 */
+						width: 108px;
+						height: 34px;
+						/* Inside auto layout */
+						flex: none;
+						order: 3;
+						flex-grow: 0;
+						
+						border-radius: 15px;
+						font-size: 14px;
+						color: #000364;
+					}
+				}
+				.forget_passage{
+					margin-bottom: 5px;
+					margin-top: 10px;
+					text-align: right;
+					color: #000364;
+					font-family: 'PingFang SC';
+					font-style: normal;
+					font-weight: 400;
+					font-size: 14px;
+					line-height: 24px;
+				}
+				.login_button{
+					height: 100%;
+					border-radius: 12px;
+					background-color: #4A69F7;
+					color: #FFFCFC;
+					text-align: center;
+				}
+			}
+		}
+	}
+	.goto_register{
+		position: absolute;
+		width: 14%;
+		height: 2%;
+		top: 78%;
+		left: 43%;
+		object-fit: contain;
+		// left: calc(50% - 56.5px/2 + 0.25px);
+	}
+	.otherways_part{
+		position: absolute;
+		width: 59%;
+		height: 10.9%;
+		// left: calc(50% - 243.25px/2 - 0.38px);
+		top: 82%;
+		.otherways_tips{
+			position: absolute;
+			width: 98.6%;
+			height: 24%;
+		// 	left: calc(50% - 243.25px/2 - 0.38px);
+			top: 0%;
+		}
+		.two_ways{
+			/* 图标 */
+			position: absolute;
+			width: 46.9%;
+			height: 50%;
+			left: 26.6%;
+			top: 35%;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			.qq_icon{
+				/* qq图标 */
+				position: absolute;
+				width: 43.9%;
+				height: 88%;
+				left: 0%;
+				// background: url(image.png);
+			}
+			.weixin_icon{
+				/* 微信图标 */
+				position: absolute;
+				width: 40%;
+				height: 89%;
+				left: 50%;
+				// background: url(image.png);
+			}
+		}
+	}
+}
 </style>

pages/login/register/register.vue

@@ -1,6 +1,6 @@
 <template>
   <view>
-
+	这是注册页面
   </view>
 </template>
 

unpackage/dist/cache/.vite/deps/_metadata.json

@@ -1,8 +1,8 @@
 {
-  "hash": "3dcffc29",
+  "hash": "239ea83a",
-  "configHash": "cc60d382",
+  "configHash": "3f4641d2",
   "lockfileHash": "e3b0c442",
-  "browserHash": "e601f541",
+  "browserHash": "619b4131",
   "optimized": {},
   "chunks": {}
 }