101 lines
2.6 KiB
Vue
101 lines
2.6 KiB
Vue
<template>
|
|
<div class="quote-stats">
|
|
<div class="col" v-for="(col, i) in columns" :key="i">
|
|
<div class="row" v-for="item in col" :key="item.label">
|
|
<span class="label">{{ item.label }}</span>
|
|
<span class="value" :class="item.className">{{ item.value }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import type { QuoteData } from '../../types'
|
|
|
|
interface StatCell {
|
|
label: string
|
|
value: string
|
|
className?: string
|
|
}
|
|
|
|
const props = defineProps<{
|
|
quote: QuoteData
|
|
}>()
|
|
|
|
function formatWanSigned(hands: number): string {
|
|
const wan = hands / 10000
|
|
const sign = wan > 0 ? '+' : ''
|
|
return `${sign}${wan.toFixed(2)}万手`
|
|
}
|
|
|
|
const columns = computed((): StatCell[][] => {
|
|
const q = props.quote
|
|
const chgClass = q.change >= 0 ? 'price-up' : 'price-down'
|
|
const deltaClass = q.amountDelta >= 0 ? 'price-up' : 'price-down'
|
|
return [
|
|
[
|
|
{ label: '开盘', value: q.open.toFixed(2) },
|
|
{ label: '涨跌', value: `${q.change.toFixed(2)}`, className: chgClass },
|
|
{ label: '均价', value: q.avg.toFixed(2) },
|
|
],
|
|
[
|
|
{ label: '最高', value: q.high.toFixed(2), className: 'price-up' },
|
|
{ label: '结算', value: q.settlement.toFixed(2) },
|
|
{ label: '成交额', value: `${q.amount}亿` },
|
|
],
|
|
[
|
|
{ label: '持仓量', value: `${(q.openInterest / 10000).toFixed(2)}万` },
|
|
{ label: '振幅', value: `${q.amplitude}%` },
|
|
{ label: '外盘', value: `${(q.outerVol / 10000).toFixed(2)}万`, className: 'price-up' },
|
|
],
|
|
[
|
|
{ label: '昨收', value: q.prevClose.toFixed(2) },
|
|
{ label: '成交量', value: `${(q.volume / 10000).toFixed(2)}万手` },
|
|
{ label: '内盘', value: `${(q.innerVol / 10000).toFixed(2)}万`, className: 'price-down' },
|
|
],
|
|
[
|
|
{ label: '最低', value: q.low.toFixed(2), className: 'price-down' },
|
|
{ label: '昨结', value: q.prevSettlement.toFixed(2) },
|
|
{ label: '日增', value: formatWanSigned(q.amountDelta), className: deltaClass },
|
|
],
|
|
]
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.quote-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: 8px 16px;
|
|
padding: 12px 16px;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
font-size: 13px;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.label {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.value {
|
|
font-variant-numeric: tabular-nums;
|
|
font-weight: 500;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.quote-stats {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
</style>
|