fix
This commit is contained in:
吴红兵
@@ -16,237 +16,236 @@
|
||||
|
||||
// 页面容器
|
||||
.modern-page-container {
|
||||
padding: 20px;
|
||||
background: #f5f7fa;
|
||||
min-height: calc(100vh - 84px);
|
||||
padding: 20px;
|
||||
background: #f5f7fa;
|
||||
min-height: calc(100vh - 84px);
|
||||
}
|
||||
|
||||
// 页面包装器
|
||||
.page-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
// 搜索卡片
|
||||
.search-card {
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
:deep(.el-card__header) {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #f0f2f5;
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
|
||||
}
|
||||
:deep(.el-card__header) {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #f0f2f5;
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
|
||||
}
|
||||
|
||||
:deep(.el-card__body) {
|
||||
padding: 20px;
|
||||
}
|
||||
:deep(.el-card__body) {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// 内容卡片
|
||||
.content-card {
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
:deep(.el-card__header) {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #f0f2f5;
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
|
||||
}
|
||||
:deep(.el-card__header) {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #f0f2f5;
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
|
||||
}
|
||||
|
||||
:deep(.el-card__body) {
|
||||
padding: 20px;
|
||||
}
|
||||
:deep(.el-card__body) {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// 卡片头部
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
|
||||
.title-icon {
|
||||
margin-right: 8px;
|
||||
color: var(--el-color-primary);
|
||||
font-size: 18px;
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
|
||||
.title-icon {
|
||||
margin-right: 8px;
|
||||
color: var(--el-color-primary);
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
// 搜索表单 - 保持原有宽度
|
||||
.search-form {
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 18px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 18px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
font-weight: 500;
|
||||
color: #606266;
|
||||
}
|
||||
:deep(.el-form-item__label) {
|
||||
font-weight: 500;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
// 确保表单项宽度保持200px
|
||||
:deep(.el-select),
|
||||
:deep(.el-input) {
|
||||
width: 200px !important;
|
||||
}
|
||||
// 确保表单项宽度保持200px
|
||||
:deep(.el-select),
|
||||
:deep(.el-input) {
|
||||
width: 200px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 现代化表格
|
||||
.modern-table {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
:deep(.el-table__header) {
|
||||
th {
|
||||
background: linear-gradient(135deg, #fafbfc 0%, #f5f7fa 100%);
|
||||
color: #606266;
|
||||
font-weight: 600;
|
||||
border-bottom: 2px solid #e4e7ed;
|
||||
padding: 14px 0;
|
||||
}
|
||||
}
|
||||
:deep(.el-table__header) {
|
||||
th {
|
||||
background: linear-gradient(135deg, #fafbfc 0%, #f5f7fa 100%);
|
||||
color: #606266;
|
||||
font-weight: 600;
|
||||
border-bottom: 2px solid #e4e7ed;
|
||||
padding: 14px 0;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table__body) {
|
||||
tr {
|
||||
transition: all 0.2s ease;
|
||||
:deep(.el-table__body) {
|
||||
tr {
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f7ff;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: #f5f7ff;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
border-bottom: 1px solid #f0f2f5;
|
||||
padding: 16px 0;
|
||||
}
|
||||
}
|
||||
td {
|
||||
border-bottom: 1px solid #f0f2f5;
|
||||
padding: 16px 0;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table__row) {
|
||||
&:nth-child(even) {
|
||||
background-color: #fafbfc;
|
||||
}
|
||||
}
|
||||
:deep(.el-table__row) {
|
||||
&:nth-child(even) {
|
||||
background-color: #fafbfc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 分页包装器
|
||||
.pagination-wrapper {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #f0f2f5;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #f0f2f5;
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 768px) {
|
||||
.modern-page-container {
|
||||
padding: 12px;
|
||||
}
|
||||
.modern-page-container {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
gap: 12px;
|
||||
}
|
||||
.page-wrapper {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.search-card,
|
||||
.content-card {
|
||||
:deep(.el-card__header) {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
.search-card,
|
||||
.content-card {
|
||||
:deep(.el-card__header) {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
:deep(.el-card__body) {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
:deep(.el-card__body) {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
.card-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.header-actions {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
// 移动端保持表单宽度
|
||||
.search-form {
|
||||
:deep(.el-form-item) {
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
// 移动端保持表单宽度
|
||||
.search-form {
|
||||
:deep(.el-form-item) {
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.el-select),
|
||||
:deep(.el-input) {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
:deep(.el-select),
|
||||
:deep(.el-input) {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 动画效果
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.search-card,
|
||||
.content-card {
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
// 按钮样式优化
|
||||
:deep(.el-button) {
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s ease;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// 表格空状态优化
|
||||
:deep(.el-empty) {
|
||||
padding: 40px 0;
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -8,180 +8,180 @@
|
||||
|
||||
// 页面整体
|
||||
.page-cards {
|
||||
padding: 12px;
|
||||
min-height: 100%;
|
||||
background: var(--el-bg-color-page, #f5f6f8);
|
||||
padding: 12px;
|
||||
min-height: 100%;
|
||||
background: var(--el-bg-color-page, #f5f6f8);
|
||||
}
|
||||
|
||||
// 页面包装器
|
||||
.page-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
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);
|
||||
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;
|
||||
}
|
||||
: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);
|
||||
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__header) {
|
||||
padding: 20px 20px 15px;
|
||||
border-bottom: 1px solid var(--el-border-color-lighter);
|
||||
}
|
||||
|
||||
:deep(.el-card__body) {
|
||||
padding: 15px 20px 20px;
|
||||
}
|
||||
:deep(.el-card__body) {
|
||||
padding: 15px 20px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
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);
|
||||
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);
|
||||
}
|
||||
.title-icon {
|
||||
font-size: 16px;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.action-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
// 小屏幕适配（≤768px）
|
||||
@media screen and (max-width: 768px) {
|
||||
.page-cards {
|
||||
padding: 8px;
|
||||
}
|
||||
.page-cards {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
gap: 8px;
|
||||
}
|
||||
.page-wrapper {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.search-card :deep(.el-card__body) {
|
||||
padding: 12px 14px 4px 14px;
|
||||
}
|
||||
.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__header) {
|
||||
padding: 14px 14px 12px;
|
||||
}
|
||||
|
||||
.content-card :deep(.el-card__body) {
|
||||
padding: 12px 14px 14px;
|
||||
}
|
||||
.content-card :deep(.el-card__body) {
|
||||
padding: 12px 14px 14px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
gap: 8px;
|
||||
}
|
||||
.card-header {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 14px;
|
||||
.title-icon {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
.card-title {
|
||||
font-size: 14px;
|
||||
.title-icon {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
gap: 8px;
|
||||
}
|
||||
.header-actions {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.action-group {
|
||||
gap: 8px;
|
||||
// 按钮间距
|
||||
.el-button {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.action-group {
|
||||
gap: 8px;
|
||||
// 按钮间距
|
||||
.el-button {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.header-right {
|
||||
padding-left: 8px;
|
||||
}
|
||||
.header-right {
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// 超小屏幕适配（≤576px）
|
||||
@media screen and (max-width: 576px) {
|
||||
.page-cards {
|
||||
padding: 6px;
|
||||
}
|
||||
.page-cards {
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
gap: 6px;
|
||||
}
|
||||
.page-wrapper {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.search-card :deep(.el-card__body) {
|
||||
padding: 10px 12px 14px 12px;
|
||||
}
|
||||
.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__header) {
|
||||
padding: 12px 12px 10px;
|
||||
}
|
||||
|
||||
.content-card :deep(.el-card__body) {
|
||||
padding: 10px 12px 12px;
|
||||
}
|
||||
.content-card :deep(.el-card__body) {
|
||||
padding: 10px 12px 12px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
.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-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);
|
||||
}
|
||||
.header-right {
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
padding-top: 8px;
|
||||
border-left: none;
|
||||
border-top: 1px solid var(--el-border-color-lighter);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user