wenyongda/ZRAdmin-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化ui

Browse Source
This commit is contained in:
不做码农 2022-08-31 20:32:07 +08:00
parent d378ed3b57
commit f017ce098c
2 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/layout/components/Navbar.vue
View File

@ -1,16 +1,18 @@
<template> <template>
<div class="navbar" :data-theme="sideTheme" :class="appStore.device"> <div class="navbar" :data-theme="sideTheme" :class="appStore.device">
<hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<template v-if="appStore.device != 'mobile'"> <template v-if="appStore.device == 'desktop'">
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!settingsStore.topNav" /> <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!settingsStore.topNav" />
<top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" /> <top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" />
</template> </template>
<div class="right-menu"> <div class="right-menu">
<header-search id="header-search" class="right-menu-item" v-if="appStore.device != 'mobile'" /> <header-search id="header-search" class="right-menu-item" />
<zr-git title="源码地址" class="right-menu-item" v-if="appStore.device != 'mobile'" /> <template v-if="appStore.device == 'desktop'">
<zr-doc title="文档地址" class="right-menu-item" v-if="appStore.device != 'mobile'" /> <zr-git title="源码地址" class="right-menu-item" />
<screenfull title="全屏" class="right-menu-item" v-if="appStore.device != 'mobile'" /> <zr-doc title="文档地址" class="right-menu-item" />
<screenfull title="全屏" class="right-menu-item" />
</template>
<size-select title="布局大小" class="right-menu-item" /> <size-select title="布局大小" class="right-menu-item" />
<LangSelect title="语言设置" class="right-menu-item" /> <LangSelect title="语言设置" class="right-menu-item" />
<Notice title="通知" class="right-menu-item" /> <Notice title="通知" class="right-menu-item" />

4
src/layout/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<el-container :class="classObj" class="app-layout" :style="{ '--current-color': theme }"> <el-container :class="classObj" class="app-layout" :style="{ '--current-color': theme }">
<!-- 移动端打开菜单遮罩 --> <!-- 移动端打开菜单遮罩 -->
<el-drawer v-if="device === 'mobile'" v-model="menuDrawer" :with-header="false" modal-class="sidebar-mobile" direction="ltr"> <el-drawer v-if="device === 'mobile'" :size="220" v-model="menuDrawer" :with-header="false" modal-class="sidebar-mobile" direction="ltr">
<sidebar /> <sidebar />
</el-drawer> </el-drawer>
<sidebar v-else-if="!sidebar.hide" /> <sidebar v-else-if="!sidebar.hide" />
@ -66,7 +66,7 @@ const classObj = computed(() => ({
})) }))
const { width, height } = useWindowSize() const { width, height } = useWindowSize()
const WIDTH = 592 // refer to Bootstrap's responsive design const WIDTH = 792 // refer to Bootstrap's responsive design
watchEffect(() => { watchEffect(() => {
if (device.value === 'mobile' && sidebar.value.opened) { if (device.value === 'mobile' && sidebar.value.opened) {