root/daywork
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

ui: 移动端触控基线与板块重排(按钮32-36/输入38/弹窗按钮40;出勤2x2;计划操作等宽;记账工具栏分区;导出铺满;底栏56)

Browse Source
This commit is contained in:
root
2026-10-26 21:07:50 +08:00
parent 1afc236d88
commit 7d11a48756
19 changed files with 134 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
intern-log/src/App.vue
+4 -2
View File
@@ -743,14 +743,16 @@ onMounted(async () => {
.mob-search-btn { display: flex; }
.topbar-actions { margin-left: auto; gap: 6px; }
.week-tip { height: 28px; max-width: 118px; padding: 0 8px; white-space: nowrap; overflow: hidden; }
.topbar-actions .btn { padding: 0 10px; height: 32px; }
.topbar-actions .btn { padding: 0 12px; height: 34px; }
.topbar-actions .btn .num { font-size: 12px; }
.tabbar { display: flex; }
.tab-btn { height: 56px; font-size: 11px; }
.tab-btn .icon { width: 22px; height: 22px; }
.content { flex: 1; min-height: 0; }
.content-inner {
max-width: none;
padding: 12px 12px calc(70px + env(safe-area-inset-bottom));
padding: 12px 12px calc(78px + env(safe-area-inset-bottom));
}
.toast-wrap {
intern-log/src/components/TimerPanel.vue
+1 -1
View File
@@ -147,7 +147,7 @@ onUnmounted(() => {
.tp {
left: 12px;
right: 12px;
bottom: calc(66px + env(safe-area-inset-bottom));
bottom: calc(64px + env(safe-area-inset-bottom));
max-width: none;
}
}
intern-log/src/components/TransactionDialog.vue
+4
View File
@@ -163,4 +163,8 @@ function save() {
.dialog { width: 480px; }
.add-cat { display: flex; gap: 6px; margin-top: 6px; }
.add-cat-input { flex: 1; height: 28px; font-size: 12px; }
@media (max-width: 720px) {
.add-cat-input { height: 34px; }
.add-cat .btn { height: 34px; }
}
</style>
intern-log/src/components/log/DayPanel.vue
+10 -2
View File
@@ -452,7 +452,15 @@ async function confirmDelete() {
}
.dp-foot { margin-top: 10px; font-size: 12px; text-align: right; }
@media (max-width: 560px) {
.att-grid { grid-template-columns: 1fr; }
@media (max-width: 720px) {
.dp-head { margin-bottom: 10px; }
.att-grid { grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.att-cell label { margin-bottom: 3px; }
.att-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.att-actions .btn { width: 100%; }
.edit-row { flex-wrap: wrap; }
.edit-row .time-input { width: 100%; flex: 1 1 100%; }
.edit-row .btn { flex: 1; }
.item-main { gap: 6px; }
}
</style>
intern-log/src/styles/mobile.css
+42 -27
View File
@@ -1,11 +1,40 @@
/* ============================================================
手机端（<=720px）全局适配：作用于各视图与弹窗组件
（App.vue 的壳层样式是 scoped，跨组件规则统一放这里，便于集中管理）
手机端（<=720px）全局适配
原则：触控目标 ≥30px（按钮 32-36 / 输入 38 / 弹窗主按钮 40）、
板块两列优先避免过度堆叠、内容优先密度适中
============================================================ */
@media (max-width: 720px) {
/* 卡片在窄屏贴边、圆角略收 */
/* ---------- 触控基线 ---------- */
.btn { height: 36px; padding: 0 14px; }
.btn-sm { height: 32px; padding: 0 12px; }
.btn-xs { height: 30px; padding: 0 12px; }
.icon-btn { width: 34px; height: 34px; }
.seg-btn { height: 34px; padding: 0 13px; }
.input, .select { height: 38px; padding: 0 12px; }
.textarea { min-height: 76px; padding: 10px 12px; }
.toggle-btn { height: 38px; }
.tag { height: 24px; line-height: 22px; padding: 0 9px; }
.dot { width: 7px; height: 7px; }
/* ---------- 弹窗：近全屏 + 大按钮 ---------- */
.dialog {
width: calc(100vw - 16px) !important;
max-width: calc(100vw - 16px) !important;
max-height: 90vh;
max-height: 90dvh;
}
.dialog-head { padding: 14px 16px 10px !important; }
.dialog-body { padding: 14px 16px !important; }
.dialog-btns { padding: 10px 16px calc(12px + env(safe-area-inset-bottom)) !important; gap: 10px; }
.dialog-btns .btn { flex: 1; height: 40px; }
.form-grid { grid-template-columns: 1fr !important; }
/* ---------- 卡片与分区 ---------- */
.card { border-radius: 12px; }
.section, .sec { padding: 12px; }
.stat-num { font-size: 20px; }
.empty { padding: 22px 12px; }
input.input, select.select, textarea.textarea {
width: 100%;
@@ -13,20 +42,7 @@
}
.btn { touch-action: manipulation; }
/* ---------- 弹窗：窄屏近全屏 ---------- */
.dialog {
width: calc(100vw - 20px) !important;
max-width: calc(100vw - 20px) !important;
max-height: 88vh;
max-height: 88dvh;
}
.dialog-head { padding: 14px 16px 10px !important; }
.dialog-body { padding: 14px 16px !important; }
.dialog-btns { padding: 10px 16px 14px !important; }
.dialog-btns .btn { flex: 1; }
.form-grid { grid-template-columns: 1fr !important; }
/* ---------- 日历当日抽屉：改为底部抽屉 ---------- */
/* ---------- 日历当日抽屉：底部抽屉 ---------- */
.drawer {
top: auto !important;
left: 0 !important;
@@ -42,7 +58,7 @@
.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; }
@@ -63,11 +79,12 @@
flex: none;
}
.tx-table td.ops-cell::before { content: none; }
.tx-table td.ops-cell { justify-content: flex-end; }
.tx-table td.ops-cell { justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.tx-table td.ops-cell .btn { flex: none; }
.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; }
@@ -79,15 +96,13 @@
/* ---------- 统计卡两列 ---------- */
.cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
.stat-card { padding: 12px 14px !important; }
.stat-num { font-size: 19px !important; }
/* ---------- 分区与栅格收窄 ---------- */
.section, .sec { padding: 12px 12px !important; }
/* ---------- 分区与栅格 ---------- */
.rule-grid { grid-template-columns: 1fr !important; }
.two-col { grid-template-columns: 1fr !important; }
/* ---------- 日历格子收窄 ---------- */
.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; }
/* ---------- 日历格子 ---------- */
.cal-toolbar { margin-bottom: 10px; }
.cal-cell { min-height: 58px !important; padding: 5px 6px !important; }
.cal-marks { margin-top: 4px !important; height: 14px !important; gap: 4px !important; }
}
intern-log/src/views/CalendarView.vue
-2
View File
@@ -200,9 +200,7 @@ watch(focusDate, d => {
.drawer-enter-from, .drawer-leave-to { opacity: 0; }
@media (max-width: 720px) {
.cal-cell { min-height: 60px; padding: 4px 5px; }
.cal-title { min-width: 76px; font-size: 13px; }
.cal-marks { gap: 3px; margin-top: 4px; height: 12px; }
.drawer { width: 100%; }
}
</style>
intern-log/src/views/LedgerView.vue
+6 -2
View File
@@ -332,7 +332,11 @@ async function confirmDelete() {
.table-card { overflow-x: auto; }
.table-note { margin-top: 10px; font-size: 12px; text-align: right; }
@media (max-width: 560px) {
.ledger-toolbar .w-filter { flex: 1; min-width: 0; width: auto; }
@media (max-width: 720px) {
.ledger-toolbar { gap: 8px; }
.ledger-toolbar .flex1 { display: none; }
.month-title { min-width: 0; flex: 1; text-align: left; }
.w-filter { flex: 1 1 calc(50% - 4px); min-width: 0; width: auto; }
.ledger-toolbar .btn-primary { flex: 1 1 100%; order: 9; }
}
</style>
intern-log/src/views/MemoView.vue
+6 -3
View File
@@ -248,8 +248,11 @@ function fmtTime(s: string): string {
}
@media (max-width: 800px) {
.memo-page { grid-template-columns: 1fr; }
.memo-list { max-height: 240px; }
.content-textarea { min-height: 240px; }
.memo-page { grid-template-columns: 1fr; gap: 10px; }
.memo-list { max-height: 210px; }
.content-textarea { min-height: 260px; }
.title-input { height: 38px; }
.editor-foot { flex-wrap: wrap; }
.editor-foot .btn { flex: 1; min-height: 34px; }
}
</style>
intern-log/src/views/PlanView.vue
+13 -2
View File
@@ -459,8 +459,19 @@ function weekday(s: string): string {
.goal-hint { font-size: 12px; margin-top: 8px; }
@media (max-width: 720px) {
.plan-item { flex-wrap: wrap; }
.pi-ops { width: 100%; justify-content: flex-start; }
.blk-head { margin: 0 0 10px; }
.day-head { margin-top: 16px; }
.day-ops { width: 100%; }
.day-ops .btn { flex: 1; min-width: 0; }
.day-ops .btn-primary { flex: 1.5; }
.date-chip { min-width: 64px; }
.plan-item { flex-wrap: wrap; padding: 12px; gap: 10px; }
.pi-time { min-width: 0; padding-top: 0; }
.pi-ops { width: 100%; justify-content: flex-start; gap: 8px; }
.pi-ops .btn-xs { flex: 1; min-height: 32px; }
.goal-card { position: relative; flex-direction: column; gap: 8px; }
.goal-main { padding-right: 0; }
.goal-line { padding-right: 72px; }
.goal-ops { position: absolute; top: 10px; right: 8px; }
}
</style>
intern-log/src/views/ReportView.vue
+7
View File
@@ -228,4 +228,11 @@ function undoPolish() {
@media (max-width: 960px) {
.report-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.report-toolbar { gap: 8px; }
.report-toolbar .seg { flex: 1 1 100%; display: flex; }
.report-toolbar .seg-btn { flex: 1; }
.w-date { flex: 1; min-width: 0; width: auto; }
.md-editor { min-height: 300px; }
}
</style>
intern-log/src/views/TodayView.vue
+6 -1
View File
@@ -138,8 +138,13 @@ watch(date, d => { expStart.value = d; if (expRange.value === 'custom') expEnd.v
@media (max-width: 720px) {
.tool-sep { display: none; }
.nav-row { flex: 1; }
.toolbar { padding: 10px 12px; gap: 10px; }
.nav-row { flex: 1 1 100%; }
.date-title { min-width: 0; flex: 1; text-align: left; }
.w-date { flex: 1; min-width: 120px; width: auto; }
.exp-row { width: 100%; }
.exp-row .seg { flex: 1; display: flex; }
.exp-row .seg-btn { flex: 1; padding: 0 6px; }
.w-exp { flex: 1; min-width: 0; width: auto; }
}
</style>