feat: 移动端布局重做(顶栏两行、安全区、月历紧凑、表单单列)
This commit is contained in:
+3
-3
File diff suppressed because one or more lines are too long
-1
File diff suppressed because one or more lines are too long
+2
-2
@@ -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};
|
||||
+1
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+2
-2
@@ -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
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user