手机端后台主题切换收进顶栏:浮动按钮压总览图表右下角,顶栏 34px 胶囊与 ☰/退出同排;后台路由不再挂全局浮动按钮
This commit is contained in:
1 parent
f72d1107e0
commit
3eaf2c6042
2 files changed
+17
-2
No files matched your search
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
Reference in new issue
Block a user