挂单和提货界面编写

src/assets/styles/mixin.less

@@ -638,6 +638,9 @@
                 padding-left: 0;
             }
         }
+        .ant-form-item-control-wrapper {
+            width: calc(100% - 70px);
+        }
     }
 }
 .ant-select-single {
@@ -1702,6 +1705,7 @@ input:-internal-autofill-selected {
         }
         .numBlock {
             display: inline-flex;
+            white-space: nowrap;
             .first {
                 font-size: 14px;
             }
@@ -1859,7 +1863,7 @@ input:-internal-autofill-selected {
         width: 140px;
         // height: 3px;
         // .rounded-corners(2px);
-        margin-left: 80px;
+        margin-left: 70px;
         .ant-progress-outer {
             margin-right: 0;
             padding-right: 0;

src/assets/styles/variables.less

@@ -68,6 +68,7 @@
 @m-blue11: #1271BA;
 @m-blue12: #1556B5;
 @m-blue13: #193778;
+@m-blue14: #1D2F3F;
 @body-bg: #e9eef3;
 @m-white0: #ffffff;
 @m-white0-hover: rgba(@m-white0, .8);

src/common/components/drawer/index.vue

@@ -1,23 +1,27 @@
 <template>
-  <div class="drawer">
-    <a-drawer :placement="placement"
-              :closable="false"
-              :visible="visible"
-              class="bottomListed">
-      <!-- 摘牌是top  挂牌是bottom 期货交易是tradeDialog -->
-      <div class="collapse"
-           @click="cancel"></div>
-      <div class="collapseCont">
-        <div class="title">{{ title }}</div>
-        <div class="content highContent">
-          <!-- <Listed></Listed> -->
-          <!-- <Delisting></Delisting> -->
-          <slot></slot>
-          <!-- <Trade></Trade> -->
-        </div>
-      </div>
-    </a-drawer>
-  </div>
+    <div class="drawer">
+        <a-drawer
+            :placement="placement"
+            :closable="false"
+            :visible="visible"
+            class="bottomListed"
+            height="406px"
+        >
+            <!-- 摘牌是top  挂牌是bottom 期货交易是tradeDialog -->
+            <div class="collapse" @click="cancel">
+                <DoubleRightOutlined />
+            </div>
+            <div class="collapseCont">
+                <div class="title">{{ title }}</div>
+                <div class="content highContent">
+                    <!-- <Listed></Listed> -->
+                    <!-- <Delisting></Delisting> -->
+                    <slot></slot>
+                    <!-- <Trade></Trade> -->
+                </div>
+            </div>
+        </a-drawer>
+    </div>
 </template>
 
 <script lang="ts">
@@ -27,6 +31,7 @@ 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';
 import { _closeModal } from '@/common/setup/modal/modal';
+import { DoubleRightOutlined } from '@ant-design/icons-vue';
 
 interface Key {
     [propName: string]: string;
@@ -54,6 +59,7 @@ export default defineComponent({
         Listed,
         Delisting,
         Trade,
+        DoubleRightOutlined,
     },
     setup(props, context) {
         const { visible, cancel } = _closeModal(context);
@@ -67,16 +73,6 @@ export default defineComponent({
 </script>
 
 <style lang="less">
-.bottomListed {
-    .position(fixed, auto, 0, 0, auto);
-    width: 526px;
-    height: 366px !important;
-    background: transparent;
-    z-index: 10;
-    .ant-drawer-content-wrapper {
-        width: 526px !important;
-    }
-}
 .bottom {
     .position(fixed, auto, 0, -2px, auto);
     width: 586px;
@@ -107,6 +103,19 @@ export default defineComponent({
         width: 467px !important;
     }
 }
+.collapse {
+    width: 52px;
+    height: 38px;
+    cursor: pointer;
+    .position(absolute, 0, auto, auto, 0);
+    z-index: 11;
+    text-align: center;
+    line-height: 38px;
+    .anticon {
+        color: @m-blue10;
+        font-weight: bold;
+    }
+}
 .ant-drawer.ant-drawer-open {
     .ant-drawer-mask {
         background: transparent;
@@ -122,36 +131,34 @@ export default defineComponent({
                     height: 100%;
                     padding: 0;
                     .inlineflex;
-                    .collapse {
-                        width: 26px;
-                        height: 66px;
-                        margin-top: 15px;
-                        background: url(../../../assets/images/dialogClose.png) center center no-repeat;
-                        background-size: cover;
-                    }
+
                     .collapseCont {
                         flex: 1;
                         height: 100%;
-                        border: 2px solid @m-blue0;
-                        border-right: 0;
+                        // border: 8px solid @m-blue5;
+                        // border-right: 0;
                         .flex;
                         flex-direction: column;
                         .title {
                             width: 100%;
-                            height: 36px;
-                            line-height: 36px;
+                            height: 38px;
+                            line-height: 38px;
                             text-align: center;
                             background: linear-gradient(0deg, @m-blue4, @m-blue5);
                             font-size: 16px;
                             color: @m-white1;
-                            border-bottom: 2px solid @m-blue0;
+                            // border-bottom: 2px solid @m-blue0;
+                            .rounded-corners(5px, 5px, 0, 0);
                         }
                         .content {
                             flex: 1;
                             width: 100%;
                             max-height: calc(100% - 36px);
                             overflow-y: auto;
+                            overflow-x: hidden;
                             background: @m-grey11;
+                            border: 8px solid @m-blue5;
+                            border-top: 0;
                         }
                         .highContent {
                             max-height: 100%;
@@ -165,5 +172,14 @@ export default defineComponent({
 .ant-form.inlineForm .ant-row.ant-form-item .ant-form-item-label label {
     width: 90px;
 }
-</style
->;
+.ant-drawer.ant-drawer-bottom.ant-drawer-open.bottomListed {
+    .position(fixed, auto, 0, 0, auto);
+    width: 566px;
+    height: 406px !important;
+    background: transparent;
+    z-index: 10;
+    .ant-drawer-content-wrapper {
+        width: 566px !important;
+    }
+}
+</style>

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

@@ -1,11 +1,9 @@
 <template>
-  <!-- 摘牌 -->
-  <Drawer :title="'摘牌'"
-          :placement="'top'"
-          :visible="visible">
-    <!-- 挂牌 -->
-    摘牌
-  </Drawer>
+    <!-- 摘牌 -->
+    <Drawer :title="'摘牌'" :placement="'top'" :visible="visible">
+        <!-- 挂牌 -->
+        摘牌
+    </Drawer>
 </template>
 
 <script lang="ts">
@@ -52,14 +50,15 @@ export default defineComponent({
     .condition {
         width: 100%;
         height: 48px;
-        padding: 10px 16px;
+        margin: 0 16px;
+        padding: 10px 0;
         border-bottom: 1px solid @m-black6;
         .inlineflex;
         .conditionBtn {
             align-self: center;
             align-items: center;
             border: 0;
-            width: 80px;
+            min-width: 80px;
             height: 28px;
             line-height: 28px;
             background: @m-black7;
@@ -86,7 +85,7 @@ export default defineComponent({
     width: 140px;
     // height: 3px;
     // .rounded-corners(2px);
-    margin-left: 80px;
+    margin-left: 70px;
     .ant-progress-outer {
         margin-right: 0;
         padding-right: 0;

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

@@ -1,11 +1,9 @@
 <template>
-  <!-- 详情 -->
-  <Drawer :title="'详情'"
-          :placement="'top'"
-          :visible="visible">
-    <!-- 挂牌 -->
-    详情
-  </Drawer>
+    <!-- 详情 -->
+    <Drawer :title="'详情'" :placement="'top'" :visible="visible">
+        <!-- 挂牌 -->
+        详情
+    </Drawer>
 </template>
 
 <script lang="ts">
@@ -52,14 +50,15 @@ export default defineComponent({
     .condition {
         width: 100%;
         height: 48px;
-        padding: 10px 16px;
+        margin: 0 16px;
+        padding: 10px 0;
         border-bottom: 1px solid @m-black6;
         .inlineflex;
         .conditionBtn {
             align-self: center;
             align-items: center;
             border: 0;
-            width: 80px;
+            min-width: 80px;
             height: 28px;
             line-height: 28px;
             background: @m-black7;
@@ -86,7 +85,7 @@ export default defineComponent({
     width: 140px;
     // height: 3px;
     // .rounded-corners(2px);
-    margin-left: 80px;
+    margin-left: 70px;
     .ant-progress-outer {
         margin-right: 0;
         padding-right: 0;

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

@@ -1,77 +1,93 @@
 <template>
     <!-- 挂牌 -->
-  <div class="delisting">
-    <div class="condition">
-        <a-button class="conditionBtn">螺纹钢</a-button>
-        <a-button class="conditionBtn">12</a-button>
-        <a-button class="conditionBtn">江铜</a-button>
-        <a-button class="conditionBtn">华南仓库</a-button>
+    <div class="listed">
+        <div class="condition">
+            <a-button class="conditionBtn">螺纹钢</a-button>
+            <a-button class="conditionBtn">12mm-江铜</a-button>
+            <!-- <a-button class="conditionBtn">江铜</a-button> -->
+            <a-button class="conditionBtn">华南仓库</a-button>
+        </div>
+        <div class="formBar">
+            <a-form class="inlineForm dialogForm" :form="form" @submit="handleSearch">
+                <a-row :gutter="24">
+                    <a-col :span="12">
+                        <a-form-item label="挂牌方式">
+                            <a-select
+                                class="inlineFormSelect"
+                                default-value="1"
+                                style="width: 140px"
+                            >
+                                <a-select-option value="1">一口价</a-select-option>
+                                <a-select-option value="2">一口价2</a-select-option>
+                            </a-select>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item label="挂牌价">
+                            <a-input class="commonInput" style="width: 140px" />
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+                <a-row :gutter="24">
+                    <a-col :span="12">
+                        <a-form-item label="挂牌数量">
+                            <a-input class="commonInput" suffix="吨" style="width: 140px" />
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item label="起摘数量" class="relative">
+                            <a-input class="commonInput" suffix="吨" style="width: 140px" />
+                            <div class="tip">最小单位：1吨</div>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+                <a-row :gutter="24">
+                    <a-col :span="12" class="mt-20">
+                        <a-form-item>
+                            <a-progress class="formProgress" :percent="30" />
+                            <div class="unit">
+                                <span>0</span>
+                                <span>300吨</span>
+                            </div>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">&nbsp;</a-col>
+                </a-row>
+                <a-row :gutter="24">
+                    <a-col :span="24">
+                        <a-form-item label="行情商品">
+                            <a-select
+                                class="inlineFormSelect"
+                                style="width: 135px"
+                                placeholder="请选择交易所"
+                            >
+                                <!-- <a-select-option value="1">一口价</a-select-option>
+                                <a-select-option value="2">一口价2</a-select-option>-->
+                            </a-select>
+                            <a-select
+                                class="inlineFormSelect ml5"
+                                style="width: 135px"
+                                placeholder="请选择商品"
+                            ></a-select>
+                            <a-select
+                                class="inlineFormSelect ml5"
+                                style="width: 135px"
+                                placeholder="请选择合约"
+                            ></a-select>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+                <a-row :gutter="24" type="flex" justify="center">
+                    <a-col :span="24">
+                        <a-form-item class="tc">
+                            <a-button class="listedBtn">卖出</a-button>
+                            <a-button class="ml10 cancelBtn">取消</a-button>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </div>
     </div>
-    <div class="formBar">
-        <a-form class="inlineForm" :form="form" @submit="handleSearch">
-            <a-row :gutter="24">
-                <a-col
-                :span="12"
-                >
-                    <a-form-item label="挂牌方式">
-                        <a-select class="inlineFormSelect"  default-value="1" style="width: 140px">
-                            <a-select-option value="1">
-                                一口价
-                            </a-select-option>
-                            <a-select-option value="2">
-                                一口价2
-                            </a-select-option>
-                        </a-select>
-                    </a-form-item>
-                </a-col>
-                <a-col
-                :span="12"
-                >
-                    <a-form-item label="挂牌价">
-                        <a-input class="commonInput" style="width: 140px"/>
-                    </a-form-item>
-                </a-col>
-            </a-row>
-            <a-row :gutter="24">
-                <a-col
-                :span="12"
-                >
-                    <a-form-item label="挂牌数量">
-                        <a-input class="commonInput" suffix="吨" style="width: 140px"/>
-                    </a-form-item>
-                </a-col>
-                <a-col
-                :span="12"
-                >
-                    <a-form-item label="起摘数量" class="relative">
-                        <a-input class="commonInput" suffix="吨" style="width: 140px" />
-                        <div class="tip">最小单位：1吨</div>
-                    </a-form-item>
-                </a-col>
-            </a-row>
-            <a-row :gutter="24">
-                <a-col
-                :span="24"
-                >
-                    <a-form-item>
-                        <a-progress class="formProgress" :percent="30" />
-                        <div class="unit"><span>0</span><span>300吨</span></div>
-                    </a-form-item>
-                </a-col>
-            </a-row>
-            <a-row :gutter="24"  type="flex" justify="center">
-                <a-col
-                :span="24"
-                >
-                    <a-form-item class="tc">
-                        <a-button class="listedBtn">挂牌</a-button>
-                        <a-button class="ml10 cancelBtn">取消</a-button>
-                    </a-form-item>
-                </a-col>
-            </a-row>
-        </a-form>
-    </div>
-  </div>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
@@ -81,7 +97,7 @@ export default defineComponent({
     components: {},
     setup() {
         const form = {
-            type: '1'
+            type: '1',
         };
         return {
             form,
@@ -91,34 +107,37 @@ export default defineComponent({
 </script>
 
 <style lang="less" scoped>
-.delisting {
+// 浮动价挂牌
+.listed {
     width: 100%;
     height: 100%;
     .flex;
     flex-direction: column;
+
     .condition {
-        width: 100%;
+        width: calc(100% - 32px);
         height: 48px;
-        padding: 10px 16px;
+        margin: 0 16px;
+        padding: 10px 0;
         border-bottom: 1px solid @m-black6;
         .inlineflex;
         .conditionBtn {
             align-self: center;
             align-items: center;
             border: 0;
-            width: 80px;
+            min-width: 80px;
             height: 28px;
             line-height: 28px;
             background: @m-black7;
-           .rounded-corners(3px);
-           font-size: 14px;
-           color: @m-blue0;
-           &:hover {
-               background: rgba(@m-black7, .8);
-               color: rgba(@m-blue0, .8);
-           }
+            .rounded-corners(3px);
+            font-size: 14px;
+            color: @m-blue0;
+            &:hover {
+                background: rgba(@m-black7, 0.8);
+                color: rgba(@m-blue0, 0.8);
+            }
         }
-        .conditionBtn+.conditionBtn {
+        .conditionBtn + .conditionBtn {
             margin-left: 10px;
         }
     }
@@ -128,78 +147,14 @@ export default defineComponent({
         padding: 28px 16px 7px;
     }
 }
-::v-deep.ant-form.inlineForm {
-    .ant-row.ant-form-item {
-        margin-bottom: 21px;
-        .ant-form-item-label {
-            width: 80px;
-            line-height: 30px;
-            text-align: left;
-            label {
-                color: @m-grey1;
-                &::after {
-                    content: ''
-                }
-            }
-        }
-        .ant-form-item-control-wrapper {
-            .ant-form-item-control {
-                line-height: 30px;
-            }
-
-        }
-    }
-    .relative.ant-form-item {
-        position: relative;
-        .tip {
-            position: absolute;
-            font-size: 14px;
-            color: @m-grey1;
-        }
-    }
-    .tc.ant-form-item {
-        .ant-form-item-control-wrapper {
-            margin: 0 auto;
-        }
-    }
-}
-::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;
-    .ant-select-dropdown-content {
-        .rc-virtual-list {
-            .rc-virtual-list-holder {
-                .rc-virtual-list-holder-inner {
-                    .ant-select-item {
-
-                    }
-                    .ant-select-item-option-selected {
-
-                    }
-                }
-            }
-        }
-    }
+.mt-20 {
+    margin-top: -20px;
 }
-::v-deep.formProgress {
+.formProgress {
     width: 140px;
     // height: 3px;
     // .rounded-corners(2px);
-    margin-left: 80px;
+    margin-left: 70px;
     .ant-progress-outer {
         margin-right: 0;
         padding-right: 0;
@@ -218,7 +173,8 @@ export default defineComponent({
     }
 }
 .unit {
-    margin-left: 80px;
+    margin-left: 70px;
+    width: 140px;
     .flex;
     justify-content: space-between;
     font-size: 14px;
@@ -226,7 +182,6 @@ export default defineComponent({
     height: 14px;
     line-height: 14px;
 }
-
 .listedBtn {
     width: 120px;
     height: 30px;
@@ -238,18 +193,21 @@ export default defineComponent({
     text-align: center;
     border: 0;
     &:hover {
-        background:  linear-gradient(0deg, @m-blue0-hover 0%, @m-blue2-hover 100%);
+        background: linear-gradient(0deg, @m-blue0-hover 0%, @m-blue2-hover 100%);
         color: @m-white0-hover;
     }
 }
 .cancelBtn:extend(.listedBtn) {
     background: linear-gradient(0deg, @m-grey12 0%, @m-grey13 100%);
     &:hover {
-        background:  linear-gradient(0deg, @m-grey12-hover 0%, @m-grey13-hover 100%);
+        background: linear-gradient(0deg, @m-grey12-hover 0%, @m-grey13-hover 100%);
         color: @m-white0-hover;
     }
 }
 .ml10 {
     margin-left: 10px;
 }
+.ml5 {
+    margin-left: 5px;
+}
 </style>;

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

@@ -3,12 +3,12 @@
     <div class="listed">
         <div class="condition">
             <a-button class="conditionBtn">螺纹钢</a-button>
-            <a-button class="conditionBtn">12</a-button>
-            <a-button class="conditionBtn">江铜</a-button>
+            <a-button class="conditionBtn">12mm-江铜</a-button>
+            <!-- <a-button class="conditionBtn">江铜</a-button> -->
             <a-button class="conditionBtn">华南仓库</a-button>
         </div>
         <div class="formBar">
-            <a-form class="inlineForm" :form="form" @submit="handleSearch">
+            <a-form class="inlineForm dialogForm" :form="form" @submit="handleSearch">
                 <a-row :gutter="24">
                     <a-col :span="12">
                         <a-form-item label="挂牌方式">
@@ -42,7 +42,7 @@
                     </a-col>
                 </a-row>
                 <a-row :gutter="24">
-                    <a-col :span="24">
+                    <a-col :span="12" class="mt-20">
                         <a-form-item>
                             <a-progress class="formProgress" :percent="30" />
                             <div class="unit">
@@ -51,11 +51,36 @@
                             </div>
                         </a-form-item>
                     </a-col>
+                    <a-col :span="12">&nbsp;</a-col>
+                </a-row>
+                <a-row :gutter="24">
+                    <a-col :span="24">
+                        <a-form-item label="行情商品">
+                            <a-select
+                                class="inlineFormSelect"
+                                style="width: 135px"
+                                placeholder="请选择交易所"
+                            >
+                                <!-- <a-select-option value="1">一口价</a-select-option>
+                                <a-select-option value="2">一口价2</a-select-option>-->
+                            </a-select>
+                            <a-select
+                                class="inlineFormSelect ml5"
+                                style="width: 135px"
+                                placeholder="请选择商品"
+                            ></a-select>
+                            <a-select
+                                class="inlineFormSelect ml5"
+                                style="width: 135px"
+                                placeholder="请选择合约"
+                            ></a-select>
+                        </a-form-item>
+                    </a-col>
                 </a-row>
                 <a-row :gutter="24" type="flex" justify="center">
                     <a-col :span="24">
                         <a-form-item class="tc">
-                            <a-button class="listedBtn">挂牌</a-button>
+                            <a-button class="listedBtn">卖出</a-button>
                             <a-button class="ml10 cancelBtn">取消</a-button>
                         </a-form-item>
                     </a-col>
@@ -81,7 +106,8 @@ export default defineComponent({
 });
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
+// 浮动价挂牌
 .listed {
     width: 100%;
     height: 100%;
@@ -89,16 +115,17 @@ export default defineComponent({
     flex-direction: column;
 
     .condition {
-        width: 100%;
+        width: calc(100% - 32px);
         height: 48px;
-        padding: 10px 16px;
+        margin: 0 16px;
+        padding: 10px 0;
         border-bottom: 1px solid @m-black6;
         .inlineflex;
         .conditionBtn {
             align-self: center;
             align-items: center;
             border: 0;
-            width: 80px;
+            min-width: 80px;
             height: 28px;
             line-height: 28px;
             background: @m-black7;
@@ -120,12 +147,14 @@ export default defineComponent({
         padding: 28px 16px 7px;
     }
 }
-
-::v-deep.formProgress {
+.mt-20 {
+    margin-top: -20px;
+}
+.formProgress {
     width: 140px;
     // height: 3px;
     // .rounded-corners(2px);
-    margin-left: 80px;
+    margin-left: 70px;
     .ant-progress-outer {
         margin-right: 0;
         padding-right: 0;
@@ -144,7 +173,8 @@ export default defineComponent({
     }
 }
 .unit {
-    margin-left: 80px;
+    margin-left: 70px;
+    width: 140px;
     .flex;
     justify-content: space-between;
     font-size: 14px;
@@ -177,4 +207,7 @@ export default defineComponent({
 .ml10 {
     margin-left: 10px;
 }
+.ml5 {
+    margin-left: 5px;
+}
 </style>;

src/views/order/spot_warran/components/spot_warrant_inventory_summary/components/listing.vue

@@ -1,12 +1,11 @@
 <template>
-    <!-- 挂单 -->
+    <!-- 挂牌 -->
     <Drawer :title="'挂牌'" :placement="'bottom'" :visible="visible">
-        <!-- 挂牌 -->
         <div class="listed">
             <div class="condition">
                 <a-button class="conditionBtn">螺纹钢</a-button>
-                <a-button class="conditionBtn">12</a-button>
-                <a-button class="conditionBtn">江铜</a-button>
+                <a-button class="conditionBtn">12mm-江铜</a-button>
+                <!-- <a-button class="conditionBtn">江铜</a-button> -->
                 <a-button class="conditionBtn">华南仓库</a-button>
             </div>
             <div class="formBar">
@@ -44,7 +43,7 @@
                         </a-col>
                     </a-row>
                     <a-row :gutter="24">
-                        <a-col :span="24">
+                        <a-col :span="12" class="mt-20">
                             <a-form-item>
                                 <a-progress class="formProgress" :percent="30" />
                                 <div class="unit">
@@ -53,38 +52,36 @@
                                 </div>
                             </a-form-item>
                         </a-col>
+                        <a-col :span="12">&nbsp;</a-col>
                     </a-row>
                     <a-row :gutter="24">
                         <a-col :span="24">
                             <a-form-item label="行情商品">
                                 <a-select
                                     class="inlineFormSelect"
-                                    default-value="1"
-                                    style="width: 140px"
+                                    style="width: 135px"
+                                    placeholder="请选择交易所"
                                 >
-                                    <a-select-option value="1">请选择交易所</a-select-option>
+                                    <!-- <a-select-option value="1">一口价</a-select-option>
+                                    <a-select-option value="2">一口价2</a-select-option>-->
                                 </a-select>
                                 <a-select
                                     class="inlineFormSelect ml5"
-                                    default-value="1"
-                                    style="width: 140px"
-                                >
-                                    <a-select-option value="1">请选择交易所</a-select-option>
-                                </a-select>
+                                    style="width: 135px"
+                                    placeholder="请选择商品"
+                                ></a-select>
                                 <a-select
                                     class="inlineFormSelect ml5"
-                                    default-value="1"
-                                    style="width: 140px"
-                                >
-                                    <a-select-option value="1">请选择交易所</a-select-option>
-                                </a-select>
+                                    style="width: 135px"
+                                    placeholder="请选择合约"
+                                ></a-select>
                             </a-form-item>
                         </a-col>
                     </a-row>
                     <a-row :gutter="24" type="flex" justify="center">
                         <a-col :span="24">
                             <a-form-item class="tc">
-                                <a-button class="listedBtn">挂牌</a-button>
+                                <a-button class="listedBtn">卖出</a-button>
                                 <a-button class="ml10 cancelBtn">取消</a-button>
                             </a-form-item>
                         </a-col>
@@ -116,17 +113,19 @@ export default defineComponent({
     height: 100%;
     .flex;
     flex-direction: column;
+
     .condition {
-        width: 100%;
+        width: calc(100% - 32px);
         height: 48px;
-        padding: 10px 16px;
+        margin: 0 16px;
+        padding: 10px 0;
         border-bottom: 1px solid @m-black6;
         .inlineflex;
         .conditionBtn {
             align-self: center;
             align-items: center;
             border: 0;
-            width: 80px;
+            min-width: 80px;
             height: 28px;
             line-height: 28px;
             background: @m-black7;
@@ -148,12 +147,14 @@ export default defineComponent({
         padding: 28px 16px 7px;
     }
 }
-
-::v-deep.formProgress {
+.mt-20 {
+    margin-top: -20px;
+}
+.formProgress {
     width: 140px;
     // height: 3px;
     // .rounded-corners(2px);
-    margin-left: 80px;
+    margin-left: 70px;
     .ant-progress-outer {
         margin-right: 0;
         padding-right: 0;
@@ -172,7 +173,8 @@ export default defineComponent({
     }
 }
 .unit {
-    margin-left: 80px;
+    margin-left: 70px;
+    width: 140px;
     .flex;
     justify-content: space-between;
     font-size: 14px;
@@ -205,4 +207,7 @@ export default defineComponent({
 .ml10 {
     margin-left: 10px;
 }
+.ml5 {
+    margin-left: 5px;
+}
 </style>;

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

@@ -1,90 +1,102 @@
 <template>
-  <!-- 挂单 -->
-  <Drawer :title="'挂牌'"
-          :placement="'bottom'"
-          :visible="visible">
-    <!-- 挂牌 -->
-    <div class="listed">
-      <div class="condition">
-        <a-button class="conditionBtn">螺纹钢</a-button>
-        <a-button class="conditionBtn">12</a-button>
-        <a-button class="conditionBtn">江铜</a-button>
-        <a-button class="conditionBtn">华南仓库</a-button>
-      </div>
-      <div class="formBar">
-        <a-form class="inlineForm"
-                :form="form"
-                @submit="handleSearch">
-          <a-row :gutter="24">
-            <a-col :span="12">
-              <a-form-item label="挂牌方式">
-                <a-select class="inlineFormSelect"
-                          default-value="1"
-                          style="width: 140px">
-                  <a-select-option value="1">
-                    一口价
-                  </a-select-option>
-                  <a-select-option value="2">
-                    一口价2
-                  </a-select-option>
-                </a-select>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item label="挂牌价">
-                <a-input class="commonInput"
-                         style="width: 140px" />
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="12">
-              <a-form-item label="挂牌数量">
-                <a-input class="commonInput"
-                         suffix="吨"
-                         style="width: 140px" />
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item label="起摘数量"
-                           class="relative">
-                <a-input class="commonInput"
-                         suffix="吨"
-                         style="width: 140px" />
-                <div class="tip">最小单位：1吨</div>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="24">
-              <a-form-item>
-                <a-progress class="formProgress"
-                            :percent="30" />
-                <div class="unit"><span>0</span><span>300吨</span></div>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24"
-                 type="flex"
-                 justify="center">
-            <a-col :span="24">
-              <a-form-item class="tc">
-                <a-button class="listedBtn">挂牌</a-button>
-                <a-button class="ml10 cancelBtn">取消</a-button>
-              </a-form-item>
-            </a-col>
-          </a-row>
-        </a-form>
-      </div>
-    </div>
-  </Drawer>
+    <!-- 挂单 -->
+    <Drawer :title="'挂牌'" :placement="'bottom'" :visible="visible">
+        <div class="listed">
+            <div class="condition">
+                <a-button class="conditionBtn">螺纹钢</a-button>
+                <a-button class="conditionBtn">12mm-江铜</a-button>
+                <!-- <a-button class="conditionBtn">江铜</a-button> -->
+                <a-button class="conditionBtn">华南仓库</a-button>
+            </div>
+            <div class="formBar">
+                <a-form class="inlineForm dialogForm" :form="form" @submit="handleSearch">
+                    <a-row :gutter="24">
+                        <a-col :span="12">
+                            <a-form-item label="挂牌方式">
+                                <a-select
+                                    class="inlineFormSelect"
+                                    default-value="1"
+                                    style="width: 140px"
+                                >
+                                    <a-select-option value="1">一口价</a-select-option>
+                                    <a-select-option value="2">一口价2</a-select-option>
+                                </a-select>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">
+                            <a-form-item label="挂牌价">
+                                <a-input class="commonInput" style="width: 140px" />
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24">
+                        <a-col :span="12">
+                            <a-form-item label="挂牌数量">
+                                <a-input class="commonInput" suffix="吨" style="width: 140px" />
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">
+                            <a-form-item label="起摘数量" class="relative">
+                                <a-input class="commonInput" suffix="吨" style="width: 140px" />
+                                <div class="tip">最小单位：1吨</div>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24">
+                        <a-col :span="12" class="mt-20">
+                            <a-form-item>
+                                <a-progress class="formProgress" :percent="30" />
+                                <div class="unit">
+                                    <span>0</span>
+                                    <span>300吨</span>
+                                </div>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">&nbsp;</a-col>
+                    </a-row>
+                    <a-row :gutter="24">
+                        <a-col :span="24">
+                            <a-form-item label="行情商品">
+                                <a-select
+                                    class="inlineFormSelect"
+                                    style="width: 135px"
+                                    placeholder="请择交易所"
+                                >
+                                    <!-- <a-select-option value="1">一口价</a-select-option>
+                                    <a-select-option value="2">一口价2</a-select-option>-->
+                                </a-select>
+                                <a-select
+                                    class="inlineFormSelect ml5"
+                                    style="width: 135px"
+                                    placeholder="请选择商品"
+                                ></a-select>
+                                <a-select
+                                    class="inlineFormSelect ml5"
+                                    style="width: 135px"
+                                    placeholder="请选择合约"
+                                ></a-select>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24" type="flex" justify="center">
+                        <a-col :span="24">
+                            <a-form-item class="tc">
+                                <a-button class="listedBtn">卖出</a-button>
+                                <a-button class="ml10 cancelBtn">取消</a-button>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                </a-form>
+            </div>
+        </div>
+    </Drawer>
 </template>
 
 <script lang="ts">
 import { defineComponent, PropType, ref } from 'vue';
 import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
 import Drawer from '@/common/components/drawer/index.vue';
-import {QueryWrPositionReq, WrHoldLB, WrPosition} from '@/services/go/wrtrade/interface';
+import { QueryWrPositionReq, WrHoldLB, WrPosition } from '@/services/go/wrtrade/interface';
 import { getUserId } from '@/services/bus/account';
 import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
 import { hdWROrder } from '@/services/proto/warehousetrade';
@@ -103,7 +115,7 @@ export default defineComponent({
     setup(props) {
         const data = props.selectedRow;
         const loading = ref<boolean>(false);
-        debugger
+        debugger;
         const param = {
             AccountID: data.accountid.toString(),
             ClientSerialNo: uuidv4(), // 客户端流水号
@@ -146,7 +158,7 @@ export default defineComponent({
         };
         console.log(param);
 
-        console.log(props.selectedRow)
+        console.log(props.selectedRow);
         requestResultLoadingAndInfo(hdWROrder, param, loading, ['挂牌成功', '挂牌失败:']).then(() => {
             // cancel(true);
         });
@@ -163,17 +175,19 @@ export default defineComponent({
     height: 100%;
     .flex;
     flex-direction: column;
+
     .condition {
-        width: 100%;
+        width: calc(100% - 32px);
         height: 48px;
-        padding: 10px 16px;
+        margin: 0 16px;
+        padding: 10px 0;
         border-bottom: 1px solid @m-black6;
         .inlineflex;
         .conditionBtn {
             align-self: center;
             align-items: center;
             border: 0;
-            width: 80px;
+            min-width: 80px;
             height: 28px;
             line-height: 28px;
             background: @m-black7;
@@ -195,12 +209,14 @@ export default defineComponent({
         padding: 28px 16px 7px;
     }
 }
-
-::v-deep.formProgress {
+.mt-20 {
+    margin-top: -20px;
+}
+.formProgress {
     width: 140px;
     // height: 3px;
     // .rounded-corners(2px);
-    margin-left: 80px;
+    margin-left: 70px;
     .ant-progress-outer {
         margin-right: 0;
         padding-right: 0;
@@ -219,7 +235,8 @@ export default defineComponent({
     }
 }
 .unit {
-    margin-left: 80px;
+    margin-left: 70px;
+    width: 140px;
     .flex;
     justify-content: space-between;
     font-size: 14px;
@@ -252,4 +269,7 @@ export default defineComponent({
 .ml10 {
     margin-left: 10px;
 }
+.ml5 {
+    margin-left: 5px;
+}
 </style>;

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

@@ -1,90 +1,102 @@
 <template>
-  <!-- 现货仓单 现货明细 挂牌 -->
-  <Drawer :title="'挂牌'"
-          :placement="'bottom'"
-          :visible="visible">
-    <!-- 挂牌 -->
-    <div class="listed">
-      <div class="condition">
-        <a-button class="conditionBtn">螺纹钢</a-button>
-        <a-button class="conditionBtn">12</a-button>
-        <a-button class="conditionBtn">江铜</a-button>
-        <a-button class="conditionBtn">华南仓库</a-button>
-      </div>
-      <div class="formBar">
-        <a-form class="inlineForm"
-                :form="form"
-                @submit="handleSearch">
-          <a-row :gutter="24">
-            <a-col :span="12">
-              <a-form-item label="挂牌方式">
-                <a-select class="inlineFormSelect"
-                          default-value="1"
-                          style="width: 140px">
-                  <a-select-option value="1">
-                    一口价
-                  </a-select-option>
-                  <a-select-option value="2">
-                    一口价2
-                  </a-select-option>
-                </a-select>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item label="挂牌价">
-                <a-input class="commonInput"
-                         style="width: 140px" />
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="12">
-              <a-form-item label="挂牌数量">
-                <a-input class="commonInput"
-                         suffix="吨"
-                         style="width: 140px" />
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item label="起摘数量"
-                           class="relative">
-                <a-input class="commonInput"
-                         suffix="吨"
-                         style="width: 140px" />
-                <div class="tip">最小单位：1吨</div>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="24">
-              <a-form-item>
-                <a-progress class="formProgress"
-                            :percent="30" />
-                <div class="unit"><span>0</span><span>300吨</span></div>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24"
-                 type="flex"
-                 justify="center">
-            <a-col :span="24">
-              <a-form-item class="tc">
-                <a-button class="listedBtn">挂牌</a-button>
-                <a-button class="ml10 cancelBtn">取消</a-button>
-              </a-form-item>
-            </a-col>
-          </a-row>
-        </a-form>
-      </div>
-    </div>
-  </Drawer>
+    <!-- 现货仓单 现货明细 挂牌 -->
+    <Drawer :title="'挂牌'" :placement="'bottom'" :visible="visible">
+        <div class="listed">
+            <div class="condition">
+                <a-button class="conditionBtn">螺纹钢</a-button>
+                <a-button class="conditionBtn">12mm-江铜</a-button>
+                <!-- <a-button class="conditionBtn">江铜</a-button> -->
+                <a-button class="conditionBtn">华南仓库</a-button>
+            </div>
+            <div class="formBar">
+                <a-form class="inlineForm dialogForm" :form="form" @submit="handleSearch">
+                    <a-row :gutter="24">
+                        <a-col :span="12">
+                            <a-form-item label="挂牌方式">
+                                <a-select
+                                    class="inlineFormSelect"
+                                    default-value="1"
+                                    style="width: 140px"
+                                >
+                                    <a-select-option value="1">一口价</a-select-option>
+                                    <a-select-option value="2">一口价2</a-select-option>
+                                </a-select>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">
+                            <a-form-item label="挂牌价">
+                                <a-input class="commonInput" style="width: 140px" />
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24">
+                        <a-col :span="12">
+                            <a-form-item label="挂牌数量">
+                                <a-input class="commonInput" suffix="吨" style="width: 140px" />
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">
+                            <a-form-item label="起摘数量" class="relative">
+                                <a-input class="commonInput" suffix="吨" style="width: 140px" />
+                                <div class="tip">最小单位：1吨</div>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24">
+                        <a-col :span="12" class="mt-20">
+                            <a-form-item>
+                                <a-progress class="formProgress" :percent="30" />
+                                <div class="unit">
+                                    <span>0</span>
+                                    <span>300吨</span>
+                                </div>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">&nbsp;</a-col>
+                    </a-row>
+                    <a-row :gutter="24">
+                        <a-col :span="24">
+                            <a-form-item label="行情商品">
+                                <a-select
+                                    class="inlineFormSelect"
+                                    style="width: 135px"
+                                    placeholder="请择交易所"
+                                >
+                                    <!-- <a-select-option value="1">一口价</a-select-option>
+                                    <a-select-option value="2">一口价2</a-select-option>-->
+                                </a-select>
+                                <a-select
+                                    class="inlineFormSelect ml5"
+                                    style="width: 135px"
+                                    placeholder="请选择商品"
+                                ></a-select>
+                                <a-select
+                                    class="inlineFormSelect ml5"
+                                    style="width: 135px"
+                                    placeholder="请选择合约"
+                                ></a-select>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24" type="flex" justify="center">
+                        <a-col :span="24">
+                            <a-form-item class="tc">
+                                <a-button class="listedBtn">卖出</a-button>
+                                <a-button class="ml10 cancelBtn">取消</a-button>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                </a-form>
+            </div>
+        </div>
+    </Drawer>
 </template>
 
 <script lang="ts">
 import { defineComponent, PropType, ref } from 'vue';
 import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
 import Drawer from '@/common/components/drawer/index.vue';
-import {QueryWrPositionReq, WrHoldLB, WrPosition} from '@/services/go/wrtrade/interface';
+import { QueryWrPositionReq, WrHoldLB, WrPosition } from '@/services/go/wrtrade/interface';
 import { getUserId } from '@/services/bus/account';
 import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
 import { hdWROrder } from '@/services/proto/warehousetrade';
@@ -104,7 +116,7 @@ export default defineComponent({
     setup(props) {
         const data = props.selectedRow;
         const loading = ref<boolean>(false);
-        debugger
+        debugger;
         const param = {
             AccountID: data.accountid.toString(),
             ClientSerialNo: uuidv4(), // 客户端流水号
@@ -162,17 +174,19 @@ export default defineComponent({
     height: 100%;
     .flex;
     flex-direction: column;
+
     .condition {
-        width: 100%;
+        width: calc(100% - 32px);
         height: 48px;
-        padding: 10px 16px;
+        margin: 0 16px;
+        padding: 10px 0;
         border-bottom: 1px solid @m-black6;
         .inlineflex;
         .conditionBtn {
             align-self: center;
             align-items: center;
             border: 0;
-            width: 80px;
+            min-width: 80px;
             height: 28px;
             line-height: 28px;
             background: @m-black7;
@@ -194,12 +208,14 @@ export default defineComponent({
         padding: 28px 16px 7px;
     }
 }
-
-::v-deep.formProgress {
+.mt-20 {
+    margin-top: -20px;
+}
+.formProgress {
     width: 140px;
     // height: 3px;
     // .rounded-corners(2px);
-    margin-left: 80px;
+    margin-left: 70px;
     .ant-progress-outer {
         margin-right: 0;
         padding-right: 0;
@@ -218,7 +234,8 @@ export default defineComponent({
     }
 }
 .unit {
-    margin-left: 80px;
+    margin-left: 70px;
+    width: 140px;
     .flex;
     justify-content: space-between;
     font-size: 14px;
@@ -251,4 +268,7 @@ export default defineComponent({
 .ml10 {
     margin-left: 10px;
 }
+.ml5 {
+    margin-left: 5px;
+}
 </style>;

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

@@ -1,11 +1,72 @@
 <template>
-  <!-- 现货仓单 现货明细 提货 -->
-  <Drawer :title="'提货'"
-          :placement="'bottom'"
-          :visible="visible">
-    <!-- 挂牌 -->
-    提货
-  </Drawer>
+    <!-- 现货仓单 现货明细 提货 true -->
+    <Drawer :title="'提货'" :placement="'bottom'" :visible="visible">
+        <!-- 挂牌 -->
+        <div class="listed">
+            <div class="condition">
+                <a-button class="conditionBtn">螺纹钢</a-button>
+                <a-button class="conditionBtn">12mm-江铜</a-button>
+                <!-- <a-button class="conditionBtn">江铜</a-button> -->
+                <a-button class="conditionBtn">华南仓库</a-button>
+            </div>
+            <div class="formBar">
+                <a-form class="inlineForm dialogForm" :form="form" @submit="handleSearch">
+                    <a-row :gutter="24">
+                        <a-col :span="12">
+                            <a-form-item label="提货数量">
+                                <a-input class="commonInput" suffix="吨" style="width: 140px" />
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">
+                            <a-form-item label="提货人">
+                                <a-input class="commonInput" style="width: 140px" />
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24">
+                        <a-col :span="12" class="mt-20">
+                            <a-form-item>
+                                <a-progress class="formProgress" :percent="30" />
+                                <div class="unit">
+                                    <span>0</span>
+                                    <span>300吨</span>
+                                </div>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">&nbsp;</a-col>
+                    </a-row>
+                    <a-row :gutter="24">
+                        <a-col :span="12">
+                            <a-form-item label="联系方式">
+                                <a-input class="commonInput" style="width: 140px" />
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">
+                            <a-form-item label="预约日期">
+                                <a-date-picker class="commonDatePicker" style="width: 140px" />
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24">
+                        <a-col :span="12">
+                            <a-form-item label="备注">
+                                <a-input class="commonInput" style="width: 140px" />
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">&nbsp;</a-col>
+                    </a-row>
+                    <a-row :gutter="24" type="flex" justify="center">
+                        <a-col :span="24">
+                            <a-form-item class="tc">
+                                <a-button class="listedBtn">提货</a-button>
+                                <a-button class="ml10 cancelBtn">取消</a-button>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                </a-form>
+            </div>
+        </div>
+    </Drawer>
 </template>
 
 <script lang="ts">
@@ -53,14 +114,15 @@ export default defineComponent({
     .condition {
         width: 100%;
         height: 48px;
-        padding: 10px 16px;
+        margin: 0 16px;
+        padding: 10px 0;
         border-bottom: 1px solid @m-black6;
         .inlineflex;
         .conditionBtn {
             align-self: center;
             align-items: center;
             border: 0;
-            width: 80px;
+            min-width: 80px;
             height: 28px;
             line-height: 28px;
             background: @m-black7;
@@ -87,7 +149,7 @@ export default defineComponent({
     width: 140px;
     // height: 3px;
     // .rounded-corners(2px);
-    margin-left: 80px;
+    margin-left: 70px;
     .ant-progress-outer {
         margin-right: 0;
         padding-right: 0;

src/views/order/spot_warran/components/spot_warrant_spot_summary/components/index.vue

@@ -1,11 +1,15 @@
 <template>
-  <!-- 现货仓单 现货明细 提货 -->
-  <Drawer :title="'提货'"
-          :placement="'bottom'"
-          :visible="visible">
-    <!-- 挂牌 -->
-    提货
-  </Drawer>
+    <!-- 现货仓单 现货明细 提货 -->
+    <Drawer :title="'提货'" :placement="'bottom'" :visible="visible" width="566px" height="406px">
+        <div class="listed">
+            <div class="condition">
+                <a-button class="conditionBtn">螺纹钢</a-button>
+                <a-button class="conditionBtn">12mm-江铜</a-button>
+                <!-- <a-button class="conditionBtn">江铜</a-button> -->
+                <a-button class="conditionBtn">华南仓库</a-button>
+            </div>
+        </div>
+    </Drawer>
 </template>
 
 <script lang="ts">
@@ -60,7 +64,7 @@ export default defineComponent({
             align-self: center;
             align-items: center;
             border: 0;
-            width: 80px;
+            min-width: 80px;
             height: 28px;
             line-height: 28px;
             background: @m-black7;
@@ -87,7 +91,7 @@ export default defineComponent({
     width: 140px;
     // height: 3px;
     // .rounded-corners(2px);
-    margin-left: 80px;
+    margin-left: 70px;
     .ant-progress-outer {
         margin-right: 0;
         padding-right: 0;