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

优化topbar样式

Browse Source
This commit is contained in:
不做码农 2022-04-28 08:24:38 +08:00
parent 845f0aca95
commit 932d963b61
5 changed files with 94 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/assets/styles/variables.module.scss
View File

@ -13,6 +13,8 @@ $base-menu-color: #bfcbd9;
$base-menu-color-active: #f4f4f5; $base-menu-color-active: #f4f4f5;
$base-menu-background: #304156; $base-menu-background: #304156;
$base-logo-title-color: #ffffff; $base-logo-title-color: #ffffff;
$base-topBar-background: #ffffff;
$menuHover:#263445; $menuHover:#263445;
// sidebar // sidebar
$menuText:#bfcbd9; $menuText:#bfcbd9;
@ -52,9 +54,9 @@ $base-sidebar-width: 210px;
sideBarWidth: $base-sidebar-width; sideBarWidth: $base-sidebar-width;
logoTitleColor: $base-logo-title-color; logoTitleColor: $base-logo-title-color;
logoLightTitleColor: $base-logo-light-title-color; logoLightTitleColor: $base-logo-light-title-color;
primaryColor: $--color-primary; // primaryColor: $--color-primary;
successColor: $--color-success; // successColor: $--color-success;
dangerColor: $--color-danger; // dangerColor: $--color-danger;
infoColor: $--color-info; // infoColor: $--color-info;
warningColor: $--color-warning; // warningColor: $--color-warning;
} }

49
src/components/Notice/Index.vue
View File

@ -1,35 +1,48 @@
<template> <template>
<div class="layout-navbars-breadcrumb-user-news"> <div>
<div class="head-box"> <el-popover placement="bottom" trigger="hover" width="400" popper-class="el-popover-pupop-user-news">
<div class="head-box-title">通知</div> <template #reference>
<div class="head-box-btn" v-if="noticeList.length > 0" @click="onAllReadClick">全部已读</div> <el-badge :is-dot="newsDot" style="line-height: 18px">
</div> <el-icon><bell /></el-icon>
<div class="content-box"> </el-badge>
<template v-if="noticeList.length > 0">
<div class="content-box-item" v-for="(v, k) in noticeList" :key="k">
<div>{{ v.noticeTitle }}</div>
<div class="content-box-msg" v-html="v.noticeContent"></div>
<div class="content-box-time">{{ v.updateTime }}</div>
</div>
</template> </template>
<div class="content-box-empty" v-else> <div class="layout-navbars-breadcrumb-user-news">
<div class="content-box-empty-margin"> <div class="head-box">
<el-icon><Promotion /></el-icon> <div class="head-box-title">通知</div>
<div class="mt15">全部已读</div> <div class="head-box-btn" v-if="noticeList.length > 0" @click="onAllReadClick">全部已读</div>
</div> </div>
<div class="content-box">
<template v-if="noticeList.length > 0">
<div class="content-box-item" v-for="(v, k) in noticeList" :key="k">
<div>{{ v.noticeTitle }}</div>
<div class="content-box-msg" v-html="v.noticeContent"></div>
<div class="content-box-time">{{ v.updateTime }}</div>
</div>
</template>
<div class="content-box-empty" v-else>
<div class="content-box-empty-margin">
<el-icon><Promotion /></el-icon>
<div class="mt15">全部已读</div>
</div>
</div>
</div>
<div class="foot-box" @click="onGoToGiteeClick" v-if="noticeList.length > 0">前往通知中心</div>
</div> </div>
</div> </el-popover>
<div class="foot-box" @click="onGoToGiteeClick" v-if="noticeList.length > 0">前往通知中心</div>
</div> </div>
</template> </template>
<script setup name="noticeIndex"> <script setup name="noticeIndex">
const { proxy } = getCurrentInstance() const { proxy } = getCurrentInstance()
// 小红点
const newsDot = ref(true)
const noticeList = computed(() => { const noticeList = computed(() => {
return proxy.$store.getters.noticeList return proxy.$store.getters.noticeList
}) })
// 全部已读点击 // 全部已读点击
function onAllReadClick() { function onAllReadClick() {
newsDot.value = false
proxy.$modal.msg('敬请期待！！！') proxy.$modal.msg('敬请期待！！！')
} }
// 前往通知中心点击 // 前往通知中心点击

