feat(@vben/web-antd): 新增 CardTitle组件并优化 TimeSummaryChart
- 新增 CardTitle 组件用于统一卡片标题样式 - 在 TimeSummaryChart 中使用 CardTitle 组件替代原生标题 - 调整 EchartsUI 组件的 height 属性单位pull/181/MERGE
parent
f763ad2855
commit
dcffb9bbe3
|
@ -0,0 +1,33 @@
|
|||
<script lang="ts" setup>
|
||||
interface Props {
|
||||
title: string;
|
||||
}
|
||||
|
||||
defineProps<Props>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span class="card-title">{{ title }}</span>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.card-title {
|
||||
position: relative;
|
||||
padding-left: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.card-title::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
width: 3px;
|
||||
height: 14px;
|
||||
content: '';
|
||||
background: #1890ff;
|
||||
border-radius: 2px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1 @@
|
|||
export { default as CardTitle } from './card-title.vue';
|
|
@ -9,6 +9,8 @@ import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
|||
|
||||
import { Card } from 'ant-design-vue';
|
||||
|
||||
import { CardTitle } from '#/components/card';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
value?: Array<{ price: number; time: string }>;
|
||||
|
@ -112,9 +114,9 @@ watch(
|
|||
<template>
|
||||
<Card>
|
||||
<template #title>
|
||||
{{ title }}
|
||||
<CardTitle :title="title" />
|
||||
</template>
|
||||
<!-- 折线图 -->
|
||||
<EchartsUI ref="chartRef" :height="300" />
|
||||
<EchartsUI ref="chartRef" />
|
||||
</Card>
|
||||
</template>
|
||||
|
|
Loading…
Reference in New Issue