theme color update

src/assets/styles/mixin.less

@@ -951,7 +951,9 @@
     font-size: 14px;
     .rounded-corners(3px);
     &:hover,
-    &:focus {
+    &:focus,
+    &:active,
+    &::after {
         background: linear-gradient(0deg, @m-grey39-hover 0%, @m-grey40-hover 98%);
         color: @m-white0-hover;
         border: 0;
@@ -960,12 +962,17 @@
 .operBtn.ant-btn {
     background: linear-gradient(0deg, @m-blue6 0%, @m-blue7 99%);
     &:hover,
-    &:focus {
+    &:focus,
+    &:active,
+    &::after {
         background: linear-gradient(0deg, @m-blue6-hover 0%, @m-blue7-hover 99%);
         color: @m-white0-hover;
         border: 0;
     }
 }
+// .ant-input-affix-wrapper:focus, .ant-btn:focus {
+//     box-shadow: none;
+// }
 .btnPrimary.ant-btn,.operBtn.ant-btn {
     margin-left: 10px;
     width: auto;
@@ -1099,6 +1106,7 @@
     display: inline-flex;
     width: calc(100% - 3px);
     padding-left: 3px;
+    background: @m-black35;
 }
 
 .ant-row.dialogRowTitle {
@@ -1967,14 +1975,14 @@ input:-internal-autofill-selected {
             border: 0;
         }
         .ant-table-content {
-            background-image: linear-gradient(90deg, @m-black8 60px, @m-red2 0);
+            background-image: linear-gradient(90deg, @m-black34 60px, @m-red2 0);
         }
         .ant-table-thead {
             tr {
                 box-shadow: 0px 1px 0px 0px @m-black17;
                 th {
                     line-height: 34px;
-                    background: @m-black8;
+                    background: @m-black34;
                     padding-top: 0;
                     padding-bottom: 0;
                     color: @m-grey17;
@@ -2002,8 +2010,9 @@ input:-internal-autofill-selected {
                     overflow: hidden;
                 }
                 td:first-child {
-                    background: @m-black8;
+                    background: @m-black34;
                     color: @m-grey17;
+                    min-width: 61px;
                 }
                 td:not(:first-child :nth-child(1)) {
                     background: @m-red2;
@@ -2041,12 +2050,12 @@ input:-internal-autofill-selected {
 .sellHallTable {
     .ant-table {
         .ant-table-content {
-            background-image: linear-gradient(90deg, @m-black8 60px, @m-green1 0);
+            background-image: linear-gradient(90deg, @m-black34 60px, @m-green1 0);
         }
         .ant-table-tbody {
             tr {
                 td:first-child {
-                    background: @m-black8;
+                    // background: @m-black34;
                     color: @m-grey17;
                 }
                 td:not(:first-child :nth-child(1)) {

src/assets/styles/theme.css

@@ -78,6 +78,8 @@
     --m-black31: #0E0E0F;
     --m-black32: #0E0E0F;
     --m-black33: #181e22;
+    --m-black34: #212629;
+    --m-black35: #181E22;
 
     --m-blue0: #3a87f7;
     --m-blue0-hover: rgba(58, 135, 247, .8);
@@ -153,7 +155,7 @@
     --m-grey8: #D2DAEF;
     --m-grey9: #FFFFFF;
     --m-grey10: #99B5FF;
-    --m-grey11: #ffffff;
+    --m-grey11: #ffffff; 
     --m-grey12: #727C98;
     --m-grey12-hover: rgba(114, 124, 152, .8);
     --m-grey13: #727C98;
@@ -195,7 +197,7 @@
     --m-black6: #DAE5EC;
     --m-black7: #D4E0FF;
     --m-black7-hover: rgba(212, 224, 255, .8);
-    --m-black8: #DAE5EC;
+    --m-black8: #DAE5EC; 
     --m-black9: #e3ebf1;
     --m-black10: #ddebed;
     --m-black11: #ECF2F5;
@@ -221,6 +223,8 @@
     --m-black31: #FFFFFF;
     --m-black32: #CED8E6;
     --m-black33: #ffffff;
+    --m-black34: #F6F8FA;
+    --m-black35: #ECF2F5;
 
     --m-blue0: #5179E2;
     --m-blue0-hover: rgba(81, 121, 226, .8);
@@ -364,6 +368,8 @@
     --m-black31: #0E0E0F;
     --m-black32: #0E0E0F;
     --m-black33: #181e22;
+    --m-black34: #212629;
+    --m-black35: #181E22;
 
     --m-blue0: #3a87f7;
     --m-blue0-hover: rgba(58, 135, 247, .8);

src/assets/styles/variables.less

@@ -88,6 +88,8 @@
 @m-black31: var(--m-black31);
 @m-black32: var(--m-black32);
 @m-black33: var(--m-black33);
+@m-black34: var(--m-black34);
+@m-black35: var(--m-black35);
 
 @m-blue0: var(--m-blue0);
 @m-blue0-hover: var(--m-blue0-hover);

src/views/market/spot_trade/components/buy-sell-market/components/delisting/index.vue

@@ -1,149 +1,160 @@
 <template>
-  <!-- 仓单贸易&仓单预售 买/卖 摘牌 -->
-  <Drawer :title="'摘牌'"
-          :placement="'right'"
-          :visible="visible"
-          width="486px"
-          height="479px"
-          @cancel="cancel"
-          class="top">
-    <div class="delisting">
-      <div class="formBar">
-        <a-form class="inlineForm dialogForm"
-                ref="formRef"
-                :model="formState"
-                :rules="rules">
-          <a-row :gutter="24">
-            <a-col :span="24">
-              <a-form-item label="交易账户"
-                           name="accountid">
-                <a-select class="inlineFormSelect"
-                          style="width: 260px"
-                          v-model:value="formState.accountid"
-                          placeholder="请选择">
-                  <a-select-option v-for="item in accountList"
-                                   :value="item.accountid"
-                                   :key="item.accountid">{{item.accountid}}</a-select-option>
-                </a-select>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="24">
-              <a-form-item label="挂牌方">
-                <span class="white ml8">{{selectedRow.username}}</span>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="24">
-              <a-form-item label="基差"
-                           v-if="isFloat()">
-                <span class="yellow ml8">{{selectedRow.pricemove}}</span>
-              </a-form-item>
-              <a-form-item label="挂牌价格"
-                           v-if="!isFloat()">
-                <span class="yellow ml8">{{selectedRow.fixedprice}}</span>
-              </a-form-item>
-              <a-row :gutter="24">
-                <a-col :span="24"></a-col>
-              </a-row>
-              <a-form-item label="挂牌数量">
-                <span class="white ml8">{{selectedRow.orderqty}}{{selectedRow.enumdicname}}</span>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24"
-                 v-if="isBuy() && isWR()">
-            <a-col :span="24">
-              <a-form-item label="现货仓单"
-                           name="LadingBillId">
-                <a-select class="inlineFormSelect"
-                          style="width: 260px"
-                          v-model:value="formState.LadingBillId"
-                          placeholder="请选择">
-                  <a-select-option v-for="item in wrHoldList"
-                                   :value="item.id"
-                                   :key="item.id">{{item.name}}</a-select-option>
-                </a-select>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="24">
-              <a-form-item label="摘牌数量"
-                           class="relative"
-                           name="num">
-                <a-input-number class="dialogInput yellowInput"
-                                style="width: 260px"
-                                :min="0"
-                                :max="getMaxNum()"
-                                v-model:value="formState.num" />
-                <span class="input-enumdicname-absolute">{{selectedRow.enumdicname}}</span>
-                <div class="labelTip">({{selectedRow.minivalue}}{{selectedRow.enumdicname}}起)</div>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="24"
-                   class="mt-20">
-              <a-form-item>
-                <a-slider ::min="0"
-                          v-model:value="formState.num"
-                          :max="selectedRow.orderqty"
-                          class="formSlider" />
-                <div class="unit">
-                  <span>0</span>
-                  <span>{{getMaxNum()}}{{selectedRow.enumdicname}}</span>
-                </div>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">&nbsp;</a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="24"
-                   class="mt-20">
-              <a-form-item :label="isFloat() ? '估算金额' : '摘牌金额'">
-                <span class="white ml8">{{getMoney()}}</span>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="24"
-                   class="mt-20">
-              <a-form-item :label="getMargin() ? '履约保证金' : ''">
-                <a-row>
-                  <a-col :span="8"
-                         v-if="getMargin()">
-                    <span class="white ml8">{{getMargin()}}</span>
-                  </a-col>
-                  <a-col :span="4"
-                         class="tr">
-                    <span class="grey1">可用资金</span>
-                  </a-col>
-                  <a-col :span="12">
-                    <span class="white ml8">{{getCanUseMoney(getSelectedAccount())}}</span>
-                  </a-col>
-                </a-row>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="24">
-              <a-form-item class="tc">
-                <a-button class="listedBtn"
-                          :loading="loading"
-                          :disabled="loading"
-                          @click="submit">{{isBuy() ? '卖出' : '买入'}}</a-button>
-                <a-button class="ml10 cancelBtn"
-                          @click="cancel">取消</a-button>
-              </a-form-item>
-            </a-col>
-          </a-row>
-        </a-form>
-      </div>
-    </div>
-  </Drawer>
+    <!-- 仓单贸易&仓单预售 买/卖 摘牌 -->
+    <Drawer
+        :title="'摘牌'"
+        :placement="'right'"
+        :visible="visible"
+        width="486px"
+        height="479px"
+        @cancel="cancel"
+        class="top"
+    >
+        <div class="delisting">
+            <div class="formBar">
+                <a-form
+                    class="inlineForm dialogForm"
+                    ref="formRef"
+                    :model="formState"
+                    :rules="rules"
+                >
+                    <a-row :gutter="24">
+                        <a-col :span="24">
+                            <a-form-item label="交易账户" name="accountid">
+                                <a-select
+                                    class="inlineFormSelect"
+                                    style="width: 260px"
+                                    v-model:value="formState.accountid"
+                                    placeholder="请选择"
+                                >
+                                    <a-select-option
+                                        v-for="item in accountList"
+                                        :value="item.accountid"
+                                        :key="item.accountid"
+                                    >{{item.accountid}}</a-select-option>
+                                </a-select>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24">
+                        <a-col :span="24">
+                            <a-form-item label="挂牌方">
+                                <span class="white ml8">{{selectedRow.username}}</span>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24">
+                        <a-col :span="24">
+                            <a-form-item label="基差" v-if="isFloat()">
+                                <span class="yellow ml8">{{selectedRow.pricemove}}</span>
+                            </a-form-item>
+                            <a-form-item label="挂牌价格" v-if="!isFloat()">
+                                <span class="yellow ml8">{{selectedRow.fixedprice}}</span>
+                            </a-form-item>
+                            <a-row :gutter="24">
+                                <a-col :span="24"></a-col>
+                            </a-row>
+                            <a-form-item label="挂牌数量">
+                                <span
+                                    class="white ml8"
+                                >{{selectedRow.orderqty}}{{selectedRow.enumdicname}}</span>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24" v-if="isBuy() && isWR()">
+                        <a-col :span="24">
+                            <a-form-item label="现货仓单" name="LadingBillId">
+                                <a-select
+                                    class="inlineFormSelect"
+                                    style="width: 260px"
+                                    v-model:value="formState.LadingBillId"
+                                    placeholder="请选择"
+                                >
+                                    <a-select-option
+                                        v-for="item in wrHoldList"
+                                        :value="item.id"
+                                        :key="item.id"
+                                    >{{item.name}}</a-select-option>
+                                </a-select>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24">
+                        <a-col :span="24">
+                            <a-form-item label="摘牌数量" class="relative" name="num">
+                                <a-input-number
+                                    class="dialogInput yellowInput"
+                                    style="width: 260px"
+                                    :min="0"
+                                    :max="getMaxNum()"
+                                    v-model:value="formState.num"
+                                />
+                                <span class="input-enumdicname-absolute">{{selectedRow.enumdicname}}</span>
+                                <div
+                                    class="labelTip"
+                                >({{selectedRow.minivalue}}{{selectedRow.enumdicname}}起)</div>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24">
+                        <a-col :span="24" class="mt-20">
+                            <a-form-item>
+                                <a-slider
+                                    ::min="0"
+                                    v-model:value="formState.num"
+                                    :max="selectedRow.orderqty"
+                                    class="formSlider"
+                                />
+                                <div class="unit">
+                                    <span>0</span>
+                                    <span>{{getMaxNum()}}{{selectedRow.enumdicname}}</span>
+                                </div>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">&nbsp;</a-col>
+                    </a-row>
+                    <a-row :gutter="24">
+                        <a-col :span="24" class="mt-20">
+                            <a-form-item :label="isFloat() ? '估算金额' : '摘牌金额'">
+                                <span class="white ml8">{{getMoney()}}</span>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24">
+                        <a-col :span="24" class="mt-20">
+                            <a-form-item :label="getMargin() ? '履约保证金' : ''">
+                                <a-row>
+                                    <a-col :span="8" v-if="getMargin()">
+                                        <span class="white ml8">{{getMargin()}}</span>
+                                    </a-col>
+                                    <a-col :span="4" class="tr">
+                                        <span class="grey1">可用资金</span>
+                                    </a-col>
+                                    <a-col :span="12">
+                                        <span
+                                            class="white ml8"
+                                        >{{getCanUseMoney(getSelectedAccount())}}</span>
+                                    </a-col>
+                                </a-row>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24">
+                        <a-col :span="24">
+                            <a-form-item class="tc">
+                                <a-button
+                                    class="listedBtn"
+                                    :loading="loading"
+                                    :disabled="loading"
+                                    @click="submit"
+                                >{{isBuy() ? '卖出' : '买入'}}</a-button>
+                                <a-button class="ml10 cancelBtn" @click="cancel">取消</a-button>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                </a-form>
+            </div>
+        </div>
+    </Drawer>
 </template>
 
 <script lang="ts">
@@ -345,10 +356,14 @@ export default defineComponent({
     }
 }
 .cancelBtn:extend(.listedBtn) {
-    background: linear-gradient(0deg, @m-grey12 0%, @m-grey13 100%) !important;
-    &:hover {
+    background: linear-gradient(0deg, @m-grey12 0%, @m-grey13 100%);
+    &:hover,
+    &:active,
+    &:focus,
+    &::after {
         background: linear-gradient(0deg, @m-grey12-hover 0%, @m-grey13-hover 100%) !important;
-        color: @m-white0-hover;
+        color: @m-white0-hover !important;
+        border: 0 !important;
     }
 }
 .ml10 {

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

@@ -47,8 +47,8 @@
                     :key="item.goodsid"
                 >{{item.goodscode}}({{item.goodsname}})</a-select-option>
             </a-select>
-            <a-button class="selectBtn" @click="search(true)">筛选</a-button>
-            <a-button class="selectBtn" @click="listingAction">挂牌求购</a-button>
+            <a-button class="btnDeafault" @click="search(true)" style="width: 80px">筛选</a-button>
+            <a-button class="operBtn" @click="listingAction">挂牌求购</a-button>
         </div>
     </div>
 </template>
@@ -220,7 +220,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .allDatePicker.ant-calendar-picker {
     cursor: pointer;
     min-width: 120px;
@@ -238,5 +238,11 @@ export default defineComponent({
         }
     }
 }
+.operBtn.ant-btn {
+    margin-top: 0;
+}
+.btnDeafault.ant-btn {
+    height: 30px;
+}
 </style>;