样式暂存

src/assets/styles/mixin.less

@@ -1851,4 +1851,53 @@ input:-internal-autofill-selected {
             }
         }
     }
+}
+
+// 表单里面的内容
+.formBar {
+    ::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;
+        }
+    }
+
+    .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;
+        }
+    }
 }

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

@@ -1,21 +1,68 @@
 <style lang="less">
 </style>
 <template>
-  <!-- 发布求购 -->
-  <a-modal class="add-custom custom-detail"
-           title="发布求购"
-           centered
-           v-model:visible="visible"
-           :maskClosable="false"
-           @cancel="cancel"
-           width="890px">
-    <template #footer>
-      <a-button key="submit"
-                type="primary"
-                @click="cancel">关闭</a-button>
-    </template>
-    发布求购
-  </a-modal>
+    <!-- 发布求购 -->
+    <a-modal
+        class="commonModal post_buying"
+        title="发布求购"
+        centered
+        v-model:visible="visible"
+        :maskClosable="false"
+        @cancel="cancel"
+        width="486px"
+    >
+        <div class="formBar">
+            <a-form class="inlineForm" :form="form">
+                <a-row :gutter="24">
+                    <a-col :span="24">
+                        <a-form-item label="交易账户">
+                            <a-select
+                                class="inlineFormSelect"
+                                default-value="1"
+                                style="width: 260px"
+                            >
+                                <a-select-option value="1">2647247233 周星星</a-select-option>
+                            </a-select>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="24">
+                        <a-form-item label="基差">
+                            <a-input class="commonInput" style="width: 260px" />
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="24">
+                        <a-form-item label="挂牌数量">
+                            <a-input class="commonInput" suffix="吨" style="width: 260px" />
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="24">
+                        <a-form-item label="起摘数量" class="relative">
+                            <a-input class="commonInput" suffix="吨" style="width: 260px" />
+                            <div class="tip">最小单位：1吨</div>
+                        </a-form-item>
+                    </a-col>
+                    <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="listedBtn">融资买入</a-button>
+                            <a-button class="ml10 cancelBtn">取消</a-button>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </div>
+    </a-modal>
 </template>
 
 <script lang="ts">
@@ -46,4 +93,11 @@ export default defineComponent({
 </script>
 
 <style lang="less">
-</style>;
+.post_buying {
+    .formBar {
+        ::v-deep.formProgress {
+            width: 260px;
+        }
+    }
+}
+</style>