35 lines
1.2 KiB
Vue
35 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import type { BreadthResponse } from '@/types/market-overview';
|
|
|
|
defineProps<{ response: BreadthResponse | null; loading: boolean }>();
|
|
</script>
|
|
|
|
<template>
|
|
<section class="overview-panel" aria-labelledby="breadth-title">
|
|
<div class="panel-heading">
|
|
<div>
|
|
<span class="section-kicker">市场宽度</span>
|
|
<h2 id="breadth-title">涨跌分布与量能</h2>
|
|
</div>
|
|
<span class="panel-meta">分钟级</span>
|
|
</div>
|
|
<div v-if="loading" class="module-placeholder">正在读取市场宽度…</div>
|
|
<div v-else-if="response?.status === 'unavailable'" class="module-unavailable">
|
|
<strong>暂不可用</strong>
|
|
<span>{{ response.warnings[0] }}</span>
|
|
</div>
|
|
<div v-else-if="response?.data" class="breadth-values">
|
|
<div>
|
|
<span>上涨</span><strong class="positive">{{ response.data.advancing }}</strong>
|
|
</div>
|
|
<div>
|
|
<span>下跌</span><strong class="negative">{{ response.data.declining }}</strong>
|
|
</div>
|
|
<div>
|
|
<span>平盘</span><strong>{{ response.data.unchanged }}</strong>
|
|
</div>
|
|
</div>
|
|
<div v-else class="module-placeholder">暂无宽度数据</div>
|
|
</section>
|
|
</template>
|