修改自适应

2026-08-19 08:53:50 +08:00
parent 0e797c39f4
commit ec5cf96d0b
14 changed files with 941 additions and 48 deletions
@@ -616,7 +616,162 @@ onMounted(() => {

    .modules-section {
      .module-grid {
-        grid-template-columns: 1fr;
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+  }
+
+  // ===== 移动端优先适配（手机端为主要使用场景）=====
+  @media (max-width: 768px) {
+    .home-top {
+      .toolbar {
+        padding: 8px 12px;
+
+        .toolbar-left {
+          min-width: 0;
+          flex-shrink: 1;
+
+          .system-name {
+            font-size: 16px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+
+        .toolbar-right {
+          gap: 6px;
+          flex-shrink: 0;
+
+          // 扩大移动端点击区域（≥44px）
+          .toolbar-btn {
+            width: 40px;
+            height: 40px;
+          }
+
+          .user-dropdown-link {
+            padding: 6px 8px;
+            min-height: 40px;
+
+            .user-name {
+              max-width: 72px;
+            }
+          }
+        }
+      }
+    }
+
+    .home-wrapper {
+      padding: 20px 12px;
+
+      .modules-section {
+        margin-top: 8px;
+
+        .category-section {
+          margin-bottom: 24px;
+
+          .category-title {
+            margin-bottom: 14px;
+          }
+        }
+
+        .module-grid {
+          gap: 12px;
+        }
+
+        .module-card {
+          height: auto;
+          min-height: 132px;
+          padding: 16px;
+          border-radius: 10px;
+
+          .card-header {
+            gap: 8px;
+
+            .card-title {
+              font-size: 16px;
+              word-break: break-all;
+            }
+
+            .card-icon-wrapper {
+              width: 24px;
+              height: 24px;
+              font-size: 24px;
+              flex-shrink: 0;
+            }
+          }
+
+          .card-divider {
+            margin: 12px 0;
+          }
+
+          .card-content .card-desc {
+            font-size: 13px;
+            -webkit-line-clamp: 2;
+          }
+        }
+      }
+
+      .empty-state {
+        padding: 48px 16px;
+      }
+    }
+  }
+
+  // 超窄屏手机：保持每行 2 个卡片，收紧间距避免溢出，用户名隐藏只保留头像
+  @media (max-width: 480px) {
+    .home-top {
+      .toolbar {
+        padding: 8px 10px;
+
+        .toolbar-right {
+          .user-dropdown-link {
+            padding: 6px 4px;
+
+            .user-name {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+
+    .home-wrapper {
+      padding: 16px 10px;
+
+      .modules-section {
+        .module-grid {
+          grid-template-columns: repeat(2, 1fr);
+          gap: 8px;
+        }
+
+        .module-card {
+          min-height: 0;
+          padding: 12px;
+          border-radius: 8px;
+
+          .card-header {
+            gap: 6px;
+
+            .card-title {
+              font-size: 14px;
+            }
+
+            .card-icon-wrapper {
+              width: 20px;
+              height: 20px;
+              font-size: 20px;
+            }
+          }
+
+          .card-divider {
+            margin: 10px 0;
+          }
+
+          .card-content .card-desc {
+            font-size: 12px;
+          }
+        }
      }
    }
  }