42
src/components/SizeSelect/index.vue
View File

@ -1,9 +1,7 @@
<template> <template>
<div> <div>
<el-dropdown trigger="click" @command="handleSetSize"> <el-dropdown trigger="hover" @command="handleSetSize" style="vertical-align: middle">
<div class="size-icon--style"> <svg-icon class-name="size-icon" icon-class="size" />
<svg-icon class-name="size-icon" icon-class="size" />
</div>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size === item.value" :command="item.value"> <el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size === item.value" :command="item.value">
@ -16,37 +14,37 @@
</template> </template>
<script setup> <script setup>
const store = useStore(); const store = useStore()
const size = computed(() => store.getters.size); const size = computed(() => store.getters.size)
const route = useRoute(); const route = useRoute()
const router = useRouter(); const router = useRouter()
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance()
const sizeOptions = ref([ const sizeOptions = ref([
{ label: "较大", value: "large" }, { label: '较大', value: 'large' },
{ label: "默认", value: "default" }, { label: '默认', value: 'default' },
{ label: "稍小", value: "small" }, { label: '稍小', value: 'small' },
]); ])
function refreshView() { function refreshView() {
// In order to make the cached page re-rendered // In order to make the cached page re-rendered
store.dispatch("tagsView/delAllCachedViews", route); store.dispatch('tagsView/delAllCachedViews', route)
const { fullPath } = route; const { fullPath } = route
nextTick(() => { nextTick(() => {
router.replace({ router.replace({
path: "/redirect" + fullPath, path: '/redirect' + fullPath,
}); })
}); })
} }
function handleSetSize(size) { function handleSetSize(size) {
proxy.$modal.loading("正在设置布局大小，请稍候..."); proxy.$modal.loading('正在设置布局大小，请稍候...')
store.dispatch("app/setSize", size); store.dispatch('app/setSize', size)
setTimeout("window.location.reload()", 1000); setTimeout('window.location.reload()', 1000)
} }
</script> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
.size-icon--style { .size-icon--style {
font-size: 18px; font-size: 18px;
line-height: 50px; line-height: 50px;

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

@ -6,55 +6,34 @@
<div class="right-menu"> <div class="right-menu">
<template v-if="getters.device !== 'mobile'"> <template v-if="getters.device !== 'mobile'">
<header-search id="header-search" class="right-menu-item" /> <header-search id="header-search" class="right-menu-item" v-waves="'orange'" />
<zr-git title="源码地址" class="right-menu-item" />
<el-tooltip content="源码地址" effect="dark" placement="bottom"> <zr-doc title="文档地址" class="right-menu-item" />
<zr-git class="right-menu-item hover-effect" /> <screenfull title="全屏" class="right-menu-item" />
</el-tooltip> <size-select title="布局大小" class="right-menu-item" />
<el-tooltip content="文档地址" effect="dark" placement="bottom">
<zr-doc class="right-menu-item hover-effect" />
</el-tooltip>
<screenfull id="screenfull" class="right-menu-item hover-effect" />
<el-tooltip content="布局大小" effect="dark" placement="bottom">
<size-select id="size-select" class="right-menu-item hover-effect" />
</el-tooltip>
</template> </template>
<!-- 通知 --> <Notice title="通知" class="right-menu-item" />
<div class="right-menu-item">
<el-popover placement="bottom" trigger="click" v-model:visible="isShowUserNewsPopover" width="300" popper-class="el-popover-pupop-user-news"> <el-dropdown @command="handleCommand" class="right-menu-item avatar-container" trigger="hover">
<template #reference> <span class="avatar-wrapper">
<el-badge @click.stop="isShowUserNewsPopover = !isShowUserNewsPopover" :is-dot="true" slot="reference" style="line-height: 32px"> <img :src="getters.avatar" class="user-avatar" />
<el-icon><bell /></el-icon> <span class="name">{{ getters.name }}</span>
</el-badge> <el-icon><ArrowDown /></el-icon>
</template> </span>
<Notice v-show="isShowUserNewsPopover" /> <template #dropdown>
</el-popover> <el-dropdown-menu>
</div> <router-link to="/user/profile">
<div class="avatar-container"> <el-dropdown-item>个人中心</el-dropdown-item>
<el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click"> </router-link>
<div class="avatar-wrapper"> <el-dropdown-item command="setLayout">
<img :src="getters.avatar" class="user-avatar" /> <span>布局设置</span>
<span class="name">{{ getters.name }}</span> </el-dropdown-item>
<el-icon><ArrowDown /></el-icon> <el-dropdown-item divided command="logout">
</div> <span>退出登录</span>
<template #dropdown> </el-dropdown-item>
<el-dropdown-menu> </el-dropdown-menu>
<router-link to="/user/profile"> </template>
<el-dropdown-item>个人中心</el-dropdown-item> </el-dropdown>
</router-link>
<el-dropdown-item command="setLayout">
<span>布局设置</span>
</el-dropdown-item>
<el-dropdown-item divided command="logout">
<span>退出登录</span>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -73,7 +52,6 @@ import Notice from '@/components/Notice/Index'
const store = useStore() const store = useStore()
const getters = computed(() => store.getters) const getters = computed(() => store.getters)
const isShowUserNewsPopover = ref(false)
function toggleSideBar() { function toggleSideBar() {
store.dispatch('app/toggleSideBar') store.dispatch('app/toggleSideBar')
@ -115,7 +93,6 @@ function setLayout() {
<style lang="scss" scoped> <style lang="scss" scoped>
.el-menu { .el-menu {
// display: inline-table; // display: inline-table;
line-height: 46px !important;
.el-menu-item { .el-menu-item {
vertical-align: center; vertical-align: center;
} }
@ -155,40 +132,26 @@ function setLayout() {
} }
.right-menu { .right-menu {
float: right;
height: 100%; height: 100%;
line-height: 50px; line-height: 50px;
display: flex; display: flex;
justify-content: flex-end;
align-items: center;
&:focus { &:focus {
outline: none; outline: none;
} }
.right-menu-item { .right-menu-item {
display: inline-block;
padding: 0 8px; padding: 0 8px;
height: 100%;
font-size: 18px;
color: #5a5e66; color: #5a5e66;
vertical-align: text-bottom; vertical-align: text-bottom;
&.hover-effect {
cursor: pointer;
transition: background 0.3s;
&:hover {
background: rgba(0, 0, 0, 0.025);
}
}
} }
.avatar-container { .avatar-container {
margin-right: 30px;
.avatar-wrapper { .avatar-wrapper {
margin-top: 5px; display: flex;
position: relative; align-items: center;
.user-avatar { .user-avatar {
cursor: pointer; cursor: pointer;
width: 30px; width: 30px;
@ -196,17 +159,13 @@ function setLayout() {
border-radius: 10px; border-radius: 10px;
vertical-align: middle; vertical-align: middle;
margin-right: 5px; margin-right: 5px;
margin-top: 5px;
} }
.name { .name {
font-size: 12px; font-size: 12px;
} }
i { i {
cursor: pointer; cursor: pointer;
position: absolute; margin-left: 10px;
right: -30px;
top: 15px;
font-size: 12px;
} }
} }
} }

10
src/layout/components/Sidebar/index.vue
View File

@ -1,5 +1,6 @@
<template> <template>
<div <div
:data-theme="sideTheme"
class="layout-sidebar__container" class="layout-sidebar__container"
:class="{ 'has-logo': showLogo }" :class="{ 'has-logo': showLogo }"
:style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"
@ -17,12 +18,7 @@
:collapse-transition="false" :collapse-transition="false"
mode="vertical" mode="vertical"
> >
<sidebar-item <sidebar-item v-for="(route, index) in sidebarRouters" :key="route.path + index" :item="route" :base-path="route.path" />
v-for="(route, index) in sidebarRouters"
:key="route.path + index"
:item="route"
:base-path="route.path"
/>
</el-menu> </el-menu>
</el-scrollbar> </el-scrollbar>
</div> </div>
@ -58,7 +54,7 @@ const activeMenu = computed(() => {
.layout-sidebar__container { .layout-sidebar__container {
transition: width 0.28s; transition: width 0.28s;
width: $base-sidebar-width !important; width: $base-sidebar-width !important;
// background-color: $base-menu-background; background-color: $base-menu-background;
height: 100%; height: 100%;
position: fixed; position: fixed;
font-size: 0px; font-size: 0px;