From 33188481bf840735ec83be22d17eb1021ffbc837 Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@163.com>
Date: Wed, 22 Nov 2023 14:27:30 +0800
Subject: [PATCH] update login

---
 src/assets/styles/login.scss | 112 ++++++++++++++++++++++++++---------
 src/views/login.vue          |  38 ++++--------
 2 files changed, 95 insertions(+), 55 deletions(-)

diff --git a/src/assets/styles/login.scss b/src/assets/styles/login.scss
index bea1fe9d..4df69394 100644
--- a/src/assets/styles/login.scss
+++ b/src/assets/styles/login.scss
@@ -37,6 +37,9 @@ $tabWidth: $tabW * 1px;
 $rowHeight: $rowH * 1px;
 $buttonHeight: $buttonH * 1px;
 
+// 1080px 高度为基准的 1px
+$base1px: 0.15vh; // 1px / 1080px;
+
 // - - - - - 页面基础设置
 .container {
 	.login-code {
@@ -87,7 +90,7 @@ $buttonHeight: $buttonH * 1px;
 		width: 100%;
 		height: 100%;
 		background-color: #ffffff;
-		// box-shadow: 0px 16px 40px rgba(0, 0, 0, 0.07);
+		// box-shadow: 0px calc(16 * 0.12vh) 40px rgba(0, 0, 0, 0.07);
 		// border-radius: 20px;
 		// 定位
 		position: relative;
@@ -100,6 +103,7 @@ $buttonHeight: $buttonH * 1px;
 			// 元素
 			// width: $picWidth;
 			height: $picHeight;
+			// height: 10vh;
 			background-image: url($picImage);
 			background-repeat: no-repeat;
 			background-size: 100% 100%;
@@ -118,7 +122,7 @@ $buttonHeight: $buttonH * 1px;
 		}
 		.field {
 			position: relative;
-			margin-top: 8%;
+			margin-top: 14vh;
 			flex: 2;
 			// width: 800px;
 			display: flex;
@@ -130,17 +134,36 @@ $buttonHeight: $buttonH * 1px;
 				text-align: center;
 				clear: both;
 				position: relative;
-				top: -36px;
-				height: 128px;
+				top: calc(-32 * $base1px);
+				height: calc(128 * $base1px);
 
 				.title {
 					margin: 0;
-					margin-left: 32px;
+					margin-left: calc(28 * 0.12vh);
 					font-weight: 400;
 					user-select: none;
 					color: #000;
-					font-size: 36px;
-					line-height: 54px;
+					font-size: calc(28 * 0.12vh);
+					line-height: calc(40 * 0.12vh);
+					letter-spacing: calc(2 * 0.12vh);
+
+					.cnbm_logo {
+						height: calc(40 * 0.12vh);
+						width: calc(40 * 0.12vh);
+						position: relative;
+						top: calc(8 * 0.12vh);
+						right: calc(8 * 0.12vh);
+					}
+				}
+
+				.sub-title {
+					margin: 0;
+					margin-left: calc(28 * 0.12vh);
+					font-weight: 400;
+					user-select: none;
+					color: #000;
+					font-size: calc(28 * 0.12vh);
+					line-height: calc(48 * 0.12vh);
 					letter-spacing: 2px;
 				}
 			}
@@ -159,10 +182,10 @@ $buttonHeight: $buttonH * 1px;
 			.footer {
 				user-select: none;
 				// 元素
-				margin: 12px 0;
-				height: 16px;
-				line-height: 16px;
-				font-size: 12px;
+				margin: calc(12 * 0.12vh) 0;
+				height: calc(16 * 0.12vh);
+				line-height: calc(16 * 0.12vh);
+				font-size: calc(12 * 0.12vh);
 				color: #8c8c8c;
 
 				a,
@@ -176,12 +199,8 @@ $buttonHeight: $buttonH * 1px;
 			.form {
 				margin-top: 0;
 				box-sizing: border-box;
-				// width: $formWidth;
 				width: 100%;
-				// - - - tab
-				:deep(.el-tabs__nav) {
-					// background: #f0f3;
-				}
+
 				:deep(.el-tabs__content) {
 					padding: 20px 0 0;
 				}
@@ -189,12 +208,13 @@ $buttonHeight: $buttonH * 1px;
 					user-select: none;
 					// 元素
 					width: $tabWidth;
-					height: $rowHeight;
+					// height: $rowHeight;
+					height: calc(54 * 0.12vh);
 					padding: 0;
 					// 文字
 					line-height: $rowHeight;
 					color: #666666;
-					font-size: 18px;
+					font-size: calc(14 * 0.12vh);
 					font-weight: 400;
 					text-align: center;
 				}
@@ -210,7 +230,8 @@ $buttonHeight: $buttonH * 1px;
 				:deep(.el-input__inner) {
 					// 元素
 					width: 100%;
-					height: $rowHeight;
+					// height: $rowHeight;
+					height: calc(72 * 0.12vh);
 					background: #f5f5f5;
 					border: 0;
 					border-radius: 28px;
@@ -280,7 +301,7 @@ $buttonHeight: $buttonH * 1px;
 					margin-bottom: 20px;
 					// 文字
 					line-height: 26px;
-					font-size: 20px;
+					font-size: calc(18 * 0.12vh);
 					color: #ffffff;
 				}
 				.button-active {
@@ -299,13 +320,14 @@ $buttonHeight: $buttonH * 1px;
 		:deep(.el-input__inner) {
 			// 元素
 			width: 420px;
-			height: 66px;
+			height: calc(52 * 0.12vh);
+			// height: 66px;
 			color: #262626;
-			font-size: 18px;
+			font-size: calc(14 * 0.12vh);
 		}
 		:deep(.el-checkbox__label) {
-			font-size: 18px;
-			line-height: 14px;
+			font-size: calc(14 * 0.12vh);
+			line-height: calc(12 * 0.12vh);
 		}
 	}
 }
@@ -314,19 +336,42 @@ $buttonHeight: $buttonH * 1px;
 @media screen and (min-width: 1920px) {
 	.container {
 		.content {
-
 			.field {
 				flex: initial;
-				width: 800px;
+				// width: 800px;
+				width: 40vw;
+			}
+		}
+	}
+}
+
+@media screen and (min-height: 1024px) {
+	.container {
+		.content {
+			.field {
+				margin-top: 16vh;
+			}
+		}
+	}
+}
+
+@media screen and (max-height: 1024px) {
+	.container {
+		.content {
+			.field {
+				margin-top: 8vh;
 			}
 		}
 	}
 }
 
 
+
 @media screen and (min-width: 599px) and (max-width: 1366px) {
 	.container {
-		min-width: 599px;
+		// min-width: 599px;
+		min-width: 42vw;
+
 		.content {
 			// width: 710px;
 			// height: 397px;
@@ -337,6 +382,7 @@ $buttonHeight: $buttonH * 1px;
 				display: none;
 			}
 			.field {
+				// margin-top: 6vh;
 				// width: calc(710px - 314px);
 				// left: 314px;
 				// justify-content: center;
@@ -363,6 +409,14 @@ $buttonHeight: $buttonH * 1px;
 	}
 }
 
+// @media screen and (max-height: 1080px) {
+// 	.container {
+// 		.field {
+// 			transform: scale(0.74);
+// 		}
+// 	}
+// }
+
 /* ===== MOBILE DESIGN ===== */
 $mobileW: 375;
 $mobileH: 812;
@@ -503,7 +557,7 @@ $iconBgImage: '../assets/images/icon.png';
 
 		.footer {
 			// 元素
-			font-size: 12px;
+			font-size: calc(12 * 0.12vh);
 			font-family: PingFang SC;
 			font-weight: 400;
 			line-height: 17px;
@@ -511,7 +565,7 @@ $iconBgImage: '../assets/images/icon.png';
 			opacity: 0.6;
 			// 定位
 			// position: absolute;
-			bottom: -32px;
+			bottom: -calc(32 * 0.12vh);
 		}
 	}
 }
