ewide/zsxt_nbzs_h5
22
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update 重做菜单

Browse Source
This commit is contained in:
自带大佬气场
2021-05-06 09:29:07 +08:00
parent 03a88be5ce
commit a5d84bbfff
20 changed files with 265 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
Web/src/assets/style/frame/dark.less
View File

@@ -4,12 +4,9 @@
.main(@nav-background: @layout-header-background;
@nav-box-shadow-color: fade(@black, 25%);
@nav-scrollbar-background: fade(@white, 50%);
@nav-app-color: fade(@white, 35%);
@logo-color: @white;
@logo-box-shadow: none;
@app-selector-color: @white;
@app-selector-border-color: fade(@white, 10%);
@app-selector-background-color: fade(@white, 30%);
@app-selector-box-shadow-color: fade(@white, 15%);
@header-action-color: fade(@white, 60%);
@header-action-hover-color: @white;
@header-action-hover-background: fade(@white, 20%);

5
Web/src/assets/style/frame/light.less
View File

@@ -3,12 +3,9 @@
.main(@nav-background: @white;
@nav-box-shadow-color: fade(@black, 5%);
@nav-scrollbar-background: fade(@black, 30%);
@nav-app-color: fade(@black, 35%);
@logo-color: @black;
@logo-box-shadow: inset -1px -1px 1px @border-color-split;
@app-selector-color: @primary-6;
@app-selector-border-color: @primary-3;
@app-selector-background-color: @primary-1;
@app-selector-box-shadow-color: @primary-1;
@header-action-color: fade(@black, 35%);
@header-action-hover-color: @icon-color-hover;
@header-action-hover-background: fade(@black, 5%);

2
Web/src/assets/style/lib/container.less
View File

@@ -1,5 +1,5 @@
@import (reference) '~@/assets/style/extend.less';
@container-width: 1200px;
@container-width: 1400px;
.container {
width: @container-width;
margin: 0 auto;

85
Web/src/assets/style/main.less
View File

@@ -4,12 +4,9 @@
.main(@nav-background: @layout-header-background,
@nav-box-shadow-color: fade(@black, 25%),
@nav-scrollbar-background: fade(@white, 30%),
@nav-app-color: fade(@white, 35%),
@logo-color: @white,
@logo-box-shadow: none,
@app-selector-color: @white,
@app-selector-border-color: fade(@white, 10%),
@app-selector-background-color: fade(@white, 30%),
@app-selector-box-shadow-color: fade(@white, 15%),
@header-action-color: fade(@white, 60%),
@header-action-hover-color: @white,
@header-action-hover-background: fade(@white, 20%),
@@ -251,6 +248,52 @@
border-right: 0;
}
}
.yo-nav {
padding-top: @padding-lg;
padding-bottom: @padding-lg;
&--row {
padding: 1px 0;
column-gap: @padding-md;
column-count: 3;
}
&--col {
break-inside: avoid;
}
&--sub-item {
}
&--item-group {
font-size: @font-size-base;
line-height: 1.5;
margin-bottom: @padding-xs;
padding-top: @padding-xs * 2;
color: fade(@black, 35%);
border: @border-width-base @border-style-base transparent;
}
&--item {
font-size: @font-size-base;
line-height: 1.5;
position: relative;
margin-bottom: @padding-xs;
padding: @padding-xs @padding-sm;
cursor: pointer;
transition: @animation-duration-fast;
border: @border-width-base @border-style-base @border-color-split;
border-radius: @border-radius-base;
background-color: @white;
&:hover {
color: @white;
border-color: @primary-color;
background-color: @primary-color;
}
}
}
.yo-layout--left-menu,
.yo-layout--right-menu {
position: absolute;
@@ -345,15 +388,21 @@
position: relative;
z-index: 10;
display: flex;
flex: 1 1 100%;
flex-direction: column;
box-shadow: 2px 0 8px @nav-box-shadow-color;
&--app {
font-size: @font-size-sm;
margin-top: @padding-sm;
padding: 0 @padding-md;
color: @nav-app-color;
}
}
.swiper-container {
position: absolute;
top: (@layout-header-height / 2) + (@padding-xxs * 2);
top: 0;
left: 0;
bottom: 0;
@@ -385,28 +434,6 @@
}
}
}
.yo-apps-selector {
>span {
line-height: @layout-header-height / 2 - 2px;
display: block;
height: @layout-header-height / 2;
margin: @padding-xxs @padding-xs;
cursor: pointer;
transition: @animation-duration-slow box-shadow;
text-align: center;
color: @app-selector-color;
border: @border-width-base @border-style-base @app-selector-border-color;
border-radius: @border-radius-base;
background-color: @app-selector-background-color;
&:hover {
box-shadow: 0 0 15px @app-selector-box-shadow-color;
}
}
}
}
}
}