From b6c2b702e4a776d9c502c6e2b2a7ef4e3c1ef6e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E9=9C=84?= <zhaoxiaox0053@163.com>
Date: Fri, 25 Aug 2023 15:49:26 +0800
Subject: [PATCH] =?UTF-8?q?update=20JTable=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/less/common.less          | 112 +++-
 src/components/jero/JTable.vue       |   2 +-
 src/components/page/GlobalLayout.vue | 855 ++++++++++++++-------------
 3 files changed, 533 insertions(+), 436 deletions(-)

diff --git a/src/assets/less/common.less b/src/assets/less/common.less
index 3c92d40c..66d2ac41 100644
--- a/src/assets/less/common.less
+++ b/src/assets/less/common.less
@@ -1,4 +1,3 @@
-
 /*列表上方操作按钮区域*/
 /*.ant-card-body .table-operator {
   margin-bottom: 8px;
@@ -19,11 +18,13 @@
   z-index: 1;
   border-right: 1px #e8e8e8 solid;
 }
+
 .nio-drag-handler:hover,
-.nio-drag-handler:focus{
-  cursor: col-resize!important;
-  border-right: 2px solid #0bd9d9!important;
+.nio-drag-handler:focus {
+  cursor: col-resize !important;
+  border-right: 2px solid #0bd9d9 !important;
 }
+
 /* 列表可拖拽改变列宽 end */
 
 /*列表上方操作按钮区域*/
@@ -50,6 +51,7 @@
 .table-operator .ant-btn {
   margin: 0 8px 8px 0;
 }
+
 .table-operator .ant-btn-group .ant-btn {
   margin: 0;
 }
@@ -57,15 +59,18 @@
 .table-operator .ant-btn-group .ant-btn:last-child {
   margin: 0 8px 8px 0;
 }
+
 /*列表td的padding设置 可以控制列表大小*/
 .ant-table-tbody .ant-table-row td {
   padding-top: 15px;
   padding-bottom: 15px;
 }
+
 // 表格内操作列按钮的样式
-.ant-table-tbody .table-action a{
+.ant-table-tbody .table-action a {
   margin: 0 8px;
 }
+
 .ant-table-tbody .table-action a:nth-of-type(1) {
   margin-left: 0;
 }
@@ -86,21 +91,34 @@
   height: 90% !important;
   overflow-y: hidden
 }
+
 /*列表中有图片的加这个样式 参考用户管理*/
 .anty-img-wrap {
   height: 25px;
   position: relative;
 }
+
 .anty-img-wrap > img {
   max-height: 100%;
 }
+
 /*列表中范围查询样式*/
-.query-group-cust{width: calc(50% - 10px)}
-.query-group-split-cust:before{content:"~";width: 20px;display: inline-block;text-align: center}
+.query-group-cust {
+  width: calc(50% - 10px)
+}
+
+.query-group-split-cust:before {
+  content: "~";
+  width: 20px;
+  display: inline-block;
+  text-align: center
+}
 
 
 /*erp风格子表外框padding设置*/
-.ant-card-wider-padding.cust-erp-sub-tab>.ant-card-body{padding:5px 12px}
+.ant-card-wider-padding.cust-erp-sub-tab > .ant-card-body {
+  padding: 5px 12px
+}
 
 /* 内嵌子表背景颜色 */
 .j-inner-table-wrapper /deep/ .ant-table-expanded-row .ant-table-wrapper .ant-table-tbody .ant-table-row {
@@ -108,7 +126,9 @@
 }
 
 /**隐藏样式-modal确定按钮 */
-.jee-hidden{display: none}
+.jee-hidden {
+  display: none
+}
 
 // 抽屉按钮区域
 .drawer-bootom-button {
@@ -125,64 +145,79 @@
 }
 
 // 新增编辑表单样式
