diff --git a/src/assets/images/shuju/main/card-title-bg.png b/src/assets/images/shuju/main/card-title-bg.png
new file mode 100644
index 000000000..504cabc05
Binary files /dev/null and b/src/assets/images/shuju/main/card-title-bg.png differ
diff --git a/src/assets/images/shuju/main/corner-left-bottom.png b/src/assets/images/shuju/main/corner-left-bottom.png
new file mode 100644
index 000000000..b8b6e7d06
Binary files /dev/null and b/src/assets/images/shuju/main/corner-left-bottom.png differ
diff --git a/src/assets/images/shuju/main/corner-left-top.png b/src/assets/images/shuju/main/corner-left-top.png
new file mode 100644
index 000000000..053f7ae3e
Binary files /dev/null and b/src/assets/images/shuju/main/corner-left-top.png differ
diff --git a/src/assets/images/shuju/main/corner-right-bottom.png b/src/assets/images/shuju/main/corner-right-bottom.png
new file mode 100644
index 000000000..e45a844be
Binary files /dev/null and b/src/assets/images/shuju/main/corner-right-bottom.png differ
diff --git a/src/assets/images/shuju/main/corner-right-top.png b/src/assets/images/shuju/main/corner-right-top.png
new file mode 100644
index 000000000..49b26be95
Binary files /dev/null and b/src/assets/images/shuju/main/corner-right-top.png differ
diff --git a/src/assets/images/shuju/main/nav-left-on.png b/src/assets/images/shuju/main/nav-left-on.png
new file mode 100644
index 000000000..65ecc4d8b
Binary files /dev/null and b/src/assets/images/shuju/main/nav-left-on.png differ
diff --git a/src/assets/images/shuju/main/nav-left.png b/src/assets/images/shuju/main/nav-left.png
new file mode 100644
index 000000000..9ad604472
Binary files /dev/null and b/src/assets/images/shuju/main/nav-left.png differ
diff --git a/src/assets/images/shuju/main/nav-right-on.png b/src/assets/images/shuju/main/nav-right-on.png
new file mode 100644
index 000000000..436c097a9
Binary files /dev/null and b/src/assets/images/shuju/main/nav-right-on.png differ
diff --git a/src/assets/images/shuju/main/nav-right.png b/src/assets/images/shuju/main/nav-right.png
new file mode 100644
index 000000000..2082e72be
Binary files /dev/null and b/src/assets/images/shuju/main/nav-right.png differ
diff --git a/src/assets/images/shuju/main/top-bg.png b/src/assets/images/shuju/main/top-bg.png
new file mode 100644
index 000000000..ce3254960
Binary files /dev/null and b/src/assets/images/shuju/main/top-bg.png differ
diff --git a/src/assets/scss/main-shuju.scss b/src/assets/scss/main-shuju.scss
index a87d382e7..e728b228e 100644
--- a/src/assets/scss/main-shuju.scss
+++ b/src/assets/scss/main-shuju.scss
@@ -1,684 +1,113 @@
-@import "~@/element-ui/theme-variables.scss";
-@import "./shuju-variables.scss";
 @import "./c/config";
 @import "./c/function";
-@import "./modules/visual/c/common.scss";
 
