This commit is contained in:
parent
92b6d9b6fd
commit
e9a17d6286
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
|
|
@ -112,7 +112,7 @@ export default {
|
|||
color: #fff;
|
||||
font-weight: 600;
|
||||
line-height: 50px;
|
||||
font-size: 14px;
|
||||
font-size: 18px;
|
||||
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,41 +1,35 @@
|
|||
<template>
|
||||
<div
|
||||
:class="{ 'has-logo': showLogo }"
|
||||
:style="{
|
||||
backgroundColor:
|
||||
settings.sideTheme === 'theme-dark'
|
||||
? variables.menuBackground
|
||||
: variables.menuLightBackground,
|
||||
}"
|
||||
>
|
||||
<logo v-if="showLogo" :collapse="isCollapse" />
|
||||
<el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
|
||||
<el-menu
|
||||
:default-active="activeMenu"
|
||||
:collapse="isCollapse"
|
||||
:background-color="
|
||||
settings.sideTheme === 'theme-dark'
|
||||
? variables.menuBackground
|
||||
: variables.menuLightBackground
|
||||
"
|
||||
:text-color="
|
||||
settings.sideTheme === 'theme-dark'
|
||||
? variables.menuColor
|
||||
: variables.menuLightColor
|
||||
"
|
||||
:unique-opened="true"
|
||||
active-text-color="#ffba00"
|
||||
:collapse-transition="false"
|
||||
mode="vertical"
|
||||
>
|
||||
<sidebar-item
|
||||
v-for="(route, index) in sidebarRouters"
|
||||
:key="route.path + index"
|
||||
:item="route"
|
||||
:base-path="route.path"
|
||||
/>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
<div class="sidebar-container">
|
||||
<!-- 背景图片层 -->
|
||||
<div class="sidebar-bg" :style="{ backgroundImage: `url(${sidebarBg})` }"></div>
|
||||
|
||||
<!-- 内容层 -->
|
||||
<div class="sidebar-content" :class="{ 'has-logo': showLogo }">
|
||||
<logo v-if="showLogo" :collapse="isCollapse" />
|
||||
<el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
|
||||
<el-menu
|
||||
:default-active="activeMenu"
|
||||
:collapse="isCollapse"
|
||||
:background-color="'transparent'"
|
||||
:text-color="
|
||||
settings.sideTheme === 'theme-dark'
|
||||
? variables.menuColor
|
||||
: variables.menuLightColor
|
||||
"
|
||||
:unique-opened="true"
|
||||
active-text-color="#ffba00"
|
||||
:collapse-transition="false"
|
||||
mode="vertical"
|
||||
>
|
||||
<sidebar-item
|
||||
v-for="(route, index) in sidebarRouters"
|
||||
:key="route.path + index"
|
||||
:item="route"
|
||||
:base-path="route.path"
|
||||
/>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -44,16 +38,18 @@ import { mapGetters, mapState } from "vuex";
|
|||
import Logo from "./Logo";
|
||||
import SidebarItem from "./SidebarItem";
|
||||
import variables from "@/assets/styles/variables.scss";
|
||||
|
||||
import sidebarBg from "@/assets/images/mask_group.png";
|
||||
export default {
|
||||
components: { SidebarItem, Logo },
|
||||
computed: {
|
||||
sidebarBg() {
|
||||
return sidebarBg;
|
||||
},
|
||||
...mapState(["settings"]),
|
||||
...mapGetters(["sidebarRouters", "sidebar"]),
|
||||
activeMenu() {
|
||||
const route = this.$route;
|
||||
const { meta, path } = route;
|
||||
// if set path, the sidebar will highlight the path you set
|
||||
if (meta.activeMenu) {
|
||||
return meta.activeMenu;
|
||||
}
|
||||
|
|
@ -71,3 +67,70 @@ export default {
|
|||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sidebar-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sidebar-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 修改菜单项背景色为透明 */
|
||||
:deep(.el-menu) {
|
||||
background-color: transparent !important;
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
:deep(.el-menu-item),
|
||||
:deep(.el-submenu__title) {
|
||||
font-size: 16px !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/* 展开的子菜单项背景色透明 */
|
||||
:deep(.el-menu--inline) {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
:deep(.el-menu--inline .el-menu-item),
|
||||
:deep(.el-menu--inline .el-submenu__title) {
|
||||
font-size: 16px !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
:deep(.el-menu-item:hover),
|
||||
:deep(.el-submenu__title:hover),
|
||||
:deep(.el-menu--inline .el-menu-item:hover),
|
||||
:deep(.el-menu--inline .el-submenu__title:hover) {
|
||||
background-color: rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
|
||||
:deep(.el-menu-item.is-active),
|
||||
:deep(.el-menu--inline .el-menu-item.is-active) {
|
||||
background-color: rgba(255, 186, 0, 0.2) !important;
|
||||
}
|
||||
|
||||
/* 确保子菜单展开时的箭头图标颜色也适配 */
|
||||
:deep(.el-submenu .el-menu-item),
|
||||
:deep(.el-submenu__title) {
|
||||
color: inherit !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -113,8 +113,8 @@
|
|||
<template slot-scope="scope" >
|
||||
<el-button
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
type="text"
|
||||
icon="el-icon-view"
|
||||
@click="handleDetail(scope.row)"
|
||||
>
|
||||
共享详情
|
||||
|
|
|
|||
Loading…
Reference in New Issue