样式变量抽离

src/App.vue

@@ -1,16 +1,12 @@
 <template>
-  <div class="app-container"
-       @contextmenu.prevent>
-    <!-- 中文配置 -->
-    <a-config-provider :locale="zhCN">
-      <a-spin :tip="tip"
-              :spinning="spinning"
-              size="large">
-        <router-view />
-      </a-spin>
-    </a-config-provider>
-
-  </div>
+    <div class="app-container" @contextmenu.prevent>
+        <!-- 中文配置 -->
+        <a-config-provider :locale="zhCN">
+            <a-spin :tip="tip" :spinning="spinning" size="large">
+                <router-view />
+            </a-spin>
+        </a-config-provider>
+    </div>
 </template>
 
 <script lang="ts">
@@ -148,8 +144,8 @@ export default defineComponent({
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-align: center;
-    color: #2c3e50;
-    background-color: #fffefe;
+    color: @m-black24;
+    background-color: @m-white5;
     display: flex;
     justify-content: center;
     overflow-y: hidden;
@@ -162,9 +158,9 @@ export default defineComponent({
     padding: 30px;
     a {
         font-weight: bold;
-        color: #2c3e50;
+        color: @m-black24;
         &.router-link-exact-active {
-            color: #42b983;
+            color: @m-green5;
         }
     }
 }

src/assets/styles/index.less

@@ -23,9 +23,9 @@ body {
 
 // 布局组件样式初始化
 .ant-layout {
-    background: @m-white;
+    background: @m-white0;
     aside {
-        background: @m-white;
+        background: @m-white0;
         .ant-layout-sider-children {
             section {
             }
@@ -33,11 +33,11 @@ body {
     }
     > section {
         header {
-            background: @m-white;
+            background: @m-white0;
             padding: 0;
         }
         main {
-            background: @m-white;
+            background: @m-white0;
             header {
             }
             main {
@@ -214,7 +214,7 @@ body {
             text-align: left;
         }
         .ant-menu-item-selected {
-            color: @m-white;
+            color: @m-white0;
         }
     }
 }

src/assets/styles/mixin.less

@@ -735,7 +735,7 @@
     position: absolute;
     top: -8px;
     right: -23px;
-    color: #394753;
+    color: @m-grey10;
     margin-left: 5px;
     font-size: 16px;
   }

src/assets/styles/variables.less

@@ -32,13 +32,9 @@
 @m-grey22-hover: rgba(@m-grey22, .8);
 @m-grey23: #48545F;
 @m-grey24: #444444;
+@m-grey25: #3b444a;
+@m-grey26: #343e48;
 
-@m-red0: #ff4d4f;
-@m-red1: #FF2B2B;
-
-@m-white: #fff;
-@m-white1: #FEFEFE;
-@m-white2: rgb(240, 240, 240);
 
 @m-black: rgba(0, 0, 0, 0);
 @m-black0: #242a2e;
@@ -61,6 +57,13 @@
 @m-black17: #2E3539;
 @m-black18: rgba(18, 22, 24, 0.36);
 @m-black19: rgb(26 187 207 / 20%);
+@m-black20: #4b5861;
+@m-black21: #070808;
+@m-black22: #1d2f3f;
+@m-black23: #173025;
+@m-black24: #2c3e50;
+@m-black25: #282e34;
+@m-black26: #192125;
 
 @m-blue0: #3a87f7;
 @m-blue0-hover: rgba(@m-blue0, .8);
@@ -90,23 +93,42 @@
 @m-blue19: #102442;
 @m-blue20: #122d55;
 @m-blue21: #102e45;
+@m-blue22: #0e2f4c;
 
 @body-bg: #e9eef3;
 @m-white0: #ffffff;
 @m-white0-hover: rgba(@m-white0, .8);
 @m-white1: #E5E5E5;
-@m-white2: rgb(54 187 207);
+@m-white2: rgb(240, 240, 240);
+@m-white3: rgb(54 187 207);
+@m-white4: #FEFEFE;
+@m-white5: #fffefe;
+
+
 @m-green0: #1FF195;
 @m-green1: #10251d;
 @m-green2: rgb(26, 187, 207);
 @m-green3: #1abbcf;
-@m-red0: #FF5C6F;
+@m-green4: #1ee18c;
+@m-green5: #42b983;
+
+@m-red0: #ff4d4f;
 @m-red0-hover: rgba(@m-red0, .8);
-@m-red1: #FB7F75;
-@m-red2: #271112;
+@m-red1: #FF2B2B;
 @m-red1-hover: rgba(@m-red1, .8);
+@m-red2: #271112;
+@m-red3: #ff2b2f;
+@m-red4: #2c1b1b;
+@m-red5: #691010;
+@m-red6: #422b0d;
+@m-red7: #f52b2b;
+@m-red8: #f12a2d;
+
 @m-yellow0: #FF9600;
 @m-yellow1: #FC9618;
+@m-yellow2: #ffae00;
+@m-yellow3: #653f0d;
+
 @m-orange0: #F52929;
 
 @font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

src/common/components/contextMenu/contextMenu.vue

@@ -1,14 +1,11 @@
 <template>
-
-  <ul class="context-menu"
-      v-show="contextMenu.show"
-      :style="{ top: y, left: x }">
-    <li v-for="(item, index) in contextMenu.menuList"
-        :key="index"
-        @click.passive="choose(item.callback)">
-      {{item.lable}}
-    </li>
-  </ul>
+    <ul class="context-menu" v-show="contextMenu.show" :style="{ top: y, left: x }">
+        <li
+            v-for="(item, index) in contextMenu.menuList"
+            :key="index"
+            @click.passive="choose(item.callback)"
+        >{{item.lable}}</li>
+    </ul>
 </template>
 
 <script lang="ts">
@@ -45,23 +42,23 @@ export default defineComponent({
     min-width: 100px;
     user-select: none;
     position: fixed;
-    background-color: #282e34;
+    background-color: @m-black25;
     z-index: 999;
     border-radius: 2px;
-    border: 1px solid #2e3539;
+    border: 1px solid @m-black17;
     padding-left: 0;
     list-style: none;
     margin-bottom: 0;
     cursor: pointer;
     li {
         padding: 6px;
-        color: #88a0ae;
+        color: @m-grey2;
         font-size: 16px;
-        border-bottom: 1px solid #2e3539;
+        border-bottom: 1px solid @m-black17;
         text-align: center;
         &:hover {
-            color: #e5e5e5;
-            background-color: #343e48;
+            color: @m-white1;
+            background-color: @m-grey26;
         }
     }
 }

src/common/components/contextMenu/index.vue

@@ -1,13 +1,17 @@
 <template>
-  <!-- 右键 -->
-  <div class="context-menu-container"
-       @click="updateContextMenu(false)"
-       @contextmenu.prevent="onContextMenu">
-    <slot></slot>
-    <contextMenu v-if="contextMenuList.length"
-                 :contextMenu="menuContext"
-                 @update="updateContextMenu" />
-  </div>
+    <!-- 右键 -->
+    <div
+        class="context-menu-container"
+        @click="updateContextMenu(false)"
+        @contextmenu.prevent="onContextMenu"
+    >
+        <slot></slot>
+        <contextMenu
+            v-if="contextMenuList.length"
+            :contextMenu="menuContext"
+            @update="updateContextMenu"
+        />
+    </div>
 </template>
 
 <script lang="ts">
@@ -39,8 +43,8 @@ export default defineComponent({
             selectedData: props.selectedRow,
         });
         watchEffect(() => {
-            menuContext.menuList = props.contextMenuList
-        })
+            menuContext.menuList = props.contextMenuList;
+        });
         function onContextMenu(value: MouseEvent) {
             if (value.type === 'contextmenu') {
                 // 过滤右键表头
@@ -63,23 +67,23 @@ export default defineComponent({
     min-width: 100px;
     user-select: none;
     position: fixed;
-    background-color: #282e34;
+    background-color: @m-black25;
     z-index: 999;
     border-radius: 2px;
-    border: 1px solid #2e3539;
+    border: 1px solid @m-black17;
     padding-left: 0;
     list-style: none;
     margin-bottom: 0;
     cursor: pointer;
     li {
         padding: 6px;
-        color: #88a0ae;
+        color: @m-grey2;
         font-size: 16px;
-        border-bottom: 1px solid #2e3539;
+        border-bottom: 1px solid @m-black17;
         text-align: center;
         &:hover {
-            color: #e5e5e5;
-            background-color: #343e48;
+            color: @m-white1;
+            background-color: @m-grey26;
         }
     }
 }

src/common/components/contextMenu/temp.vue

@@ -1,16 +1,9 @@
 <template>
-  <div class="context-menus-container"
-       v-if="contextMenu.show"
-       @click="close">
-    <ul class="context-menu"
-        :style="styleParam">
-      <li v-for="(item, index) in list"
-          :key="index"
-          @click.stop="choose(item)">
-        {{item.lable}}
-      </li>
-    </ul>
-  </div>
+    <div class="context-menus-container" v-if="contextMenu.show" @click="close">
+        <ul class="context-menu" :style="styleParam">
+            <li v-for="(item, index) in list" :key="index" @click.stop="choose(item)">{{item.lable}}</li>
+        </ul>
+    </div>
 </template>
 
 <script lang="ts">
@@ -68,23 +61,23 @@ export default defineComponent({
     min-width: 100px;
     user-select: none;
     position: fixed;
-    background-color: #282e34;
+    background-color: @m-black25;
     z-index: 999;
     border-radius: 2px;
-    border: 1px solid #2e3539;
+    border: 1px solid @m-black17;
     padding-left: 0;
     list-style: none;
     margin-bottom: 0;
     cursor: pointer;
     li {
         padding: 6px;
-        color: #88a0ae;
+        color: @m-grey2;
         font-size: 16px;
-        border-bottom: 1px solid #2e3539;
+        border-bottom: 1px solid @m-black17;
         text-align: center;
         &:hover {
-            color: #e5e5e5;
-            background-color: #343e48;
+            color: @m-white1;
+            background-color: @m-grey26;
         }
     }
 }

src/common/components/filter/index.vue

@@ -1,34 +1,40 @@
 <template>
-  <!-- 过滤客户资料表格 -->
-  <div class="filter-custom-table">
-    <slot name="selectBefore"></slot>
-    <a-select label-in-value
-              class="conditionSelect"
-              v-for="(item, i) in selectList"
-              :key="i + '11'"
-              style="width: 120px"
-              v-model:value="item.value"
-              :placeholder="item.placeholder"
-              @change="item.change">
-      <a-select-option v-for="(option, j) in item.list"
-                       :key="j + '22'"
-                       :value="option.value">
-        {{option.lable}}
-      </a-select-option>
-    </a-select>
-    <slot name="selectAfter"></slot>
-    <a-input v-model:value="item.value"
-             v-for="(item,i) in inputList"
-             :key="i + '33'"
-             class="tableConditionInput"
-             :placeholder="item.placeholder" />
-    <slot name="inputAfter"></slot>
-    <a-button class="selectBtn"
-              v-for="(item, i) in fixedBtnList"
-              :key="i + 'fixed'"
-              @click="item.event">{{item.lable}}</a-button>
-    <slot></slot>
-  </div>
+    <!-- 过滤客户资料表格 -->
+    <div class="filter-custom-table">
+        <slot name="selectBefore"></slot>
+        <a-select
+            label-in-value
+            class="conditionSelect"
+            v-for="(item, i) in selectList"
+            :key="i + '11'"
+            style="width: 120px"
+            v-model:value="item.value"
+            :placeholder="item.placeholder"
+            @change="item.change"
+        >
+            <a-select-option
+                v-for="(option, j) in item.list"
+                :key="j + '22'"
+                :value="option.value"
+            >{{option.lable}}</a-select-option>
+        </a-select>
+        <slot name="selectAfter"></slot>
+        <a-input
+            v-model:value="item.value"
+            v-for="(item,i) in inputList"
+            :key="i + '33'"
+            class="tableConditionInput"
+            :placeholder="item.placeholder"
+        />
+        <slot name="inputAfter"></slot>
+        <a-button
+            class="selectBtn"
+            v-for="(item, i) in fixedBtnList"
+            :key="i + 'fixed'"
+            @click="item.event"
+        >{{item.lable}}</a-button>
+        <slot></slot>
+    </div>
 </template>
 
 <script lang="ts">
@@ -57,14 +63,11 @@ export default defineComponent({
 
 <style lang="less">
 .filter-custom-table {
-    // width: 100%;
     display: inline-flex;
     padding-top: 9px;
     padding-bottom: 6px;
     .ant-select-single:not(.ant-select-customize-input) {
         margin-right: 10px;
-        // background: #252D34;
-        // .rounded-corners(3px);
         .ant-select-selector {
             height: 30px;
             padding: 0 8px;

src/common/components/firstMenu/index.vue

@@ -1,17 +1,18 @@
 <template>
-  <div class="first-menu">
-    <a-menu class="a-menu_container"
+    <div class="first-menu">
+        <a-menu
+            class="a-menu_container"
             theme="dark"
             v-model:selectedKeys="current"
             @click="menuClick"
-            mode="horizontal">
-      <a-menu-item :key="String(index)"
-                   v-for="(item, index) in list">{{ item[value]}}</a-menu-item>
-    </a-menu>
-    <div class="menu_right">
-      <slot></slot>
+            mode="horizontal"
+        >
+            <a-menu-item :key="String(index)" v-for="(item, index) in list">{{ item[value]}}</a-menu-item>
+        </a-menu>
+        <div class="menu_right">
+            <slot></slot>
+        </div>
     </div>
-  </div>
 </template>
 
 <script lang="ts">
@@ -93,10 +94,10 @@ export default defineComponent({
         }
         .ant-menu-item-selected {
             .noBorderBottom;
-            color: @m-white;
+            color: @m-white0;
             background: linear-gradient(0deg, #3270d2 0%, #3a87f7 100%);
             &:hover {
-                color: @m-white;
+                color: @m-white0;
             }
         }
     }

src/common/components/orderTable/index.vue

@@ -1,136 +1,142 @@
 <template>
     <div @contextmenu.prevent="onContextMenu">
-        <a-table :columns="columns" :data-source="dataSource" class="order-table" bordered :scroll="{ x: true, y: 400 }" :pagination="false">
+        <a-table
+            :columns="columns"
+            :data-source="dataSource"
+            class="order-table"
+            bordered
+            :scroll="{ x: true, y: 400 }"
+            :pagination="false"
+        >
             <template>
                 <a>Delete</a>
             </template>
             <template #expandedRowRender="{ record }">
-                <p style="margin: 0">
-                    {{ record.description }}
-                </p>
+                <p style="margin: 0">{{ record.description }}</p>
             </template>
         </a-table>
         <contextMenu :contextMenu="context" @update="updateContextMenu" />
     </div>
 </template>
 <script lang="ts">
-    import { defineComponent, reactive, PropType } from 'vue';
-    import contextMenu from '@/common/components/contextMenu/index.vue';
-    import { ContextMenu, MenuItem } from '@/common/components/contextMenu/interface';
+import { defineComponent, reactive, PropType } from 'vue';
+import contextMenu from '@/common/components/contextMenu/index.vue';
+import { ContextMenu, MenuItem } from '@/common/components/contextMenu/interface';
 
-    // 右键事件
-    function handleContextMenu(props: any) {
-        const context = reactive<ContextMenu>({
-            position: { clientX: 0, clientY: 0 },
-            show: false,
-            menuList: [],
-            selectedData: null,
-        });
-        function onContextMenu(value: MouseEvent) {
-            const target = value.target as any;
-            // 获取点击表格的 tr  所在的 索引位置
-            const index = target.parentElement.rowIndex;
-            const { clientX, clientY } = value;
-            Object.assign(context.position, { clientX, clientY });
-            context.show = true;
-            context.selectedData = props.dataSource[index];
-        }
-        // 关闭右键弹窗
-        function updateContextMenu(value: boolean) {
-            context.show = value;
-        }
-        return { context, onContextMenu, updateContextMenu };
+// 右键事件
+function handleContextMenu(props: any) {
+    const context = reactive<ContextMenu>({
+        position: { clientX: 0, clientY: 0 },
+        show: false,
+        menuList: [],
+        selectedData: null,
+    });
+    function onContextMenu(value: MouseEvent) {
+        const target = value.target as any;
+        // 获取点击表格的 tr  所在的 索引位置
+        const index = target.parentElement.rowIndex;
+        const { clientX, clientY } = value;
+        Object.assign(context.position, { clientX, clientY });
+        context.show = true;
+        context.selectedData = props.dataSource[index];
+    }
+    // 关闭右键弹窗
+    function updateContextMenu(value: boolean) {
+        context.show = value;
     }
+    return { context, onContextMenu, updateContextMenu };
+}
 
-    export default defineComponent({
-        components: {
-            contextMenu,
+export default defineComponent({
+    components: {
+        contextMenu,
+    },
+    props: {
+        columns: {
+            default: [],
+            type: Array,
         },
-        props: {
-            columns: {
-                default: [],
-                type: Array,
-            },
-            dataSource: {
-                default: [],
-                type: Array,
-            },
-            contextMenuList: {
-                default: [],
-                type: Object as PropType<MenuItem[]>,
-            },
+        dataSource: {
+            default: [],
+            type: Array,
         },
-        setup(props) {
-            const { context, onContextMenu, updateContextMenu } = handleContextMenu(props);
-            context.menuList = props.contextMenuList;
-            return {
-                onContextMenu,
-                context,
-                updateContextMenu,
-            };
+        contextMenuList: {
+            default: [],
+            type: Object as PropType<MenuItem[]>,
         },
-    });
+    },
+    setup(props) {
+        const { context, onContextMenu, updateContextMenu } = handleContextMenu(props);
+        context.menuList = props.contextMenuList;
+        return {
+            onContextMenu,
+            context,
+            updateContextMenu,
+        };
+    },
+});
 </script>
 <style lang="less">
-    .order-table {
-        .ant-table-fixed {
-            width: max-content !important;
-            color: #e5e5e5;
-            background: #0e0e0f;
-            border-top-color: #0e0e0f !important;
-            border-left-color: #161a1c !important;
-        }
-        .ant-table-thead {
-            tr th {
-                background: #212629;
-                color: #556772;
-                font-size: 14px;
-                font-family: Adobe Heiti Std;
-            }
-        }
-        .ant-table-tbody > tr {
-            height: 40px;
-        }
-        .ant-table-tbody .ant-table-row-hover td {
-            background: #172b56 !important;
-        }
-        .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
-            background: #172b56;
-        }
-        .ant-table-bordered .ant-table-thead > tr > th,
-        .ant-table-bordered .ant-table-tbody > tr > td {
-            padding: 0;
-            height: 34px;
-            line-height: 34px;
-            border-color: #161a1c;
-            font-family: Adobe Heiti Std;
-            font-size: 16px;
-        }
-        ant-table-bordered .ant-table-thead > tr > th,
-        .ant-table-bordered .ant-table-tbody > tr > td {
-            padding: 0;
-            height: 34px;
-            line-height: 34px;
-            border-color: #161a1c;
+.order-table {
+    .ant-table-fixed {
+        width: max-content !important;
+        color: @m-white1;
+        background: @m-black2;
+        border-top-color: @m-black2 !important;
+        border-left-color: @m-black9 !important;
+    }
+    .ant-table-thead {
+        tr th {
+            background: @m-black8;
+            color: @m-grey17;
+            font-size: 14px;
             font-family: Adobe Heiti Std;
-            font-size: 16px;
-        }
-        .ant-table-row-expand-icon {
-            width: 14px;
-            height: 14px;
-            line-height: 9px;
-            border: 1px solid @m-blue2;
-            border-radius: 3px;
-            background: inherit;
-        }
-        .ant-table-row-collapsed::after,
-        .ant-table-row-expanded::after {
-            color: @m-blue2;
         }
+    }
+    .ant-table-tbody > tr {
+        height: 40px;
+    }
+    .ant-table-tbody .ant-table-row-hover td {
+        background: @m-blue3 !important;
+    }
+    .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
+        background: @m-blue3;
+    }
+    .ant-table-bordered .ant-table-thead > tr > th,
+    .ant-table-bordered .ant-table-tbody > tr > td {
+        padding: 0;
+        height: 34px;
+        line-height: 34px;
+        border-color: @m-black9;
+        font-family: Adobe Heiti Std;
+        font-size: 16px;
+    }
+    ant-table-bordered .ant-table-thead > tr > th,
+    .ant-table-bordered .ant-table-tbody > tr > td {
+        padding: 0;
+        height: 34px;
+        line-height: 34px;
+        border-color: @m-black9;
+        font-family: Adobe Heiti Std;
+        font-size: 16px;
+    }
+    .ant-table-row-expand-icon {
+        width: 14px;
+        height: 14px;
+        line-height: 9px;
+        border: 1px solid @m-blue2;
+        border-radius: 3px;
+        background: inherit;
+    }
+    .ant-table-row-collapsed::after,
+    .ant-table-row-expanded::after {
+        color: @m-blue2;
+    }
 
-        .ant-table-expanded-row,
-        .ant-table-expanded-row:hover {
-            background: #121618;
-        }
-    }</style
+    .ant-table-expanded-row,
+    .ant-table-expanded-row:hover {
+        background: @m-black10;
+    }
+}
+</style
 >;

src/common/components/secondeMenu/index.vue

@@ -1,35 +1,25 @@
 <template>
-  <div class="second_menu">
-    <a-layout-sider class="m-layout-left"
-                    width="180"
-                    @collapse="collapse"
-                    collapsible>
-      <!-- v-model:collapsed="collapsed" -->
-      <a-menu theme="dark"
-              mode="inline"
-              class="left-menu"
-              @click="menuClick">
-        <!-- v-model:selectedKeys="selectedKeys" v-model:openKeys="openKeys" -->
-        <a-sub-menu v-for="item in menuList"
-                    :key="item.key">
-          <template #title>
-            <span v-if="item.code">
-              <svg class="icon svg-icon"
-                   aria-hidden="true">
-                <use :xlink:href="fontIcon(item.code)"></use>
-              </svg>
-              <span class="menu-item_title"
-                    v-show="!collapsed">{{ item.title }}</span>
-            </span>
-          </template>
-          <a-menu-item :key="subItem.code"
-                       v-for="subItem in item.children">
-            <span>{{ subItem.title }}</span>
-          </a-menu-item>
-        </a-sub-menu>
-      </a-menu>
-    </a-layout-sider>
-  </div>
+    <div class="second_menu">
+        <a-layout-sider class="m-layout-left" width="180" @collapse="collapse" collapsible>
+            <!-- v-model:collapsed="collapsed" -->
+            <a-menu theme="dark" mode="inline" class="left-menu" @click="menuClick">
+                <!-- v-model:selectedKeys="selectedKeys" v-model:openKeys="openKeys" -->
+                <a-sub-menu v-for="item in menuList" :key="item.key">
+                    <template #title>
+                        <span v-if="item.code">
+                            <svg class="icon svg-icon" aria-hidden="true">
+                                <use :xlink:href="fontIcon(item.code)" />
+                            </svg>
+                            <span class="menu-item_title" v-show="!collapsed">{{ item.title }}</span>
+                        </span>
+                    </template>
+                    <a-menu-item :key="subItem.code" v-for="subItem in item.children">
+                        <span>{{ subItem.title }}</span>
+                    </a-menu-item>
+                </a-sub-menu>
+            </a-menu>
+        </a-layout-sider>
+    </div>
 </template>
 
 <script lang="ts">
@@ -243,43 +233,4 @@ export default defineComponent({
         }
     }
 }
-// .noBorderBottom {
-//     border-bottom: none;
-// }
-// .menu_container {
-//     .flex();
-//     justify-content: space-between;
-//     border-bottom: 1px solid @m-blue0 !important;
-//     background-color: @m-black1;
-//     .a-menu_container {
-//         padding-top: 5px;
-//         .flex();
-//         height: 34px;
-//         line-height: 34px;
-//         .ant-menu-item {
-//             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-white;
-//             background: linear-gradient(0deg, #3270d2 0%, #3a87f7 100%);
-//             &:hover {
-//                 color: @m-white;
-//             }
-//         }
-//     }
-// }
 </style>;

src/layout/components/main.vue

@@ -1,22 +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">
@@ -82,10 +81,10 @@ export default defineComponent({
         }
         .ant-menu-item-selected {
             .noBorderBottom;
-            color: @m-white;
+            color: @m-white0;
             background: linear-gradient(0deg, #3270d2 0%, #3a87f7 100%);
             &:hover {
-                color: @m-white;
+                color: @m-white0;
             }
         }
     }

src/layout/index.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="layout">
-    <LayoutTop />
-    <template v-if="isBottom">
-      <div class="sliderLayout">
-        <div class="shortLine"></div>
-      </div>
-      <LayoutBottom />
-    </template>
-  </div>
+    <div class="layout">
+        <LayoutTop />
+        <template v-if="isBottom">
+            <div class="sliderLayout">
+                <div class="shortLine"></div>
+            </div>
+            <LayoutBottom />
+        </template>
+    </div>
 </template>
 <script lang="ts">
 import LayoutTop from './components/top.vue';
@@ -45,14 +45,14 @@ export default defineComponent({
     .sliderLayout {
         width: 100%;
         height: 4px;
-        background: #242a2e;
+        background: @m-black0;
         border-top: 1px solid @m-grey5;
         border-bottom: 1px solid @m-grey5;
         position: relative;
         .shortLine {
             width: 30px;
             height: 2px;
-            background: #4b5861;
+            background: @m-black20;
             border-radius: 1px;
             .position(absolute, 50%, auto, auto, 50%);
             transform: translate(-50%, -50%);

src/views/account/login.vue

@@ -1,67 +1,61 @@
 <template>
-  <div class="login">
-    <a-row type="flex"
-           justify="center"
-           align="middle">
-      <a-col>
-        <div class="login-background">
-          <div id="img">
-            <!-- <img src="./logo.png"
-                 alt="" /> -->
-          </div>
-        </div>
-        <div class="login-content">
-          <p>账号登录</p>
-          <a-form ref="formDom"
-                  :model="form"
-                  :rules="rules">
-            <a-form-item name="account">
-              <a-input placeholder="用户名/账号/手机号"
-                       v-model:value="form.account">
-                <template #prefix>
-                  <img src="@/assets/images/user.png"
-                       alt="" />
-                </template>
-              </a-input>
-            </a-form-item>
-            <a-form-item name="password"
-                         class="mb20">
-              <a-input @keyup.enter="loginAction"
-                       placeholder="请输入您的登录密码"
-                       type="password"
-                       v-model:value="form.password">
-                <template #prefix>
-                  <img src="@/assets/images/password.png"
-                       alt="" />
-                </template>
-              </a-input>
-            </a-form-item>
-            <a-form-item>
-              <div class="login-remember-password">
-                <a-checkbox v-model:checked="form.isRemember">
-                  记住账号
-                </a-checkbox>
-                <!-- <router-link to="/resetPassword">忘记密码?</router-link> -->
-              </div>
-            </a-form-item>
-            <!-- <a-form-item>
+    <div class="login">
+        <a-row type="flex" justify="center" align="middle">
+            <a-col>
+                <div class="login-background">
+                    <div id="img">
+                        <!-- <img src="./logo.png"
+                        alt="" />-->
+                    </div>
+                </div>
+                <div class="login-content">
+                    <p>账号登录</p>
+                    <a-form ref="formDom" :model="form" :rules="rules">
+                        <a-form-item name="account">
+                            <a-input placeholder="用户名/账号/手机号" v-model:value="form.account">
+                                <template #prefix>
+                                    <img src="@/assets/images/user.png" alt />
+                                </template>
+                            </a-input>
+                        </a-form-item>
+                        <a-form-item name="password" class="mb20">
+                            <a-input
+                                @keyup.enter="loginAction"
+                                placeholder="请输入您的登录密码"
+                                type="password"
+                                v-model:value="form.password"
+                            >
+                                <template #prefix>
+                                    <img src="@/assets/images/password.png" alt />
+                                </template>
+                            </a-input>
+                        </a-form-item>
+                        <a-form-item>
+                            <div class="login-remember-password">
+                                <a-checkbox v-model:checked="form.isRemember">记住账号</a-checkbox>
+                                <!-- <router-link to="/resetPassword">忘记密码?</router-link> -->
+                            </div>
+                        </a-form-item>
+                        <!-- <a-form-item>
               <div style="text-align:left">
                 <a-checkbox v-model:checked="form.isRead">
                   我已阅读并同意
                 </a-checkbox>
                 <router-link to="/resetPassword">《用户协议》</router-link>
               </div>
-            </a-form-item> -->
-            <a-form-item class="mt20">
-              <a-button @click="loginAction"
-                        :loading="loading"
-                        :disabled="goHomeloading">登录</a-button>
-            </a-form-item>
-          </a-form>
-        </div>
-      </a-col>
-    </a-row>
-  </div>
+                        </a-form-item>-->
+                        <a-form-item class="mt20">
+                            <a-button
+                                @click="loginAction"
+                                :loading="loading"
+                                :disabled="goHomeloading"
+                            >登录</a-button>
+                        </a-form-item>
+                    </a-form>
+                </div>
+            </a-col>
+        </a-row>
+    </div>
 </template>
 
 <script lang="ts">
@@ -235,7 +229,7 @@ export default defineComponent({
 .ant-col {
     width: 690px;
     height: 450px;
-    background: #fff;
+    background: @m-white0;
     border-radius: 5px;
     box-shadow: 0px 5px 10px 0px rgba(18, 22, 24, 0.18);
     .flex();
@@ -352,7 +346,7 @@ export default defineComponent({
         font-size: 16px;
         background: @m-blue1;
         border-radius: 3px;
-        color: @m-white;
+        color: @m-white0;
         height: 50px;
         font-weight: 500;
         line-height: 43px;

src/views/account/logon.vue

@@ -2,8 +2,8 @@
     <div class="regsiter">
         <header>
             <div class="regsiter-header-content">
-                <span
-                    >已有账号?
+                <span>
+                    已有账号?
                     <router-link to="/login">请登录</router-link>
                 </span>
                 <router-link to="/">旅游保首页</router-link>
@@ -20,8 +20,7 @@
                 <h2>新用户注册</h2>
                 <main>
                     <h4>请扫描二维码注册</h4>
-                    <div>
-                    </div>
+                    <div></div>
                 </main>
             </div>
         </section>
@@ -29,92 +28,24 @@
 </template>
 
 <script lang="ts">
-    import { defineComponent, ref } from 'vue';
-    export default defineComponent({
-        name: 'register',
-        setup() {
-            const qrcodeValue = ref('');
+import { defineComponent, ref } from 'vue';
+export default defineComponent({
+    name: 'register',
+    setup() {
+        const qrcodeValue = ref('');
 
-            return { qrcodeValue };
-        },
-    });
+        return { qrcodeValue };
+    },
+});
 </script>
 
 <style lang="less" scoped>
-    .regsiter {
-        width: 100%;
-        height: 100%;
-        position: fixed;
-        top: 0;
-        bottom: 0;
-        background: @m-white;
-    }
-    // header {
-    //     font-size: 13px;
-    //     width: 100%;
-    //     .regsiter-header-content {
-    //         text-align: right;
-    //         border-bottom: 1px solid #eeeeee;
-    //         padding: 0 40px;
-    //         span {
-    //             margin-right: 40px;
-    //         }
-    //         a {
-    //             color: @cyan-color1;
-    //         }
-    //     }
-    //     .regsiter-header-logo {
-    //         padding: 0 40px;
-    //         text-align: left;
-    //         .ant-divider {
-    //             background: @cyan-color1;
-    //             height: 20px;
-    //             top: -4px;
-    //         }
-    //         span {
-    //             color: @cyan-color1;
-    //             font-size: 20px;
-    //         }
-    //         .plane {
-    //             float: right;
-    //             margin-right: 30px;
-    //         }
-    //     }
-    // }
-    // section {
-    //     background: @grey5;
-    //     padding: 80px 60px;
-    //     > div {
-    //         background: @m-white;
-    //         box-shadow: 0px 0px 7px 0px rgba(93, 93, 93, 0.1);
-    //         border-radius: 5px;
-    //         padding: 20px;
-    //         h2 {
-    //             text-align: left;
-    //             color: @black-color4;
-    //             font-weight: 400;
-    //             font-size: 18px;
-    //             border-bottom: 1px solid @grey2;
-    //             padding-bottom: 20px;
-    //         }
-    //     }
-    //     main {
-    //         margin: 40px 0;
-    //         h4 {
-    //             font-size: 21px;
-    //             font-family: Source Han Sans CN;
-    //             font-weight: 400;
-    //             color: @black-color1;
-    //             margin-bottom: 20px;
-    //         }
-    //         div {
-    //             margin: 0 auto;
-    //             width: 218px;
-    //             height: 218px;
-    //             padding: 20px;
-    //             background: @m-white;
-    //             border: 1px solid @grey2;
-    //         }
-    //     }
-    // }
+.regsiter {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    background: @m-white0;
+}
 </style>

src/views/information/account_info/compoments/add-managers-permission/index.vue

@@ -1,84 +1,71 @@
 <template>
-  <!-- 新增角色 -->
-  <a-modal class="commonModal add-roles"
-           title="新增角色"
-           v-model:visible="visible"
-           @cancel="cancel"
-           centered
-           :maskClosable="false"
-           width="100%">
-    <template #footer>
-      <a-button key="cancel"
-                type="primary"
-                :loading="loading"
-                @click="cancel">取消
-      </a-button>
-      <a-button key="submit"
-                type="primary"
-                :loading="loading"
-                @click="submit">新增
-      </a-button>
-    </template>
-    <a-form class="inlineForm"
-            ref="formRef"
-            :model="formState"
-            :rules="rules">
-      <a-row :gutter="24">
-        <a-col :span="24">
-          <a-form-item label="角色名称">
-            <a-input class="dialogInput"
-                     style="width: 200px"
-                     v-model:value="name"
-                     placeholder="请输入角色名称" />
-          </a-form-item>
-        </a-col>
-        <a-col :span="24">
-          <a-form-item label="权限功能"
-                       name="">
-          </a-form-item>
-        </a-col>
-        <a-col :span="24">
-          <div class="powerTable">
-            <!-- <a-checkbox-group class="commonCheckboxGroup"
+    <!-- 新增角色 -->
+    <a-modal
+        class="commonModal add-roles"
+        title="新增角色"
+        v-model:visible="visible"
+        @cancel="cancel"
+        centered
+        :maskClosable="false"
+        width="100%"
+    >
+        <template #footer>
+            <a-button key="cancel" type="primary" :loading="loading" @click="cancel">取消</a-button>
+            <a-button key="submit" type="primary" :loading="loading" @click="submit">新增</a-button>
+        </template>
+        <a-form class="inlineForm" ref="formRef" :model="formState" :rules="rules">
+            <a-row :gutter="24">
+                <a-col :span="24">
+                    <a-form-item label="角色名称">
+                        <a-input
+                            class="dialogInput"
+                            style="width: 200px"
+                            v-model:value="name"
+                            placeholder="请输入角色名称"
+                        />
+                    </a-form-item>
+                </a-col>
+                <a-col :span="24">
+                    <a-form-item label="权限功能" name></a-form-item>
+                </a-col>
+                <a-col :span="24">
+                    <div class="powerTable">
+                        <!-- <a-checkbox-group class="commonCheckboxGroup"
 
-                                         > -->
-            <div class="powerRow"
-                 v-for="(item, i) in tableList"
-                 :key="i + '0'">
-              <div class="powerLeft">
-                <a-checkbox v-model:checked="item.Menu.ishadrole">
-                  {{item.Menu.resourcename}}
-                </a-checkbox>
-              </div>
-              <div class="powerRight">
-                <div class="line"
-                     v-for="(sub, j) in item.SubMenu"
-                     :key="j + '1'">
-                  <div class="left">
-                    <a-checkbox v-model:checked="sub.Menu.ishadrole"
-                                @change="secondChange(item, sub)"
-                                :value="sub.Menu.resourcecode">
-                      {{sub.Menu.resourcename}}
-                    </a-checkbox>
-                  </div>
-                  <div class="right">
-                    <a-checkbox v-for="(subNext, l) in sub.SubMenu"
-                                :key="l + '3'"
-                                v-model:checked="subNext.Menu.ishadrole"
-                                @change="thirdChange(item, sub, subNext)"
-                                :value="subNext.Menu.resourcecode">
-                      {{subNext.Menu.resourcename}}
-                    </a-checkbox>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <!-- </a-checkbox-group> -->
-          </div>
-        </a-col>
-      </a-row>
-    </a-form>
-  </a-modal>
+                        >-->
+                        <div class="powerRow" v-for="(item, i) in tableList" :key="i + '0'">
+                            <div class="powerLeft">
+                                <a-checkbox
+                                    v-model:checked="item.Menu.ishadrole"
+                                >{{item.Menu.resourcename}}</a-checkbox>
+                            </div>
+                            <div class="powerRight">
+                                <div class="line" v-for="(sub, j) in item.SubMenu" :key="j + '1'">
+                                    <div class="left">
+                                        <a-checkbox
+                                            v-model:checked="sub.Menu.ishadrole"
+                                            @change="secondChange(item, sub)"
+                                            :value="sub.Menu.resourcecode"
+                                        >{{sub.Menu.resourcename}}</a-checkbox>
+                                    </div>
+                                    <div class="right">
+                                        <a-checkbox
+                                            v-for="(subNext, l) in sub.SubMenu"
+                                            :key="l + '3'"
+                                            v-model:checked="subNext.Menu.ishadrole"
+                                            @change="thirdChange(item, sub, subNext)"
+                                            :value="subNext.Menu.resourcecode"
+                                        >{{subNext.Menu.resourcename}}</a-checkbox>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- </a-checkbox-group> -->
+                    </div>
+                </a-col>
+            </a-row>
+        </a-form>
+    </a-modal>
 </template>
 
 <script lang="ts">
@@ -305,19 +292,19 @@ export default defineComponent({
         .ant-checkbox {
             margin-right: 2px;
             .ant-checkbox-inner {
-                background: #15202b;
-                border: 1px solid #2b3f52;
+                background: @m-grey21;
+                border: 1px solid @m-grey14;
                 border-radius: 3px;
             }
         }
         .ant-checkbox.ant-checkbox-checked {
             .ant-checkbox-inner {
                 &::after {
-                    border-color: #3a87f7;
+                    border-color: @m-blue0;
                 }
             }
             &::after {
-                border-color: #3a87f7;
+                border-color: @m-blue0;
             }
         }
         span + span {
@@ -328,13 +315,13 @@ export default defineComponent({
     }
     .ant-checkbox-wrapper-disabled {
         .ant-checkbox-disabled {
-            outline-color: #2b3f52;
+            outline-color: @m-grey14;
             .ant-checkbox-input {
                 color: @m-white0;
                 font-size: 14px;
             }
             .ant-checkbox-inner {
-                border-color: #2b3f52 !important;
+                border-color: @m-grey14 !important;
             }
         }
     }

src/views/information/account_info/compoments/managers-permission-delete/index.vue

@@ -1,83 +1,70 @@
 <template>
-  <!-- 删除角色 -->
-  <a-modal class="commonModal add-roles"
-           title="删除角色"
-           v-model:visible="visible"
-           @cancel="cancel"
-           centered
-           :maskClosable="false"
-           width="100%">
-    <template #footer>
-      <a-button key="cancel"
-                type="primary"
-                :loading="loading"
-                @click="cancel">取消
-      </a-button>
-      <a-button key="submit"
-                type="primary"
-                :loading="loading"
-                @click="submit">删除
-      </a-button>
-    </template>
-    <a-form class="inlineForm"
-            ref="formRef"
-            :model="formState"
-            :rules="rules">
-      <a-row :gutter="24">
-        <a-col :span="24">
-          <a-form-item label="角色名称">
-            <a-input class="dialogInput"
-                     style="width: 200px"
-                     v-model:value="name"
-                     placeholder="请输入模板名称" />
-          </a-form-item>
-        </a-col>
-        <a-col :span="24">
-          <a-form-item label="权限功能"
-                       name="">
-          </a-form-item>
-        </a-col>
-        <a-col :span="24">
-          <div class="powerTable">
-            <div class="powerRow"
-                 v-for="(item, i) in tableList"
-                 :key="i + '0'">
-              <div class="powerLeft">
-                <a-checkbox v-model:checked="item.Menu.ishadrole"
-                            disabled>
-                  {{item.Menu.resourcename}}
-                </a-checkbox>
-              </div>
-              <div class="powerRight">
-                <div class="line"
-                     v-for="(sub, j) in item.SubMenu"
-                     :key="j + '1'">
-                  <div class="left">
-                    <a-checkbox v-model:checked="sub.Menu.ishadrole"
-                                @change="secondChange(item, sub)"
-                                :value="sub.Menu.resourcecode"
-                                disabled>
-                      {{sub.Menu.resourcename}}
-                    </a-checkbox>
-                  </div>
-                  <div class="right">
-                    <a-checkbox v-for="(subNext, l) in sub.SubMenu"
-                                :key="l + '3'"
-                                v-model:checked="subNext.Menu.ishadrole"
-                                @change="thirdChange(item, sub, subNext)"
-                                :value="subNext.Menu.resourcecode"
-                                disabled>
-                      {{subNext.Menu.resourcename}}
-                    </a-checkbox>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </a-col>
-      </a-row>
-    </a-form>
-  </a-modal>
+    <!-- 删除角色 -->
+    <a-modal
+        class="commonModal add-roles"
+        title="删除角色"
+        v-model:visible="visible"
+        @cancel="cancel"
+        centered
+        :maskClosable="false"
+        width="100%"
+    >
+        <template #footer>
+            <a-button key="cancel" type="primary" :loading="loading" @click="cancel">取消</a-button>
+            <a-button key="submit" type="primary" :loading="loading" @click="submit">删除</a-button>
+        </template>
+        <a-form class="inlineForm" ref="formRef" :model="formState" :rules="rules">
+            <a-row :gutter="24">
+                <a-col :span="24">
+                    <a-form-item label="角色名称">
+                        <a-input
+                            class="dialogInput"
+                            style="width: 200px"
+                            v-model:value="name"
+                            placeholder="请输入模板名称"
+                        />
+                    </a-form-item>
+                </a-col>
+                <a-col :span="24">
+                    <a-form-item label="权限功能" name></a-form-item>
+                </a-col>
+                <a-col :span="24">
+                    <div class="powerTable">
+                        <div class="powerRow" v-for="(item, i) in tableList" :key="i + '0'">
+                            <div class="powerLeft">
+                                <a-checkbox
+                                    v-model:checked="item.Menu.ishadrole"
+                                    disabled
+                                >{{item.Menu.resourcename}}</a-checkbox>
+                            </div>
+                            <div class="powerRight">
+                                <div class="line" v-for="(sub, j) in item.SubMenu" :key="j + '1'">
+                                    <div class="left">
+                                        <a-checkbox
+                                            v-model:checked="sub.Menu.ishadrole"
+                                            @change="secondChange(item, sub)"
+                                            :value="sub.Menu.resourcecode"
+                                            disabled
+                                        >{{sub.Menu.resourcename}}</a-checkbox>
+                                    </div>
+                                    <div class="right">
+                                        <a-checkbox
+                                            v-for="(subNext, l) in sub.SubMenu"
+                                            :key="l + '3'"
+                                            v-model:checked="subNext.Menu.ishadrole"
+                                            @change="thirdChange(item, sub, subNext)"
+                                            :value="subNext.Menu.resourcecode"
+                                            disabled
+                                        >{{subNext.Menu.resourcename}}</a-checkbox>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </a-col>
+            </a-row>
+        </a-form>
+    </a-modal>
 </template>
 
 <script lang="ts">
@@ -312,19 +299,19 @@ export default defineComponent({
         .ant-checkbox {
             margin-right: 2px;
             .ant-checkbox-inner {
-                background: #15202b;
-                border: 1px solid #2b3f52;
+                background: @m-grey21;
+                border: 1px solid @m-grey14;
                 border-radius: 3px;
             }
         }
         .ant-checkbox.ant-checkbox-checked {
             .ant-checkbox-inner {
                 &::after {
-                    border-color: #3a87f7;
+                    border-color: @m-blue0;
                 }
             }
             &::after {
-                border-color: #3a87f7;
+                border-color: @m-blue0;
             }
         }
         span + span {
@@ -335,13 +322,13 @@ export default defineComponent({
     }
     .ant-checkbox-wrapper-disabled {
         .ant-checkbox-disabled {
-            outline-color: #2b3f52;
+            outline-color: @m-grey14;
             .ant-checkbox-input {
                 color: @m-white0;
                 font-size: 14px;
             }
             .ant-checkbox-inner {
-                border-color: #2b3f52 !important;
+                border-color: @m-grey14 !important;
             }
         }
     }

src/views/information/account_info/compoments/managers-permission-detail/index.vue

@@ -1,78 +1,69 @@
 <template>
-  <!-- 角色详情 -->
-  <a-modal class="commonModal add-roles"
-           title="角色详情"
-           v-model:visible="visible"
-           @cancel="cancel"
-           centered
-           :maskClosable="false"
-           width="100%">
-    <template #footer>
-      <a-button key="cancel"
-                type="primary"
-                :loading="loading"
-                @click="cancel">完成
-      </a-button>
-    </template>
-    <a-form class="inlineForm"
-            ref="formRef"
-            :model="formState"
-            :rules="rules">
-      <a-row :gutter="24">
-        <a-col :span="24">
-          <a-form-item label="角色名称">
-            <a-input class="dialogInput"
-                     style="width: 200px"
-                     v-model:value="name"
-                     placeholder="请输入模板名称" />
-          </a-form-item>
-        </a-col>
-        <a-col :span="24">
-          <a-form-item label="权限功能"
-                       name="">
-          </a-form-item>
-        </a-col>
-        <a-col :span="24">
-          <div class="powerTable">
-            <div class="powerRow"
-                 v-for="(item, i) in tableList"
-                 :key="i + '0'">
-              <div class="powerLeft">
-                <a-checkbox v-model:checked="item.Menu.ishadrole"
-                            disabled>
-                  {{item.Menu.resourcename}}
-                </a-checkbox>
-              </div>
-              <div class="powerRight">
-                <div class="line"
-                     v-for="(sub, j) in item.SubMenu"
-                     :key="j + '1'">
-                  <div class="left">
-                    <a-checkbox v-model:checked="sub.Menu.ishadrole"
-                                @change="secondChange(item, sub)"
-                                :value="sub.Menu.resourcecode"
-                                disabled>
-                      {{sub.Menu.resourcename}}
-                    </a-checkbox>
-                  </div>
-                  <div class="right">
-                    <a-checkbox v-for="(subNext, l) in sub.SubMenu"
-                                :key="l + '3'"
-                                v-model:checked="subNext.Menu.ishadrole"
-                                @change="thirdChange(item, sub, subNext)"
-                                :value="subNext.Menu.resourcecode"
-                                disabled>
-                      {{subNext.Menu.resourcename}}
-                    </a-checkbox>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </a-col>
-      </a-row>
-    </a-form>
-  </a-modal>
+    <!-- 角色详情 -->
+    <a-modal
+        class="commonModal add-roles"
+        title="角色详情"
+        v-model:visible="visible"
+        @cancel="cancel"
+        centered
+        :maskClosable="false"
+        width="100%"
+    >
+        <template #footer>
+            <a-button key="cancel" type="primary" :loading="loading" @click="cancel">完成</a-button>
+        </template>
+        <a-form class="inlineForm" ref="formRef" :model="formState" :rules="rules">
+            <a-row :gutter="24">
+                <a-col :span="24">
+                    <a-form-item label="角色名称">
+                        <a-input
+                            class="dialogInput"
+                            style="width: 200px"
+                            v-model:value="name"
+                            placeholder="请输入模板名称"
+                        />
+                    </a-form-item>
+                </a-col>
+                <a-col :span="24">
+                    <a-form-item label="权限功能" name></a-form-item>
+                </a-col>
+                <a-col :span="24">
+                    <div class="powerTable">
+                        <div class="powerRow" v-for="(item, i) in tableList" :key="i + '0'">
+                            <div class="powerLeft">
+                                <a-checkbox
+                                    v-model:checked="item.Menu.ishadrole"
+                                    disabled
+                                >{{item.Menu.resourcename}}</a-checkbox>
+                            </div>
+                            <div class="powerRight">
+                                <div class="line" v-for="(sub, j) in item.SubMenu" :key="j + '1'">
+                                    <div class="left">
+                                        <a-checkbox
+                                            v-model:checked="sub.Menu.ishadrole"
+                                            @change="secondChange(item, sub)"
+                                            :value="sub.Menu.resourcecode"
+                                            disabled
+                                        >{{sub.Menu.resourcename}}</a-checkbox>
+                                    </div>
+                                    <div class="right">
+                                        <a-checkbox
+                                            v-for="(subNext, l) in sub.SubMenu"
+                                            :key="l + '3'"
+                                            v-model:checked="subNext.Menu.ishadrole"
+                                            @change="thirdChange(item, sub, subNext)"
+                                            :value="subNext.Menu.resourcecode"
+                                            disabled
+                                        >{{subNext.Menu.resourcename}}</a-checkbox>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </a-col>
+            </a-row>
+        </a-form>
+    </a-modal>
 </template>
 
 <script lang="ts">
@@ -307,19 +298,19 @@ export default defineComponent({
         .ant-checkbox {
             margin-right: 2px;
             .ant-checkbox-inner {
-                background: #15202b;
-                border: 1px solid #2b3f52;
+                background: @m-grey21;
+                border: 1px solid @m-black21;
                 border-radius: 3px;
             }
         }
         .ant-checkbox.ant-checkbox-checked {
             .ant-checkbox-inner {
                 &::after {
-                    border-color: #3a87f7;
+                    border-color: @m-blue0;
                 }
             }
             &::after {
-                border-color: #3a87f7;
+                border-color: @m-blue0;
             }
         }
         span + span {
@@ -330,13 +321,13 @@ export default defineComponent({
     }
     .ant-checkbox-wrapper-disabled {
         .ant-checkbox-disabled {
-            outline-color: #2b3f52;
+            outline-color: @m-grey14;
             .ant-checkbox-input {
                 color: @m-white0;
                 font-size: 14px;
             }
             .ant-checkbox-inner {
-                border-color: #2b3f52 !important;
+                border-color: @m-grey14 !important;
             }
         }
     }

src/views/information/account_info/compoments/managers-permission-modify/index.vue

@@ -1,81 +1,68 @@
 <template>
-  <!-- 修改角色 -->
-  <a-modal class="commonModal add-roles"
-           title="修改角色"
-           v-model:visible="visible"
-           @cancel="cancel"
-           centered
-           :loading="loading"
-           :maskClosable="false"
-           width="100%">
-    <template #footer>
-      <a-button key="cancel"
-                type="primary"
-                :loading="loading"
-                @click="cancel">取消
-      </a-button>
-      <a-button key="submit"
-                type="primary"
-                :loading="loading"
-                @click="submit">修改
-      </a-button>
-    </template>
-    <a-form class="inlineForm"
-            ref="formRef"
-            :model="formState"
-            :rules="rules">
-      <a-row :gutter="24">
-        <a-col :span="24">
-          <a-form-item label="角色名称">
-            <a-input class="dialogInput"
-                     style="width: 200px"
-                     v-model:value="name"
-                     placeholder="请输入模板名称" />
-          </a-form-item>
-        </a-col>
-        <a-col :span="24">
-          <a-form-item label="权限功能"
-                       name="">
-          </a-form-item>
-        </a-col>
-        <a-col :span="24">
-          <div class="powerTable">
-            <div class="powerRow"
-                 v-for="(item, i) in tableList"
-                 :key="i + '0'">
-              <div class="powerLeft">
-                <a-checkbox v-model:checked="item.Menu.ishadrole">
-                  {{item.Menu.resourcename}}
-                </a-checkbox>
-              </div>
-              <div class="powerRight">
-                <div class="line"
-                     v-for="(sub, j) in item.SubMenu"
-                     :key="j + '1'">
-                  <div class="left">
-                    <a-checkbox v-model:checked="sub.Menu.ishadrole"
-                                @change="secondChange(item, sub)"
-                                :value="sub.Menu.resourcecode">
-                      {{sub.Menu.resourcename}}
-                    </a-checkbox>
-                  </div>
-                  <div class="right">
-                    <a-checkbox v-for="(subNext, l) in sub.SubMenu"
-                                :key="l + '3'"
-                                v-model:checked="subNext.Menu.ishadrole"
-                                @change="thirdChange(item, sub, subNext)"
-                                :value="subNext.Menu.resourcecode">
-                      {{subNext.Menu.resourcename}}
-                    </a-checkbox>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </a-col>
-      </a-row>
-    </a-form>
-  </a-modal>
+    <!-- 修改角色 -->
+    <a-modal
+        class="commonModal add-roles"
+        title="修改角色"
+        v-model:visible="visible"
+        @cancel="cancel"
+        centered
+        :loading="loading"
+        :maskClosable="false"
+        width="100%"
+    >
+        <template #footer>
+            <a-button key="cancel" type="primary" :loading="loading" @click="cancel">取消</a-button>
+            <a-button key="submit" type="primary" :loading="loading" @click="submit">修改</a-button>
+        </template>
+        <a-form class="inlineForm" ref="formRef" :model="formState" :rules="rules">
+            <a-row :gutter="24">
+                <a-col :span="24">
+                    <a-form-item label="角色名称">
+                        <a-input
+                            class="dialogInput"
+                            style="width: 200px"
+                            v-model:value="name"
+                            placeholder="请输入模板名称"
+                        />
+                    </a-form-item>
+                </a-col>
+                <a-col :span="24">
+                    <a-form-item label="权限功能" name></a-form-item>
+                </a-col>
+                <a-col :span="24">
+                    <div class="powerTable">
+                        <div class="powerRow" v-for="(item, i) in tableList" :key="i + '0'">
+                            <div class="powerLeft">
+                                <a-checkbox
+                                    v-model:checked="item.Menu.ishadrole"
+                                >{{item.Menu.resourcename}}</a-checkbox>
+                            </div>
+                            <div class="powerRight">
+                                <div class="line" v-for="(sub, j) in item.SubMenu" :key="j + '1'">
+                                    <div class="left">
+                                        <a-checkbox
+                                            v-model:checked="sub.Menu.ishadrole"
+                                            @change="secondChange(item, sub)"
+                                            :value="sub.Menu.resourcecode"
+                                        >{{sub.Menu.resourcename}}</a-checkbox>
+                                    </div>
+                                    <div class="right">
+                                        <a-checkbox
+                                            v-for="(subNext, l) in sub.SubMenu"
+                                            :key="l + '3'"
+                                            v-model:checked="subNext.Menu.ishadrole"
+                                            @change="thirdChange(item, sub, subNext)"
+                                            :value="subNext.Menu.resourcecode"
+                                        >{{subNext.Menu.resourcename}}</a-checkbox>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </a-col>
+            </a-row>
+        </a-form>
+    </a-modal>
 </template>
 
 <script lang="ts">
@@ -310,19 +297,19 @@ export default defineComponent({
         .ant-checkbox {
             margin-right: 2px;
             .ant-checkbox-inner {
-                background: #15202b;
-                border: 1px solid #2b3f52;
+                background: @m-grey21;
+                border: 1px solid @m-grey14;
                 border-radius: 3px;
             }
         }
         .ant-checkbox.ant-checkbox-checked {
             .ant-checkbox-inner {
                 &::after {
-                    border-color: #3a87f7;
+                    border-color: @m-blue0;
                 }
             }
             &::after {
-                border-color: #3a87f7;
+                border-color: @m-blue0;
             }
         }
         span + span {
@@ -333,13 +320,13 @@ export default defineComponent({
     }
     .ant-checkbox-wrapper-disabled {
         .ant-checkbox-disabled {
-            outline-color: #2b3f52;
+            outline-color: @m-grey14;
             .ant-checkbox-input {
                 color: @m-white0;
                 font-size: 14px;
             }
             .ant-checkbox-inner {
-                border-color: #2b3f52 !important;
+                border-color: @m-grey14 !important;
             }
         }
     }

src/views/information/goods/components/rightHedging/index.vue

@@ -1,144 +1,134 @@
 <template>
-  <div class="rightSpot">
-    <div class="title">
-      <div class="tltLeft">
-        <span class="blue">
-          <svg class="icon svg-icon"
-               aria-hidden="true">
-            <use xlink:href="#icon-shuzhuangtu"></use>
-          </svg>
-          {{selctedMG.mg.middlegoodsname}}（{{getGoodsUnitEnumItemName(selctedMG.mg.goodsunitid)}}）
-        </span>
-        <span class="green ml10">{{selctedMG.mg.isvalid ? '正常' : '停用'}}</span>
-        <span class="green ml10">套保比例{{(selctedMG.mg.needhedgeratio * 100).toFixed(2)}}%</span>
-        <span class="green ml10">套利比例100%</span>
-      </div>
-      <div class="tltBtns">
-        <template v-if="isNormal">
-          <BtnList :btnList="forDataBtn" />
-        </template>
-        <template>
-          <a-button class="blueBtn">恢复</a-button>
-        </template>
-      </div>
-    </div>
-    <div class="spotCont">
-      <a-collapse class="spotCollapse"
-                  :bordered="false">
-        <template #expandIcon="props">
-          <svg class="icon svg-icon"
-               aria-hidden="true"
-               v-if="props.isActive == 0">
-            <use xlink:href="#icon-shouqi1"></use>
-          </svg>
-          <svg class="icon svg-icon"
-               aria-hidden="true"
-               v-else>
-            <use xlink:href="#icon-shouqi2"></use>
-          </svg>
-        </template>
-        <a-collapse-panel key="1">
-          <template #header>
-            <a-row class="headRow">
-              <a-col :span="8">期货品种（{{selctedMG.gplist.length}}）</a-col>
-              <a-col :span="8">单位</a-col>
-              <a-col :span="8">品种系数</a-col>
-            </a-row>
-          </template>
-
-          <template v-for="(item, i) in selctedMG.gplist"
-                    :key="i + '1111'">
-            <a-row class="contRow">
-              <a-col :span="8">{{item.goodsgroupname}}</a-col>
-              <a-col :span="8">{{item.enumdicname}}</a-col>
-              <a-col :span="8">{{item.convertratio}}</a-col>
-            </a-row>
-            <a-collapse>
-              <template #expandIcon="props">
-                <svg class="icon svg-icon"
-                     aria-hidden="true"
-                     v-if="props.isActive == 0">
-                  <use xlink:href="#icon-shouqi1"></use>
-                </svg>
-                <svg class="icon svg-icon"
-                     aria-hidden="true"
-                     v-else>
-                  <use xlink:href="#icon-shouqi2"></use>
-                </svg>
-              </template>
-              <a-collapse-panel>
-                <template #header>
-                  <a-row class="headRow">
-                    <a-col :span="8">期货合约（{{item.glist.length}}）</a-col>
-                    <a-col :span="8">单位</a-col>
-                    <a-col :span="8">合约系数</a-col>
-                  </a-row>
+    <div class="rightSpot">
+        <div class="title">
+            <div class="tltLeft">
+                <span class="blue">
+                    <svg class="icon svg-icon" aria-hidden="true">
+                        <use xlink:href="#icon-shuzhuangtu" />
+                    </svg>
+                    {{selctedMG.mg.middlegoodsname}}（{{getGoodsUnitEnumItemName(selctedMG.mg.goodsunitid)}}）
+                </span>
+                <span class="green ml10">{{selctedMG.mg.isvalid ? '正常' : '停用'}}</span>
+                <span class="green ml10">套保比例{{(selctedMG.mg.needhedgeratio * 100).toFixed(2)}}%</span>
+                <span class="green ml10">套利比例100%</span>
+            </div>
+            <div class="tltBtns">
+                <template v-if="isNormal">
+                    <BtnList :btnList="forDataBtn" />
                 </template>
-                <a-row class="contRow"
-                       v-for="sub in item.glist"
-                       :key="sub.goodsid">
-                  <a-col :span="8">{{sub.goodsname}}</a-col>
-                  <a-col :span="8">{{sub.enumdicname}}</a-col>
-                  <a-col :span="8">{{sub.agreeunit}}</a-col>
-                </a-row>
-              </a-collapse-panel>
-            </a-collapse>
-          </template>
-        </a-collapse-panel>
-        <a-collapse-panel key="2">
-          <template #header>
-            <a-row class="headRow">
-              <a-col :span="8">现货品种（{{selctedMG.dglist.length}}）</a-col>
-              <a-col :span="8">单位</a-col>
-              <a-col :span="8">品种系数</a-col>
-            </a-row>
-          </template>
-          <template v-for="(item, i) in selctedMG.dglist"
-                    :key="i + '33'">
-            <a-row class="contRow">
-              <a-col :span="8">{{item.data.deliverygoodsname}}</a-col>
-              <a-col :span="8">{{item.data.enumdicname}}</a-col>
-              <a-col :span="8">{{item.data.agreeunit}}</a-col>
-            </a-row>
-            <a-collapse>
-              <template #expandIcon="props">
-                <svg class="icon svg-icon"
-                     aria-hidden="true"
-                     v-if="props.isActive == 0">
-                  <use xlink:href="#icon-shouqi1"></use>
-                </svg>
-                <svg class="icon svg-icon"
-                     aria-hidden="true"
-                     v-else>
-                  <use xlink:href="#icon-shouqi2"></use>
-                </svg>
-              </template>
-              <a-collapse-panel>
-                <template #header>
-                  <a-row class="headRow">
-                    <a-col :span="8">商品（{{item.gmlist.length}}）</a-col>
-                    <a-col :span="8">单位</a-col>
-                    <a-col :span="8">标仓系数</a-col>
-                  </a-row>
+                <template>
+                    <a-button class="blueBtn">恢复</a-button>
                 </template>
-                <a-row class="contRow"
-                       v-for="(sub) in item.gmlist"
-                       :key="sub.goodsid">
-                  <a-col :span="8">{{sub.wrstandardname}}</a-col>
-                  <a-col :span="8">{{sub.enumdicname}}</a-col>
-                  <a-col :span="8">{{sub.convertfactor}}</a-col>
-                </a-row>
-              </a-collapse-panel>
+            </div>
+        </div>
+        <div class="spotCont">
+            <a-collapse class="spotCollapse" :bordered="false">
+                <template #expandIcon="props">
+                    <svg class="icon svg-icon" aria-hidden="true" v-if="props.isActive == 0">
+                        <use xlink:href="#icon-shouqi1" />
+                    </svg>
+                    <svg class="icon svg-icon" aria-hidden="true" v-else>
+                        <use xlink:href="#icon-shouqi2" />
+                    </svg>
+                </template>
+                <a-collapse-panel key="1">
+                    <template #header>
+                        <a-row class="headRow">
+                            <a-col :span="8">期货品种（{{selctedMG.gplist.length}}）</a-col>
+                            <a-col :span="8">单位</a-col>
+                            <a-col :span="8">品种系数</a-col>
+                        </a-row>
+                    </template>
+
+                    <template v-for="(item, i) in selctedMG.gplist" :key="i + '1111'">
+                        <a-row class="contRow">
+                            <a-col :span="8">{{item.goodsgroupname}}</a-col>
+                            <a-col :span="8">{{item.enumdicname}}</a-col>
+                            <a-col :span="8">{{item.convertratio}}</a-col>
+                        </a-row>
+                        <a-collapse>
+                            <template #expandIcon="props">
+                                <svg
+                                    class="icon svg-icon"
+                                    aria-hidden="true"
+                                    v-if="props.isActive == 0"
+                                >
+                                    <use xlink:href="#icon-shouqi1" />
+                                </svg>
+                                <svg class="icon svg-icon" aria-hidden="true" v-else>
+                                    <use xlink:href="#icon-shouqi2" />
+                                </svg>
+                            </template>
+                            <a-collapse-panel>
+                                <template #header>
+                                    <a-row class="headRow">
+                                        <a-col :span="8">期货合约（{{item.glist.length}}）</a-col>
+                                        <a-col :span="8">单位</a-col>
+                                        <a-col :span="8">合约系数</a-col>
+                                    </a-row>
+                                </template>
+                                <a-row class="contRow" v-for="sub in item.glist" :key="sub.goodsid">
+                                    <a-col :span="8">{{sub.goodsname}}</a-col>
+                                    <a-col :span="8">{{sub.enumdicname}}</a-col>
+                                    <a-col :span="8">{{sub.agreeunit}}</a-col>
+                                </a-row>
+                            </a-collapse-panel>
+                        </a-collapse>
+                    </template>
+                </a-collapse-panel>
+                <a-collapse-panel key="2">
+                    <template #header>
+                        <a-row class="headRow">
+                            <a-col :span="8">现货品种（{{selctedMG.dglist.length}}）</a-col>
+                            <a-col :span="8">单位</a-col>
+                            <a-col :span="8">品种系数</a-col>
+                        </a-row>
+                    </template>
+                    <template v-for="(item, i) in selctedMG.dglist" :key="i + '33'">
+                        <a-row class="contRow">
+                            <a-col :span="8">{{item.data.deliverygoodsname}}</a-col>
+                            <a-col :span="8">{{item.data.enumdicname}}</a-col>
+                            <a-col :span="8">{{item.data.agreeunit}}</a-col>
+                        </a-row>
+                        <a-collapse>
+                            <template #expandIcon="props">
+                                <svg
+                                    class="icon svg-icon"
+                                    aria-hidden="true"
+                                    v-if="props.isActive == 0"
+                                >
+                                    <use xlink:href="#icon-shouqi1" />
+                                </svg>
+                                <svg class="icon svg-icon" aria-hidden="true" v-else>
+                                    <use xlink:href="#icon-shouqi2" />
+                                </svg>
+                            </template>
+                            <a-collapse-panel>
+                                <template #header>
+                                    <a-row class="headRow">
+                                        <a-col :span="8">商品（{{item.gmlist.length}}）</a-col>
+                                        <a-col :span="8">单位</a-col>
+                                        <a-col :span="8">标仓系数</a-col>
+                                    </a-row>
+                                </template>
+                                <a-row
+                                    class="contRow"
+                                    v-for="(sub) in item.gmlist"
+                                    :key="sub.goodsid"
+                                >
+                                    <a-col :span="8">{{sub.wrstandardname}}</a-col>
+                                    <a-col :span="8">{{sub.enumdicname}}</a-col>
+                                    <a-col :span="8">{{sub.convertfactor}}</a-col>
+                                </a-row>
+                            </a-collapse-panel>
+                        </a-collapse>
+                    </template>
+                </a-collapse-panel>
             </a-collapse>
-          </template>
-        </a-collapse-panel>
-      </a-collapse>
+        </div>
+        <HedgingDetail :selctedMG="selctedMG" />
+        <HedgingModify @refresh="refresh" :selctedMG="selctedMG" />
     </div>
-    <HedgingDetail :selctedMG="selctedMG" />
-    <HedgingModify @refresh="refresh"
-                   :selctedMG="selctedMG" />
-
-  </div>
 </template>
 
 <script lang="ts">
@@ -276,56 +266,4 @@ export default defineComponent({
         }
     }
 }
-// .ant-collapse.spotCollapse.ant-collapse-borderless {
-//     margin-top: 10px;
-//     background-color: transparent;
-//     .ant-collapse-item {
-//         border-bottom: 0;
-//         .ant-collapse-header {
-//             color: @m-grey17;
-//             font-size: 14px;
-//             border-bottom: 1px solid @m-grey18;
-//             padding: 10px 8px 10px 44px;
-//             height: 43px;
-//             .ant-collapse-arrow {
-//                 fill: @m-grey17;
-//                 width: 16px;
-//                 height: 16px;
-//                 font-size: 16px;
-//                 left: 0;
-//             }
-//         }
-//         .ant-collapse-content {
-//             .ant-collapse-content-box {
-//                 padding: 0 0 0 30px;
-//                 background-color: transparent;
-//                 .ant-row.contRow {
-//                     width: 100%;
-//                     height: 40px;
-//                     line-height: 40px;
-//                     font-size: 16px;
-//                     color: @m-white1;
-//                     margin-bottom: 10px;
-//                     background: #0f161c;
-//                     border: 1px solid #172b56;
-//                     border-radius: 3px;
-//                     padding-left: 14px;
-//                     padding-right: 12px;
-//                     .ant-col:last-child {
-//                         text-align: right;
-//                     }
-//                     .ant-col:first-child {
-//                         text-align: left;
-//                     }
-//                 }
-//                 .contRow:first-child {
-//                     margin-top: 9px;
-//                 }
-//                 .contRow:last-child {
-//                     margin-bottom: 20px;
-//                 }
-//             }
-//         }
-//     }
-// }
 </style>;

src/views/information/spot-contract/components/detail/index.vue

@@ -1,66 +1,59 @@
 <template>
-  <!-- 现货合同详情-->
-  <a-modal class="add-custom custom-detail"
-           title="现货合同详情"
-           v-model:visible="visible"
-           centered
-           :maskClosable="false"
-           @cancel="cancel"
-           width="890px">
-    <template #footer>
-      <a-button key="submit"
-                type="primary"
-                :loading="loading"
-                @click="cancel">关闭
-      </a-button>
-    </template>
-    <a-tabs v-model:activeKey="activeKey"
-            @change="tabClick">
-      <a-tab-pane v-for="item in tabList"
-                  :key="item.key"
-                  :tab="item.name">
-      </a-tab-pane>
-    </a-tabs>
-    <InfoDetail :selectedRow="selectedRow"
-                v-if="activeKey == 1" />
-    <div class="tableDatas"
-         v-else>
-      <a-table class="dialogTable"
-               :columns="columns"
-               :data-source="tableList"
-               :pagination="false">
-        <template #status="{ text }">
-          <span class="yellow">{{ text }}</span>
-          <!-- 审核通过'green' 审核拒绝 'orange' 待审核'yellow'   -->
+    <!-- 现货合同详情-->
+    <a-modal
+        class="add-custom custom-detail"
+        title="现货合同详情"
+        v-model:visible="visible"
+        centered
+        :maskClosable="false"
+        @cancel="cancel"
+        width="890px"
+    >
+        <template #footer>
+            <a-button key="submit" type="primary" :loading="loading" @click="cancel">关闭</a-button>
         </template>
+        <a-tabs v-model:activeKey="activeKey" @change="tabClick">
+            <a-tab-pane v-for="item in tabList" :key="item.key" :tab="item.name"></a-tab-pane>
+        </a-tabs>
+        <InfoDetail :selectedRow="selectedRow" v-if="activeKey == 1" />
+        <div class="tableDatas" v-else>
+            <a-table
+                class="dialogTable"
+                :columns="columns"
+                :data-source="tableList"
+                :pagination="false"
+            >
+                <template #status="{ text }">
+                    <span class="yellow">{{ text }}</span>
+                    <!-- 审核通过'green' 审核拒绝 'orange' 待审核'yellow'   -->
+                </template>
 
-        <template #applystatus="{ text }">
-          <a>{{ getApplyStatusName(text) }}</a>
-        </template>
-
-        <!-- 发票金额-->
-        <template #invoicetype="{ text }">
-          <a>{{ invoiceStatusName(text) }}</a>
-        </template>
+                <template #applystatus="{ text }">
+                    <a>{{ getApplyStatusName(text) }}</a>
+                </template>
 
-        <!-- 发票类型-->
-        <template #contracttype="{ text }">
-          <a>{{ getPlanContractType(text) }}</a>
-        </template>
+                <!-- 发票金额-->
+                <template #invoicetype="{ text }">
+                    <a>{{ invoiceStatusName(text) }}</a>
+                </template>
 
-        <!-- 出入库类型 -->
-        <template #inouttype="{ text }">
-          <a>{{ InOutTypeName(text) }}</a>
-        </template>
+                <!-- 发票类型-->
+                <template #contracttype="{ text }">
+                    <a>{{ getPlanContractType(text) }}</a>
+                </template>
 
-        <!-- 款项类型 -->
-        <template #kxtype="{ text }">
-          <a>{{ kxtypeName(text) }}</a>
-        </template>
+                <!-- 出入库类型 -->
+                <template #inouttype="{ text }">
+                    <a>{{ InOutTypeName(text) }}</a>
+                </template>
 
-      </a-table>
-    </div>
-  </a-modal>
+                <!-- 款项类型 -->
+                <template #kxtype="{ text }">
+                    <a>{{ kxtypeName(text) }}</a>
+                </template>
+            </a-table>
+        </div>
+    </a-modal>
 </template>
 
 <script lang="ts">
@@ -217,7 +210,7 @@ export default defineComponent({
                     border-bottom: 0;
                 }
                 .anticon {
-                    color: #88a0ae;
+                    color: @m-grey2;
                 }
                 .ant-tabs-nav-container {
                     .ant-tabs-nav-wrap {
@@ -227,18 +220,18 @@ export default defineComponent({
                                 margin-right: 43px;
                                 text-align: center;
                                 font-size: 16px;
-                                color: #88a0ae;
+                                color: @m-grey2;
                                 padding: 0;
                                 line-height: 45px;
                             }
 
                             .ant-tabs-tab-active.ant-tabs-tab {
-                                color: #3a87f7;
+                                color: @m-blue0;
                             }
 
                             .ant-tabs-ink-bar {
                                 width: 70px !important;
-                                background: #3a87f7;
+                                background: @m-blue0;
                                 .rounded-corners(1px);
                             }
                         }

src/views/market/forward/components/forwarTrade/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="forward-trade"> </div>
+    <div class="forward-trade"></div>
 </template>
 
 <script lang="ts">
@@ -60,8 +60,8 @@ export default defineComponent({
     right: -2px;
     width: 441px;
     height: 310px;
-    background: #1d2f3f;
-    border: 2px solid #3a87f7;
+    background: @m-blue14;
+    border: 2px solid @m-blue0;
     border-radius: 5px;
     z-index: 9;
 }

src/views/market/warehouseTrade/components/trade/index.vue

@@ -1,174 +1,176 @@
 <template>
     <!-- 期货交易 -->
-  <div class="trade">
-    <div class="left">
-        <a-row>
-            <a-col class="label">
-                合约：
-            </a-col>
-            <a-col>
-                <a-select class="inlineFormSelect"  default-value="1" style="width: 207px">
-                    <a-select-option value="1">
-                        一口价
-                    </a-select-option>
-                    <a-select-option value="2">
-                        一口价2
-                    </a-select-option>
-                </a-select>
-            </a-col>
-        </a-row>
-        <a-row>
-            <a-col  class="label">
-                代码：
-            </a-col>
-            <a-col>
-                CU2012
-            </a-col>
-        </a-row>
-        <a-row>
-            <a-col  class="label">
-                价格：
-            </a-col>
-            <a-col>
-                <a-input default-value="3247.2" class="commonInput" style="width: 140px;">
-                    <div slot="addonBefore"><a-icon type="minus" /></div>
-                    <div slot="addonAfter"><a-icon type="plus" /></div>
-                </a-input>
-                <a-select class="shortSelect"  default-value="1" style="width: 60px; margin-left: 7px;">
-                    <a-select-option value="1">
-                        最新
-                    </a-select-option>
-                </a-select>
-            </a-col>
-        </a-row>
-        <a-row>
-            <a-col class="label">
-                数量：
-            </a-col>
-            <a-col>
-                <a-input default-value="3247.2" class="commonInput" style="width: 140px;">
-                    <div slot="addonBefore"><a-icon type="minus" /></div>
-                    <div slot="addonAfter"><a-icon type="plus" /></div>
-                </a-input>
-                <a-button class="resetBtn">复位</a-button>
-            </a-col>
-        </a-row>
-        <a-row class="btnBlock">
-            <a-col :span="24">
-                <a-button class="numAndOperBtn red">
-                    <p>54353</p>
-                    <p>买入</p>
-                </a-button>
-                <a-button class="numAndOperBtn green">
-                    <p>54353</p>
-                    <p>卖出</p>
-                </a-button>
-                <a-button class="numAndOperBtn yellow">
-                    <p>先开先平</p>
-                    <p>平仓</p>
-                </a-button>
-            </a-col>
-        </a-row>
-        <a-row class="btns">
-            <a-col :span="24">
-                <div class="avaliable">
-                    <div><span>可买&lt;=</span><span class="white">0</span></div>
-                    <div><span>可买&lt;=</span><span class="white">0</span></div>
+    <div class="trade">
+        <div class="left">
+            <a-row>
+                <a-col class="label">合约：</a-col>
+                <a-col>
+                    <a-select class="inlineFormSelect" default-value="1" style="width: 207px">
+                        <a-select-option value="1">一口价</a-select-option>
+                        <a-select-option value="2">一口价2</a-select-option>
+                    </a-select>
+                </a-col>
+            </a-row>
+            <a-row>
+                <a-col class="label">代码：</a-col>
+                <a-col>CU2012</a-col>
+            </a-row>
+            <a-row>
+                <a-col class="label">价格：</a-col>
+                <a-col>
+                    <a-input default-value="3247.2" class="commonInput" style="width: 140px;">
+                        <div slot="addonBefore">
+                            <a-icon type="minus" />
+                        </div>
+                        <div slot="addonAfter">
+                            <a-icon type="plus" />
+                        </div>
+                    </a-input>
+                    <a-select
+                        class="shortSelect"
+                        default-value="1"
+                        style="width: 60px; margin-left: 7px;"
+                    >
+                        <a-select-option value="1">最新</a-select-option>
+                    </a-select>
+                </a-col>
+            </a-row>
+            <a-row>
+                <a-col class="label">数量：</a-col>
+                <a-col>
+                    <a-input default-value="3247.2" class="commonInput" style="width: 140px;">
+                        <div slot="addonBefore">
+                            <a-icon type="minus" />
+                        </div>
+                        <div slot="addonAfter">
+                            <a-icon type="plus" />
+                        </div>
+                    </a-input>
+                    <a-button class="resetBtn">复位</a-button>
+                </a-col>
+            </a-row>
+            <a-row class="btnBlock">
+                <a-col :span="24">
+                    <a-button class="numAndOperBtn red">
+                        <p>54353</p>
+                        <p>买入</p>
+                    </a-button>
+                    <a-button class="numAndOperBtn green">
+                        <p>54353</p>
+                        <p>卖出</p>
+                    </a-button>
+                    <a-button class="numAndOperBtn yellow">
+                        <p>先开先平</p>
+                        <p>平仓</p>
+                    </a-button>
+                </a-col>
+            </a-row>
+            <a-row class="btns">
+                <a-col :span="24">
+                    <div class="avaliable">
+                        <div>
+                            <span>可买&lt;=</span>
+                            <span class="white">0</span>
+                        </div>
+                        <div>
+                            <span>可买&lt;=</span>
+                            <span class="white">0</span>
+                        </div>
+                    </div>
+                </a-col>
+            </a-row>
+        </div>
+        <div class="right">
+            <div class="rightBar">
+                <div class="topFive">
+                    <a-row class="line">
+                        <a-col class="firstCol">
+                            <div class="no">5</div>
+                            <div class="num">355.000</div>
+                        </a-col>
+                        <a-col class="lastCol">32.3K</a-col>
+                    </a-row>
+                    <a-row class="line">
+                        <a-col class="firstCol">
+                            <div class="no">4</div>
+                            <div class="num">355.000</div>
+                        </a-col>
+                        <a-col class="lastCol">24.5K</a-col>
+                    </a-row>
+                    <a-row class="line">
+                        <a-col class="firstCol">
+                            <div class="no">3</div>
+                            <div class="num">355.000</div>
+                        </a-col>
+                        <a-col class="lastCol">40.2K</a-col>
+                    </a-row>
+                    <a-row class="line">
+                        <a-col class="firstCol">
+                            <div class="no">2</div>
+                            <div class="num">355.000</div>
+                        </a-col>
+                        <a-col class="lastCol">23.3K</a-col>
+                    </a-row>
+                    <a-row class="line">
+                        <a-col class="firstCol">
+                            <div class="no">1</div>
+                            <div class="num">355.000</div>
+                        </a-col>
+                        <a-col class="lastCol">54.0K</a-col>
+                    </a-row>
                 </div>
-            </a-col>
-        </a-row>
-    </div>
-    <div class="right">
-        <div class="rightBar">
-            <div class="topFive">
-                <a-row class="line">
-                    <a-col class="firstCol">
-                        <div class="no">5</div>
-                        <div class="num">355.000</div>
-                    </a-col>
-                    <a-col class="lastCol">32.3K</a-col>
-                </a-row>
-                <a-row class="line">
-                    <a-col class="firstCol">
-                        <div class="no">4</div>
-                        <div class="num">355.000</div>
-                    </a-col>
-                    <a-col class="lastCol">24.5K</a-col>
-                </a-row>
-                <a-row class="line">
-                    <a-col class="firstCol">
-                        <div class="no">3</div>
-                        <div class="num">355.000</div>
-                    </a-col>
-                    <a-col class="lastCol">40.2K</a-col>
-                </a-row>
-                <a-row class="line">
-                    <a-col class="firstCol">
-                        <div class="no">2</div>
-                        <div class="num">355.000</div>
-                    </a-col>
-                    <a-col class="lastCol">23.3K</a-col>
-                </a-row>
-                <a-row class="line">
-                    <a-col class="firstCol">
-                        <div class="no">1</div>
-                        <div class="num">355.000</div>
-                    </a-col>
-                    <a-col class="lastCol">54.0K</a-col>
-                </a-row>
-            </div>
-            <div class="bottomFive">
-                <a-row class="line">
-                    <a-col class="firstCol">
-                        <div class="no">1</div>
-                        <div class="num">355.000</div>
-                    </a-col>
-                    <a-col class="lastCol">32.3K</a-col>
-                </a-row>
-                <a-row class="line">
-                    <a-col class="firstCol">
-                        <div class="no">2</div>
-                        <div class="num">355.000</div>
-                    </a-col>
-                    <a-col class="lastCol">24.5K</a-col>
-                </a-row>
-                <a-row class="line">
-                    <a-col class="firstCol">
-                        <div class="no">3</div>
-                        <div class="num">355.000</div>
-                    </a-col>
-                    <a-col class="lastCol">40.2K</a-col>
-                </a-row>
-                <a-row class="line">
-                    <a-col class="firstCol">
-                        <div class="no">4</div>
-                        <div class="num">355.000</div>
-                    </a-col>
-                    <a-col class="lastCol">23.3K</a-col>
-                </a-row>
-                <a-row class="line">
-                    <a-col class="firstCol">
-                        <div class="no">5</div>
-                        <div class="num">355.000</div>
-                    </a-col>
-                    <a-col class="lastCol">54.0K</a-col>
-                </a-row>
-            </div>
-            <div class="newLine">
-                <div class="lineBlock">
-                    <div>最新</div>
-                    <div class="red">546546</div>
+                <div class="bottomFive">
+                    <a-row class="line">
+                        <a-col class="firstCol">
+                            <div class="no">1</div>
+                            <div class="num">355.000</div>
+                        </a-col>
+                        <a-col class="lastCol">32.3K</a-col>
+                    </a-row>
+                    <a-row class="line">
+                        <a-col class="firstCol">
+                            <div class="no">2</div>
+                            <div class="num">355.000</div>
+                        </a-col>
+                        <a-col class="lastCol">24.5K</a-col>
+                    </a-row>
+                    <a-row class="line">
+                        <a-col class="firstCol">
+                            <div class="no">3</div>
+                            <div class="num">355.000</div>
+                        </a-col>
+                        <a-col class="lastCol">40.2K</a-col>
+                    </a-row>
+                    <a-row class="line">
+                        <a-col class="firstCol">
+                            <div class="no">4</div>
+                            <div class="num">355.000</div>
+                        </a-col>
+                        <a-col class="lastCol">23.3K</a-col>
+                    </a-row>
+                    <a-row class="line">
+                        <a-col class="firstCol">
+                            <div class="no">5</div>
+                            <div class="num">355.000</div>
+                        </a-col>
+                        <a-col class="lastCol">54.0K</a-col>
+                    </a-row>
                 </div>
-            </div>
-            <div class="newLine">
-                <div class="lineBlock">
-                    <div>涨幅</div>
-                    <div class="red">0.76%</div>
+                <div class="newLine">
+                    <div class="lineBlock">
+                        <div>最新</div>
+                        <div class="red">546546</div>
+                    </div>
+                </div>
+                <div class="newLine">
+                    <div class="lineBlock">
+                        <div>涨幅</div>
+                        <div class="red">0.76%</div>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
-  </div>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
@@ -178,12 +180,12 @@ export default defineComponent({
     components: {},
     setup() {
         const form = {
-            type: '1'
+            type: '1',
         };
         const price = '';
         return {
             form,
-            price
+            price,
         };
     },
 });
@@ -193,7 +195,7 @@ export default defineComponent({
 .trade {
     width: 100%;
     height: 100%;
-    background: #1D2F3F;
+    background: @m-black22;
     .inlineflex;
     overflow: hidden;
     .left {
@@ -228,8 +230,8 @@ export default defineComponent({
             margin-top: -5px;
             .avaliable {
                 .inlineflex;
-                color: #7A8A94;
-                div+div {
+                color: @m-grey1;
+                div + div {
                     margin-left: 33px;
                 }
             }
@@ -257,40 +259,40 @@ export default defineComponent({
                 line-height: 28px;
             }
         }
-        .numAndOperBtn+.numAndOperBtn {
+        .numAndOperBtn + .numAndOperBtn {
             margin-left: 5px;
         }
         .red {
-            color: #FF2B2F;
-            background: #2C1B1B;
-            border: 1px solid #FF2B2B;
-            p:first-child{
-                border-bottom: 1px dashed #691010
+            color: @m-red3;
+            background: @m-red4;
+            border: 1px solid @m-red1;
+            p:first-child {
+                border-bottom: 1px dashed @m-red5;
             }
             p:last-child {
-                color: #FF2B2F;
+                color: @m-red3;
             }
         }
         .green {
-            background: #173025;
-            border: 1px solid #1EE18C;
+            background: @m-black23;
+            border: 1px solid @m-green4;
             p:first-child {
-                border-bottom: 1px dashed #1EE18C;     
-                color: #1EE18C;
+                border-bottom: 1px dashed @m-green4;
+                color: @m-green4;
             }
-            p:last-child { 
-                color: #1EE18C;
+            p:last-child {
+                color: @m-green4;
             }
         }
-        .yellow { 
-            background: #422B0D;           
-            border: 1px solid #FFAE00;
+        .yellow {
+            background: @m-red6;
+            border: 1px solid @m-yellow2;
             p:first-child {
-                border-bottom: 1px dashed #653F0D;     
-                color: #FFAE00;
+                border-bottom: 1px dashed @m-yellow3;
+                color: @m-yellow2;
             }
-            p:last-child { 
-                color: #FFAE00;
+            p:last-child {
+                color: @m-yellow2;
             }
         }
         .ant-btn.resetBtn {
@@ -299,11 +301,11 @@ export default defineComponent({
             height: 30px;
             line-height: 28px;
             padding: 0;
-            color: #0C95FF;            
+            color: @m-blue10;
             font-size: 14px;
             text-align: center;
-            background: #0E2F4C;
-            border: 1px solid #0C95FF;
+            background: @m-blue22;
+            border: 1px solid @m-blue10;
             border-radius: 3px;
         }
     }
@@ -316,8 +318,8 @@ export default defineComponent({
         flex-direction: column;
         .rightBar {
             height: 292px;
-            background: #15202B;
-            border: 2px solid #15202B;
+            background: @m-grey21;
+            border: 2px solid @m-grey21;
             .rounded-corners(5px);
         }
     }
@@ -334,7 +336,7 @@ export default defineComponent({
             width: 14px;
             height: 14px;
             line-height: 14px;
-            background: #FFAE00;
+            background: @m-yellow2;
             .rounded-corners(2px);
             text-align: center;
             font-size: 12px;
@@ -345,7 +347,7 @@ export default defineComponent({
         .num {
             margin-left: 9px;
             font-size: 12px;
-            color: #F52B2B;
+            color: @m-red7;
             align-self: center;
             align-items: center;
         }
@@ -364,12 +366,11 @@ export default defineComponent({
     width: 100%;
     height: 124px;
     padding: 4px 6px;
-    background: #422B0D;
+    background: @m-red6;
     .rounded-corners(5px, 5px, 0, 0);
-    
 }
 .bottomFive:extend(.topFive) {
-    background: #0E2F4C;
+    background: @m-blue22;
     .rounded-corners(0);
 }
 .newLine {
@@ -387,7 +388,7 @@ export default defineComponent({
             font-size: 12px;
         }
         .red {
-           color: #F12A2D;
+            color: @m-red8;
         }
     }
 }

src/views/search/outaccount_status/index.vue

@@ -1,19 +1,21 @@
 <template>
-  <div class="account-status">
-    <firstMenu :list="menulist"
-               :value="'value'"
-               @selectMenu="selectMenu" />
-    <div class="tip">最新更新时间：{{ updatedTime }}</div>
-    <a-table :columns="columns"
-             :data-source="list"
-             :pagination="false"
-             :locale="{ emptyText: '暂无数据' }"
-             bordered>
-      <template #handlestatus="{ text }">
-        <span :class="[text === 1 ? 'success-satus' : 'error-status']">{{ text === 1 ? '正常' : '断开' }}</span>
-      </template>
-    </a-table>
-  </div>
+    <div class="account-status">
+        <firstMenu :list="menulist" :value="'value'" @selectMenu="selectMenu" />
+        <div class="tip">最新更新时间：{{ updatedTime }}</div>
+        <a-table
+            :columns="columns"
+            :data-source="list"
+            :pagination="false"
+            :locale="{ emptyText: '暂无数据' }"
+            bordered
+        >
+            <template #handlestatus="{ text }">
+                <span
+                    :class="[text === 1 ? 'success-satus' : 'error-status']"
+                >{{ text === 1 ? '正常' : '断开' }}</span>
+            </template>
+        </a-table>
+    </div>
 </template>
 
 <script lang="ts">
@@ -124,14 +126,14 @@ export default defineComponent({
         }
     }
     .success-satus {
-        color: #1ff195;
+        color: @m-green0;
     }
     .error-status {
-        color: #ff2b2b;
+        color: @m-red1;
     }
     .tip {
         padding: 10px 0;
-        color: #364048;
+        color: @m-grey0;
     }
     .ant-table-placeholder {
         height: 100px;

src/views/setting/logout/index.vue

@@ -1,5 +1,12 @@
 <template>
-    <a-modal class="logout" v-model:visible="visible" @cancel="cancel" width="890px" centered :footer="null">
+    <a-modal
+        class="logout"
+        v-model:visible="visible"
+        @cancel="cancel"
+        width="890px"
+        centered
+        :footer="null"
+    >
         <div>logout</div>
         <div>logout</div>
         <div>logout</div>
@@ -12,63 +19,64 @@
 </template>
 
 <script lang="ts">
-    import { defineComponent, ref } from 'vue';
-    import { closeModal } from '@/common/setup/modal/index';
-    import { initData } from '@/common/methods';
+import { defineComponent, ref } from 'vue';
+import { closeModal } from '@/common/setup/modal/index';
+import { initData } from '@/common/methods';
 
-    export default defineComponent({
-        name: 'logout',
+export default defineComponent({
+    name: 'logout',
 
-        setup() {
-            const { visible, cancel } = closeModal('logout');
+    setup() {
+        const { visible, cancel } = closeModal('logout');
 
-            initData(() => {});
-            return {
-                visible,
-                cancel,
-            };
-        },
-    });
+        initData(() => {});
+        return {
+            visible,
+            cancel,
+        };
+    },
+});
 </script>
 
 <style lang="less">
-    .logout {
-        .ant-tabs {
-            width: 100%;
-            .ant-tabs-bar {
-                border-bottom-color: #192125;
-                margin-bottom: 0;
-            }
-            .ant-tabs-tab {
-                width: 140px;
-                text-align: center;
-                margin-right: 0;
-            }
-            .ant-tabs-nav {
-                height: 50px;
-                font-size: 16px;
-                color: #88a0ae;
-                font-family: Adobe Heiti Std;
-                font-weight: normal;
-                .ant-tabs-tab-active {
-                    color: #ffffff;
-                    background: linear-gradient(0deg, #3163ba 0%, #4179db 100%);
-                }
-            }
-            .ant-tabs-ink-bar {
-                display: none !important;
-            }
+.logout {
+    .ant-tabs {
+        width: 100%;
+        .ant-tabs-bar {
+            border-bottom-color: @m-black26;
+            margin-bottom: 0;
+        }
+        .ant-tabs-tab {
+            width: 140px;
+            text-align: center;
+            margin-right: 0;
         }
-        .ant-modal-close-x {
+        .ant-tabs-nav {
             height: 50px;
-            line-height: 50px;
-            svg {
-                color: #7a8a94;
+            font-size: 16px;
+            color: @m-grey2;
+            font-family: Adobe Heiti Std;
+            font-weight: normal;
+            .ant-tabs-tab-active {
+                color: @m-white0;
+                background: linear-gradient(0deg, @m-blue8 0%, @m-blue9 100%);
             }
         }
-        .ant-modal-body {
-            padding: 0;
-            background: #252d34;
+        .ant-tabs-ink-bar {
+            display: none !important;
+        }
+    }
+    .ant-modal-close-x {
+        height: 50px;
+        line-height: 50px;
+        svg {
+            color: @m-grey1;
         }
-    }</style
+    }
+    .ant-modal-body {
+        padding: 0;
+        background: @m-grey9;
+    }
+}
+</style
 >;

src/views/setting/notice/components/noticeContent.vue

@@ -1,31 +1,30 @@
 <template>
-  <div class="notice-content">
-    <aside>
-      <a-list item-layout="horizontal"
-              :data-source="noticeList">
-        <template #renderItem="{ item }">
-          <a-list-item @click="choose(item)">
-            <a-list-item-meta :description="formatTime(item.createtime)">
-              <template #title>
-                <a :style="{ color: item.readed ? '#88A0AE' : '#E5E5E5' }"
-                   href="javascript:;">{{ item.title }}</a>
-              </template>
-              <template #avatar>
-                <a-badge :color="item.readed ? '#88A0AE' : 'orange'" />
-              </template>
-            </a-list-item-meta>
-          </a-list-item>
-        </template>
-      </a-list>
-    </aside>
-    <main>
-      <h4>{{ chooseItemNotice.title }}</h4>
-      <p>{{ formatTime(chooseItemNotice.createtime) }}</p>
-      <div>
-        {{ chooseItemNotice.content }}
-      </div>
-    </main>
-  </div>
+    <div class="notice-content">
+        <aside>
+            <a-list item-layout="horizontal" :data-source="noticeList">
+                <template #renderItem="{ item }">
+                    <a-list-item @click="choose(item)">
+                        <a-list-item-meta :description="formatTime(item.createtime)">
+                            <template #title>
+                                <a
+                                    :style="{ color: item.readed ? '@m-grey2' : '@m-white1' }"
+                                    href="javascript:;"
+                                >{{ item.title }}</a>
+                            </template>
+                            <template #avatar>
+                                <a-badge :color="item.readed ? '@m-grey2' : 'orange'" />
+                            </template>
+                        </a-list-item-meta>
+                    </a-list-item>
+                </template>
+            </a-list>
+        </aside>
+        <main>
+            <h4>{{ chooseItemNotice.title }}</h4>
+            <p>{{ formatTime(chooseItemNotice.createtime) }}</p>
+            <div>{{ chooseItemNotice.content }}</div>
+        </main>
+    </div>
 </template>
 
 <script lang="ts">
@@ -89,7 +88,7 @@ export default defineComponent({
             .ant-list-item-meta-description {
                 text-align: right;
                 font-size: 13px;
-                color: #3b444a;
+                color: @m-grey25;
             }
             .ant-list-item-meta-avatar {
                 margin-right: 0;
@@ -99,7 +98,6 @@ export default defineComponent({
                 border-bottom: none;
                 a {
                     width: 160px;
-                    // color: #88A0AE;
                     font-size: 15px;
                     display: inline-block;
                     .ellipse;
@@ -109,19 +107,19 @@ export default defineComponent({
     }
     main {
         flex: 1;
-        background: #1d2327;
+        background: @m-grey18;
         padding: 20px;
         h4 {
             font-size: 17px;
-            color: #e5e5e5;
+            color: @m-white1;
         }
         p {
             font-size: 13px;
-            color: #3b444a;
+            color: @m-grey25;
         }
         div {
             font-size: 15px;
-            color: #88a0ae;
+            color: @m-grey2;
             text-indent: 2em;
         }
     }

src/views/setting/notice/index.vue

@@ -1,33 +1,39 @@
 <template>
-  <a-modal class="notice"
-           v-model:visible="visible"
-           @cancel="cancel"
-           width="890px"
-           centered
-           :footer="null">
-    <a-tabs v-model:activeKey="activeKey">
-      <a-tab-pane key="1">
-        <template #tab>
-          <span>
-            公告
-            <a-badge :count="getUnReadNoticeByType([1])"
-                     :number-style="{ backgroundColor: '#FF9000' }" />
-          </span>
-        </template>
-        <NoticeContent :noticeList="getNoticeByType([1])" />
-      </a-tab-pane>
-      <a-tab-pane key="2">
-        <template #tab>
-          <span>
-            系统消息
-            <a-badge :count="getUnReadNoticeByType([2])"
-                     :number-style="{ backgroundColor: '#FF9000' }" />
-          </span>
-        </template>
-        <NoticeContent :noticeList="getNoticeByType([2])" />
-      </a-tab-pane>
-    </a-tabs>
-  </a-modal>
+    <a-modal
+        class="notice"
+        v-model:visible="visible"
+        @cancel="cancel"
+        width="890px"
+        centered
+        :footer="null"
+    >
+        <a-tabs v-model:activeKey="activeKey">
+            <a-tab-pane key="1">
+                <template #tab>
+                    <span>
+                        公告
+                        <a-badge
+                            :count="getUnReadNoticeByType([1])"
+                            :number-style="{ backgroundColor: '#FF9000' }"
+                        />
+                    </span>
+                </template>
+                <NoticeContent :noticeList="getNoticeByType([1])" />
+            </a-tab-pane>
+            <a-tab-pane key="2">
+                <template #tab>
+                    <span>
+                        系统消息
+                        <a-badge
+                            :count="getUnReadNoticeByType([2])"
+                            :number-style="{ backgroundColor: '#FF9000' }"
+                        />
+                    </span>
+                </template>
+                <NoticeContent :noticeList="getNoticeByType([2])" />
+            </a-tab-pane>
+        </a-tabs>
+    </a-modal>
 </template>
 
 <script lang="ts">
@@ -68,7 +74,7 @@ export default defineComponent({
     .ant-tabs {
         width: 100%;
         .ant-tabs-bar {
-            border-bottom-color: #192125;
+            border-bottom-color: @m-black26;
             margin-bottom: 0;
         }
         .ant-tabs-tab {
@@ -79,12 +85,12 @@ export default defineComponent({
         .ant-tabs-nav {
             height: 50px;
             font-size: 16px;
-            color: #88a0ae;
+            color: @m-grey2;
             font-family: Adobe Heiti Std;
             font-weight: normal;
             .ant-tabs-tab-active {
-                color: #ffffff;
-                background: linear-gradient(0deg, #3163ba 0%, #4179db 100%);
+                color: @m-white0;
+                background: linear-gradient(0deg, @m-blue8 0%, @m-blue9 100%);
             }
         }
         .ant-tabs-ink-bar {
@@ -95,12 +101,12 @@ export default defineComponent({
         height: 50px;
         line-height: 50px;
         svg {
-            color: #7a8a94;
+            color: @m-grey1;
         }
     }
     .ant-modal-body {
         padding: 0;
-        background: #252d34;
+        background: @m-grey9;
     }
 }
 </style