188 lines
3.1 KiB
SCSS
188 lines
3.1 KiB
SCSS
/**
|
||
* 列表页卡片布局公共样式（筛选卡片 + 内容卡片 + 表头）
|
||
* 各业务模块通用，不限于专业模块
|
||
*
|
||
* 使用：@import '/@/assets/styles/page-cards.scss';
|
||
* 模板类名：.page-cards > .page-wrapper > .search-card / .content-card
|
||
*/
|
||
|
||
// 页面整体
|
||
.page-cards {
|
||
padding: 12px;
|
||
min-height: 100%;
|
||
background: var(--el-bg-color-page, #f5f6f8);
|
||
}
|
||
|
||
// 页面包装器
|
||
.page-wrapper {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
// 筛选卡片
|
||
.search-card {
|
||
border-radius: 8px;
|
||
border: 1px solid var(--el-border-color-lighter);
|
||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
|
||
background: var(--el-bg-color);
|
||
|
||
:deep(.el-card__body) {
|
||
padding: 18px 20px 5px 20px;
|
||
}
|
||
}
|
||
|
||
// 列表内容卡片
|
||
.content-card {
|
||
border-radius: 8px;
|
||
border: 1px solid var(--el-border-color-lighter);
|
||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
|
||
background: var(--el-bg-color);
|
||
|
||
:deep(.el-card__header) {
|
||
padding: 20px 20px 15px;
|
||
border-bottom: 1px solid var(--el-border-color-lighter);
|
||
}
|
||
|
||
:deep(.el-card__body) {
|
||
padding: 15px 20px 20px;
|
||
}
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.card-title {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
color: var(--el-text-color-primary);
|
||
|
||
.title-icon {
|
||
font-size: 16px;
|
||
color: var(--el-color-primary);
|
||
}
|
||
}
|
||
|
||
.header-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.action-group {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.header-right {
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 10px;
|
||
}
|
||
|
||
// 小屏幕适配（≤768px）
|
||
@media screen and (max-width: 768px) {
|
||
.page-cards {
|
||
padding: 8px;
|
||
}
|
||
|
||
.page-wrapper {
|
||
gap: 8px;
|
||
}
|
||
|
||
.search-card :deep(.el-card__body) {
|
||
padding: 12px 14px 4px 14px;
|
||
}
|
||
|
||
.content-card :deep(.el-card__header) {
|
||
padding: 14px 14px 12px;
|
||
}
|
||
|
||
.content-card :deep(.el-card__body) {
|
||
padding: 12px 14px 14px;
|
||
}
|
||
|
||
.card-header {
|
||
gap: 8px;
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 14px;
|
||
.title-icon {
|
||
font-size: 15px;
|
||
}
|
||
}
|
||
|
||
.header-actions {
|
||
gap: 8px;
|
||
}
|
||
|
||
.action-group {
|
||
gap: 8px;
|
||
// 按钮间距
|
||
.el-button {
|
||
margin-left: 0;
|
||
}
|
||
}
|
||
|
||
.header-right {
|
||
padding-left: 8px;
|
||
}
|
||
}
|
||
|
||
// 超小屏幕适配（≤576px）
|
||
@media screen and (max-width: 576px) {
|
||
.page-cards {
|
||
padding: 6px;
|
||
}
|
||
|
||
.page-wrapper {
|
||
gap: 6px;
|
||
}
|
||
|
||
.search-card :deep(.el-card__body) {
|
||
padding: 10px 12px 14px 12px;
|
||
}
|
||
|
||
.content-card :deep(.el-card__header) {
|
||
padding: 12px 12px 10px;
|
||
}
|
||
|
||
.content-card :deep(.el-card__body) {
|
||
padding: 10px 12px 12px;
|
||
}
|
||
|
||
.card-header {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 10px;
|
||
}
|
||
|
||
.header-actions {
|
||
width: 100%;
|
||
}
|
||
.action-group {
|
||
gap: 6px;
|
||
// 按钮间距
|
||
.el-button {
|
||
margin-left: 0;
|
||
}
|
||
}
|
||
|
||
.header-right {
|
||
width: 100%;
|
||
padding-left: 0;
|
||
padding-top: 8px;
|
||
border-left: none;
|
||
border-top: 1px solid var(--el-border-color-lighter);
|
||
}
|
||
}
|