suzhou-jichuang-lanhai
/
TcAssetvue3
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

菜单栏

Browse Source
main
严飞永 1 week ago
parent 00d5371dac
commit 0012583bc0
10 changed files with 38 additions and 1103 deletions
Show Stats Download Patch File Download Diff File

1
src/assets/icons/svg/icon-degl.svg
Unescape View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.58 14.58"><defs><style>.cls-1{fill:#fff;}</style></defs><title>icon-degl</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M13.38,5.46H9.12V1.2A1.2,1.2,0,0,0,7.92,0H1.2A1.2,1.2,0,0,0,0,1.2V13.38a1.2,1.2,0,0,0,1.2,1.2H7.92a1.2,1.2,0,0,0,.6-.16,1.2,1.2,0,0,0,.6.16h4.26a1.2,1.2,0,0,0,1.2-1.2V6.65a1.2,1.2,0,0,0-1.2-1.2ZM3.93,11.25a.3.3,0,0,1-.3.3H2.43a.3.3,0,0,1-.3-.3v-1.2a.3.3,0,0,1,.3-.3h1.2a.3.3,0,0,1,.3.3Zm0-3.36a.3.3,0,0,1-.3.3H2.43a.3.3,0,0,1-.3-.3V6.69a.3.3,0,0,1,.3-.3h1.2a.3.3,0,0,1,.3.3Zm0-3.36a.3.3,0,0,1-.3.3H2.43a.3.3,0,0,1-.3-.3V3.33a.3.3,0,0,1,.3-.3h1.2a.3.3,0,0,1,.3.3ZM7,11.25a.3.3,0,0,1-.3.3H5.5a.3.3,0,0,1-.3-.3v-1.2a.3.3,0,0,1,.3-.3h1.2a.3.3,0,0,1,.3.3ZM7,7.89a.3.3,0,0,1-.3.3H5.5a.3.3,0,0,1-.3-.3V6.69a.3.3,0,0,1,.3-.3h1.2a.3.3,0,0,1,.3.3ZM7,4.52a.3.3,0,0,1-.3.3H5.5a.3.3,0,0,1-.3-.3V3.33A.3.3,0,0,1,5.5,3h1.2a.3.3,0,0,1,.3.3Zm0,0"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 982 B

1
src/assets/icons/svg/icon-dwgl-1.svg
Unescape View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.58 14.58"><defs></defs><title>icon-dwgl-1</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M13.38,5.46H9.12V1.2A1.2,1.2,0,0,0,7.92,0H1.2A1.2,1.2,0,0,0,0,1.2V13.38a1.2,1.2,0,0,0,1.2,1.2H7.92a1.2,1.2,0,0,0,.6-.16,1.2,1.2,0,0,0,.6.16h4.26a1.2,1.2,0,0,0,1.2-1.2V6.65a1.2,1.2,0,0,0-1.2-1.2ZM3.93,11.25a.3.3,0,0,1-.3.3H2.43a.3.3,0,0,1-.3-.3v-1.2a.3.3,0,0,1,.3-.3h1.2a.3.3,0,0,1,.3.3Zm0-3.36a.3.3,0,0,1-.3.3H2.43a.3.3,0,0,1-.3-.3V6.69a.3.3,0,0,1,.3-.3h1.2a.3.3,0,0,1,.3.3Zm0-3.36a.3.3,0,0,1-.3.3H2.43a.3.3,0,0,1-.3-.3V3.33a.3.3,0,0,1,.3-.3h1.2a.3.3,0,0,1,.3.3ZM7,11.25a.3.3,0,0,1-.3.3H5.5a.3.3,0,0,1-.3-.3v-1.2a.3.3,0,0,1,.3-.3h1.2a.3.3,0,0,1,.3.3ZM7,7.89a.3.3,0,0,1-.3.3H5.5a.3.3,0,0,1-.3-.3V6.69a.3.3,0,0,1,.3-.3h1.2a.3.3,0,0,1,.3.3ZM7,4.52a.3.3,0,0,1-.3.3H5.5a.3.3,0,0,1-.3-.3V3.33A.3.3,0,0,1,5.5,3h1.2a.3.3,0,0,1,.3.3Zm0,0"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 951 B

