发布求购界面样式修改

src/assets/styles/variables.less

@@ -69,6 +69,7 @@
 @m-blue12: #1556B5;
 @m-blue13: #193778;
 @m-blue14: #1D2F3F;
+@m-blue15: #0D8AEB;
 @body-bg: #e9eef3;
 @m-white0: #ffffff;
 @m-white0-hover: rgba(@m-white0, .8);
@@ -79,6 +80,7 @@
 @m-red1: #FB7F75;
 @m-red1-hover: rgba(@m-red1, .8);
 @m-yellow0: #FF9600;
+@m-yellow1: #FC9618;
 @m-orange0: #F52929;
 
 @font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

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

@@ -1,68 +1,80 @@
-<style lang="less">
-</style>
 <template>
     <!-- 发布求购 -->
-    <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>
+    <Drawer :title="'发布求购'" :placement="'top'" :visible="visible" width="486px" height="420px">
+        <div class="post_buying">
+            <div class="formBar">
+                <a-form class="inlineForm dialogForm" :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 stepper" style="width: 260px" />
+                                <div class="minusBtn">
+                                    <MinusOutlined />
+                                </div>
+                                <div class="plusBtn">
+                                    <PlusOutlined />
+                                </div>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item label="挂牌数量">
+                                <a-input
+                                    class="commonInput stepper"
+                                    suffix="吨"
+                                    style="width: 260px"
+                                />
+                                <div class="minusBtn">
+                                    <MinusOutlined />
+                                </div>
+                                <div class="plusBtn">
+                                    <PlusOutlined />
+                                </div>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24" class="mt-10">
+                            <a-form-item>
+                                <a-progress
+                                    class="formProgress"
+                                    :percent="30"
+                                    style="width: 260px;"
+                                />
+                                <div class="unit">
+                                    <span>0</span>
+                                    <span>80吨</span>
+                                </div>
+                            </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-row>
+                    <a-row :gutter="24" type="flex" justify="center">
+                        <a-col :span="24" class="mt20">
+                            <a-form-item class="tc">
+                                <a-button class="listedBtn">买入</a-button>
+                                <a-button class="listedBtn ml10">融资买入</a-button>
+                                <a-button class="ml10 cancelBtn">取消</a-button>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                </a-form>
+            </div>
         </div>
-    </a-modal>
+    </Drawer>
 </template>
 
 <script lang="ts">
@@ -71,11 +83,13 @@ import { Des } from '@/common/components/commonDes';
 import { QhjAgreementConfig } from '@/services/go/ermcp/qhj/interface';
 import { _closeModal } from '@/common/setup/modal/modal';
 import { ModalEnum } from '@/common/constants/modalNameEnum';
+import Drawer from '@/common/components/drawer/index.vue';
+import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
 
 export default defineComponent({
     emits: ['cancel'],
     name: ModalEnum.spot_trade_warehouse_post_buying,
-    components: { Des },
+    components: { Des, Drawer, PlusOutlined, MinusOutlined },
     props: {
         selectedRow: {
             type: Object as PropType<QhjAgreementConfig>,
@@ -86,7 +100,7 @@ export default defineComponent({
         const { visible, cancel } = _closeModal(context);
         return {
             cancel,
-            visible,
+            visible: true,
         };
     },
 });
@@ -94,10 +108,143 @@ export default defineComponent({
 
 <style lang="less">
 .post_buying {
+    width: 100%;
+    height: 100%;
+    .flex;
+    flex-direction: column;
+    .condition {
+        width: 100%;
+        height: 48px;
+        margin: 0 16px;
+        padding: 10px 0;
+        border-bottom: 1px solid @m-black6;
+        .inlineflex;
+        .conditionBtn {
+            align-self: center;
+            align-items: center;
+            border: 0;
+            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, 0.8);
+                color: rgba(@m-blue0, 0.8);
+            }
+        }
+        .conditionBtn + .conditionBtn {
+            margin-left: 10px;
+        }
+    }
     .formBar {
-        ::v-deep.formProgress {
-            width: 260px;
+        width: 100%;
+        flex: 1;
+        padding: 28px 16px 7px;
+    }
+}
+
+::v-deep.formProgress {
+    width: 260px;
+    // height: 3px;
+    // .rounded-corners(2px);
+    margin-left: 70px;
+    .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: 70px;
+    width: 260px;
+    .flex;
+    justify-content: space-between;
+    font-size: 14px;
+    color: @m-grey1;
+    height: 14px;
+    line-height: 14px;
+}
+.listedBtn:first-child {
+    margin-left: -35px;
+}
+.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%) !important;
+    &:hover {
+        background: linear-gradient(0deg, @m-grey12-hover 0%, @m-grey13-hover 100%) !important;
+        color: @m-white0-hover;
+    }
+}
+.ml10 {
+    margin-left: 10px;
+}
+.ant-form.dialogForm .ant-row.ant-form-item {
+    margin-bottom: 14px;
+}
+.mt20 {
+    margin-top: 20px;
+}
+.mt-10 {
+    margin-top: -10px;
+}
+.ant-input-suffix {
+    position: absolute;
+    right: -25px;
+}
+.minusBtn,
+.plusBtn {
+    width: 15px;
+    height: 32px;
+    line-height: 32px;
+    font-size: 15px;
+    color: @m-blue15;
+    cursor: pointer;
+}
+.minusBtn {
+    position: absolute;
+    top: -6px;
+    left: 14px;
+    z-index: 1;
+}
+.plusBtn {
+    position: absolute;
+    top: -6px;
+    right: 14px;
+    z-index: 1;
+}
+.stepper {
+    padding-left: 30px;
+    padding-right: 30px;
+    text-align: center;
+    color: @m-yellow1;
+    font-size: 16px;
 }
 </style>

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

@@ -6,7 +6,6 @@
             <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">
@@ -105,7 +104,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
 .listed {
     width: 100%;
     height: 100%;
@@ -146,7 +145,7 @@ export default defineComponent({
 }
 
 ::v-deep.formProgress {
-    width: 140px;
+    width: 260px;
     // height: 3px;
     // .rounded-corners(2px);
     margin-left: 70px;
@@ -168,7 +167,7 @@ export default defineComponent({
     }
 }
 .unit {
-    margin-left: 80px;
+    margin-left: 70px;
     .flex;
     justify-content: space-between;
     font-size: 14px;
@@ -176,6 +175,9 @@ export default defineComponent({
     height: 14px;
     line-height: 14px;
 }
+.listedBtn:first-child {
+    margin-left: -35px;
+}
 .listedBtn {
     width: 120px;
     height: 30px;
@@ -192,9 +194,9 @@ export default defineComponent({
     }
 }
 .cancelBtn:extend(.listedBtn) {
-    background: linear-gradient(0deg, @m-grey12 0%, @m-grey13 100%);
+    background: linear-gradient(0deg, @m-grey12 0%, @m-grey13 100%) !important;
     &: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%) !important;
         color: @m-white0-hover;
     }
 }