estel/gva
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

aside + header css

Browse Source
This commit is contained in:
1319612909
2020-11-03 18:04:59 +08:00
parent 286f0b74da
commit 6950e493f2
10 changed files with 1040 additions and 635 deletions
Download Patch File Download Diff File Expand all files Collapse all files

286
web/src/view/layout/index.vue
View File

@@ -241,151 +241,151 @@ export default {
</script>
<style lang="scss">
$headerHigh: 52px;
$mainHight: 100vh;
.dropdown-group {
min-width: 100px;
}
.topfix {
position: fixed;
top: 0;
box-sizing: border-box;
z-index: 999;
}
.admin-box {
min-height: calc(100vh - 240px);
background-color: rgb(255, 255, 255);
margin-top: 100px;
}
.el-scrollbar__wrap {
padding-bottom: 17px;
}
.layout-cont {
.right-box {
text-align: center;
vertical-align: middle;
img {
vertical-align: middle;
border: 1px solid #ccc;
border-radius: 6px;
}
}
// $headerHigh: 52px;
// $mainHight: 100vh;
// .dropdown-group {
// min-width: 100px;
// }
// .topfix {
// position: fixed;
// top: 0;
// box-sizing: border-box;
// z-index: 999;
// }
// .admin-box {
// min-height: calc(100vh - 240px);
// background-color: rgb(255, 255, 255);
// margin-top: 100px;
// }
// .el-scrollbar__wrap {
// padding-bottom: 17px;
// }
// .layout-cont {
// .right-box {
// text-align: center;
// vertical-align: middle;
// img {
// vertical-align: middle;
// border: 1px solid #ccc;
// border-radius: 6px;
// }
// }
.header-cont {
height: $headerHigh !important;
background: #fff;
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
line-height: $headerHigh;
}
.main-cont {
.breadcrumb {
line-height: 48px;
display: inline-block;
padding: 0 24px;
// padding: 6px;
// border-bottom: 1px solid #eee;
}
// .header-cont {
// height: $headerHigh !important;
// background: #fff;
// box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
// line-height: $headerHigh;
// }
// .main-cont {
// .breadcrumb {
// line-height: 48px;
// display: inline-block;
// padding: 0 24px;
// // padding: 6px;
// // border-bottom: 1px solid #eee;
// }
&.el-main {
overflow: auto;
background: #fff;
// padding: 0px 10px;
// background: #fff;
}
height: $mainHight !important;
overflow: visible;
position: relative;
.menu-total {
// z-index: 5;
// position: absolute;
// top: 10px;
// right: -35px;
margin-left: -10px;
float: left;
margin-top: 10px;
width: 30px;
height: 30px;
line-height: 30px;
font-size: 30px;
// border: 0 solid #ffffff;
// border-radius: 50%;
// background: #fff;
}
.aside {
overflow: auto;
// background: #fff;
&::-webkit-scrollbar {
display: none;
}
}
.el-menu-vertical {
height: calc(100vh - 64px) !important;
visibility: auto;
&:not(.el-menu--collapse) {
width: 220px;
}
}
.el-menu--collapse {
width: 54px;
li {
.el-tooltip,
.el-submenu__title {
padding: 0px 15px !important;
}
}
}
&::-webkit-scrollbar {
display: none;
}
&.main-left {
width: auto !important;
}
&.main-right {
.admin-title {
float: left;
font-size: 16px;
vertical-align: middle;
margin-left: 20px;
img {
vertical-align: middle;
}
&.collapse {
width: 53px;
}
}
}
}
}
.tilte {
background: #001529;
min-height: 64px;
line-height: 64px;
background: #002140;
text-align: center;
.logoimg {
width: 30px;
height: 30px;
vertical-align: middle;
background: #fff;
border-radius: 50%;
padding: 3px;
}
.tit-text {
display: inline-block;
color: #fff;
font-weight: 600;
font-size: 20px;
vertical-align: middle;
}
}
// &.el-main {
// overflow: auto;
// background: #fff;
// // padding: 0px 10px;
// // background: #fff;
// }
// height: $mainHight !important;
// overflow: visible;
// position: relative;
// .menu-total {
// // z-index: 5;
// // position: absolute;
// // top: 10px;
// // right: -35px;
// margin-left: -10px;
// float: left;
// margin-top: 10px;
// width: 30px;
// height: 30px;
// line-height: 30px;
// font-size: 30px;
// // border: 0 solid #ffffff;
// // border-radius: 50%;
// // background: #fff;
// }
// .aside {
// overflow: auto;
// // background: #fff;
// &::-webkit-scrollbar {
// display: none;
// }
// }
// .el-menu-vertical {
// height: calc(100vh - 64px) !important;
// visibility: auto;
// &:not(.el-menu--collapse) {
// width: 220px;
// }
// }
// .el-menu--collapse {
// width: 54px;
// li {
// .el-tooltip,
// .el-submenu__title {
// padding: 0px 15px !important;
// }
// }
// }
// &::-webkit-scrollbar {
// display: none;
// }
// &.main-left {
// width: auto !important;
// }
// &.main-right {
// .admin-title {
// float: left;
// font-size: 16px;
// vertical-align: middle;
// margin-left: 20px;
// img {
// vertical-align: middle;
// }
// &.collapse {
// width: 53px;
// }
// }
// }
// }
// }
// .tilte {
// background: #001529;
// min-height: 64px;
// line-height: 64px;
// background: #002140;
// text-align: center;
// .logoimg {
// width: 30px;
// height: 30px;
// vertical-align: middle;
// background: #fff;
// border-radius: 50%;
// padding: 3px;
// }
// .tit-text {
// display: inline-block;
// color: #fff;
// font-weight: 600;
// font-size: 20px;
// vertical-align: middle;
// }
// }
.screenfull {
display: inline-block;
}
.header-avatar{
display: flex;
justify-content: center;
align-items: center;
}
// .screenfull {
// display: inline-block;
// }
// .header-avatar{
// display: flex;
// justify-content: center;
// align-items: center;
// }
</style>