/** * 首页特定样式 */ /* 仪表盘容器 */ .dashboard-container { @apply pt-0; } /* 统计卡片 */ .stat-grid { @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 p-4; } .stat-card { @apply bg-white rounded-lg p-4 shadow transition-all duration-200 relative; } .stat-card:hover { @apply transform -translate-y-[3px] shadow-[0_4px_15px_rgba(0,0,0,0.1)]; } .stat-title { @apply text-sm text-gray-600 mb-2.5; } .stat-value { @apply text-2xl font-semibold text-gray-900 mb-2.5; } .stat-trend { @apply flex items-center text-xs; } .stat-trend.trend-up { @apply text-[#52c41a]; } .stat-trend.trend-down { @apply text-[#f5222d]; } .stat-icon { @apply absolute right-4 top-4 text-2xl text-[#00684a] opacity-20; } /* 快捷访问网格 */ .shortcut-grid { @apply grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 gap-4 p-4; } .shortcut-item { @apply flex flex-col items-center justify-center p-4 bg-white rounded-lg shadow transition-all duration-200 cursor-pointer text-gray-900 h-24; } .shortcut-item:hover { @apply transform -translate-y-[3px] shadow-[0_4px_12px_rgba(0,0,0,0.1)] bg-[rgba(0,104,74,0.05)] text-[#00684a]; } .shortcut-icon { @apply text-2xl text-[#00684a] mb-2.5; } .shortcut-label { @apply text-sm text-center; } /* 文档列表 */ .doc-list { @apply space-y-3 p-4; } .doc-item { @apply flex justify-between items-center p-3 border border-gray-100 rounded-lg hover:bg-gray-50 transition-colors duration-200; } .doc-info { @apply flex items-center; } .doc-icon { @apply text-2xl mr-3 text-primary; } .doc-name { @apply text-sm font-medium text-gray-800 mb-1; } .doc-meta { @apply text-xs text-gray-500; } .doc-status { @apply flex items-center; } /* 卡片样式 */ .dashboard-card { @apply bg-white rounded-lg shadow p-5 mb-5 transition-all duration-200; } .dashboard-card:hover { @apply transform -translate-y-[3px] shadow-[0_4px_15px_rgba(0,0,0,0.1)]; } .card-title { @apply text-base font-semibold mb-4 flex items-center text-gray-900; } .card-title i { @apply text-xl text-[#00684a] mr-2; } /* 响应式调整 */ @screen md { .stat-grid { @apply grid-cols-2; } } @screen lg { .stat-grid { @apply grid-cols-4; } }