样式ui

src/assets/icons/svg/刷新.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1663055880128" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2371" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M960 416V192l-73.056 73.056a447.712 447.712 0 0 0-373.6-201.088C265.92 63.968 65.312 264.544 65.312 512S265.92 960.032 513.344 960.032a448.064 448.064 0 0 0 415.232-279.488 38.368 38.368 0 1 0-71.136-28.896 371.36 371.36 0 0 1-344.096 231.584C308.32 883.232 142.112 717.024 142.112 512S308.32 140.768 513.344 140.768c132.448 0 251.936 70.08 318.016 179.84L736 416h224z" p-id="2372" fill="#bfbfbf"></path></svg>

src/assets/styles/element-ui.scss

@@ -1,84 +1,91 @@
 // cover some element-ui styles
-
 .el-breadcrumb__inner,
 .el-breadcrumb__inner a {
-  font-weight: 400 !important;
+    font-weight: 400 !important;
 }
 
 .el-upload {
-  input[type="file"] {
-    display: none !important;
-  }
+    input[type="file"] {
+        display: none !important;
+    }
 }
 
 .el-upload__input {
-  display: none;
+    display: none;
 }
 
 .cell {
-  .el-tag {
-    margin-right: 0px;
-  }
+    .el-tag {
+        margin-right: 0px;
+    }
 }
 
 .small-padding {
-  .cell {
-    padding-left: 5px;
-    padding-right: 5px;
-  }
+    .cell {
+        padding-left: 5px;
+        padding-right: 5px;
+    }
 }
 
 .fixed-width {
-  .el-button--mini {
-    padding: 7px 10px;
-    width: 60px;
-  }
+    .el-button--mini {
+        padding: 7px 10px;
+        width: 60px;
+    }
 }
 
 .status-col {
-  .cell {
-    padding: 0 10px;
-    text-align: center;
-
-    .el-tag {
-      margin-right: 0px;
+    .cell {
+        padding: 0 10px;
+        text-align: center;
+        .el-tag {
+            margin-right: 0px;
+        }
     }
-  }
 }
 
 // to fixed https://github.com/ElemeFE/element/issues/2461
 .el-dialog {
-  transform: none;
-  left: 0;
-  position: relative;
-  margin: 0 auto;
+    transform: none;
+    left: 0;
+    position: relative;
+    margin: 0 auto;
 }
 
 // refine element ui upload
 .upload-container {
-  .el-upload {
-    width: 100%;
-
-    .el-upload-dragger {
-      width: 100%;
-      height: 200px;
+    .el-upload {
+        width: 100%;
+        .el-upload-dragger {
+            width: 100%;
+            height: 200px;
+        }
     }
-  }
 }
 
 // dropdown
 .el-dropdown-menu {
-  a {
-    display: block
-  }
+    a {
+        display: block
+    }
 }
 
 // fix date-picker ui bug in filter-item
 .el-range-editor.el-input__inner {
-  display: inline-flex !important;
+    display: inline-flex !important;
 }
 
 // to fix el-date-picker css style
 .el-range-separator {
-  box-sizing: content-box;
+    box-sizing: content-box;
+}
+
+.el-input__inner:hover {
+    border: 1px solid #ff3b30 !important;
+    box-shadow: 0px 0px 2px #ff3b30;
+    color: #ff3b30 !important;
+}
+
+.el-form-item {
+    margin-bottom: 10px;
 }

src/assets/styles/element-variables.scss

@@ -3,29 +3,26 @@
 * So I modified the default color and you can modify it to your liking.
 **/
 
+
 /* theme color */
-$--color-primary: #1890ff;
+
+$--color-primary: #D7000F;
 $--color-success: #13ce66;
 $--color-warning: #ffba00;
 $--color-danger: #ff4949;
 // $--color-info: #1E1E1E;
-
 $--button-font-weight: 400;
-
 // $--color-text-regular: #1f2d3d;
-
 $--border-color-light: #dfe4ed;
 $--border-color-lighter: #e6ebf5;
-
 $--table-border:1px solid#dfe6ec;
 
 /* icon font path, required */
-$--font-path: '~element-ui/lib/theme-chalk/fonts';
 
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
 @import "~element-ui/packages/theme-chalk/src/index";
-
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
 :export {
-  theme: $--color-primary;
+    theme: $--color-primary;
 }

src/assets/styles/index.scss

@@ -4,188 +4,211 @@
 @import './element-ui.scss';
 @import './sidebar.scss';
 @import './btn.scss';
-
 body {
-  height: 100%;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+    height: 100%;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
 }
 
 label {
-  font-weight: 700;
+    font-weight: 700;
 }
 
 html {
-  height: 100%;
-  box-sizing: border-box;
+    height: 100%;
+    box-sizing: border-box;
 }
 
 #app {
-  height: 100%;
+    height: 100%;
 }
 
 *,
 *:before,
 *:after {
-  box-sizing: inherit;
+    box-sizing: inherit;
 }
 
 .no-padding {
-  padding: 0px !important;
+    padding: 0px !important;
 }
 
 .padding-content {
-  padding: 4px 0;
+    padding: 4px 0;
 }
 
 a:focus,
 a:active {
-  outline: none;
+    outline: none;
 }
 
 a,
 a:focus,
 a:hover {
-  cursor: pointer;
-  color: inherit;
-  text-decoration: none;
+    cursor: pointer;
+    color: inherit;
+    text-decoration: none;
 }
 
 div:focus {
-  outline: none;
+    outline: none;
 }
 
 .fr {
-  float: right;
+    float: right;
 }
 
 .fl {
-  float: left;
+    float: left;
 }
 
 .pr-5 {
-  padding-right: 5px;
+    padding-right: 5px;
 }
 
 .pl-5 {
-  padding-left: 5px;
+    padding-left: 5px;
 }
 
 .block {
-  display: block;
+    display: block;
 }
 
 .pointer {
-  cursor: pointer;
+    cursor: pointer;
 }
 
 .inlineBlock {
-  display: block;
+    display: block;
 }
 
 .clearfix {
-  &:after {
-    visibility: hidden;
-    display: block;
-    font-size: 0;
-    content: " ";
-    clear: both;
-    height: 0;
-  }
+    &:after {
+        visibility: hidden;
+        display: block;
+        font-size: 0;
+        content: " ";
+        clear: both;
+        height: 0;
+    }
 }
 
 aside {
-  background: #eef1f6;
-  padding: 8px 24px;
-  margin-bottom: 20px;
-  border-radius: 2px;
-  display: block;
-  line-height: 32px;
-  font-size: 16px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-  color: #2c3e50;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  a {
-    color: #337ab7;
-    cursor: pointer;
-
-    &:hover {
-      color: rgb(32, 160, 255);
+    background: #eef1f6;
+    padding: 8px 24px;
+    margin-bottom: 20px;
+    border-radius: 2px;
+    display: block;
+    line-height: 32px;
+    font-size: 16px;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+    color: #2c3e50;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    a {
+        color: #337ab7;
+        cursor: pointer;
+        &:hover {
+            color: rgb(32, 160, 255);
+        }
     }
-  }
 }
 
 //main-container全局样式
 .app-container {
-  padding: 20px;
+    // padding: 20px;
+    background: #fff;
+    position: relative;
+    margin: 15px;
+    min-height: calc(100vh - 80px);
+    padding: 15px;
 }
 
 .components-container {
-  margin: 30px 50px;
-  position: relative;
+    margin: 30px 50px;
+    position: relative;
 }
 
 .pagination-container {
-  margin-top: 30px;
+    margin-top: 30px;
 }
 
 .text-center {
-  text-align: center
+    text-align: center
 }
 
 .sub-navbar {
-  height: 50px;
-  line-height: 50px;
-  position: relative;
-  width: 100%;
-  text-align: right;
-  padding-right: 20px;
-  transition: 600ms ease position;
-  background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
-
-  .subtitle {
-    font-size: 20px;
-    color: #fff;
-  }
-
-  &.draft {
-    background: #d0d0d0;
-  }
-
-  &.deleted {
-    background: #d0d0d0;
-  }
+    height: 50px;
+    line-height: 50px;
+    position: relative;
+    width: 100%;
+    text-align: right;
+    padding-right: 20px;
+    transition: 600ms ease position;
+    background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
+    .subtitle {
+        font-size: 20px;
+        color: #fff;
+    }
+    &.draft {
+        background: #d0d0d0;
+    }
+    &.deleted {
+        background: #d0d0d0;
+    }
 }
 
 .link-type,
 .link-type:focus {
-  color: #337ab7;
-  cursor: pointer;
-
-  &:hover {
-    color: rgb(32, 160, 255);
-  }
+    color: #337ab7;
+    cursor: pointer;
+    &:hover {
+        color: rgb(32, 160, 255);
+    }
 }
 
 .filter-container {
-  padding-bottom: 10px;
-
-  .filter-item {
-    display: inline-block;
-    vertical-align: middle;
-    margin-bottom: 10px;
-  }
+    padding-bottom: 10px;
+    .filter-item {
+        display: inline-block;
+        vertical-align: middle;
+        margin-bottom: 10px;
+    }
 }
 
 //refine vue-multiselect plugin
 .multiselect {
-  line-height: 16px;
+    line-height: 16px;
 }
 
 .multiselect--active {
-  z-index: 1000 !important;
+    z-index: 1000 !important;
+}
+
+.lans {
+    color: #016de7;
+}
+
+.lvs {
+    color: #1abc5e;
+}
+
+.chengs {
+    color: #ff9500;
+}
+
+.hongs {
+    color: #ff3b30;
+}
+
+.right {
+    float: right;
+}
+
+.el-table--border {
+    border: 1px solid #dfe6ec !important;
+    //  border-bottom: 1px solid #dfe6ec !important;
+    border-right: none !important;
 }

