style color update

src/assets/styles/mixin.less

@@ -939,20 +939,29 @@
 .orange {
     color: @m-orange0;
 }
-.selectBtn.ant-btn {
+.selectBtn.ant-btn,.operBtn.ant-btn {
     margin-left: 10px;
     width: 80px;
     height: 30px;
     line-height: 31px;
     text-align: center;
-    background: linear-gradient(0deg, @m-grey15 0%, @m-grey16 98%);
+    background: linear-gradient(0deg, @m-grey39 0%, @m-grey40 98%);
     border: 0;
     color: @m-white0;
     font-size: 14px;
     .rounded-corners(3px);
     &:hover,
     &:focus {
-        background: linear-gradient(0deg, @m-grey15-hover 0%, @m-grey16-hover 98%);
+        background: linear-gradient(0deg, @m-grey39-hover 0%, @m-grey40-hover 98%);
+        color: @m-white0-hover;
+        border: 0;
+    }
+}
+.operBtn.ant-btn {
+    background: linear-gradient(0deg, @m-blue6 0%, @m-blue7 99%);
+    &:hover,
+    &:focus {
+        background: linear-gradient(0deg, @m-blue6-hover 0%, @m-blue7-hover 99%);
         color: @m-white0-hover;
         border: 0;
     }

src/assets/styles/theme.css

@@ -32,6 +32,14 @@
     --m-grey32: #7a8a94;
     --m-grey33: #88a0ae;
     --m-grey34: #88A0AE;
+    --m-grey35: #343D46;
+    --m-grey36: #38444F;
+    --m-grey37: transpant;
+    --m-grey38: #88a0ae;
+    --m-grey39: #455773;
+    --m-grey39-hover: rgba(69, 87, 115, .8);
+    --m-grey40: #405066;
+    --m-grey40-hover: rgba(64, 80, 102, .8);
     /* --m-green1: #e8ffef; */
 
     --m-black0: #242a2e;
@@ -66,6 +74,8 @@
     --m-black28: #000c17;
     --m-black29: #2B3F52;
     --m-black30: #15202B;
+    --m-black31: #0E0E0F;
+    --m-black32: #0E0E0F;
 
     --m-blue0: #3a87f7;
     --m-blue0-hover: rgba(58, 135, 247, .8);
@@ -146,6 +156,14 @@
     --m-grey32: #FEFFFF;
     --m-grey33: #5E6E78;
     --m-grey34: #808E97;
+    --m-grey35: #ffffff;
+    --m-grey36: #ffffff;
+    --m-grey37: #CBD7DD;
+    --m-grey38: #7A8A94;
+    --m-grey39: #5179E2;
+    --m-grey39-hover: rgba(81, 121, 226, .8);
+    --m-grey40: #5179E2;
+    --m-grey40-hover: rgba(81, 121, 226, .8);
 
     --m-black0: #F8FBFF;
     --m-black1: #ECF2F5;
@@ -179,6 +197,8 @@
     --m-black28: #DDE3E8;
     --m-black29: #2B3F52;
     --m-black30: #15202B;
+    --m-black31: #FFFFFF;
+    --m-black32: #CED8E6;
 
     --m-blue0: #5179E2;
     --m-blue0-hover: rgba(81, 121, 226, .8);
@@ -259,6 +279,14 @@
     --m-grey32: #7a8a94;
     --m-grey33: #88a0ae;
     --m-grey34: #88A0AE;
+    --m-grey35: #343D46;
+    --m-grey36: #38444F;
+    --m-grey37: transpant;
+    --m-grey38: #88a0ae;
+    --m-grey39: #455773;
+    --m-grey39-hover: rgba(69, 87, 115, .8);
+    --m-grey40: #405066;
+    --m-grey40-hover: rgba(64, 80, 102, .8);
     /* --m-green1: #e8ffef; */
 
     --m-black0: #242a2e;
@@ -293,6 +321,8 @@
     --m-black28: #000c17;
     --m-black29: #2B3F52;
     --m-black30: #15202B;
+    --m-black31: #0E0E0F;
+    --m-black32: #0E0E0F;
 
     --m-blue0: #3a87f7;
     --m-blue0-hover: rgba(58, 135, 247, .8);

src/assets/styles/variables.less

@@ -42,6 +42,14 @@
 @m-grey32: var(--m-grey32);
 @m-grey33: var(--m-grey33);
 @m-grey34: var(--m-grey34);
+@m-grey35: var(--m-grey35);
+@m-grey36: var(--m-grey36);
+@m-grey37: var(--m-grey37);
+@m-grey38: var(--m-grey38);
+@m-grey39: var(--m-grey39);
+@m-grey39-hover: var(--m-grey39-hover);
+@m-grey40: var(--m-grey40);
+@m-grey40-hover: var(--m-grey40-hover);
 
 @m-black: #000000;
 @m-black0: var(--m-black0);
@@ -76,7 +84,8 @@
 @m-black28: var(--m-black28);
 @m-black29: var(--m-black29);                // 角色详情复选框未选中边框色   白色版本等色值修改
 @m-black30: var(--m-black30);                // 角色详情复选框选中背景色   白色版本等色值修改
-
+@m-black31: var(--m-black31);
+@m-black32: var(--m-black32);
 
 @m-blue0: var(--m-blue0);
 @m-blue0-hover: var(--m-blue0-hover);

src/common/components/filter/index.vue

@@ -91,31 +91,4 @@ export default defineComponent({
         margin-left: 10px;
     }
 }
-.selectBtn.ant-btn {
-    margin-left: 10px;
-    width: 80px;
-    height: 30px;
-    line-height: 31px;
-    text-align: center;
-    background: linear-gradient(0deg, @m-grey15 0%, @m-grey16 98%);
-    border: 0;
-    color: @m-white0;
-    font-size: 14px;
-    .rounded-corners(3px);
-    &:hover,
-    &:focus {
-        background: linear-gradient(0deg, @m-grey15-hover 0%, @m-grey16-hover 98%);
-        color: @m-white0-hover;
-        border: 0;
-    }
-}
-.operBtn.ant-btn:extend(.selectBtn.ant-btn) {
-    background: linear-gradient(0deg, @m-blue6 0%, @m-blue7 99%);
-    &:hover,
-    &:focus {
-        background: linear-gradient(0deg, @m-blue6-hover 0%, @m-blue7-hover 99%);
-        color: @m-white0-hover;
-        border: 0;
-    }
-}
 </style>;

src/common/components/firstMenu/index.vue

@@ -61,45 +61,4 @@ export default defineComponent({
 .noBorderBottom {
     border-bottom: none;
 }
-.first-menu {
-    width: 100%;
-    height: 40px;
-    display: flex;
-    justify-content: space-between;
-    background-color: @m-black1;
-    .a-menu_container {
-        padding-top: 5px;
-        .flex();
-        height: 40px;
-        line-height: 34px;
-        border-bottom: 1px solid @m-blue0 !important;
-        .ant-menu-item {
-            min-width: 120px;
-            height: 34px;
-            line-height: 34px;
-            background: linear-gradient(0deg, #343d46 0%, #38444f 100%);
-            margin-left: 3px;
-            font-size: 16px;
-            columns: @m-grey2;
-            border-radius: 5px 5px 0px 0px;
-            cursor: pointer;
-            font-family: Adobe Heiti Std;
-            font-weight: normal;
-            &:hover {
-                .noBorderBottom;
-            }
-        }
-        .ant-menu-item-active {
-            .noBorderBottom;
-        }
-        .ant-menu-item-selected {
-            .noBorderBottom;
-            color: @m-white0;
-            background: linear-gradient(0deg, #3270d2 0%, #3a87f7 100%);
-            &:hover {
-                color: @m-white0;
-            }
-        }
-    }
-}
 </style>;

src/layout/components/main.vue

@@ -1,20 +1,21 @@
 <template>
-  <div class="exposure">
-    <div class="first-menu">
-      <a-menu class="a-menu_container"
-              theme="dark"
-              v-model:selectedKeys="selectedKey"
-              @click="selectMenu"
-              mode="horizontal">
-        <a-menu-item :key="String(index)"
-                     v-for="(item, index) in list">{{ item.title}}</a-menu-item>
-      </a-menu>
-      <div class="menu_right">
-        <!-- <slot></slot> -->
-      </div>
+    <div class="exposure">
+        <div class="first-menu">
+            <a-menu
+                class="a-menu_container"
+                theme="dark"
+                v-model:selectedKeys="selectedKey"
+                @click="selectMenu"
+                mode="horizontal"
+            >
+                <a-menu-item :key="String(index)" v-for="(item, index) in list">{{ item.title}}</a-menu-item>
+            </a-menu>
+            <div class="menu_right">
+                <!-- <slot></slot> -->
+            </div>
+        </div>
+        <router-view />
     </div>
-    <router-view />
-  </div>
 </template>
 
 <script lang="ts">
@@ -54,23 +55,26 @@ export default defineComponent({
     height: 40px;
     border-bottom: 1px solid @m-blue0 !important;
     background-color: @m-black1;
+    .flex;
+    justify-content: space-between;
     .a-menu_container {
         padding-top: 5px;
         .flex();
         height: 34px;
         line-height: 34px;
+        background: transparent;
         .ant-menu-item {
             min-width: 120px;
             height: 34px;
             line-height: 34px;
-            background: linear-gradient(0deg, #343d46 0%, #38444f 100%);
+            background: linear-gradient(0deg, @m-grey35 0%, @m-grey36 100%);
             margin-left: 3px;
             font-size: 16px;
-            columns: @m-grey2;
+            color: @m-grey38;
             border-radius: 5px 5px 0px 0px;
             cursor: pointer;
             font-family: Adobe Heiti Std;
-            font-weight: normal;
+            border: 1px solid @m-grey37;
             &:hover {
                 .noBorderBottom;
             }
@@ -81,7 +85,7 @@ export default defineComponent({
         .ant-menu-item-selected {
             .noBorderBottom;
             color: @m-white0;
-            background: linear-gradient(0deg, #3270d2 0%, #3a87f7 100%);
+            background: linear-gradient(0deg, @m-blue2 0%, @m-blue0 100%);
             &:hover {
                 color: @m-white0;
             }

src/layout/components/top.vue

@@ -205,7 +205,7 @@ export default defineComponent({
         .m-layout-left {
             min-height: calc(100vh - 376px);
             background: @m-black4;
-            border-right: 1px solid @m-black2;
+            border-right: 1px solid @m-black32;
             overflow: hidden;
             .ant-layout-sider-children {
                 ul.ant-menu.ant-menu-inline.left-menu {
@@ -269,6 +269,7 @@ export default defineComponent({
         }
         .ant-layout-content {
             overflow: hidden;
+            background: @m-black31 !important;
         }
         .ant-menu-vertical {
             .ant-menu-submenu-vertical {