perf: 修改 css (#1856)

* perf: 修改 css

* perf: 菜单颜色

* perf: 修改主题

* perf: 统一颜色 css

* perf: 修改 css

* perf: 修改 css

Co-authored-by: ibuler <ibuler@qq.com>

src/components/FormFields/DatetimeRangePicker.vue

@@ -105,7 +105,7 @@ export default {
   .el-input__inner{
     border: 1px solid #dcdee2;
     border-radius: 3px;
-    height: 36px;
+    height: 32x;
   }
   .el-date-editor  ::v-deep  .el-range-separator{
     line-height: 28px;

src/components/FormFields/JsonEditor.vue

@@ -52,6 +52,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+  @import "~@/styles/variables.scss";
   .json-editor {
     &>>> .jsoneditor {
       border: 1px solid #e5e6e7;
@@ -66,8 +67,8 @@ export default {
       display: none;
     }
     &>>> .jsoneditor-menu {
-      background: #1ab394;
+      background: $--color-primary;
-      border-bottom: 1px solid #1ab394;
+      border-bottom: 1px solid $--color-primary;
     }
   }
 </style>

src/components/FormFields/PasswordInput.vue

@@ -47,7 +47,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  @import "~@/styles/element-variables.scss";
+  @import "~@/styles/variables.scss";
   .password-input >>> .Password__badge--error {
     background-color: $--color-danger;
   }

src/components/FormFields/Swicher.vue

@@ -1,8 +1,8 @@
 <template>
   <el-switch
     v-model="iValue"
-    :active-color="activeColor"
     inactive-color="#dcdfe6"
+    :class="type"
     v-bind="$attrs"
     v-on="$listeners"
   />
@@ -26,21 +26,6 @@ export default {
     }
   },
   computed: {
-    activeColor() {
-      // $--color-primary: #1ab394;
-      // $--color-success: #1c84c6;
-      // $--color-info: #23c6c8;
-      // $--color-warning: #f8ac59;
-      // $--color-danger: #ed5565;
-      switch (this.type) {
-        case 'primary':
-          return '#1ab394'
-        case 'danger':
-          return '#ed5565'
-        default:
-          return '#1ab394'
-      }
-    },
     iValue: {
       set: function(newValue) {
         this.$emit('input', newValue)

src/components/Hamburger/index.vue

@@ -21,12 +21,13 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+@import "~@/styles/variables.scss";
 .hamburger {
   display: inline-block;
   vertical-align: middle;
   font-size: 20px;
-  color: rgb(167, 177, 194);
+  color: $menuText;
 }
 .hamburger.is-active {
   transform: rotate(180deg);

src/components/ListTable/TableAction/ImportDialog.vue

@@ -233,7 +233,7 @@ export default {
 </script>
 
 <style lang='scss' scoped>
-  @import "~@/styles/element-variables.scss";
+  @import "~@/styles/variables.scss";
   .error-msg {
     color: $--color-danger;
   }

src/components/ListTable/TableAction/ImportTable.vue

@@ -408,7 +408,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "~@/styles/element-variables.scss";
+@import "~@/styles/variables.scss";
 .summary-item {
   padding: 0 10px
 }

src/components/ListTable/TableAction/index.vue

@@ -127,6 +127,10 @@ export default {
     color: #888;
   }
 
+  .action-search >>> .el-cascader {
+    line-height: 32px !important;
+  }
+
   .right-side-actions {
     display: flex;
     padding-left: 10px;
@@ -146,17 +150,19 @@ export default {
   .datepicker{
     margin-left: 10px;
   }
+  .table-header {
+    line-height: 32px;
+  }
   .left-side {
     float: left;
     display: block;
-    line-height: 36px;
   }
   .right-side {
     float: right;
   }
   .search {
     display: flex;
-    flex-direction: row
+    flex-direction: row;
   }
   .mobile .search {
     display: inherit;
@@ -179,4 +185,8 @@ export default {
   .mobile .right-side {
     padding-top: 5px;
   }
+
+  .filter-field.right-side-item.action-search {
+    height: 34px;
+  }
 </style>

src/components/TableFormatters/DetailFormatter.vue

@@ -1,5 +1,12 @@
 <template>
-  <el-link class="detail" :disabled="disabled" :type="col.type || 'success'" @click="goDetail">{{ iTitle }}</el-link>
+  <el-link
+    class="detail"
+    :disabled="disabled"
+    :type="col.type"
+    @click="goDetail"
+  >
+    {{ iTitle }}
+  </el-link>
 </template>
 
 <script>

src/components/TreeTable/index.vue

@@ -108,13 +108,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "~@/styles/variables";
   .mini-button{
     width: 12px;
     float: right;
     text-align: center;
     padding: 5px 0;
-    background-color: #1ab394;
+    background-color: $--color-primary;
-    border-color: #1ab394;
+    border-color: $--color-primary;
     color: #FFFFFF;
     border-radius: 3px;
     line-height: 1.428;

src/layout/components/AppMain.vue

@@ -32,7 +32,7 @@ export default {
   /*padding: 10px 20px 10px;*/
 }
 .fixed-header+.app-main {
-  padding-top: 55px;
+  padding-top: 50px;
 }
 .hasTagsView {
   .app-main {

src/layout/components/NavHeader/AccountDropdown.vue

@@ -67,8 +67,8 @@ export default {
 
 <style scoped>
   .header-avatar {
-    height: 30px;
+    height: 24px;
-    width: 30px;
+    width: 24px;
     margin-right: 5px;
     vertical-align: middle;
   }

src/layout/components/NavHeader/Organization.vue

@@ -121,7 +121,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~@/styles/element-variables.scss';
+@import '~@/styles/variables.scss';
 
 .org-select {
   padding: 0 10px 0 18px;

src/layout/components/NavHeader/index.vue

@@ -87,20 +87,27 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+  @import "~@/styles/variables.scss";
+  $header-height: 50px;
   .navbar {
     position: relative;
-    height: 55px;
+    height: $header-height;
+    line-height: $header-height;
     overflow: hidden;
     background: #f3f3f4;
+
     .navbar-left {
       float: left;
       .left-item {
-        line-height: 55px;
+        line-height: $header-height;
         display: inline-block;
         vertical-align: middle;
+
         &>>> .el-submenu__title {
           font-family: "open sans","Helvetica Neue",Helvetica,Arial,sans-serif;
-          padding: 0 14px;
+          padding: 0 8px;
+          line-height: $header-height;
+          height: $header-height;
         }
         &>>> .org-select {
           padding: 0;
@@ -118,7 +125,7 @@ export default {
       }
 
       .header-item {
-        line-height: 55px;
+        line-height: $header-height;
         display: inline-block;
         padding-right: 10px;
         padding-left: 10px;
@@ -156,8 +163,8 @@ export default {
     padding: 0 10px!important;
     line-height: 30px;
     border-radius: 4px;
-    border-color: #1ab394;
+    border-color: $--color-primary;
-    background-color: #1ab394;
+    background-color: $--color-primary;
     color: #fff;
     cursor: pointer;
     transition: .2s;

src/layout/components/NavLeft/index.vue

@@ -25,7 +25,7 @@
         >{{ isRouteMeta.title || '' }}</span>
       </div>
     </div>
-    <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-scrollbar class="menu-wrap" wrap-class="scrollbar-wrapper">
       <el-menu
         class="left-menu"
         :default-active="activeMenu"
@@ -58,10 +58,10 @@
 import { mapGetters } from 'vuex'
 import Logo from './Logo'
 import SidebarItem from './SidebarItem'
-import variables from '@/styles/element-variables.scss'
 import Hamburger from '@/components/Hamburger'
 import ViewSwitcher from '../NavHeader/ViewSwitcher'
 import Organization from '../NavHeader/Organization'
+import variables from '@/styles/variables.scss'
 
 export default {
   components: {
@@ -123,9 +123,10 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+  @import "~@/styles/variables.scss";
   .nav-header {
     overflow: hidden;
-    background-image: url('~@/assets/img/header-profile.png');
+    background: $subMenuBg url('~@/assets/img/header-profile.png') no-repeat center center;
   }
 
   .nav-logo {
@@ -155,7 +156,7 @@ export default {
     display: block;
     width: 100%;
     height: 40px;
-    background-color: #293846;
+    background-color: $subMenuBg;
 
     .toggle-bar {
       width: 55px;
@@ -170,7 +171,7 @@ export default {
     }
 
     .toggle-bar:hover {
-      background-color: rgb(59, 76, 91);
+      background-color: $subMenuHover;
     }
 
     .hamburger-container {

src/layout/components/TagsView/index.vue

@@ -200,6 +200,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "~@/styles/variables.scss";
 .tags-view-container {
   height: 34px;
   width: 100%;
@@ -228,9 +229,9 @@ export default {
         margin-right: 15px;
       }
       &.active {
-        background-color: #1AB394;
+        background-color: $--color-primary;
         color: #fff;
-        border-color: #1AB394;
+        border-color: $--color-primary;
         &::before {
           content: "";
           background: #fff;

src/layout/index.vue

@@ -59,7 +59,7 @@ export default {
 
 <style lang="scss" scoped>
   @import "~@/styles/mixin.scss";
-  @import "~@/styles/element-variables.scss";
+  @import "~@/styles/variables.scss";
 
   .app-wrapper {
     @include clearfix;

src/styles/element-ui.scss

@@ -1,4 +1,4 @@
-@import "./element-variables";
+@import "./variables";
 $--font-path: '~element-ui/lib/theme-chalk/fonts';
 @import "~element-ui/packages/theme-chalk/src/index";
 
@@ -101,19 +101,11 @@ td .el-button.el-button--mini {
 }
 
 .el-alert--success.is-light {
-  border: #bce8f1 solid 1px;
+  border: $--color-success-light 1px solid;
 }
 
 .el-alert--info.is-light {
-  border: #bce8f1 solid 1px;
+  border: $--color-info-light 1px solid;
-}
-
-.el-alert--warning.is-light {
-  border: #faebcc solid 1px;
-}
-
-.el-alert--error.is-light {
-  border: #f1dfe2 solid 1px;
 }
 
 .el-alert__content {
@@ -181,7 +173,6 @@ td .el-button.el-button--mini {
   line-height: 34px;
 }
 
-
 .el-select-dropdown__item.selected {
   font-weight: 400;
   color: $--color-text-primary;
@@ -391,11 +382,6 @@ td .el-button.el-button--mini {
   color: #fff;
 }
 
-a {
-  color: $--color-link !important;
-  text-decoration: none;
-}
-
 .el-tag--default.el-tag--dark {
   background-color: #d1dade;
   color: #5e5e5e;

src/styles/element-variables.scss

@@ -1,36 +0,0 @@
-// ElementUI
-$--color-primary: #1ab394;
-$--color-success: #1c84c6;
-$--color-info: #23c6c8;
-$--color-warning: #f8ac59;
-$--color-danger: #ed5565;
-$--font-size-base: 13px;
-$--size-base: 13px;
-
-$--color-link: #1c84c6;
-$--color-link-highlight: #23527c;
-
-$--color-text-primary: #303133;
-$--color-text-regular: #606266;
-
-// Menu
-$menuText: #a7b1c2;
-$menuActiveText: white;
-$menuTextWeight: 600;
-$subMenuActiveText: #f4f4f5;
-$menuBg: #2f4050;
-$menuHover: #293846;
-$subMenuBg: #1f2d3d;
-$subMenuHover: #001528;
-$sideBarWidth: 220px;
-
-:export {
-  menuText: $menuText;
-  menuActiveText: $menuActiveText;
-  subMenuActiveText: $subMenuActiveText;
-  menuBg: $menuBg;
-  menuHover: $menuHover;
-  subMenuBg: $subMenuBg;
-  subMenuHover: $subMenuHover;
-  sideBarWidth: $sideBarWidth;
-}

src/styles/index.scss

@@ -1,6 +1,6 @@
 @import './mixin.scss';
 @import './transition.scss';
-@import './element-variables.scss';
+@import './variables.scss';
 @import './sidebar.scss';
 @import './element-ui.scss';
 @import './menu.scss';

src/styles/menu.scss

@@ -1,10 +1,37 @@
+@import "./variables";
 .left-menu.el-menu {
   .el-menu-item, .el-submenu {
     font-weight: 600;
   }
 
+  .el-submenu, .el-menu-item.submenu-title-noDropdown {
+    background-color: $menuBg;
+    .el-submenu__title {
+      color: $menuText;
+      &:hover {
+        color: $menuActiveText;
+      }
+      i {
+        color: $menuText;
+      }
+    }
+  }
+  .el-menu-item, .el-submenu-sidebar .el-menu-item {
+    background-color: $subMenuBg;
+    color: $menuText;
+    &.is-active{
+      color: $menuActiveText;
+    }
+    &:hover {
+      background-color: $subMenuHover;
+      color: $menuActiveText;
+    }
+    i {
+      color: $menuText;
+    }
+  }
+
    i.fa {
-    width: 13px;
     margin-right: 10px;
   }
 
@@ -48,16 +75,20 @@
   }
 
   li.is-active {
-    border-left: 4px solid #19aa8d;
+    border-left: 4px solid $menuActiveLeft;
+  }
+
+  .el-submenu-sidebar .el-menu-item {
+    background-color: $subMenuBg ;
   }
 
   .el-submenu.is-opened {
-    background-color: #1f2d3d ;
+    background-color: $subMenuBg ;
     .el-submenu__title {
-      background-color: #1f2d3d!important;
+      background-color: $subMenuBg!important;
     }
     & .nest-menu {
-      background-color: #1f2d3d;
+      background-color: $subMenuBg;
     }
   }
 

src/styles/sidebar.scss

@@ -1,4 +1,4 @@
-@import "./element-variables";
+@import "./variables";
 #app {
   .main-container {
     min-height: 100%;
@@ -13,7 +13,7 @@
     background-color: $menuBg;
     height: 100%;
     position: fixed;
-    font-size: 0px;
+    font-size: 0;
     top: 0;
     bottom: 0;
     left: 0;
@@ -101,7 +101,6 @@
 
       .el-tooltip {
         // padding: 0 !important;
-
         .svg-icon {
           margin-left: 20px;
         }
@@ -146,7 +145,7 @@
   // mobile responsive
   .mobile {
     .main-container {
-      margin-left: 0px;
+      margin-left: 0;
     }
 
     .sidebar-container {
@@ -164,7 +163,6 @@
   }
 
   .withoutAnimation {
-
     .main-container,
     .sidebar-container {
       transition: none;
@@ -183,7 +181,6 @@
   .nest-menu .el-submenu-sidebar>.el-submenu__title,
   .el-menu-item {
     &:hover {
-      // you can use $subMenuHover
       background-color: $menuHover !important;
     }
   }

src/styles/themes/classic.scss

@@ -0,0 +1,13 @@
+// ElementUI
+$--color-primary: #1ab394;
+$--color-success: #1c84c6;
+$--color-info: #23c6c8;
+$--color-warning: #f8ac59;
+$--color-danger: #ed5565;
+
+// Menu
+$menuText: #a7b1c2;
+$menuActiveLeft: $--color-primary;
+$menuActiveText: white;
+$subMenuActiveText: #f4f4f5;
+$menuBg: #2f4050;

src/styles/themes/keep-heart-red.scss

@@ -0,0 +1,14 @@
+// ElementUI
+$--color-primary: #b4312b;
+$--color-success: #E98737;
+$--color-info: #f06f06;
+$--color-warning: #f8ac59;
+$--color-danger: #ed5565;
+
+// Menu
+//$menuText: rgb(241, 212, 174);
+$menuBg: #b4312b;
+$menuActiveLeft: rgb(241, 212, 174);
+$menuText: #fff1d9;
+$menuActiveText: white;
+$subMenuActiveText: #f4f4f5;

src/styles/variables.scss

@@ -0,0 +1,25 @@
+@import "./themes/keep-heart-red";
+//@import "./themes/classic";
+
+$--color-black: #000000;
+$--font-size-base: 13px;
+$--size-base: 13px;
+$--color-text-primary: #303133;
+$--color-text-regular: #606266;
+$--color-link: $--color-text-primary;
+$--color-link-highlight: #23527c;
+
+$menuTextWeight: 600;
+$menuHover: mix($--color-black, $menuBg, 10%);
+$subMenuBg: mix($--color-black, $menuBg, 20%);
+$subMenuHover: mix($--color-black, $menuBg, 30%);
+$sideBarWidth: 220px;
+
+:export {
+    color-primary: $--color-primary;
+    color-success: $--color-success;
+    color-info: $--color-info;
+    color-warning: $--color-warning;
+    color-danger: $--color-danger;
+    color-black: $--color-black;
+}

src/views/accounts/ApplicationAccount/ApplicationAccountList.vue

@@ -57,6 +57,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '~@/styles/variables';
 .asset-table ::v-deep .row-clicked, .asset-user-table ::v-deep .row-background-color {
   background-color: #f5f7fa;
 }
@@ -80,8 +81,8 @@ export default {
   margin-right: 10px;
   text-align: center;
   padding: 9px 0;
-  background-color: #1ab394;
+  background-color: $--color-primary;
-  border-color: #1ab394;
+  border-color: $--color-primary;
   color: #FFFFFF;
   border-radius: 5px;
   line-height: 1.428;

src/views/accounts/AssetAccount/AssetAccountList.vue

@@ -53,6 +53,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '~@/styles/variables';
   .asset-table ::v-deep .row-clicked, .asset-user-table ::v-deep .row-background-color {
     background-color: #f5f7fa;
   }
@@ -76,8 +77,8 @@ export default {
     margin-right: 10px;
     text-align: center;
     padding: 9px 0;
-    background-color: #1ab394;
+    background-color: $--color-primary;
-    border-color: #1ab394;
+    border-color: $--color-primary;
     color: #FFFFFF;
     border-radius: 5px;
     line-height: 1.428;

src/views/dashboard/DatesLoginSummary/LoginActivePin.vue

@@ -5,22 +5,22 @@
       <el-col :md="12" :sm="10">
         <echarts :options="userOption" :autoresize="true" />
         <div style="" class="print-display">
-          <div class="circle-icon" style="background: #1ab394;" />
+          <div class="circle-icon active-user" />
           <label>{{ $t('dashboard.ActiveUser') }}</label>
-          <div class="circle-icon" style="background: #1C84C6;" />
+          <div class="circle-icon disabled-user" />
           <label>{{ $t('dashboard.DisabledUser') }}</label>
-          <div class="circle-icon" style="background: #9CC3DA;" />
+          <div class="circle-icon inactive-user" />
           <label>{{ $t('dashboard.InActiveUser') }}</label>
         </div>
       </el-col>
       <el-col :md="12" :sm="10">
         <echarts :options="AssetOption" :autoresize="true" />
         <div style="" class="print-display">
-          <div class="circle-icon" style="background: #1ab394;" />
+          <div class="circle-icon active-asset" />
           <label>{{ $t('dashboard.ActiveAsset') }}</label>
-          <div class="circle-icon" style="background: #1C84C6;" />
+          <div class="circle-icon disabled-asset" />
           <label>{{ $t('dashboard.DisabledAsset') }}</label>
-          <div class="circle-icon" style="background: #9CC3DA;" />
+          <div class="circle-icon inactive-asset" />
           <label>{{ $t('dashboard.InActiveAsset') }}</label>
         </div>
       </el-col>
@@ -32,6 +32,7 @@
 import 'echarts/lib/chart/pie'
 import 'echarts/lib/component/tooltip'
 import 'echarts/lib/component/title'
+import vars from '@/styles/variables.scss'
 
 export default {
   name: 'LoginActivePin',
@@ -64,7 +65,7 @@ export default {
         title: {
           subtext: this.$t('dashboard.User')
         },
-        color: ['#1ab394', '#1C84C6', '#9CC3DA'],
+        color: [vars['color-primary'], vars['color-info'], vars['color-success']],
         tooltip: {
           trigger: 'item',
           formatter: '{a} <br/>{b}: {c} ({d}%)'
@@ -106,7 +107,7 @@ export default {
         title: {
           subtext: this.$t('dashboard.Asset')
         },
-        color: ['#1ab394', '#1C84C6', '#9CC3DA'],
+        color: [vars['color-primary'], vars['color-info'], vars['color-success']],
         tooltip: {
           trigger: 'item',
           formatter: '{a} <br/>{b}: {c} ({d}%)'
@@ -164,7 +165,8 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+@import "~@/styles/variables.scss";
   .echarts {
     width: 100%;
     height: 250px;
@@ -179,6 +181,7 @@ export default {
     -webkit-border-radius: 7px;
     border-radius: 7px;
     display:inline-block;
+    background: $--color-primary;
   }
   @media print {
     .el-col-24{

src/views/dashboard/DatesLoginSummary/LoginMetric.vue

@@ -8,6 +8,7 @@
 <script>
 import 'echarts/lib/chart/line'
 import 'echarts/lib/component/legend'
+import vars from '@/styles/variables.scss'
 export default {
   name: 'LoginMetric',
   props: {
@@ -55,7 +56,7 @@ export default {
           bottom: '3%',
           containLabel: true
         },
-        color: ['#1ab394', '#1C84C6', '#9CC3DA'],
+        color: [vars['color-primary'], vars['color-info'], vars['color-success']],
         xAxis: [
           {
             type: 'category',
@@ -113,7 +114,6 @@ export default {
     },
     getDataUrl() {
       this.dataUrl = this.$refs.echarts.getDataURL({
-
       })
     }
   }

src/views/ops/CommandExecution.vue

@@ -248,14 +248,15 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+  @import "~@/styles/variables.scss";
   .mini-button{
     width: 12px;
     float: right;
     text-align: center;
     padding: 5px 0;
-    background-color: #1ab394;
+    background-color: $--color-primary;
-    border-color: #1ab394;
+    border-color: $--color-primary;
     color: #FFFFFF;
     border-radius: 3px;
   }

src/views/tickets/index.vue

@@ -68,8 +68,4 @@ export default {
 </script>
 
 <style scoped>
-  .primary {
-    background-color: #1ab394;
-  }
-
 </style>