src/assets/styles/login.scss

@@ -103,13 +103,13 @@ $buttonHeight: $buttonH * 1px;
 			background-position: 0 0;
 			position: relative;
 
-      &::after {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-      }
+			&::after {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+			}
 		}
 		.field {
 			// background: #ccc3;
@@ -304,17 +304,30 @@ $buttonHeight: $buttonH * 1px;
 // - - - - - PC 最小尺寸设置
 @media screen and (min-width: 599px) and (max-width: 1366px) {
 	.container {
+		min-width: 599px;
 		.content {
-			width: 710px;
-			height: 397px;
+			// width: 710px;
+			// height: 397px;
+			width: 100%;
+			height: 100%;
 			.pic {
-				width: 314px;
+				// width: 314px;
+				display: none;
 			}
 			.field {
-				width: calc(710px - 314px);
-				left: 314px;
+				// width: calc(710px - 314px);
+				// left: 314px;
+				// justify-content: center;
+				width: 100%;
+
+				.pc-title {
+					h3 {
+						font-size: 2.4rem !important;
+					}
+				}
+
 				.form {
-					width: 320px;
+					// width: 320px;
 					:deep(.el-input__inner) {
 						width: 320px;
 						height: 56px;
@@ -357,13 +370,17 @@ $iconBgImage: '../assets/images/icon.png';
 		min-width: 280px;
 		min-height: 568px;
 		// 文字
-		font-size: 17px;
+		font-size: 14px;
 		font-family: PingFang SC;
 		font-weight: bold;
 		.logo {
 			display: none;
 		}
 
+		.pc-title {
+			display: none;
+		}
+
 		.content {
 			// 元素
 			width: $mobileContentWidth;
@@ -378,6 +395,7 @@ $iconBgImage: '../assets/images/icon.png';
 				display: none;
 			}
 			.field {
+        padding: 0;
 				// 元素
 				width: inherit;
 				min-height: inherit;
@@ -385,12 +403,15 @@ $iconBgImage: '../assets/images/icon.png';
 				left: 0;
 				display: flex;
 				flex-direction: column;
+
 				.mobile-title {
 					// 元素
-					margin: 0 0 20px;
+					margin: 0;
 					display: block;
 				}
+
 				.form {
+          margin: 0;
 					width: $mobileFormWidth;
 					// - - - tab
 					:deep(.el-tabs__header) {
@@ -419,6 +440,24 @@ $iconBgImage: '../assets/images/icon.png';
 						color: #ffffff;
 					}
 				}
+
+				.login-form {
+					:deep(.el-input__inner) {
+						height: $mobileRowHeight;
+						line-height: 24px;
+						// 文字
+						text-align: center;
+						color: #262626;
+					}
+
+          :deep(#button-form-item) {
+            margin: 0 !important;
+						button {
+							// 元素
+							height: $mobileRowHeight;
+						}
+					}
+				}
 				.mobile-switch {
 					display: block;
 					line-height: 20px;
@@ -439,6 +478,7 @@ $iconBgImage: '../assets/images/icon.png';
 				}
 			}
 		}
+
 		.footer {
 			// 元素
 			font-size: 12px;
@@ -448,8 +488,8 @@ $iconBgImage: '../assets/images/icon.png';
 			color: #333333;
 			opacity: 0.6;
 			// 定位
-			position: absolute;
-			bottom: 20px;
+			// position: absolute;
+			bottom: -32px;
 		}
 	}
 }

src/views/login.vue

@@ -55,7 +55,7 @@
 					style="
 						user-select: none;
 						position: absolute;
-						top: 20%;
+						top: 28%;
 						width: 100%;
 						height: 70%;
 					"></video>
@@ -219,7 +219,7 @@
 							</div>
 
 							<!-- 下方的登录按钮 -->
-							<el-form-item style="width: 100%; margin-top: 32px">
+							<el-form-item id="button-form-item" style="width: 100%; margin-top: 32px">
 								<el-button
 									:loading="loading"
 									size="medium"