commit：修改微服务工程目录名称

orange-demo-multi-web/src/assets/style/base.scss

@@ -0,0 +1,593 @@
+@import "element-color.scss";
+@import "transition.scss";
+
+html, body {
+  padding: 0;
+  margin: 0;
+  font-size: 14px;
+  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
+  background-color: rgb(228,240,255);
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+$header-height: 60px;
+
+// 过滤组件长度
+$filter-item-width: 250px;
+// 范围选择过滤组件长度
+$filter-item-range-width: 400px;
+// 左侧过滤树组件每一项高度
+$tree-node-height: 40px;
+// 高级管理表单标题高度
+$advanced-title-height: 50px;
+$border-color: rgb(216, 220, 229);
+$menuHover: rgba(255,255,255,0.3);
+$menu-background-color: transparent;
+$tabs-header-margin-bottom: 25px;
+$tab-header-background-color: #EBEEF5;
+$image-item-width: 65px;
+$box-padding-size: 25px;
+
+/**
+ * 弹窗样式，封装的layer的弹窗
+ **/
+body .layer-dialog .layui-layer-title{
+  border-radius: 4px 4px 0px 0px;
+  border:1px solid #01000000;
+}
+
+body .layer-dialog .layui-layer-setwin {color: #ffffff}
+
+body .layer-dialog {
+  border-radius: 4px;
+  border:1px solid #01000000;
+}
+
+body .layer-dialog .layui-layer-content {
+  padding: $box-padding-size;
+}
+
+
+.demo-project {
+  .el-main {
+    padding: 0px;
+  }
+  .flex-box {
+    flex-wrap: wrap;
+  }
+  .scrollbar_dropdown__wrap {
+    overflow-x: hidden;
+  }
+
+  .icon-btn.el-button {
+    font-size: 18px;
+    padding: 5px 0px;
+  }
+
+  .default-padding-box {
+    padding: $box-padding-size;
+  }
+
+  .padding-no-top {
+    padding: 0px $box-padding-size $box-padding-size $box-padding-size;
+  }
+
+  .default-border {
+    border: 1px solid $border-color1;
+  }
+
+  .default-border-left {
+    border-left: 1px solid $border-color1;
+  }
+
+  .default-border-right {
+    border-right: 1px solid $border-color1;
+  }
+
+  .default-border-top {
+    border-top: 1px solid $border-color1;
+  }
+
+  .default-border-bottom {
+    border-bottom: 1px solid $border-color1;
+  }
+
+  .page-close-box {
+    position: absolute;
+    background: #13ce66;
+    transform: rotate(45deg);
+    height: 60px;
+    width: 60px;
+    right: -30px;
+    top:-30px;
+    text-align: center;
+
+    .el-button {
+      transform: rotate(-45deg);
+      color: white;
+      margin-top: 30px;
+    }
+  }
+
+   /**
+   * 过滤组件样式
+   **/
+   .mask-box {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.5);
+    top: 0;
+    z-index: 10;
+  }
+  
+  .filter-box {
+    position: relative;
+    background-color: white;
+    padding: $box-padding-size $box-padding-size 0px $box-padding-size;
+    z-index: 20;
+  }
+
+  .advance-filter-box {
+    padding-bottom: 25px;
+  }
+  
+  .filter-item {
+    width: $filter-item-width;
+  }
+
+  .cascader-item {
+    width: 160px!important;
+  }
+  
+  .is-range, .is-search {
+    width: $filter-item-range-width;
+  }
+
+  .table-operation-box {
+    align-self: flex-end;
+    margin-bottom: 10px;
+    overflow: hidden;
+  }
+
+  /**
+   * 左侧树状组件的样式，用户高级管理表单以及用户管理表单
+   **/
+  .advanced-left-box {
+    border-right: 1px solid $border-color;
+    .el-tree-node__content {
+      height: $tree-node-height;
+    }
+
+    .tree-node-item {
+      height: $tree-node-height;
+      line-height: $tree-node-height;
+      width: 100%;
+
+      .tree-node-menu {
+        display: none;
+        float: right;
+        padding-right: 10px;
+        color: red!important;
+      }
+
+      &:hover .tree-node-menu {
+        display: block;
+      }
+    }
+
+    .el-tree-node .el-button+.el-button {
+      margin-left: 5px;
+    }
+  }
+  /**
+   * form表单输入组件宽度
+   **/
+  .full-width-input {
+    .el-select {
+      width: 100%;
+    }
+    
+    .el-input {
+      width: 100%;
+    }
+    
+    .el-cascader {
+      width: 100%;
+    }
+  
+    .el-date-editor {
+      width: 100%;
+    }
+  
+    .el-input-number {
+      width: 100%;
+    }
+  }
+  /**
+   * 左侧菜单样式
+   **/
+  .sidebar-bg {
+    background: linear-gradient(#FC8051, #EB6265);
+  }
+  
+  .sidebar-title {
+    height: 160px;
+    overflow: hidden;
+  }
+  
+  .sidebar-title-text {
+    width: 100%;
+    font-size: 18px;
+    color: #fff;
+    text-align: center;
+    margin: 0px;
+  }
+  .el-menu {
+    background-color: $menu-background-color;
+    border-right-width: 0px;
+  }
+
+  .menu-wrapper {
+    .el-menu {
+      background: linear-gradient(#FC8051, #EB6265);
+    }
+
+    .el-menu-item {
+      color: white;
+      i {
+        color: white;
+      }
+      &:hover {
+        background-color: rgba(255,255,255,0.3)!important;
+      }
+    }
+
+    .el-submenu {
+      .el-menu {
+        background: none;
+      }
+    }
+  }
+  
+  .el-submenu__title i {
+    color: white;
+  }
+
+  .el-menu--collapse {
+    .el-submenu__icon-arrow {
+      display: none;
+    }
+  }
+  
+  .nest-menu .el-submenu>.el-submenu__title, .el-submenu .el-menu-item {
+    min-width: 180px!important;
+    background: $menu-background-color;
+  }
+  
+  .el-menu-item.is-active {
+    border-left: 3px solid #47ba5a;
+    background-color: rgba(255,255,255,0.3)!important;
+  }
+  
+  .el-submenu__title {
+    background-color: $menu-background-color!important;
+  }
+
+  .el-menu {
+    border-right-width: 0px;
+  }
+  
+  .menu-collapse-btn {
+    padding: 0px;
+    width: 15px;
+    border-radius: 2px;
+    border: none;
+    height: 100px;
+    background-color: $--color-primary-light-5;
+    position: fixed;
+    top: 20%;
+    z-index: -1;
+    color: white;
+
+    &:hover {
+      background-color: $--color-primary-light-7;
+    }
+    .chart-border {
+      border: 1px solid #EBEEF5;
+    }
+  }
+  
+  /**
+   * 多tab页表单，tab样式
+   **/
+  .el-tabs__header {
+    margin: 0 0 20px;
+  }
+  /**
+   * 表格表头背景色
+   **/
+  .table-header-gray, .has-gutter .gutter {
+    background-color: $tab-header-background-color;
+  }
+  
+  /**
+   * 图片上传以及显示样式
+   **/
+  .upload-image-item {
+    font-size: 28px;
+    color: #8c939d;
+    width: $image-item-width;
+    height: $image-item-width;
+    text-align: center;
+    display: block;
+
+    .el-upload i {
+      line-height: $image-item-width;
+    }
+  }
+  
+  .upload-image-multi {
+    display: inline;
+  }
+  
+  .upload-image-item .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .upload-image-item .el-upload:hover {
+    border-color: #409eff;
+  }
+  
+  .upload-image-show {
+    width: $image-item-width;
+    height: $image-item-width;
+    display: inline;
+  }
+  
+  .table-cell-image {
+    width: $image-item-width;
+    height: $image-item-width;
+    line-height: $image-item-width;
+    text-align: center;
+    font-size: $image-item-width;
+    color: #606266;
+    margin: 0px 5px;
+  }
+  
+  .upload-image-list .el-upload-list__item {
+    width: $image-item-width;
+    height: $image-item-width;
+    line-height: $image-item-width;
+  }
+  
+  .upload-image-item .el-upload-list--picture-card .el-upload-list__item {
+    width: $image-item-width;
+    height: $image-item-width;
+  }
+  
+  .upload-image-item .el-upload.el-upload--text {
+    width: $image-item-width;
+    height: $image-item-width;
+  }
+  
+  .upload-image-item .el-upload--picture-card {
+    width: $image-item-width;
+    height: $image-item-width;
+    line-height: $image-item-width;
+  }
+  /**
+   *
+   **/
+  $header-menu-height: 32px;
+
+  .sidebar {
+    height: 100%;
+    background-color: #304156;
+    overflow: hidden;
+  }
+
+  .header {
+    display: flex;
+    height: $header-height;
+    background-color: white;
+  }
+
+  .header .menu-column {
+    margin-right: 20px;
+    .el-menu-item.is-active {
+      border-left: 0px solid #47ba5a;
+    }
+  }
+
+  .header-menu {
+    float: right;
+    height: $header-menu-height;
+    line-height: $header-menu-height;
+    margin-top: ($header-height - $header-menu-height) / 2;
+  }
+
+  .header-img {
+    width: $header-menu-height;
+    height: $header-menu-height;
+    border-radius: 50%;
+    margin-left: 10px;
+    float: right;
+  }
+
+  .user-dropdown {
+    color: $sub-text-color;
+    cursor: pointer;
+    font-size: 12px;
+  }
+  .user-dropdown-item {
+    font-size: 12px;
+    color: $main-text-color;
+  }
+
+  .hamburger-container {
+    line-height: 70px;
+    height: $header-height;
+    float: left;
+    padding: 0 10px;
+  }
+
+  .el-submenu__title {
+    background: #00000000;
+  }
+
+  ::-webkit-scrollbar {
+    width: 7px;
+    height: 7px;
+    background: none;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: #DDDEE0;
+    border-radius: 7px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: #A8A8A8;
+  }
+  .tree-select {
+    .el-tree-node__content {
+      height: 34px;
+      line-height: 34px;
+      padding-right: 10px;
+    }
+  }
+
+  .tree-select.single-select-tree {
+    .el-tree-node.is-current > .el-tree-node__content > .el-tree-node__label {
+      color: $--color-primary;
+      font-weight: 700;
+    }
+  }
+
+  .cell {
+    .operation-cell {
+      color: #006CDC;
+      cursor: pointer;
+      text-decoration: underline;
+    }
+  }
+  
+  .single-select-tree {
+    min-width: 200px!important;
+  }
+
+  .base-card-header {
+    display: flex;
+    align-items: center;
+    height: 50px;
+    line-height: 50px;
+  }
+
+  .base-card-operation {
+    flex-grow: 1;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .el-card__header {
+    padding: 0px 15px;
+  }
+  .el-card__body {
+    padding: 15px;
+  }
+
+  .custom-cascader {
+    width: 200px!important;
+  }
+
+  .no-scroll {
+    overflow: hidden;
+  }
+
+  .custom-scroll .el-scrollbar__view {
+    overflow-x: hidden!important;
+  }
+
+  .upload-img-del {
+    position: absolute;
+    height: 20px;
+    width: 20px;
+    line-height: 20px;
+    font-size: 16px;
+    top: 2px;
+    right: 2px;
+    color: #C0C4CC;
+  }
+
+  .upload-img-del:hover {
+    color: #EF5E1C;
+  }
+
+  .input-label {
+    display: inline-block;
+    height: 29px;
+    line-height: 28px;
+  }
+
+  .input-progress {
+    height: 29px;
+    display: flex;
+    align-items: center;
+  }
+
+  .input-item {
+    width: 100%!important;
+  }
+
+  .table-header-gray {
+    background: rgba(237,237,237,1);
+  }
+
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    padding: 10px 0px;
+    line-height: 28px;
+  }
+}
+
+.ml20 {
+  margin-left: 20px;
+}
+
+.mr20 {
+  margin-right: 20px;
+}
+
+.mt20 {
+  margin-top: 20px;
+}
+
+.mb20 {
+  margin-bottom: 20px;
+}
+
+.pl20 {
+  padding-left: 20px;
+}
+
+.pr20 {
+  padding-right: 20px;
+}
+
+.pt20 {
+  padding-top: 20px;
+}
+
+.pb20 {
+  padding-bottom: 20px;
+}

orange-demo-multi-web/src/assets/style/element-color.scss

@@ -0,0 +1,25 @@
+$main-text-color: #303133;
+$normal-text-color: #606266;
+$sub-text-color: #909399;
+$placeholder-text-color: #C0C4CC;
+
+$border-color1: #DCDFE6;
+$border-color2: #E4E7ED;
+$border-color3: #EBEEF5;
+$border-color4: #F2F6FC;
+
+$success-color: #67C23A;
+$warning-color: #E6A23C;
+$danger-color: #F56C6C;
+$info-color: #909399;
+$--color-white: white;
+$--color-primary: #EF5E1C !default;
+$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
+$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
+$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
+$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
+$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
+$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
+$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
+$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
+$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */

orange-demo-multi-web/src/assets/style/form-style.scss

@@ -0,0 +1,112 @@
+.form-advanced-manager {
+  .advance-filter-box {
+    position: absolute;
+    top: 100%;
+    left: 0px;
+    background-color: white;
+    width: 100%;
+    padding: 10px $box-padding-size 15px $box-padding-size;
+  }
+  
+  .title-box {
+    border-bottom: 1px solid $border-color;
+    padding: 0px 20px;
+    z-index: 20;
+    background-color: white;
+    height: $advanced-title-height;
+
+    .title {
+      line-height: $advanced-title-height;
+      color: #606266;
+    }
+
+    .menu-box {
+      position: absolute;
+      top: 0px;
+      right: 10px;
+      height: $advanced-title-height;
+
+      .el-row {
+        margin: 10px 0px;
+        height: $advanced-title-height - 20;
+      }
+    }
+  }
+
+  .advanced-right-box {
+    padding: 0px;
+    .gutter-box {
+      margin: (($advanced-title-height - 16)/2) 0px;
+      height: 16px;
+      width: 3px;
+      background-color: $--color-primary;
+      float: left
+    }
+  }
+}
+
+.form-dict-manager {
+  .dict-title {
+    height: 50px;
+    line-height: 50px;
+    color: $main-text-color;
+    border-bottom: 1px solid $border-color1;
+    font-size: 14px;
+
+    span {
+      margin-left: 20px;
+    }
+  }
+
+  .dict-item {
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    color: #606266;
+    cursor: pointer;
+    padding-left: 20px;
+
+    &:hover {
+      background-color: $--color-primary-light-9;
+    }
+  }
+
+  .active-dict-item {
+    border-left: 3px solid $--color-primary;
+    color: $--color-primary;
+    background-color: $--color-primary-light-9 !important;
+  }
+  
+  .el-scrollbar__bar.is-horizontal {
+    display: none!important;
+  }
+}
+
+
+.form-table-manager {
+  .advance-filter-box {
+    position: absolute;
+    padding: 20px;
+    top: 100%;
+    left: 0px;
+    background-color: white;
+    width: 100%;
+    padding: 10px $box-padding-size 15px $box-padding-size;
+  }
+}
+
+.form-table-multi-select {
+  //
+}
+
+.form-config {
+  padding: $box-padding-size;
+}
+
+.form-multi-fragment {
+  //
+}
+
+.form-single-fragment {
+  //
+}

orange-demo-multi-web/src/assets/style/index.scss

@@ -0,0 +1,3 @@
+@import "../theme/index.css";
+@import "base.scss";
+@import "form-style.scss";

orange-demo-multi-web/src/assets/style/transition.scss

@@ -0,0 +1,31 @@
+/*fade*/
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.28s;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+
+/*fade*/
+.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;
+}
+