refactor: ♻️ 登录页面精简，方便扩展

src/views/login/index.vue

@@ -15,31 +15,10 @@
     </div>
 
     <!-- 登录页内容 -->
-    <div class="login-content">
-      <div class="login-carousel">
-        <div class="project-info">
-          <div class="title-container">
-            <h2>{{ defaultSettings.title }}</h2>
-            <el-tag type="success" size="small">
-              {{ defaultSettings.version }}
-            </el-tag>
-          </div>
-          <p class="description">
-            基于 Vue3 + Vite6 + TypeScript + Element-Plus 构建的中后台管理模板
-          </p>
-        </div>
-        <el-carousel style="width: 100%" indicator-position="none">
-          <el-carousel-item>
-            <div class="flex-center h-full">
-              <el-image :src="loginImage" alt="login" style="width: 60%; height: 60%" />
-            </div>
-          </el-carousel-item>
-        </el-carousel>
-      </div>
     <div class="login-form">
       <el-form ref="loginFormRef" :model="loginData" :rules="loginRules">
         <div class="form-title">
-            <h3>登录</h3>
+          <h2>{{ defaultSettings.title }}</h2>
           <el-dropdown style="position: absolute; right: 0">
             <div class="cursor-pointer">
               <el-icon>
@@ -48,6 +27,9 @@
             </div>
             <template #dropdown>
               <el-dropdown-menu>
+                <el-dropdown-item>
+                  <el-tag>{{ defaultSettings.version }}</el-tag>
+                </el-dropdown-item>
                 <el-dropdown-item @click="setLoginCredentials('root', '123456')">
                   超级管理员：root/123456
                 </el-dropdown-item>
@@ -151,7 +133,6 @@
         </div>
       </el-form>
     </div>
-    </div>
 
     <!-- 登录页底部 -->
     <div class="login-footer">
@@ -345,68 +326,18 @@ onMounted(() => {
     }
   }
 
-  .login-content {
+  .login-form {
     display: flex;
-    width: 960px;
+    flex-direction: column;
+    justify-content: center;
+    width: 460px;
+    padding: 40px;
     overflow: hidden;
     background-color: #fff;
     border-radius: 5px;
     box-shadow: var(--el-box-shadow-light);
 
-    @media (width <= 768px) {
+    @media (width <= 460px) {
-      flex-direction: column;
-      max-width: 100%;
-      height: 100vh;
-      padding: 0 30px;
-      border-radius: 0;
-      box-shadow: none;
-    }
-
-    .login-carousel {
-      display: flex;
-      flex: 3;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      background: linear-gradient(60deg, #165dff, #6aa1ff);
-
-      @media (width <= 768px) {
-        display: none;
-      }
-
-      .project-info {
-        position: relative;
-        color: #fff;
-        text-align: center;
-
-        .title-container {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-
-          h2 {
-            margin-right: 10px;
-            font-size: 24px;
-            font-weight: bold;
-            line-height: 18px;
-          }
-        }
-
-        .description {
-          font-size: 12px;
-        }
-      }
-    }
-
-    .login-form {
-      display: flex;
-      flex: 2;
-      flex-direction: column;
-      justify-content: center;
-      min-width: 400px;
-      padding: 30px;
-
-      @media (width <= 768px) {
       width: 100%;
       padding: 0 20px;
     }
@@ -448,7 +379,6 @@ onMounted(() => {
       }
     }
   }
-  }
 
   .login-footer {
     position: absolute;