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

update 更换外框架布局

Browse Source
This commit is contained in:
自带大佬气场
2021-06-03 17:53:25 +08:00
parent 2c712ddd04
commit 7769c4bb43
16 changed files with 1102 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -320,6 +320,99 @@
}
}
}
.yo-layout-sider {
height: 100%;
background-color: @nav-background;
.ant-layout-sider-children {
display: flex;
flex-direction: column;
}
.logo {
font-size: @font-size-lg * 1.5;
font-weight: 500;
line-height: @layout-header-height + 10px;
z-index: 11;
display: flex;
overflow: hidden;
align-items: center;
flex: 0 0 @layout-header-height + 10px;
height: @layout-header-height + 10px;
padding: 0 @padding-md 0 @padding-lg;
color: @logo-color;
box-shadow: @logo-box-shadow;
img {
max-height: 100%;
}
span {
margin-left: @padding-sm;
transition: @animation-duration-slow;
transition-property: opacity;
}
}
&.ant-layout-sider-collapsed {
.logo {
span {
opacity: 0;
}
}
}
.yo-sider-nav {
position: relative;
z-index: 10;
flex: 1 1 100%;
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: 0;
left: 0;
bottom: 0;
width: 100%;
.swiper-scrollbar {
transition: @animation-duration-slow;
transition-property: opacity;
opacity: 0;
}
.swiper-scrollbar-drag {
background-color: @nav-scrollbar-background;
}
&:hover {
.swiper-scrollbar {
opacity: 1;
}
}
}
.swiper-slide {
height: auto;
min-height: 100%;
>.ant-spin-nested-loading {
height: 100%;
.ant-spin-blur {
&::after {
opacity: 0;
}
}
}
}
}
.yo-layout--left-menu,
.yo-layout--right-menu {
position: absolute;
@@ -366,99 +459,11 @@
}
}
}
.layout-sider {
}
>section {
>.ant-layout-sider {
height: 100%;
background-color: @nav-background;
.ant-layout-sider-children {
display: flex;
flex-direction: column;
}
.logo {
font-size: @font-size-lg * 1.5;
font-weight: 500;
line-height: @layout-header-height + 10px;
z-index: 11;
display: flex;
overflow: hidden;
align-items: center;
flex: 0 0 @layout-header-height + 10px;
height: @layout-header-height + 10px;
padding: 0 @padding-md 0 @padding-lg;
color: @logo-color;
box-shadow: @logo-box-shadow;
img {
max-height: 100%;
}
span {
margin-left: @padding-sm;
transition: @animation-duration-slow;
transition-property: opacity;
}
}
&.ant-layout-sider-collapsed {
.logo {
span {
opacity: 0;
}
}
}
.yo-sider-nav {
position: relative;
z-index: 10;
flex: 1 1 100%;
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: 0;
left: 0;
bottom: 0;
width: 100%;
.swiper-scrollbar {
transition: @animation-duration-slow;
transition-property: opacity;
opacity: 0;
}
.swiper-scrollbar-drag {
background-color: @nav-scrollbar-background;
}
&:hover {
.swiper-scrollbar {
opacity: 1;
}
}
}
.swiper-slide {
height: auto;
min-height: 100%;
>.ant-spin-nested-loading {
height: 100%;
.ant-spin-blur {
&::after {
opacity: 0;
}
}
}
}
.yo-layout-sider();
}
}
}
@@ -473,9 +478,16 @@
width: 100%;
min-width: @container-width;
height: 100%;
@layout-header-height: 54px;
.ant-layout-header {
line-height: @layout-header-height;
z-index: 11;
flex: 0 0 @layout-header-height;
height: @layout-header-height;
padding: 0;
background-color: @nav-background;
@@ -515,19 +527,19 @@
}
}
.user-container {
margin: 12px 0;
margin: (@layout-header-height - 40px) / 2 0;
}
.logo {
font-size: @font-size-lg * 1.5;
font-weight: 500;
line-height: @layout-header-height;
line-height: @layout-header-height - 10px;
display: flex;
overflow: hidden;
align-items: center;
height: @layout-header-height;
margin-right: @padding-lg;
height: @layout-header-height 10px;
margin: 5px @padding-lg 5px 0;
color: @logo-color;
img {