-.g-main {
-  padding: 10px 20px 10px;
+.g-fx {
+  background-color: #00023a;
 }
 
-.m-iframe {
-  position: relative;
-  box-sizing: content-box;
-  width: calc(100% + 20px);
-  margin: -10px -20px -10px;
-  z-index: 100;
-}
-
-/* Reset element-ui
------------------------------- */
-.g-bd {
-  background-image: url(../img/shuju/bg.jpg);
-  background-size: cover;
-  background-position: center 0;
-  height: 100%;
-  @include scrollBar;
-
-  .el-card + .el-card {
-    margin-top: 15px;
-  }
-  .el-input__prefix .el-input__icon {
-    display: inline-block;
-    vertical-align: middle;
-  }
-  .el-date-editor .el-range-separator {
-    width: 8%;
+.i-corner {
+  position: absolute;
+  z-index: 0;
+  width: 121px;
+  &.z-left-top {
+    top: 15px;
+    left: 15px;
   }
-  .el-table th {
-    color: $--color-text-primary;
-    background-color: $--background-color-base;
+  &.z-left-bottom {
+    bottom: 15px;
+    left: 15px;
   }
-  .el-pagination {
-    margin-top: 15px;
-    text-align: right;
+  &.z-right-top {
+    top: 15px;
+    right: 15px;
   }
-  .el-table__expand-icon {
-    display: inline-block;
-    width: 14px;
-    vertical-align: middle;
-    margin-right: 5px;
+  &.z-right-bottom {
+    bottom: 15px;
+    right: 15px;
   }
 }
 
-/* Common
------------------------------- */
-// 图标
-.icon-svg {
-  width: 1em;
-  height: 1em;
-  fill: currentColor;
-  vertical-align: middle;
-  overflow: hidden;
-}
-// 卡片
-.aui-card--fill .el-card__header {
-  height: $content--card-header-height;
-  line-height: $content--card-header-height - 36px;
-}
-.aui-card__title {
-  font-size: 16px;
-}
-// 表单
-.aui-form__label-icon {
-  display: inline-block;
-  margin: 0 3px;
-  vertical-align: middle;
-  font-size: 18px;
-  color: $--color-text-secondary;
-}
-// 按钮
-.aui-button--dashed {
-  border-style: dashed;
-  &:focus,
-  &:hover {
-    background-color: transparent;
-  }
-  &-add {
-    > span > *[class*="el-icon-"],
-    > span > *[class*="icon"] {
-      vertical-align: middle;
-      font-size: 18px;
-      margin-right: 5px;
-    }
-  }
-}
-
-/* Layout
------------------------------- */
-.g-bd {
+.m-topnav {
   position: relative;
-  padding-top: $navbar--height;
-
-  /* Sidebar fold
------------------------------- */
-  &.z-sidebar--fold {
-    .navbar {
-      &__header,
-      &__brand {
-        width: $sidebar--width-fold;
-      }
-      &__brand {
-        &-lg {
-          display: none;
-        }
-        &-mini {
-          display: inline-block;
-        }
-      }
-      &__icon-menu--switch {
-        transform: rotateZ(180deg);
-      }
-    }
-    .aui-sidebar {
-      &__inner {
-        width: $sidebar--width-fold + 20px;
-      }
-      &,
-      &__menu {
-        width: $sidebar--width-fold;
-      }
-      &__menu > li > .el-submenu__title {
-        text-align: center;
-      }
-      &__menu-icon {
-        margin-right: 0;
-        font-size: 18px;
-      }
-    }
-    .g-cnt {
-      &__wrapper {
-        margin-left: $sidebar--width-fold;
-      }
-      &--tabs > .el-tabs > .el-tabs__header {
-        left: $sidebar--width-fold;
-      }
-    }
-  }
-
-  &.z-sidebar--noside {
-    .aui-sidebar {
-      display: none !important;
-    }
-    .g-cnt {
-      &__wrapper {
-        margin-left: 0 !important;
-      }
-      &--tabs > .el-tabs > .el-tabs__header {
-        left: 0 !important;
-      }
-    }
-  }
-
-  &.z-iframe {
-    padding-top: 0;
-    .aui-content--tabs {
-      padding-top: 0;
-    }
-  }
-}
-
-/* Navbar
------------------------------- */
-.m-navbar {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  z-index: 1030;
-  display: flex;
-  align-items: stretch;
-  height: $navbar--height;
-  // background-color: $--color-primary;
-  // box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05);
-  background: linear-gradient(180deg, #00023f, #176dec);
-  box-shadow: 0px 3px 16px 0px rgba(187, 187, 227, 0.35);
-  font-size: 19px;
-  .el-menu-item {
-    font-size: 19px;
-  }
-
-  .navbar--colorful {
-    .navbar__body {
-      background-color: transparent;
-    }
-    .navbar__menu {
-      > .el-menu-item,
-      > .el-submenu > .el-submenu__title {
-        color: #fff;
-        &:focus,
-        &:hover {
-          color: #fff;
-          background-color: mix(#000, $--color-primary, 15%);
-        }
-      }
-      > .el-menu-item.is-active,
-      > .el-submenu.is-active > .el-submenu__title {
-        color: #fff;
-        &:focus,
-        &:hover {
-          color: #fff;
-        }
-      }
-      .el-menu-item i,
-      .el-submenu__title i,
-      .el-menu-item svg,
-      .el-submenu__title svg,
-      .el-menu-item .el-dropdown {
-        color: #fff !important;
-      }
-      .el-button {
-        color: #fff;
-        background-color: transparent;
-      }
-    }
-    .navbar__search {
-      &-txt {
-        .el-input__inner {
-          color: #fff;
-          border-color: #fff;
-          &::-webkit-input-placeholder {
-            color: #fff;
-          }
-        }
-      }
-    }
-  }
-  .navbar__header {
-    position: relative;
-    width: $sidebar--width;
-    height: $navbar--height;
-    transition: width 0.3s;
-  }
-  .navbar__brand {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 10px 20px;
-    margin: 0;
-    width: 100%;
-    height: 100%;
-    font-size: 28px;
-    font-weight: bold;
-    text-transform: uppercase;
-    white-space: nowrap;
-    // overflow: hidden;
-    transition: width 0.3s;
-    font-family: FZZCHJW;
+  z-index: 1;
+  width: 100%;
+  height: 101px;
+  background-image: url(../images/shuju/main/top-bg.png);
+  background-repeat: no-repeat;
+  background-position: top center;
+  background-size: 100%;
+  .title {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    margin: 0 auto;
+    line-height: 70px;
+    text-align: center;
+    font-size: 32px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
     color: #ffffff;
-    background: linear-gradient(0deg, #03c7ff 24.609375%, #ffffff 81.0791015625%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: rgba(#fff, 0.7);
-
-    &::before {
-      position: absolute;
-      content: "";
-      z-index: 100000;
-      display: block;
-      bottom: -10px;
-      left: -920px;
-      right: -1000px;
-      margin: 0 auto;
-      width: 400px;
-      height: 20px;
-      // background-color: #fff;
-      background-image: url(../img/shuju/flash.png);
-      background-size: cover;
-      background-position: center center;
-    }
-
-    &-lg,
-    &-mini {
-      max-width: 100%;
-      color: #fff;
-      cursor: pointer;
-      &:focus,
-      &:hover {
-        color: #fff;
-        text-decoration: none;
-      }
-    }
-    &-mini {
-      display: none;
-    }
   }
-  .navbar__body {
-    position: relative;
-    display: flex;
-    flex: 1;
-    // background-color: #fff;
-    background-color: transparent;
-    // overflow: hidden;
-  }
-  .navbar__menu {
-    background-color: transparent;
-    border-bottom: 0 !important;
 
-    a:focus,
-    a:hover {
-      text-decoration: none;
-    }
-    &.z-div {
-      .el-menu-item,
-      .sub-menu {
-        position: relative;
+  .nav-list {
+    position: absolute;
+    top: 40px;
+    left: 40px;
+    display: flex;
+    width: 500px;
 
-        &.is-active,
+    &.z-right {
+      left: auto;
+      right: 40px;
+      .nav-item {
+        background-image: url(../images/shuju/main/nav-right.png);
         &.z-on {
           &::before {
-            position: absolute;
-            content: "";
-            display: block;
-            bottom: -6px;
-            left: 0;
-            right: 0;
-            margin: 0 auto;
-            width: 50px;
-            height: 4px;
-            border: 0;
-            border-radius: 0 0 2px 2px;
-            background: #1effff;
-          }
-        }
-
-        &:last-child {
-          &::after {
-            display: none;
+            background-image: url(../images/shuju/main/nav-right-on.png);
           }
         }
-
-        &::after {
-          position: absolute;
-          content: "";
-          right: 0;
-          top: 0;
-          bottom: 0;
-          margin: auto 0;
-          width: 1px;
-          height: 18px;
-          background-color: rgba(#ffffff, 0.6);
-        }
       }
     }
 
-    .sub-menu {
+    .nav-item {
       position: relative;
-      float: left;
+      width: 120px;
+      height: 40px;
+      line-height: 40px;
+      font-size: 16px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      background-image: url(../images/shuju/main/nav-left.png);
+      background-size: 100%;
+      text-align: center;
       cursor: pointer;
-      &:hover {
-        .sub-menu-list {
-          display: block;
-        }
-      }
-
-      .sub-menu-list {
-        position: absolute;
-        display: none;
-        padding: 0 10px;
-        width: 160px;
-        left: -100px;
-        right: -100px;
-        margin: 0 auto;
-        background-color: rgba(#176dec, 0.9);
-        text-align: center;
-        cursor: pointer;
-        > div {
-          border-top: 1px dashed rgba(#fff, 0.4);
-          color: rgba(#fff, 0.7);
-          transition: all ease 0.5s;
-          padding: 10px 0;
-          line-height: $navbar--height * 0.5;
+      color: rgba(#fff, 0.85);
 
-          &.z-on {
-            font-weight: bold;
-          }
-          &.z-on,
-          &:hover {
-            color: #ffd;
-          }
-        }
+      span {
+        position: relative;
+        z-index: 1;
       }
-    }
 
-    .el-menu-item,
-    .sub-menu {
-      height: $navbar--height;
-      padding: 0 15px;
-      line-height: $navbar--height;
-      border-color: transparent !important;
-      color: #fff;
-    }
-    .el-menu-item.is-active,
-    .sub-menu.z-on {
-      color: #fff;
-      font-weight: bold;
-    }
-    .el-menu-item,
-    .sub-menu {
-      i {
-        color: #fff;
-      }
-      &:focus,
       &:hover {
         color: #fff;
-        background-color: transparent !important;
-
-        .navbar__icon-menu {
-          color: #fff;
-        }
-        .el-dropdown {
-          color: #fff;
-          .el-icon-arrow-down {
-            transform: rotateZ(180deg);
-          }
-        }
-      }
-      * {
-        vertical-align: initial;
-      }
-      .navbar__icon-menu {
-        vertical-align: middle;
-        font-size: 20px;
-      }
-      .el-dropdown {
-        color: #fff;
-        font-size: 16px;
-        .el-icon-arrow-down {
-          width: auto;
-          font-size: 16px;
-          margin: 0 0 0 5px;
-          transition: transform 0.3s;
-        }
-      }
-    }
-    .el-badge {
-      display: inline;
-      z-index: 2;
-      &__content {
-        line-height: 16px;
-      }
-    }
-  }
-
-  .navbar__search {
-    > *[class*="el-icon-"],
-    > *[class*="icon"] {
-      display: inline-block;
-      vertical-align: middle;
-    }
-    &-txt {
-      width: 0;
-      transition: width 0.3s, margin-left 0.3s;
-      &.is-show {
-        width: 210px;
-        margin-left: 8px;
-      }
-      .el-input__inner {
-        height: $navbar--height - 20px;
-        padding: 0;
-        line-height: $navbar--height - 20px;
-        border-color: $--color-text-primary;
-        border-top: 0;
-        border-right: 0;
-        border-left: 0;
-        border-radius: 0;
-        background: transparent;
-      }
-    }
-  }
-  .navbar__avatar {
-    .el-dropdown-link {
-      > img {
-        width: 42px;
-        height: auto;
-        margin-right: 7px;
-        border-radius: 100%;
-        vertical-align: middle;
       }
-    }
-  }
-}
 
-/* Content
------------------------------- */
-.g-cnt {
-  position: relative;
-  // padding: $content--padding;
-  min-height: calc(100vh - #{$navbar--height});
-  background-color: transparent;
-
-  &__wrapper {
-    position: relative;
-    margin-left: $sidebar--width;
-    min-height: calc(100vh - #{$navbar--height});
-    background-color: $content--background-color;
-    transition: margin-left 0.3s;
-  }
-  > .aui-card--fill > .el-card__body {
-    min-height: calc(#{$content--fill-height} - 2px);
-  }
-  > .aui-card--fill > .el-card__header + .el-card__body {
-    min-height: calc(#{$content--fill-height} - #{$content--card-header-height} - 2px);
-  }
-  &--tabs {
-    padding: $content--tabs-header-height 0 0;
-  }
-  &--tabs-tools {
-    position: fixed;
-    top: $navbar--height;
-    right: 0;
-    z-index: 931;
-    min-width: $content--tabs-header-height;
-    height: $content--tabs-header-height;
-    padding: 0 12px;
-    text-align: center;
-    font-size: 16px;
-    line-height: $content--tabs-header-height;
-    background-color: $--background-color-base;
-    cursor: pointer;
-  }
-  &--tabs-icon-nav {
-    display: inline-block;
-    vertical-align: middle;
-    font-size: 16px;
-  }
-  > .el-tabs {
-    > .el-tabs__header {
-      position: fixed;
-      top: $navbar--height;
-      left: $sidebar--width;
-      right: 0;
-      z-index: 930;
-      padding: 0 55px 0 15px;
-      margin: 0;
-      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-      background-color: #fff;
-      transition: left 0.3s;
-      > .el-tabs__nav-wrap {
-        margin-bottom: 0;
-        &:after {
-          display: none;
-        }
-        > .el-tabs__nav-next,
-        > .el-tabs__nav-prev {
-          line-height: $content--tabs-header-height;
-        }
-        > .el-tabs__nav-scroll > .el-tabs__nav {
-          & > .el-tabs__active-bar {
-            display: none;
-          }
-          & > .el-tabs__item {
-            height: $content--tabs-header-height;
-            padding: 0 15px;
-            line-height: $content--tabs-header-height;
-            border: 0;
-            color: $--color-text-regular;
-            &:focus,
-            &:hover,
-            &.is-active {
-              color: $--color-text-primary;
-              background-color: $--background-color-base;
-              &:after {
-                display: block;
-              }
-              > .el-icon-close {
-                color: $--color-text-primary;
-              }
-            }
-            &:after {
-              display: none;
-              position: absolute;
-              bottom: 0;
-              left: 0;
-              content: "";
-              width: 100%;
-              height: 2px;
-              background-color: $--color-primary;
-            }
-            + .el-tabs__item {
-              margin-left: 1px;
-            }
-            > .el-icon-close {
-              width: 14px;
-              margin-left: 15px;
-              color: $--color-text-secondary;
-            }
-            > i.icon {
-              display: inline-block;
-              vertical-align: middle;
-              font-size: 18px;
-            }
-          }
-        }
-      }
-    }
-    > .el-tabs__content {
-      padding: $content--padding;
-      .el-loading-mask {
-        z-index: 830;
-      }
-      > .el-tab-pane {
-        min-height: calc(#{$content--fill-height-tabs});
-        > .aui-card--fill > .el-card__body {
-          min-height: calc(#{$content--fill-height-tabs} - 2px);
-        }
-        > .aui-card--fill > .el-card__header + .el-card__body {
-          min-height: calc(#{$content--fill-height-tabs} - #{$content--card-header-height} - 2px);
-        }
-        &.is-iframe {
-          height: calc(#{$content--fill-height-tabs} + #{$content--padding * 2});
-          margin: -$content--padding;
-          min-height: auto;
-          > .aui-card--fill {
-            background-color: transparent;
-          }
-          > .aui-card--fill > .el-card__header {
-            background-color: #fff;
-          }
-          > .aui-card--fill > .el-card__body {
-            height: calc(#{$content--fill-height-tabs} - 2px);
-            margin: $content--padding;
-            min-height: auto;
-            border: $--border-base;
-            border-color: $--border-color-lighter;
-            border-radius: $--border-radius-base;
-            background-color: #fff;
-          }
-          > .aui-card--fill > .el-card__header + .el-card__body {
-            height: calc(#{$content--fill-height-tabs} - #{$content--card-header-height} - 2px);
-          }
+      &.z-on {
+        background-image: none;
+        &::before {
+          position: absolute;
+          z-index: -1;
+          content: "";
+          display: block;
+          top: -2px;
+          left: -5px;
+          width: 132px;
+          height: 47px;
+          background-image: url(../images/shuju/main/nav-left-on.png);
+          background-size: 100%;
         }
       }
     }
   }
-  // quill富文本编辑器
-  .ql-toolbar {
-    line-height: 20px;
-    &.ql-snow {
-      border-color: $--border-color-base;
-    }
-    .ql-formats {
-      margin: 0 5px;
-    }
-  }
-  .ql-container {
-    height: 150px;
-    &.ql-snow {
-      border-color: $--border-color-base;
-    }
-  }
-}
-
-.el-loading-mask {
-  z-index: 5001 !important;
-}
-
-/* Page
------------------------------- */
-*[class*="aui-page__"] {
-  padding-top: 0;
-  .aui-content {
-    min-height: auto;
-    &__wrapper {
-      min-height: 100vh;
-      margin-left: 0;
-    }
-    > .aui-card--fill > .el-card__body {
-      min-height: calc(100vh - #{$content--padding * 2} - 2px);
-    }
-    > .aui-card--fill > .el-card__header + .el-card__body {
-      min-height: calc(100vh - #{$content--padding * 2} - #{$content--card-header-height} - 2px);
-    }
-  }
 }
diff --git a/src/assets/scss/main-shuju备份.scss b/src/assets/scss/main-shuju备份.scss
new file mode 100644
index 000000000..a87d382e7
--- /dev/null
+++ b/src/assets/scss/main-shuju备份.scss
@@ -0,0 +1,684 @@
+@import "~@/element-ui/theme-variables.scss";
+@import "./shuju-variables.scss";
+@import "./c/config";
+@import "./c/function";
+@import "./modules/visual/c/common.scss";
+
+.g-main {
+  padding: 10px 20px 10px;
+}
+
+.m-iframe {
+  position: relative;
+  box-sizing: content-box;
+  width: calc(100% + 20px);
+  margin: -10px -20px -10px;
+  z-index: 100;
+}
+
+/* Reset element-ui
+------------------------------ */
+.g-bd {
+  background-image: url(../img/shuju/bg.jpg);
+  background-size: cover;
+  background-position: center 0;
+  height: 100%;
+  @include scrollBar;
+
+  .el-card + .el-card {
+    margin-top: 15px;
+  }
+  .el-input__prefix .el-input__icon {
+    display: inline-block;
+    vertical-align: middle;
+  }
+  .el-date-editor .el-range-separator {
+    width: 8%;
+  }
+  .el-table th {
+    color: $--color-text-primary;
+    background-color: $--background-color-base;
+  }
+  .el-pagination {
+    margin-top: 15px;
+    text-align: right;
+  }
+  .el-table__expand-icon {
+    display: inline-block;
+    width: 14px;
+    vertical-align: middle;
+    margin-right: 5px;
+  }
+}
+
+/* Common
+------------------------------ */
+// 图标
+.icon-svg {
+  width: 1em;
+  height: 1em;
+  fill: currentColor;
+  vertical-align: middle;
+  overflow: hidden;
+}
+// 卡片
+.aui-card--fill .el-card__header {
+  height: $content--card-header-height;
+  line-height: $content--card-header-height - 36px;
+}
+.aui-card__title {
+  font-size: 16px;
+}
+// 表单
+.aui-form__label-icon {
+  display: inline-block;
+  margin: 0 3px;
+  vertical-align: middle;
+  font-size: 18px;
+  color: $--color-text-secondary;
+}
+// 按钮
+.aui-button--dashed {
+  border-style: dashed;
+  &:focus,
+  &:hover {
+    background-color: transparent;
+  }
+  &-add {
+    > span > *[class*="el-icon-"],
+    > span > *[class*="icon"] {
+      vertical-align: middle;
+      font-size: 18px;
+      margin-right: 5px;
+    }
+  }
+}
+
+/* Layout
+------------------------------ */
+.g-bd {
+  position: relative;
+  padding-top: $navbar--height;
+
+  /* Sidebar fold
+------------------------------ */
+  &.z-sidebar--fold {
+    .navbar {
+      &__header,
+      &__brand {
+        width: $sidebar--width-fold;
+      }
+      &__brand {
+        &-lg {
+          display: none;
+        }
+        &-mini {
+          display: inline-block;
+        }
+      }
+      &__icon-menu--switch {
+        transform: rotateZ(180deg);
+      }
+    }
+    .aui-sidebar {
+      &__inner {
+        width: $sidebar--width-fold + 20px;
+      }
+      &,
+      &__menu {
+        width: $sidebar--width-fold;
+      }
+      &__menu > li > .el-submenu__title {
+        text-align: center;
+      }
+      &__menu-icon {
+        margin-right: 0;
+        font-size: 18px;
+      }
+    }
+    .g-cnt {
+      &__wrapper {
+        margin-left: $sidebar--width-fold;
+      }
+      &--tabs > .el-tabs > .el-tabs__header {
+        left: $sidebar--width-fold;
+      }
+    }
+  }
+
+  &.z-sidebar--noside {
+    .aui-sidebar {
+      display: none !important;
+    }
+    .g-cnt {
+      &__wrapper {
+        margin-left: 0 !important;
+      }
+      &--tabs > .el-tabs > .el-tabs__header {
+        left: 0 !important;
+      }
+    }
+  }
+
+  &.z-iframe {
+    padding-top: 0;
+    .aui-content--tabs {
+      padding-top: 0;
+    }
+  }
+}
+
+/* Navbar
+------------------------------ */
+.m-navbar {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1030;
+  display: flex;
+  align-items: stretch;
+  height: $navbar--height;
+  // background-color: $--color-primary;
+  // box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05);
+  background: linear-gradient(180deg, #00023f, #176dec);
+  box-shadow: 0px 3px 16px 0px rgba(187, 187, 227, 0.35);
+  font-size: 19px;
+  .el-menu-item {
+    font-size: 19px;
+  }
+
+  .navbar--colorful {
+    .navbar__body {
+      background-color: transparent;
+    }
+    .navbar__menu {
+      > .el-menu-item,
+      > .el-submenu > .el-submenu__title {
+        color: #fff;
+        &:focus,
+        &:hover {
+          color: #fff;
+          background-color: mix(#000, $--color-primary, 15%);
+        }
+      }
+      > .el-menu-item.is-active,
+      > .el-submenu.is-active > .el-submenu__title {
+        color: #fff;
+        &:focus,
+        &:hover {
+          color: #fff;
+        }
+      }
+      .el-menu-item i,
+      .el-submenu__title i,
+      .el-menu-item svg,
+      .el-submenu__title svg,
+      .el-menu-item .el-dropdown {
+        color: #fff !important;
+      }
+      .el-button {
+        color: #fff;
+        background-color: transparent;
+      }
+    }
+    .navbar__search {
+      &-txt {
+        .el-input__inner {
+          color: #fff;
+          border-color: #fff;
+          &::-webkit-input-placeholder {
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
+  .navbar__header {
+    position: relative;
+    width: $sidebar--width;
+    height: $navbar--height;
+    transition: width 0.3s;
+  }
+  .navbar__brand {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 10px 20px;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    font-size: 28px;
+    font-weight: bold;
+    text-transform: uppercase;
+    white-space: nowrap;
+    // overflow: hidden;
+    transition: width 0.3s;
+    font-family: FZZCHJW;
+    color: #ffffff;
+    background: linear-gradient(0deg, #03c7ff 24.609375%, #ffffff 81.0791015625%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: rgba(#fff, 0.7);
+
+    &::before {
+      position: absolute;
+      content: "";
+      z-index: 100000;
+      display: block;
+      bottom: -10px;
+      left: -920px;
+      right: -1000px;
+      margin: 0 auto;
+      width: 400px;
+      height: 20px;
+      // background-color: #fff;
+      background-image: url(../img/shuju/flash.png);
+      background-size: cover;
+      background-position: center center;
+    }
+
+    &-lg,
+    &-mini {
+      max-width: 100%;
+      color: #fff;
+      cursor: pointer;
+      &:focus,
+      &:hover {
+        color: #fff;
+        text-decoration: none;
+      }
+    }
+    &-mini {
+      display: none;
+    }
+  }
+  .navbar__body {
+    position: relative;
+    display: flex;
+    flex: 1;
+    // background-color: #fff;
+    background-color: transparent;
+    // overflow: hidden;
+  }
+  .navbar__menu {
+    background-color: transparent;
+    border-bottom: 0 !important;
+
+    a:focus,
+    a:hover {
+      text-decoration: none;
+    }
+    &.z-div {
+      .el-menu-item,
+      .sub-menu {
+        position: relative;
+
+        &.is-active,
+        &.z-on {
+          &::before {
+            position: absolute;
+            content: "";
+            display: block;
+            bottom: -6px;
+            left: 0;
+            right: 0;
+            margin: 0 auto;
+            width: 50px;
+            height: 4px;
+            border: 0;
+            border-radius: 0 0 2px 2px;
+            background: #1effff;
+          }
+        }
+
+        &:last-child {
+          &::after {
+            display: none;
+          }
+        }
+
+        &::after {
+          position: absolute;
+          content: "";
+          right: 0;
+          top: 0;
+          bottom: 0;
+          margin: auto 0;
+          width: 1px;
+          height: 18px;
+          background-color: rgba(#ffffff, 0.6);
+        }
+      }
+    }
+
+    .sub-menu {
+      position: relative;
+      float: left;
+      cursor: pointer;
+      &:hover {
+        .sub-menu-list {
+          display: block;
+        }
+      }
+
+      .sub-menu-list {
+        position: absolute;
+        display: none;
+        padding: 0 10px;
+        width: 160px;
+        left: -100px;
+        right: -100px;
+        margin: 0 auto;
+        background-color: rgba(#176dec, 0.9);
+        text-align: center;
+        cursor: pointer;
+        > div {
+          border-top: 1px dashed rgba(#fff, 0.4);
+          color: rgba(#fff, 0.7);
+          transition: all ease 0.5s;
+          padding: 10px 0;
+          line-height: $navbar--height * 0.5;
+
+          &.z-on {
+            font-weight: bold;
+          }
+          &.z-on,
+          &:hover {
+            color: #ffd;
+          }
+        }
+      }
+    }
+
+    .el-menu-item,
+    .sub-menu {
+      height: $navbar--height;
+      padding: 0 15px;
+      line-height: $navbar--height;
+      border-color: transparent !important;
+      color: #fff;
+    }
+    .el-menu-item.is-active,
+    .sub-menu.z-on {
+      color: #fff;
+      font-weight: bold;
+    }
+    .el-menu-item,
+    .sub-menu {
+      i {
+        color: #fff;
+      }
+      &:focus,
+      &:hover {
+        color: #fff;
+        background-color: transparent !important;
+
+        .navbar__icon-menu {
+          color: #fff;
+        }
+        .el-dropdown {
+          color: #fff;
+          .el-icon-arrow-down {
+            transform: rotateZ(180deg);
+          }
+        }
+      }
+      * {
+        vertical-align: initial;
+      }
+      .navbar__icon-menu {
+        vertical-align: middle;
+        font-size: 20px;
+      }
+      .el-dropdown {
+        color: #fff;
+        font-size: 16px;
+        .el-icon-arrow-down {
+          width: auto;
+          font-size: 16px;
+          margin: 0 0 0 5px;
+          transition: transform 0.3s;
+        }
+      }
+    }
+    .el-badge {
+      display: inline;
+      z-index: 2;
+      &__content {
+        line-height: 16px;
+      }
+    }
+  }
+
+  .navbar__search {
+    > *[class*="el-icon-"],
+    > *[class*="icon"] {
+      display: inline-block;
+      vertical-align: middle;
+    }
+    &-txt {
+      width: 0;
+      transition: width 0.3s, margin-left 0.3s;
+      &.is-show {
+        width: 210px;
+        margin-left: 8px;
+      }
+      .el-input__inner {
+        height: $navbar--height - 20px;
+        padding: 0;
+        line-height: $navbar--height - 20px;
+        border-color: $--color-text-primary;
+        border-top: 0;
+        border-right: 0;
+        border-left: 0;
+        border-radius: 0;
+        background: transparent;
+      }
+    }
+  }
+  .navbar__avatar {
+    .el-dropdown-link {
+      > img {
+        width: 42px;
+        height: auto;
+        margin-right: 7px;
+        border-radius: 100%;
+        vertical-align: middle;
+      }
+    }
+  }
+}
+
+/* Content
+------------------------------ */
+.g-cnt {
+  position: relative;
+  // padding: $content--padding;
+  min-height: calc(100vh - #{$navbar--height});
+  background-color: transparent;
+
+  &__wrapper {
+    position: relative;
+    margin-left: $sidebar--width;
+    min-height: calc(100vh - #{$navbar--height});
+    background-color: $content--background-color;
+    transition: margin-left 0.3s;
+  }
+  > .aui-card--fill > .el-card__body {
+    min-height: calc(#{$content--fill-height} - 2px);
+  }
+  > .aui-card--fill > .el-card__header + .el-card__body {
+    min-height: calc(#{$content--fill-height} - #{$content--card-header-height} - 2px);
+  }
+  &--tabs {
+    padding: $content--tabs-header-height 0 0;
+  }
+  &--tabs-tools {
+    position: fixed;
+    top: $navbar--height;
+    right: 0;
+    z-index: 931;
+    min-width: $content--tabs-header-height;
+    height: $content--tabs-header-height;
+    padding: 0 12px;
+    text-align: center;
+    font-size: 16px;
+    line-height: $content--tabs-header-height;
+    background-color: $--background-color-base;
+    cursor: pointer;
+  }
+  &--tabs-icon-nav {
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 16px;
+  }
+  > .el-tabs {
+    > .el-tabs__header {
+      position: fixed;
+      top: $navbar--height;
+      left: $sidebar--width;
+      right: 0;
+      z-index: 930;
+      padding: 0 55px 0 15px;
+      margin: 0;
+      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+      background-color: #fff;
+      transition: left 0.3s;
+      > .el-tabs__nav-wrap {
+        margin-bottom: 0;
+        &:after {
+          display: none;
+        }
+        > .el-tabs__nav-next,
+        > .el-tabs__nav-prev {
+          line-height: $content--tabs-header-height;
+        }
+        > .el-tabs__nav-scroll > .el-tabs__nav {
+          & > .el-tabs__active-bar {
+            display: none;
+          }
+          & > .el-tabs__item {
+            height: $content--tabs-header-height;
+            padding: 0 15px;
+            line-height: $content--tabs-header-height;
+            border: 0;
+            color: $--color-text-regular;
+            &:focus,
+            &:hover,
+            &.is-active {
+              color: $--color-text-primary;
+              background-color: $--background-color-base;
+              &:after {
+                display: block;
+              }
+              > .el-icon-close {
+                color: $--color-text-primary;
+              }
+            }
+            &:after {
+              display: none;
+              position: absolute;
+              bottom: 0;
+              left: 0;
+              content: "";
+              width: 100%;
+              height: 2px;
+              background-color: $--color-primary;
+            }
+            + .el-tabs__item {
+              margin-left: 1px;
+            }
+            > .el-icon-close {
+              width: 14px;
+              margin-left: 15px;
+              color: $--color-text-secondary;
+            }
+            > i.icon {
+              display: inline-block;
+              vertical-align: middle;
+              font-size: 18px;
+            }
+          }
+        }
+      }
+    }
+    > .el-tabs__content {
+      padding: $content--padding;
+      .el-loading-mask {
+        z-index: 830;
+      }
+      > .el-tab-pane {
+        min-height: calc(#{$content--fill-height-tabs});
+        > .aui-card--fill > .el-card__body {
+          min-height: calc(#{$content--fill-height-tabs} - 2px);
+        }
+        > .aui-card--fill > .el-card__header + .el-card__body {
+          min-height: calc(#{$content--fill-height-tabs} - #{$content--card-header-height} - 2px);
+        }
+        &.is-iframe {
+          height: calc(#{$content--fill-height-tabs} + #{$content--padding * 2});
+          margin: -$content--padding;
+          min-height: auto;
+          > .aui-card--fill {
+            background-color: transparent;
+          }
+          > .aui-card--fill > .el-card__header {
+            background-color: #fff;
+          }
+          > .aui-card--fill > .el-card__body {
+            height: calc(#{$content--fill-height-tabs} - 2px);
+            margin: $content--padding;
+            min-height: auto;
+            border: $--border-base;
+            border-color: $--border-color-lighter;
+            border-radius: $--border-radius-base;
+            background-color: #fff;
+          }
+          > .aui-card--fill > .el-card__header + .el-card__body {
+            height: calc(#{$content--fill-height-tabs} - #{$content--card-header-height} - 2px);
+          }
+        }
+      }
+    }
+  }
+  // quill富文本编辑器
+  .ql-toolbar {
+    line-height: 20px;
+    &.ql-snow {
+      border-color: $--border-color-base;
+    }
+    .ql-formats {
+      margin: 0 5px;
+    }
+  }
+  .ql-container {
+    height: 150px;
+    &.ql-snow {
+      border-color: $--border-color-base;
+    }
+  }
+}
+
+.el-loading-mask {
+  z-index: 5001 !important;
+}
+
+/* Page
+------------------------------ */
+*[class*="aui-page__"] {
+  padding-top: 0;
+  .aui-content {
+    min-height: auto;
+    &__wrapper {
+      min-height: 100vh;
+      margin-left: 0;
+    }
+    > .aui-card--fill > .el-card__body {
+      min-height: calc(100vh - #{$content--padding * 2} - 2px);
+    }
+    > .aui-card--fill > .el-card__header + .el-card__body {
+      min-height: calc(100vh - #{$content--padding * 2} - #{$content--card-header-height} - 2px);
+    }
+  }
+}
diff --git a/src/views/main-shuju/main-navbar.vue b/src/views/main-shuju/main-navbar.vue
index 34a32796d..1e6248014 100644
--- a/src/views/main-shuju/main-navbar.vue
+++ b/src/views/main-shuju/main-navbar.vue
@@ -1,6 +1,28 @@
 <template>
-  <div>
-    <nav v-if="showHeader" class="m-navbar">
+  <div class="m-topnav">
+    <div class="title">{{ customerName }}综合服务平台数据看板</div>
+    <div class="nav-list z-left">
+      <div class="nav-item" @click="toPage('/')">
+        <span>人房总览</span>
+      </div>
+      <div class="nav-item z-on" @click="toPage('/')">
+        <span>人房总览</span>
+      </div>
+      <div class="nav-item" @click="toPage('/')">
+        <span>人房总览</span>
+      </div>
+      <div class="nav-item" @click="toPage('/')">
+        <span>人房总览</span>
+      </div>
+    </div>
+
+    <div class="nav-list z-right">
+      <div class="nav-item z-on" @click="toPage('/')">
+        <span>人房总览</span>
+      </div>
+    </div>
+
+    <nav v-if="false" class="m-navbar">
       <div class="navbar__header">
         <h1 class="navbar__brand" @click="$router.push({ name: 'home' })">
           <a class="navbar__brand-lg" href="javascript:;">{{ customerName }}</a>
@@ -131,7 +153,6 @@
         ref="updatePassowrd"
       ></update-password-work>
     </nav>
-    <nav v-else class="navbar main-line"></nav>
   </div>
 </template>
 
@@ -167,10 +188,15 @@ export default {
     const customerId = localStorage.getItem("customerId");
     let siteconfigElement = window.SITE_CONFIG["menuShujuList"];
     //暂时 亿联街道和 微笑崂山显示 社区治理-》多元化菜单
-    if ("04c0d396e298f13e57aa5904a657eaa6" != customerId && "3fdd0380deff5b30f45376cdf995d1c1" != customerId){
-      for (let index in siteconfigElement){
-        if (siteconfigElement[index].id == '6'){
-          let newMenuArr =  siteconfigElement[index].children.filter(item =>item.id !== 'duoyuanfuwufenxi');
+    if (
+      "04c0d396e298f13e57aa5904a657eaa6" != customerId &&
+      "3fdd0380deff5b30f45376cdf995d1c1" != customerId
+    ) {
+      for (let index in siteconfigElement) {
+        if (siteconfigElement[index].id == "6") {
+          let newMenuArr = siteconfigElement[index].children.filter(
+            (item) => item.id !== "duoyuanfuwufenxi"
+          );
           siteconfigElement[index].children = newMenuArr;
         }
       }
@@ -179,6 +205,10 @@ export default {
   },
   computed: {},
   methods: {
+    toPage(path) {
+      this.$router.push({ path });
+    },
+
     toIndexPage() {
       this.$router.replace("/");
     },
@@ -254,11 +284,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-.main-line {
-  height: 50px;
-  background: #eeeeee;
-}
-</style>
-
 <style lang="scss" src="@/assets/scss/main-shuju.scss" scoped></style>
diff --git a/src/views/main-shuju/main.vue b/src/views/main-shuju/main.vue
index 8dc461dca..dd40485bd 100644
--- a/src/views/main-shuju/main.vue
+++ b/src/views/main-shuju/main.vue
@@ -1,10 +1,27 @@
 <template>
-  <fixed1920>
+  <fixed1920 class="g-fx">
+    <img
+      class="i-corner z-left-top"
+      src="~@/assets/images/shuju/main/corner-left-top.png"
+    />
+    <img
+      class="i-corner z-right-top"
+      src="~@/assets/images/shuju/main/corner-right-top.png"
+    />
+    <img
+      class="i-corner z-right-bottom"
+      src="~@/assets/images/shuju/main/corner-right-bottom.png"
+    />
+    <img
+      class="i-corner z-left-bottom"
+      src="~@/assets/images/shuju/main/corner-left-bottom.png"
+    />
+
     <div
       v-loading.fullscreen.lock="loading"
       :element-loading-text="$t('loading')"
       :class="[
-        'g-bd',
+        'g-pg',
         { 'z-sidebar--fold': $store.state.sidebarFold },
         {
           'z-sidebar--noside': true,