1

src/main.js

@@ -2,7 +2,8 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import 'ant-design-vue/dist/antd.css';
-import '@/styles/index.scss' // global css
+// import '@/styles/index.scss' // global css
+import '@/views/styles/index.scss' // global css
 import { VueAxios } from './utils/request'
 import * as echarts from 'echarts'
 import {

src/views/styles/element-ui.scss

@@ -0,0 +1,71 @@
+// cover some element-ui styles
+
+.ant-breadcrumb__inner,
+.ant-breadcrumb__inner a {
+  font-weight: 400 !important;
+}
+
+.ant-upload {
+  input[type="file"] {
+    display: none !important;
+  }
+}
+
+.ant-upload__input {
+  display: none;
+}
+
+
+// to fixed https://github.com/ElemeFE/element/issues/2461
+.ant-dialog {
+  transform: none;
+  left: 0;
+  position: relative;
+  margin: 0 auto;
+}
+
+// refine element ui upload
+.upload-container {
+  .ant-upload {
+    width: 100%;
+
+    .ant-upload-dragger {
+      width: 100%;
+      height: 200px;
+    }
+  }
+}
+
+// dropdown
+.ant-dropdown-menu {
+  a {
+    display: block
+  }
+}
+
+// to fix el-date-picker css style
+.ant-range-separator {
+  box-sizing: content-box;
+}
+
+/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
+::-webkit-scrollbar {
+  height: 10px; /*滚动条高度*/
+  /* background-color: #132958; */
+  width: 8px;
+  // background: #fff;
+}
+
+/*定义滑块 内阴影+圆角*/
+::-webkit-scrollbar-thumb {
+  border-radius: 2px;
+  /* -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); */
+  background-color: #909399 !important; /*滚动条的背景颜色*/
+}
+.ant-table tbody tr:hover>td {
+  background-color:#d5e4f7!important;
+}
+
+.ant-table__body tr.hover-row.current-row>td,.ant-table__body tr.hover-row.ant-table__row--striped.current-row>td,.ant-table__body tr.hover-row.ant-table__row--striped>td,.ant-table__body tr.hover-row>td{
+  background-color:#d5e4f7!important;
+}

src/views/styles/index.scss

@@ -0,0 +1,609 @@
+@import './variables.scss';
+@import './mixin.scss';
+@import './transition.scss';
+@import './element-ui.scss';
+@import './sidebar.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;
+}
+.content-app{
+  width: 100%;
+  padding: 0 24px 15px 24px;
+  background: #dfe3ea;
+}
+
+.el-message {
+  width: 240px;
+  height: 48px;
+  background: #f6fff7;
+  box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
+  border-radius: 24px;
+}
+
+label {
+  font-weight: 700;
+}
+
+html {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+#app {
+  height: 100%;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+a:focus,
+a:active {
+  outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+}
+
+div:focus {
+  outline: none;
+}
+
+li {
+  list-style-type: none;
+}
+
+.clearfix {
+  &:after {
+    visibility: hidden;
+    display: block;
+    font-size: 0;
+    content: ' ';
+    clear: both;
+    height: 0;
+  }
+}
+
+// main-container global css
+.app-container {
+  padding: 20px;
+}
+
+/*公用元素边框*/
+.box-public-shadow {
+  background: #ffffff;
+  box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
+  border-radius: 4px;
+  padding: 30px;
+
+  .relative {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.npd {
+  padding: 0;
+}
+
+.flex {
+  display: flex;
+  justify-content: space-between;
+}
+
+.flex-end {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.flex-wrap {
+  display: flex;
+}
+.flx {
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  padding: 10px 0px 10px 20px;
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  height: 36px;
+  background: #2d67e3;
+  color: #ffffff;
+  margin-bottom: 24px;
+  width: 100%;
+}
+.h100 {
+  height: 100%;
+}
+
+.l22 {
+  margin-left: 22px;
+}
+
+.flex1 {
+  flex: 1;
+}
+
+.t30 {
+  margin-top: 24px;
+}
+.r10 {
+  margin-right: 10px;
+}
+.l10 {
+  margin-left: 10px;
+}
+.newbut{
+  width: 64px;
+  height: 32px;
+  background: #FFFFFF;
+  border: 1px solid #9EBBF7;
+  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
+  border-radius: 4px;
+  font-size: 14px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #2D67E3;
+  cursor: pointer;
+}
+.r24 {
+  margin-right: 24px;
+}
+.r25 {
+  margin-right: 12px;
+}
+.b24{
+  margin-bottom: 24px;
+}
+.b32{
+  margin-bottom: 32;
+}
+.pt90{
+  padding-top: 90px;
+}
+.flews{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.er {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #101611;
+}
+.up {
+  min-height: 80px;
+  padding-top: 24px;
+}
+.buwitch{
+  width: 80px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #FFFFFF;
+  border: 1px solid #D2D6DF;
+  border-radius: 4px;
+  font-size: 14px;
+  font-family: Microsoft YaHei;
+  font-weight: 300;
+  color: #ffffff;
+}
+.r26 {
+  width: 80px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #FFFFFF;
+  border: 1px solid #D2D6DF;
+  border-radius: 4px;
+  font-size: 14px;
+  font-family: Microsoft YaHei;
+  font-weight: 300;
+  color: #101611
+}
+.flower{
+  overflow:hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  -o-text-overflow:ellipsis;
+}
+.fwgh{
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #101116;
+}
+.right {
+  text-align: right;
+}
+
+.center {
+  text-align: center;
+}
+
+.box-scroll {
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+
+/*弹框输入框*/
+.dialog-public-background {
+  .el-input__inner,
+  .el-textarea__inner {
+    background: #ffffff;
+    border: 1px solid #d2d6df;
+    border-radius: 2px;
+  }
+}
+
+/*公用按钮阴影*/
+.button-public-shadow {
+  height: 48px;
+  line-height: 48px;
+  text-align: center;
+  background: linear-gradient(0deg, #6983be, #777dba);
+  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.18);
+  border-radius: 6px;
+  border: none;
+  outline: none;
+  margin-bottom: 32px;
+  width: 100%;
+  cursor: pointer;
+  font-size: 16px;
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  color: #ffffff;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+/*公用阴影-小*/
+.box-public-shadow-mini {
+  background: #ffffff;
+  box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
+  border-radius: 4px;
+  padding: 24px;
+
+  .title {
+    font-size: 16px;
+    font-family: Microsoft YaHei;
+    font-weight: bold;
+    color: #303133;
+  }
+
+
+  .cl-hui {
+    font-size: 14px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    color: #909399;
+  }
+  .fz16{
+    font-size: 16px;
+    font-family: Microsoft YaHei;
+    font-weight: bold;
+    color: #101116;
+  }
+  .fwb {
+    font-weight: bold;
+  }
+  .t25 {
+    margin-top: 25px;
+  }
+
+  .t13 {
+    margin-top: 13px;
+  }
+  .t12 {
+    margin-top: 12px;
+  }
+  .t25 {
+    margin-top: 25px;
+  }
+  .t24 {
+    margin-top: 24px;
+  }
+
+
+  .mb {
+    font-size: 14px;
+    font-family: Helvetica;
+    font-weight: 400;
+    color: #AFB4BF;
+  }
+
+  .l50 {
+    margin-left: 50px;
+  }
+}
+
+.content {
+  margin-left: 20px;
+}
+
+.manageTitle {
+  position: relative;
+  font-size: 20px;
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  color: #303133;
+  padding-left: 12px;
+  margin-right: 48px;
+  margin-top: 0;
+  margin-bottom: 0;
+  &::after {
+    position: absolute;
+    content: '';
+    width: 4px;
+    height: 20px;
+    left: 0;
+    top: 50%;
+    margin-top: -10px;
+    background: #2d67e3;
+  }
+}
+
+/*鼠标样式-手*/
+.cursor {
+  cursor: pointer;
+}
+
+.handleMsgMneu {
+  padding: 4px 0;
+  background: #fafcff;
+  box-shadow: 0px 4px 8px 0px rgba(16, 17, 22, 0.1);
+  border-radius: 0;
+  .el-dropdown-menu__item {
+    padding: 0;
+    span {
+      line-height: 28px;
+      padding: 12px;
+      font-size: 14px;
+    }
+    .editPwd {
+      color: #101116;
+    }
+    .layoutSys {
+      color: #eb2f3b;
+    }
+  }
+}
+
+/*修改提示框*/
+.el-message {
+  height: 40px;
+  width: auto;
+  border-radius: 2px;
+  min-width: auto;
+  padding-right: 70px;
+  background: #fafcff;
+  box-shadow: 0px 2px 24px 0px rgba(16, 17, 22, 0.2);
+  border-color: #fafcff;
+  .el-message__content {
+    font-weight: 400;
+    color: #101116;
+  }
+}
+
+/*修改checkbox选中样式*/
+.el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: #2d67e3;
+  border-color: #2d67e3;
+}
+
+/*修改tree children布局*/
+.el-tree-node.is-expanded > .el-tree-node__children {
+  display: flex;
+}
+
+.el-tree-node__label {
+  margin-left: 10px;
+  width: 110px;
+}
+
+/*修改radio选中样式*/
+.el-radio__input.is-checked .el-radio__inner {
+  border-color: #2d67e3;
+  background: #fff;
+  &::after {
+    width: 8px;
+    height: 8px;
+    background-color: #2d67e3;
+  }
+}
+
+.el-radio__input.is-checked + .el-radio__label {
+  color: #303133;
+}
+
+/*修改tree背景样式*/
+.el-tree {
+  background: initial;
+}
+
+/*按钮默认样式*/
+.btn-default {
+  background: #f5f7fa;
+  border: 1px solid #b4b7cb;
+  border-radius: 8px;
+  font-size: 14px;
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  color: #6f81bc;
+
+  &:focus {
+    border-color: #6983be;
+    color: #fff;
+    background: linear-gradient(0deg, #6983be, #777dba);
+  }
+
+  &:hover {
+    background: #94a6e0;
+    border-color: #94a6e0;
+    color: #fff;
+  }
+}
+
+/*取消按钮*/
+.btn-cancel {
+  background: #ffffff;
+  border: 1px solid #e3e5e8;
+  border-radius: 6px;
+  font-size: 16px;
+  font-family: Microsoft YaHei;
+  font-weight: 300;
+  color: #303133;
+  margin-left: 24px !important;
+
+  &:focus {
+    border-color: #2d67e3;
+    color: #fff;
+    background: #2d67e3;
+  }
+
+  &:hover {
+    background: #2d67e3;
+    border-color: #2d67e3;
+    color: #fff;
+  }
+}
+
+/*提交按钮*/
+.foot {
+  width: 100%;
+  height: 56px;
+  padding: 10px 22px 10px 0;
+  line-height: 56px;
+  background: #f0f5ff;
+  border-radius: 2px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.DelFoot,
+.del-foot {
+  width: 100%;
+  height: 56px;
+  padding: 10px 22px 10px 0;
+  line-height: 56px;
+  background: #fff;
+  border-radius: 2px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.el-button--danger {
+  background: #eb2f3b;
+  border-radius: 4px;
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  color: #ffffff;
+  border-color: #eb2f3b;
+}
+
+.el-button--primary {
+  background: #2d67e3;
+  border-radius: 4px;
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  color: #ffffff;
+  border-color: #2d67e3;
+  &:focus {
+    background: #2d67e3;
+    border-color: #2d67e3;
+    color: #fff;
+  }
+
+  &:hover {
+    background: #2d67e3;
+    border-color: #2d67e3;
+    color: #fff;
+  }
+}
+
+/*二级弹框背景*/
+.ej-dialog-bg {
+  background: #f5f7fa !important;
+  box-shadow: none !important;
+}
+
+.edit_log {
+  width: 14px;
+  height: 14px;
+  background: url('../../assets/logo/ic_edit@2x.png') no-repeat;
+  background-size: 100%;
+  margin-left: 16px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.edit_log:hover {
+  width: 14px;
+  height: 14px;
+  background: url('../../assets/logo/ic_edit_hovar@2x.png') no-repeat;
+  background-size: 100%;
+  margin-left: 16px;
+  cursor: pointer;
+}
+
+// 表格列筛选弹框
+.dialog-check-cols .el-tree {
+  &.has-children .el-tree-node > .el-tree-node__children {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  &.no-children {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+
+.el-table .el-table__cell.pre-line .cell {
+  white-space: pre-line;
+}
+
+.input-shadow .el-input__inner {
+  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
+}
+
+.btn-shadow {
+  cursor: pointer;
+  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.18);
+  &.btn-img,
+  &.btn-square {
+    border-radius: 8px;
+  }
+}
+
+.el-table .el-table__body-wrapper::-webkit-scrollbar {
+  height: 8px;
+}
+
+input[type='number'] {
+  line-height: 1 !important;
+}
+
+.el-input__inner,.el-button,.el-textarea__inner{
+  border-radius: 2px;
+}

src/views/styles/mixin.scss

@@ -0,0 +1,28 @@
+@mixin clearfix {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
+
+@mixin scrollBar {
+  &::-webkit-scrollbar-track-piece {
+    background: #d3dce6;
+  }
+
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #99a9bf;
+    border-radius: 4px;
+  }
+}
+
+@mixin relative {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}

src/views/styles/sidebar.scss

@@ -0,0 +1,242 @@
+#app {
+  .main-container {
+    min-height: 100%;
+    transition: margin-left 0.28s;
+    // margin-left: $sideBarWidth;
+    position: relative;
+    background-color: #dfe3ea;
+  }
+
+  .sidebar-container {
+    width: 150px;
+    // transition: width 0.28s;
+    // width: $sideBarWidth !important;
+    background-color: #041741;
+    // height: 100%;
+    padding: 16px 0 32px 0;
+    // border-radius: 6px;
+    position: fixed;
+    font-size: 0px;
+    top: 47px;
+    // bottom: 0;
+    left: 0%;
+    bottom: 0%;
+    z-index: 1001;
+    // overflow: hidden;
+    box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
+
+    // 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;
+      padding-bottom: 10px;
+    }
+
+    .ant-scrollbar__bar.is-vertical {
+      right: 0px;
+    }
+
+    .ant-scrollbar {
+      height: 100%;
+    }
+
+    &.has-logo {
+      .ant-scrollbar {
+        height: calc(100% - 50px);
+      }
+    }
+
+    .is-horizontal {
+      display: none;
+    }
+
+    a {
+      display: inline-block;
+      width: 100%;
+      overflow: hidden;
+    }
+
+    .svg-icon {
+      margin-right: 16px;
+    }
+
+    .sub-el-icon {
+      margin-right: 12px;
+      margin-left: -2px;
+    }
+
+    .ant-menu {
+      border: none;
+      height: 100%;
+      width: 100% !important;
+      > div {
+        background: #041741 !important;
+      }
+    }
+
+    // menu hover
+    // .submenu-title-noDropdown,
+    .ant-submenu__title {
+      &:hover {
+        background-color: #2d67e3 !important;
+      }
+    }
+
+    .submenu-title-noDropdown {
+      &:hover {
+        // background-color: initial !important;
+        background: #2d67e3 !important;
+      }
+    }
+
+    .is-active > .ant-submenu__title {
+      color: $subMenuActiveText !important;
+    }
+
+    & .nest-menu .ant-submenu > .ant-submenu__title,
+    & .ant-submenu .ant-menu-item {
+      min-width: $sideBarWidth !important;
+      background-color: $subMenuBg !important;
+      &:hover {
+        // background-color: $subMenuHover !important;
+      }
+    }
+  }
+
+  .hideSidebar {
+    .sidebar-container {
+      width: 150px;
+    }
+
+    .main-container {
+      margin-left: 0;
+    }
+
+    .submenu-title-noDropdown {
+      padding: 0 !important;
+      position: relative;
+      background-color: #041741 !important;
+      .ant-tooltip {
+        padding: 0 !important;
+        .svg-icon {
+          margin-left: 20px;
+        }
+
+        .sub-el-icon {
+          margin-left: 19px;
+        }
+      }
+    }
+
+    .ant-submenu {
+      overflow: hidden;
+
+      & > .ant-submenu__title {
+        background-color: #041741 !important;
+        padding: 0 !important;
+        .svg-icon {
+          margin-left: 20px;
+        }
+
+        .sub-el-icon {
+          margin-left: 19px;
+        }
+
+        .ant-submenu__icon-arrow {
+          display: none;
+        }
+      }
+    }
+
+    .ant-menu--collapse {
+      .ant-submenu {
+        & > .ant-submenu__title {
+          & > span {
+            height: 0;
+            width: 0;
+            overflow: hidden;
+            visibility: hidden;
+            display: inline-block;
+          }
+        }
+      }
+    }
+  }
+
+  .ant-menu--collapse .ant-menu .ant-submenu {
+    min-width: $sideBarWidth !important;
+  }
+
+  // mobile responsive
+  .mobile {
+    .main-container {
+      margin-left: 0px;
+    }
+
+    .sidebar-container {
+      transition: transform 0.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;
+    }
+  }
+}
+
+// when menu collapsed
+.ant-menu--vertical {
+  & > .ant-menu {
+    .svg-icon {
+      margin-right: 16px;
+    }
+    .sub-el-icon {
+      margin-right: 12px;
+      // margin-left: -2px;
+    }
+  }
+  // .ant-menu-item .is-active .submenu-title-noDropdown{
+  //   background-color: red !important;
+  // }
+  .nest-menu .ant-submenu > .ant-submenu__title,
+  .ant-menu-item {
+    &:hover {
+      // you can use $subMenuHover
+      // background-color: $menuHover !important;
+    }
+  }
+
+  // the scroll bar appears when the subMenu is too long
+  > .ant-menu--popup {
+    max-height: 100vh;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar-track-piece {
+      background: #d3dce6;
+    }
+
+    &::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #99a9bf;
+      border-radius: 2px;
+    }
+  }
+}

src/views/styles/transition.scss

@@ -0,0 +1,48 @@
+// global transition css
+
+/* fade */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.28s;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+
+/* fade-transform */
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all .5s;
+}
+
+.fade-transform-enter {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/* breadcrumb transition */
+.breadcrumb-enter-active,
+.breadcrumb-leave-active {
+  transition: all .5s;
+}
+
+.breadcrumb-enter,
+.breadcrumb-leave-active {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.breadcrumb-move {
+  transition: all .5s;
+}
+
+.breadcrumb-leave-active {
+  position: absolute;
+}

src/views/styles/variables.scss

@@ -0,0 +1,27 @@
+// sidebar
+$menuText:#bfcbd9;
+$menuActiveText:#409EFF;
+$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
+
+$menuBg:#ffffff;
+$menusBg:#041741;
+$menuHover:#ffffff;
+$menucurrency: #ffffff;
+
+$subMenuBg:#1f2d3d;
+$subMenuHover:#001528;
+
+$sideBarWidth: 210px;
+
+// 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;
+}