|
|
@@ -0,0 +1,267 @@
|
|
|
+<template>
|
|
|
+ <!-- 挂牌 -->
|
|
|
+ <div class="delisting">
|
|
|
+ <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>
|
|
|
+</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>
|
|
|
+.delisting {
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .relative.ant-form-item {
|
|
|
+ position: relative;
|
|
|
+ .tip {
|
|
|
+ position: absolute;
|
|
|
+ font-size: 14px;
|
|
|
+ color: @m-grey1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tc.ant-form-item {
|
|
|
+ .ant-form-item-control-wrapper {
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+::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.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;
|
|
|
+}
|
|
|
+::v-deep.commonInput {
|
|
|
+ background: #15202B;
|
|
|
+ border: 1px solid @m-grey14;
|
|
|
+ border-radius: 3px;
|
|
|
+ color: #E5E5E5;
|
|
|
+ .ant-input {
|
|
|
+ color: #E5E5E5;
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
+ .ant-input-suffix {
|
|
|
+ color: #E5E5E5;
|
|
|
+ }
|
|
|
+}
|
|
|
+.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>;
|
marymelisa