|
|
@@ -1,53 +1,72 @@
|
|
|
<template>
|
|
|
<div class="app-quote-price">
|
|
|
- <div class="app-quote-price__price" v-if="quote">
|
|
|
- <div class="wrap-left">
|
|
|
- <div class="price">
|
|
|
+ <div class="app-quote-price__main" v-if="quote">
|
|
|
+ <div class="block-left">
|
|
|
+ <div class="top-content">
|
|
|
<span :class="quote.lastColor">{{ handleNumberValue(quote.last) }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="bottom-content">
|
|
|
<span :class="quote.lastColor">{{ handleNumberValue(quote.rise.toFixed(quote.decimalplace)) }}</span>
|
|
|
<span :class="quote.lastColor">{{ parsePercent(quote.change) }}</span>
|
|
|
</div>
|
|
|
- <div class="time">
|
|
|
- <span>{{ formatDate(quote.lasttime, 'MM-DD HH:mm:ss') }}</span>
|
|
|
- </div>
|
|
|
</div>
|
|
|
- <div class="wrap-right">
|
|
|
- <slot></slot>
|
|
|
+ <div class="block-right">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <span>开盘</span>
|
|
|
+ <span>{{ handleNumberValue(quote.opened) }}</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>最高</span>
|
|
|
+ <span :class="quote.highestColor">{{ handleNumberValue(quote.highest) }}</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>涨停</span>
|
|
|
+ <span>{{ handleNumberValue(quote.limitup) }}</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>昨结</span>
|
|
|
+ <span>{{ handleNumberValue(quote.presettle) }}</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>最低</span>
|
|
|
+ <span :class="quote.lowestColor">{{ handleNumberValue(quote.lowest) }}</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>跌停</span>
|
|
|
+ <span>{{ handleNumberValue(quote.limitdown) }}</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="app-quote-price__info" v-if="quote">
|
|
|
- <ul>
|
|
|
+ <div class="app-quote-price__more" v-if="quote">
|
|
|
+ <div class="block-icon" @click="showMore = !showMore">
|
|
|
+ <Icon name="arrow-down" />
|
|
|
+ </div>
|
|
|
+ <ul v-show="showMore">
|
|
|
<li>
|
|
|
- <span>买价</span>
|
|
|
- <span :class="quote.bidColor">{{ handleNumberValue(quote.bid) }}</span>
|
|
|
+ <span>买量</span>
|
|
|
+ <span>{{ handleNumberValue(quote.bidvolume) }}</span>
|
|
|
</li>
|
|
|
<li>
|
|
|
- <span>开盘</span>
|
|
|
- <span>{{ handleNumberValue(quote.opened) }}</span>
|
|
|
+ <span>卖量</span>
|
|
|
+ <span>{{ handleNumberValue(quote.askvolume) }}</span>
|
|
|
</li>
|
|
|
<li>
|
|
|
- <span>最高</span>
|
|
|
- <span :class="quote.highestColor">{{ handleNumberValue(quote.highest) }}</span>
|
|
|
+ <span>买价</span>
|
|
|
+ <span>{{ handleNumberValue(quote.bid) }}</span>
|
|
|
</li>
|
|
|
<li>
|
|
|
<span>卖价</span>
|
|
|
- <span :class="quote.askColor">{{ handleNumberValue(quote.ask) }}</span>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <span>昨结</span>
|
|
|
- <span>{{ handleNumberValue(quote.presettle) }}</span>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <span>最低</span>
|
|
|
- <span :class="quote.lowestColor">{{ handleNumberValue(quote.lowest) }}</span>
|
|
|
+ <span>{{ handleNumberValue(quote.ask) }}</span>
|
|
|
</li>
|
|
|
<li>
|
|
|
- <span>涨停</span>
|
|
|
- <span>{{ handleNumberValue(quote.limitup) }}</span>
|
|
|
+ <span>均价</span>
|
|
|
+ <span>{{ handleNumberValue(quote.averageprice) }}</span>
|
|
|
</li>
|
|
|
<li>
|
|
|
- <span>跌停</span>
|
|
|
- <span>{{ handleNumberValue(quote.limitdown) }}</span>
|
|
|
+ <span>振幅</span>
|
|
|
+ <span>{{ handleNumberValue(quote.amplitude.toFixed(2)) }}</span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
@@ -55,7 +74,9 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { parsePercent, handleNumberValue, formatDate } from '@/filters'
|
|
|
+import { shallowRef } from 'vue'
|
|
|
+import { Icon } from 'vant'
|
|
|
+import { parsePercent, handleNumberValue } from '@/filters'
|
|
|
import { useFuturesStore } from '@/stores'
|
|
|
|
|
|
const props = defineProps({
|
|
|
@@ -67,6 +88,7 @@ const props = defineProps({
|
|
|
|
|
|
const futuresStore = useFuturesStore()
|
|
|
const quote = futuresStore.getQuoteInfo(props.goodsCode)
|
|
|
+const showMore = shallowRef(true)
|
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|