手机端后台主题切换收进顶栏:浮动按钮压总览图表右下角,顶栏 34px 胶囊与 ☰/退出同排;后台路由不再挂全局浮动按钮

This commit is contained in:
Sakurasan committed 2026-10-01 14:46:05 +08:00
1 parent f72d1107e0
commit 3eaf2c6042
2 files changed
+17 -2

No files matched your search

+3 -2
View File
@@ -65,8 +65,9 @@ watch(
<!-- 图片预览层:时间线 / 详情页的配图点开时全屏展示 -->
<ImgLightbox />
<!-- 桌面端:左栏底部放 inline 形态;窄屏:左栏收起,浮动按钮兜底。
vivid 的顶部导航自带切换器,浮动那个就不重复出现了。 -->
<ThemeSwitcher v-if="!isVivid" variant="floating" class="theme-floating-only" />
vivid 的顶部导航自带切换器,浮动那个就不重复出现了。
后台不走浮动:手机端顶栏里有(AdminLayout),浮动会压住卡片右下角。 -->
<ThemeSwitcher v-if="!isVivid && !isAdmin" variant="floating" class="theme-floating-only" />
</template>
<style scoped>
+14
View File
@@ -176,6 +176,9 @@ watch(() => route.path, () => {
<button class="cmd-hint" @click="paletteOpen = true">
搜索 / 命令 <kbd>⌘K</kbd>
</button>
<!-- 手机端主题切换收进顶栏(浮动按钮在总览页会压住卡片右下角);
桌面隐藏,切换仍走侧栏 footer -->
<ThemeSwitcher variant="inline" class="switch-m" />
<!-- 手机端侧栏进抽屉后,退出固定放顶栏;桌面隐藏,退出仍走侧栏 footer -->
<button class="btn leave-m" @click="logout">退出</button>
</div>
@@ -204,4 +207,15 @@ watch(() => route.path, () => {
text-align: center;
color: var(--admin-muted);
}
/* 顶栏主题切换:手机专属(≤860px 与抽屉同 breakpoint),桌面隐藏。
34px 比 inline 默认 40px 略小,跟 36px 的 ☰ / 退出按钮同排不突兀;
选择器带 .admin-topbar 提特度,压过组件自身的 .theme-switcher--inline。 */
.admin-topbar .switch-m {display: none;}
@media (max-width: 860px) {
.admin-topbar .switch-m {display: inline-flex;
width: 34px;
height: 34px;}
.admin-topbar .switch-m :deep(.ic) {font-size: 16px;}
}
</style>