update

src/assets/styles/mixin.less

@@ -795,8 +795,27 @@
         color: @m-grey2;
     }
 }
+.dialogInput34.ant-input-number {
+    position: relative;
+    .ant-input-number-input {
+        height: 34px;
+        line-height: 36px;
+        font-size: 16px;
+        color: #ffffff;
+        text-align: center;
+    }
+}
+.dialogInput34.ant-input-number-disabled { 
+    background: #1E304A;
+    .ant-input-number-input {
+        color: #354859;
+    }
+}
+.block {
+    display: block;
+}
 .formFieldSet {
-    border: 1px solid @m-grey19;
+    border: 1PX solid @m-grey19;
     padding: 0 20px 20px;
     legend {
         color: @m-white0;
@@ -2249,6 +2268,14 @@ input:-internal-autofill-selected {
     .position(absolute, auto, 0, 9px, 0);
     z-index: 2;
 }
+.c_c_s_s {
+    .fixedBtns {
+        left: 8px;
+        right: 8px;
+        padding-top: 18px;
+        background: #162738;
+    }
+}
 .ant-slider.formSlider {
     width: 140px;
     margin-left: 70px;
@@ -2510,4 +2537,94 @@ input:-internal-autofill-selected {
  // 数字最右侧上下箭头不显示
 .ant-input-number-handler-wrap {
     display: none
+}
+
+// 图标卖挂选项卡
+.chartTabs.ant-tabs-top {
+    height: calc(100% - 22px);
+    background: transparent;
+    .ant-tabs-bar {
+        margin-bottom: 0;
+        border-bottom: 0;
+        height: 30px;
+        .ant-tabs-nav-container {
+            .ant-tabs-nav-wrap {
+                .ant-tabs-nav-scroll {
+                    .ant-tabs-nav {
+                        width: 100%;
+                        > div {
+                            .flex;
+                        }
+                        .ant-tabs-tab {
+                            margin-right: 0;
+                            padding: 0;
+                            height: 30px;
+                            line-height: 30px;
+                            background: @m-black39;
+                            color: @m-grey1;
+                            font-size: 14px;
+                            flex: 1;
+                            text-align: center;
+                        }
+                        .ant-tabs-tab-active {
+                            background: @m-green1;
+                            color: @m-blue0;
+                        }
+                        .ant-tabs-ink-bar-animated {
+                            width: 0 !important;
+                            height: 0 !important;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .ant-tabs-content {
+        width: 100%;
+        height: calc(100% - 29px);
+        margin-top: -1px;
+        .flex;
+        flex-direction: column;
+        .ant-tabs-tabpane {
+            height: 100%;
+        }
+        .ant-tabs-tabpane-active {
+            background: @m-green1;
+        }
+    }
+}
+
+.watchMore {
+    width: 100%;
+    height: 22px;
+    line-height: 22px;
+    background: @m-grey48;
+    font-size: 14px;
+    color: @m-grey49;
+    text-align: center;
+    cursor: pointer;
+}
+
+.chartRow {
+    width: 100%;
+    padding-left: 8px;
+    padding-right: 10px;
+    display: inline-flex;
+    > div {
+        flex: 1;
+        font-size: 14px;
+        color: @m-grey50;
+        height: 40px;
+        line-height: 40px;
+    }
+    .left {
+        text-align: left;
+    }
+    .middle {
+        text-align: center;
+        color: #FF2B2B;
+    }
+    .right {
+        text-align: right;
+    }
 }

src/assets/styles/theme.css

@@ -51,6 +51,9 @@
     --m-grey45: #88A0AE;
     --m-grey46: #252D34;
     --m-grey47: #252D34;
+    --m-grey48: #171B1D;
+    --m-grey49: #3C454B;
+    --m-grey50: #ACB8C0;
     /* --m-green1: #e8ffef; */
 
     --m-black0: #242a2e;
@@ -93,6 +96,7 @@
     --m-black36: #181e22;
     --m-black37: #2794ff;
     --m-black38: #15293a;
+    --m-black39: #171B1D;
 
     --m-blue0: #3a87f7;
     --m-blue0-hover: rgba(58, 135, 247, .8);
@@ -149,6 +153,7 @@
     --m-white9: #ffffff;
     --m-white10: #FEFEFF;
     --m-white11: #ffffff;
+    --m-white12: #ffffff;
 
     --m-green0: #1FF195;
     --m-green1: #10251d;
@@ -156,6 +161,8 @@
     --m-red1: #FF2B2B;
     --m-red2: #271112;
 
+    --m-red11: #FF2B2B;
+
     --m-yellow4: #3a2215;
     --m-yellow5: #fc9618;
     
@@ -223,6 +230,9 @@
     --m-grey45: #88A0AE;
     --m-grey46: #252D34;
     --m-grey47: #252D34;
+    --m-grey48: #171B1D;
+    --m-grey49: #3C454B;
+    --m-grey50: #ACB8C0;
     /* --m-green1: #e8ffef; */
 
     --m-black0: #242a2e;
@@ -265,6 +275,7 @@
     --m-black36: #181e22;
     --m-black37: #2794ff;
     --m-black38: #15293a;
+    --m-black39: #171B1D;
 
     --m-blue0: #3a87f7;
     --m-blue0-hover: rgba(58, 135, 247, .8);
@@ -320,6 +331,7 @@
     --m-white9: #ffffff;
     --m-white10: #FEFEFF;
     --m-white11: #ffffff;
+    --m-white12: #ffffff;
 
     --m-green0: #1FF195;
     --m-green1: #10251d;
@@ -327,6 +339,8 @@
     --m-red1: #FF2B2B;
     --m-red2: #271112;
 
+    --m-red11: #FF2B2B;
+
     --m-yellow4: #3a2215;
     --m-yellow5: #fc9618;
 
@@ -393,6 +407,9 @@
     --m-grey45: #394753;
     --m-grey46: #CBD7DD;
     --m-grey47: #FFFFFF;
+    --m-grey48: #FFFFFF;
+    --m-grey49: #7A8A94;
+    --m-grey50: #3C454B;
 
     --m-black0: #F8FBFF;
     --m-black1: #ECF2F5;
@@ -434,6 +451,7 @@
     --m-black36: #ffffff;
     --m-black37: #73BAFF;
     --m-black38: #ECF2F5;
+    --m-black39: #ECF2F5;
 
     --m-blue0: #5179E2;
     --m-blue0-hover: rgba(81, 121, 226, .8);
@@ -489,6 +507,7 @@
     --m-white9: #5179E2;
     --m-white10: #FEFEFF;
     --m-white11: #333333;
+    --m-white12: #718FAE;
 
     --m-green0: #00A843;
     --m-green1: #e8ffef;
@@ -496,6 +515,8 @@
     --m-red1: #EE3434;
     --m-red2: #ffe2e2;
 
+    --m-red11: #FF2B2B;
+
     --m-yellow4: #FFE8DB;
     --m-yellow5: #FFC277;
 

src/assets/styles/variables.less

@@ -60,6 +60,9 @@
 @m-grey45: var(--m-grey45);
 @m-grey46: var(--m-grey46);
 @m-grey47: var(--m-grey47);
+@m-grey48: var(--m-grey48);
+@m-grey49: var(--m-grey49);
+@m-grey50: var(--m-grey50);
 
 @m-black: #000000;
 @m-black0: var(--m-black0);
@@ -102,6 +105,7 @@
 @m-black36: var(--m-black36);
 @m-black37: var(--m-black37);
 @m-black38: var(--m-black38);
+@m-black39: var(--m-black39);
 
 @m-blue0: var(--m-blue0);
 @m-blue0-hover: var(--m-blue0-hover);
@@ -162,6 +166,7 @@
 @m-white9: var(--m-white9);
 @m-white10: var(--m-white10);
 @m-white11: var(--m-white11);
+@m-white12: var(--m-white12);
 
 @m-green0: var(--m-green0);
 @m-green1: var(--m-green1);
@@ -185,6 +190,7 @@
 @m-red9-hover: rgba(@m-red9, .8);
 @m-red10: #FB7F75;
 @m-red10-hover: rgba(@m-red10, .8);
+@m-red11: var(--m-red11);
 
 @m-nodata: var(--m-nodata);
 

src/common/components/drawer/index.vue

@@ -82,6 +82,16 @@ export default defineComponent({
         width: 586px !important;
     }
 }
+.bottom486 {
+    .position(fixed, auto, 0, -2px, auto);
+    width: 486px;
+    height: 450px;
+    background: transparent;
+    z-index: 10;
+    .ant-drawer-content-wrapper {
+        width: 486px !important;
+    }
+}
 .delistingBottom {
     .position(fixed, auto, 0, -2px, auto);
     width: 586px;

src/layout/components/top.vue

@@ -267,6 +267,9 @@ export default defineComponent({
                 line-height: 30px;
                 background: @m-black0;
                 position: absolute;
+                .anticon {
+                    color: @m-white12;
+                }
             }
         }
         .ant-layout-sider-collapsed {

src/views/market/spot_trade/spot_trade_order_transaction/components/chart/index.vue

@@ -1,19 +1,97 @@
 <template>
-  <!-- 交易图表  -->
-  <div class="chart-container">
-    <div class="chart-content"></div>
-    <div class="chart-tips">
-      <a-tabs v-model:activeKey="activeKey">
-        <a-tab-pane key="1"
-                    tab="卖挂">Tab 1</a-tab-pane>
-        <a-tab-pane key="2"
-                    tab="买挂">Tab 2</a-tab-pane>
-        <a-tab-pane key="3"
-                    tab="成交">Tab 3</a-tab-pane>
-      </a-tabs>
-      <div @click="watchMore">查看更多</div>
+    <!-- 交易图表  -->
+    <div class="chart-container">
+        <div class="chart-content"></div>
+        <div class="chart-tips">
+            <a-tabs class="chartTabs" v-model:activeKey="activeKey">
+                <a-tab-pane key="1" tab="卖挂">
+                    <div class="chartRow">
+                        <div class="left">江**铜</div>
+                        <div class="middle">6287</div>
+                        <div class="right">30</div>
+                    </div>
+                    <div class="chartRow">
+                        <div class="left">江**铜</div>
+                        <div class="middle">6287</div>
+                        <div class="right">30</div>
+                    </div>
+                    <div class="chartRow">
+                        <div class="left">江**铜</div>
+                        <div class="middle">6287</div>
+                        <div class="right">30</div>
+                    </div>
+                    <div class="chartRow">
+                        <div class="left">江**铜</div>
+                        <div class="middle">6287</div>
+                        <div class="right">30</div>
+                    </div>
+                    <div class="chartRow">
+                        <div class="left">江**铜</div>
+                        <div class="middle">6287</div>
+                        <div class="right">30</div>
+                    </div>
+                    <div class="chartRow">
+                        <div class="left">江**铜</div>
+                        <div class="middle">6287</div>
+                        <div class="right">30</div>
+                    </div>
+                    <div class="chartRow">
+                        <div class="left">江**铜</div>
+                        <div class="middle">6287</div>
+                        <div class="right">30</div>
+                    </div>
+                    <div class="chartRow">
+                        <div class="left">江**铜</div>
+                        <div class="middle">6287</div>
+                        <div class="right">30</div>
+                    </div>
+                    <div class="chartRow">
+                        <div class="left">江**铜</div>
+                        <div class="middle">6287</div>
+                        <div class="right">30</div>
+                    </div>
+                    <div class="chartRow">
+                        <div class="left">江**铜</div>
+                        <div class="middle">6287</div>
+                        <div class="right">30</div>
+                    </div>
+                    <div class="chartRow">
+                        <div class="left">江**铜</div>
+                        <div class="middle">6287</div>
+                        <div class="right">30</div>
+                    </div>
+                    <div class="chartRow">
+                        <div class="left">江**铜</div>
+                        <div class="middle">6287</div>
+                        <div class="right">30</div>
+                    </div>
+                    <div class="chartRow">
+                        <div class="left">江**铜</div>
+                        <div class="middle">6287</div>
+                        <div class="right">30</div>
+                    </div>
+                    <div class="chartRow">
+                        <div class="left">江**铜</div>
+                        <div class="middle">6287</div>
+                        <div class="right">30</div>
+                    </div>
+                    <div class="chartRow">
+                        <div class="left">江**铜</div>
+                        <div class="middle">6287</div>
+                        <div class="right">30</div>
+                    </div>
+                    <div class="chartRow">
+                        <div class="left">江**铜</div>
+                        <div class="middle">6287</div>
+                        <div class="right">30</div>
+                    </div>
+                </a-tab-pane>
+                <a-tab-pane key="2" tab="买挂">Tab 2</a-tab-pane>
+                <a-tab-pane key="3" tab="成交">Tab 3</a-tab-pane>
+            </a-tabs>
+            <div @click="watchMore" class="watchMore">查看更多</div>
+        </div>
     </div>
-  </div>
 </template>
 
 <script lang="ts">
@@ -99,11 +177,15 @@ export default defineComponent({
 <style lang="less">
 .chart-container {
     display: flex;
+    width: 100%;
+    height: calc(100% - 41px);
     .chart-content {
         flex: 1;
+        height: 100%;
     }
     .chart-tips {
         width: 300px;
+        height: 100%;
     }
 }
 </style>

src/views/order/commodity_contract/components/commodity_contract_summary/components/commodity_contract_summary_settlement/index.vue

@@ -1,30 +1,103 @@
 <template>
   <!-- 交收-->
   <Drawer :title="'交收'"
-          :placement="'bottom'"
+          :placement="'right'"
+          class="bottom486"
           :visible="visible"
           @cancel="cancel">
-    <div class="listed">
+    <div class="listed c_c_s_s">
       <a-form class="inlineForm dialogForm"
               ref="formRef"
               :model="formState"
               :rules="rules">
-        <div>
-          <span>合约数量 10</span>
-          <span>可交收数量 50 吨</span>
-        </div>
         <div class="formBar">
-          <a-row :gutter="24">
-            <a-col :span="8">
-              持有人/商品/仓库
-            </a-col>
-            <a-col :span="8">
-              升贴水/数量
-            </a-col>
-            <a-col :span="8">
-              选择数量
-            </a-col>
-          </a-row>
+          <div class="formtop">
+            <div class="firstTitle">
+              <span>合约数量 10，</span>
+              <span>可交收数量 50 吨</span>
+            </div>
+            <div class="secondLine">
+              <div class="left">持有人/商品/仓库</div>
+              <div class="middle">升贴水/数量</div>
+              <div class="right">选择数量</div>
+            </div>
+            <a-checkbox-group class="commonCheckboxGroup">
+              <div class="lineBar">
+                <div class="line1">
+                  <div class>
+                    <a-checkbox></a-checkbox>
+                  </div>
+                  <div class="name">南**业</div>
+                </div>
+                <div class="line2">
+                  <div class="left">
+                    <div>铜杆-12mm-江铜</div>
+                    <div>蛇口仓库</div>
+                  </div>
+                  <div class="middle">
+                    <div>2</div>
+                    <div>50吨</div>
+                  </div>
+                  <div class="right">
+                    <template class="inputNumberBlock">
+                      <a-input-number class="dialogInput dialogInput34"
+                                      style="width: 100px !important; height: 34px;"
+                                      :min="0"></a-input-number>
+                      <MinusOutlined />
+                      <PlusOutlined />
+                    </template>
+                  </div>
+                </div>
+              </div>
+              <div class="lineBar">
+                <div class="line1">
+                  <div class>
+                    <a-checkbox></a-checkbox>
+                  </div>
+                  <div class="name">南**业</div>
+                </div>
+                <div class="line2">
+                  <div class="left">
+                    <div>铜杆-12mm-江铜</div>
+                    <div>蛇口仓库</div>
+                  </div>
+                  <div class="middle">
+                    <div>2</div>
+                    <div>50吨</div>
+                  </div>
+                  <div class="right">
+                    <template class="inputNumberBlock disabled">
+                      <a-input-number class="dialogInput dialogInput34"
+                                      style="width: 100px !important; height: 34px;"
+                                      :min="0"
+                                      disabled></a-input-number>
+                      <MinusOutlined />
+                      <PlusOutlined />
+                    </template>
+                  </div>
+                </div>
+              </div>
+            </a-checkbox-group>
+          </div>
+          <div class="formbottom">
+            <div class="line1">
+              <div>
+                <span>已点选数量</span>
+                <span class="white">40吨</span>
+                <span>，需合约数量</span>
+                <span class="white">8</span>
+              </div>
+              <div class="yellow">升贴水1100</div>
+            </div>
+            <div class="line2">
+              <div>点价合约</div>
+              <div class="right">
+                <div>C2109</div>
+                <div>1398.00</div>
+              </div>
+            </div>
+            <div class="line3">预估贷款：71,000.00</div>
+          </div>
         </div>
         <a-row :gutter="24">
           <a-col :span="24"
@@ -65,10 +138,11 @@ import { queryResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
 import { useQueryData } from '@/common/setup/request';
 import { queryWrDeliveryAvalidHoldLB } from '@/services/go/wrtrade';
 import { QueryTradePositionRsp } from '@/services/go/ermcp/order/interface';
+import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
 
 export default defineComponent({
     name: ModalEnum.commodity_contract_summary_settlement,
-    components: { Drawer, UploadImg },
+    components: { Drawer, UploadImg, PlusOutlined, MinusOutlined },
     emits: ['cancel', 'update'],
     props: {
         selectedRow: {
@@ -118,4 +192,177 @@ export default defineComponent({
 </script>
 
 <style lang="less" scoped>
+.c_c_s_s {
+    background: #162738;
+    .formBar {
+        padding: 0;
+        .formtop {
+            width: 100%;
+            padding: 0 20px;
+            .flex;
+            flex-direction: column;
+            background: #0f1a25;
+            .firstTitle {
+                width: calc(100% + 40px);
+                height: 40px;
+                line-height: 40px;
+                margin-left: -20px;
+                padding: 0 20px;
+                font-size: 14px;
+                color: #ffffff;
+                border-bottom: 1px solid #162738;
+            }
+            .secondLine {
+                width: 100%;
+                height: 40px;
+                line-height: 40px;
+                display: inline-flex;
+                > div {
+                    flex: 1;
+                    font-size: 14px;
+                    color: #7a8a94;
+                }
+                .left {
+                    text-align: left;
+                }
+                .middle {
+                    text-align: center;
+                }
+                .right {
+                    text-align: right;
+                }
+            }
+            .lineBar {
+                width: 100%;
+                min-height: 100px;
+                padding-left: 15px;
+                padding-right: 10px;
+                background: #102442;
+                margin-bottom: 10px;
+                .rounded-corners(5px);
+                .line1 {
+                    display: inline-flex;
+                    width: 100%;
+                    height: 40px;
+                    line-height: 40px;
+                    font-size: 16px;
+                    color: #ffffff;
+                    border-bottom: 1px solid #122d55;
+                    > div {
+                        align-self: center;
+                        align-items: center;
+                    }
+                    .name {
+                        margin-left: 10px;
+                    }
+                }
+                .line2 {
+                    width: 100%;
+                    padding: 12px 0 14px 0;
+                    display: inline-flex;
+                    > div {
+                        flex: 1;
+                        max-width: 33.33%;
+                    }
+                    .left {
+                        .flex;
+                        flex-direction: column;
+                        > div {
+                            width: 100%;
+                            height: 17px;
+                            line-height: 17px;
+                            color: #ffffff;
+                            font-size: 14px;
+                        }
+                    }
+                    .middle {
+                        display: inline-flex;
+                        justify-content: space-between;
+                        padding: 0 10px;
+                        font-size: 16px;
+                        color: #ffffff;
+                        line-height: 34px;
+                    }
+                    .right {
+                        .inputNumberBlock {
+                            float: right;
+                            display: block;
+                            width: 100px;
+                            position: relative;
+                            .anticon {
+                                color: #0d8aeb;
+                                font-size: 15px;
+                                z-index: 2;
+                                line-height: 34px;
+                                cursor: pointer;
+                            }
+                            .anticon-minus {
+                                .position(absolute, 0, auto, 0, 10px);
+                            }
+                            .anticon-plus {
+                                .position(absolute, 0, 10px, 0, auto);
+                            }
+                        }
+                        .disabled {
+                            .anticon {
+                                color: #354859;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        .formbottom {
+            width: 100%;
+            .flex;
+            flex-direction: column;
+            background: #162738;
+            padding: 0 18px 0 20px;
+            .line1 {
+                width: 100%;
+                padding: 0 12px 0 16px;
+                height: 36px;
+                line-height: 36px;
+                display: inline-flex;
+                justify-content: space-between;
+                color: #7a8a94;
+                font-size: 14px;
+            }
+            .line2 {
+                width: 100%;
+                height: 35px;
+                line-height: 34px;
+                padding-left: 15px;
+                padding-right: 10px;
+                background: #091a32;
+                .rounded-corners(5px);
+                font-size: 14px;
+                color: #7a8a94;
+                display: inline-flex;
+                justify-content: space-between;
+                > div {
+                    align-self: baseline;
+                    align-items: baseline;
+                }
+                .right {
+                    display: inline-flex;
+                    color: #fc9618;
+                    div:last-child {
+                        font-size: 16px;
+                        margin-left: 2px;
+                    }
+                }
+            }
+            .line3 {
+                margin-top: 16px;
+                width: 100%;
+                height: 15px;
+                line-height: 15px;
+                font-size: 14px;
+                text-align: right;
+                color: #ffffff;
+            }
+        }
+    }
+}
 </style>;

src/views/order/spot_warran/components/spot_warrant_spot_details/components/listing/index.vue

@@ -57,7 +57,7 @@
                             <a-form-item label="挂牌数量" name="OrderQty">
                                 <a-input-number
                                     class="dialogInput"
-                                    style="width: 140px"
+                                    style="width: 140px !important"
                                     :min="0"
                                     v-model:value="formState.OrderQty"
                                     placeholder="请输入挂牌数量"