|
|
@@ -1,68 +1,71 @@
|
|
|
<template>
|
|
|
- <!-- 买卖大厅 -->
|
|
|
- <div class="buy-sell-market">
|
|
|
- <div class="buy-sell-market-title">
|
|
|
- <a class="backIcon" @click="cancelAction">
|
|
|
- <LeftOutlined />
|
|
|
- </a>
|
|
|
- <div class="titleBtn">
|
|
|
- <div class="name">{{ selectedRow.goodscode }} {{ selectedRow.goodsname }}</div>
|
|
|
- <div class="arrowRightIcon"></div>
|
|
|
+ <!-- 买卖大厅 -->
|
|
|
+ <div class="buy-sell-market">
|
|
|
+ <div class="buy-sell-market-title">
|
|
|
+ <a class="backIcon"
|
|
|
+ @click="cancelAction">
|
|
|
+ <LeftOutlined />
|
|
|
+ </a>
|
|
|
+ <div class="titleBtn">
|
|
|
+ <div class="name">{{ selectedRow.goodscode }} {{ selectedRow.goodsname }}</div>
|
|
|
+ <div class="arrowRightIcon"></div>
|
|
|
+ </div>
|
|
|
+ <div class="inlineBar">
|
|
|
+ <div class="valNums bdf1 ml10">
|
|
|
+ <!-- 最新价 -->
|
|
|
+ <div class="firstNum start"
|
|
|
+ :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)">
|
|
|
+ {{ selectedRow.last }}</div>
|
|
|
+ <div class="lastNum start">
|
|
|
+ <!-- 涨跌值 -->
|
|
|
+ <div :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)">
|
|
|
+ {{ quoteChange(selectedRow, selectedRow.decimalplace) }}</div>
|
|
|
+ <!-- 涨跌幅 -->
|
|
|
+ <div class="ml20"
|
|
|
+ :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)">
|
|
|
+ {{ quoteAmplituOfVibration(selectedRow, selectedRow.decimalplace) }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="priceBar ml20">
|
|
|
+ <div class="inlineBar start">
|
|
|
+ <div class="greenBar green">
|
|
|
+ <div class="numBlock ml15">
|
|
|
+ <div class="first">卖价</div>
|
|
|
+ <div class="last"
|
|
|
+ :class="handleQuotePriceColor(selectedRow.ask, selectedRow.presettle)">
|
|
|
+ {{ selectedRow.ask }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="numBlock">
|
|
|
+ <div class="first">卖量</div>
|
|
|
+ <div class="last">{{ selectedRow.askvolume }}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="inlineBar">
|
|
|
- <div class="valNums bdf1 ml10">
|
|
|
- <!-- 最新价 -->
|
|
|
- <div class="firstNum start" :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)"> {{ selectedRow.last }}</div>
|
|
|
- <div class="lastNum start">
|
|
|
- <!-- 涨跌值 -->
|
|
|
- <div :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)"> {{ quoteChange(selectedRow, selectedRow.decimalplace) }}</div>
|
|
|
- <!-- 涨跌幅 -->
|
|
|
- <div class="ml20" :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)"> {{ quoteAmplituOfVibration(selectedRow, selectedRow.decimalplace) }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="priceBar ml20">
|
|
|
- <div class="inlineBar start">
|
|
|
- <div class="greenBar green">
|
|
|
- <div class="numBlock ml15">
|
|
|
- <div class="first">卖价</div>
|
|
|
- <div class="last" :class="handleQuotePriceColor(selectedRow.ask, selectedRow.presettle)"> {{ selectedRow.ask }}</div>
|
|
|
- </div>
|
|
|
- <div class="numBlock">
|
|
|
- <div class="first">卖量</div>
|
|
|
- <div class="last">{{ selectedRow.askvolume }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="greenBar green">
|
|
|
- <div class="numBlock ml15">
|
|
|
- <div class="first">卖价</div>
|
|
|
- <div class="last">{{ selectedRow.sellprice }}</div>
|
|
|
- </div>
|
|
|
- <div class="numBlock">
|
|
|
- <div class="first">卖量</div>
|
|
|
- <div class="last">{{ selectedRow.sellqty }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="inlineBar start">
|
|
|
- <div class="redBar red1">
|
|
|
- <div class="numBlock">
|
|
|
- <div class="first">买价</div>
|
|
|
- <div class="last" :class="handleQuotePriceColor(selectedRow.bid, selectedRow.presettle)"> {{ selectedRow.bid }}</div>
|
|
|
- </div>
|
|
|
- <div class="numBlock">
|
|
|
- <div class="first">买量</div>
|
|
|
- <div class="last">{{ selectedRow.bidvolume }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div class="inlineBar start">
|
|
|
+ <div class="redBar red1">
|
|
|
+ <div class="numBlock">
|
|
|
+ <div class="first">买价</div>
|
|
|
+ <div class="last"
|
|
|
+ :class="handleQuotePriceColor(selectedRow.bid, selectedRow.presettle)">
|
|
|
+ {{ selectedRow.bid }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="numBlock">
|
|
|
+ <div class="first">买量</div>
|
|
|
+ <div class="last">{{ selectedRow.bidvolume }}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <!-- 交易图表 -->
|
|
|
- <Chart v-if="showComponentsId === ComponentType.chart" @update="changeComponent" :selectedRow="selectedRow" />
|
|
|
- <!-- 成交明细 -->
|
|
|
- <StockExchange :selectedRow="selectedRow" v-if="showComponentsId === ComponentType.tradeDetail" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <!-- 交易图表 -->
|
|
|
+ <Chart v-if="showComponentsId === ComponentType.chart"
|
|
|
+ @update="changeComponent"
|
|
|
+ :selectedRow="selectedRow" />
|
|
|
+ <!-- 成交明细 -->
|
|
|
+ <StockExchange :selectedRow="selectedRow"
|
|
|
+ v-if="showComponentsId === ComponentType.tradeDetail" />
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|