| 提交 | 用户 | 时间 | ||
| 314507 | 1 | <template> |
| H | 2 | <div class="flex flex-row items-center gap-3 rounded bg-[var(--el-bg-color-overlay)] p-4"> |
| 3 | <div | |
| 4 | class="h-12 w-12 flex flex-shrink-0 items-center justify-center rounded-1" | |
| 5 | :class="`${iconColor} ${iconBgColor}`" | |
| 6 | > | |
| 7 | <Icon :icon="icon" class="!text-6" /> | |
| 8 | </div> | |
| 9 | <div class="flex flex-col gap-1"> | |
| 10 | <div class="flex items-center gap-1 text-gray-500"> | |
| 11 | <span class="text-3.5">{{ title }}</span> | |
| 12 | <el-tooltip :content="tooltip" placement="top-start" v-if="tooltip"> | |
| 13 | <Icon icon="ep:warning" class="item-center flex !text-3" /> | |
| 14 | </el-tooltip> | |
| 15 | </div> | |
| 16 | <div class="flex flex-row items-baseline gap-2"> | |
| 17 | <div class="text-7"> | |
| 18 | <CountTo :prefix="prefix" :end-val="value" :decimals="decimals" /> | |
| 19 | </div> | |
| 20 | <span | |
| 21 | v-if="percent != undefined" | |
| 22 | :class="toNumber(percent) > 0 ? 'text-red-500' : 'text-green-500'" | |
| 23 | > | |
| 24 | <span class="text-sm">{{ Math.abs(toNumber(percent)) }}%</span> | |
| 25 | <Icon | |
| 26 | :icon="toNumber(percent) > 0 ? 'ep:caret-top' : 'ep:caret-bottom'" | |
| 27 | class="ml-0.5 !text-3" | |
| 28 | /> | |
| 29 | </span> | |
| 30 | </div> | |
| 31 | </div> | |
| 32 | </div> | |
| 33 | </template> | |
| 34 | <script lang="ts" setup> | |
| 35 | import { propTypes } from '@/utils/propTypes' | |
| 36 | import { toNumber } from 'lodash-es' | |
| 37 | ||
| 38 | /** 统计卡片 */ | |
| 39 | defineOptions({ name: 'SummaryCard' }) | |
| 40 | ||
| 41 | defineProps({ | |
| 42 | title: propTypes.string.def(''), | |
| 43 | tooltip: propTypes.string.def(''), | |
| 44 | icon: propTypes.string.def(''), | |
| 45 | iconColor: propTypes.string.def(''), | |
| 46 | iconBgColor: propTypes.string.def(''), | |
| 47 | prefix: propTypes.string.def(''), | |
| 48 | value: propTypes.number.def(0), | |
| 49 | decimals: propTypes.number.def(0), | |
| 50 | percent: propTypes.oneOfType([Number, String]).def(undefined) | |
| 51 | }) | |
| 52 | </script> | |
