fix: landscape toolbar date range style matches regular toolbar
Replaces bold centered date with nav arrows in landscape matrix view with the same view-toolbar__nav + view-toolbar__range pattern used by the regular toolbar (lighter font, wrapping text, consistent sizing). Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -32,14 +32,12 @@
|
|||||||
|
|
||||||
<div v-if="isLandscape" class="landscape-shell">
|
<div v-if="isLandscape" class="landscape-shell">
|
||||||
<div class="landscape-shell__toolbar">
|
<div class="landscape-shell__toolbar">
|
||||||
<div class="landscape-shell__left">
|
<div class="view-toolbar__nav">
|
||||||
<van-button size="small" @click="matrixGoToday">本周</van-button>
|
|
||||||
</div>
|
|
||||||
<div class="landscape-shell__title">
|
|
||||||
<van-button size="small" @click="matrixGoPrev">‹</van-button>
|
<van-button size="small" @click="matrixGoPrev">‹</van-button>
|
||||||
<span>{{ matrixWeekRange }}</span>
|
<van-button size="small" @click="matrixGoToday">本周</van-button>
|
||||||
<van-button size="small" @click="matrixGoNext">›</van-button>
|
<van-button size="small" @click="matrixGoNext">›</van-button>
|
||||||
</div>
|
</div>
|
||||||
|
<span class="view-toolbar__range">{{ matrixWeekRange }}</span>
|
||||||
<div class="landscape-shell__toggle">
|
<div class="landscape-shell__toggle">
|
||||||
<van-button size="small" plain @click="isLandscape = false">退出横屏</van-button>
|
<van-button size="small" plain @click="isLandscape = false">退出横屏</van-button>
|
||||||
<van-button
|
<van-button
|
||||||
@@ -565,6 +563,7 @@ export default defineComponent({
|
|||||||
};
|
};
|
||||||
|
|
||||||
const draw = () => {
|
const draw = () => {
|
||||||
|
if (!calendar.value) { console.debug('[clazz draw] skip, calendar null'); return; }
|
||||||
let api = calendar.value.getApi()
|
let api = calendar.value.getApi()
|
||||||
api.removeAllEvents();
|
api.removeAllEvents();
|
||||||
store.list.forEach(item => {
|
store.list.forEach(item => {
|
||||||
@@ -1447,8 +1446,7 @@ export default defineComponent({
|
|||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
min-height: var(--landscape-toolbar-height);
|
min-height: var(--landscape-toolbar-height);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: grid;
|
display: flex;
|
||||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.08rem;
|
gap: 0.08rem;
|
||||||
padding: 0.08rem 0.12rem;
|
padding: 0.08rem 0.12rem;
|
||||||
@@ -1456,29 +1454,6 @@ export default defineComponent({
|
|||||||
background: #fff;
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.landscape-shell__left {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.08rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.landscape-shell__title {
|
|
||||||
min-width: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 0.08rem;
|
|
||||||
color: #333;
|
|
||||||
font-size: 0.24rem;
|
|
||||||
font-weight: 600;
|
|
||||||
|
|
||||||
span {
|
|
||||||
min-width: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.landscape-shell__toggle {
|
.landscape-shell__toggle {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
Reference in New Issue
Block a user