62 lines
984 B
CSS
62 lines
984 B
CSS
/**
|
|
* 卡片组件样式
|
|
*/
|
|
|
|
/* 基础卡片 */
|
|
.card {
|
|
@apply bg-white rounded-lg shadow overflow-hidden transition-all duration-200;
|
|
}
|
|
|
|
.card:hover {
|
|
@apply shadow-md;
|
|
}
|
|
|
|
/* 卡片头部 */
|
|
.card-header {
|
|
@apply px-5 py-4 border-b border-gray-100 flex items-center justify-between;
|
|
}
|
|
|
|
.card-title {
|
|
@apply text-base font-medium text-gray-900;
|
|
}
|
|
|
|
.card-title i {
|
|
@apply text-xl mr-2 text-primary;
|
|
}
|
|
|
|
/* 卡片内容 */
|
|
.card-body {
|
|
@apply p-1;
|
|
}
|
|
|
|
/* 卡片底部 */
|
|
.card-footer {
|
|
@apply px-5 py-4 bg-gray-50 border-t border-gray-100;
|
|
}
|
|
|
|
/* 卡片变体 */
|
|
.card-compact {
|
|
@apply shadow-sm;
|
|
}
|
|
|
|
.card-compact .card-header {
|
|
@apply py-3;
|
|
}
|
|
|
|
.card-compact .card-body {
|
|
@apply p-4;
|
|
}
|
|
|
|
.card-compact .card-footer {
|
|
@apply py-3;
|
|
}
|
|
|
|
/* 卡片布局 */
|
|
.card-grid {
|
|
@apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4;
|
|
}
|
|
|
|
/* 内容卡片 */
|
|
.content-card {
|
|
@apply border border-gray-100 rounded-lg shadow-sm hover:shadow transition-shadow duration-200;
|
|
} |