73 lines
1.6 KiB
Vue
73 lines
1.6 KiB
Vue
<template>
|
||
<section class="position-panel card">
|
||
<el-tabs v-model="tab">
|
||
<el-tab-pane label="总持仓" name="total" />
|
||
<el-tab-pane label="成交量" name="volume" />
|
||
<el-tab-pane label="净持仓" name="net" />
|
||
</el-tabs>
|
||
<div v-if="tab !== 'total'" class="placeholder-tip">当前为占位数据（结构与总持仓一致）</div>
|
||
<div class="cols">
|
||
<div class="col">
|
||
<h3 class="long-title">多单持仓前20名</h3>
|
||
<PositionDonut :list="data.long" />
|
||
<PositionTable :list="data.long" qty-label="多单" />
|
||
</div>
|
||
<div class="col">
|
||
<h3 class="short-title">空单持仓前20名</h3>
|
||
<PositionDonut :list="data.short" />
|
||
<PositionTable :list="data.short" qty-label="空单" />
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
import type { PositionsData } from '../../types'
|
||
import PositionDonut from './PositionDonut.vue'
|
||
import PositionTable from './PositionTable.vue'
|
||
|
||
defineProps<{
|
||
data: PositionsData
|
||
}>()
|
||
|
||
const tab = ref('total')
|
||
</script>
|
||
|
||
<style scoped>
|
||
.position-panel {
|
||
padding: 12px 16px 16px;
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.placeholder-tip {
|
||
font-size: 12px;
|
||
color: var(--text-secondary);
|
||
margin: -4px 0 8px;
|
||
}
|
||
|
||
.cols {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 20px;
|
||
}
|
||
|
||
.long-title {
|
||
margin: 0 0 8px;
|
||
color: var(--long);
|
||
font-size: 14px;
|
||
}
|
||
|
||
.short-title {
|
||
margin: 0 0 8px;
|
||
color: var(--short);
|
||
font-size: 14px;
|
||
}
|
||
|
||
@media (max-width: 960px) {
|
||
.cols {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style>
|