|
@@ -1,6 +1,13 @@
|
|
|
<template>
|
|
<template>
|
|
|
<!-- 挂牌求购 -->
|
|
<!-- 挂牌求购 -->
|
|
|
- <a-drawer placement="right" :closable="false" :visible="visible" :width="1052" :destroyOnClose="true" class="post-buying-container">
|
|
|
|
|
|
|
+ <a-drawer
|
|
|
|
|
+ placement="right"
|
|
|
|
|
+ :closable="false"
|
|
|
|
|
+ :visible="visible"
|
|
|
|
|
+ :width="1052"
|
|
|
|
|
+ :destroyOnClose="true"
|
|
|
|
|
+ class="post-buying-container"
|
|
|
|
|
+ >
|
|
|
<div class="collapse">
|
|
<div class="collapse">
|
|
|
<div class="collapse-close" @click="cancelAction">
|
|
<div class="collapse-close" @click="cancelAction">
|
|
|
<DoubleRightOutlined />
|
|
<DoubleRightOutlined />
|
|
@@ -25,32 +32,47 @@
|
|
|
<div class="content--right">{{ selectedRow.goodsname }}</div>
|
|
<div class="content--right">{{ selectedRow.goodsname }}</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="chart-tips__last">
|
|
<div class="chart-tips__last">
|
|
|
- <div :class="['content--left', handleQuotePriceColor_out(selectedRow.refgoodscode, 'last')]">{{ getQuoteValue_out(selectedRow.refgoodscode, 'last') }}</div>
|
|
|
|
|
|
|
+ <div
|
|
|
|
|
+ :class="['content--left', handleQuotePriceColor_out(selectedRow.refgoodscode, 'last')]"
|
|
|
|
|
+ >{{ getQuoteValue_out(selectedRow.refgoodscode, 'last') }}</div>
|
|
|
<div class="content--right">
|
|
<div class="content--right">
|
|
|
- <span :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'last')">{{ quoteChange_out(selectedRow.refgoodscode) }}</span>
|
|
|
|
|
- <span :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'last')">{{ quoteAmplitude_out(selectedRow.refgoodscode) }}</span>
|
|
|
|
|
|
|
+ <span
|
|
|
|
|
+ :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'last')"
|
|
|
|
|
+ >{{ quoteChange_out(selectedRow.refgoodscode) }}</span>
|
|
|
|
|
+ <span
|
|
|
|
|
+ :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'last')"
|
|
|
|
|
+ >{{ quoteAmplitude_out(selectedRow.refgoodscode) }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<a-row>
|
|
<a-row>
|
|
|
<a-col :span="4" :offset="2">最高价</a-col>
|
|
<a-col :span="4" :offset="2">最高价</a-col>
|
|
|
<a-col :span="6">
|
|
<a-col :span="6">
|
|
|
- <span :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'highest')">{{ getQuoteValue_out(selectedRow.refgoodscode, 'highest') }}</span>
|
|
|
|
|
|
|
+ <span
|
|
|
|
|
+ :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'highest')"
|
|
|
|
|
+ >{{ getQuoteValue_out(selectedRow.refgoodscode, 'highest') }}</span>
|
|
|
</a-col>
|
|
</a-col>
|
|
|
<a-col :span="4" :offset="2">开盘价</a-col>
|
|
<a-col :span="4" :offset="2">开盘价</a-col>
|
|
|
<a-col :span="6">
|
|
<a-col :span="6">
|
|
|
- <span :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'opened')">{{ getQuoteValue_out(selectedRow.refgoodscode, 'opened') }}</span>
|
|
|
|
|
|
|
+ <span
|
|
|
|
|
+ :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'opened')"
|
|
|
|
|
+ >{{ getQuoteValue_out(selectedRow.refgoodscode, 'opened') }}</span>
|
|
|
</a-col>
|
|
</a-col>
|
|
|
</a-row>
|
|
</a-row>
|
|
|
<a-row>
|
|
<a-row>
|
|
|
<a-col :span="4" :offset="2">最低价</a-col>
|
|
<a-col :span="4" :offset="2">最低价</a-col>
|
|
|
<a-col :span="6">
|
|
<a-col :span="6">
|
|
|
- <span :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'lowest')">{{ getQuoteValue_out(selectedRow.refgoodscode, 'lowest') }}</span>
|
|
|
|
|
|
|
+ <span
|
|
|
|
|
+ :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'lowest')"
|
|
|
|
|
+ >{{ getQuoteValue_out(selectedRow.refgoodscode, 'lowest') }}</span>
|
|
|
</a-col>
|
|
</a-col>
|
|
|
<a-col :span="4" :offset="2">昨结价</a-col>
|
|
<a-col :span="4" :offset="2">昨结价</a-col>
|
|
|
<a-col :span="6">{{ getQuoteValue_out(selectedRow.refgoodscode, 'presettle') }}</a-col>
|
|
<a-col :span="6">{{ getQuoteValue_out(selectedRow.refgoodscode, 'presettle') }}</a-col>
|
|
|
</a-row>
|
|
</a-row>
|
|
|
<div class="chart-content">
|
|
<div class="chart-content">
|
|
|
- <Chart :selectedRow="getQuoteDayInfoByCode(selectedRow.refgoodscode)" :showExchange="false" />
|
|
|
|
|
|
|
+ <Chart
|
|
|
|
|
+ :selectedRow="getQuoteDayInfoByCode(selectedRow.refgoodscode)"
|
|
|
|
|
+ :showExchange="false"
|
|
|
|
|
+ />
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</a-col>
|
|
</a-col>
|
|
@@ -60,9 +82,18 @@
|
|
|
<div class="formBar">
|
|
<div class="formBar">
|
|
|
<a-row :gutter="24">
|
|
<a-row :gutter="24">
|
|
|
<a-col :span="24">
|
|
<a-col :span="24">
|
|
|
- <a-form-item label="交易账户" name="accountid">
|
|
|
|
|
- <a-select class="inlineFormSelect" style="width: 260px" v-model:value="formState.accountid" placeholder="请选择">
|
|
|
|
|
- <a-select-option v-for="item in accountList" :value="item.accountid" :key="item.accountid">{{ item.accountid }}</a-select-option>
|
|
|
|
|
|
|
+ <a-form-item label="贸易账户" name="accountid">
|
|
|
|
|
+ <a-select
|
|
|
|
|
+ class="inlineFormSelect"
|
|
|
|
|
+ style="width: 260px"
|
|
|
|
|
+ v-model:value="formState.accountid"
|
|
|
|
|
+ placeholder="请选择"
|
|
|
|
|
+ >
|
|
|
|
|
+ <a-select-option
|
|
|
|
|
+ v-for="item in accountList"
|
|
|
|
|
+ :value="item.accountid"
|
|
|
|
|
+ :key="item.accountid"
|
|
|
|
|
+ >{{ item.accountid }}</a-select-option>
|
|
|
</a-select>
|
|
</a-select>
|
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
</a-col>
|
|
</a-col>
|
|
@@ -78,19 +109,30 @@
|
|
|
</a-col>
|
|
</a-col>
|
|
|
<a-col :span="24">
|
|
<a-col :span="24">
|
|
|
<a-form-item label="参考价">
|
|
<a-form-item label="参考价">
|
|
|
- <span :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'last')">{{ getQuoteValue_out(selectedRow.refgoodscode, 'last') }}</span>
|
|
|
|
|
|
|
+ <span
|
|
|
|
|
+ :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'last')"
|
|
|
|
|
+ >{{ getQuoteValue_out(selectedRow.refgoodscode, 'last') }}</span>
|
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
</a-col>
|
|
</a-col>
|
|
|
<a-col :span="24" v-if="!isFloat()">
|
|
<a-col :span="24" v-if="!isFloat()">
|
|
|
<a-form-item label="挂牌价格" name="FixedPrice" class="inputIconBox">
|
|
<a-form-item label="挂牌价格" name="FixedPrice" class="inputIconBox">
|
|
|
- <a-input-number class="commonInput" style="width: 260px" :min="0" v-model:value="formState.FixedPrice" />
|
|
|
|
|
|
|
+ <a-input-number
|
|
|
|
|
+ class="commonInput"
|
|
|
|
|
+ style="width: 260px"
|
|
|
|
|
+ :min="0"
|
|
|
|
|
+ v-model:value="formState.FixedPrice"
|
|
|
|
|
+ />
|
|
|
<MinusOutlined @click="decreasePrice" />
|
|
<MinusOutlined @click="decreasePrice" />
|
|
|
<PlusOutlined @click="increasePrice" />
|
|
<PlusOutlined @click="increasePrice" />
|
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
</a-col>
|
|
</a-col>
|
|
|
<a-col :span="24" v-else>
|
|
<a-col :span="24" v-else>
|
|
|
<a-form-item label="点差" name="PriceMove">
|
|
<a-form-item label="点差" name="PriceMove">
|
|
|
- <a-input-number class="commonInput" style="width: 260px" v-model:value="formState.PriceMove" />
|
|
|
|
|
|
|
+ <a-input-number
|
|
|
|
|
+ class="commonInput"
|
|
|
|
|
+ style="width: 260px"
|
|
|
|
|
+ v-model:value="formState.PriceMove"
|
|
|
|
|
+ />
|
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
</a-col>
|
|
</a-col>
|
|
|
<a-col :span="24" v-if="isFloat()">
|
|
<a-col :span="24" v-if="isFloat()">
|
|
@@ -101,7 +143,13 @@
|
|
|
|
|
|
|
|
<a-col :span="24">
|
|
<a-col :span="24">
|
|
|
<a-form-item label="挂牌数量" name="OrderQty" class="inputIconBox">
|
|
<a-form-item label="挂牌数量" name="OrderQty" class="inputIconBox">
|
|
|
- <a-input-number class="commonInput" style="width: 260px" :min="0" :max="getMaxNum()" v-model:value="formState.OrderQty" />
|
|
|
|
|
|
|
+ <a-input-number
|
|
|
|
|
+ class="commonInput"
|
|
|
|
|
+ style="width: 260px"
|
|
|
|
|
+ :min="0"
|
|
|
|
|
+ :max="getMaxNum()"
|
|
|
|
|
+ v-model:value="formState.OrderQty"
|
|
|
|
|
+ />
|
|
|
<MinusOutlined @click="decreaseNum" />
|
|
<MinusOutlined @click="decreaseNum" />
|
|
|
<PlusOutlined @click="increaseNum" />
|
|
<PlusOutlined @click="increaseNum" />
|
|
|
<span class="input-enumdicname">{{ selected.enumdicname }}</span>
|
|
<span class="input-enumdicname">{{ selected.enumdicname }}</span>
|
|
@@ -109,7 +157,12 @@
|
|
|
</a-col>
|
|
</a-col>
|
|
|
<a-col :span="24" class="mt-10">
|
|
<a-col :span="24" class="mt-10">
|
|
|
<a-form-item>
|
|
<a-form-item>
|
|
|
- <a-slider :min="0" v-model:value="formState.OrderQty" :max="getMaxNum()" class="formSlider" />
|
|
|
|
|
|
|
+ <a-slider
|
|
|
|
|
+ :min="0"
|
|
|
|
|
+ v-model:value="formState.OrderQty"
|
|
|
|
|
+ :max="getMaxNum()"
|
|
|
|
|
+ class="formSlider"
|
|
|
|
|
+ />
|
|
|
<div class="unit">
|
|
<div class="unit">
|
|
|
<span>{{ getMaxNum() ? selected.minivalue : 0 }}</span>
|
|
<span>{{ getMaxNum() ? selected.minivalue : 0 }}</span>
|
|
|
<span>{{ getMaxNum() }}{{ selected.enumdicname }}</span>
|
|
<span>{{ getMaxNum() }}{{ selected.enumdicname }}</span>
|
|
@@ -136,7 +189,12 @@
|
|
|
<a-row :gutter="24">
|
|
<a-row :gutter="24">
|
|
|
<a-col :span="24" class="fixedBtns">
|
|
<a-col :span="24" class="fixedBtns">
|
|
|
<a-form-item class="btnCenter">
|
|
<a-form-item class="btnCenter">
|
|
|
- <a-button class="listedBtn" :loading="loading" :disabled="loading" @click="submit">{{ isBuy() ? '买入' : '卖出' }}</a-button>
|
|
|
|
|
|
|
+ <a-button
|
|
|
|
|
+ class="listedBtn"
|
|
|
|
|
+ :loading="loading"
|
|
|
|
|
+ :disabled="loading"
|
|
|
|
|
+ @click="submit"
|
|
|
|
|
+ >{{ isBuy() ? '买入' : '卖出' }}</a-button>
|
|
|
<a-button class="ml10 cancelBtn" @click="cancel">取消</a-button>
|
|
<a-button class="ml10 cancelBtn" @click="cancel">取消</a-button>
|
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
</a-col>
|
|
</a-col>
|
|
@@ -160,6 +218,7 @@ import { useTaAccount } from '@/common/setup/account';
|
|
|
import { validateAction } from '@/common/setup/form';
|
|
import { validateAction } from '@/common/setup/form';
|
|
|
import { _closeModal } from '@/common/setup/modal/modal';
|
|
import { _closeModal } from '@/common/setup/modal/modal';
|
|
|
import { queryTableList } from '@/common/setup/table';
|
|
import { queryTableList } from '@/common/setup/table';
|
|
|
|
|
+import { getQuoteValue_out, handleNoneValue, handleQuotePriceColor, handleQuotePriceColor_out, handleSubcriteOnDemandQuote, quoteAmplitude, quoteAmplitude_out, quoteAmplituOfVibration, quoteChange, quoteChange_out } from '@/common/setup/table/tableQuote';
|
|
|
import { useListingTradeNumAndPrice } from '@/common/setup/trade';
|
|
import { useListingTradeNumAndPrice } from '@/common/setup/trade';
|
|
|
import { ListingTradeNumAndPrice } from '@/common/setup/trade/interface';
|
|
import { ListingTradeNumAndPrice } from '@/common/setup/trade/interface';
|
|
|
import { useTodayMargin } from '@/hooks/margin';
|
|
import { useTodayMargin } from '@/hooks/margin';
|
|
@@ -173,18 +232,15 @@ import { QueryTjmdTodayAccountMarginReq } from '@/services/go/Tjmd/interface';
|
|
|
import { diaoQiOrder } from '@/services/socket/order';
|
|
import { diaoQiOrder } from '@/services/socket/order';
|
|
|
import { OrderReq } from '@/services/socket/order/interface';
|
|
import { OrderReq } from '@/services/socket/order/interface';
|
|
|
import Bus from '@/utils/eventBus';
|
|
import Bus from '@/utils/eventBus';
|
|
|
-import { MinusOutlined, PlusOutlined, SwapOutlined } from '@ant-design/icons-vue';
|
|
|
|
|
|
|
+import Chart from '@/views/market/spot_trade/components/goods-chart/chart/index.vue';
|
|
|
|
|
+import { DoubleRightOutlined, LineChartOutlined, MinusOutlined, PlusOutlined, SwapOutlined } from '@ant-design/icons-vue';
|
|
|
import moment from 'moment';
|
|
import moment from 'moment';
|
|
|
import { v4 as uuidv4 } from 'uuid';
|
|
import { v4 as uuidv4 } from 'uuid';
|
|
|
import { defineComponent, PropType, ref } from 'vue';
|
|
import { defineComponent, PropType, ref } from 'vue';
|
|
|
import { RefGoodsList } from '../../interface';
|
|
import { RefGoodsList } from '../../interface';
|
|
|
import { useUserType } from '../setup';
|
|
import { useUserType } from '../setup';
|
|
|
import { FormParam } from './interface';
|
|
import { FormParam } from './interface';
|
|
|
-import { handleForm, isFloat, useBuySellDirection, useNum, usePrice, useChart } from './setup';
|
|
|
|
|
-import { DoubleRightOutlined, LineChartOutlined } from '@ant-design/icons-vue';
|
|
|
|
|
-import { handleQuotePriceColor, quoteChange, handleNoneValue, quoteAmplitude } from '@/common/setup/table/tableQuote';
|
|
|
|
|
-import { handleQuotePriceColor_out, handleSubcriteOnDemandQuote, quoteAmplitude_out, quoteAmplituOfVibration, quoteChange_out, getQuoteValue_out } from '@/common/setup/table/tableQuote';
|
|
|
|
|
-import Chart from '@/views/market/spot_trade/components/goods-chart/chart/index.vue';
|
|
|
|
|
|
|
+import { handleForm, isFloat, useBuySellDirection, useChart, useNum, usePrice } from './setup';
|
|
|
|
|
|
|
|
export default defineComponent({
|
|
export default defineComponent({
|
|
|
emits: ['cancel', 'update'],
|
|
emits: ['cancel', 'update'],
|
|
@@ -370,263 +426,267 @@ export default defineComponent({
|
|
|
|
|
|
|
|
<style lang="less">
|
|
<style lang="less">
|
|
|
.post-buying-container {
|
|
.post-buying-container {
|
|
|
- top: 101px;
|
|
|
|
|
- .ant-drawer-content-wrapper {
|
|
|
|
|
- height: 605px;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ top: 101px;
|
|
|
|
|
+ .ant-drawer-content-wrapper {
|
|
|
|
|
+ height: 605px;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
.chart-content {
|
|
.chart-content {
|
|
|
- height: 400px;
|
|
|
|
|
|
|
+ height: 400px;
|
|
|
|
|
|
|
|
- .chart-content__header,
|
|
|
|
|
- .chart-content__main {
|
|
|
|
|
- width: 90% !important;
|
|
|
|
|
- margin: auto !important;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ .chart-content__header,
|
|
|
|
|
+ .chart-content__main {
|
|
|
|
|
+ width: 90% !important;
|
|
|
|
|
+ margin: auto !important;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- .chart-slider {
|
|
|
|
|
- display: none;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ .chart-slider {
|
|
|
|
|
+ display: none;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
.formBar {
|
|
.formBar {
|
|
|
- height: 100%;
|
|
|
|
|
- max-height: 100%;
|
|
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ max-height: 100%;
|
|
|
}
|
|
}
|
|
|
.post_buying_chart {
|
|
.post_buying_chart {
|
|
|
- [theme='light'] & {
|
|
|
|
|
- --bgcolor: #fff;
|
|
|
|
|
- --tab-border-color: #dae5ec;
|
|
|
|
|
- --tab-checked-color: #0866b8;
|
|
|
|
|
- --tab-checked-bgcolor: #d4e0ff;
|
|
|
|
|
- --slider-border-color: #b2c4dd;
|
|
|
|
|
- --slider-bgcolor: #edf2f7;
|
|
|
|
|
- --slider-button-color: #b2c4dd;
|
|
|
|
|
- --row-border-color: #dae5ec;
|
|
|
|
|
- --row-title-color: #acb8c0;
|
|
|
|
|
- --row-content-color: #3c454b;
|
|
|
|
|
- --tik-title-bgcolor: #ecf2f5;
|
|
|
|
|
- --tik-title-color: #7a8a94;
|
|
|
|
|
- }
|
|
|
|
|
- color: @m-grey67;
|
|
|
|
|
|
|
+ [theme="light"] & {
|
|
|
|
|
+ --bgcolor: #fff;
|
|
|
|
|
+ --tab-border-color: #dae5ec;
|
|
|
|
|
+ --tab-checked-color: #0866b8;
|
|
|
|
|
+ --tab-checked-bgcolor: #d4e0ff;
|
|
|
|
|
+ --slider-border-color: #b2c4dd;
|
|
|
|
|
+ --slider-bgcolor: #edf2f7;
|
|
|
|
|
+ --slider-button-color: #b2c4dd;
|
|
|
|
|
+ --row-border-color: #dae5ec;
|
|
|
|
|
+ --row-title-color: #acb8c0;
|
|
|
|
|
+ --row-content-color: #3c454b;
|
|
|
|
|
+ --tik-title-bgcolor: #ecf2f5;
|
|
|
|
|
+ --tik-title-color: #7a8a94;
|
|
|
|
|
+ }
|
|
|
|
|
+ color: @m-grey67;
|
|
|
|
|
|
|
|
- // background-color: var(--bgcolor, #0e0e0f);
|
|
|
|
|
|
|
+ // background-color: var(--bgcolor, #0e0e0f);
|
|
|
|
|
|
|
|
- // background: @m-blue37;
|
|
|
|
|
- // color: @m-grey67;
|
|
|
|
|
- .buying_chart {
|
|
|
|
|
- display: flex;
|
|
|
|
|
|
|
+ // background: @m-blue37;
|
|
|
|
|
+ // color: @m-grey67;
|
|
|
|
|
+ .buying_chart {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
|
|
|
- // background-color: @m-blue36;
|
|
|
|
|
- &__nav {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
|
|
+ // background-color: @m-blue36;
|
|
|
|
|
+ &__nav {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
|
|
|
- .content {
|
|
|
|
|
- &:first-child:not(:last-child) {
|
|
|
|
|
- margin-right: 16px;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ .content {
|
|
|
|
|
+ &:first-child:not(:last-child) {
|
|
|
|
|
+ margin-right: 16px;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- &--left {
|
|
|
|
|
- font-size: 16px;
|
|
|
|
|
- color: var(--row-content-color, #acb8c0);
|
|
|
|
|
- margin-right: 6px;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ &--left {
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ color: var(--row-content-color, #acb8c0);
|
|
|
|
|
+ margin-right: 6px;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- &--right {
|
|
|
|
|
- font-size: 24px;
|
|
|
|
|
- color: #fc9618;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ &--right {
|
|
|
|
|
+ font-size: 24px;
|
|
|
|
|
+ color: #fc9618;
|
|
|
}
|
|
}
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
- .chart-tips {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- flex-direction: column;
|
|
|
|
|
- width: 300px;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
|
|
+ }
|
|
|
|
|
+ .chart-tips {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ width: 300px;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
|
|
|
- &__last {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- padding: 16px 0;
|
|
|
|
|
- .content {
|
|
|
|
|
- &--left {
|
|
|
|
|
- font-size: 24px;
|
|
|
|
|
- margin-right: 16px;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ &__last {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ padding: 16px 0;
|
|
|
|
|
+ .content {
|
|
|
|
|
+ &--left {
|
|
|
|
|
+ font-size: 24px;
|
|
|
|
|
+ margin-right: 16px;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- &--right {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- flex-direction: column;
|
|
|
|
|
- align-items: flex-start;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ &--right {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ align-items: flex-start;
|
|
|
}
|
|
}
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
.post_buying {
|
|
.post_buying {
|
|
|
- width: 100%;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- .flex;
|
|
|
|
|
- flex-direction: column;
|
|
|
|
|
- position: relative;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ .flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
|
|
|
- .ant-form {
|
|
|
|
|
- height: 100%;
|
|
|
|
|
|
|
+ .ant-form {
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ }
|
|
|
|
|
+ .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: @m-black7-hover;
|
|
|
|
|
+ color: @m-blue0-hover;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
- .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: @m-black7-hover;
|
|
|
|
|
- color: @m-blue0-hover;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- .conditionBtn + .conditionBtn {
|
|
|
|
|
- margin-left: 10px;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ .conditionBtn + .conditionBtn {
|
|
|
|
|
+ margin-left: 10px;
|
|
|
}
|
|
}
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
.title_right {
|
|
.title_right {
|
|
|
- color: @m-blue25;
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- top: 8px;
|
|
|
|
|
- right: 19px;
|
|
|
|
|
- cursor: pointer;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- .tline {
|
|
|
|
|
- width: 1px;
|
|
|
|
|
- height: 18px;
|
|
|
|
|
- background: @m-black47;
|
|
|
|
|
- margin-top: 2px;
|
|
|
|
|
- box-shadow: 1px 0px 0px 0px @m-black48;
|
|
|
|
|
- }
|
|
|
|
|
- .icon {
|
|
|
|
|
- font-size: 16px;
|
|
|
|
|
- height: 16px;
|
|
|
|
|
- line-height: 16px;
|
|
|
|
|
- margin: 3px 7px 3px 17px;
|
|
|
|
|
- fill: @m-blue25;
|
|
|
|
|
- }
|
|
|
|
|
- span {
|
|
|
|
|
- font-size: 14px;
|
|
|
|
|
- font-family: Adobe Heiti Std;
|
|
|
|
|
- font-weight: normal;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ color: @m-blue25;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 8px;
|
|
|
|
|
+ right: 19px;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ .tline {
|
|
|
|
|
+ width: 1px;
|
|
|
|
|
+ height: 18px;
|
|
|
|
|
+ background: @m-black47;
|
|
|
|
|
+ margin-top: 2px;
|
|
|
|
|
+ box-shadow: 1px 0px 0px 0px @m-black48;
|
|
|
|
|
+ }
|
|
|
|
|
+ .icon {
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ height: 16px;
|
|
|
|
|
+ line-height: 16px;
|
|
|
|
|
+ margin: 3px 7px 3px 17px;
|
|
|
|
|
+ fill: @m-blue25;
|
|
|
|
|
+ }
|
|
|
|
|
+ span {
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ font-family: Adobe Heiti Std;
|
|
|
|
|
+ font-weight: normal;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
.unit {
|
|
.unit {
|
|
|
- margin-left: 70px;
|
|
|
|
|
- width: 260px;
|
|
|
|
|
- .flex;
|
|
|
|
|
- justify-content: space-between;
|
|
|
|
|
- font-size: 14px;
|
|
|
|
|
- color: @m-grey41;
|
|
|
|
|
- height: 14px;
|
|
|
|
|
- line-height: 14px;
|
|
|
|
|
|
|
+ margin-left: 70px;
|
|
|
|
|
+ width: 260px;
|
|
|
|
|
+ .flex;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ color: @m-grey41;
|
|
|
|
|
+ height: 14px;
|
|
|
|
|
+ line-height: 14px;
|
|
|
}
|
|
}
|
|
|
.listedBtn {
|
|
.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;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ 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) {
|
|
.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;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ 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 {
|
|
.ml10 {
|
|
|
- margin-left: 10px;
|
|
|
|
|
|
|
+ margin-left: 10px;
|
|
|
}
|
|
}
|
|
|
.ant-form.dialogForm .ant-row.ant-form-item {
|
|
.ant-form.dialogForm .ant-row.ant-form-item {
|
|
|
- margin-bottom: 14px;
|
|
|
|
|
|
|
+ margin-bottom: 14px;
|
|
|
}
|
|
}
|
|
|
.mt20 {
|
|
.mt20 {
|
|
|
- margin-top: 20px;
|
|
|
|
|
|
|
+ margin-top: 20px;
|
|
|
}
|
|
}
|
|
|
.mt-10 {
|
|
.mt-10 {
|
|
|
- margin-top: -10px;
|
|
|
|
|
|
|
+ margin-top: -10px;
|
|
|
}
|
|
}
|
|
|
.ant-input-suffix {
|
|
.ant-input-suffix {
|
|
|
- position: absolute;
|
|
|
|
|
- right: -25px;
|
|
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ right: -25px;
|
|
|
}
|
|
}
|
|
|
.minusBtn,
|
|
.minusBtn,
|
|
|
.plusBtn {
|
|
.plusBtn {
|
|
|
- width: 15px;
|
|
|
|
|
- height: 32px;
|
|
|
|
|
- line-height: 32px;
|
|
|
|
|
- font-size: 15px;
|
|
|
|
|
- color: @m-blue15;
|
|
|
|
|
- cursor: pointer;
|
|
|
|
|
|
|
+ width: 15px;
|
|
|
|
|
+ height: 32px;
|
|
|
|
|
+ line-height: 32px;
|
|
|
|
|
+ font-size: 15px;
|
|
|
|
|
+ color: @m-blue15;
|
|
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
}
|
|
|
.minusBtn {
|
|
.minusBtn {
|
|
|
- position: absolute;
|
|
|
|
|
- top: -6px;
|
|
|
|
|
- left: 14px;
|
|
|
|
|
- z-index: 1;
|
|
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: -6px;
|
|
|
|
|
+ left: 14px;
|
|
|
|
|
+ z-index: 1;
|
|
|
}
|
|
}
|
|
|
.plusBtn {
|
|
.plusBtn {
|
|
|
- position: absolute;
|
|
|
|
|
- top: -6px;
|
|
|
|
|
- right: 14px;
|
|
|
|
|
- z-index: 1;
|
|
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: -6px;
|
|
|
|
|
+ right: 14px;
|
|
|
|
|
+ z-index: 1;
|
|
|
}
|
|
}
|
|
|
.stepper {
|
|
.stepper {
|
|
|
- padding-left: 30px;
|
|
|
|
|
- padding-right: 30px;
|
|
|
|
|
- text-align: center;
|
|
|
|
|
- color: @m-yellow1;
|
|
|
|
|
- font-size: 16px;
|
|
|
|
|
|
|
+ padding-left: 30px;
|
|
|
|
|
+ padding-right: 30px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ color: @m-yellow1;
|
|
|
|
|
+ font-size: 16px;
|
|
|
}
|
|
}
|
|
|
.ant-slider.formSlider {
|
|
.ant-slider.formSlider {
|
|
|
- width: 260px !important;
|
|
|
|
|
- margin-left: 70px;
|
|
|
|
|
- .ant-slider-rail {
|
|
|
|
|
- margin-right: 0;
|
|
|
|
|
- padding-right: 0;
|
|
|
|
|
- height: 3px !important;
|
|
|
|
|
- border-radius: 2px !important;
|
|
|
|
|
- background-color: @m-blue14;
|
|
|
|
|
- }
|
|
|
|
|
- .ant-slider-track {
|
|
|
|
|
- height: 3px;
|
|
|
|
|
- background-color: @m-blue0;
|
|
|
|
|
- }
|
|
|
|
|
- .ant-slider-step {
|
|
|
|
|
- height: 3px;
|
|
|
|
|
- }
|
|
|
|
|
- .ant-progress-text {
|
|
|
|
|
- display: none;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ width: 260px !important;
|
|
|
|
|
+ margin-left: 70px;
|
|
|
|
|
+ .ant-slider-rail {
|
|
|
|
|
+ margin-right: 0;
|
|
|
|
|
+ padding-right: 0;
|
|
|
|
|
+ height: 3px !important;
|
|
|
|
|
+ border-radius: 2px !important;
|
|
|
|
|
+ background-color: @m-blue14;
|
|
|
|
|
+ }
|
|
|
|
|
+ .ant-slider-track {
|
|
|
|
|
+ height: 3px;
|
|
|
|
|
+ background-color: @m-blue0;
|
|
|
|
|
+ }
|
|
|
|
|
+ .ant-slider-step {
|
|
|
|
|
+ height: 3px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .ant-progress-text {
|
|
|
|
|
+ display: none;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|