src/assets/styles/sidebar.scss

@@ -1,215 +1,180 @@
 #app {
-
-  .main-container {
-    min-height: 100%;
-    transition: margin-left .28s;
-    margin-left: $sideBarWidth;
-    position: relative;
-  }
-
-  .sidebar-container {
-    transition: width 0.28s;
-    width: $sideBarWidth !important;
-    background-color: $menuBg;
-    height: 100%;
-    position: fixed;
-    font-size: 0px;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 1001;
-    overflow: hidden;
-
-    // reset element-ui css
-    .horizontal-collapse-transition {
-      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
-    }
-
-    .scrollbar-wrapper {
-      overflow-x: hidden !important;
-    }
-
-    .el-scrollbar__bar.is-vertical {
-      right: 0px;
-    }
-
-    .el-scrollbar {
-      height: 100%;
-    }
-
-    &.has-logo {
-      .el-scrollbar {
-        height: calc(100% - 50px);
-      }
-    }
-
-    .is-horizontal {
-      display: none;
-    }
-
-    a {
-      display: inline-block;
-      width: 100%;
-      overflow: hidden;
-    }
-
-    .svg-icon {
-      margin-right: 16px;
-    }
-
-    .el-menu {
-      border: none;
-      height: 100%;
-      width: 100% !important;
-    }
-
-    .el-menu-item, .el-submenu__title {
-      overflow: hidden !important;
-      text-overflow: ellipsis !important;
-      white-space: nowrap !important;
-    }
-
-    // menu hover
-    .submenu-title-noDropdown,
-    .el-submenu__title {
-      &:hover {
-        background-color: $menuHover !important;
-      }
-    }
-
-    .is-active>.el-submenu__title {
-      color: $subMenuActiveText !important;
-    }
-
-    & .nest-menu .el-submenu>.el-submenu__title,
-    & .el-submenu .el-menu-item {
-      min-width: $sideBarWidth !important;
-      background-color: $subMenuBg !important;
-
-      &:hover {
-        background-color: $subMenuHover !important;
-      }
-    }
-  }
-
-  .hideSidebar {
-    .sidebar-container {
-      width: 54px !important;
-    }
-
     .main-container {
-      margin-left: 54px;
+        min-height: 100%;
+        transition: margin-left .28s;
+        margin-left: $sideBarWidth;
+        position: relative;
     }
-
-    .submenu-title-noDropdown {
-      padding: 0 !important;
-      position: relative;
-
-      .el-tooltip {
-        padding: 0 !important;
-
-        .svg-icon {
-          margin-left: 20px;
+    .sidebar-container {
+        transition: width 0.28s;
+        width: $sideBarWidth !important;
+        background-color: $menuBg;
+        height: 100%;
+        position: fixed;
+        font-size: 0px;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 1001;
+        overflow: hidden;
+        // reset element-ui css
+        .horizontal-collapse-transition {
+            transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
+        }
+        .scrollbar-wrapper {
+            overflow-x: hidden !important;
+        }
+        .el-scrollbar__bar.is-vertical {
+            right: 0px;
+        }
+        .el-scrollbar {
+            height: 100%;
+        }
+        &.has-logo {
+            .el-scrollbar {
+                height: calc(100% - 50px);
+            }
+        }
+        .is-horizontal {
+            display: none;
+        }
+        a {
+            display: inline-block;
+            width: 100%;
+            overflow: hidden;
         }
-      }
-    }
-
-    .el-submenu {
-      overflow: hidden;
-
-      &>.el-submenu__title {
-        padding: 0 !important;
-
         .svg-icon {
-          margin-left: 20px;
+            margin-right: 16px;
         }
-
-        .el-submenu__icon-arrow {
-          display: none;
+        .el-menu {
+            border: none;
+            height: 100%;
+            width: 100% !important;
+        }
+        .el-menu-item,
+        .el-submenu__title {
+            overflow: hidden !important;
+            text-overflow: ellipsis !important;
+            white-space: nowrap !important;
+        }
+        // menu hover
+        .submenu-title-noDropdown,
+        .el-submenu__title {
+            &:hover {
+                background-color: $subMenuHover !important;
+                color: #fff !important;
+            }
+        }
+        .is-active>.el-submenu__title {
+            color: $subMenuActiveText !important;
+        }
+        & .nest-menu .el-submenu>.el-submenu__title,
+        & .el-submenu .el-menu-item {
+            min-width: $sideBarWidth !important;
+            background-color: $subMenuBg !important;
+            &:hover {
+                background-color: $subMenuHover !important;
+            }
         }
-      }
     }
-
-    .el-menu--collapse {
-      .el-submenu {
-        &>.el-submenu__title {
-          &>span {
-            height: 0;
-            width: 0;
+    .hideSidebar {
+        .sidebar-container {
+            width: 54px !important;
+        }
+        .main-container {
+            margin-left: 54px;
+        }
+        .submenu-title-noDropdown {
+            padding: 0 !important;
+            position: relative;
+            .el-tooltip {
+                padding: 0 !important;
+                .svg-icon {
+                    margin-left: 20px;
+                }
+            }
+        }
+        .el-submenu {
             overflow: hidden;
-            visibility: hidden;
-            display: inline-block;
-          }
+            &>.el-submenu__title {
+                padding: 0 !important;
+                .svg-icon {
+                    margin-left: 20px;
+                }
+                .el-submenu__icon-arrow {
+                    display: none;
+                }
+            }
+        }
+        .el-menu--collapse {
+            .el-submenu {
+                &>.el-submenu__title {
+                    &>span {
+                        height: 0;
+                        width: 0;
+                        overflow: hidden;
+                        visibility: hidden;
+                        display: inline-block;
+                    }
+                }
+            }
         }
-      }
-    }
-  }
-
-  .el-menu--collapse .el-menu .el-submenu {
-    min-width: $sideBarWidth !important;
-  }
-
-  // mobile responsive
-  .mobile {
-    .main-container {
-      margin-left: 0px;
     }
-
-    .sidebar-container {
-      transition: transform .28s;
-      width: $sideBarWidth !important;
+    .el-menu--collapse .el-menu .el-submenu {
+        min-width: $sideBarWidth !important;
     }
-
-    &.hideSidebar {
-      .sidebar-container {
-        pointer-events: none;
-        transition-duration: 0.3s;
-        transform: translate3d(-$sideBarWidth, 0, 0);
-      }
+    // mobile responsive
+    .mobile {
+        .main-container {
+            margin-left: 0px;
+        }
+        .sidebar-container {
+            transition: transform .28s;
+            width: $sideBarWidth !important;
+        }
+        &.hideSidebar {
+            .sidebar-container {
+                pointer-events: none;
+                transition-duration: 0.3s;
+                transform: translate3d(-$sideBarWidth, 0, 0);
+            }
+        }
     }
-  }
-
-  .withoutAnimation {
-
-    .main-container,
-    .sidebar-container {
-      transition: none;
+    .withoutAnimation {
+        .main-container,
+        .sidebar-container {
+            transition: none;
+        }
     }
-  }
 }
 
 // when menu collapsed
 .el-menu--vertical {
-  &>.el-menu {
-    .svg-icon {
-      margin-right: 16px;
-    }
-  }
-
-  .nest-menu .el-submenu>.el-submenu__title,
-  .el-menu-item {
-    &:hover {
-      // you can use $subMenuHover
-      background-color: $menuHover !important;
-    }
-  }
-
-  // the scroll bar appears when the subMenu is too long
-  >.el-menu--popup {
-    max-height: 100vh;
-    overflow-y: auto;
-
-    &::-webkit-scrollbar-track-piece {
-      background: #d3dce6;
+    &>.el-menu {
+        .svg-icon {
+            margin-right: 16px;
+        }
     }
-
-    &::-webkit-scrollbar {
-      width: 6px;
+    .nest-menu .el-submenu>.el-submenu__title,
+    .el-menu-item {
+        &:hover {
+            // you can use $subMenuHover
+            background-color: $menuHover !important;
+        }
     }
-
-    &::-webkit-scrollbar-thumb {
-      background: #99a9bf;
-      border-radius: 20px;
+    // the scroll bar appears when the subMenu is too long
+    >.el-menu--popup {
+        max-height: 100vh;
+        overflow-y: auto;
+        &::-webkit-scrollbar-track-piece {
+            background: #d3dce6;
+        }
+        &::-webkit-scrollbar {
+            width: 6px;
+        }
+        &::-webkit-scrollbar-thumb {
+            background: #99a9bf;
+            border-radius: 20px;
+        }
     }
-  }
 }

src/assets/styles/variables.scss

@@ -7,29 +7,24 @@ $green: #30B08F;
 $tiffany: #4AB7BD;
 $yellow:#FEC171;
 $panGreen: #30B08F;
-
 // sidebar
 $menuText:#bfcbd9;
 $menuActiveText:#409EFF;
 $subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951
-
-$menuBg:#304156;
-$menuHover:#263445;
-
+$menuBg:#161523;
+$menuHover:#D7000F;
 $subMenuBg:#1f2d3d;
-$subMenuHover:#001528;
-
+$subMenuHover:#D7000F;
 $sideBarWidth: 200px;
-
 // 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;
-  subMenuActiveText: $subMenuActiveText;
-  menuBg: $menuBg;
-  menuHover: $menuHover;
-  subMenuBg: $subMenuBg;
-  subMenuHover: $subMenuHover;
-  sideBarWidth: $sideBarWidth;
+    menuText: $menuText;
+    menuActiveText: $menuActiveText;
+    subMenuActiveText: $subMenuActiveText;
+    menuBg: $menuBg;
+    menuHover: $menuHover;
+    subMenuBg: $subMenuBg;
+    subMenuHover: $subMenuHover;
+    sideBarWidth: $sideBarWidth;
 }

src/layout/components/AppMain.vue

@@ -29,6 +29,7 @@ export default {
   width: 100%;
   position: relative;
   overflow: hidden;
+  background: #f4f4f4;
 }
 
 .fixed-header+.app-main {

src/layout/components/Navbar.vue

@@ -28,20 +28,10 @@
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
           {{$store.state.user.nickName}}
-          <!-- <img :src="avatar" class="user-avatar"> -->
-          <i class="el-icon-caret-bottom" />
         </div>
-        <el-dropdown-menu slot="dropdown">
-          <!-- <router-link to="/user/profile">
-            <el-dropdown-item>个人中心</el-dropdown-item>
-          </router-link> -->
-          <!-- <el-dropdown-item @click.native="setting = true">
-            <span>布局设置</span>
-          </el-dropdown-item> -->
-          <el-dropdown-item divided @click.native="logout">
-            <span>退出登录</span>
-          </el-dropdown-item>
-        </el-dropdown-menu>
+        <div class="logout"  @click="logout">
+          <span>安全退出</span>
+        </div>
       </el-dropdown>
     </div>
   </div>
@@ -182,12 +172,13 @@ export default {
     }
 
     .avatar-container {
-      margin-right: 30px;
-
+      margin-right: 10px;
+      font-size: 14px;
       .avatar-wrapper {
-        margin-top: 5px;
+        margin-top: 0px;
         position: relative;
-
+        display: inline-block;
+        cursor: default;
         .user-avatar {
           cursor: pointer;
           width: 40px;
@@ -196,13 +187,19 @@ export default {
         }
 
         .el-icon-caret-bottom {
-          cursor: pointer;
+
           position: absolute;
           right: -20px;
           top: 25px;
           font-size: 12px;
         }
       }
+      .logout{
+        margin: 0px 0 0 20px;
+        position: relative;
+        display: inline-block;
+        z-index: 1;
+      }
     }
   }
 }

src/layout/components/Sidebar/SidebarItem.vue

@@ -91,3 +91,31 @@ export default {
   }
 }
 </script>
+<style lang="scss" scoped>
+.item2:last-child{
+    margin-bottom:80px !important
+}
+#app .sidebar-container,.sidebar-container,.sidebar-logo-container{
+    background-color: #1F1E2E;
+}
+.el-menu-item.is-active{
+  color:#D7000F !important;
+  .is-opened>.el-submenu__title svg,.is-opened>.el-submenu__title span,.is-opened>.el-submenu__title i{
+    color:#D7000F !important;
+  }
+}
+.el-submenu__title:hover{
+  .is-opened>.el-submenu__title svg,.is-opened>.el-submenu__title span,.is-opened>.el-submenu__title i{
+    color:#fff !important;
+  }
+}
+
+</style>
+<style>
+
+#app .sidebar-container .theme-dark .nest-menu .el-submenu > .el-submenu__title:hover, #app .sidebar-container .theme-dark .el-submenu .el-menu-item:hover{
+  color:#fff !important;
+  background: #D7000F ;
+}
+
+</style>

src/layout/components/Sidebar/index.vue

@@ -55,3 +55,9 @@ export default {
     }
 };
 </script>
+<style>
+.item2:hover{
+    background-color: #D7000F !important;
+    color:#fff !important;
+}
+</style>

src/store/modules/settings.js

@@ -3,31 +3,31 @@ import defaultSettings from '@/settings'
 const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
 
 const state = {
-  theme: variables.theme,
-  showSettings: showSettings,
-  tagsView: tagsView,
-  fixedHeader: fixedHeader,
-  sidebarLogo: sidebarLogo
+    theme: variables.theme,
+    showSettings: showSettings,
+    // tagsView: tagsView,
+    tagsView: false,
+    fixedHeader: fixedHeader,
+    sidebarLogo: sidebarLogo
 }
 
 const mutations = {
-  CHANGE_SETTING: (state, { key, value }) => {
-    if (state.hasOwnProperty(key)) {
-      state[key] = value
+    CHANGE_SETTING: (state, { key, value }) => {
+        if (state.hasOwnProperty(key)) {
+            state[key] = value
+        }
     }
-  }
 }
 
 const actions = {
-  changeSetting({ commit }, data) {
-    commit('CHANGE_SETTING', data)
-  }
+    changeSetting({ commit }, data) {
+        commit('CHANGE_SETTING', data)
+    }
 }
 
 export default {
-  namespaced: true,
-  state,
-  mutations,
-  actions,
+    namespaced: true,
+    state,
+    mutations,
+    actions,
 }
-

src/views/business/Middleware/bpmn/customModeler.vue

@@ -88,7 +88,7 @@
             <div slot="footer" class="dialog-footer">
                 <el-button type="primary" @click="submitForm" v-if="!loading">确 定</el-button>
                 <el-button :loading="loading" type="primary" @click="submitForm" v-else>提交中...</el-button>
-                <el-button @click="cancel">取 消</el-button>
+                <el-button @click="cancel" plain>取 消</el-button>
             </div>
         </el-dialog>
         <!-- 流程图提交对话框 -->
@@ -112,7 +112,7 @@
                             <el-input slot="reference" v-model="bpmnForm.runCron" placeholder="定时策略" @click="runCronClose=true"/>
                         </el-popover>
                       </el-form-item> -->
-                      <el-form-item style="margin-top: -10px; margin-bottom:0px;">
+                      <el-form-item style="margin-top: -10px;">
                         <cron v-if="showCronBox" v-model="bpmnForm.runCron" ></cron>
                       </el-form-item>
                       <el-form-item label="执行时间" prop="runCron">

src/views/business/Middleware/bpmn/executionLog.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="app-container">
-      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="90px">
+      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
         <!-- <el-form-item label="流程图名称">
           <el-input
             v-model.trim="queryParams.name"
@@ -11,7 +11,7 @@
             @keyup.enter.native="handleQuery"
           />
         </el-form-item> -->
-        <el-form-item label="历史流程id">
+        <el-form-item label="历史流程id:">
           <el-input
             v-model.trim="queryParams.hiExecutionId"
             placeholder="请输入流程图id"
@@ -21,7 +21,7 @@
             @keyup.enter.native="handleQuery"
           />
         </el-form-item>
-        <el-form-item label="时间" label-width="60px">
+        <el-form-item label="时间:" >
           <el-date-picker
            style="margin-top:0px;"
             v-model="dateRange"
@@ -33,13 +33,13 @@
             end-placeholder="结束日期"
           ></el-date-picker>
         </el-form-item>
-        <el-form-item>
-          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-          <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-form-item class="right">
+          <el-button plain size="mini" @click="resetQuery">重置</el-button>
+          <el-button type="primary"  size="mini" @click="handleQuery">搜索</el-button>
         </el-form-item>
       </el-form>
       <!-- height="calc(100vh - 30vh)" -->
-    <el-table v-loading="loading" :data="adminList">
+    <el-table v-loading="loading" :data="adminList" border style="margin-top:20px;">
       <el-table-column label="历史流程id" align="center" prop="hiProcdefId"  show-overflow-tooltip />
       <el-table-column label="任务名称" align="center" prop="taskName" show-overflow-tooltip />
       <!-- <el-table-column label="参数" align="center" prop="taskParams" show-overflow-tooltip />
@@ -58,8 +58,8 @@
           <span :style="JSON.parse(scope.row.executeResult).status == 'SUCCESS' ? 'color:#67C23A': 'color:#F56C6C' ">{{JSON.parse(scope.row.executeResult).status == "SUCCESS" ? "成功" : JSON.parse(scope.row.executeResult).msg}}</span>
         </template>
       </el-table-column>
-      <el-table-column label="开始时间" align="center" prop="createTime"  show-overflow-tooltip />
-      <el-table-column label="结束时间" align="center" prop="endTime"  show-overflow-tooltip />
+      <el-table-column label="开始时间:" align="center" prop="createTime"  show-overflow-tooltip />
+      <el-table-column label="结束时间:" align="center" prop="endTime"  show-overflow-tooltip />
       <!-- <el-table-column label="执行日志" align="center">
         <template slot-scope="scope">
           <el-button

src/views/business/Middleware/bpmn/executionRecord.vue

@@ -1,17 +1,17 @@
 <template>
     <div class="app-container">
-      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="90px">
-        <el-form-item label="流程图名称">
+      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
+        <el-form-item label="流程图名称:">
           <el-input
             v-model.trim="queryParams.name"
-            placeholder="请输入流程图名称"
+            placeholder="请输入流程图名称:"
             clearable
             size="small"
             style="width: 160px"
             @keyup.enter.native="handleQuery"
           />
         </el-form-item>
-        <el-form-item label="流程图id">
+        <el-form-item label="流程图id:">
           <el-input
             v-model.trim="queryParams.procdefId"
             placeholder="请输入流程图id"
@@ -21,7 +21,7 @@
             @keyup.enter.native="handleQuery"
           />
         </el-form-item>
-        <el-form-item label="时间" label-width="60px">
+        <el-form-item label="时间:">
           <el-date-picker
            style="margin-top:0px;"
             v-model="dateRange"
@@ -33,13 +33,13 @@
             end-placeholder="结束日期"
           ></el-date-picker>
         </el-form-item>
-        <el-form-item>
-          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-          <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-form-item class="right">
+          <el-button plain  size="mini" @click="resetQuery">重置</el-button>
+          <el-button type="primary"  size="mini" @click="handleQuery">搜索</el-button>
         </el-form-item>
       </el-form>
       <!-- height="calc(100vh - 30vh)" -->
-    <el-table v-loading="loading" :data="adminList">
+    <el-table v-loading="loading" :data="adminList" border style="margin-top:20px;">
       <el-table-column label="id" align="center" prop="id"  show-overflow-tooltip />
       <el-table-column label="流程id" align="center" prop="procdefId"  show-overflow-tooltip />
       <el-table-column label="流程名称" align="center" prop="procdefName" show-overflow-tooltip />
@@ -48,9 +48,9 @@
       <el-table-column label="执行日志" align="center">
         <template slot-scope="scope">
           <el-button
+            type="text"
             size="mini"
-            type="primary"
-            icon="el-icon-view"
+            class="lans"
             @click="getRecord(scope.row)"
           >查看</el-button>
         </template>
@@ -97,7 +97,7 @@ export default {
       // 查询参数
       queryParams: {
         current: 1,
-        size: 20,
+        size: 10,
         name:undefined,
         procdefId:undefined
       },

src/views/business/Middleware/bpmn/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="app-container">
-      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
-        <el-form-item label="流程图名称">
+      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" >
+        <el-form-item label="流程图名称:">
           <el-input
             v-model.trim="queryParams.name"
             placeholder="请输入流程图名称"
@@ -11,29 +11,25 @@
             @keyup.enter.native="handleQuery"
           />
         </el-form-item>
-        <el-form-item>
-          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-          <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-form-item class="right">
+          <el-button plain size="mini" @click="resetQuery">重置</el-button>
+          <el-button type="primary"  size="mini" @click="handleQuery">搜索</el-button>
+        </el-form-item>
+        <br>
           <el-button
             type="primary"
-            plain
-            icon="el-icon-plus"
             size="mini"
             @click="handleAdd"
           >新增</el-button>
-        </el-form-item>
       </el-form>
-    <el-table v-loading="loading" :data="adminList">
+    <el-table v-loading="loading" :data="adminList" border style="margin-top:20px;">
       <el-table-column label="流程id" align="center" prop="id" show-overflow-tooltip />
       <el-table-column label="流程图名称" align="center" prop="name" show-overflow-tooltip />
       <el-table-column label="描述" align="center" prop="procdefDescribe"  show-overflow-tooltip />
-
       <el-table-column label="运行状态" align="center" >
         <template slot-scope="scope">
           <el-switch
             v-model="scope.row.runStatus"
-            active-color="#13ce66"
-            inactive-color="#ccc"
              @change="handleStatusChange(scope.row)"
           ></el-switch>
         </template>
@@ -43,7 +39,7 @@
            <el-button
             size="mini"
             type="text"
-            icon="el-icon-view"
+            class="lans"
             @click="getBpmn(scope.row)"
           >查看</el-button>
           </template>
@@ -53,7 +49,7 @@
            <el-button
             size="mini"
             type="text"
-            icon="el-icon-view"
+            class="lans"
              @click="getRecord(scope.row)"
           >查看</el-button>
           </template>
@@ -63,21 +59,21 @@
         <template slot-scope="scope">
           <el-button
             size="mini"
-            type="primary"
-            icon="el-icon-edit"
+            type="text"
+            class="lans"
             @click="zkReProcdefRun1(scope.row)"
           >执行一次</el-button>
 
           <el-button
             size="mini"
-            type="primary"
-            icon="el-icon-edit"
+            type="text"
+            class="lans"
             @click="handleUpdate(scope.row)"
           >编辑</el-button>
           <el-button
             size="mini"
-            type="danger"
-            icon="el-icon-delete"
+            type="text"
+            class="hongs"
             @click="handleDelete(scope.row)"
           >删除</el-button>
         </template>
@@ -134,7 +130,7 @@ export default {
       // 查询参数
       queryParams: {
         current: 1,
-        size: 20,
+        size: 10,
         name:undefined
       },
       // 表单参数

src/views/business/Middleware/functionalInterface/index.vue

@@ -134,8 +134,6 @@
             <el-form-item label="接口状态" prop="enableFlag">
               <el-switch
                   v-model="enableFlag"
-                  active-color="#13ce66"
-                  inactive-color="#ff4949"
                 ></el-switch>
             </el-form-item>
           </el-col>
@@ -363,4 +361,4 @@ export default {
     height: 178px;
     display: block;
   }
-</style>
+</style>

src/views/login.vue

@@ -12,7 +12,7 @@
           <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
         </el-input>
       </el-form-item>
-      <el-form-item prop="password">
+      <el-form-item prop="password" style="margin-top:15px">
         <el-input
           v-model="loginForm.password"
           :type="passwordtxt"
@@ -20,24 +20,44 @@
           placeholder="密码"
           @keyup.enter.native="handleLogin"
         >
-          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
-          <svg-icon slot="prefix" icon-class="eye"  class="el-input__icon input-icon"  style="position:absolute;right:-340px"  @click="eyeTab" v-show="passwordtxt =='password'" />
-          <svg-icon slot="prefix" icon-class="eye-open"  class="el-input__icon input-icon"  style="position:absolute;right:-340px"  @click="eyeTab" v-show="passwordtxt =='text'" />
+         <template #prefix>
+            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
+          </template>
         </el-input>
-
+         <div class="eyeWrap">
+          <svg-icon
+            slot="prefix"
+            icon-class="eye"
+            class="el-input__icon input-icon eye"
+            style="file: currentColor"
+            @click="eyeTab"
+            v-show="passwordtxt == 'password'"
+          />
+          <svg-icon
+            slot="prefix"
+            icon-class="eye-open"
+            class="el-input__icon input-icon eye"
+            style="file: currentColor"
+            @click="eyeTab"
+            v-show="passwordtxt == 'text'"
+          />
+        </div>
       </el-form-item>
       <el-form-item prop="code" v-if="captchaOnOff">
         <el-input
           v-model="loginForm.code"
           auto-complete="off"
           placeholder="验证码"
-          style="width: 63%"
+          style="width: 61%"
           @keyup.enter.native="handleLogin"
         >
           <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
         </el-input>
         <div class="login-code">
-          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+          <img :src="codeUrl"  class="login-code-img"/>
+        </div>
+        <div class="shuaxin" :class="xuan ? 'xuanz' :''" @click="getCode">
+          <svg-icon slot="prefix" icon-class="刷新"  />
         </div>
       </el-form-item>
       <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;"  @change="memory">记住密码</el-checkbox>
@@ -109,7 +129,8 @@ export default {
       captchaOnOff: false,
       // 注册开关
       register: false,
-      redirect: undefined
+      redirect: undefined,
+      xuan:false,
     };
   },
   watch: {
@@ -144,6 +165,7 @@ export default {
 
     },
     getCode() {
+      this.xuan = true
       getCodeImg().then(res => {
         this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
         if (this.captchaOnOff) {
@@ -153,8 +175,11 @@ export default {
           setTimeout(()=>{
             this.ERPloading = false
           },)
+          this.xuan = false
         }
-      });
+      }).catch(err=>{
+        this.xuan = false
+      })
     },
     getCookie() {
       const username = Cookies.get("username20220808");
@@ -260,7 +285,7 @@ export default {
   border-radius: 6px;
   background: #ffffff;
   width: 456px;
-  padding: 63px 35px;
+  padding: 48px;
   .el-input {
     height: 40px;
     font-size: 16px !important;
@@ -280,15 +305,37 @@ export default {
   color: #bfbfbf;
 }
 .login-code {
-  width: 33%;
+  width: 30%;
   height: 36px;
-  float: right;
+  display: inline-block;
+  margin: 7px 0 0 10px !important;
   img {
-    cursor: pointer;
     vertical-align: middle;
-    width:100%;
     height: 36px;
-    margin-top:-1px;
+    margin-top: -4px;
+  }
+}
+.shuaxin {
+  font-size: 20px;
+  float: right;
+  margin-top: 7px;
+  cursor: pointer;
+}
+.xuanz {
+  animation: mymove 2s 1;
+  -webkit-animation: mymove 2s 1; /* Safari and Chrome */
+}
+@keyframes mymove {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@-webkit-keyframes mymove {
+  /* Safari and Chrome */
+
+  100% {
+    transform: rotate(360deg);
   }
 }
 .el-login-footer {
@@ -307,6 +354,15 @@ export default {
   height:36px !important;
   line-height: 36px !important;
 }
+.eyeWrap {
+  position: relative;
+}
+.eye {
+  position: absolute;
+  right: 10px;
+  top: -40px;
+  fill: #ccc;
+}
 </style>
 <style>
 html,