登录页面样式优化

src/features/UserLogin/UserLogin.vue

@@ -355,7 +355,7 @@ function closeApp() {
 </script>
 
 <template>
-  <div class="tw-flex tw-flex-col tw-h-full">
+  <div class="tw-absolute tw-min-w-full">
     <header class="header">
       <div class="school-logo-container">
         <img
@@ -372,14 +372,18 @@ function closeApp() {
       </div>
       <a class="close" @click="closeApp">关闭</a>
     </header>
+  </div>
 
-    <div class="center" :style="{ backgroundImage: backgroundUrl }">
-      <div class="content">
+  <div class="tw-flex tw-items-center tw-min-h-screen">
+    <div class="center-bg" :style="{ backgroundImage: backgroundUrl }">
+      <div class="login-content">
         <div class="login-types qm-big-text tw-flex tw-overflow-clip">
           <a
             v-if="allowLoginType.includes('STUDENT_CODE')"
             key="STUDENT_CODE"
-            :class="{ 'active-type': formValue.accountType === 'STUDENT_CODE' }"
+            :class="{
+              'active-type': formValue.accountType === 'STUDENT_CODE',
+            }"
             @click="formValue.accountType = 'STUDENT_CODE'"
           >
             {{ QECSConfig.STUDENT_CODE_LOGIN_ALIAS }}
@@ -460,14 +464,14 @@ function closeApp() {
         </div>
       </div>
     </div>
-
-    <footer class="footer">
-      <div style="position: absolute; right: 20px; bottom: 20px">
-        版本: {{ VITE_GIT_REPO_VERSION }}
-      </div>
-    </footer>
-    <GlobalNotice />
   </div>
+
+  <footer class="footer">
+    <div style="position: absolute; right: 20px; bottom: 20px">
+      版本: {{ VITE_GIT_REPO_VERSION }}
+    </div>
+  </footer>
+  <GlobalNotice />
 </template>
 
 <style scoped>
@@ -505,16 +509,18 @@ function closeApp() {
   cursor: pointer;
 }
 
-.center {
+.center-bg {
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   width: 100vw;
   min-height: 600px;
+  display: flex;
+  align-items: center;
 }
 
-.content {
-  margin-top: 100px;
+.login-content {
+  /* margin-top: 100px; */
   margin-left: 60%;
   width: 340px;
   border-radius: 6px;

src/styles/cssvar.css

@@ -32,7 +32,7 @@
 
   --app-line-height: 20px;
 
-  --app-min-width: 800px;
+  --app-min-width: 920px;
 
   --app-font-family: "Helvetica Neue", Helvetica, "PingFang SC",
     "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;