ui: 手机端布局重设计——底部带文字标签栏(5个主入口)+更多弹层、全屏搜索、打卡日历底部抽屉、弹窗贴底、记账卡片行、密码库横滑表格

2026-10-16 16:30:45 +08:00
parent e5f99d46d8
commit cfc8e3c734
12 changed files with 390 additions and 71 deletions
@@ -0,0 +1,86 @@
+/* ============================================================
+   手机端（<=720px）全局适配：作用于各视图与弹窗组件
+   （App.vue 的壳层样式是 scoped，跨组件规则统一放这里，便于集中管理）
+   ============================================================ */
+
+/* 通用的白底卡片在窄屏贴边 */
+@media (max-width: 720px) {
+  .card { border-radius: 12px; }
+
+  input.input, select.select, textarea.textarea {
+    width: 100%;
+    box-sizing: border-box;
+  }
+  .btn { touch-action: manipulation; }
+
+  /* ---------- 弹窗：窄屏一体布局，覆盖组件内固定宽度 ---------- */
+  .dialog {
+    width: calc(100vw - 20px) !important;
+    max-width: calc(100vw - 20px) !important;
+    max-height: 86vh;
+    max-height: 86dvh;
+    overflow: auto;
+  }
+  .dialog-body { padding: 14px !important; }
+  .form-grid { grid-template-columns: 1fr !important; }
+  .dialog-btns { gap: 8px; }
+  .dialog-btns .btn { flex: 1; }
+
+  /* ---------- 日历当日抽屉：改为底部抽屉 ---------- */
+  .drawer {
+    top: auto !important;
+    left: 0 !important;
+    width: 100% !important;
+    height: min(86vh, 86dvh) !important;
+    border-left: none !important;
+    border-top: 1px solid var(--border);
+    border-radius: 14px 14px 0 0 !important;
+  }
+  .drawer-enter-active, .drawer-leave-active { transition: transform 0.2s ease, opacity 0.2s ease; }
+  .drawer-enter-from, .drawer-leave-to { transform: translateY(28px); opacity: 0; }
+  .drawer-head { border-radius: 14px 14px 0 0; }
+  .drawer-body { padding: 12px !important; }
+
+  /* ---------- 记账表格：卡片行（带行内标签），手机上不横滚 ---------- */
+  .tx-table { min-width: 0 !important; }
+  .tx-table thead { display: none !important; }
+  .tx-table tr { display: block; padding: 10px 12px; border-bottom: 1px solid var(--border); background: transparent; }
+  .tx-table tbody tr:last-child { border-bottom: none; }
+  .tx-table td {
+    display: flex !important;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 3px 0 !important;
+    border: none !important;
+    white-space: normal !important;
+  }
+  .tx-table td::before {
+    content: attr(data-label);
+    color: var(--text-3);
+    font-size: 12px;
+    flex: none;
+  }
+  .tx-table td.ops-cell::before { content: none; }
+  .tx-table td.ops-cell { justify-content: flex-end; }
+  .tx-table td.empty { justify-content: center; }
+  .tx-table td.empty::before { content: none !important; }
+
+  /* ---------- 密码库等其余宽表：横向滚动，不再挤压折行 ---------- */
+  .table-card, .tx-card { overflow-x: auto; }
+  .cred-table { min-width: 560px !important; }
+  .th-ops { width: auto !important; }
+  .vault-toolbar { flex-wrap: wrap; row-gap: 8px; }
+  .vault-toolbar .search-wrap { width: 100%; max-width: none !important; }
+  .vault-toolbar .flex1 { display: none; }
+  .vault-toolbar .btn { flex: none; }
+
+  /* ---------- 日历格子收窄 ---------- */
+  .cal-toolbar { margin-bottom: 8px; }
+  .cal-cell { min-height: 54px !important; padding: 4px 5px !important; }
+  .cal-marks { margin-top: 3px !important; height: 12px !important; gap: 3px !important; }
+
+  /* ---------- 各种桌面习惯型小间距收敛 ---------- */
+  .section, .sec { padding: 12px 12px !important; }
+  .rule-grid { grid-template-columns: 1fr !important; }
+}