From aecd16133704ecd5bdfd507197bdf865f5969fd0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E5=BC=BA?= <357099073@qq.com>
Date: Mon, 27 Apr 2026 16:34:00 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=89=8D=E7=AB=AF=E7=BA=BF?=
 =?UTF-8?q?=E8=87=AA=E9=80=82=E5=BA=94=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CommonAside.vue           |  81 +++++++++++-
 src/components/CommonHeader.vue          |   8 +-
 src/views/Main.vue                       |  23 +++-
 src/views/accountpool/cursor/index.vue   |   2 +-
 src/views/accountpool/kiro/index.vue     |   2 +-
 src/views/accountpool/windsurf/index.vue |   2 +-
 src/views/analytics/users/index.vue      |  45 ++++++-
 src/views/home/index.vue                 | 159 ++++++++++++-----------
 src/views/login/index.vue                | 108 ++++++++++++++-
 9 files changed, 335 insertions(+), 95 deletions(-)

diff --git a/src/components/CommonAside.vue b/src/components/CommonAside.vue
index c7f7e90..4c4da1b 100644
--- a/src/components/CommonAside.vue
+++ b/src/components/CommonAside.vue
@@ -1,6 +1,5 @@
 <template>
-  <el-aside :width="width" class="common-aside">
-    <!-- 加载状态 -->
+  <el-aside :width="width" class="common-aside" :class="{ 'mobile-open': mobileOpen }">
     <div v-if="loading" class="loading-spinner">
       <i class="el-icon-loading" style="font-size: 24px; color: #fff"></i>
     </div>
@@ -27,7 +26,10 @@
       :default-active="route.path"
     >
       <!-- 菜单标题 -->
-      <h3>{{ isCollapse ? "管理" : asideTitle }}</h3>
+      <h3>
+        {{ isCollapse ? "管理" : asideTitle }}
+        <span class="mobile-close-btn" @click="closeMobile">✕</span>
+      </h3>
 
       <!-- 无模块时显示提示（在首页 /home 时不显示，避免重复） -->
       <el-menu-item v-if="!currentModule && route.path !== '/home'" index="/home">
@@ -144,6 +146,10 @@
       </template>
     </el-menu>
   </el-aside>
+
+  <teleport to="body">
+    <div v-if="mobileOpen" class="aside-mobile-overlay" @click="closeMobile" />
+  </teleport>
 </template>
 
 <script setup>
@@ -165,6 +171,14 @@ const store = useAllDataStore();
 const isCollapse = computed(() => store.state.isCollapse);
 const width = computed(() => (store.state.isCollapse ? "64px" : "200px"));
 
+const mobileOpen = ref(false);
+
+function openMobile() { mobileOpen.value = true; }
+function closeMobile() { mobileOpen.value = false; }
+function toggleMobile() { mobileOpen.value = !mobileOpen.value; }
+
+defineExpose({ openMobile, closeMobile, toggleMobile });
+
 const asideBgColor = ref("#304156");
 const asideTextColor = ref("#bfcbd9");
 const activeColor = ref("#3973FF");
