|
|
@@ -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>
|
marymelisa