Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
355719a5 by 任超
Options

sider样式

1 parent d00c0275
Inline Side-by-side
Showing 13 changed files with 41 additions and 146 deletions
<!--控制左侧菜单收缩显示-->
<template>
<div style="padding: 0 15px;" @click="toggleClick">
<svg-icon :class="{'is-active':isActive}" class="hamburg" icon-class="hamburg" />
</div>
</template>
<script>
export default {
name: 'Hamburger',
props: {
isActive: {
type: Boolean,
default: false
}
},
methods: {
toggleClick() {
this.$emit('toggleClick')
}
}
}
</script>
<style scoped>
.hamburg {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
transition: all 0.2s ease-in;
}
.hamburg.is-active {
transform: rotate(180deg);
}
</style>
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1629181827644" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5380" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M170.666667 156.444444h682.666666a42.666667 42.666667 0 0 1 0 85.333334H170.666667a42.666667 42.666667 0 1 1 0-85.333334zM448.056889 440.888889H853.333333a42.666667 42.666667 0 0 1 0 85.333333H448.056889a42.666667 42.666667 0 0 1 0-85.333333zM170.666667 725.333333h682.666666a42.666667 42.666667 0 1 1 0 85.333334H170.666667a42.666667 42.666667 0 1 1 0-85.333334z" p-id="5381" fill="#686666"></path><path d="M290.304 493.738667L156.501333 560.64a11.377778 11.377778 0 0 1-16.497777-10.183111V416.654222a11.377778 11.377778 0 0 1 16.497777-10.24l133.802667 66.958222a11.377778 11.377778 0 0 1 0 20.366223z" p-id="5382" fill="#686666"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1628839541389" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2080" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M408 442h480a8 8 0 0 0 8-8v-56a8 8 0 0 0-8-8H408a8 8 0 0 0-8 8v56a8 8 0 0 0 8 8z m-8 204a8 8 0 0 0 8 8h480a8 8 0 0 0 8-8v-56a8 8 0 0 0-8-8H408a8 8 0 0 0-8 8v56z m504-486H120a8 8 0 0 0-8 8v56a8 8 0 0 0 8 8h784a8 8 0 0 0 8-8v-56a8 8 0 0 0-8-8z m0 632H120a8 8 0 0 0-8 8v56a8 8 0 0 0 8 8h784a8 8 0 0 0 8-8v-56a8 8 0 0 0-8-8zM142.4 642.1L298.7 519a8.8 8.8 0 0 0 0-13.9L142.4 381.9a8.9 8.9 0 0 0-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" p-id="2081" fill="#686666"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1660116174178" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13145" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M873.192727 177.105455v504.552727h-721.454545V177.105455zM93.090909 681.658182a59.345455 59.345455 0 0 0 57.716364 60.741818h721.454545a55.854545 55.854545 0 0 0 40.727273-17.92 61.672727 61.672727 0 0 0 17.92-42.821818V177.105455A59.345455 59.345455 0 0 0 873.192727 116.363636h-721.454545a56.087273 56.087273 0 0 0-40.727273 17.687273A62.370909 62.370909 0 0 0 93.090909 177.105455zM781.032727 884.363636a29.556364 29.556364 0 0 0 28.858182-30.254545v-1.396364a31.883636 31.883636 0 0 0-8.378182-21.643636 28.858182 28.858182 0 0 0-20.48-8.843636H242.967273a29.789091 29.789091 0 0 0-28.858182 30.487272v1.396364a29.556364 29.556364 0 0 0 28.858182 30.254545z m-298.589091-61.44h57.716364V742.4h-56.32z m-213.410909-323.956363l144.523637-141.963637 24.669091 27.694546-144.523637 141.963636z m282.996364 0l144.290909-141.963637L721.454545 384.698182l-144.290909 141.963636z m-30.254546 3.723636l-79.592727-93.090909a43.985455 43.985455 0 1 1 29.323637-41.658182 46.545455 46.545455 0 0 1-2.792728 16.058182l80.290909 94.487273a39.563636 39.563636 0 0 1 31.883637 4.189091 43.752727 43.752727 0 0 1 20.712727 37.701818 41.658182 41.658182 0 1 1-83.083636 0 46.545455 46.545455 0 0 1 3.258181-17.687273z m-281.832727 9.309091a41.658182 41.658182 0 1 1 41.658182 43.752727A42.589091 42.589091 0 0 1 239.941818 512z m439.621818-154.996364a41.658182 41.658182 0 1 1 41.890909 43.52 42.589091 42.589091 0 0 1-41.890909-43.52z" p-id="13146" fill="#ffffff"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1660115965868" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11241" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M650.666667 256h-362.666667a32 32 0 0 0 0 64h362.666667a32 32 0 0 0 0-64zM554.666667 480a32 32 0 0 0-32-32h-234.666667a32 32 0 0 0 0 64h234.666667a32 32 0 0 0 32-32zM288 640a32 32 0 0 0 0 64h106.666667a32 32 0 0 0 0-64z" fill="#ffffff" p-id="11242"></path><path d="M149.333333 906.666667v-789.333334a10.666667 10.666667 0 0 1 10.666667-10.666666h661.333333a10.666667 10.666667 0 0 1 10.666667 10.666666v113.706667a32 32 0 0 0 32 32 32 32 0 0 0 32-32V117.333333A74.666667 74.666667 0 0 0 821.333333 42.666667h-661.333333A74.666667 74.666667 0 0 0 85.333333 117.333333v789.333334A74.666667 74.666667 0 0 0 160 981.333333h478.293333a32 32 0 0 0 32-32 32 32 0 0 0-32-32H160a10.666667 10.666667 0 0 1-10.666667-10.666666z" fill="#ffffff" p-id="11243"></path><path d="M864 352h-85.333333A74.666667 74.666667 0 0 0 704 426.666667v397.866666a53.333333 53.333333 0 0 0 11.733333 33.28l64 80a53.333333 53.333333 0 0 0 83.2 0l64-80a53.333333 53.333333 0 0 0 11.733334-33.28V426.666667a74.666667 74.666667 0 0 0-74.666667-74.666667z m10.666667 469.333333l-53.333334 66.133334-53.333333-66.773334V576h106.666667zM874.666667 512h-106.666667v-85.333333a10.666667 10.666667 0 0 1 10.666667-10.666667h85.333333a10.666667 10.666667 0 0 1 10.666667 10.666667z" fill="#ffffff" p-id="11244"></path></svg>
\ No newline at end of file
<template>
<div class="navbar">
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
@toggleClick="toggleSideBar" />
<div class="right-menu">
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click" @command="handleCommand">
<div class="avatar-wrapper">
......@@ -18,18 +16,11 @@
</template>
<script>
import { mapGetters } from 'vuex'
import Hamburger from '@/components/Hamburger'
export default {
components: {
Hamburger
},
computed: {
...mapGetters(['sidebar', 'avatar', 'name'])
},
methods: {
toggleSideBar () {
this.$store.dispatch('app/toggleSideBar')
},
searchMessageCenter () {
this.$router.push({ name: 'messagecenter' })
},
......
......@@ -69,7 +69,6 @@ export default {
}
& .sidebar-title {
// display: inline-block;
margin: 0;
margin-top: 10px;
margin-bottom: 20px;
......
<template>
<div :class="{ 'has-logo': showLogo }">
<logo v-if="showLogo" :collapse="isCollapse" />
<div>
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu :default-active="activeMenu" :collapse="isCollapse" :background-color="variables.menuBg"
:text-color="variables.menuText" :unique-opened="true" :active-text-color="variables.menuActiveText"
:collapse-transition="false" mode="vertical">
<el-menu :default-active="activeMenu" :background-color="variables.menuBg" :text-color="variables.menuText"
:unique-opened="true" :active-text-color="variables.menuActiveText" :collapse-transition="false"
mode="vertical">
<!-- 权限菜单 -->
<!-- <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" /> -->
<!-- 菜单全部展示 -->
......@@ -33,15 +32,9 @@ export default {
}
return path
},
showLogo () {
return this.$store.state.settings.sidebarLogo
},
variables () {
return variables
},
isCollapse () {
return !this.sidebar.opened
},
asyncRoutes () {
return asyncRoutes
},
......
<template>
<div :class="classObj" class="app-wrapper">
<div class="app-wrapper">
<sidebar class="sidebar-container" />
<div :class="{ hasTagsView: needTagsView }" class="main-container">
<div :class="{ 'fixed-header': fixedHeader }">
......@@ -28,20 +28,7 @@ export default {
sidebar: state => state.app.sidebar,
needTagsView: state => state.settings.tagsView,
fixedHeader: state => state.settings.fixedHeader
}),
classObj () {
return {
hideSidebar: !this.sidebar.opened,
openSidebar: this.sidebar.opened,
withoutAnimation: this.sidebar.withoutAnimation,
mobile: this.device === 'mobile'
}
}
},
methods: {
handleClickOutside () {
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
}
})
}
}
</script>
......
......@@ -37,13 +37,13 @@ export const asyncRoutes = [
path: '/',
component: Layout,
redirect: '/home',
meta: { title: '首页', icon: 'fykf' },
meta: { title: '首页' },
children: [
{
path: 'home',
component: () => import('@/views/home/index'),
name: 'Dashboard',
meta: { title: '工作台', icon: 'dashboard', affix: true }
meta: { title: '工作台', icon: 'workbench', affix: true }
}
]
},
......@@ -52,7 +52,7 @@ export const asyncRoutes = [
id: '3',
parentId: null,
component: Layout,
meta: { title: '业务办理', icon: 'fykf' },
meta: { title: '业务办理', icon: 'ywbl' },
redirect: '/ywbl/ywsq/ywsq',
alwaysShow: true,
name: 'ywbl',
......
import Cookies from 'js-cookie'
const state = {
sidebar: {
opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
withoutAnimation: false
},
size: 'small'
}
const mutations = {
TOGGLE_SIDEBAR: state => {
state.sidebar.opened = !state.sidebar.opened
state.sidebar.withoutAnimation = false
if (state.sidebar.opened) {
Cookies.set('sidebarStatus', 1)
} else {
Cookies.set('sidebarStatus', 0)
}
},
CLOSE_SIDEBAR: (state, withoutAnimation) => {
Cookies.set('sidebarStatus', 0)
state.sidebar.opened = false
state.sidebar.withoutAnimation = withoutAnimation
},
SET_SIZE: (state, size) => {
state.size = size
Cookies.set('size', size)
......@@ -30,15 +12,9 @@ const mutations = {
}
const actions = {
toggleSideBar ({ commit }) {
commit('TOGGLE_SIDEBAR')
},
closeSideBar ({ commit }, { withoutAnimation }) {
commit('CLOSE_SIDEBAR', withoutAnimation)
},
toggleDevice ({ commit }, device) {
commit('TOGGLE_DEVICE', device)
},
setSize ({ commit }, size) {
commit('SET_SIZE', size)
}
......
......@@ -8,7 +8,6 @@
.sidebar-container {
transition: width 0.28s;
width: $sideBarWidth !important;
// background-color: $menuBg;
height: 100%;
position: fixed;
font-size: 0px;
......@@ -16,14 +15,9 @@
bottom: 0;
left: 0;
z-index: 1001;
background-image: linear-gradient(180deg, #25A0FE 2%, #43BDFF 100%);
border-radius: 0 12px 12px 0;
background-color: $subMenuBg;
overflow: hidden;
// reset element-ui css
.horizontal-collapse-transition {
transition: 0s width ease-in-out, 0s padding-left ease-in-out,
0s padding-right ease-in-out;
......@@ -98,27 +92,26 @@
background-color: transparent !important;
&:hover {
color: #1ea6f8 !important;
background-color: #fff !important;
color: $subMenuActiveText !important;
background-color: $subMenuHover !important;
.svg-icon,
i,
span {
color: #1ea6f8 !important;
color: $subMenuActiveText !important;
}
}
}
// 没有子级
.submenu-title-noDropdown {
background-color: transparent !important;
margin-left: 15px;
padding-left: 10px !important;
color: $menuText;
border-radius: 6px;
padding-left: 10px !important;
&:hover {
color: #1ea6f8 !important;
background-color: #fff !important;
color: $menuActiveText !important;
background-color: $subMenuHover !important;
.svg-icon {
color: #1ea6f8 !important;
......@@ -132,8 +125,8 @@
.submenu-title-noDropdown.is-active,
.el-submenu__title.is-active {
color: #1ea6f8 !important;
background-color: #fff !important;
color: $menuActiveText;
background-color: $menuHover !important;
.svg-icon {
color: #1ea6f8 !important;
......@@ -148,7 +141,8 @@
.el-submenu__title {
font-weight: 600;
font-size: $sideBarFontSize;
border-radius: 10px 0px 0px 10px;
margin: 0 20px;
border-radius: 6px;
>i {
color: $subMenuActiveText !important;
......@@ -180,27 +174,21 @@
& .nest-menu .el-submenu>.el-submenu__title,
& .el-submenu .el-menu-item {
&.is-active {
background-color: #fff !important;
color: #1ea6f8 !important;
background-color: $subMenuHover !important;
color: $menuActiveText !important;
}
&:hover {
background-color: #fff !important;
color: #1ea6f8 !important;
background-color: $subMenuHover !important;
color: $menuActiveText !important;
}
// min-width: $sideBarWidth !important;
min-width: 152px !important;
min-width: 130px !important;
background-color: transparent !important;
font-weight: 600;
font-size: $sideBarFontSize;
padding: 0 0 0 45px !important;
border-radius: 10px 0px 0px 10px;
margin-left: 13px;
&:hover {
background-color: #fff !important;
}
margin: 0 20px;
border-radius: 6px;
}
}
......@@ -318,21 +306,17 @@
border-bottom-right-radius: 8px;
font-weight: 600 !important;
font-size: 15px !important;
background-color: #32ACFE !important;
color: #fff !important;
background-color: $menuHover !important;
color: $menuText !important;
&:hover {
// you can use $subMenuHover
// background-color: $menuHover !important;
// opacity: .9;
background-color: #fff !important;
color: #32ACFE !important;
background-color: $menuHover !important;
opacity: .9;
.svg-icon,
i,
span {
color: #32ACFE !important;
color: $menuText;
}
}
}
......
......@@ -13,11 +13,11 @@ $menuText:#ffffff;
$menuActiveText:#ffffff;
$subMenuActiveText:#ffffff; // https://github.com/ElemeFE/element/issues/12951
$menuBg:#3983fc;
$menuHover:#2e69ca;
$menuBg:#202B3D;
$menuHover:#0794FF;
$subMenuBg:#3983fc;
$subMenuHover:#2e69ca;
$subMenuBg:#202B3D;
$subMenuHover:#0794FF;
$sideBarWidth: 170px;
$sideBarFontSize:15px;
......