1
src/assets/icons/svg/icon-rwgl-1.svg
Unescape View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.81 14.71"><defs><style>.cls-1{fill:#fff;}</style></defs><title>icon-rwgl-1</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M10.07,0H1.6A1.6,1.6,0,0,0,0,1.6V11a3.74,3.74,0,0,0,3.73,3.73H12.2a1.6,1.6,0,0,0,1.6-1.6V3.73A3.74,3.74,0,0,0,10.07,0ZM7.29,10H3.85a.71.71,0,0,1,0-1.41H7.29a.71.71,0,0,1,0,1.41ZM10,6H3.85a.7.7,0,0,1,0-1.41H10A.7.7,0,1,1,10,6Zm0,0"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 485 B

1
src/assets/icons/svg/icon-rwgl.svg
Unescape View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.81 14.71"><defs></defs><title>icon-rwgl</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M10.07,0H1.6A1.6,1.6,0,0,0,0,1.6V11a3.74,3.74,0,0,0,3.73,3.73H12.2a1.6,1.6,0,0,0,1.6-1.6V3.73A3.74,3.74,0,0,0,10.07,0ZM7.29,10H3.85a.71.71,0,0,1,0-1.41H7.29a.71.71,0,0,1,0,1.41ZM10,6H3.85a.7.7,0,0,1,0-1.41H10A.7.7,0,1,1,10,6Zm0,0"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 450 B

1
src/assets/icons/svg/icon-zcgl-1.svg
Unescape View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.79 14.76"><defs></defs><title>icon-zcgl-1</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M13.75,6.26c-1,1.17-3.6,2-6.63,2H6.67c-3,0-5.61-.83-6.63-2l0,0V8.45c1,1.2,3.6,2.05,6.67,2.05h.44c3.07,0,5.68-.86,6.67-2.05V6.3l0,0ZM7.11,0H6.67C3.6,0,1,.86,0,2.05V4.2l0,0c1,1.17,3.6,2,6.63,2h.44c3,0,5.61-.84,6.63-2l0,0V2.05C12.79.86,10.18,0,7.11,0Zm6.63,10.51c-1,1.17-3.6,2-6.63,2H6.67c-3,0-5.61-.83-6.63-2l0,0V12.7c1,1.2,3.6,2.05,6.67,2.05h.44c3.07,0,5.68-.86,6.67-2.05V10.55l0,0Zm0,0"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 608 B

1
src/assets/icons/svg/icon-zcgl.svg
Unescape View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.79 14.76"><defs><style>.cls-1{fill:#fff;}</style></defs><title>icon-zcgl</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M13.75,6.26c-1,1.17-3.6,2-6.63,2H6.67c-3,0-5.61-.83-6.63-2l0,0V8.45c1,1.2,3.6,2.05,6.67,2.05h.44c3.07,0,5.68-.86,6.67-2.05V6.3l0,0ZM7.11,0H6.67C3.6,0,1,.86,0,2.05V4.2l0,0c1,1.17,3.6,2,6.63,2h.44c3,0,5.61-.84,6.63-2l0,0V2.05C12.79.86,10.18,0,7.11,0Zm6.63,10.51c-1,1.17-3.6,2-6.63,2H6.67c-3,0-5.61-.83-6.63-2l0,0V12.7c1,1.2,3.6,2.05,6.67,2.05h.44c3.07,0,5.68-.86,6.67-2.05V10.55l0,0Zm0,0"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 639 B

46
src/assets/styles/sidebar.scss
Unescape View File

