127 lines
2.2 KiB
CSS
127 lines
2.2 KiB
CSS
/**
|
|
* 首页特定样式
|
|
*/
|
|
|
|
/* 仪表盘容器 */
|
|
.dashboard-container {
|
|
@apply p-2;
|
|
}
|
|
|
|
/* 统计卡片 */
|
|
.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;
|
|
}
|
|
} |