feat: 移动端布局重做(顶栏两行、安全区、月历紧凑、表单单列)

This commit is contained in:
root
2026-10-16 14:06:08 +08:00
parent e721c356af
commit 8c9f2f0c8b
10 changed files with 66 additions and 24 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,2 +1,2 @@
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./web-DemcfbD8.js","./index-B9GSzgPK.js","./index-egFbJdki.css"])))=>i.map(i=>d[i]);
import{r as s,_ as i}from"./index-B9GSzgPK.js";var t;(function(e){e.Documents="DOCUMENTS",e.Data="DATA",e.Library="LIBRARY",e.Cache="CACHE",e.External="EXTERNAL",e.ExternalStorage="EXTERNAL_STORAGE"})(t||(t={}));var a;(function(e){e.UTF8="utf8",e.ASCII="ascii",e.UTF16="utf16"})(a||(a={}));const E=s("Filesystem",{web:()=>i(()=>import("./web-DemcfbD8.js"),__vite__mapDeps([0,1,2]),import.meta.url).then(e=>new e.FilesystemWeb)});export{t as Directory,a as Encoding,E as Filesystem};
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./web-C1N1mu_I.js","./index-CocrpELo.js","./index-vDZJrZrZ.css"])))=>i.map(i=>d[i]);
import{r as s,_ as i}from"./index-CocrpELo.js";var t;(function(e){e.Documents="DOCUMENTS",e.Data="DATA",e.Library="LIBRARY",e.Cache="CACHE",e.External="EXTERNAL",e.ExternalStorage="EXTERNAL_STORAGE"})(t||(t={}));var a;(function(e){e.UTF8="utf8",e.ASCII="ascii",e.UTF16="utf16"})(a||(a={}));const E=s("Filesystem",{web:()=>i(()=>import("./web-C1N1mu_I.js"),__vite__mapDeps([0,1,2]),import.meta.url).then(e=>new e.FilesystemWeb)});export{t as Directory,a as Encoding,E as Filesystem};
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+2 -2
View File
@@ -8,8 +8,8 @@
<link rel="icon" href="./icons/icon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="./icons/icon-192.png" />
<title>实习工作日志</title>
<script type="module" crossorigin src="./assets/index-B9GSzgPK.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-egFbJdki.css">
<script type="module" crossorigin src="./assets/index-CocrpELo.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-vDZJrZrZ.css">
</head>
<body>
<div id="app"></div>
+28 -5
View File
@@ -236,6 +236,7 @@ onMounted(async () => {
</div>
</div>
<span class="flex1"></span>
<div class="topbar-actions">
<button v-if="weekTip" class="week-tip" @click="nav('report')">
<span class="dot" style="background: var(--warn)"></span>
填写本周周记
@@ -246,6 +247,7 @@ onMounted(async () => {
<Icon :name="clockDone ? 'check-circle' : 'clock'" :size="14" />
<span class="num">{{ clockLabel }}</span>
</button>
</div>
</header>
<main class="content">
<div class="content-inner">
@@ -269,7 +271,7 @@ onMounted(async () => {
</template>
<style scoped>
.app { display: flex; height: 100vh; overflow: hidden; }
.app { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }
.side {
width: 56px;
@@ -328,6 +330,8 @@ onMounted(async () => {
}
.title { font-size: 14px; font-weight: 600; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.gsearch { position: relative; width: 300px; max-width: 38vw; }
.gs-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-3); }
.gs-input { height: 30px; padding-left: 30px; }
@@ -415,18 +419,37 @@ onMounted(async () => {
.toast-enter-active, .toast-leave-active { transition: all 0.15s ease; }
@media (max-width: 720px) {
.app { flex-direction: column; }
.app { flex-direction: column; height: 100dvh; }
.side {
order: 2;
width: 100%;
height: 56px;
height: calc(54px + env(safe-area-inset-bottom));
padding-bottom: env(safe-area-inset-bottom);
flex-direction: row;
justify-content: center;
justify-content: space-around;
border-right: none;
border-top: 1px solid var(--border);
padding-top: 0;
}
.main { order: 1; height: calc(100vh - 56px); }
.main { order: 1; flex: 1; min-height: 0; }
.nav-btn { width: 44px; height: 42px; }
.nav-btn::after { display: none; }
.topbar {
flex-wrap: wrap;
height: auto;
min-height: 52px;
padding: 8px 12px;
row-gap: 8px;
}
.topbar > .flex1 { display: none; }
.gsearch { order: 10; width: 100%; max-width: 100%; }
.gs-input { height: 34px; }
.gs-panel { top: 100%; }
.topbar-actions { margin-left: auto; }
.user-chip { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.content-inner { padding: 12px; }
.toast-wrap { top: 8px; right: 12px; left: 12px; align-items: flex-end; }
}
</style>
+7
View File
@@ -206,4 +206,11 @@ watch(focusDate, d => {
.drawer-enter-active, .drawer-leave-active { transition: opacity 0.15s ease; }
.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>
+6
View File
@@ -403,4 +403,10 @@ async function confirmDelete() {
.ops { display: flex; gap: 4px; flex-wrap: wrap; }
.empty { text-align: center; padding: 24px 0; }
.vault-note { margin-top: 10px; font-size: 12px; text-align: right; }
@media (max-width: 560px) {
.form-grid { grid-template-columns: 1fr; }
.field.span2 { grid-column: auto; }
.ledger-toolbar .w-filter { flex: 1; min-width: 0; width: auto; }
}
</style>
+6
View File
@@ -41,4 +41,10 @@ function onDateInput(e: Event) {
.date-title { font-size: 14px; font-weight: 600; min-width: 170px; text-align: center; }
.date-title.is-today { color: var(--accent); }
.w-date { width: 150px; }
@media (max-width: 720px) {
.detail-toolbar { gap: 8px; }
.date-title { min-width: 0; flex: 1; text-align: left; }
.w-date { flex: 1; min-width: 120px; width: auto; }
}
</style>