diff --git a/src/views/login.vue b/src/views/login.vue
index 2bc0c033..2f229f11 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -71,29 +71,11 @@
 						<img
 							src="../assets/logo/cnbm.png"
 							alt="cnbm_logo"
-							style="
-								height: 48px;
-								width: 48px;
-								position: relative;
-								top: 12px;
-								right: 8px;
-							" />
+							style=""
+							class="cnbm_logo" />
 						<span>中建材智能自动化研究院有限公司</span>
 					</h3>
-					<h3
-						class="sub-title"
-						style="
-							margin: 0;
-							margin-left: 32px;
-							font-weight: 400;
-							user-select: none;
-							color: #000;
-							font-size: 36px;
-							line-height: 54px;
-							letter-spacing: 2px;
-						">
-						MES
-					</h3>
+					<h3 class="sub-title" style="">MES</h3>
 				</h2>
 
 				<!-- 表单 -->
@@ -193,9 +175,9 @@
 												style="
 													cursor: pointer;
 													color: #0b58ff;
-													font-size: 18px;
-													line-height: 66px;
-													padding-right: 12px;
+													font-size: calc(12 * 0.12vh);
+													line-height: calc(54 * 0.12vh);
+													padding-right: calc(10 * 0.12vh);
 												">
 												获取验证码
 											</span>
@@ -215,7 +197,11 @@
 									:loading="loading"
 									size="medium"
 									type="primary"
-									style="width: 100%; height: 66px; font-size: 18px"
+									style="
+										width: 100%;
+										height: calc(52 * 0.12vh);
+										font-size: calc(14 * 0.12vh);
+									"
 									@click.native.prevent="getCode">
 									<span v-if="!loading">登 录</span>
 									<span v-else>登 录 中...</span>
@@ -349,7 +335,7 @@ export default {
 		};
 	},
 	created() {
-		document.body.style['min-height'] = '1024px';
+		// document.body.style['min-height'] = '1024px';
 		// 租户开关
 		this.tenantEnable = getTenantEnable();
 		if (this.tenantEnable) {