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-background: #304156;
$base-logo-title-color: #ffffff;
$base-topBar-background: #ffffff;
$menuHover:#263445;
// sidebar
$menuText:#bfcbd9;
@ -52,9 +54,9 @@ $base-sidebar-width: 210px;
sideBarWidth: $base-sidebar-width;
logoTitleColor: $base-logo-title-color;
logoLightTitleColor: $base-logo-light-title-color;
primaryColor: $--color-primary;
successColor: $--color-success;
dangerColor: $--color-danger;
infoColor: $--color-info;
warningColor: $--color-warning;
// primaryColor: $--color-primary;
// successColor: $--color-success;
// dangerColor: $--color-danger;
// infoColor: $--color-info;
// warningColor: $--color-warning;
}

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

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

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

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

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

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

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

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