diff --git a/src/assets/css/element.less b/src/assets/css/element.less new file mode 100644 index 0000000..beb9471 --- /dev/null +++ b/src/assets/css/element.less @@ -0,0 +1,35 @@ +//表格样式 +.el-table { + td.el-table__cell, + th.el-table__cell.is-leaf { + border-bottom: 1px solid #ebeef5; + } + .el-table__header-wrapper, + .el-table__fixed-header-wrapper { + border-top: 1px solid #ebeef5; + } + th.el-table__cell { + background: #f8f8f8 !important; + } + .el-button--text { + padding: 0px; + } + .el-button + .el-button, + .el-checkbox.is-bordered + .el-checkbox.is-bordered { + margin-left: 16px; + } + .deleteText { + color: #f56c6c; + } +} +.el-table::before, +.el-table__fixed-right::before, +.el-table__fixed::before { + height: 0px !important; +} +//分页 +.pageNation { + margin-top: 8px; + display: flex; + justify-content: flex-end; +} diff --git a/src/assets/css/global.less b/src/assets/css/global.less index b26bacd..b841ff4 100644 --- a/src/assets/css/global.less +++ b/src/assets/css/global.less @@ -25,3 +25,10 @@ //阴影 @box-shadow-basic: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + +//网站主题颜色 + +//欣影橙色色 +@orange-color: #f08200; +//电网绿色 +@green-color: #00a096; diff --git a/src/assets/css/theme.less b/src/assets/css/theme.less index b2db8c3..3b18259 100644 --- a/src/assets/css/theme.less +++ b/src/assets/css/theme.less @@ -129,11 +129,11 @@ //绿色主题 .greenStyle { .header { - background: #00a096; + background: @green-color; } .el-menu { - background: #00a096; + background: @green-color; i { color: @color-white !important; @@ -153,23 +153,23 @@ .el-menu-item:not(.is-disabled):focus, .el-menu-item:not(.is-disabled):hover { - color: #00a096; + color: @green-color; background-color: @color-white; border-bottom: 2px solid @color-white; i { - color: #00a096 !important; + color: @green-color !important; } } .el-submenu:focus .el-submenu__title, .el-submenu:hover .el-submenu__title { - color: #00a096 !important; + color: @green-color !important; background-color: @color-white; border-bottom: 2px solid @color-white; i { - color: #00a096 !important; + color: @green-color !important; } } @@ -179,7 +179,7 @@ } .sidebar .el-menu--horizontal .el-menu-item.is-active i { - color: #00a096; + color: @green-color; } .sidebar @@ -187,126 +187,103 @@ .el-submenu.is-active .el-submenu__title > i:first-child { - color: #00a096; + color: @green-color; } .tags-li.active { - border: 1px solid #00a096; - background-color: #00a096; + border: 1px solid @green-color; + background-color: @green-color; } } //橙色主题 .orangeStyle { .header { - background: #f08200; + background: @orange-color; } - .el-menu { - background: #f08200; - - i { - color: @color-white !important; - } - - .el-menu-item { - color: @color-white; - } + .sidebar { + .el-menu { + background: @orange-color; - .el-menu-item.is-active { - color: @color-white; - } + i { + color: @color-white !important; + } - .el-submenu .el-submenu__title { - color: @color-white; - } + .el-menu-item { + color: @color-white; + } - .el-menu-item:not(.is-disabled):focus, - .el-menu-item:not(.is-disabled):hover { - color: #f08200; - background-color: @color-white; - border-bottom: 2px solid @color-white; + .el-menu-item.is-active { + color: @color-white; + } - i { - color: #f08200 !important; + .el-submenu .el-submenu__title { + color: @color-white; } - } - .el-submenu:focus .el-submenu__title, - .el-submenu:hover .el-submenu__title { - color: #f08200 !important; - background-color: @color-white; - border-bottom: 2px solid @color-white; + .el-menu-item:not(.is-disabled):focus, + .el-menu-item:not(.is-disabled):hover { + color: @color-white; + background-color: #f39b33; + border-bottom: 2px solid #f39b33; + i { + color: @color-white !important; + } + } + .el-submenu:focus .el-submenu__title, + .el-submenu:hover .el-submenu__title { + color: @color-white !important; + background-color: #f39b33; + border-bottom: 2px solid #f39b33; + + i { + color: @color-white !important; + } + } - i { - color: #f08200 !important; + .el-submenu.is-active .el-submenu__title { + color: @color-white; } } - - .el-submenu.is-active .el-submenu__title { - color: @color-white; + .el-menu--horizontal > .el-submenu.is-active .el-submenu__title { + background-color: #f39b33; + border-bottom: 2px solid #f39b33; + } + .el-menu--horizontal > .el-menu-item.is-active { + background-color: #f39b33; + border-bottom: 2px solid #f39b33; } - } - .sidebar .el-menu--horizontal .el-menu-item.is-active i { - color: #f08200; - } - - .sidebar .el-menu--horizontal - .el-submenu.is-active - .el-submenu__title - > i:first-child { - color: #f08200; - } - .sideBar { + .el-submenu.is-active + .el-submenu__title + > i:first-child { + color: @orange-color; + } .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { // 设置颜色 color: #fff; - background: #f08200 !important; + background: @orange-color !important; + } + .el-menu--horizontal .el-menu-item.is-active i { + color: @orange-color; } } - .gallery-thumbs .swiper-slide-active { - border: 3px solid #f08200 !important; - } - .tags-li.active { - border: 1px solid #f08200; - background-color: #f08200; + .monitor-container + .sideBar + .el-tree--highlight-current + .el-tree-node.is-current + > .el-tree-node__content { + color: #fff; + background: @orange-color; } -} -//表格样式 - -.el-table { - td.el-table__cell, - th.el-table__cell.is-leaf { - border-bottom: 1px solid #ebeef5; - } - .el-table__header-wrapper, - .el-table__fixed-header-wrapper { - border-top: 1px solid #ebeef5; - } - th.el-table__cell { - background: #f8f8f8 !important; - } - .el-button--text { - padding: 0px; - } - .el-button + .el-button, - .el-checkbox.is-bordered + .el-checkbox.is-bordered { - margin-left: 16px; + .gallery-thumbs .swiper-slide-active { + border: 3px solid @orange-color !important; } - .deleteText { - color: #f56c6c; + .tags-li.active { + border: 1px solid @orange-color; + background-color: @orange-color; } } -.el-table::before, -.el-table__fixed-right::before, -.el-table__fixed::before { - height: 0px !important; -} -.pageNation { - margin-top: 8px; - display: flex; - justify-content: flex-end; -} diff --git a/src/assets/font/iconfont.css b/src/assets/font/iconfont.css new file mode 100644 index 0000000..e068e4b --- /dev/null +++ b/src/assets/font/iconfont.css @@ -0,0 +1,21 @@ +@font-face { + font-family: "iconfont"; /* Project id */ + src: url('iconfont.ttf?t=1681806954677') format('truetype'); +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-dianli:before { + content: "\e649"; +} + +.icon-dianlihangye:before { + content: "\e791"; +} + diff --git a/src/assets/font/iconfont.ttf b/src/assets/font/iconfont.ttf new file mode 100644 index 0000000..09cdb69 Binary files /dev/null and b/src/assets/font/iconfont.ttf differ diff --git a/src/components/common/Header.vue b/src/components/common/Header.vue index 26439a4..9f02cf1 100644 --- a/src/components/common/Header.vue +++ b/src/components/common/Header.vue @@ -18,16 +18,7 @@ :value="item.value" > - - +