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]);
|
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-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};
|
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="icon" href="./icons/icon.svg" type="image/svg+xml" />
|
||||||
<link rel="apple-touch-icon" href="./icons/icon-192.png" />
|
<link rel="apple-touch-icon" href="./icons/icon-192.png" />
|
||||||
<title>实习工作日志</title>
|
<title>实习工作日志</title>
|
||||||
<script type="module" crossorigin src="./assets/index-B9GSzgPK.js"></script>
|
<script type="module" crossorigin src="./assets/index-CocrpELo.js"></script>
|
||||||
<link rel="stylesheet" crossorigin href="./assets/index-egFbJdki.css">
|
<link rel="stylesheet" crossorigin href="./assets/index-vDZJrZrZ.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|||||||
+38
-15
@@ -236,16 +236,18 @@ onMounted(async () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<span class="flex1"></span>
|
<span class="flex1"></span>
|
||||||
<button v-if="weekTip" class="week-tip" @click="nav('report')">
|
<div class="topbar-actions">
|
||||||
<span class="dot" style="background: var(--warn)"></span>
|
<button v-if="weekTip" class="week-tip" @click="nav('report')">
|
||||||
填写本周周记
|
<span class="dot" style="background: var(--warn)"></span>
|
||||||
</button>
|
填写本周周记
|
||||||
<span class="user-chip num">{{ session?.username }}</span>
|
</button>
|
||||||
<button class="btn btn-sm" @click="doLogout">退出</button>
|
<span class="user-chip num">{{ session?.username }}</span>
|
||||||
<button class="btn btn-primary btn-sm" :disabled="clockDone" @click="doClock">
|
<button class="btn btn-sm" @click="doLogout">退出</button>
|
||||||
<Icon :name="clockDone ? 'check-circle' : 'clock'" :size="14" />
|
<button class="btn btn-primary btn-sm" :disabled="clockDone" @click="doClock">
|
||||||
<span class="num">{{ clockLabel }}</span>
|
<Icon :name="clockDone ? 'check-circle' : 'clock'" :size="14" />
|
||||||
</button>
|
<span class="num">{{ clockLabel }}</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<main class="content">
|
<main class="content">
|
||||||
<div class="content-inner">
|
<div class="content-inner">
|
||||||
@@ -269,7 +271,7 @@ onMounted(async () => {
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.app { display: flex; height: 100vh; overflow: hidden; }
|
.app { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }
|
||||||
|
|
||||||
.side {
|
.side {
|
||||||
width: 56px;
|
width: 56px;
|
||||||
@@ -328,6 +330,8 @@ onMounted(async () => {
|
|||||||
}
|
}
|
||||||
.title { font-size: 14px; font-weight: 600; }
|
.title { font-size: 14px; font-weight: 600; }
|
||||||
|
|
||||||
|
.topbar-actions { display: flex; align-items: center; gap: 8px; }
|
||||||
|
|
||||||
.gsearch { position: relative; width: 300px; max-width: 38vw; }
|
.gsearch { position: relative; width: 300px; max-width: 38vw; }
|
||||||
.gs-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-3); }
|
.gs-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-3); }
|
||||||
.gs-input { height: 30px; padding-left: 30px; }
|
.gs-input { height: 30px; padding-left: 30px; }
|
||||||
@@ -415,18 +419,37 @@ onMounted(async () => {
|
|||||||
.toast-enter-active, .toast-leave-active { transition: all 0.15s ease; }
|
.toast-enter-active, .toast-leave-active { transition: all 0.15s ease; }
|
||||||
|
|
||||||
@media (max-width: 720px) {
|
@media (max-width: 720px) {
|
||||||
.app { flex-direction: column; }
|
.app { flex-direction: column; height: 100dvh; }
|
||||||
.side {
|
.side {
|
||||||
order: 2;
|
order: 2;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 56px;
|
height: calc(54px + env(safe-area-inset-bottom));
|
||||||
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: center;
|
justify-content: space-around;
|
||||||
border-right: none;
|
border-right: none;
|
||||||
border-top: 1px solid var(--border);
|
border-top: 1px solid var(--border);
|
||||||
padding-top: 0;
|
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; }
|
.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>
|
</style>
|
||||||
|
|||||||
@@ -206,4 +206,11 @@ watch(focusDate, d => {
|
|||||||
|
|
||||||
.drawer-enter-active, .drawer-leave-active { transition: opacity 0.15s ease; }
|
.drawer-enter-active, .drawer-leave-active { transition: opacity 0.15s ease; }
|
||||||
.drawer-enter-from, .drawer-leave-to { opacity: 0; }
|
.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>
|
</style>
|
||||||
|
|||||||
@@ -403,4 +403,10 @@ async function confirmDelete() {
|
|||||||
.ops { display: flex; gap: 4px; flex-wrap: wrap; }
|
.ops { display: flex; gap: 4px; flex-wrap: wrap; }
|
||||||
.empty { text-align: center; padding: 24px 0; }
|
.empty { text-align: center; padding: 24px 0; }
|
||||||
.vault-note { margin-top: 10px; font-size: 12px; text-align: right; }
|
.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>
|
</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 { font-size: 14px; font-weight: 600; min-width: 170px; text-align: center; }
|
||||||
.date-title.is-today { color: var(--accent); }
|
.date-title.is-today { color: var(--accent); }
|
||||||
.w-date { width: 150px; }
|
.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>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user