style: 样式修改

src/layouts/LayoutTransverse/index.scss

@@ -2,6 +2,8 @@
   width: 100%;
   height: 100%;
   background-image: url('@/assets/images/bg0.png');
+  background-repeat: repeat;
+  background-size: contain;
   :deep(.el-header) {
     box-sizing: border-box;
     display: flex;
@@ -9,6 +11,10 @@
     justify-content: space-between;
     height: 55px;
     padding: 0 15px 0 0;
+    background-image: url('@/assets/images/bg1.png');
+    background-repeat: repeat;
+
+    // background-size: contain;
     border-bottom: 1px solid #4ca6ff;
     .logo {
       width: 210px;

src/layouts/components/Header/components/Fullscreen.vue

@@ -23,3 +23,8 @@ const handleFullScreen = () => {
   screenfull.toggle()
 }
 </script>
+<style scoped lang="scss">
+.toolBar-icon {
+  color: #7fffff;
+}
+</style>

src/layouts/components/Menu/SubMenu.vue

@@ -34,21 +34,21 @@ const handleClickMenu = (subItem: Menu.MenuOptions) => {
 
 <style lang="scss">
 .el-sub-menu .el-sub-menu__title:hover {
-  color: #7fffff !important;
-  background: linear-gradient(0deg, #4ca6ff 0%, #7fffff 100%) !important;
+  color: var(--el-menu-active-color) !important;
+  background-color: var(--el-menu-active-bg-color) !important;
 }
 .el-menu--horizontal > .el-sub-menu .el-sub-menu__title {
   color: #7fffff !important;
 }
 .el-sub-menu.is-active > .el-sub-menu__title {
-  color: #7fffff !important;
-  background: linear-gradient(0deg, #4ca6ff 0%, #7fffff 100%) !important;
+  color: var(--el-menu-active-color) !important;
+  background-color: var(--el-menu-active-bg-color) !important;
 }
 .el-menu--collapse {
   .is-active {
     .el-sub-menu__title {
-      color: #7fffff !important;
-      background: linear-gradient(0deg, #4ca6ff 0%, #7fffff 100%) !important;
+      color: var(--el-menu-active-color) !important;
+      background-color: var(--el-menu-active-bg-color) !important;
     }
   }
 }

src/layouts/components/Tabs/index.scss

@@ -34,6 +34,7 @@
         height: 40px;
         padding: 0 10px;
         margin: 0;
+        border-bottom: #4ca6ff;
         .el-tabs__nav-wrap {
           position: absolute;
           width: calc(100% - 70px);

src/styles/element-dark.scss

@@ -1,12 +1,25 @@
 /* 自定义 element 暗黑模式 */
+html {
+  --table-border-color: #7fffff;
+}
 html.dark {
+  --el-fill-color-light: transparent;
+  --el-border-color: #90fdfd;
+  --el-border-color-hover: #7fffff;
+  --el-text-color-placeholder: #abf2f2;
+
+  // --el-bg-color: transparent;
+
   /* wangEditor */
   --w-e-toolbar-color: #eeeeee;
   --w-e-toolbar-bg-color: #141414;
   --w-e-textarea-bg-color: #141414;
   --w-e-textarea-color: #eeeeee;
   --w-e-toolbar-active-bg-color: #464646;
+  --el-header-text-color: #7fffff;
+  --table-border-color: #7fffff;
   --w-e-toolbar-border-color: var(--el-border-color-darker);
+  --el-table-border-color: #4ca6ff;
   .w-e-bar-item button:hover,
   .w-e-menu-tooltip-v5::before {
     color: #eeeeee;

src/styles/element.scss

@@ -1,27 +1,52 @@
 /* 设置 notification、message 层级在 loading 之上 */
 .el-message,
 .el-notification {
-  z-index: 2070 !important;
+  z-index: 2070 !important ;
+}
+.el-pagination {
+  --el-pagination-button-bg-color: transparent;
+}
+
+/**
+改变表格内竖线颜色
+*/
+.el-table--border td,
+.el-table--border th,
+.el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
+  border-right: 1px solid rgb(76 166 255 / 40%) !important;
+
+  // opacity: 0.4;
+}
+
+/**
+改变表格内行线颜色
+*/
+.el-table td,
+.el-table th.is-leaf {
+  border-bottom: 1px solid rgb(76 166 255 / 40%) !important;
+}
+
+.el-table thead tr th {
+  border-color: 1px solid rgb(76 166 255 / 40%) !important;
 }
 label {
   font-weight: 700;
 }
-
-// .label-span {
-//   display: inline-block;
-//   overflow: hidden;
-//   text-overflow: ellipsis;
-//   white-space: nowrap;
-//   cursor: pointer;
-// }
+.el-button--primary {
+  background: linear-gradient(0deg, #4ca6ff 0%, #7fffff 100%);
+}
 .el-form-item__label {
-  // display: list-item;
-  // overflow: hidden;
   font-weight: 700;
-
-  // text-overflow: ellipsis;
-  // white-space: nowrap;
+  color: #7fffff;
 }
+.el-form-item__content {
+  border-color: #7fffff !important;
+}
+.el-form-item--default {
+  --font-size: 14px;
+  --el-form-label-font-size: var(--font-size);
+}
+
 .dialog-slot-c {
   .el-tabs__content {
     max-height: 52vh;
@@ -78,10 +103,8 @@ label {
   box-sizing: border-box;
   padding: 12px;
   overflow-x: hidden;
-
-  // background-color: var(--el-bg-color);
   background-color: transparent;
-  border: 1px solid var(--el-border-color-light);
+  border: 1px solid rgb(76 166 255 / 40%) !important;
   border-radius: 6px;
   box-shadow: 0 0 12px rgb(0 0 0 / 5%);
 }
@@ -228,6 +251,11 @@ label {
   // el-table 表格样式
   .el-table {
     flex: 1;
+    color: #7fffff;
+    background-color: transparent;
+
+    --el-table-border-color: rgb(76 166 255 / 40%);
+    --el-table-tr-bg-color: rgb(0 136 204 / 40%);
 
     // 修复 safari
     table {
@@ -239,10 +267,12 @@ label {
       font-weight: bold;
       color: var(--el-text-color-primary);
       background: var(--el-fill-color-light);
+      background-color: transparent;
     }
     .el-table__row {
       height: 45px;
       font-size: 14px;
+      background-color: transparent;
       .move {
         cursor: move;
         .el-icon {
@@ -255,6 +285,7 @@ label {
     .el-table__header .el-table__cell > .cell {
       // white-space: nowrap;
       white-space: wrap;
+      background-color: transparent;
     }
 
     // 解决表格数据为空时样式不居中问题(仅在element-plus中)
@@ -286,28 +317,34 @@ label {
 
 /* el-table 组件大小 */
 .el-table--small {
+  background-color: transparent;
   .el-table__header th {
     height: 40px !important;
     font-size: 14px !important;
+    background-color: transparent;
   }
   .el-table__row {
     height: 40px !important;
     font-size: 13px !important;
+    background-color: transparent;
   }
 }
 .el-table--large {
   .el-table__header th {
     height: 50px !important;
     font-size: 16px !important;
+    background-color: transparent;
   }
   .el-table__row {
     height: 50px !important;
     font-size: 15px !important;
+    background-color: transparent;
   }
 }
 
 /* el-drawer */
 .el-drawer {
+  // background-color: transparent;
   .el-drawer__header {
     padding: 16px 20px;
     margin-bottom: 0;

src/views/taais/homePage/index.scss

@@ -19,21 +19,21 @@
 
 //   // color: black;
 // }
-:deep(.el-table) {
-  // --el-table-border-color: transparent;
-  --el-table-border-color: #bdbdbe7b;
+// :deep(.el-table) {
+//   // --el-table-border-color: transparent;
+//   --el-table-border-color: #bdbdbe7b;
 
-  // --el-table-border: none;
-  --el-table-text-color: #bdbdbe;
-  --el-table-header-text-color: #bdbdbe;
-  --el-table-row-hover-bg-color: transparent;
-  --el-table-current-row-bg-color: transparent;
-  --el-table-header-bg-color: transparent;
-  --el-table-bg-color: transparent;
-  --el-table-tr-bg-color: transparent;
+//   // --el-table-border: none;
+//   --el-table-text-color: #bdbdbe;
+//   --el-table-header-text-color: #bdbdbe;
+//   --el-table-row-hover-bg-color: transparent;
+//   --el-table-current-row-bg-color: transparent;
+//   --el-table-header-bg-color: transparent;
+//   --el-table-bg-color: transparent;
+//   --el-table-tr-bg-color: transparent;
 
-  // --el-table-expanded-cell-bg-color: transparent;
-}
+//   // --el-table-expanded-cell-bg-color: transparent;
+// }
 .bigBox,
 .createTask-bigBox {
   width: 100%;