|
|
@@ -1,77 +1,68 @@
|
|
|
<template>
|
|
|
<!-- 挂牌 -->
|
|
|
- <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 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>
|
|
|
- <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';
|
|
|
@@ -81,7 +72,7 @@ export default defineComponent({
|
|
|
components: {},
|
|
|
setup() {
|
|
|
const form = {
|
|
|
- type: '1'
|
|
|
+ type: '1',
|
|
|
};
|
|
|
return {
|
|
|
form,
|
|
|
@@ -96,6 +87,7 @@ export default defineComponent({
|
|
|
height: 100%;
|
|
|
.flex;
|
|
|
flex-direction: column;
|
|
|
+
|
|
|
.condition {
|
|
|
width: 100%;
|
|
|
height: 48px;
|
|
|
@@ -110,15 +102,15 @@ export default defineComponent({
|
|
|
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);
|
|
|
- }
|
|
|
+ .rounded-corners(3px);
|
|
|
+ font-size: 14px;
|
|
|
+ color: @m-blue0;
|
|
|
+ &:hover {
|
|
|
+ background: rgba(@m-black7, 0.8);
|
|
|
+ color: rgba(@m-blue0, 0.8);
|
|
|
+ }
|
|
|
}
|
|
|
- .conditionBtn+.conditionBtn {
|
|
|
+ .conditionBtn + .conditionBtn {
|
|
|
margin-left: 10px;
|
|
|
}
|
|
|
}
|
|
|
@@ -171,14 +163,14 @@ export default defineComponent({
|
|
|
text-align: center;
|
|
|
border: 0;
|
|
|
&:hover {
|
|
|
- background: linear-gradient(0deg, @m-blue0-hover 0%, @m-blue2-hover 100%);
|
|
|
+ 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%);
|
|
|
+ background: linear-gradient(0deg, @m-grey12-hover 0%, @m-grey13-hover 100%);
|
|
|
color: @m-white0-hover;
|
|
|
}
|
|
|
}
|
marymelisa