部分完成挂牌弹窗

src/assets/styles/variables.less

@@ -24,6 +24,8 @@
 @m-black3: #4D5A64;
 @m-black4: #14181B;
 @m-black5: #121415;
+@m-black6: #1B2F41;
+@m-black7: #15293A;
 @m-blue0: #3a87f7;
 @m-blue1: #4885eb;
 @m-blue2: #3270d2;

src/components/drawer/index.vue

@@ -9,7 +9,7 @@
       <div class="collapseCont">
         <div class="title">{{ title }}</div>
         <div class="content">
-
+            <Listed></Listed>
         </div>
       </div>
     </a-drawer>
@@ -19,6 +19,7 @@
 <script lang="ts">
 import { defineComponent, ref, PropType } from 'vue';
 import { closeModal, ModalName } from '@/setup/controlModal/index';
+import Listed from '@/views/market/warehouseTrade/components/listed/index.vue';
 
 interface Key {
     [propName: string]: string;
@@ -41,7 +42,9 @@ export default defineComponent({
             type: String,
         },
     },
-    components: {},
+    components: {
+        Listed
+    },
     setup(props, context) {
         const { visible, cancel, handleOk } = closeModal(props.modalName);
         return {
@@ -102,7 +105,7 @@ export default defineComponent({
                         .content {
                             flex: 1;
                             width: 100%;
-                            max-height: calc(100% - 40px);
+                            max-height: calc(100% - 36px);
                             overflow-y: auto;
                             background: @m-grey11;
                         }

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

@@ -0,0 +1,195 @@
+<template>
+    <!-- 挂牌 -->
+  <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="起摘数量">
+                        <a-input class="commonInput" suffix="吨" style="width: 140px" />
+                    </a-form-item>
+                </a-col>
+            </a-row>
+            <a-row :gutter="24">
+                <a-col
+                :span="24"
+                >
+                    <a-form-item>
+                        <a-progress :percent="30" />
+                    </a-form-item>
+                </a-col>
+            </a-row>
+            <a-row :gutter="24">
+                <a-col
+                :span="24"
+                >
+                    <a-form-item>
+                        <a-button>挂牌</a-button>
+                        <a-button>取消</a-button>
+                    </a-form-item>
+                </a-col>
+            </a-row>
+        </a-form>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+    name: 'warehouse-trade-fixed-price',
+    components: {},
+    setup() {
+        const form = {
+            type: '1'
+        };
+        return {
+            form,
+        };
+    },
+});
+</script>
+
+<style lang="less" scoped>
+.listed {
+    width: 100%;
+    height: 100%;
+    .flex;
+    flex-direction: column;
+    .condition {
+        width: 100%;
+        height: 48px;
+        padding: 10px 16px;
+        border-bottom: 1px solid @m-black6;
+        .inlineflex;
+        .conditionBtn {
+            align-self: center;
+            align-items: center;
+            border: 0;
+            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);
+           }
+        }
+        .conditionBtn+.conditionBtn {
+            margin-left: 10px;
+        }
+    }
+    .formBar {
+        width: 100%;
+        flex: 1;
+        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;
+            }
+
+        }
+    }
+}
+::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 {
+
+                    }
+                }
+            }
+        }
+    }
+}
+::v-deep.commonInput {
+    background: #15202B;
+    border: 1px solid #2B3F52;
+    border-radius: 3px;
+    .ant-input {
+        color: #7A8A94;
+        background: transparent;
+    }
+    .ant-input-suffix {
+        color: #7A8A94;
+    }
+}
+</style>;