界面修改

src/assets/styles/index.scss

@@ -186,3 +186,19 @@ aside {
 .multiselect--active {
   z-index: 1000 !important;
 }
+
+/**滚动条的宽度*/
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+//滚动条的滑块
+::-webkit-scrollbar-thumb {
+  background-color: #c1c1c1;
+  border-radius: 3px;
+}
+
+// 设置loading-mask
+.el-loading-mask{
+  background-color: rgba(0,0,0,0.2);
+}

src/assets/styles/variables.scss

@@ -12,7 +12,7 @@ $panGreen: #30B08F;
 $menuText:#359AFC;
 $menuActiveText:#fff;
 $menuActiveBg: linear-gradient(90deg, rgba(59, 160, 255, 0.3) 0% 0%, rgba(42,112,177,0.3) 43%, rgba(51, 156, 255, 0) 100%);
-$subMenuActiveText:#339CFF; // https://github.com/ElemeFE/element/issues/12951
+$subMenuActiveText:#339CFF;
 $subMenuActiveBg: linear-gradient(90deg, rgba(59, 160, 255, 0) 0%, rgba(42,112,177,0.3) 43%, rgba(51, 156, 255, 0) 100%);
 
 $menuBg:#031435;
@@ -28,8 +28,6 @@ $mainContainerBorder: 1px solid #113D72;
 
 $inputBorder: #339CFF;
 
-// the :export directive is the magic sauce for webpack
-// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
 :export {
   menuText: $menuText;
   menuActiveText: $menuActiveText;

src/assets/styles/yxk-admin.scss

@@ -22,9 +22,27 @@
     line-height: 30.5px;
     padding: 0 7px 0 7px;
   }
-  .el-button+.el-button {
-    margin-left: 0 !important;
+  // xu
+  .el-button {
+    font-size: 14px;
+    color: #fff;
+    border-color: #339CFF;
+    background-color: transparent;
+    // margin-left: 0 !important;
   }
+  .el-button.is-disabled, 
+  .el-button.is-disabled:hover, 
+  .el-button.is-disabled:focus{
+    border-color: #339CFF;
+    background-color: transparent;
+    color: #339CFF;
+  }
+
+  .el-button:hover, 
+  .el-button:focus{
+    background-color: #02255F;
+  }
+
   .el-select__caret.el-input__icon.el-icon-arrow-up{
     line-height: 30.5px;
   }
@@ -123,6 +141,7 @@
 
 // xu
 // 四角边线
+// 有左右分区时
 .container-main{
   display: flex;
   justify-content: space-between;
@@ -133,20 +152,23 @@
   margin-right: 30px;
 }
 .container-left,
-.container-right{
+.container-right,
+.container-wrap,
+.el-card,
+.header-container-wrap{
   position: relative;
   min-height: 100%;
   padding: 0 !important;
   background-color: $mainContainerBg;
   border: $mainContainerBorder;
-  height: calc(100vh - 210px);
+  min-height: calc(100vh - 210px);
   &::before,
   &::after{
     content: "";
     position: absolute;
     width: 17px;
     height: 17px;
-    z-index: 999;
+    z-index: 99;
   }
   &::before{
     top: -1px;
@@ -162,13 +184,64 @@
   }
 }
 
+.el-card{
+  background-color: transparent;
+  min-height: auto;
+  border-radius: 0;
+  overflow: visible;
+  .el-card__header{
+    background-color: #02255F;
+    border-bottom: none;
+    .role-span{
+      color: #fff;
+    }
+  }
+  .el-card__body{
+    padding: 0;
+    .head-container{
+      padding: 0;
+    }
+    .crud-opts{
+      padding: 20px;
+      border-bottom: 1px solid #113D72;
+    }
+  }
+  .el-button {
+    font-size: 14px;
+    color: #fff;
+    border-color: #339CFF;
+    background-color: transparent;
+    // margin-left: 0 !important;
+  }
+  .el-button--mini{
+    padding: 7px 12px;
+  }
+  .el-button.is-disabled, 
+  .el-button.is-disabled:hover, 
+  .el-button.is-disabled:focus{
+    border-color: #339CFF;
+    background-color: transparent;
+    color: #339CFF;
+  }
+  .el-tree{
+    margin: 20px 0;
+  }
+}
+
+.header-container-wrap{
+  min-height: auto;
+}
+
+// 无左右分区时
+.container-wrap{}
+
 .right-top-line,
 .left-bottom-line{
   display: block;
   position: absolute;
   width: 17px;
   height: 17px;
-  z-index: 999;
+  z-index: 99;
 }
 
 .left-bottom-line{
@@ -186,7 +259,47 @@
 }
 
 .el-tree{
-  background: transparent;
+  background: transparent !important;
+  .el-tree-node:focus>.el-tree-node__content {    
+    background-color: transparent !important;
+  }
+  .is-current>.el-tree-node__content {    
+    background-image: $subMenuActiveBg !important;
+    color: #fff;
+  }
+  .el-tree-node__content{
+    padding: 0 30px !important;
+    height: 40px;
+    color: $subMenuActiveText;
+    background-color: transparent;
+    .el-tree-node__label{
+      font-size: 16px;
+      font-weight: 600;
+    }
+    &:hover{
+      background-color: transparent !important;
+      background-image: $subMenuActiveBg;
+    }
+  }
+  .el-tree-node__expand-icon{
+    font-size: 16px;
+    color: $subMenuActiveText;
+  }
+  .el-tree-node__children{
+    padding: 0 18px;
+    .el-tree-node__content{
+      height: 30px;
+    }
+    .el-tree-node__label{
+      font-size: 14px;
+      font-weight: normal;
+    }
+  }
+
+}
+.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
+  background-color: transparent;
+  background-image: $subMenuActiveBg;
 }
 
 .el-date-editor .el-range-input{
@@ -194,12 +307,112 @@
   color: #fff;
 }
 
+// table
 .el-table{
   background: transparent;
   tr{
     background: transparent;
     .el-table__cell{
+      height: 60px;
+      background-color: transparent;
+    }
+  }
+  
+  .el-table__header-wrapper,
+  .el-table__header{
+    th.el-table__cell{
+      background-color: #02255F;
+      border-top: 1px solid #113D72;
+      border-bottom: none;
+      &>.cell{
+        font-size: 16px;
+        color: #339CFF;
+      }
+    }
+  }
+
+  .el-table__body-wrapper,
+  .el-table__fixed-right{
+    td.el-table__cell{
+      color: #339CFF;
+      font-size: 14px;
+      border-bottom: 1px dashed #113D72;
+    }
+  }
+  &::before, 
+  .el-table--group::after, 
+  .el-table--border::after,
+  .el-table__fixed::before, 
+  .el-table__fixed-right::before{
+    background-color: transparent;
+  }
+  
+  .el-checkbox__input.is-checked .el-checkbox__inner,
+  .el-checkbox__input.is-disabled .el-checkbox__inner{
+    border-color: #339CFF;
+    background: transparent;
+    &::after{
+      border-color: #339CFF;
+    }
+  }
+
+  .el-table__body tr.hover-row > td, 
+  .el-table__body tr.hover-row.current-row > td, 
+  .el-table__body tr.hover-row.el-table__row--striped > td, 
+  .el-table__body tr.hover-row.el-table__row--striped.current-row > td {
+    color: #fff;
+    background-color: #13439E;
+    .el-checkbox__input.is-checked .el-checkbox__inner{
+      background: #fff;
+      border-color: #fff;
+    }
+  }
+}
+.el-table__body tr.el-table__row:hover>td.el-table__cell,
+.el-table__body tr.el-table__row:focus>td.el-table__cell,
+.el-table__body tr.current-row:hover>td.el-table__cell, 
+.el-table__body tr.current-row:focus>td.el-table__cell{
+  color: #fff;
+  background-color: #13439E;
+  .el-checkbox__input.is-checked .el-checkbox__inner{
+    background: #fff;
+    border-color: #fff;
+  }
+}
+
+.el-table__body tr.current-row>td.el-table__cell{
+  background-color: transparent;
+}
+
+.el-checkbox__inner{
+  background: transparent;
+  border-color: #339CFF;
+}
+
+.el-icon-arrow-right:before{
+  color: #fff;
+}
+
+
+// 分页
+.el-pagination{
+  padding: 2px 10px;
+  margin: 10px 0 !important;
+  .el-pagination__total{
+    color: #fff;
+  }
+  button{
+    background-color: transparent;
+    &:disabled{
       background-color: transparent;
     }
   }
+  .el-pager li.active{
+    color: #fff;
+    background-color: transparent;
+  }
+  .el-select .el-input .el-input__inner{
+    background-color: transparent;
+    color: #fff;
+  }
 }

src/components/Crud/CRUD.operation.vue

@@ -3,35 +3,32 @@
     <span class="crud-opts-left">
       <!--左侧插槽-->
       <slot name="left" />
+      <!-- type="primary" -->
       <el-button
         v-if="crud.optShow.add"
         v-permission="permission.add"
-        class="filter-item"
         size="mini"
-        type="primary"
         icon="el-icon-plus"
         @click="crud.toAdd"
       >
         新增
       </el-button>
+      <!-- type="success" -->
       <el-button
         v-if="crud.optShow.edit"
         v-permission="permission.edit"
-        class="filter-item"
         size="mini"
-        type="success"
         icon="el-icon-edit"
         :disabled="crud.selections.length !== 1"
         @click="crud.toEdit(crud.selections[0])"
       >
         修改
       </el-button>
+      <!-- type="danger" -->
       <el-button
         v-if="crud.optShow.del"
         slot="reference"
         v-permission="permission.del"
-        class="filter-item"
-        type="danger"
         icon="el-icon-delete"
         size="mini"
         :loading="crud.delAllLoading"
@@ -40,13 +37,13 @@
       >
         删除
       </el-button>
+      <!-- type="warning" -->
       <el-button
         v-if="crud.optShow.download"
         :loading="crud.downloadLoading"
         :disabled="!crud.data.length"
-        class="filter-item"
         size="mini"
-        type="warning"
+
         icon="el-icon-download"
         @click="crud.doExport"
       >导出</el-button>

src/layout/components/AppMain.vue

@@ -28,12 +28,16 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+  @import "~@/assets/styles/mixin.scss";
+  @import "~@/assets/styles/variables.scss";
 .app-main {
   /* 100= navbar  100  */
   min-height: calc(100vh - 150px);
   width: 100%;
+  margin-top: 50px;
   position: relative;
   overflow: hidden;
+  background: $mainContainerBg;
 }
 
 .fixed-header+.app-main {

src/layout/index.vue

@@ -125,9 +125,15 @@ export default {
   }
 
   .main-breadcrumb{
+    position: fixed;
+    top: 100px;
+    left: calc(100% - $sideBarWidth);
     display: flex;
     justify-content:flex-start;
+    width: 100%;
+    background-color: $mainContainerBg;
     box-shadow: 0px 0px 6px 1px rgba(15,164,222,0.16);
+    z-index: 100;
     .hamburger-container {
       line-height: 46px;
       height: 100%;

src/views/archivesConfig/dict/dictDetail.vue

@@ -5,7 +5,7 @@
       <div class="head-container">
         <crudOperation :permission="permission">
           <template v-slot:left>
-            <el-button v-permission="permission.add" class="filter-item" size="mini" type="primary" icon="el-icon-plus" :disabled="!activeAddBtn" @click="crud.toAdd">新增</el-button>
+            <el-button v-permission="permission.add" size="mini" type="primary" icon="el-icon-plus" :disabled="!activeAddBtn" @click="crud.toAdd">新增</el-button>
           </template>
         </crudOperation>
       </div>

src/views/monitor/log/errorLog.vue

@@ -1,11 +1,12 @@
 <template>
-  <div class="app-container">
+  <div class="app-container  container-wrap">
+    <span class="right-top-line" />
+    <span class="left-bottom-line" />
     <div class="head-container">
       <Search />
       <crudOperation>
         <el-button
           slot="left"
-          class="filter-item"
           type="danger"
           icon="el-icon-delete"
           size="mini"

src/views/monitor/log/index.vue

@@ -1,11 +1,12 @@
 <template>
-  <div class="app-container">
+  <div class="app-container  container-wrap">
+    <span class="right-top-line" />
+    <span class="left-bottom-line" />
     <div class="head-container">
       <Search />
       <crudOperation>
         <el-button
           slot="left"
-          class="filter-item"
           type="danger"
           icon="el-icon-delete"
           size="mini"

src/views/system/dept/index.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="app-container">
+  <div class="app-container  container-wrap">
+    <span class="right-top-line" />
+    <span class="left-bottom-line" />
     <!--工具栏-->
     <div class="head-container">
       <div v-if="crud.props.searchToggle">

src/views/system/job/index.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="app-container">
+  <div class="app-container  container-wrap">
+    <span class="right-top-line" />
+    <span class="left-bottom-line" />
     <!--工具栏-->
     <div class="head-container">
       <eHeader :dict="dict" :permission="permission" />

src/views/system/menu/index.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="app-container">
+  <div class="app-container container-wrap">
+    <span class="right-top-line" />
+    <span class="left-bottom-line" />
     <!--工具栏-->
     <div class="head-container">
       <div v-if="crud.props.searchToggle">
@@ -133,7 +135,7 @@
           <span v-else>是</span>
         </template>
       </el-table-column>
-      <el-table-column prop="createTime" label="创建日期" width="135px">
+      <el-table-column prop="createTime" label="创建日期" width="150px">
         <template slot-scope="scope">
           <div>{{ scope.row.createTime | parseTime }}</div>
         </template>

src/views/system/role/index.vue

@@ -50,8 +50,10 @@
     </el-dialog>
     <el-row :gutter="15">
       <!--角色管理-->
-      <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="17" style="margin-bottom: 10px">
+      <el-col :xs="15" :sm="17" :md="18" :lg="19" :xl="19" style="margin-bottom: 10px">
         <el-card class="box-card" shadow="never">
+          <span class="right-top-line" />
+          <span class="left-bottom-line" />
           <div slot="header" class="clearfix">
             <span class="role-span">角色列表</span>
           </div>
@@ -81,8 +83,10 @@
         </el-card>
       </el-col>
       <!-- 菜单授权 -->
-      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="7">
+      <el-col :xs="9" :sm="7" :md="6" :lg="5" :xl="5">
         <el-card class="box-card" shadow="never">
+          <span class="right-top-line" />
+          <span class="left-bottom-line" />
           <div slot="header" class="clearfix">
             <el-tooltip class="item" effect="dark" content="选择指定角色分配菜单" placement="top">
               <span class="role-span">菜单分配</span>
@@ -94,7 +98,6 @@
               icon="el-icon-check"
               size="mini"
               style="float: right; padding: 6px 9px"
-              type="primary"
               @click="saveMenu"
             >保存</el-button>
           </div>
@@ -351,6 +354,9 @@ export default {
 </style>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+.head-container{
+  padding: 0 0 20px 0;
+}
  ::v-deep .el-input-number .el-input__inner {
     text-align: left;
   }

src/views/system/user/center.vue

@@ -3,10 +3,12 @@
     <el-row :gutter="20">
       <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="5" style="margin-bottom: 10px">
         <el-card class="box-card">
+          <span class="right-top-line" />
+          <span class="left-bottom-line" />
           <div slot="header" class="clearfix">
-            <span>个人信息</span>
+            <span class="title">个人信息</span>
           </div>
-          <div>
+          <div class="user-content">
             <div style="text-align: center">
               <div class="el-upload">
                 <img :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar" title="点击上传头像" class="avatar" @click="toggleShow">
@@ -37,7 +39,9 @@
       </el-col>
       <el-col :xs="24" :sm="24" :md="16" :lg="18" :xl="19">
         <!--    用户资料    -->
-        <el-card class="box-card">
+        <el-card class="box-card user-info-right">
+          <span class="right-top-line" />
+          <span class="left-bottom-line" />
           <el-tabs v-model="activeName" @tab-click="handleClick">
             <el-tab-pane label="用户资料" name="first">
               <el-form ref="form" :model="form" :rules="rules" style="margin-top: 10px;" size="small" label-width="65px">
@@ -218,4 +222,40 @@ export default {
       }
     }
   }
+  .user-content{
+    padding: 20px;
+    color: #fff;
+    .svg-icon{
+          position: relative;
+          left: -100px;
+          filter: drop-shadow(#fff 100px 0);
+        }
+  }
+  .title{
+    color: #fff;
+  }
+  .user-info-right{
+    padding: 20px !important;
+    .el-tabs__item{
+      font-size: 16px;
+      color: #fff;
+    }
+    .el-form{
+      .el-form-item__label{
+        color: #339CFF;
+      }
+      .el-input__inner{
+        color: #fff;
+        border: 1px solid #339CFF;
+        background: transparent;
+      }
+      .el-radio{
+        color: #fff;
+      }
+      .el-button{
+        color: #fff;
+        background: #3A99FD;
+      }
+    }
+  }
 </style>