theme color update

src/assets/styles/mixin.less

@@ -1180,22 +1180,34 @@
 }
 .ant-popover {
     .ant-popover-content {
-        border: 1px solid @m-grey22;
+        border: 1px solid @m-grey23;
+        box-shadow: 0px 10px 10px 0px @m-boxShadow;
         .rounded-corners(5px);
         .ant-popover-arrow {
             border-top-color: @m-grey22;
             border-left-color: @m-grey22;
+            background: @m-grey22;
+            border: 1PX solid @m-grey23;
+            border-bottom: 0;
+            border-right: 0;
         }
         .ant-popover-inner {
             .ant-popover-inner-content {
                 border-image-width: 0;
                 background: @m-grey22;
-                color: @m-white0;
-                padding: 5px 15px;
+                color: @m-grey1;
+                padding: 5px 0;
                 .popItem {
+                    min-width: 160px;
+                    padding: 0 15px;
+                    text-align: center;
                     cursor: pointer;
+                    height: 30px;
+                    line-height: 30px;
+                    font-size: 15px;
                     &:hover {
-                        color: @m-blue0;
+                        color: @m-white8;
+                        background: @m-blue0;
                     }
                 }
             }
@@ -1822,7 +1834,7 @@ input:-internal-autofill-selected {
                 flex: 1;
                 padding: 0 16px;
                 .rounded-corners(3px, 0, 0, 3px);
-                 color: @m-white0;
+                 color: @m-white9;
                  height: 40px;
                 line-height: 40px;
                 font-size: 16px;
@@ -2179,13 +2191,13 @@ input:-internal-autofill-selected {
             .ant-table-tbody {
                 tr {
                     td {
-                        background: @m-black14;
+                        background: @m-black33;
                     }
                 }
             }
             .ant-table-placeholder {
                 border-top: 1PX solid @m-black9;
-                background: @m-black14;
+                background: @m-black33;
             }
         }
     }
@@ -2197,7 +2209,7 @@ input:-internal-autofill-selected {
         width: 90px;
         background: transparent;
         font-size: 16px;
-        color: @m-white0;
+        color: @m-white9;
     }
     .ant-calendar-picker-icon {
         display: none;

src/assets/styles/theme.css

@@ -2,6 +2,7 @@
  :root {
     --m-grey0: #364048 ;
     --m-grey1: #7a8a94;
+    --m-grey1-hover: rgba(122, 138, 148, .8);
     --m-grey2: #88a0ae;
     --m-grey5: #363F45;
     --m-grey6: #272F36;
@@ -76,6 +77,7 @@
     --m-black30: #15202B;
     --m-black31: #0E0E0F;
     --m-black32: #0E0E0F;
+    --m-black33: #181e22;
 
     --m-blue0: #3a87f7;
     --m-blue0-hover: rgba(58, 135, 247, .8);
@@ -106,6 +108,12 @@
     --m-blue20: #122d55;
     --m-blue21: #102e45;
 
+
+
+    --m-blue25: #0C95FF;
+    --m-blue26: #3A87F7;
+    --m-blue27: #1F3245;
+
     --body-bg: #e9eef3;
     --m-white0: #ffffff;
     --m-white0-hover: rgba(255, 255, 255, .8);
@@ -114,6 +122,9 @@
     --m-white6: #ffffff;
     --m-white7: #ffffff;
     --m-white8: #ffffff;
+    --m-white9: #ffffff;
+    --m-white10: #FEFEFF;
+    --m-white11: #ffffff;
 
     --m-green0: #1FF195;
     --m-green1: #10251d;
@@ -125,6 +136,8 @@
     --m-tabbg: url("../images/tabbg.png");
     --m-tabbg-active: url("../images/tabbgActive.png");
     --m-arrowRight: url("../images/titleArrow.png");
+
+    --m-boxShadow: rgba(18, 22, 24, 0.36);
     
 } 
 /* 白色主题 */
@@ -132,6 +145,7 @@
 :root[theme="light"] { 
     --m-grey0: #5179E2;
     --m-grey1: #7A8A94;
+    --m-grey1-hover: rgba(122, 138, 148, .8);
     --m-grey2: #7A8A94;
     --m-grey5: #B2C4DD;
     --m-grey6: #ffffff;
@@ -154,7 +168,7 @@
     --m-grey19: #F6F8FA;
     --m-grey20: #DAE5EC;
     --m-grey21: #F6F8FA;
-    --m-grey22: #E4F5FF;
+    --m-grey22: #E4F5FF;  
     --m-grey22-hover: rgba(228, 245, 255, .8);
     --m-grey23: #A5CDFF;
     --m-grey26: #5179E2;
@@ -206,6 +220,7 @@
     --m-black30: #15202B;
     --m-black31: #FFFFFF;
     --m-black32: #CED8E6;
+    --m-black33: #ffffff;
 
     --m-blue0: #5179E2;
     --m-blue0-hover: rgba(81, 121, 226, .8);
@@ -236,6 +251,11 @@
     --m-blue20: #D6E0F0;
     --m-blue21: #5179E2;
 
+
+    --m-blue25: #ffffff;
+    --m-blue26: #3A87F7;
+    --m-blue27: #ECF2F5;
+
     --body-bg: #FFFFFF;
     --m-white0: #ffffff;
     --m-white0-hover: rgba(255, 255, 255, .8);
@@ -244,6 +264,9 @@
     --m-white6: #333333;
     --m-white7: #718FAE;
     --m-white8: #ffffff;
+    --m-white9: #5179E2;
+    --m-white10: #FEFEFF;
+    --m-white11: #333333;
 
     --m-green0: #00A843;
     --m-green1: #e8ffef;
@@ -255,12 +278,16 @@
     --m-tabbg: url("../images/tabbg_white.png");
     --m-tabbg-active: url("../images/tabbg_active_white.png");
     --m-arrowRight: url("../images/titleArrow_white.png");
+
+    --m-boxShadow: rgba(18, 22, 24, 0.15);
+    
 }
 
 /* 黑色主题 */
 :root[theme="black"] {
     --m-grey0: #364048 ;
     --m-grey1: #7a8a94;
+    --m-grey1-hover: rgba(122, 138, 148, .8);
     --m-grey2: #88a0ae;
     --m-grey5: #363F45;
     --m-grey6: #272F36;
@@ -336,6 +363,7 @@
     --m-black30: #15202B;
     --m-black31: #0E0E0F;
     --m-black32: #0E0E0F;
+    --m-black33: #181e22;
 
     --m-blue0: #3a87f7;
     --m-blue0-hover: rgba(58, 135, 247, .8);
@@ -366,6 +394,11 @@
     --m-blue20: #122d55;
     --m-blue21: #102e45;
 
+
+    --m-blue25: #0C95FF;
+    --m-blue26: #3A87F7;
+    --m-blue27: #1F3245;
+
     --body-bg: #e9eef3;
     --m-white0: #ffffff;
     --m-white0-hover: rgba(255, 255, 255, .8);
@@ -374,6 +407,9 @@
     --m-white6: #ffffff;
     --m-white7: #ffffff;
     --m-white8: #ffffff;
+    --m-white9: #ffffff;
+    --m-white10: #FEFEFF;
+    --m-white11: #ffffff;
 
     --m-green0: #1FF195;
     --m-green1: #10251d;
@@ -385,5 +421,7 @@
     --m-tabbg: url("../images/tabbg.png");
     --m-tabbg-active: url("../images/tabbgActive.png");
     --m-arrowRight: url("../images/titleArrow.png");
+
+    --m-boxShadow: rgba(18, 22, 24, 0.36);
 }
 

src/assets/styles/variables.less

@@ -4,6 +4,7 @@
 
 @m-grey0: var(--m-grey0);
 @m-grey1: var(--m-grey1);
+@m-grey1-hover: var(--m-grey1-hover);
 @m-grey2:  var(--m-grey2);
 @m-grey3: #ccc;          // 登录界面颜色不变
 @m-grey4: #333333;       // 登录界面颜色不变
@@ -86,6 +87,7 @@
 @m-black30: var(--m-black30);                // 角色详情复选框选中背景色   白色版本等色值修改
 @m-black31: var(--m-black31);
 @m-black32: var(--m-black32);
+@m-black33: var(--m-black33);
 
 @m-blue0: var(--m-blue0);
 @m-blue0-hover: var(--m-blue0-hover);
@@ -119,6 +121,9 @@
 @m-blue22: #0e2f4c;                                 // 交易界面色值
 @m-blue23: #223F7E;                                 // 履约明细界面色值
 @m-blue24: #2484FC;                                 // 履约明细界面色值
+@m-blue25: var(--m-blue25);
+@m-blue26: var(--m-blue26);
+@m-blue27: var(--m-blue27);
 
 @body-bg: #e9eef3;
 @m-white0: var(--m-white0);
@@ -131,7 +136,9 @@
 @m-white6: var(--m-white6);
 @m-white7: var(--m-white7);
 @m-white8: var(--m-white8);
-
+@m-white9: var(--m-white9);
+@m-white10: var(--m-white10);
+@m-white11: var(--m-white11);
 
 @m-green0: var(--m-green0);
 @m-green1: var(--m-green1);
@@ -162,6 +169,8 @@
 @m-tabbg-active: var(--m-tabbg-active);
 @m-arrowRight: var(--m-arrowRight);
 
+@m-boxShadow: var(--m-boxShadow);
+
 @m-yellow0: #FF9600;
 @m-yellow1: #FC9618;
 @m-yellow2: #ffae00;

src/common/components/drawer/index.vue

@@ -141,7 +141,7 @@ export default defineComponent({
     text-align: center;
     line-height: 38px;
     .anticon {
-        color: @m-blue10;
+        color: @m-blue25;
         font-weight: bold;
     }
 }
@@ -175,7 +175,7 @@ export default defineComponent({
                             text-align: center;
                             background: linear-gradient(0deg, @m-blue4, @m-blue5);
                             font-size: 16px;
-                            color: @m-white1;
+                            color: @m-white10;
                             // border-bottom: 2px solid @m-blue0;
                             .rounded-corners(5px, 5px, 0, 0);
                         }

src/layout/components/bottom.vue

@@ -1,32 +1,33 @@
 <template>
-  <section :class="['layout-bottom', isShowBottom ? 'layout-bottom-all' : 'layout-bottom-hidden']">
-    <CapitalInfo class="capital-info-container"
-                 v-if="isCapitalLeft"></CapitalInfo>
-    <main :class="[isCapitalLeft ? 'main-some' : 'main-all']">
-      <firstMenu :list="orderList"
-                 :value="'title'"
-                 @selectMenu="selectMenu">
-        <div class="right-menu-content">
-          <!-- 资金信息 -->
-          <a-select class="capitalSelect"
-                    style="width: 180px"
-                    v-if="!isCapitalLeft"
-                    @change="accountChange"
-                    v-model:value="selectedAccountId">
-            <a-select-option v-for="item in getAllTaAccount()"
-                             :value="item.accountid"
-                             :key="item.accountid">{{item.accountid}}</a-select-option>
-          </a-select>
-          <div class="conditionIcon icon iconfont icon-shouqi"
-               @click="handleShowBottom"></div>
-        </div>
-      </firstMenu>
-      <div v-show="isShowBottom">
-        <component :is="componentId"
-                   v-if="componentId"></component>
-      </div>
-    </main>
-  </section>
+    <section
+        :class="['layout-bottom', isShowBottom ? 'layout-bottom-all' : 'layout-bottom-hidden']"
+    >
+        <CapitalInfo class="capital-info-container" v-if="isCapitalLeft"></CapitalInfo>
+        <main :class="[isCapitalLeft ? 'main-some' : 'main-all']">
+            <firstMenu :list="orderList" :value="'title'" @selectMenu="selectMenu">
+                <div class="right-menu-content">
+                    <!-- 资金信息 -->
+                    <a-select
+                        class="capitalSelect"
+                        style="width: 180px"
+                        v-if="!isCapitalLeft"
+                        @change="accountChange"
+                        v-model:value="selectedAccountId"
+                    >
+                        <a-select-option
+                            v-for="item in getAllTaAccount()"
+                            :value="item.accountid"
+                            :key="item.accountid"
+                        >{{item.accountid}}</a-select-option>
+                    </a-select>
+                    <div class="conditionIcon icon iconfont icon-shouqi" @click="handleShowBottom"></div>
+                </div>
+            </firstMenu>
+            <div v-show="isShowBottom">
+                <component :is="componentId" v-if="componentId"></component>
+            </div>
+        </main>
+    </section>
 </template>
 <script lang="ts">
 import { defineAsyncComponent, defineComponent, reactive, ref } from 'vue';
@@ -105,9 +106,12 @@ export default defineComponent({
     .capitalSelect {
         margin-top: 3px;
         margin-right: 10px;
-        .ant-select-selector{
+        .ant-select-selector {
             background-color: @m-grey6;
-            border:none
+            border: none;
+        }
+        .ant-select-arrow {
+            top: 15px;
         }
     }
 }
@@ -141,14 +145,14 @@ export default defineComponent({
         position: relative;
         .conditionIcon {
             font-size: 16px;
-            color: @m-white0;
+            color: @m-grey1;
             width: 16px;
             cursor: pointer;
             height: 40px;
             line-height: 40px;
             margin-right: 10px;
             &:hover {
-                color: @m-white0-hover
+                color: @m-grey1-hover;
             }
         }
     }

src/views/market/spot_trade/components/detail/index.vue

@@ -1,35 +1,27 @@
 <template>
-  <!-- 买卖大厅详情 -->
-  <Drawer :title="'详情'"
-          :placement="'right'"
-          :visible="visible"
-          class="top"
-          @cancel="cancel">
-    <div class="detailCont">
-      <div class="rows">
-        <div class="row"
-             v-for="item in lstitem"
-             :key="item.name">
-          <div class="left">{{item.name}}</div>
-          <div class="right">{{item.value}}</div>
-        </div>
-      </div>
-      <div class="ruleTitle">履约规则：</div>
-      <div class="rulesCont">
-        <a-row>
-          <a-col :span="24"
-                 v-for="(item, index) in lststep"
-                 :key="item.autoid">
-            <div class="line">
-              <div class="no">{{index + 1}}</div>
-              <div class="name">{{item.steptypename}}</div>
-              <div class="time">{{item.stepdate}}</div>
+    <!-- 买卖大厅详情 -->
+    <Drawer :title="'详情'" :placement="'right'" :visible="visible" class="top" @cancel="cancel">
+        <div class="detailCont">
+            <div class="rows">
+                <div class="row" v-for="item in lstitem" :key="item.name">
+                    <div class="left">{{item.name}}</div>
+                    <div class="right">{{item.value}}</div>
+                </div>
+            </div>
+            <div class="ruleTitle">履约规则：</div>
+            <div class="rulesCont">
+                <a-row>
+                    <a-col :span="24" v-for="(item, index) in lststep" :key="item.autoid">
+                        <div class="line">
+                            <div class="no">{{index + 1}}</div>
+                            <div class="name">{{item.steptypename}}</div>
+                            <div class="time">{{item.stepdate}}</div>
+                        </div>
+                    </a-col>
+                </a-row>
             </div>
-          </a-col>
-        </a-row>
-      </div>
-    </div>
-  </Drawer>
+        </div>
+    </Drawer>
 </template>
 
 <script lang="ts">
@@ -111,7 +103,7 @@ export default defineComponent({
             }
             .right {
                 flex: 1;
-                color: @m-white0;
+                color: @m-white11;
             }
         }
     }
@@ -144,16 +136,17 @@ export default defineComponent({
         }
         > div {
             font-size: 14px;
-            color: @m-white0;
+            color: @m-white11;
             align-self: center;
             align-items: center;
-            background: @m-blue17;
+            background: @m-blue27;
         }
         .no {
             width: 30px;
-            background: @m-blue0;
+            background: @m-blue26;
             .rounded-corners(3px);
             text-align: center;
+            color: @m-white8;
         }
         .name {
             padding-left: 15px;
@@ -167,7 +160,7 @@ export default defineComponent({
         .time {
             width: 40px;
             text-align: right;
-            color: @m-blue0;
+            color: @m-blue26;
             margin-right: 8px;
         }
     }