@@ -315,6 +329,8 @@ const list = computed(() => {
 });
 
 const handleMenuSelect = (index) => {
+  // 移动端点击菜单后关闭侧边栏
+  closeMobile();
   if (index === "/home") {
     emit("menu-click", {
       path: "/home",
@@ -417,6 +433,38 @@ h3 {
   margin: 0;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .mobile-close-btn {
+    display: none;
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 28px;
+    height: 28px;
+    line-height: 28px;
+    text-align: center;
+    border-radius: 50%;
+    cursor: pointer;
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.8);
+    background: rgba(255, 255, 255, 0.15);
+    transition: background 0.2s;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.3);
+      color: #fff;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .mobile-close-btn {
+      display: block;
+    }
+  }
 }
 
 // 菜单样式
@@ -522,7 +570,17 @@ h3 {
 // 响应式设计
 @media (max-width: 768px) {
   .common-aside {
-    width: 100% !important;
+    position: fixed !important;
+    left: 0;
+    top: 0;
+    z-index: 1000;
+    height: 100vh !important;
+    transform: translateX(-100%);
+    transition: transform 0.3s ease, width 0.3s ease !important;
+
+    &.mobile-open {
+      transform: translateX(0);
+    }
   }
 
   :deep(.el-menu) {
@@ -530,3 +588,18 @@ h3 {
   }
 }
 </style>
+
+<style>
+.aside-mobile-overlay {
+  display: none;
+}
+@media (max-width: 768px) {
+  .aside-mobile-overlay {
+    display: block;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.45);
+    z-index: 999;
+  }
+}
+</style>
diff --git a/src/components/CommonHeader.vue b/src/components/CommonHeader.vue
index a5aa63d..5aa7220 100644
--- a/src/components/CommonHeader.vue
+++ b/src/components/CommonHeader.vue
@@ -72,6 +72,8 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
+
+const emit = defineEmits(['collapse']);
 import { useAllDataStore, useMenuStore, useTabsStore } from "@/stores";
 import { useAuthStore } from "@/stores/auth";
 import { logout, getCurrentUser } from "@/api/login";
@@ -198,7 +200,11 @@ const roleLabel = computed(() => {
 });
 
 const handleCollapse = () => {
-  store.state.isCollapse = !store.state.isCollapse;
+  if (window.innerWidth <= 768) {
+    emit('collapse');
+  } else {
+    store.state.isCollapse = !store.state.isCollapse;
+  }
 };
 
 const goHome = () => {
diff --git a/src/views/Main.vue b/src/views/Main.vue
index 3c2471e..7e0ed5b 100644
--- a/src/views/Main.vue
+++ b/src/views/Main.vue
@@ -10,6 +10,7 @@ import { ElMessage } from 'element-plus';
 const tabsStore = useTabsStore();
 const router = useRouter();
 const route = useRoute();
+const asideRef = ref(null);
 const defaultDashboardPath = '/home';
 
 // 根据当前路由恢复 tab（刷新时使用）
@@ -379,10 +380,12 @@ const canCloseRight = computed(() => {
 <template>
   <div class="common-layout">
     <el-container class="main-container">
-      <common-aside @menu-click="handleAsideMenuClick" />
+      <div class="aside-wrapper">
+        <common-aside ref="asideRef" @menu-click="handleAsideMenuClick" />
+      </div>
       <el-container>
         <el-header class="main-header">
-          <common-header />
+        <common-header @collapse="() => asideRef?.toggleMobile()" />
         </el-header>
         <el-main class="right-main">
           <div class="multi-tabs-wrapper">
@@ -496,6 +499,22 @@ const canCloseRight = computed(() => {
     visibility: visible !important;
     height: 100vh;
   }
+
+  .aside-wrapper {
+    flex-shrink: 0;
+    position: relative;
+    transition: width 0.3s;
+  }
+
+  @media (max-width: 768px) {
+    .aside-wrapper {
+      width: 0 !important;
+      overflow: visible;
+    }
+    .right-main {
+      padding: 12px 8px !important;
+    }
+  }
   .main-header {
     background-color: var(--header-bg-color, #3973ff);
     transition: background-color 0.3s ease;
diff --git a/src/views/accountpool/cursor/index.vue b/src/views/accountpool/cursor/index.vue
index 656f651..68c12c8 100644
--- a/src/views/accountpool/cursor/index.vue
+++ b/src/views/accountpool/cursor/index.vue
@@ -494,7 +494,7 @@ async function handleReplenish() {
           <el-button type="success" @click="openAddDialog('batch')"
             >批量添加</el-button
           >
-          <el-button @click="markExtractForSelected">批量标记提取</el-button>
+          <el-button @click="markExtractForSelected">批量提取</el-button>
           <el-button @click="apiDocVisible = true">接口说明</el-button>
         </div>
       </div>
diff --git a/src/views/accountpool/kiro/index.vue b/src/views/accountpool/kiro/index.vue
index e43146e..6909ca8 100644
--- a/src/views/accountpool/kiro/index.vue
+++ b/src/views/accountpool/kiro/index.vue
@@ -438,7 +438,7 @@ function copyCardInfo(row) {
           <el-button type="success" @click="openAddDialog('batch')"
             >批量添加</el-button
           >
-          <el-button @click="markExtractForSelected">批量标记提取</el-button>
+          <el-button @click="markExtractForSelected">批量提取</el-button>
           <el-button @click="apiDocVisible = true">接口说明</el-button>
         </div>
       </div>
diff --git a/src/views/accountpool/windsurf/index.vue b/src/views/accountpool/windsurf/index.vue
index 3962b67..f134a39 100644
--- a/src/views/accountpool/windsurf/index.vue
+++ b/src/views/accountpool/windsurf/index.vue
@@ -437,7 +437,7 @@ function copyCardInfo(row) {
           <el-button type="success" @click="openAddDialog('batch')"
             >批量添加</el-button
           >
-          <el-button @click="markExtractForSelected">批量标记提取</el-button>
+          <el-button @click="markExtractForSelected">批量提取</el-button>
           <el-button @click="apiDocVisible = true">接口说明</el-button>
         </div>
       </div>
diff --git a/src/views/analytics/users/index.vue b/src/views/analytics/users/index.vue
index 93397c5..a2a4b4e 100644
--- a/src/views/analytics/users/index.vue
+++ b/src/views/analytics/users/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="statistics-container">
     <el-row :gutter="20" class="data-overview">
-      <el-col :span="6" v-for="item in summaryData" :key="item.title">
+      <el-col :xs="12" :sm="12" :md="6" v-for="item in summaryData" :key="item.title">
         <el-card shadow="hover" class="data-card">
           <div class="card-content">
             <div class="icon-box" :style="{ backgroundColor: item.color }">
@@ -21,12 +21,12 @@
     </el-row>
 
     <el-row :gutter="20" class="charts-row">
-      <el-col :span="16">
+      <el-col :xs="24" :sm="24" :md="16">
         <el-card shadow="hover" header="用户增长趋势">
           <div ref="lineChartRef" class="chart-box"></div>
         </el-card>
       </el-col>
-      <el-col :span="8">
+      <el-col :xs="24" :sm="24" :md="8">
         <el-card shadow="hover" header="用户等级分布">
           <div ref="pieChartRef" class="chart-box"></div>
         </el-card>
@@ -95,12 +95,17 @@ const initCharts = () => {
     pieChartInstance.value = echarts.init(pieChartRef.value);
     pieChartInstance.value.setOption({
       tooltip: { trigger: 'item' },
-      legend: { bottom: '0%', left: 'center' },
+      legend: {
+        orient: 'vertical',
+        right: '5%',
+        top: 'center',
+      },
       series: [
         {
           name: '等级分布',
           type: 'pie',
           radius: ['40%', '70%'],
+          center: ['35%', '50%'],
           avoidLabelOverlap: false,
           itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
           label: { show: false },
@@ -141,6 +146,8 @@ onUnmounted(() => {
     margin-bottom: 20px;
 
     .data-card {
+      margin-bottom: 16px;
+
       .card-content {
         display: flex;
         align-items: center;
@@ -148,6 +155,7 @@ onUnmounted(() => {
         .icon-box {
           width: 56px;
           height: 56px;
+          flex-shrink: 0;
           border-radius: 12px;
           display: flex;
           align-items: center;
@@ -158,9 +166,13 @@ onUnmounted(() => {
         }
 
         .text-box {
+          min-width: 0;
           .title {
             font-size: 14px;
             color: #909399;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
           }
           .value {
             font-size: 24px;
@@ -180,6 +192,9 @@ onUnmounted(() => {
   }
 
   .charts-row {
+    .el-col {
+      margin-bottom: 16px;
+    }
     .chart-box {
       height: 350px;
       width: 100%;
@@ -187,6 +202,28 @@ onUnmounted(() => {
   }
 }
 
+@media (max-width: 768px) {
+  .statistics-container {
+    padding: 12px;
+
+    .data-overview .data-card .card-content {
+      .icon-box {
+        width: 44px;
+        height: 44px;
+        font-size: 20px;
+        margin-right: 10px;
+      }
+      .text-box .value {
+        font-size: 20px;
+      }
+    }
+
+    .charts-row .chart-box {
+      height: 300px;
+    }
+  }
+}
+
 // 深度修改 Element Plus 卡片头部样式
 :deep(.el-card__header) {
   font-weight: bold;
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 0cfb395..a2a4b4e 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="statistics-container">
     <el-row :gutter="20" class="data-overview">
-      <el-col :span="6" v-for="item in summaryData" :key="item.title">
+      <el-col :xs="12" :sm="12" :md="6" v-for="item in summaryData" :key="item.title">
         <el-card shadow="hover" class="data-card">
           <div class="card-content">
             <div class="icon-box" :style="{ backgroundColor: item.color }">
@@ -21,12 +21,12 @@
     </el-row>
 
     <el-row :gutter="20" class="charts-row">
-      <el-col :span="16">
+      <el-col :xs="24" :sm="24" :md="16">
         <el-card shadow="hover" header="用户增长趋势">
           <div ref="lineChartRef" class="chart-box"></div>
         </el-card>
       </el-col>
-      <el-col :span="8">
+      <el-col :xs="24" :sm="24" :md="8">
         <el-card shadow="hover" header="用户等级分布">
           <div ref="pieChartRef" class="chart-box"></div>
         </el-card>
@@ -36,10 +36,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, shallowRef } from "vue";
-import * as echarts from "echarts";
-import { User, Pointer, Connection, Histogram } from "@element-plus/icons-vue";
+import { ref, onMounted, onUnmounted, shallowRef } from 'vue';
+import * as echarts from 'echarts';
+import { User, Pointer, Connection, Histogram } from '@element-plus/icons-vue';
 
+// --- 类型定义 ---
 interface SummaryItem {
   title: string;
   value: number;
@@ -49,96 +50,78 @@ interface SummaryItem {
   isUp: boolean;
 }
 
+// --- 响应式数据 ---
 const lineChartRef = ref<HTMLElement | null>(null);
 const pieChartRef = ref<HTMLElement | null>(null);
 const lineChartInstance = shallowRef<echarts.ECharts | null>(null);
 const pieChartInstance = shallowRef<echarts.ECharts | null>(null);
 
 const summaryData = ref<SummaryItem[]>([
-  {
-    title: "总用户数",
-    value: 12840,
-    icon: User,
-    color: "#3973FF",
-    percentage: 12,
-    isUp: true,
-  },
-  {
-    title: "今日新增",
-    value: 156,
-    icon: Pointer,
-    color: "#67C23A",
-    percentage: 5,
-    isUp: true,
-  },
-  {
-    title: "活跃用户",
-    value: 3420,
-    icon: Connection,
-    color: "#E6A23C",
-    percentage: 2,
-    isUp: false,
-  },
-  {
-    title: "留存率",
-    value: 85,
-    icon: Histogram,
-    color: "#F56C6C",
-    percentage: 1,
-    isUp: true,
-  },
+  { title: '总用户数', value: 12840, icon: User, color: '#3973FF', percentage: 12, isUp: true },
+  { title: '今日新增', value: 156, icon: Pointer, color: '#67C23A', percentage: 5, isUp: true },
+  { title: '活跃用户', value: 3420, icon: Connection, color: '#E6A23C', percentage: 2, isUp: false },
+  { title: '留存率', value: 85, icon: Histogram, color: '#F56C6C', percentage: 1, isUp: true },
 ]);
 
+// --- 初始化图表 ---
 const initCharts = () => {
+  // 折线图配置
   if (lineChartRef.value) {
     lineChartInstance.value = echarts.init(lineChartRef.value);
     lineChartInstance.value.setOption({
-      tooltip: { trigger: "axis" },
-      grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
+      tooltip: { trigger: 'axis' },
+      grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
       xAxis: {
-        type: "category",
+        type: 'category',
         boundaryGap: false,
-        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
       },
-      yAxis: { type: "value" },
+      yAxis: { type: 'value' },
       series: [
         {
-          name: "新增用户",
-          type: "line",
+          name: '新增用户',
+          type: 'line',
           smooth: true,
           data: [120, 132, 101, 134, 90, 230, 210],
           areaStyle: { opacity: 0.3 },
-          itemStyle: { color: "#3973FF" },
-        },
-      ],
+          itemStyle: { color: '#3973FF' }
+        }
+      ]
     });
   }
 
+  // 饼图配置
   if (pieChartRef.value) {
     pieChartInstance.value = echarts.init(pieChartRef.value);
     pieChartInstance.value.setOption({
-      tooltip: { trigger: "item" },
-      legend: { bottom: "0%", left: "center" },
+      tooltip: { trigger: 'item' },
+      legend: {
+        orient: 'vertical',
+        right: '5%',
+        top: 'center',
+      },
       series: [
         {
-          name: "等级分布",
-          type: "pie",
-          radius: ["40%", "70%"],
+          name: '等级分布',
+          type: 'pie',
+          radius: ['40%', '70%'],
+          center: ['35%', '50%'],
           avoidLabelOverlap: false,
-          itemStyle: { borderRadius: 10, borderColor: "#fff", borderWidth: 2 },
+          itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
           label: { show: false },
           data: [
-            { value: 1048, name: "普通用户" },
-            { value: 735, name: "VIP会员" },
-            { value: 580, name: "超级管理员" },
-            { value: 484, name: "运营人员" },
-          ],
-        },
-      ],
+            { value: 1048, name: '普通用户' },
+            { value: 735, name: 'VIP会员' },
+            { value: 580, name: '超级管理员' },
+            { value: 484, name: '运营人员' }
+          ]
+        }
+      ]
     });
   }
 };
 
+// --- 生命周期与自适应 ---
 const handleResize = () => {
   lineChartInstance.value?.resize();
   pieChartInstance.value?.resize();
@@ -146,23 +129,25 @@ const handleResize = () => {
 
 onMounted(() => {
   initCharts();
-  window.addEventListener("resize", handleResize);
+  window.addEventListener('resize', handleResize);
 });
 
 onUnmounted(() => {
-  window.removeEventListener("resize", handleResize);
+  window.removeEventListener('resize', handleResize);
 });
 </script>
 
 <style scoped lang="less">
 .statistics-container {
   padding: 20px;
-  min-height: calc(100vh - 180px);
+  min-height: 100vh;
 
   .data-overview {
     margin-bottom: 20px;
 
     .data-card {
+      margin-bottom: 16px;
+
       .card-content {
         display: flex;
         align-items: center;
@@ -170,6 +155,7 @@ onUnmounted(() => {
         .icon-box {
           width: 56px;
           height: 56px;
+          flex-shrink: 0;
           border-radius: 12px;
           display: flex;
           align-items: center;
@@ -180,9 +166,13 @@ onUnmounted(() => {
         }
 
         .text-box {
+          min-width: 0;
           .title {
             font-size: 14px;
             color: #909399;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
           }
           .value {
             font-size: 24px;
@@ -192,16 +182,9 @@ onUnmounted(() => {
           }
           .trend {
             font-size: 12px;
-            &.up {
-              color: #67c23a;
-            }
-            &.down {
-              color: #f56c6c;
-            }
-            span {
-              color: #909399;
-              margin-left: 4px;
-            }
+            &.up { color: #67c23a; }
+            &.down { color: #f56c6c; }
+            span { color: #909399; margin-left: 4px; }
           }
         }
       }
@@ -209,6 +192,9 @@ onUnmounted(() => {
   }
 
   .charts-row {
+    .el-col {
+      margin-bottom: 16px;
+    }
     .chart-box {
       height: 350px;
       width: 100%;
@@ -216,9 +202,32 @@ onUnmounted(() => {
   }
 }
 
+@media (max-width: 768px) {
+  .statistics-container {
+    padding: 12px;
+
+    .data-overview .data-card .card-content {
+      .icon-box {
+        width: 44px;
+        height: 44px;
+        font-size: 20px;
+        margin-right: 10px;
+      }
+      .text-box .value {
+        font-size: 20px;
+      }
+    }
+
+    .charts-row .chart-box {
+      height: 300px;
+    }
+  }
+}
+
+// 深度修改 Element Plus 卡片头部样式
 :deep(.el-card__header) {
   font-weight: bold;
   font-size: 16px;
   border-bottom: 1px solid #ebeef5;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index e30931b..8d738b9 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -544,7 +544,9 @@ const clearCache = async () => {
 <style scoped>
 .login-bg {
   min-height: 100vh;
-  width: 100vw;
+  width: 100%;
+  padding: 24px;
+  box-sizing: border-box;
   background: linear-gradient(120deg, #e6f0ff 0%, #f5fcff 55%, #eaf6ff 100%);
   display: flex;
   align-items: center;
@@ -555,7 +557,8 @@ const clearCache = async () => {
 
 .login-card {
   display: flex;
-  min-width: 770px;
+  width: min(100%, 920px);
+  max-width: 920px;
   background: rgba(255, 255, 255, 0.95);
   border-radius: 22px;
   box-shadow:
@@ -617,7 +620,7 @@ const clearCache = async () => {
   flex-direction: column;
   justify-content: center;
   background: transparent;
-  min-width: 320px;
+  min-width: 0;
 }
 
 .login-title {
@@ -936,24 +939,117 @@ const clearCache = async () => {
 }
 
 @media (max-width: 940px) {
+  .login-bg {
+    padding: 16px;
+  }
+
   .login-card {
-    min-width: 330px;
+    width: 100%;
     flex-direction: column;
   }
 
   .login-side {
     width: 100%;
     min-width: 0;
-    border-radius: 0 0 18px 18px;
+    padding: 32px 18px 24px;
+    border-radius: 0;
+  }
+
+  .brand {
+    margin-bottom: 24px;
+  }
+
+  .brand-title {
+    font-size: 22px;
+  }
+
+  .illus {
+    margin-top: 8px;
   }
 
   .login-panel {
     padding: 30px 22px 34px 22px;
-    min-width: 0;
   }
 
   .copyright {
     padding-top: 13px;
   }
 }
+
+@media (max-width: 640px) {
+  .login-bg {
+    padding: 12px;
+    align-items: stretch;
+  }
+
+  .login-card {
+    min-height: calc(100vh - 24px);
+    border-radius: 18px;
+  }
+
+  .login-side {
+    padding: 24px 16px 20px;
+  }
+
+  .brand {
+    gap: 10px;
+    margin-bottom: 18px;
+  }
+
+  .brand-title {
+    font-size: 18px;
+    letter-spacing: 1px;
+  }
+
+  .login-panel {
+    padding: 24px 16px 28px;
+  }
+
+  .login-title {
+    font-size: 24px;
+  }
+
+  .login-desc {
+    font-size: 14px;
+    margin-bottom: 22px;
+  }
+
+  .input,
+  .code-btn,
+  .login-btn {
+    min-height: 44px;
+  }
+
+  .remember-me-row {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+
+  .action-links {
+    width: 100%;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    line-height: 1.6;
+  }
+}
+
+@media (max-width: 420px) {
+  .login-bg {
+    padding: 0;
+  }
+
+  .login-card {
+    min-height: 100vh;
+    border-radius: 0;
+  }
+
+  .login-side {
+    padding: 20px 14px 18px;
+  }
+
+  .login-panel {
+    padding: 20px 14px 24px;
+  }
+}
 </style>