-.form-add{
+.form-add {
   margin-bottom: 40px;
+
   /deep/ .ant-form-item-label {
     width: 130px;
   }
+
   /deep/ .ant-form-item-control-wrapper {
     display: inline-block;
     width: 100%;
   }
 }
-.item-model{
+
+.item-model {
   width: calc(100% - 130px);
   display: inline-block;
   margin-top: 2px;
   height: 40px;
   margin-bottom: 24px;
+
   /deep/ .ant-form-item-control-wrapper {
     width: 100%;
   }
 }
+
 .item-model-textarea {
   width: calc(100% - 130px);
   display: inline-block;
   margin-top: 2px;
+
   /deep/ .ant-form-item-control-wrapper {
     width: 100% !important;
   }
 }
+
 .box-input {
   /deep/ .ant-select-selection--single {
     height: 38px;
   }
+
   /deep/ .ant-select-selection--multiple {
     height: 38px;
-    .ant-select-selection__rendered > ul > li{
+
+    .ant-select-selection__rendered > ul > li {
       margin-top: 6px;
     }
   }
+
   /deep/ .ant-select-selection__rendered {
     line-height: 38px;
     height: 38px;
   }
+
   /deep/ .ant-calendar-picker {
     line-height: 38px;
     height: 38px;
   }
+
   /deep/ .ant-calendar-picker-input {
     height: 38px;
   }
+
   /deep/ .ant-input-number-input-wrap {
     line-height: 38px;
     height: 38px;
   }
 }
+
 .box-title-text {
   line-height: 1.4;
   display: flex;
   /*align-items: center;*/
+
   .title-text {
     width: 114px;
     text-align: right;
@@ -195,71 +230,88 @@
     white-space: nowrap;
     height: 42px;
     line-height: 42px;
+
     .required {
       color: red;
       margin-right: 4px;
     }
   }
-  .item-model{
+
+  .item-model {
     width: calc(100% - 130px);
     display: inline-block;
     margin-top: 2px;
     height: 100%;
     margin-bottom: 24px;
+
     /deep/ .ant-form-item-control-wrapper {
       width: 100%;
     }
   }
+
   .item-model-textarea {
     width: calc(100% - 130px);
     display: inline-block;
     margin-top: 2px;
+
     /deep/ .ant-form-item-control-wrapper {
       width: 100% !important;
     }
   }
+
   .box-input {
     display: inline-block;
     height: 38px;
     width: 100%;
+
     /deep/ .ant-select-selection--single {
       height: 38px;
     }
+
     /deep/ .ant-select-selection--multiple {
       height: 38px;
-      .ant-select-selection__rendered > ul > li{
+
+      .ant-select-selection__rendered > ul > li {
         margin-top: 6px;
       }
     }
+
     /deep/ .ant-select-selection__rendered {
       line-height: 38px;
       height: 38px;
     }
+
     /deep/ .ant-calendar-picker {
       line-height: 38px;
       height: 38px;
     }
+
     /deep/ .ant-calendar-picker-input {
       height: 38px;
     }
+
     /deep/ .ant-input-number-input-wrap {
       line-height: 38px;
       height: 38px;
     }
   }
 }
+
 .box-input {
   display: inline-block;
   height: 38px;
   width: 100%;
 }
+
 .required {
   color: red;
   margin-right: 4px;
 }
+
 .title-text-text {
   margin-top: 9px;
 }
+
 .header-text {
   font-size: 16px;
   font-weight: bold;
@@ -268,6 +320,7 @@
   height: 30px;
   margin-bottom: 30px;
 }
+
 .button-text {
   height: 38px;
   width: calc(100% - 100px);
@@ -276,6 +329,7 @@
   border: 1px #D52C26 solid;
   color: #D52C26;
 }
+
 // 新增编辑表单样式--完
 
 // 左树右表布局
@@ -340,6 +394,7 @@
   //transform: translateX(-8px);
   margin-left: -8px;
 }
+
 /* switch的样式--end */
 
 /*分页的样式start*/
@@ -360,3 +415,32 @@
 }
 
 /*分页的样式end*/
+
+/*页面左右布局*/
+.page-left-right-layout {
+  height: 85vh;
+  width: 100%;
+
+  .ant-card-body {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    display: flex;
+  }
+
+  .page-left-box {
+    width: 248px;
+    height: 100%;
+    border-right: 1px solid #E5E6EB;
+    padding: 24px;
+    box-sizing: border-box;
+  }
+
+  .page-right-box {
+    flex: 1;
+    width: 0;
+    height: 100%;
+    padding: 24px;
+    box-sizing: border-box;
+  }
+}
diff --git a/src/components/jero/JTable.vue b/src/components/jero/JTable.vue
index 97a3d4ce..6531c6d3 100644
--- a/src/components/jero/JTable.vue
+++ b/src/components/jero/JTable.vue
@@ -230,7 +230,7 @@ export default {
         // 如果不需要配置冻结列，就按表头本身传的参数决定固定列
         const fixed = this.needSettingColumnHideOrFreeze ? this.settingColumnsObj.freeze.includes(key) : col.fixed
         col.hide = this.settingColumnsObj.hide.includes(key)
-        col.fixed = key === actionKey ? 'right' : fixed
+        col.fixed = fixed
         // 如果是字符串就转换成数字（因为实现拖拽，单位只能是px）
         col.width = col.width && parseInt(col.width + '')
         // 如果没有最小宽度就获取统一设置的最小宽度
diff --git a/src/components/page/GlobalLayout.vue b/src/components/page/GlobalLayout.vue
index 0390c6e1..46b6643d 100644
--- a/src/components/page/GlobalLayout.vue
+++ b/src/components/page/GlobalLayout.vue
@@ -74,9 +74,9 @@
       </a-layout-content>
 
       <!-- layout footer -->
-      <a-layout-footer style="padding: 0">
-        <global-footer/>
-      </a-layout-footer>
+      <!--      <a-layout-footer style="padding: 0">-->
+      <!--        <global-footer/>-->
+      <!--      </a-layout-footer>-->
     </a-layout>
 
     <!-- update-start---- author:os_chengtgen -- date:20190830 --  for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ---- -->
@@ -189,171 +189,194 @@ export default {
 </script>
 
 <style lang="less">
-  body {
-    // 打开滚动条:有即显示，无则不显示
-    overflow-y: auto;
+body {
+  // 打开滚动条:有即显示，无则不显示
+  overflow-y: auto;
 
-    &.colorWeak {
-      filter: invert(80%);
-    }
+  &.colorWeak {
+    filter: invert(80%);
   }
+}
 
-  .layout {
-    min-height: 100vh !important;
-    overflow-x: hidden;
+.layout {
+  min-height: 100vh !important;
+  overflow-x: hidden;
 
-    &.mobile {
+  &.mobile {
 
-      .ant-layout-content {
+    .ant-layout-content {
 
-        .content {
-          margin: 24px 0 0;
-        }
-      }
-
-      /**
-       * ant-table-wrapper
-       * 覆盖的表格手机模式样式，如果想修改在手机上表格最低宽度，可以在这里改动
-       */
-      .ant-table-wrapper {
-        .ant-table-content {
-          overflow-y: auto;
-        }
-        .ant-table-body {
-          min-width: 800px;
-        }
-      }
-      .sidemenu {
-        .ant-header-fixedHeader {
-
-          &.ant-header-side-opened, &.ant-header-side-closed {
-            width: 100%
-          }
-        }
-      }
-
-      .topmenu {
-        /* 必须为 topmenu  才能启用流式布局 */
-        &.content-width-Fluid {
-          .header-index-wide {
-            margin-left: 0;
-          }
-        }
-      }
-      .header, .top-nav-header-index {
-        .user-wrapper .action {
-          padding: 0 12px;
-        }
+      .content {
+        margin: 24px 0 0;
       }
     }
 
-    &.ant-layout-has-sider {
-      flex-direction: row;
-    }
+    /**
+     * ant-table-wrapper
+     * 覆盖的表格手机模式样式，如果想修改在手机上表格最低宽度，可以在这里改动
+     */
 
-    .trigger {
-      font-size: 22px;
-      line-height: 42px;
-      padding: 0 18px;
-      cursor: pointer;
-      transition: color 300ms, background 300ms;
-
-      &:hover {
-        background: rgba(255, 255, 255, 0.3);
-      }
-    }
-
-    .topmenu {
-      .ant-header-fixedHeader {
-        position: fixed;
-        top: 0;
-        right: 0;
-        z-index: 9;
-        width: 100%;
-        transition: width .2s;
-
-        &.ant-header-side-opened {
-          width: 100%;
-        }
-
-        &.ant-header-side-closed {
-          width: 100%;
-        }
-      }
-      /* 必须为 topmenu  才能启用流式布局 */
-      &.content-width-Fluid {
-        .header-index-wide {
-          max-width: unset;
-          margin-left: 24px;
-        }
-
-        .page-header-index-wide {
-          max-width: unset;
-        }
+    .ant-table-wrapper {
+      .ant-table-content {
+        overflow-y: auto;
       }
 
+      .ant-table-body {
+        min-width: 800px;
+      }
     }
 
     .sidemenu {
       .ant-header-fixedHeader {
-        position: fixed;
-        top: 0;
-        right: 0;
-        z-index: 9;
-        width: 100%;
-        transition: width .2s;
 
-        &.ant-header-side-opened {
-          width: calc(100% - 200px)
-        }
-
-        &.ant-header-side-closed {
-          width: calc(100% - 80px)
+        &.ant-header-side-opened, &.ant-header-side-closed {
+          width: 100%
         }
       }
     }
 
-    .header {
-      height: 64px;
-      padding: 0 12px 0 0;
-      background: #fff;
-      box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
-      position: relative;
+    .topmenu {
+      /* 必须为 topmenu  才能启用流式布局 */
+
+      &.content-width-Fluid {
+        .header-index-wide {
+          margin-left: 0;
+        }
+      }
     }
 
     .header, .top-nav-header-index {
+      .user-wrapper .action {
+        padding: 0 12px;
+      }
+    }
+  }
 
+  &.ant-layout-has-sider {
+    flex-direction: row;
+  }
+
+  .trigger {
+    font-size: 22px;
+    line-height: 42px;
+    padding: 0 18px;
+    cursor: pointer;
+    transition: color 300ms, background 300ms;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.3);
+    }
+  }
+
+  .topmenu {
+    .ant-header-fixedHeader {
+      position: fixed;
+      top: 0;
+      right: 0;
+      z-index: 9;
+      width: 100%;
+      transition: width .2s;
+
+      &.ant-header-side-opened {
+        width: 100%;
+      }
+
+      &.ant-header-side-closed {
+        width: 100%;
+      }
+    }
+
+    /* 必须为 topmenu  才能启用流式布局 */
+
+    &.content-width-Fluid {
+      .header-index-wide {
+        max-width: unset;
+        margin-left: 24px;
+      }
+
+      .page-header-index-wide {
+        max-width: unset;
+      }
+    }
+
+  }
+
+  .sidemenu {
+    .ant-header-fixedHeader {
+      position: fixed;
+      top: 0;
+      right: 0;
+      z-index: 9;
+      width: 100%;
+      transition: width .2s;
+
+      &.ant-header-side-opened {
+        width: calc(100% - 200px)
+      }
+
+      &.ant-header-side-closed {
+        width: calc(100% - 80px)
+      }
+    }
+  }
+
+  .header {
+    height: 64px;
+    padding: 0 12px 0 0;
+    background: #fff;
+    box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
+    position: relative;
+  }
+
+  .header, .top-nav-header-index {
+
+    .user-wrapper {
+      float: right;
+      height: 100%;
+
+      .action {
+        cursor: pointer;
+        padding: 0 14px;
+        display: inline-block;
+        transition: all .3s;
+
+        height: 70%;
+        line-height: 46px;
+
+        &.action-full {
+          height: 100%;
+        }
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.3);
+        }
+
+        .avatar {
+          margin: 20px 10px 20px 0;
+          color: #1890ff;
+          background: hsla(0, 0%, 100%, .85);
+          vertical-align: middle;
+        }
+
+        .icon {
+          font-size: 16px;
+          padding: 4px;
+        }
+
+        .anticon {
+          color: inherit;
+        }
+      }
+    }
+
+    &.dark {
       .user-wrapper {
-        float: right;
-        height: 100%;
 
         .action {
-          cursor: pointer;
-          padding: 0 14px;
-          display: inline-block;
-          transition: all .3s;
-
-          height: 70%;
-          line-height: 46px;
-
-          &.action-full {
-            height: 100%;
-          }
+          color: black;
 
           &:hover {
-            background: rgba(255, 255, 255, 0.3);
-          }
-
-          .avatar {
-            margin: 20px 10px 20px 0;
-            color: #1890ff;
-            background: hsla(0, 0%, 100%, .85);
-            vertical-align: middle;
-          }
-
-          .icon {
-            font-size: 16px;
-            padding: 4px;
+            background: rgba(0, 0, 0, 0.05);
           }
 
           .anticon {
@@ -361,346 +384,336 @@ export default {
           }
         }
       }
-
-      &.dark {
-        .user-wrapper {
-
-          .action {
-            color: black;
-
-            &:hover {
-              background: rgba(0, 0, 0, 0.05);
-            }
-
-            .anticon {
-              color: inherit;
-            }
-          }
-        }
-      }
-    }
-
-    &.mobile {
-      .top-nav-header-index {
-
-        .header-index-wide {
-
-          .header-index-left {
-
-            .trigger {
-              color: rgba(255, 255, 255, 0.85);
-              padding: 0 12px;
-            }
-
-            .logo.top-nav-header {
-              text-align: center;
-              width: 56px;
-              line-height: 58px;
-            }
-          }
-        }
-
-        .user-wrapper .action .avatar {
-          margin: 20px 0;
-        }
-
-        &.light {
-
-          .header-index-wide {
-
-            .header-index-left {
-              .trigger {
-                color: rgba(0, 0, 0, 0.65);
-              }
-            }
-          }
-          //
-        }
-      }
-    }
-
-    &.tablet {
-      // overflow: hidden; text-overflow:ellipsis; white-space: nowrap;
-      .top-nav-header-index {
-
-        .header-index-wide {
-
-          .header-index-left {
-            .logo > a {
-              overflow: hidden;
-              text-overflow: ellipsis;
-              white-space: nowrap;
-            }
-          }
-        }
-      }
-
     }
+  }
 
+  &.mobile {
     .top-nav-header-index {
-      box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
-      position: relative;
-      transition: background .3s, width .2s;
 
       .header-index-wide {
-        width: 100%;
-        margin: auto;
-        padding: 0 20px 0 0;
-        display: flex;
-        height: 59px;
-
-        .ant-menu.ant-menu-horizontal {
-          border: none;
-          height: 64px;
-          line-height: 64px;
-        }
 
         .header-index-left {
-          flex: 1 1;
-          display: flex;
+
+          .trigger {
+            color: rgba(255, 255, 255, 0.85);
+            padding: 0 12px;
+          }
 
           .logo.top-nav-header {
-            width: 165px;
-            height: 64px;
-            position: relative;
-            line-height: 64px;
-            transition: all .3s;
-            overflow: hidden;
-
-            img {
-              display: inline-block;
-              vertical-align: middle;
-              height: 32px;
-            }
-
-            h1 {
-              color: #fff;
-              display: inline-block;
-              vertical-align: top;
-              font-size: 16px;
-              margin: 0 0 0 12px;
-              font-weight: 400;
-            }
+            text-align: center;
+            width: 56px;
+            line-height: 58px;
           }
         }
+      }
 
-        .header-index-right {
-          float: right;
-          height: 59px;
-          overflow: hidden;
-          .action:hover {
-            background-color: rgba(0, 0, 0, 0.05);
-          }
-        }
+      .user-wrapper .action .avatar {
+        margin: 20px 0;
       }
 
       &.light {
-        background-color: #fff;
 
         .header-index-wide {
+
           .header-index-left {
-            .logo {
-              h1 {
-                color: #002140;
-              }
+            .trigger {
+              color: rgba(0, 0, 0, 0.65);
             }
           }
         }
+
+        //
       }
+    }
+  }
 
-      &.dark {
+  &.tablet {
+    // overflow: hidden; text-overflow:ellipsis; white-space: nowrap;
+    .top-nav-header-index {
 
-        .user-wrapper {
+      .header-index-wide {
 
-          .action {
-            color: white;
-
-            &:hover {
-              background: rgba(255, 255, 255, 0.3);
-            }
+        .header-index-left {
+          .logo > a {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
           }
         }
-        .header-index-wide .header-index-left .trigger:hover {
-          background: rgba(255, 255, 255, 0.3);
-        }
       }
-
-    }
-
-    // 内容区
-    .layout-content {
-      margin: 24px 24px 0;
-      height: 64px;
-      padding: 0 12px 0 0;
     }
 
   }
 
-  .topmenu {
-    .page-header-index-wide {
-      margin: 0 auto;
-      width: 100%;
-    }
-  }
-
-  // drawer-sider 自定义
-  .ant-drawer.drawer-sider {
-    .sider {
-      box-shadow: none;
-    }
-
-    &.dark {
-      .ant-drawer-content {
-        background-color: rgb(0, 21, 41);
-      }
-    }
-    &.light {
-      box-shadow: none;
-      .ant-drawer-content {
-        background-color: #fff;
-      }
-    }
-
-    .ant-drawer-body {
-      padding: 0
-    }
-  }
-
-  // 菜单样式
-  .sider {
-    box-shadow: 2px 116px 6px 0 rgba(0, 21, 41, .35);
+  .top-nav-header-index {
+    box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
     position: relative;
-    z-index: 10;
+    transition: background .3s, width .2s;
 
-    &.ant-fixed-sidemenu {
-      position: fixed;
-      height: 100%;
-    }
+    .header-index-wide {
+      width: 100%;
+      margin: auto;
+      padding: 0 20px 0 0;
+      display: flex;
+      height: 59px;
 
-    .logo {
-      height: 64px;
-      position: relative;
-      line-height: 64px;
-      padding-left: 24px;
-      -webkit-transition: all .3s;
-      transition: all .3s;
-      background: #002140;
-      overflow: hidden;
-
-      img, h1 {
-        display: inline-block;
-        vertical-align: middle;
+      .ant-menu.ant-menu-horizontal {
+        border: none;
+        height: 64px;
+        line-height: 64px;
       }
 
-      img {
-        height: 32px;
+      .header-index-left {
+        flex: 1 1;
+        display: flex;
+
+        .logo.top-nav-header {
+          width: 165px;
+          height: 64px;
+          position: relative;
+          line-height: 64px;
+          transition: all .3s;
+          overflow: hidden;
+
+          img {
+            display: inline-block;
+            vertical-align: middle;
+            height: 32px;
+          }
+
+          h1 {
+            color: #fff;
+            display: inline-block;
+            vertical-align: top;
+            font-size: 16px;
+            margin: 0 0 0 12px;
+            font-weight: 400;
+          }
+        }
       }
 
-      h1 {
-        color: #fff;
-        font-size: 18px;
-        margin: 0 0 0 8px;
-        font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-        font-weight: 600;
+      .header-index-right {
+        float: right;
+        height: 59px;
+        overflow: hidden;
+
+        .action:hover {
+          background-color: rgba(0, 0, 0, 0.05);
+        }
       }
     }
 
     &.light {
       background-color: #fff;
-      box-shadow: 2px 116px 8px 0 rgba(29, 35, 41, 0.05);
 
-      .logo {
-        background: #fff;
-        box-shadow: 1px 1px 0 0 #e8e8e8;
-
-        h1 {
-          color: unset;
-        }
-      }
-
-      .ant-menu-light {
-        border-right-color: transparent;
-      }
-    }
-
-  }
-
-  // 外置的样式控制
-  .user-dropdown-menu-wrapper.ant-dropdown-menu {
-    padding: 4px 0;
-
-    .ant-dropdown-menu-item {
-      width: 160px;
-    }
-
-    .ant-dropdown-menu-item > .anticon:first-child,
-    .ant-dropdown-menu-item > a > .anticon:first-child,
-    .ant-dropdown-menu-submenu-title > .anticon:first-child,
-    .ant-dropdown-menu-submenu-title > a > .anticon:first-child {
-      min-width: 12px;
-      margin-right: 8px;
-    }
-
-  }
-
-  // 数据列表 样式
-  .table-alert {
-    margin-bottom: 16px;
-  }
-
-  .table-page-search-wrapper {
-
-    .ant-form-inline {
-
-      .ant-form-item {
-        display: flex;
-        margin-bottom: 24px;
-        margin-right: 0;
-
-        .ant-form-item-control-wrapper {
-          flex: 1 1;
-          display: inline-block;
-          vertical-align: middle;
-        }
-
-        > .ant-form-item-label {
-          line-height: 32px;
-          padding-right: 8px;
-          width: auto;
-          min-width: 110px;
-          color: #000F16;
-          text-align: right;
-          font-weight: 500;
-          font-size: 14px;
-          // 蔚来没有冒号，所以去掉
-          & > label::after {
-            content: '' !important;
-            margin: 0;
+      .header-index-wide {
+        .header-index-left {
+          .logo {
+            h1 {
+              color: #002140;
+            }
           }
         }
-        .ant-form-item-control {
-          height: 32px;
-          line-height: 32px;
+      }
+    }
+
+    &.dark {
+
+      .user-wrapper {
+
+        .action {
+          color: white;
+
+          &:hover {
+            background: rgba(255, 255, 255, 0.3);
+          }
         }
       }
-    }
 
-    .table-page-search-submitButtons {
-      display: block;
-      margin-bottom: 24px;
-      white-space: nowrap;
+      .header-index-wide .header-index-left .trigger:hover {
+        background: rgba(255, 255, 255, 0.3);
+      }
     }
 
   }
 
-  .content {
+  // 内容区
+  .layout-content {
+    margin: 24px 24px 0;
+    height: 64px;
+    padding: 0 12px 0 0;
+  }
 
-    .table-operator {
-      margin-bottom: 18px;
+}
 
-      button {
-        margin-right: 8px;
+.topmenu {
+  .page-header-index-wide {
+    margin: 0 auto;
+    width: 100%;
+  }
+}
+
+// drawer-sider 自定义
+.ant-drawer.drawer-sider {
+  .sider {
+    box-shadow: none;
+  }
+
+  &.dark {
+    .ant-drawer-content {
+      background-color: rgb(0, 21, 41);
+    }
+  }
+
+  &.light {
+    box-shadow: none;
+
+    .ant-drawer-content {
+      background-color: #fff;
+    }
+  }
+
+  .ant-drawer-body {
+    padding: 0
+  }
+}
+
+// 菜单样式
+.sider {
+  box-shadow: 2px 116px 6px 0 rgba(0, 21, 41, .35);
+  position: relative;
+  z-index: 10;
+
+  &.ant-fixed-sidemenu {
+    position: fixed;
+    height: 100%;
+  }
+
+  .logo {
+    height: 64px;
+    position: relative;
+    line-height: 64px;
+    padding-left: 24px;
+    -webkit-transition: all .3s;
+    transition: all .3s;
+    background: #002140;
+    overflow: hidden;
+
+    img, h1 {
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    img {
+      height: 32px;
+    }
+
+    h1 {
+      color: #fff;
+      font-size: 18px;
+      margin: 0 0 0 8px;
+      font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+      font-weight: 600;
+    }
+  }
+
+  &.light {
+    background-color: #fff;
+    box-shadow: 2px 116px 8px 0 rgba(29, 35, 41, 0.05);
+
+    .logo {
+      background: #fff;
+      box-shadow: 1px 1px 0 0 #e8e8e8;
+
+      h1 {
+        color: unset;
+      }
+    }
+
+    .ant-menu-light {
+      border-right-color: transparent;
+    }
+  }
+
+}
+
+// 外置的样式控制
+.user-dropdown-menu-wrapper.ant-dropdown-menu {
+  padding: 4px 0;
+
+  .ant-dropdown-menu-item {
+    width: 160px;
+  }
+
+  .ant-dropdown-menu-item > .anticon:first-child,
+  .ant-dropdown-menu-item > a > .anticon:first-child,
+  .ant-dropdown-menu-submenu-title > .anticon:first-child,
+  .ant-dropdown-menu-submenu-title > a > .anticon:first-child {
+    min-width: 12px;
+    margin-right: 8px;
+  }
+
+}
+
+// 数据列表 样式
+.table-alert {
+  margin-bottom: 16px;
+}
+
+.table-page-search-wrapper {
+
+  .ant-form-inline {
+
+    .ant-form-item {
+      display: flex;
+      margin-bottom: 24px;
+      margin-right: 0;
+
+      .ant-form-item-control-wrapper {
+        flex: 1 1;
+        display: inline-block;
+        vertical-align: middle;
+      }
+
+      > .ant-form-item-label {
+        line-height: 32px;
+        padding-right: 8px;
+        width: auto;
+        min-width: 110px;
+        color: #000F16;
+        text-align: right;
+        font-weight: 500;
+        font-size: 14px;
+        // 蔚来没有冒号，所以去掉
+        & > label::after {
+          content: '' !important;
+          margin: 0;
+        }
+      }
+
+      .ant-form-item-control {
+        height: 32px;
+        line-height: 32px;
       }
     }
   }
+
+  .table-page-search-submitButtons {
+    display: block;
+    margin-bottom: 24px;
+    white-space: nowrap;
+  }
+
+}
+
+.content {
+
+  .table-operator {
+    margin-bottom: 18px;
+
+    button {
+      margin-right: 8px;
+    }
+  }
+}
 </style>