commit

src/assets/styles/index.less

@@ -287,4 +287,4 @@ body {
         border-top-color: #0e0e0f !important;
         border-left-color: #161a1c !important;
     }
-}
+}

src/assets/styles/mixin.less

@@ -145,3 +145,31 @@
     font-size: @fontSize;
     .rounded-corners(@rounded);
 }
+
+::v-deep.ant-select-single {
+    .ant-select-selector {
+        height: 30px;
+        padding: 0 8px;
+        background: #15202B;
+        border: 1px solid #0C95FF;
+        border-radius: 3px;
+        color: #E5E5E5;
+    }
+    .ant-select-arrow {
+        right: 8px;
+        color: #3A87F7;
+    }
+}
+::v-deep.commonInput {
+    background: #15202B;
+    border: 1px solid @m-grey14;
+    border-radius: 3px;
+    color: #E5E5E5;
+    .ant-input {
+        color: #E5E5E5;
+        background: transparent;
+    }
+    .ant-input-suffix {
+        color: #E5E5E5;
+    }
+}

src/assets/styles/variables.less

@@ -42,6 +42,7 @@
 @body-bg: #e9eef3;
 @m-white0: #ffffff;
 @m-white0-hover: rgba(@m-white0, .8);
+@m-white1: #E5E5E5;
 @m-green0: #1FF195;
 
 @font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

src/components/drawer/index.vue

@@ -3,14 +3,15 @@
     <a-drawer :placement="placement"
               :closable="false"
               :visible="visible"
-              class="top">  <!-- 摘牌是top  挂牌是bottom -->
+              class="tradeDialog">  <!-- 摘牌是top  挂牌是bottom 期货交易是tradeDialog -->
       <div class="collapse"
            @click="cancel"></div>
       <div class="collapseCont">
-        <div class="title">{{ title }}</div>
-        <div class="content">
+        <!-- <div class="title">{{ title }}</div> -->
+        <div class="content highContent">
             <!-- <Listed></Listed> -->
-            <Delisting></Delisting>
+            <!-- <Delisting></Delisting> -->
+            <Trade></Trade>
         </div>
       </div>
     </a-drawer>
@@ -22,6 +23,7 @@ import { defineComponent, ref, PropType } from 'vue';
 import { closeModal, ModalName } from '@/setup/controlModal/index';
 import Listed from '@/views/market/warehouseTrade/components/listed/index.vue';
 import Delisting from '@/views/market/warehouseTrade/components/delisting/index.vue';
+import Trade from '@/views/market/warehouseTrade/components/trade/index.vue';
 
 interface Key {
     [propName: string]: string;
@@ -46,7 +48,8 @@ export default defineComponent({
     },
     components: {
         Listed,
-        Delisting
+        Delisting,
+        Trade
     },
     setup(props, context) {
         const { visible, cancel, handleOk } = closeModal(props.modalName);
@@ -64,12 +67,21 @@ export default defineComponent({
     width: 586px;
     height: 330px;
     background: transparent;
+    z-index: 10;
 }
 .top {
     .position(fixed, 116px, 0, auto, auto);
     width: 446px;
     height: 350px;
     background: transparent;
+    z-index: 10;
+}
+.tradeDialog {
+    .position(fixed, 116px, 0, auto, auto);
+    width: 467px;
+    height: 310px;
+    background: transparent;
+    z-index: 10;
 }
 .ant-drawer.ant-drawer-open {
     .ant-drawer-mask {
@@ -118,6 +130,9 @@ export default defineComponent({
                             overflow-y: auto;
                             background: @m-grey11;
                         }
+                        .highContent {
+                            max-height: 100%;
+                        }
                     }
                 }
             }

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

@@ -163,20 +163,6 @@ export default defineComponent({
         }
     }
 }
-::v-deep.ant-select-single {
-    .ant-select-selector {
-        height: 30px;
-        padding: 0 8px;
-        background: #15202B;
-        border: 1px solid #0C95FF;
-        border-radius: 3px;
-        color: #E5E5E5;
-    }
-    .ant-select-arrow {
-        right: 8px;
-        color: #3A87F7;
-    }
-}
 ::v-deep.ant-select-dropdown {
     background:  #15202B;
     color: #E5E5E5;
@@ -226,19 +212,6 @@ export default defineComponent({
     height: 14px;
     line-height: 14px;
 }
-::v-deep.commonInput {
-    background: #15202B;
-    border: 1px solid @m-grey14;
-    border-radius: 3px;
-    color: #E5E5E5;
-    .ant-input {
-        color: #E5E5E5;
-        background: transparent;
-    }
-    .ant-input-suffix {
-        color: #E5E5E5;
-    }
-}
 .listedBtn {
     width: 120px;
     height: 30px;

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

@@ -0,0 +1,139 @@
+<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="inlineFormSelect"  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>复位</a-button>
+            </a-col>
+        </a-row>
+        <a-row>
+            <a-col :span="24">
+                <a-button>
+                    <p>54353</p>
+                    <p>买入</p>
+                </a-button>
+                <a-button>
+                    <p>54353</p>
+                    <p>卖出</p>
+                </a-button>
+                <a-button>
+                    <p>先开先平</p>
+                    <p>平仓</p>
+                </a-button>
+            </a-col>
+        </a-row>
+        <a-row class="btns">
+            <a-col :span="24">
+                <div><span>可买&lt;=</span><span>0</span></div>
+                <div><span>可买&lt;=</span><span>0</span></div>
+            </a-col>
+        </a-row>
+    </div>
+    <div class="right">
+
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+    name: 'warehouse-trade-fixed-price',
+    components: {},
+    setup() {
+        const form = {
+            type: '1'
+        };
+        const price = '';
+        return {
+            form,
+            price
+        };
+    },
+});
+</script>
+
+<style lang="less" scoped>
+.trade {
+    width: 100%;
+    height: 100%;
+    .inlineflex;
+    overflow: auto;
+    .left {
+        flex: 1;
+        height: 100%;
+        padding-left: 18px;
+        padding-right: 9px;
+        .ant-row {
+            margin-bottom: 10px;
+            font-size: 14px;
+            height: 30px;
+            line-height: 30px;
+            color: @m-grey1;
+            .ant-col.label {
+                width: 50px;
+            }
+            .ant-col:last-child {
+                color: @m-white1;
+            }
+        }
+        .ant-row:first-child {
+            margin-top: 21px;
+        }
+        .btns {
+            
+        }
+    }
+    .right {
+        width: 126px;
+        height: 100%;
+    }
+}
+</style>;