@ -1,14 +1,13 @@
#app { #app {
.main-container { .main-container {
min-height: 100%; min-height: 100%;
transition: margin-left .28s; transition: margin-left 0.28s;
margin-left: $base-sidebar-width; margin-left: $base-sidebar-width;
position: relative; position: relative;
} }
.sidebarHide { .sidebarHide {
margin-left: 0!important; margin-left: 0 !important;
} }
.sidebar-container { .sidebar-container {
@ -22,12 +21,13 @@
left: 0; left: 0;
z-index: 1001; z-index: 1001;
overflow: hidden; overflow: hidden;
-webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35); -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
// reset element-ui css // reset element-ui css
.horizontal-collapse-transition { .horizontal-collapse-transition {
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out; transition: 0s width ease-in-out, 0s padding-left ease-in-out,
0s padding-right ease-in-out;
} }
.scrollbar-wrapper { .scrollbar-wrapper {
@ -46,6 +46,17 @@
.el-scrollbar { .el-scrollbar {
height: calc(100% - 50px); height: calc(100% - 50px);
} }
.sever-TITLE {
text-align: center;
font-family: Alimama ShuHeiTi;
// font-weight: bold;
font-size: 20px;
color: #ffffff;
line-height: 30px;
overflow: hidden;
padding: 10px 10px 0 10px;
box-sizing: border-box;
}
} }
.is-horizontal { .is-horizontal {
@ -68,7 +79,8 @@
width: 100% !important; width: 100% !important;
} }
.el-menu-item, .menu-title { .el-menu-item,
.menu-title {
overflow: hidden !important; overflow: hidden !important;
text-overflow: ellipsis !important; text-overflow: ellipsis !important;
white-space: nowrap !important; white-space: nowrap !important;
@ -90,7 +102,7 @@
color: $base-menu-color-active !important; color: $base-menu-color-active !important;
} }
& .nest-menu .el-sub-menu>.el-sub-menu__title, & .nest-menu .el-sub-menu > .el-sub-menu__title,
& .el-sub-menu .el-menu-item { & .el-sub-menu .el-menu-item {
min-width: $base-sidebar-width !important; min-width: $base-sidebar-width !important;
@ -99,7 +111,7 @@
} }
} }
& .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title, & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
& .theme-dark .el-sub-menu .el-menu-item { & .theme-dark .el-sub-menu .el-menu-item {
background-color: $base-sub-menu-background; background-color: $base-sub-menu-background;
@ -134,27 +146,26 @@
.el-sub-menu { .el-sub-menu {
overflow: hidden; overflow: hidden;
&>.el-sub-menu__title { & > .el-sub-menu__title {
padding: 0 !important; padding: 0 !important;
.svg-icon { .svg-icon {
margin-left: 20px; margin-left: 20px;
} }
} }
} }
.el-menu--collapse { .el-menu--collapse {
.el-sub-menu { .el-sub-menu {
&>.el-sub-menu__title { & > .el-sub-menu__title {
&>span { & > span {
height: 0; height: 0;
width: 0; width: 0;
overflow: hidden; overflow: hidden;
visibility: hidden; visibility: hidden;
display: inline-block; display: inline-block;
} }
&>i { & > i {
height: 0; height: 0;
width: 0; width: 0;
overflow: hidden; overflow: hidden;
@ -177,7 +188,7 @@
} }
.sidebar-container { .sidebar-container {
transition: transform .28s; transition: transform 0.28s;
width: $base-sidebar-width !important; width: $base-sidebar-width !important;
} }
@ -191,7 +202,6 @@
} }
.withoutAnimation { .withoutAnimation {
.main-container, .main-container,
.sidebar-container { .sidebar-container {
transition: none; transition: none;
@ -201,13 +211,13 @@
// when menu collapsed // when menu collapsed
.el-menu--vertical { .el-menu--vertical {
&>.el-menu { & > .el-menu {
.svg-icon { .svg-icon {
margin-right: 16px; margin-right: 16px;
} }
} }
.nest-menu .el-sub-menu>.el-sub-menu__title, .nest-menu .el-sub-menu > .el-sub-menu__title,
.el-menu-item { .el-menu-item {
&:hover { &:hover {
// you can use $sub-menuHover // you can use $sub-menuHover
@ -216,7 +226,7 @@
} }
// the scroll bar appears when the sub-menu is too long // the scroll bar appears when the sub-menu is too long
>.el-menu--popup { > .el-menu--popup {
max-height: 100vh; max-height: 100vh;
overflow-y: auto; overflow-y: auto;

2
src/assets/styles/variables.module.scss
Unescape View File

@ -21,7 +21,7 @@ $menuLightText: #303133;
$menuLightActiveText: #409EFF; $menuLightActiveText: #409EFF;
// 基础变量 // 基础变量
$base-sidebar-width: 200px; $base-sidebar-width: 240px;
$sideBarWidth: 200px; $sideBarWidth: 200px;
// 菜单暗色变量 // 菜单暗色变量

3
src/layout/components/Sidebar/index.vue
Unescape View File

@ -1,6 +1,7 @@
<template> <template>
<div :class="{ 'has-logo': showLogo }" class="sidebar-container"> <div :class="{ 'has-logo': showLogo }" class="sidebar-container">
<logo v-if="showLogo" :collapse="isCollapse" /> <!-- <logo v-if="showLogo" :collapse="isCollapse" /> -->
<div class="sever-TITLE">太仓市网络和数据资产采集管理系统</div>
<el-scrollbar wrap-class="scrollbar-wrapper"> <el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu <el-menu
:default-active="activeMenu" :default-active="activeMenu"

1084
src/views/index.vue
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save