ui调整

src/views/login/index.vue

@@ -1,10 +1,15 @@
 <template>
-	<div class="index background-pink">
+	<div class="index">
 		<div class="header">
+			<span class="tip">{{ $t('AlphaVersion') }}</span>
+			<img src="@/assets/images/logo-1.png" class="logo" />
 			<p class="split"></p>
 			<button class="login" @click="onLogin">{{ $t('Login.login') }}</button>
 			<button class="register" @click="onRegister">{{ $t('Login.signUp') }}</button>
 		</div>
+		<img src="@/assets/images/login/index-title.png" class="title" draggable="false" />
+		<img src="@/assets/images/login/index-zhuangshi.png" class="zhuangshi" draggable="false" />
+		<div class="tip">{{ $t('Login.indexTip') }}</div>
 	</div>
 </template>
 
@@ -26,6 +31,9 @@
 		height: 100%;
 		overflow: hidden;
 		position: relative;
+		background-image: url('@/assets/images/login/index-bg.png');
+		background-size: cover;
+		background-position: center;
 		> .header {
 			position: absolute;
 			top: 3rem;
@@ -33,7 +41,22 @@
 			width: 100%;
 			display: flex;
 			justify-content: center;
-			align-items: center;
+			// align-items: center;
+			> .tip {
+				position: absolute;
+				width: 100%;
+				top: 0;
+				left: 0;
+				font-size: 3rem;
+				text-align: center;
+				font-family: Regular;
+				color: #fff;
+			}
+			> .logo {
+				width: auto;
+				height: 2.5rem;
+				margin-left: 3.8rem;
+			}
 			> .split {
 				margin: 0 auto;
 			}
@@ -47,18 +70,43 @@
 				font-size: 2.2rem;
 				font-weight: 600;
 				font-family: SemiBold;
+				border: 0.2rem solid #fff;
 				&:active {
 					opacity: 0.8;
 				}
 			}
 			> .login {
-				background-color: #ff7a51;
-				color: #fff;
+				background-color: #fff;
+				color: #713e1f;
 			}
 			> .register {
-				background-color: #fff;
-				color: #232323;
+				background-color: transparent;
+				color: #ffffff;
+				backdrop-filter: blur(10px);
 			}
 		}
+		> .zhuangshi,
+		> .title,
+		> .tip {
+			position: absolute;
+			left: 50%;
+			transform: translateX(-50%);
+		}
+		> .title {
+			width: 55%;
+			height: auto;
+			top: 20.5rem;
+		}
+		> .zhuangshi {
+			width: 21.5rem;
+			height: auto;
+			bottom: 13.4rem;
+		}
+		> .tip {
+			font-size: 2.8rem;
+			font-family: Regular;
+			color: #fff;
+			bottom: 8rem;
+		}
 	}
 </style>