All files / src/components/feature MetricCard.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<script setup lang="ts">
defineProps<{
  label: string
  value: string
  hint?: string
  feature?: boolean
}>()
</script>
 
<template>
  <div
    class="rounded-2xl border border-silver-200 bg-white shadow-card transition-shadow hover:shadow-soft"
    :class="feature ? 'overflow-hidden p-5' : 'border-silver-200 p-4'"
  >
    <div v-if="feature" class="-mx-5 -mt-5 mb-4 h-1 bg-brand-600"></div>
    <div class="text-xs text-silver-500">{{ label }}</div>
    <!-- 金额无空格不可断行，字号随屏宽伸缩，防止小屏（小程序 web-view）溢出卡片 -->
    <div
      class="tnum mt-2 font-semibold tracking-tight text-slate-900"
      :class="feature ? 'text-[clamp(20px,6.4vw,28px)] leading-tight' : 'text-[clamp(13px,4.2vw,20px)]'"
    >{{ value }}</div>
    <div v-if="hint" class="mt-1 text-xs text-slate-400">{{ hint }}</div>
  </div>
</template>