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

主页面样式同步

Browse Source
main
严飞永 1 week ago
parent f575bec5e7
commit 425e1d2022
7 changed files with 98 additions and 62 deletions
Show Stats Download Patch File Download Diff File

1
index.html
Unescape View File

@ -16,6 +16,7 @@
height: 100%;
margin: 0px;
padding: 0px;
background: #f2f4f6;
}
.chromeframe {

16
src/App.vue
Unescape View File

@ -3,13 +3,19 @@
</template>
<script setup>
import useSettingsStore from '@/store/modules/settings'
import { handleThemeStyle } from '@/utils/theme'
import useSettingsStore from "@/store/modules/settings";
import { handleThemeStyle } from "@/utils/theme";
onMounted(() => {
nextTick(() => {
// 初始化主题样式
handleThemeStyle(useSettingsStore().theme)
})
})
handleThemeStyle(useSettingsStore().theme);
});
});
</script>
<style>
:root {
--el-menu-item-height: 30px;
}
</style>

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

@ -1,8 +1,14 @@
#app {
.main-container {
min-height: 100%;
transition: margin-left 0.28s;
margin-left: $base-sidebar-width;
height: 100%;
// height: calc(100% - 50px);
// transition: margin-left .28s;
// margin-left: $base-sidebar-width;
// position: relative;
// height: calc(100% - 50px);
transition: margin-left .28s;
margin-left: 260px;
position: relative;
}
@ -11,9 +17,12 @@
}
.sidebar-container {
-webkit-transition: width .28s;
transition: width 0.28s;
width: $base-sidebar-width !important;
background-color: $base-menu-background;
height: 100%;
// height: calc(100% - 50px);
position: fixed;
font-size: 0px;
top: 0;
@ -21,13 +30,12 @@
left: 0;
z-index: 1001;
overflow: hidden;
-webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
box-shadow: 2px 0 6px rgba(0,21,41,.35);
// 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;
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
}
.scrollbar-wrapper {
@ -51,7 +59,7 @@
font-family: Alimama ShuHeiTi;
// font-weight: bold;
font-size: 20px;
color: #ffffff;
color: #FFFFFF;
line-height: 30px;
overflow: hidden;
padding: 10px 10px 0 10px;
@ -59,6 +67,26 @@
}
}
.cheshileiming {
padding: 10px 14px;
.is-active {
height: 30px;
line-height: 30px;
border-radius: 5px;
color: #FFFFFF;
background-color: #1485EF !important;
}
li {
height: 30px;
line-height: 30px;
}
.el-submenu__title {
height: 30px;
line-height: 30px;
}
}
.is-horizontal {
display: none;
}
@ -79,44 +107,42 @@
width: 100% !important;
}
.el-menu-item,
.menu-title {
.el-menu-item, .el-submenu__title {
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.el-menu-item .el-menu-tooltip__trigger {
display: inline-block !important;
}
// menu hover
.sub-menu-title-noDropdown,
.el-sub-menu__title {
.submenu-title-noDropdown,
.el-submenu__title {
border-radius: 5px;
&:hover {
background-color: rgba(0, 0, 0, 0.06) !important;
// background-color: rgba(0, 0, 0, 0.06) !important;
background-color: #1485EF !important;
}
}
& .theme-dark .is-active > .el-sub-menu__title {
& .theme-dark .is-active > .el-submenu__title {
color: $base-menu-color-active !important;
}
& .nest-menu .el-sub-menu > .el-sub-menu__title,
& .el-sub-menu .el-menu-item {
min-width: $base-sidebar-width !important;
& .nest-menu .el-submenu>.el-submenu__title,
& .el-submenu .el-menu-item {
min-width: 180px !important;
border-radius: 5px;
&:hover {
background-color: rgba(0, 0, 0, 0.06) !important;
// background-color: rgba(0, 0, 0, 0.06) !important;
background-color: #1485EF !important;
}
}
& .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
& .theme-dark .el-sub-menu .el-menu-item {
background-color: $base-sub-menu-background;
& .theme-dark .nest-menu .el-submenu>.el-submenu__title,
& .theme-dark .el-submenu .el-menu-item {
// background-color: $base-menu-background !important;
&:hover {
background-color: $base-sub-menu-hover !important;
background-color: #1485EF !important;
}
}
}
@ -130,7 +156,7 @@
margin-left: 54px;
}
.sub-menu-title-noDropdown {
.submenu-title-noDropdown {
padding: 0 !important;
position: relative;
@ -143,21 +169,22 @@
}
}
.el-sub-menu {
.el-submenu {
overflow: hidden;
& > .el-sub-menu__title {
&>.el-submenu__title {
padding: 0 !important;
.svg-icon {
margin-left: 20px;
}
}
}
.el-menu--collapse {
.el-sub-menu {
& > .el-sub-menu__title {
.el-submenu {
&>.el-submenu__title {
&>span {
height: 0;
width: 0;
@ -165,19 +192,12 @@
visibility: hidden;
display: inline-block;
}
& > i {
height: 0;
width: 0;
overflow: hidden;
visibility: hidden;
display: inline-block;
}
}
}
}
}
.el-menu--collapse .el-menu .el-sub-menu {
.el-menu--collapse .el-menu .el-submenu {
min-width: $base-sidebar-width !important;
}
@ -188,7 +208,7 @@
}
.sidebar-container {
transition: transform 0.28s;
transition: transform .28s;
width: $base-sidebar-width !important;
}
@ -202,6 +222,7 @@
}
.withoutAnimation {
.main-container,
.sidebar-container {
transition: none;
@ -217,15 +238,15 @@
}
}
.nest-menu .el-sub-menu > .el-sub-menu__title,
.nest-menu .el-submenu>.el-submenu__title,
.el-menu-item {
&:hover {
// you can use $sub-menuHover
// you can use $subMenuHover
background-color: rgba(0, 0, 0, 0.06) !important;
}
}
// the scroll bar appears when the sub-menu is too long
// the scroll bar appears when the subMenu is too long
>.el-menu--popup {
max-height: 100vh;
overflow-y: auto;

5
src/components/Breadcrumb/index.vue
Unescape View File

@ -206,8 +206,9 @@ getBreadcrumb();
justify-content: center;
align-items: center;
img {
width: 17px;
margin-bottom: 5px;
width: 14px;
margin-bottom: 1px;
margin-right: 10px;
}
}
.app-breadcrumb.el-breadcrumb {

4
src/layout/components/AppMain.vue
Unescape View File

@ -36,9 +36,11 @@ function addIframe() {
<style lang="scss" scoped>
.app-main {
/* 50= navbar 50 */
border-radius: 5px;
min-height: calc(100vh - 50px);
width: 100%;
width: calc(100% - 20px);
position: relative;
background-color: #fff;
overflow: hidden;
}

13
src/layout/components/Navbar.vue
Unescape View File

@ -111,10 +111,15 @@ function toggleTheme() {
<style lang="scss" scoped>
.navbar {
height: 50px;
display: flex;
width: 100%;
padding: 0 40px 0 0;
justify-content: space-between;
align-items: center;
overflow: hidden;
position: relative;
background: var(--navbar-bg);
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
// background: var(--navbar-bg);
// box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
.hamburger-container {
line-height: 46px;
@ -131,7 +136,7 @@ function toggleTheme() {
.breadcrumb-container {
float: left;
padding-left: 10px;
// padding-left: 10px;
}
.topmenu-container {
@ -146,7 +151,7 @@ function toggleTheme() {
.right-menu {
// float: right;
margin-left: 93%;
// margin-left: 92%;
height: 100%;
line-height: 50px;
display: flex;

4
src/layout/components/Sidebar/SidebarItem.vue
Unescape View File

@ -1,7 +1,7 @@
<template>
<div v-if="!item.hidden">
<template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)" class="cheshileiming">
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
<svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"/>
<template #title><span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.title }}</span></template>
@ -9,7 +9,7 @@
</app-link>
</template>
<el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" teleported>
<el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" teleported class="cheshileiming">
<template v-if="item.meta" #title>
<svg-icon :icon-class="item.meta && item.meta.icon" />
<span class="menu-title" :title="hasTitle(item.meta.title)">{{ item.meta.title }}</span>

Write Preview
Loading…
Cancel
Save