feat: 实现基本的详情生成

This commit is contained in:
augushong
2026-01-05 22:59:12 +08:00
parent 528ff69897
commit 3fdea8b85b
20 changed files with 1430 additions and 15 deletions

View File

@@ -532,6 +532,130 @@ table样式
white-space: nowrap;
}
/**
详情页面样式
*/
/* 详情页面容器 */
.detail-container {
background-color: #ffffff;
}
/* 详情页面卡片 */
.detail-card {
background-color: #ffffff;
border: 1px solid #e8e8e8;
border-radius: 4px;
}
/* 详情页面头部 */
.detail-header {
background-color: #f8f9fa;
border-bottom: 1px solid #e8e8e8;
}
/* 详情标题 */
.detail-title {
font-size: 20px;
font-weight: bold;
color: #333;
}
/* 详情ID */
.detail-id {
font-size: 12px;
color: #999;
}
/* 详情内容区域 */
.detail-content {
background-color: #ffffff;
}
/* 左侧主体内容 */
.detail-main {
background-color: #ffffff;
}
/* 右侧基础信息 */
.detail-side {
background-color: #f5f7fa;
border-radius: 4px;
}
/* 右侧面板标题 */
.detail-side-title {
font-size: 16px;
font-weight: bold;
color: #333;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #e8e8e8;
}
/* 字段组样式 */
.detail-field-group {
margin-bottom: 0;
}
/* 字段项样式 */
.detail-field-item {
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #f0f0f0;
overflow: hidden;
}
.detail-field-item:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
/* 字段标签样式 */
.detail-field-label {
font-weight: bold;
color: #666;
margin-bottom: 5px;
font-size: 14px;
float: left;
width: 100px;
text-align: left;
}
/* 字段值样式 */
.detail-field-value {
color: #333;
line-height: 1.5;
font-size: 14px;
margin-left: 110px;
min-height: 30px;
word-break: break-word;
}
/* 详情图片样式 */
.detail-image {
max-width: 100%;
height: auto;
border-radius: 4px;
border: 1px solid #e8e8e8;
}
/* 详情操作按钮 */
.detail-actions {
text-align: right;
}
/* 响应式设计 */
@media (max-width: 768px) {
.detail-field-label {
float: none;
width: 100%;
margin-bottom: 5px;
}
.detail-field-value {
margin-left: 0;
}
}
.search-hide-item {
display: none;
}

View File

@@ -538,8 +538,131 @@ table样式
}
/**
详情页面样式
*/
/* 详情页面容器 */
.detail-container {
background-color: #ffffff;
}
/* 详情页面卡片 */
.detail-card {
background-color: #ffffff;
border: 1px solid #e8e8e8;
border-radius: 4px;
}
/* 详情页面头部 */
.detail-header {
background-color: #f8f9fa;
border-bottom: 1px solid #e8e8e8;
}
/* 详情标题 */
.detail-title {
font-size: 20px;
font-weight: bold;
color: #333;
}
/* 详情ID */
.detail-id {
font-size: 12px;
color: #999;
}
/* 详情内容区域 */
.detail-content {
background-color: #ffffff;
}
/* 左侧主体内容 */
.detail-main {
background-color: #ffffff;
}
/* 右侧基础信息 */
.detail-side {
background-color: #f5f7fa;
border-radius: 4px;
}
/* 右侧面板标题 */
.detail-side-title {
font-size: 16px;
font-weight: bold;
color: #333;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #e8e8e8;
}
/* 字段组样式 */
.detail-field-group {
margin-bottom: 0;
}
/* 字段项样式 */
.detail-field-item {
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #f0f0f0;
overflow: hidden;
}
.detail-field-item:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
/* 字段标签样式 */
.detail-field-label {
font-weight: bold;
color: #666;
margin-bottom: 5px;
font-size: 14px;
float: left;
width: 100px;
text-align: left;
}
/* 字段值样式 */
.detail-field-value {
color: #333;
line-height: 1.5;
font-size: 14px;
margin-left: 110px;
min-height: 30px;
word-break: break-word;
}
/* 详情图片样式 */
.detail-image {
max-width: 100%;
height: auto;
border-radius: 4px;
border: 1px solid #e8e8e8;
}
/* 详情操作按钮 */
.detail-actions {
text-align: right;
}
/* 响应式设计 */
@media (max-width: 768px) {
.detail-field-label {
float: none;
width: 100%;
margin-bottom: 5px;
}
.detail-field-value {
margin-left: 0;
}
}
.search-hide-item {
display: none;