update

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

@@ -3,7 +3,80 @@
   <Drawer :title="'挂牌'"
           :placement="'bottom'"
           :visible="visible">
-    <Listed />
+    <!-- 挂牌 -->
+    <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>
 </template>
 
@@ -11,11 +84,9 @@
 import { defineComponent } from 'vue';
 import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
 import Drawer from '@/common/components/drawer/index.vue';
-import Trade from '@/views/market/warehouseTrade/components/trade/index.vue';
-import Listed from '@/views/market/warehouseTrade/components/listed/index.vue';
 export default defineComponent({
     name: enumOrderComponents.spot_warrant_pending_order,
-    components: { Drawer, Listed },
+    components: { Drawer },
     setup() {
         return {
             visible: true,
@@ -24,5 +95,99 @@ export default defineComponent({
 });
 </script>
 
-<style lang="less">
+<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, 0.8);
+                color: rgba(@m-blue0, 0.8);
+            }
+        }
+        .conditionBtn + .conditionBtn {
+            margin-left: 10px;
+        }
+    }
+    .formBar {
+        width: 100%;
+        flex: 1;
+        padding: 28px 16px 7px;
+    }
+}
+
+::v-deep.formProgress {
+    width: 140px;
+    // height: 3px;
+    // .rounded-corners(2px);
+    margin-left: 80px;
+    .ant-progress-outer {
+        margin-right: 0;
+        padding-right: 0;
+        .ant-progress-inner {
+            background: @m-grey14;
+            .rounded-corners(2px);
+            .ant-progress-bg {
+                height: 3px !important;
+                border-radius: 2px !important;
+                background-color: @m-blue0;
+            }
+        }
+    }
+    .ant-progress-text {
+        display: none;
+    }
+}
+.unit {
+    margin-left: 80px;
+    .flex;
+    justify-content: space-between;
+    font-size: 14px;
+    color: @m-grey1;
+    height: 14px;
+    line-height: 14px;
+}
+.listedBtn {
+    width: 120px;
+    height: 30px;
+    line-height: 30px;
+    background: linear-gradient(0deg, @m-blue2 0%, @m-blue0 100%);
+    border-radius: 3px;
+    color: @m-white0;
+    font-size: 14px;
+    text-align: center;
+    border: 0;
+    &:hover {
+        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%);
+        color: @m-white0-hover;
+    }
+}
+.ml10 {
+    margin-left: 10px;
+}
 </style>;