Browse Source

✅feat:Reconstruction of grassland layout

chuzhixin 4 years ago
parent
commit
8e8b2f4e74
2 changed files with 79 additions and 7 deletions
  1. 1 1
      src/styles/themes/glory.scss
  2. 78 6
      src/styles/themes/green.scss

+ 1 - 1
src/styles/themes/glory.scss

@@ -4,7 +4,7 @@
  */
 @charset "utf-8";
 
-.vue-admin-beautiful-theme-glory {
+body.vue-admin-beautiful-theme-glory {
   $base-menu-background: #2e2f34;
   $base-menu-background-active: #f6ca9d;
   $base-color-blue: #f6ca9d;

+ 78 - 6
src/styles/themes/green.scss

@@ -1,10 +1,9 @@
 /**
- * @author chuzhixin 1204505056@qq.com (不想保留author可删除)
- * @description 绿荫操场主题(VIP群专享)
+ * @description 绿荫操场主题
  */
 @charset "utf-8";
 
-.vue-admin-beautiful-theme-green {
+body.vue-admin-beautiful-theme-green {
   $base-menu-background: #16181d;
   $base-menu-background-active: #009688;
   $base-color-blue: #009688;
@@ -12,6 +11,78 @@
   @mixin container {
     background: $base-menu-background !important;
   }
+  /**
+    * 已经覆盖的组件
+    * 导航栏,按钮,开关,文字按钮,输入框,下拉选择,下拉菜单,标签,加载层,文件上传
+    * 分页,多选框,单选按钮,标签页,时间或日期选择,文本域
+    */
+  //---------el覆盖 START-----------
+  @mixin el_border {
+    border-color: $base-color-blue !important;
+  }
+  @mixin el_background {
+    background: $base-color-blue !important;
+  }
+  @mixin el_container {
+    @include el_background;
+    @include el_border;
+  }
+
+  @mixin el_box_show {
+    box-shadow: -1px 0 0 0 $base-color-blue !important;
+  }
+  .el-button--primary,
+  .el-switch.is-checked .el-switch__core,
+  .el-checkbox__input.is-checked .el-checkbox__inner,
+  .el-pagination.is-background .el-pager li:not(.disabled).active,
+  .el-radio__input.is-checked .el-radio__inner,
+  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+    @include el_container;
+  }
+  .el-button--text,
+  .el-checkbox__input.is-checked + .el-checkbox__label,
+  .el-loading-spinner .el-loading-text,
+  .el-loading-spinner i,
+  .el-radio__input.is-checked + .el-radio__label,
+  .el-cascader-node.in-active-path,
+  .el-cascader-node.is-selectable.in-checked-path,
+  .el-cascader-node.is-active,
+  .el-dropdown-menu__item:focus,
+  .el-dropdown-menu__item:not(.is-disabled):hover,
+  .el-tabs__item.is-active,
+  .el-upload--picture-card:hover,
+  .el-tabs__item:hover,
+  .el-upload:focus,
+  .el-radio-button__orig-radio:not(:checked) + .el-radio-button__inner:hover,
+  .el-button--default:not(.el-button--primary):active,
+  .el-button--default:not(.el-button--primary):hover,
+  .el-button--default:not(.el-button--primary):focus,
+  .el-tag:not(.el-tag--danger):not(.el-tag--success):not(.el-tag--info):not(.el-tag--warning) {
+    color: $base-color-blue;
+  }
+  .el-checkbox__inner:hover,
+  .el-select .el-input.is-focus .el-input__inner,
+  .el-input__inner:focus,
+  .el-range-editor.is-active:hover,
+  .el-range-editor.is-activ,
+  .el-upload--picture-card:hover,
+  .el-upload:focus,
+  .el-textarea__inner:focus,
+  .el-button--default:not(.el-button--primary):active,
+  .el-button--default:not(.el-button--primary):hover,
+  .el-button--default:not(.el-button--primary):focus,
+  .el-range-editor.is-active {
+    @include el_border;
+  }
+  .el-tabs__active-bar {
+    @include el_background;
+  }
+
+  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+    @include el_container;
+    @include el_box_show;
+  }
+  //---------el覆盖 END-----------
 
   @mixin active {
     &:hover {
@@ -43,7 +114,8 @@
     }
   }
 
-  .side-bar-container {
+  .side-bar-container,
+  .Fold {
     @include container;
 
     .el-menu-item {
@@ -84,8 +156,8 @@
       .el-tabs__header {
         .el-tabs__item {
           &.is-active {
-            color: $base-color-white !important;
-            background: $base-color-blue !important;
+            color: $base-color-blue !important;
+            background: $base-color-white !important;
             border: 1px solid $base-color-blue !important;
           }
         }