86 lines
2.9 KiB
Vue
86 lines
2.9 KiB
Vue
<template>
|
|
<div class="grid grid-cols-1 md:grid-cols-5 gap-4 mb-4">
|
|
<div class="rounded-md bg-gray-50 p-4">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="w-6 h-6 bg-blue-50 rounded-md flex items-center justify-center">
|
|
<el-icon class="text-blue-600 text-sm"><MegaphoneIcon /></el-icon>
|
|
</div>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="text-xs text-gray-500">总公告数</p>
|
|
<p class="text-xl font-semibold text-gray-900">{{ stats.total_announcements || 0 }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-md bg-gray-50 p-4">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="w-6 h-6 bg-green-50 rounded-md flex items-center justify-center">
|
|
<el-icon class="text-green-600 text-sm"><CheckCircleIcon /></el-icon>
|
|
</div>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="text-xs text-gray-500">已发布</p>
|
|
<p class="text-xl font-semibold text-gray-900">{{ stats.published_announcements || 0 }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-md bg-gray-50 p-4">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="w-6 h-6 bg-yellow-50 rounded-md flex items-center justify-center">
|
|
<el-icon class="text-yellow-600 text-sm"><ClockIcon /></el-icon>
|
|
</div>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="text-xs text-gray-500">草稿</p>
|
|
<p class="text-xl font-semibold text-gray-900">{{ stats.draft_announcements || 0 }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-md bg-gray-50 p-4">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="w-6 h-6 bg-orange-50 rounded-md flex items-center justify-center">
|
|
<el-icon class="text-orange-600 text-sm"><ArchiveBoxIcon /></el-icon>
|
|
</div>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="text-xs text-gray-500">已归档</p>
|
|
<p class="text-xl font-semibold text-gray-900">{{ stats.archived_announcements || 0 }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-md bg-gray-50 p-4">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="w-6 h-6 bg-purple-50 rounded-md flex items-center justify-center">
|
|
<el-icon class="text-purple-600 text-sm"><ClockIcon /></el-icon>
|
|
</div>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="text-xs text-gray-500">定时发布</p>
|
|
<p class="text-xl font-semibold text-gray-900">{{ stats.scheduled_announcements || 0 }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ArchiveBoxIcon, CheckCircleIcon, ClockIcon, MegaphoneIcon } from '@heroicons/vue/24/outline';
|
|
|
|
defineProps({
|
|
stats: {
|
|
type: Object,
|
|
default: () => ({})
|
|
}
|
|
})
|
|
</script>
|
|
|