64 lines
2.2 KiB
Vue
64 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { Button } from '@/components/ui/button'
|
|
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
|
|
|
|
const stats = [
|
|
{ label: '总用户数', value: '12,345', trend: '+12.5%', up: true },
|
|
{ label: '活跃用户', value: '8,920', trend: '+8.2%', up: true },
|
|
{ label: '本月新增', value: '1,203', trend: '-3.1%', up: false },
|
|
{ label: '转化率', value: '24.8%', trend: '+5.6%', up: true },
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-6">
|
|
<div>
|
|
<h2 class="text-xl font-semibold">卡片示例</h2>
|
|
<p class="mt-1 text-sm text-muted-foreground">统计卡片和内容卡片</p>
|
|
</div>
|
|
|
|
<!-- Stat cards -->
|
|
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
|
<Card v-for="stat in stats" :key="stat.label">
|
|
<CardHeader class="pb-2">
|
|
<CardDescription>{{ stat.label }}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent class="pb-2">
|
|
<div class="text-2xl font-bold">{{ stat.value }}</div>
|
|
</CardContent>
|
|
<CardFooter class="text-xs" :class="stat.up ? 'text-emerald-600' : 'text-red-500'">
|
|
{{ stat.trend }}
|
|
</CardFooter>
|
|
</Card>
|
|
</div>
|
|
|
|
<!-- Content cards -->
|
|
<div class="grid gap-4 md:grid-cols-2">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>最近活动</CardTitle>
|
|
<CardDescription>团队最近的操作记录</CardDescription>
|
|
</CardHeader>
|
|
<CardContent class="space-y-2 text-sm text-muted-foreground">
|
|
<p>• 张三 新增了一条客户记录</p>
|
|
<p>• 李四 更新了产品配置</p>
|
|
<p>• 王五 导出了本月报表</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>快捷操作</CardTitle>
|
|
<CardDescription>常用功能入口</CardDescription>
|
|
</CardHeader>
|
|
<CardContent class="flex flex-wrap gap-2">
|
|
<Button variant="outline">新建订单</Button>
|
|
<Button variant="outline">导入数据</Button>
|
|
<Button variant="outline">生成报表</Button>
|
|
<Button variant="outline">发送通知</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</template>
|