修改框架的整体颜色、风格，修改字体为思源黑体

src/assets/styles/index.scss

@@ -5,12 +5,30 @@
 @import './sidebar.scss';
 @import './btn.scss';
 
+:root {
+  --app-font-family: 'Source Han Sans Heavy', 'Source Han Sans SC Heavy', 'Source Han Sans CN Heavy',
+    'Source Han Sans SC', 'Source Han Sans CN', 'HYZhongHeiTi', 'SimHei', 'Microsoft YaHei',
+    Arial, sans-serif;
+}
+
+@font-face {
+  font-family: 'Source Han Sans Heavy';
+  src: local('Source Han Sans Heavy'), local('Source Han Sans SC Heavy'),
+    local('Source Han Sans CN Heavy'), local('Source Han Sans SC'), local('Source Han Sans CN'),
+    local('HYZhongHeiTi'), local('SimHei');
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+}
+
 body {
   height: 100%;
+  background-color: $base-page-background;
   -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;
+  font-family: var(--app-font-family);
+  font-weight: 900;
 }
 
 label {
@@ -19,11 +37,32 @@ label {
 
 html {
   height: 100%;
+  background-color: $base-page-background;
   box-sizing: border-box;
+  font-family: var(--app-font-family);
+  overflow: hidden;
 }
 
 #app {
   height: 100%;
+  background-color: $base-page-background;
+  font-family: var(--app-font-family);
+  overflow: hidden;
+}
+
+.app-wrapper,
+.main-container,
+.app-main {
+  background-color: $base-page-background;
+}
+
+.app-wrapper,
+.app-main {
+  overflow: hidden;
+}
+
+.main-container {
+  overflow: visible;
 }
 
 *,
@@ -45,6 +84,13 @@ a:active {
   outline: none;
 }
 
+button,
+input,
+textarea,
+select {
+  font-family: inherit;
+}
+
 a,
 a:focus,
 a:hover {
@@ -121,7 +167,28 @@ aside {
 
 //main-container全局样式
 .app-container {
-  padding: 20px;
+  height: 100%;
+  min-height: 0;
+  padding: 14px;
+  overflow: hidden;
+  color: #dcecff;
+  background: $base-content-background;
+  border: 1px solid $base-panel-border;
+  display: flex;
+  flex-direction: column;
+
+  > .el-form,
+  > .mb8,
+  > .el-row {
+    flex: 0 0 auto;
+  }
+
+  > .el-table {
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
 }
 
 .components-container {
@@ -130,7 +197,8 @@ aside {
 }
 
 .pagination-container {
-  margin-top: 30px;
+  flex: 0 0 auto;
+  margin-top: 12px;
 }
 
 .text-center {

src/assets/styles/ruoyi.scss

@@ -68,7 +68,7 @@
 
 .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
   font-family: inherit;
-  font-weight: 500;
+  font-weight: 900;
   line-height: 1.1;
   color: inherit;
 }
@@ -89,21 +89,157 @@
 }
 
 .el-table {
+  color: #071025;
+  background: transparent;
+  border: 1px solid rgba(64, 146, 255, 0.95);
+  border-bottom: none;
+  font-size: 14px;
+
+  &::before,
+  &::after {
+    background-color: rgba(64, 146, 255, 0.95);
+  }
+
   .el-table__header-wrapper, .el-table__fixed-header-wrapper {
+    flex: 0 0 auto;
+
     th {
       word-break: break-word;
-      background-color: #f8f8f9;
-      color: #515a6e;
-      height: 40px;
-      font-size: 13px;
+      background-color: #06347f;
+      color: #ffffff;
+      height: 38px;
+      font-size: 14px;
+      font-weight: 700;
+      border-color: rgba(64, 146, 255, 0.95);
     }
   }
 
+  th.el-table__cell,
+  td.el-table__cell {
+    padding: 7px 0;
+    border-color: #c7d7f4;
+  }
+
   .el-table__body-wrapper {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    background: #dbe7fb;
+
+    tr {
+      background-color: #e4edfc;
+    }
+
+    tr:nth-child(even) {
+      background-color: #d7e4f8;
+    }
+
+    tr:hover > td.el-table__cell {
+      background-color: #c5d9f6 !important;
+    }
+
+    td.el-table__cell {
+      color: #071025;
+      background-color: transparent;
+    }
+
     .el-button [class*="el-icon-"] + span {
       margin-left: 1px;
     }
   }
+
+  .el-table__fixed,
+  .el-table__fixed-right {
+    background: #dbe7fb;
+  }
+
+  .el-checkbox__inner {
+    border-color: #2f7cff;
+    background-color: transparent;
+  }
+
+  .el-checkbox__input.is-checked .el-checkbox__inner,
+  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+    background-color: #2f7cff;
+    border-color: #2f7cff;
+  }
+
+  .el-switch__core {
+    border-color: #2f7cff;
+    background-color: #2f7cff;
+  }
+
+  .el-button--text,
+  .svg-icon,
+  [class^="el-icon-"],
+  [class*=" el-icon-"] {
+    color: #0057d8;
+  }
+}
+
+.el-table--border,
+.el-table--group {
+  border-color: rgba(64, 146, 255, 0.95);
+}
+
+.el-table--border .el-table__cell {
+  border-color: #c7d7f4;
+}
+
+.el-table .caret-wrapper .sort-caret.ascending {
+  border-bottom-color: #ffffff;
+}
+
+.el-table .caret-wrapper .sort-caret.descending {
+  border-top-color: #ffffff;
+}
+
+.app-container {
+  .el-form {
+    color: #ffffff;
+  }
+
+  .el-form-item__label {
+    color: #ffffff;
+    font-weight: 500;
+  }
+
+  .el-input__inner,
+  .el-range-input {
+    color: #dcecff;
+    background-color: rgba(5, 27, 91, 0.72);
+    border-color: #6384d8;
+  }
+
+  .el-input__inner::placeholder,
+  .el-range-input::placeholder {
+    color: rgba(220, 236, 255, 0.5);
+  }
+
+  .el-input__prefix,
+  .el-input__suffix,
+  .el-range-separator,
+  .el-date-editor .el-range__icon,
+  .el-date-editor .el-range__close-icon {
+    color: #4ddfff;
+  }
+
+  .el-button {
+    border-radius: 2px;
+  }
+
+  .el-button--primary {
+    color: #ffffff;
+    background: linear-gradient(180deg, #2d73ff 0%, #0b42c4 100%);
+    border-color: #2f80ff;
+    box-shadow: 0 0 8px rgba(47, 128, 255, 0.35) inset;
+  }
+
+  .el-button--default {
+    color: #54ffff;
+    background: rgba(5, 27, 91, 0.55);
+    border-color: #1b7fff;
+  }
 }
 
 /** 表单布局 **/
@@ -118,23 +254,46 @@
 /** 表格布局 **/
 .pagination-container {
   position: relative;
-  height: 32px;
-  margin-bottom: 10px;
-  margin-top: 15px;
-  padding: 10px 20px !important;
+  min-height: 32px;
+  margin-bottom: 0;
+  margin-top: 12px;
+  padding: 8px 4px !important;
+  color: #dcecff;
+  background: transparent !important;
 }
 
 /* tree border */
 .tree-border {
   margin-top: 5px;
-  border: 1px solid #e5e6e7;
-  background: #FFFFFF none;
-  border-radius: 4px;
+  border: 1px solid #0B2567;
+  background: #0F124A none;
+  border-radius: 2px;
 }
 
 .pagination-container .el-pagination {
   right: 0;
   position: absolute;
+  color: #dcecff;
+}
+
+.pagination-container .el-pagination__total,
+.pagination-container .el-pagination__jump {
+  color: #dcecff;
+}
+
+.pagination-container .el-pagination.is-background .btn-prev,
+.pagination-container .el-pagination.is-background .btn-next,
+.pagination-container .el-pagination.is-background .el-pager li,
+.pagination-container .el-pagination .el-select .el-input .el-input__inner {
+  color: #dcecff;
+  background: rgba(5, 27, 91, 0.7);
+  border: 1px solid #2f80ff;
+}
+
+.pagination-container .el-pagination.is-background .el-pager li:not(.disabled).active {
+  color: #ffffff;
+  background: #1f6fff;
+  border-color: #4ddfff;
 }
 
 @media (max-width: 768px) {
@@ -292,5 +451,238 @@
 
 /* 分割面板样式 */
 .splitpanes.default-theme .splitpanes__pane {
-  background-color: #fff!important;
+  background-color: #0F124A!important;
+}
+
+/* 深色业务面板统一主题 */
+.app-container,
+.card-page,
+.sec-left,
+.sec-right,
+.box,
+.el-card,
+.el-tabs,
+.el-collapse,
+.el-descriptions,
+.tree-border,
+.splitpanes.default-theme .splitpanes__pane {
+  color: #dcecff;
+  background-color: #0F124A !important;
+  border-color: #0B2567 !important;
+}
+
+.card-page,
+.sec-left,
+.sec-right,
+.box,
+.el-card {
+  border: 1px solid #0B2567;
+  border-radius: 2px;
+}
+
+.el-card {
+  box-shadow: none;
+}
+
+.el-card__header,
+.el-card__body,
+.el-collapse-item__header,
+.el-collapse-item__wrap,
+.el-descriptions__header,
+.el-descriptions__body {
+  color: #dcecff;
+  background-color: #0F124A !important;
+  border-color: #0B2567 !important;
+}
+
+.el-descriptions-item__label,
+.el-descriptions-item__content {
+  color: #dcecff;
+  background-color: #0F124A !important;
+  border-color: #0B2567 !important;
+}
+
+.el-tabs__nav-wrap::after,
+.el-tabs__active-bar {
+  background-color: #0B2567;
+}
+
+.el-tabs__item {
+  color: #a9c6ff;
+}
+
+.el-tabs__item.is-active,
+.el-tabs__item:hover {
+  color: #54ffff;
+}
+
+.el-tree {
+  color: #dcecff;
+  background-color: #0F124A !important;
+}
+
+.el-tree-node__content {
+  color: #dcecff;
+  background-color: transparent !important;
+}
+
+.el-tree-node__content:hover,
+.el-tree-node:focus > .el-tree-node__content,
+.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+  color: #54ffff;
+  background-color: rgba(11, 37, 103, 0.85) !important;
+}
+
+.el-tree-node__label {
+  color: inherit;
+}
+
+.el-dialog {
+  overflow: hidden;
+  color: #dcecff;
+  background-color: #0F124A !important;
+  border: 1px solid #0B2567;
+  border-radius: 2px;
+  box-shadow: 0 0 18px rgba(0, 0, 0, 0.45);
+}
+
+.el-dialog__header,
+.el-dialog__body,
+.el-dialog__footer {
+  color: #dcecff;
+  background-color: #0F124A !important;
+}
+
+.el-dialog__header {
+  border-bottom: 1px solid #0B2567;
+}
+
+.el-dialog__footer {
+  border-top: 1px solid #0B2567;
+}
+
+.el-dialog__title,
+.el-dialog__headerbtn .el-dialog__close {
+  color: #ffffff;
+}
+
+.v-modal {
+  background: #101654;
+  opacity: 0.72;
+}
+
+.el-message-box,
+.el-popover,
+.el-dropdown-menu,
+.el-select-dropdown,
+.el-picker-panel,
+.el-cascader__dropdown,
+.el-autocomplete-suggestion,
+.el-tooltip__popper.is-dark {
+  color: #dcecff;
+  background-color: #0F124A !important;
+  border-color: #0B2567 !important;
+}
+
+.el-message-box__title,
+.el-message-box__content,
+.el-popover__title,
+.el-dropdown-menu__item,
+.el-select-dropdown__item,
+.el-cascader-node,
+.el-picker-panel__body,
+.el-date-table td,
+.el-date-table th {
+  color: #dcecff;
+}
+
+.el-dropdown-menu__item:hover,
+.el-dropdown-menu__item:focus,
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover,
+.el-cascader-node:not(.is-disabled):focus,
+.el-cascader-node:not(.is-disabled):hover {
+  color: #54ffff;
+  background-color: rgba(11, 37, 103, 0.85) !important;
+}
+
+.el-select-dropdown__item.selected,
+.el-date-table td.current:not(.disabled) span,
+.el-date-table td.today span {
+  color: #54ffff;
+}
+
+.el-drawer,
+.el-drawer__header,
+.el-drawer__body {
+  color: #dcecff;
+  background-color: #0F124A !important;
+}
+
+.el-drawer {
+  border-left: 1px solid #0B2567;
+}
+
+.el-dialog,
+.el-drawer,
+.el-popover,
+.el-message-box {
+  .el-form-item__label {
+    color: #ffffff;
+    font-weight: 500;
+  }
+
+  .el-input__inner,
+  .el-textarea__inner,
+  .el-range-input {
+    color: #dcecff;
+    background-color: rgba(5, 27, 91, 0.72);
+    border-color: #6384d8;
+  }
+
+  .el-input__inner::placeholder,
+  .el-textarea__inner::placeholder,
+  .el-range-input::placeholder {
+    color: rgba(220, 236, 255, 0.5);
+  }
+
+  .el-input__prefix,
+  .el-input__suffix,
+  .el-range-separator,
+  .el-date-editor .el-range__icon,
+  .el-date-editor .el-range__close-icon {
+    color: #4ddfff;
+  }
+
+  .el-button--primary {
+    color: #ffffff;
+    background: linear-gradient(180deg, #2d73ff 0%, #0b42c4 100%);
+    border-color: #2f80ff;
+  }
+
+  .el-button--default {
+    color: #54ffff;
+    background: rgba(5, 27, 91, 0.55);
+    border-color: #1b7fff;
+  }
+}
+
+.splitpanes.default-theme .splitpanes__splitter {
+  background-color: #0B2567 !important;
+  border-color: #0B2567 !important;
+}
+
+.el-divider {
+  background-color: #0B2567;
+}
+
+.el-upload-dragger,
+.el-textarea__inner {
+  color: #dcecff;
+  background-color: rgba(5, 27, 91, 0.72);
+  border-color: #0B2567;
+}
+
+.el-textarea__inner::placeholder {
+  color: rgba(220, 236, 255, 0.5);
 }

src/assets/styles/sidebar.scss

@@ -16,10 +16,14 @@
     transition: width 0.28s;
     width: $base-sidebar-width !important;
     background-color: $base-menu-background;
-    height: 100%;
+    background-image: url('~@/assets/images/nav/sidebar-bg.png');
+    background-repeat: no-repeat;
+    background-position: center bottom;
+    background-size: 100% 100%;
+    height: calc(100% - 68px);
     position: fixed;
     font-size: 0px;
-    top: 0;
+    top: 68px;
     bottom: 0;
     left: 0;
     z-index: 1001;
@@ -64,13 +68,23 @@
       margin-right: 16px;
     }
 
+    .menu-icon-img {
+      width: 16px;
+      height: 16px;
+      margin-right: 16px;
+      vertical-align: -3px;
+      object-fit: contain;
+    }
+
     .el-menu {
       border: none;
       height: 100%;
       width: 100% !important;
+      background-color: transparent !important;
     }
 
     .el-menu-item, .el-submenu__title {
+      background-color: transparent !important;
       overflow: hidden !important;
       text-overflow: ellipsis !important;
       white-space: nowrap !important;
@@ -99,7 +113,7 @@
 
     & .theme-dark .nest-menu .el-submenu>.el-submenu__title,
     & .theme-dark .el-submenu .el-menu-item {
-      background-color: $base-sub-menu-background !important;
+      background-color: transparent !important;
 
       &:hover {
         background-color: $base-sub-menu-hover !important;
@@ -126,6 +140,10 @@
         .svg-icon {
           margin-left: 20px;
         }
+
+        .menu-icon-img {
+          margin-left: 20px;
+        }
       }
     }
 
@@ -139,6 +157,10 @@
           margin-left: 20px;
         }
 
+        .menu-icon-img {
+          margin-left: 20px;
+        }
+
       }
     }
 
@@ -193,7 +215,8 @@
 // when menu collapsed
 .el-menu--vertical {
   &>.el-menu {
-    .svg-icon {
+    .svg-icon,
+    .menu-icon-img {
       margin-right: 16px;
     }
   }

src/assets/styles/variables.scss

@@ -7,18 +7,22 @@ $green: #30B08F;
 $tiffany: #4AB7BD;
 $yellow:#FEC171;
 $panGreen: #30B08F;
+$base-page-background:#101654;
+$base-content-background:#0F124A;
+$base-panel-border:#0B2567;
+$base-navbar-background:#0F124A;
 
 // 默认菜单主题风格
-$base-menu-color:#bfcbd9;
-$base-menu-color-active:#f4f4f5;
-$base-menu-background:#304156;
+$base-menu-color:#54FFFF;
+$base-menu-color-active:#54FFFF;
+$base-menu-background:#0F124A;
 $base-logo-title-color: #ffffff;
 
-$base-menu-light-color:rgba(0,0,0,.70);
-$base-menu-light-background:#ffffff;
+$base-menu-light-color:#54FFFF;
+$base-menu-light-background:#0F124A;
 $base-logo-light-title-color: #001529;
 
-$base-sub-menu-background:#1f2d3d;
+$base-sub-menu-background:#0F124A;
 $base-sub-menu-hover:#001528;
 
 // 自定义暗色菜单风格
@@ -49,6 +53,10 @@ $base-sidebar-width: 200px;
   subMenuBackground: $base-sub-menu-background;
   subMenuHover: $base-sub-menu-hover;
   sideBarWidth: $base-sidebar-width;
+  pageBackground: $base-page-background;
+  contentBackground: $base-content-background;
+  panelBorder: $base-panel-border;
+  navbarBackground: $base-navbar-background;
   logoTitleColor: $base-logo-title-color;
   logoLightTitleColor: $base-logo-light-title-color
 }

src/components/Breadcrumb/index.vue

@@ -131,8 +131,13 @@ export default {
   font-size: 14px;
   line-height: 50px;
   margin-left: 8px;
+
+  a {
+    color: #54FFFF;
+  }
+
   .no-redirect {
-    color: #97a8be;
+    color: #54FFFF;
     cursor: text;
   }
 }

src/components/Crontab/index.vue

@@ -426,7 +426,7 @@ export default {
 .popup-result table span {
   display: block;
   width: 100%;
-  font-family: arial;
+  font-family: var(--app-font-family);
   line-height: 30px;
   height: 30px;
   white-space: nowrap;

src/components/Hamburger/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="padding: 0 15px;" @click="toggleClick">
+  <div class="hamburger-trigger" @click="toggleClick">
     <svg
       :class="{'is-active':isActive}"
       class="hamburger"
@@ -31,11 +31,29 @@ export default {
 </script>
 
 <style scoped>
+.hamburger-trigger {
+  width: 34px;
+  height: 34px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #012459;
+  border: 1px solid rgba(84, 255, 255, 0.18);
+  border-radius: 2px;
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+.hamburger-trigger:hover {
+  background: rgba(0, 92, 190, 0.95);
+}
+
 .hamburger {
   display: inline-block;
   vertical-align: middle;
   width: 20px;
   height: 20px;
+  fill: #54FFFF;
 }
 
 .hamburger.is-active {

src/components/Pagination/index.vue

@@ -105,8 +105,8 @@ export default {
 
 <style scoped>
 .pagination-container {
-  background: #fff;
-  padding: 32px 16px;
+  background: transparent;
+  padding: 8px 4px;
 }
 .pagination-container.hidden {
   display: none;

src/components/PanThumb/index.vue

@@ -93,7 +93,7 @@ export default {
   margin: 0 60px;
   padding: 22px 0 0 0;
   height: 85px;
-  font-family: 'Open Sans', Arial, sans-serif;
+  font-family: var(--app-font-family);
   text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
 }
 
@@ -121,7 +121,7 @@ export default {
   letter-spacing: 1px;
   padding-top: 24px;
   margin: 7px auto 0;
-  font-family: 'Open Sans', Arial, sans-serif;
+  font-family: var(--app-font-family);
   opacity: 0;
   transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s;
   transform: translateX(60px) rotate(90deg);

src/components/TopNav/index.vue

@@ -167,26 +167,34 @@ export default {
 </script>
 
 <style lang="scss">
+.topmenu-container.el-menu--horizontal {
+  height: 68px !important;
+  border-bottom: 0 !important;
+  background: transparent !important;
+}
+
 .topmenu-container.el-menu--horizontal > .el-menu-item {
   float: left;
-  height: 50px !important;
-  line-height: 50px !important;
-  color: #999093 !important;
+  height: 68px !important;
+  line-height: 68px !important;
+  color: #54FFFF !important;
+  background: transparent !important;
   padding: 0 5px !important;
   margin: 0 10px !important;
 }
 
 .topmenu-container.el-menu--horizontal > .el-menu-item.is-active, .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
   border-bottom: 2px solid #{'var(--theme)'} !important;
-  color: #303133;
+  color: #54FFFF !important;
 }
 
 /* submenu item */
 .topmenu-container.el-menu--horizontal > .el-submenu .el-submenu__title {
   float: left;
-  height: 50px !important;
-  line-height: 50px !important;
-  color: #999093 !important;
+  height: 68px !important;
+  line-height: 68px !important;
+  color: #54FFFF !important;
+  background: transparent !important;
   padding: 0 5px !important;
   margin: 0 10px !important;
 }

src/layout/components/AppMain.vue

@@ -44,27 +44,28 @@ export default {
 
 <style lang="scss" scoped>
 .app-main {
-  /* 50= navbar  50  */
-  min-height: calc(100vh - 50px);
+  /* 68 = navbar */
+  height: calc(100vh - 68px);
+  min-height: 0;
   width: 100%;
   position: relative;
   overflow: hidden;
 }
 
 .fixed-header + .app-main {
-  padding-top: 50px;
+  padding-top: 68px;
 }
 
-.hasTagsView {
-  .app-main {
-    /* 84 = navbar + tags-view = 50 + 34 */
-    min-height: calc(100vh - 84px);
-  }
+.app-main.hasTagsView {
+  /* 108 = navbar + module title = 68 + 40 */
+  height: calc(100vh - 108px);
+  min-height: 0;
+}
 
-  .fixed-header + .app-main {
-    padding-top: 84px;
-  }
+.fixed-header + .app-main.hasTagsView {
+  padding-top: 108px;
 }
+
 </style>
 
 <style lang="scss">

src/layout/components/Navbar.vue

@@ -1,18 +1,11 @@
 <template>
   <div class="navbar">
-    <hamburger
-      id="hamburger-container"
-      :is-active="sidebar.opened"
-      class="hamburger-container"
-      @toggleClick="toggleSideBar"
-    />
-
-    <breadcrumb
-      id="breadcrumb-container"
-      class="breadcrumb-container"
-      v-if="!topNav"
-    />
+    <div class="navbar-brand">
+      <img :src="headerLogo" class="header-logo" alt="" />
+      <span class="platform-title">智能巡视管控平台</span>
+    </div>
     <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav" />
+    <div v-else class="navbar-spacer" />
 
     <div class="right-menu">
       <template v-if="device !== 'mobile'">
@@ -27,9 +20,8 @@
         </el-tooltip> -->
         <el-dropdown
           trigger="click"
-          class="international"
+          class="international right-menu-item hover-effect"
           @command="handleSetLanguage"
-          style="top: -13px;"
         >
           <span>
             <svg-icon class-name="international-icon" icon-class="language" style="font-size: 22px;"/>
@@ -76,28 +68,22 @@
 
 <script>
 import { mapGetters } from "vuex";
-import Breadcrumb from "@/components/Breadcrumb";
 import TopNav from "@/components/TopNav";
-import Hamburger from "@/components/Hamburger";
 import Screenfull from "@/components/Screenfull";
-import SizeSelect from "@/components/SizeSelect";
-import Search from "@/components/HeaderSearch";
-import RuoYiGit from "@/components/RuoYi/Git";
-import RuoYiDoc from "@/components/RuoYi/Doc";
+import headerLogo from "@/assets/images/header/logo.png";
 // import { changeLanguage } from "@/api/login";
 export default {
   components: {
-    Breadcrumb,
     TopNav,
-    Hamburger,
     Screenfull,
-    SizeSelect,
-    Search,
-    RuoYiGit,
-    RuoYiDoc,
+  },
+  data() {
+    return {
+      headerLogo
+    };
   },
   computed: {
-    ...mapGetters(["sidebar", "avatar", "device"]),
+    ...mapGetters(["avatar", "device"]),
     setting: {
       get() {
         return this.$store.state.settings.showSettings;
@@ -120,9 +106,6 @@ export default {
     }
   },
   methods: {
-    toggleSideBar() {
-      this.$store.dispatch("app/toggleSideBar");
-    },
     async logout() {
       this.$confirm("确定注销并退出系统吗？", "提示", {
         confirmButtonText: "确定",
@@ -151,12 +134,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "~@/assets/styles/variables.scss";
+
 .navbar {
-  height: 50px;
+  height: 68px;
   overflow: hidden;
   position: relative;
-  background: #fff;
-  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+  display: flex;
+  align-items: center;
+  padding: 0 18px 0 14px;
+  background: $base-navbar-background url("~@/assets/images/header/dingbu2.png") center / 100% 100% no-repeat;
+  box-shadow: none;
+  box-sizing: border-box;
 
   .hamburger-container {
     line-height: 46px;
@@ -171,13 +160,43 @@ export default {
     }
   }
 
-  .breadcrumb-container {
-    float: left;
+  .navbar-brand {
+    width: 430px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    flex: 0 0 430px;
+    min-width: 0;
+  }
+
+  .header-logo {
+    width: 147px;
+    height: 37px;
+    display: block;
+    object-fit: contain;
+  }
+
+  .platform-title {
+    margin-left: 10px;
+    color: #fff;
+    font-size: 34px;
+    font-weight: 700;
+    line-height: 1;
+    white-space: nowrap;
+    letter-spacing: 0;
+    text-shadow: 0 0 6px rgba(84, 255, 255, 0.55), 0 2px 2px rgba(0, 17, 74, 0.65);
+  }
+
+  .navbar-spacer {
+    flex: 1 1 auto;
+    min-width: 0;
   }
 
   .topmenu-container {
-    position: absolute;
-    left: 50px;
+    flex: 1 1 auto;
+    min-width: 0;
+    height: 100%;
+    align-self: stretch;
   }
 
   .errLog-container {
@@ -186,38 +205,47 @@ export default {
   }
 
   .right-menu {
-    float: right;
     height: 100%;
-    line-height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex: 0 0 auto;
+    line-height: 1;
 
     &:focus {
       outline: none;
     }
 
     .right-menu-item {
-      display: inline-block;
-      padding: 0 8px;
-      height: 100%;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0 10px;
+      height: 40px;
       font-size: 18px;
-      color: #5a5e66;
-      vertical-align: text-bottom;
+      color: #54FFFF;
+      vertical-align: middle;
 
       &.hover-effect {
         cursor: pointer;
         transition: background 0.3s;
+        border-radius: 2px;
 
         &:hover {
-          background: rgba(0, 0, 0, 0.025);
+          background: rgba(84, 255, 255, 0.1);
         }
       }
     }
 
     .avatar-container {
-      margin-right: 30px;
+      margin-right: 18px;
 
       .avatar-wrapper {
-        margin-top: 5px;
+        margin-top: 0;
         position: relative;
+        display: flex;
+        align-items: center;
+        padding-right: 16px;
 
         .user-avatar {
           cursor: pointer;
@@ -227,14 +255,35 @@ export default {
         }
 
         .el-icon-caret-bottom {
+          color: #54FFFF;
           cursor: pointer;
           position: absolute;
-          right: -20px;
-          top: 25px;
+          right: 0;
+          top: 50%;
+          transform: translateY(-50%);
           font-size: 12px;
         }
       }
     }
   }
+
+  @media (max-width: 768px) {
+    padding: 0 10px;
+
+    .navbar-brand {
+      width: 300px;
+      flex-basis: 300px;
+    }
+
+    .platform-title {
+      font-size: 18px;
+    }
+
+    .right-menu {
+      .avatar-container {
+        margin-right: 0;
+      }
+    }
+  }
 }
 </style>

src/layout/components/Sidebar/Item.vue

@@ -1,4 +1,19 @@
 <script>
+const dataNavIcon = require('@/assets/images/nav/data.png')
+
+const navIconMap = {
+  '首页': require('@/assets/images/nav/home.png'),
+  'Home': require('@/assets/images/nav/home.png'),
+  '遥视任务管理': require('@/assets/images/nav/task.png'),
+  '巡检任务管理': require('@/assets/images/nav/task.png'),
+  '设备管理': require('@/assets/images/nav/device.png'),
+  '点位管理': require('@/assets/images/nav/point.png'),
+  '系统管理': require('@/assets/images/nav/system.png'),
+  '区域管理': require('@/assets/images/nav/area.png'),
+  '系统监控': require('@/assets/images/nav/monitor.png'),
+  '基础数据': dataNavIcon
+}
+
 export default {
   name: 'MenuItem',
   functional: true,
@@ -10,13 +25,30 @@ export default {
     title: {
       type: String,
       default: ''
+    },
+    menuKey: {
+      type: String,
+      default: ''
+    },
+    isNest: {
+      type: Boolean,
+      default: false
     }
   },
   render(h, context) {
-    const { icon, title } = context.props
+    const { icon, title, menuKey, isNest } = context.props
     const vnodes = []
+    const normalizedTitle = title && title.includes('|') ? title.split('|')[0] : title
+    const compactTitle = (normalizedTitle || '').replace(/\s/g, '').toLowerCase()
+    const isBaseDataMenu = compactTitle.includes('基础数据') ||
+      compactTitle.includes('basicdata') ||
+      compactTitle.includes('basedata') ||
+      (!isNest && menuKey.toLowerCase().startsWith('/basedata'))
+    const navIcon = navIconMap[normalizedTitle] || (isBaseDataMenu ? dataNavIcon : null)
 
-    if (icon) {
+    if (navIcon) {
+      vnodes.push(<img class="menu-icon-img" src={navIcon}/>)
+    } else if (icon) {
       vnodes.push(<svg-icon icon-class={icon}/>)
     }
 

src/layout/components/Sidebar/Logo.vue

@@ -1,93 +1,49 @@
 <template>
-  <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
-    <transition name="sidebarLogoFade">
-      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ $t('logName') }}</h1>
-      </router-link>
-      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ $t('logName') }} </h1>
-      </router-link>
-    </transition>
+  <div class="sidebar-logo-container">
+    <hamburger
+      :is-active="sidebar.opened"
+      class="sidebar-hamburger"
+      @toggleClick="toggleSideBar"
+    />
   </div>
 </template>
 
 <script>
-import logoImg from '@/assets/logo/logo.png'
-import variables from '@/assets/styles/variables.scss'
+import Hamburger from '@/components/Hamburger'
 
 export default {
   name: 'SidebarLogo',
-  props: {
-    collapse: {
-      type: Boolean,
-      required: true
-    }
+  components: {
+    Hamburger
   },
   computed: {
-    variables() {
-      return variables;
-    },
-    sideTheme() {
-      return this.$store.state.settings.sideTheme
+    sidebar() {
+      return this.$store.state.app.sidebar
     }
   },
-  data() {
-    return {
-      title: process.env.VUE_APP_TITLE,
-      logo: logoImg
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('app/toggleSideBar')
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.sidebarLogoFade-enter-active {
-  transition: opacity 1.5s;
-}
-
-.sidebarLogoFade-enter,
-.sidebarLogoFade-leave-to {
-  opacity: 0;
-}
-
 .sidebar-logo-container {
   position: relative;
   width: 100%;
   height: 50px;
-  line-height: 50px;
-  background: #2b2f3a;
-  text-align: center;
+  background: transparent;
   overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: 10px;
+  box-sizing: border-box;
+}
 
-  & .sidebar-logo-link {
-    height: 100%;
-    width: 100%;
-
-    & .sidebar-logo {
-      width: 32px;
-      height: 32px;
-      vertical-align: middle;
-      margin-right: 12px;
-    }
-
-    & .sidebar-title {
-      display: inline-block;
-      margin: 0;
-      color: #fff;
-      font-weight: 600;
-      line-height: 50px;
-      font-size: 14px;
-      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
-      vertical-align: middle;
-    }
-  }
-
-  &.collapse {
-    .sidebar-logo {
-      margin-right: 0px;
-    }
-  }
+.sidebar-hamburger {
+  margin-left: auto;
 }
 </style>

src/layout/components/Sidebar/SidebarItem.vue

@@ -18,6 +18,8 @@
           <!--   :title="onlyOneChild.meta.title" -->
           <item
             :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"
+            :is-nest="isNest"
+            :menu-key="resolvePath(onlyOneChild.path)"
             :title="titleFn(onlyOneChild.meta.title)"
           />
         </el-menu-item>
@@ -34,6 +36,8 @@
         <item
           v-if="item.meta"
           :icon="item.meta && item.meta.icon"
+          :is-nest="isNest"
+          :menu-key="resolvePath(item.path)"
           :title="titleFn(item.meta.title, item.children)"
         >
         </item>

src/layout/components/Sidebar/index.vue

@@ -1,6 +1,6 @@
 <template>
-    <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
-        <logo v-if="showLogo" :collapse="isCollapse" />
+    <div class="has-logo" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
+        <logo />
         <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
             <el-menu
                 :default-active="activeMenu"
@@ -8,7 +8,7 @@
                 :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
                 :text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
                 :unique-opened="true"
-                :active-text-color="settings.theme"
+                :active-text-color="variables.menuColorActive"
                 :collapse-transition="false"
                 mode="vertical"
             >
@@ -44,9 +44,6 @@ export default {
             }
             return path;
         },
-        showLogo() {
-            return this.$store.state.settings.sidebarLogo;
-        },
         variables() {
             return variables;
         },

src/layout/components/TagsView/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div id="tags-view-container" class="tags-view-container">
-    <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
+    <breadcrumb class="module-breadcrumb" />
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper tags-view-wrapper-hidden" @scroll="handleScroll">
       <router-link
         v-for="tag in visitedViews"
         ref="tag"
@@ -29,11 +30,12 @@
 </template>
 
 <script>
+import Breadcrumb from '@/components/Breadcrumb'
 import ScrollPane from './ScrollPane'
 import path from 'path'
 
 export default {
-  components: { ScrollPane },
+  components: { Breadcrumb, ScrollPane },
   data() {
     return {
       visible: false,
@@ -136,11 +138,13 @@ export default {
       }
     },
     moveToCurrentTag() {
-      const tags = this.$refs.tag
+      const tags = this.$refs.tag || []
       this.$nextTick(() => {
         for (const tag of tags) {
           if (tag.to.path === this.$route.path) {
-            this.$refs.scrollPane.moveToTarget(tag)
+            if (this.$refs.scrollPane) {
+              this.$refs.scrollPane.moveToTarget(tag)
+            }
             // when query is different then update
             if (tag.to.fullPath !== this.$route.fullPath) {
               this.$store.dispatch('tagsView/updateVisitedView', this.$route)
@@ -271,11 +275,29 @@ export default {
 
 <style lang="scss" scoped>
 .tags-view-container {
-  height: 34px;
+  height: 40px;
   width: 100%;
-  background: #fff;
-  border-bottom: 1px solid #d8dce5;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
+  position: relative;
+  background: url('~@/assets/images/module-title.png') center / 100% 100% no-repeat;
+  border: none;
+  box-shadow: none;
+
+  .module-breadcrumb {
+    position: relative;
+    z-index: 1;
+    margin-left: 12px;
+    line-height: 40px !important;
+  }
+
+  .tags-view-wrapper-hidden {
+    position: absolute;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    opacity: 0;
+    pointer-events: none;
+  }
+
   .tags-view-wrapper {
     .tags-view-item {
       display: inline-block;
@@ -314,6 +336,7 @@ export default {
     }
   }
   .contextmenu {
+    display: none !important;
     margin: 0;
     background: #fff;
     z-index: 3000;

src/layout/index.vue

@@ -3,11 +3,11 @@
     <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
     <sidebar v-if="!sidebar.hide" class="sidebar-container"/>
     <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
-      <div :class="{'fixed-header':fixedHeader}">
+      <div class="layout-header" :class="{'fixed-header':fixedHeader}">
         <navbar/>
         <tags-view v-if="needTagsView"/>
       </div>
-      <app-main/>
+      <app-main :class="{hasTagsView: needTagsView}" />
       <right-panel>
         <settings/>
       </right-panel>
@@ -88,24 +88,53 @@ export default {
     z-index: 999;
   }
 
+  .layout-header {
+    margin-left: -$base-sidebar-width;
+    width: calc(100% + #{$base-sidebar-width});
+
+    .tags-view-container {
+      width: calc(100% - #{$base-sidebar-width});
+      margin-left: $base-sidebar-width;
+      transition: width 0.28s, margin-left 0.28s;
+    }
+  }
+
   .fixed-header {
     position: fixed;
     top: 0;
+    left: 0;
     right: 0;
-    z-index: 9;
-    width: calc(100% - #{$base-sidebar-width});
-    transition: width 0.28s;
+    z-index: 1002;
+    margin-left: 0;
+    width: 100%;
+    transition: none;
   }
 
-  .hideSidebar .fixed-header {
-    width: calc(100% - 54px);
+  .hideSidebar .layout-header {
+    margin-left: -54px;
+    width: calc(100% + 54px);
+
+    .tags-view-container {
+      width: calc(100% - 54px);
+      margin-left: 54px;
+    }
+
   }
 
-  .sidebarHide .fixed-header {
+  .hideSidebar .fixed-header {
+    margin-left: 0;
     width: 100%;
   }
 
-  .mobile .fixed-header {
+  .sidebarHide .layout-header,
+  .mobile .layout-header {
+    margin-left: 0;
     width: 100%;
+
+    .tags-view-container {
+      width: 100%;
+      margin-left: 0;
+    }
+
   }
 </style>

src/views/equipment/entry.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="app-container">
-    <el-row :gutter="20">
-      <el-col :span="7">
+  <div class="app-container entry-page">
+    <el-row :gutter="14" class="entry-layout">
+      <el-col :span="7" class="entry-left">
         <div class="grid-content">
           <div class="operate-left">
             <el-tooltip
@@ -82,7 +82,7 @@
           </div>
         </div>
       </el-col>
-      <el-col :span="17">
+      <el-col :span="17" class="entry-right">
         <el-empty
           :description="$t('entry.RightSidePrompt')"
           v-if="!show"
@@ -522,7 +522,49 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.entry-page {
+  overflow: hidden;
+}
+
+.entry-layout {
+  flex: 1 1 auto !important;
+  min-height: 0;
+  height: 100%;
+  display: flex;
+  overflow: hidden;
+}
+
+.entry-left,
+.entry-right {
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.entry-left {
+  display: flex;
+  flex-direction: column;
+  padding: 12px !important;
+  background: #0f124a;
+  border: 1px solid #0b2567;
+}
+
+.entry-right {
+  display: flex;
+  flex-direction: column;
+  padding-left: 14px !important;
+  padding-right: 0 !important;
+}
+
+.grid-content {
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
 .operate-left {
+  flex: 0 0 auto;
   height: 30px;
   display: flex;
   justify-content: flex-end;
@@ -545,7 +587,20 @@ export default {
 //     color: #fff !important;
 //   }
 .grid-content-right {
+  flex: 1 1 auto;
+  height: 100%;
+  min-height: 0;
+  overflow-y: auto;
   padding: 0 10%;
+  background: #0f124a;
+  border: 1px solid #0b2567;
+}
+
+.entry-right ::v-deep .el-empty {
+  flex: 1 1 auto;
+  height: 100%;
+  background: #0f124a;
+  border: 1px solid #0b2567;
 }
 .titleName {
   font-size: 26px;
@@ -566,8 +621,10 @@ export default {
   cursor: not-allowed;
 }
 .treeBox {
-  height: 80vh;
-  overflow: hidden;
-  overflow-y: scroll;
+  flex: 1 1 auto;
+  min-height: 0;
+  height: auto;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 </style>

src/views/equipment/equipment.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <div class="app-container equipment-page">
     <el-form :inline="true" :model="queryParams" class="demo-form-inline">
       <el-form-item :label="$t('equipment.DeviceType')">
         <el-select
@@ -113,11 +113,13 @@
         >
       </el-col>
     </el-row>
-    <el-table
-      :data="tableData"
-      style="width: 100%"
-      @selection-change="handleSelectionChange"
-    >
+    <div class="equipment-table-wrap">
+      <el-table
+        :data="tableData"
+        class="equipment-table"
+        height="100%"
+        @selection-change="handleSelectionChange"
+      >
       <el-table-column
         type="selection"
         width="55"
@@ -350,7 +352,8 @@
           >
         </template>
       </el-table-column>
-    </el-table>
+      </el-table>
+    </div>
     <pagination
       v-show="total > 0"
       :total="total"
@@ -1092,6 +1095,22 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.equipment-page {
+  overflow: hidden;
+}
+
+.equipment-table-wrap {
+  flex: 1 1 auto;
+  min-height: 0;
+  height: 0;
+  overflow: hidden;
+}
+
+.equipment-table {
+  width: 100%;
+  height: 100%;
+}
+
 .operate-left {
   height: 30px;
   display: flex;

src/views/equipment/equipment_type.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="app-container">
-    <el-row :gutter="20">
-      <el-col :span="5">
+  <div class="app-container equipment-type-page">
+    <el-row :gutter="14" class="equipment-type-layout">
+      <el-col :span="5" class="equipment-type-left">
         <div class="operate-left">
           <i class="el-icon-plus" @click="addBtn"></i>
           <i class="el-icon-delete" @click="handleDelete"></i>
@@ -37,7 +37,7 @@
           </el-tree>
         </div>
       </el-col>
-      <el-col :span="19">
+      <el-col :span="19" class="equipment-type-right">
         <div class="right">
           <el-button type="primary" @click="addBtn" v-if="!show">{{
             $t("equipment_type.AddDevice")
@@ -294,7 +294,42 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.equipment-type-page {
+  overflow: hidden;
+}
+
+.equipment-type-layout {
+  flex: 1 1 auto !important;
+  min-height: 0;
+  height: 100%;
+  display: flex;
+  overflow: hidden;
+}
+
+.equipment-type-left,
+.equipment-type-right {
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.equipment-type-left {
+  display: flex;
+  flex-direction: column;
+  padding: 12px !important;
+  background: #0f124a;
+  border: 1px solid #0b2567;
+}
+
+.equipment-type-right {
+  display: flex;
+  flex-direction: column;
+  padding-left: 14px !important;
+  padding-right: 0 !important;
+}
+
 .operate-left {
+  flex: 0 0 auto;
   height: 30px;
   display: flex;
   justify-content: flex-end;
@@ -309,8 +344,13 @@ export default {
   // color: #fff !important;
 }
 .right {
+  height: 100%;
+  min-height: 0;
+  overflow-y: auto;
   padding: 0 50px;
-  width: 50%;
+  width: 100%;
+  background: #0f124a;
+  border: 1px solid #0b2567;
   .right-title {
     font-size: 20px;
     margin: 20px 0;
@@ -321,9 +361,10 @@ export default {
   }
 }
 .treeScroll {
-  height: 80vh;
-  // overflow: hidden;
-  overflow-y: scroll;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
   padding: 10px;
   margin-top: 10px;
 }

src/views/index.vue

@@ -44,7 +44,8 @@ export default {
     margin: 0;
   }
 
-  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: var(--app-font-family);
+  font-weight: 900;
   font-size: 13px;
   color: #676a6c;
   overflow-x: hidden;

src/views/login.vue

@@ -225,7 +225,8 @@ export default {
   width: 100%;
   text-align: center;
   color: #fff;
-  font-family: Arial;
+  font-family: var(--app-font-family);
+  font-weight: 900;
   font-size: 12px;
   letter-spacing: 1px;
 }

src/views/point copy/point_mang.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="app-container">
-    <el-row :gutter="20">
-      <el-col :span="4">
+  <div class="app-container point-mang-page">
+    <div class="point-mang-layout">
+      <section class="point-mang-left">
         <div class="qurey">
           <el-input
             :placeholder="$t('point_mang.PleaseEnterTheContent')"
@@ -17,16 +17,18 @@
           node-key="devicetypeId"
           ref="tree"
           :filter-node-method="filterNode"
+          class="point-mang-tree"
         ></el-tree>
-      </el-col>
-      <el-col :span="20" v-if="devicetypeId">
-        <div>
+      </section>
+      <section class="point-mang-right" v-if="devicetypeId">
+        <div class="point-mang-toolbar">
           <el-button type="primary" @click="addBtn">{{
             $t("share.addTo")
           }}</el-button>
           <span>（0/200）{{ $t("point_mang.tableHeadMsg") }}</span>
         </div>
-        <el-table :data="tableData" max-height="700" style="margin-top: 10px">
+        <div class="point-mang-table-wrap">
+        <el-table :data="tableData" class="point-mang-table" height="100%">
           <el-table-column
             prop="date"
             :label="$t('point_mang.index')"
@@ -123,16 +125,17 @@
             </template>
           </el-table-column>
         </el-table>
+        </div>
         <div class="saveBtn">
           <el-button type="primary" @click="submitForm">{{
             $t("share.save")
           }}</el-button>
         </div>
-      </el-col>
-      <el-col :span="20" v-if="!devicetypeId">
+      </section>
+      <section class="point-mang-right point-mang-empty" v-if="!devicetypeId">
         <div style="line-height: 36px">请先选择左侧点位</div>
-      </el-col>
-    </el-row>
+      </section>
+    </div>
     <el-dialog
       :title="$t('point_mang.SetIntelligentRecognitionType')"
       :visible.sync="dialogVisible"
@@ -433,7 +436,73 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.point-mang-page {
+  padding: 14px;
+  overflow: hidden;
+}
+
+.point-mang-layout {
+  flex: 1 1 auto !important;
+  min-height: 0;
+  height: 100%;
+  display: grid;
+  grid-template-columns: 260px minmax(0, 1fr);
+  gap: 14px;
+  overflow: hidden;
+}
+
+.point-mang-left,
+.point-mang-right {
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.point-mang-left,
+.point-mang-right {
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+  background: #0f124a;
+  border: 1px solid #0b2567;
+}
+
+.point-mang-tree {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.point-mang-toolbar {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 36px;
+  color: #dcecff;
+}
+
+.point-mang-table-wrap {
+  flex: 1 1 auto;
+  min-height: 0;
+  height: 0;
+  margin-top: 10px;
+  overflow: hidden;
+}
+
+.point-mang-table {
+  height: 100%;
+}
+
+.point-mang-empty {
+  align-items: center;
+  justify-content: center;
+  color: #dcecff;
+}
+
 .qurey {
+  flex: 0 0 auto;
   display: flex;
   margin-bottom: 10px;
   ::v-deep.el-button {
@@ -446,6 +515,7 @@ export default {
   cursor: pointer;
 }
 .saveBtn {
+  flex: 0 0 auto;
   text-align: center;
   margin-top: 10px;
 }

src/views/point/components/ImageAnnotation.vue

@@ -382,7 +382,7 @@ export default {
 
 <style scoped>
 .image-annotation-container {
-  font-family: Arial, sans-serif;
+  font-family: var(--app-font-family);
   max-width: 1000px;
   height: 550px;
   margin: 0 auto;

src/views/point/point_mang copy.vue

@@ -1,7 +1,7 @@
-el-button<template>
-  <div class="app-container">
-    <el-row :gutter="20">
-      <el-col :span="4">
+<template>
+  <div class="app-container point-mang-page">
+    <div class="point-mang-layout">
+      <section class="point-mang-left">
         <div class="qurey">
           <el-input
             :placeholder="$t('point_mang.PleaseEnterTheContent')"
@@ -17,16 +17,18 @@ el-button<template>
           node-key="devicetypeId"
           ref="tree"
           :filter-node-method="filterNode"
+          class="point-mang-tree"
         ></el-tree>
-      </el-col>
-      <el-col :span="20" v-if="devicetypeId">
-        <div>
+      </section>
+      <section class="point-mang-right" v-if="devicetypeId">
+        <div class="point-mang-toolbar">
           <el-button type="primary" @click="addBtn">{{
             $t("share.addTo")
           }}</el-button>
           <span>（0/200）{{ $t("point_mang.tableHeadMsg") }}</span>
         </div>
-        <el-table :data="tableData" style="margin-top: 10px">
+        <div class="point-mang-table-wrap">
+        <el-table :data="tableData" class="point-mang-table" height="100%">
           <el-table-column
             prop="date"
             :label="$t('point_mang.index')"
@@ -114,22 +116,23 @@ el-button<template>
             </template>
           </el-table-column>
         </el-table>
+        </div>
         <div class="saveBtn">
           <el-button type="primary" @click="submitForm">{{
             $t("share.save")
           }}</el-button>
         </div>
-      </el-col>
-      <el-col :span="20" v-if="!devicetypeId">
+      </section>
+      <section class="point-mang-right point-mang-empty" v-if="!devicetypeId">
         <div style="line-height: 36px">请先选择左侧点位</div>
-      </el-col>
-    </el-row>
+      </section>
+    </div>
     <el-dialog
       :title="$t('point_mang.SetIntelligentRecognitionType')"
       :visible.sync="dialogVisible"
       width="50%"
       :before-close="handleClose"
-      style="height: 70vh"
+      custom-class="point-mang-dialog"
       border
     >
       <el-table
@@ -501,7 +504,73 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.point-mang-page {
+  padding: 14px;
+  overflow: hidden;
+}
+
+.point-mang-layout {
+  flex: 1 1 auto !important;
+  min-height: 0;
+  height: 100%;
+  display: grid;
+  grid-template-columns: 260px minmax(0, 1fr);
+  gap: 14px;
+  overflow: hidden;
+}
+
+.point-mang-left,
+.point-mang-right {
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.point-mang-left,
+.point-mang-right {
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+  background: #0f124a;
+  border: 1px solid #0b2567;
+}
+
+.point-mang-tree {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.point-mang-toolbar {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 36px;
+  color: #dcecff;
+}
+
+.point-mang-table-wrap {
+  flex: 1 1 auto;
+  min-height: 0;
+  height: 0;
+  margin-top: 10px;
+  overflow: hidden;
+}
+
+.point-mang-table {
+  height: 100%;
+}
+
+.point-mang-empty {
+  align-items: center;
+  justify-content: center;
+  color: #dcecff;
+}
+
 .qurey {
+  flex: 0 0 auto;
   display: flex;
   margin-bottom: 10px;
   ::v-deep.el-button {
@@ -514,9 +583,22 @@ export default {
   cursor: pointer;
 }
 .saveBtn {
+  flex: 0 0 auto;
   text-align: center;
   margin-top: 10px;
 }
+
+::v-deep .point-mang-dialog {
+  max-height: 70vh;
+  display: flex;
+  flex-direction: column;
+
+  .el-dialog__body {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: hidden;
+  }
+}
 // .tree-select {
 //   position: absolute;
 //   z-index: 9999999;

src/views/point/point_mang.vue

@@ -1,15 +1,20 @@
-el-button<template>
-  <div class="app-container">
-    <el-row :gutter="20">
-      <el-col :span="4">
-        <div class="qurey">
-          <el-input
-            :placeholder="$t('point_mang.PleaseEnterTheContent')"
-            v-model="filterText"
-            class="input-with-select"
-          >
-          </el-input>
-        </div>
+<template>
+  <div class="sec-left app-container point-mang-page" style="height: 100%">
+    <div class="sec-line point-mang-left">
+      <div class="qurey">
+        <el-input
+          :placeholder="$t('point_mang.PleaseEnterTheContent')"
+          v-model="filterText"
+          class="input-with-select"
+        >
+        </el-input>
+        <el-button
+          class="button"
+          type="primary"
+          icon="el-icon-search"
+        ></el-button>
+      </div>
+      <div class="sec-a2 point-mang-tree-wrap">
         <el-tree
           :data="treeDataNew"
           :props="defaultProps"
@@ -17,137 +22,149 @@ el-button<template>
           node-key="devicetypeId"
           ref="tree"
           :filter-node-method="filterNode"
+          class="point-mang-tree"
         ></el-tree>
-      </el-col>
-      <el-col :span="20" v-if="devicetypeId">
-        <div>
-          <el-button type="primary" @click="addBtn">{{
-            $t("share.addTo")
+      </div>
+    </div>
+    <div class="wid point-mang-right" style="flex: 1" v-if="devicetypeId">
+      <div class="form point-mang-form" ref="form">
+        <el-alert
+          title="提示"
+          class="point-mang-alert"
+          type="info"
+          :description="$t('point_mang.tableHeadMsg')"
+          show-icon
+        />
+        <div class="line point-mang-toolbar">
+          <div>
+            <el-button type="primary" @click="addBtn" size="small" icon="el-icon-plus">{{
+              $t("share.addTo")
+            }}</el-button>
+          </div>
+          <div class="point-mang-toolbar-tip">（0/200）{{ $t("point_mang.tableHeadMsg") }}</div>
+          <el-button type="primary" size="small" @click="submitForm">{{
+            $t("share.save")
           }}</el-button>
-          <span>（0/200）{{ $t("point_mang.tableHeadMsg") }}</span>
         </div>
-        <el-table :data="tableData" style="margin-top: 10px">
-          <el-table-column
-            prop="date"
-            :label="$t('point_mang.index')"
-            width="55"
-            type="index"
-            align="center"
-          ></el-table-column>
-          <el-table-column
-            :label="$t('point_mang.equipmentClassification')"
-            :render-header="addRedStar"
-            align="center"
-          >
-            <template slot-scope="scope">
-              <el-popover
-                v-model="showTreePopover"
-                placement="bottom"
-                trigger="click"
-              >
-                <div class="popover-content">
-                  <el-tree
-                    :data="DevicetypeIdOptions"
-                    :props="defaultPropsObj"
-                    @node-click="
-                      (node) => handleNodeClickInSelect(node, scope.row)
-                    "
+        <div class="point-mang-table-wrap">
+          <el-table :data="tableData" class="point-mang-table" height="100%">
+            <el-table-column
+              prop="date"
+              :label="$t('point_mang.index')"
+              width="55"
+              type="index"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              :label="$t('point_mang.equipmentClassification')"
+              :render-header="addRedStar"
+              align="center"
+            >
+              <template slot-scope="scope">
+                <el-popover
+                  v-model="showTreePopover"
+                  placement="bottom"
+                  trigger="click"
+                >
+                  <div class="popover-content">
+                    <el-tree
+                      :data="DevicetypeIdOptions"
+                      :props="defaultPropsObj"
+                      @node-click="
+                        (node) => handleNodeClickInSelect(node, scope.row)
+                      "
+                    />
+                  </div>
+
+                  <el-input
+                    :key="scope.row.devicetypeName"
+                    slot="reference"
+                    v-model="scope.row.devicetypeName"
+                    placeholder="请选择设备类型"
+                    readonly
+                    @click.native="showTreePopover = true"
                   />
-                </div>
+                </el-popover>
+              </template>
+            </el-table-column>
 
+            <el-table-column
+              :label="$t('point_mang.InspectionStandards')"
+              :render-header="addRedStar"
+              align="center"
+            >
+              <template slot-scope="scope">
                 <el-input
-                  :key="scope.row.devicetypeName"
-                  slot="reference"
-                  v-model="scope.row.devicetypeName"
-                  placeholder="请选择设备类型"
-                  readonly
-                  @click.native="showTreePopover = true"
-                />
-              </el-popover>
-            </template>
-          </el-table-column>
-
-          <el-table-column
-            :label="$t('point_mang.InspectionStandards')"
-            :render-header="addRedStar"
-            align="center"
-          >
-            <template slot-scope="scope">
-              <el-input
-                type="textarea"
-                :placeholder="
-                  $t('share.PleaseChoose') + $t('point_mang.PleaseEnter')
-                "
-                v-model="scope.row.patrolContent"
-              ></el-input>
-            </template>
-          </el-table-column>
-          <el-table-column :label="$t('point_mang.dataFormat')" align="center">
-            <template slot-scope="scope">
-              <el-select
-                v-model="scope.row.mainDevicetypeId"
-                :placeholder="
-                  $t('share.PleaseChoose') + $t('point_mang.dataFormat')
-                "
-              >
-                <el-option
-                  v-for="item in options"
-                  :key="item.dictValue"
-                  :label="item.dictLabel"
-                  :value="item.dictValue"
+                  type="textarea"
+                  :placeholder="
+                    $t('share.PleaseChoose') + $t('point_mang.PleaseEnter')
+                  "
+                  v-model="scope.row.patrolContent"
+                ></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('point_mang.dataFormat')" align="center">
+              <template slot-scope="scope">
+                <el-select
+                  v-model="scope.row.mainDevicetypeId"
+                  :placeholder="
+                    $t('share.PleaseChoose') + $t('point_mang.dataFormat')
+                  "
                 >
-                </el-option>
-              </el-select>
-            </template>
-          </el-table-column>
-          <el-table-column
-            :label="$t('point_mang.IntelligentRecognitionType')"
-            align="center"
-          >
-            <template slot-scope="scope">
-              <span
-                class="intelligenceType"
-                @click="intelligenceTypeBtn(scope.row)"
-                >{{
-                  scope.row.algSubtypeName ? scope.row.algSubtypeName : "设置"
-                }}</span
-              >
-            </template>
-          </el-table-column>
-          <el-table-column :label="$t('share.operate')" align="center">
-            <template slot-scope="scope">
-              <el-button
-                size="mini"
-                type="primary"
-                @click="handleCopy(scope.row)"
-              >
-                {{ $t("share.copy") }}
-              </el-button>
-              <el-button
-                size="mini"
-                type="danger"
-                @click="handleDelete(scope.row, scope.$index)"
-                >{{ $t("share.delete") }}</el-button
-              >
-            </template>
-          </el-table-column>
-        </el-table>
-        <div class="saveBtn">
-          <el-button type="primary" @click="submitForm">{{
-            $t("share.save")
-          }}</el-button>
+                  <el-option
+                    v-for="item in options"
+                    :key="item.dictValue"
+                    :label="item.dictLabel"
+                    :value="item.dictValue"
+                  >
+                  </el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column
+              :label="$t('point_mang.IntelligentRecognitionType')"
+              align="center"
+            >
+              <template slot-scope="scope">
+                <span
+                  class="intelligenceType"
+                  @click="intelligenceTypeBtn(scope.row)"
+                  >{{
+                    scope.row.algSubtypeName ? scope.row.algSubtypeName : "设置"
+                  }}</span
+                >
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('share.operate')" align="center">
+              <template slot-scope="scope">
+                <el-button
+                  size="mini"
+                  type="primary"
+                  @click="handleCopy(scope.row)"
+                >
+                  {{ $t("share.copy") }}
+                </el-button>
+                <el-button
+                  size="mini"
+                  type="danger"
+                  @click="handleDelete(scope.row, scope.$index)"
+                  >{{ $t("share.delete") }}</el-button
+                >
+              </template>
+            </el-table-column>
+          </el-table>
         </div>
-      </el-col>
-      <el-col :span="20" v-if="!devicetypeId">
+      </div>
+    </div>
+    <div class="wid point-mang-right point-mang-empty" v-if="!devicetypeId">
         <div style="line-height: 36px">请先选择左侧点位</div>
-      </el-col>
-    </el-row>
+    </div>
     <el-dialog
       :title="$t('point_mang.SetIntelligentRecognitionType')"
       :visible.sync="dialogVisible"
       width="50%"
       :before-close="handleClose"
-      style="height: 70vh"
+      custom-class="point-mang-dialog"
       border
     >
       <el-table
@@ -533,27 +550,152 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.point-mang-page {
+  padding: 0;
+  overflow: hidden;
+}
+
+.sec-left {
+  width: 100%;
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.sec-line {
+  width: 260px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+  background: #0f124a;
+  border: 1px solid #0b2567;
+  box-sizing: border-box;
+}
+
+.sec-a2,
+.point-mang-tree-wrap {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.wid {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  padding-left: 14px;
+  overflow: hidden;
+}
+
+.point-mang-right {
+  width: 100%;
+}
+
+.point-mang-form {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+  background: #0f124a;
+  border: 1px solid #0b2567;
+  overflow: hidden;
+}
+
+.point-mang-tree {
+  color: #dcecff;
+  background: transparent;
+}
+
+.point-mang-left ::v-deep .el-tree-node__content {
+  height: 30px;
+}
+
+.point-mang-left ::v-deep .el-tree-node__content:hover {
+  background: rgba(77, 223, 255, 0.12);
+}
+
+.point-mang-left ::v-deep .el-tree-node:focus > .el-tree-node__content {
+  background: rgba(77, 223, 255, 0.18);
+}
+
+.point-mang-toolbar {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 36px;
+  color: #dcecff;
+}
+
+.point-mang-toolbar-tip {
+  margin: 0 10px;
+  white-space: nowrap;
+}
+
+.point-mang-table-wrap {
+  flex: 1 1 auto;
+  min-height: 0;
+  height: 0;
+  overflow: hidden;
+}
+
+.point-mang-table {
+  height: 100%;
+}
+
+.point-mang-table ::v-deep .el-table__body-wrapper {
+  overflow-y: auto;
+}
+
+.point-mang-empty {
+  align-items: center;
+  justify-content: center;
+  color: #dcecff;
+}
+
 .qurey {
+  flex: 0 0 auto;
   display: flex;
   margin-bottom: 10px;
+  gap: 10px;
+  .input-with-select {
+    flex: 1;
+  }
   ::v-deep.el-button {
     background-color: #46a6ff !important;
     color: #fff !important ;
   }
 }
+.point-mang-alert {
+  flex: 0 0 auto;
+  margin-bottom: 10px;
+}
 .intelligenceType {
   color: rgb(17, 189, 217);
   cursor: pointer;
 }
-.saveBtn {
-  text-align: center;
-  margin-top: 10px;
-}
 .popover-content {
   max-height: 200px;
   overflow-y: auto;
   padding: 5px 0;
 }
+
+::v-deep .point-mang-dialog {
+  max-height: 70vh;
+  display: flex;
+  flex-direction: column;
+
+  .el-dialog__body {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: hidden;
+  }
+}
 // .tree-select {
 //   position: absolute;
 //   z-index: 9999999;

src/views/point/site_management.vue

@@ -80,17 +80,18 @@
           >
         </div>
 
-        <el-table
-          v-loading="loading"
-          @selection-change="handleSelect1"
-          highlight-current-row
-          @row-click="handleCurrentChange"
-          ref="multipleTable"
-          :height="678"
-          :data="tableData"
-          tooltip-effect="dark"
-          style="width: 100%"
-        >
+        <div class="site-table-wrap">
+          <el-table
+            v-loading="loading"
+            @selection-change="handleSelect1"
+            highlight-current-row
+            @row-click="handleCurrentChange"
+            ref="multipleTable"
+            height="100%"
+            :data="tableData"
+            tooltip-effect="dark"
+            style="width: 100%"
+          >
           <el-table-column type="selection" align="center" width="50" fixed>
           </el-table-column>
           <el-table-column
@@ -357,7 +358,8 @@
               >
             </template>
           </el-table-column>
-        </el-table>
+          </el-table>
+        </div>
         <el-dialog
           class="card-dialog"
           :title="titleAlert"
@@ -2579,6 +2581,16 @@ export default {
   height: 500px;
 }
 
+.sec-left.app-container.card-page {
+  height: 100% !important;
+  min-height: 0;
+  flex-direction: row;
+  align-items: stretch;
+  overflow: hidden;
+  background: transparent;
+  border: 0;
+}
+
 .sec-line {
   width: 260px;
   height: 100%;
@@ -2591,6 +2603,24 @@ export default {
   }
 }
 
+.sec-left.app-container.card-page > .sec-line {
+  flex: 0 0 260px;
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+  background: #0f124a;
+  border: 1px solid #0b2567;
+  overflow: hidden;
+
+  .sec-a2 {
+    flex: 1 1 auto;
+    min-height: 0;
+    height: auto;
+  }
+}
+
 .wid {
   width: calc(100% - 260px);
   // width:100%;
@@ -2611,11 +2641,47 @@ export default {
   }
 }
 
+.sec-left.app-container.card-page > .wid {
+  flex: 1 1 auto !important;
+  width: auto;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
+  padding-left: 14px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
 .form {
   // width: 72%;
   width: 100%;
 }
 
+.sec-left.app-container.card-page > .wid > .form {
+  flex: 1 1 auto;
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 12px !important;
+  box-sizing: border-box;
+  background: #0f124a;
+  border: 1px solid #0b2567;
+  overflow: hidden;
+}
+
+.sec-left.app-container.card-page > .wid > .form > .el-alert,
+.sec-left.app-container.card-page > .wid > .form > .line {
+  flex: 0 0 auto;
+}
+
+.site-table-wrap {
+  flex: 1 1 auto;
+  min-height: 0;
+  height: 0;
+  overflow: hidden;
+}
+
 .form > div {
   width: 100%;
 }

src/views/register.vue

@@ -200,7 +200,8 @@ export default {
   width: 100%;
   text-align: center;
   color: #fff;
-  font-family: Arial;
+  font-family: var(--app-font-family);
+  font-weight: 900;
   font-size: 12px;
   letter-spacing: 1px;
 }