|
@@ -76,42 +76,12 @@
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-
|
|
|
- .header-container {
|
|
|
- width: 100%;
|
|
|
- height: 83px;
|
|
|
- background: #191919;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: space-between;
|
|
|
- border-bottom: 1px solid rgba(128,128,128,.3);
|
|
|
- position: fixed;
|
|
|
- z-index: 999;
|
|
|
- }
|
|
|
-
|
|
|
- .header-left-box {
|
|
|
- width: 220px;
|
|
|
- height: 100%;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .header-left-box .header-btn-menu {
|
|
|
- color: #fff;
|
|
|
- font-size: 24px;
|
|
|
- margin-right: 20px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-
|
|
|
- .header-left-box img {
|
|
|
- width: 140px;
|
|
|
- }
|
|
|
-
|
|
|
.header-right-box {
|
|
|
width: 270px;
|
|
|
border-left: 2px solid #595959;
|
|
|
margin: 20px;
|
|
|
- line-height:1.5;
|
|
|
- float:right;
|
|
|
+ line-height: 1.5;
|
|
|
+ float: right;
|
|
|
}
|
|
|
|
|
|
.header-right-box .ivu-icon {
|
|
@@ -126,82 +96,6 @@
|
|
|
border: 2px solid #595959;
|
|
|
}
|
|
|
|
|
|
- .drawer-header {
|
|
|
- height: 83px;
|
|
|
- width: 100%;
|
|
|
- background: #000;
|
|
|
- }
|
|
|
-
|
|
|
- .drawer-header .header-btn-menu {
|
|
|
- color: #fff;
|
|
|
- font-size: 22px;
|
|
|
- margin-right: 20px;
|
|
|
- cursor: pointer;
|
|
|
- background: #afafaf;
|
|
|
- border-radius: 50%;
|
|
|
- padding: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- .drawer-header img {
|
|
|
- width: 140px;
|
|
|
- margin-top: 4px;
|
|
|
- margin-right: 3px;
|
|
|
- }
|
|
|
-
|
|
|
- .drawer-body {
|
|
|
- margin-top: 50px;
|
|
|
- }
|
|
|
-
|
|
|
- .drawer-body .drawer-menu-item {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .drawer-body .drawer-menu-item .drawer-menu-top {
|
|
|
- width: 100%;
|
|
|
- height: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .drawer-body .drawer-menu-item .drawer-menu-top img {
|
|
|
- width: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .drawer-body .drawer-menu-item .drawer-menu-name {
|
|
|
- color: #b5b5b5;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bolder;
|
|
|
- margin-left: 20px;
|
|
|
- margin-top: 7px;
|
|
|
- letter-spacing: 1px;
|
|
|
- }
|
|
|
-
|
|
|
- .drawer-body .drawer-menu-bottom {
|
|
|
- width: 100%;
|
|
|
- padding: 20px 10px;
|
|
|
- margin: 20px 0;
|
|
|
- background-image: linear-gradient(90deg, rgba(30,30,30,0) 0%, rgba(110,110,110,.2) 50%, rgba(110,110,110,.4) 100%);
|
|
|
- }
|
|
|
-
|
|
|
- .drawer-body .drawer-menu-bottom ul {
|
|
|
- list-style: none;
|
|
|
- width: 100%;
|
|
|
- padding-left: 80px;
|
|
|
- }
|
|
|
-
|
|
|
- .drawer-body .drawer-menu-bottom ul li {
|
|
|
- padding: 8px 0;
|
|
|
- width: 100%;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: bold;
|
|
|
- color: #8a8a8a;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-
|
|
|
- .fl-center {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
.fl-around {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
@@ -211,98 +105,45 @@
|
|
|
|
|
|
<style>
|
|
|
|
|
|
- html, body {
|
|
|
- height: 100%;
|
|
|
- margin: 0px;
|
|
|
- padding: 0px;
|
|
|
- }
|
|
|
+ html, body {
|
|
|
+ height: 100%;
|
|
|
+ width:100%;
|
|
|
+ margin: 0px;
|
|
|
+ padding: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #main {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
|
|
|
- #main {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
#main .layout {
|
|
|
- border:none;
|
|
|
- border-radius:0px;
|
|
|
+ border: none;
|
|
|
+ border-radius: 0px;
|
|
|
}
|
|
|
- #content {
|
|
|
- /*width: 100%;
|
|
|
- position: absolute;
|
|
|
- top: 83px;
|
|
|
- left: 0px;
|
|
|
- bottom: 0px;
|
|
|
- overflow-y: auto;
|
|
|
- background: #212121;*/
|
|
|
- height:100%;
|
|
|
- background:#191919;
|
|
|
- }
|
|
|
- /*修改iview抽屉样式*/
|
|
|
- .drawer-container .ivu-drawer-left {
|
|
|
- background: #000;
|
|
|
- font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI','Microsoft JhengHei' !important;
|
|
|
- }
|
|
|
-
|
|
|
- .drawer-container .ivu-drawer-header {
|
|
|
- padding: 0;
|
|
|
- border: none;
|
|
|
- }
|
|
|
-
|
|
|
- .drawer-container .ivu-drawer-content {
|
|
|
- background: #000;
|
|
|
- }
|
|
|
- /*.drawer-container .ivu-drawer-wrap {
|
|
|
- z-index:9999;
|
|
|
- }*/
|
|
|
- .drawer-container .ivu-drawer-body {
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
-
|
|
|
- /*重绘滚动条样式*/
|
|
|
- .scrollstyle::-webkit-scrollbar {
|
|
|
- width: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- .ivu-drawer-body::-webkit-scrollbar-track {
|
|
|
- display: none;
|
|
|
- }
|
|
|
-
|
|
|
- .scrollstyle::-webkit-scrollbar-thumb {
|
|
|
- border-radius: 10px;
|
|
|
- background: #94998a;
|
|
|
- }
|
|
|
-
|
|
|
- .scrollstyle::-webkit-scrollbar-thumb:hover {
|
|
|
- /*background: #555;*/
|
|
|
- }
|
|
|
-
|
|
|
- .scrollstyle::-webkit-scrollbar-button {
|
|
|
- display: none;
|
|
|
- }
|
|
|
|
|
|
- .drawer-container .ivu-menu-dark {
|
|
|
- background: black;
|
|
|
- }
|
|
|
+ #content {
|
|
|
+ height: 100%;
|
|
|
+ background: #191919;
|
|
|
+ }
|
|
|
|
|
|
- .drawer-container .ivu-menu-dark.ivu-menu-vertical .ivu-menu-opened .ivu-menu-submenu-title {
|
|
|
- background: black;
|
|
|
- }
|
|
|
+ /*重绘滚动条样式*/
|
|
|
+ .scrollstyle::-webkit-scrollbar {
|
|
|
+ width: 5px;
|
|
|
+ }
|
|
|
|
|
|
- .drawer-container .ivu-menu-opened .ivu-menu {
|
|
|
- background-image: linear-gradient(to right, black, #2C2C2C);
|
|
|
- }
|
|
|
+ .ivu-drawer-body::-webkit-scrollbar-track {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
|
|
|
- .drawer-container .first-menu {
|
|
|
- color: #b5b5b5;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bolder;
|
|
|
- /*margin-left: 20px;*/
|
|
|
- margin-top: 7px;
|
|
|
- letter-spacing: 1px;
|
|
|
- }
|
|
|
+ .scrollstyle::-webkit-scrollbar-thumb {
|
|
|
+ border-radius: 10px;
|
|
|
+ background: #94998a;
|
|
|
+ }
|
|
|
|
|
|
- .drawer-container .ivu-menu-dark.ivu-menu-vertical .ivu-menu-item:hover, .drawer-container .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title:hover {
|
|
|
- background: black;
|
|
|
- }
|
|
|
+ .scrollstyle::-webkit-scrollbar-button {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
</style>
|
|
|
|
|
|
<style lang="less">
|