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;

View File

@@ -89,8 +89,7 @@
.elem-style-neomorphic .elem-style-sicfi .layui-side.layui-bg-black > .layuimini-menu-left > ul,
.elem-style-sicfi .elem-style-neomorphic .layuimini-menu-left-zoom > ul,
.elem-style-neomorphic .elem-style-sicfi .layuimini-menu-left-zoom > ul, .elem-style-sicfi .elem-style-neomorphic .layuimini-qiuck-module, .elem-style-neomorphic .elem-style-sicfi .layuimini-qiuck-module, .elem-style-sicfi .elem-style-neomorphic .panel, .elem-style-neomorphic .elem-style-sicfi .panel, .elem-style-sicfi .elem-style-neomorphic .layui-card, .elem-style-neomorphic .elem-style-sicfi .layui-card, .elem-style-sicfi .elem-style-neomorphic .layui-layer, .elem-style-neomorphic .elem-style-sicfi .layui-layer, .elem-style-sicfi .elem-style-neomorphic .layuimini-main, .elem-style-neomorphic .elem-style-sicfi .layuimini-main, .elem-style-sicfi .elem-style-neomorphic .layui-table-tool .layui-inline[lay-event], .elem-style-neomorphic .layui-table-tool .elem-style-sicfi .layui-inline[lay-event], .elem-style-sicfi .elem-style-win7 .layui-layer-easy .layui-layer-btn a, .elem-style-win7 .layui-layer-easy .layui-layer-btn .elem-style-sicfi a, .elem-style-sicfi .elem-style-nes .layui-layer-easy .layui-layer-btn a, .elem-style-nes .layui-layer-easy .layui-layer-btn .elem-style-sicfi a, .elem-style-sicfi .elem-style-nes .layuimini-container .layui-table-tool .layui-inline[lay-event], .elem-style-nes .layuimini-container .layui-table-tool .elem-style-sicfi .layui-inline[lay-event], .elem-style-sicfi .elem-style-gtk .layuimini-header-menu > li.layui-nav-item, .elem-style-gtk .elem-style-sicfi .layuimini-header-menu > li.layui-nav-item, .elem-style-sicfi .elem-style-gtk .layui-tab-brief > .layui-tab-title li, .elem-style-gtk .layui-tab-brief > .layui-tab-title .elem-style-sicfi li, .elem-style-sicfi .elem-style-gtk .layui-laydate-footer span, .elem-style-gtk .layui-laydate-footer .elem-style-sicfi span, .elem-style-sicfi .elem-style-gtk .laydate-footer-btns span, .elem-style-gtk .laydate-footer-btns .elem-style-sicfi span, .elem-style-sicfi .elem-style-gtk .layuimini-container .layui-table-tool .layui-inline[lay-event], .elem-style-gtk .layuimini-container .layui-table-tool .elem-style-sicfi .layui-inline[lay-event], .elem-style-sicfi .layui-layer-easy .layui-layer-btn a {
-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 0);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 0);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 0);
padding-right: 10px;
position: relative;
background-color: transparent;
@@ -119,8 +118,7 @@
display: block;
position: absolute;
z-index: -1;
-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 0);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 0);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 0);
width: 100%;
height: 100%;
left: -0.5px;
@@ -138,8 +136,7 @@
display: block;
position: absolute;
z-index: -1;
-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 0);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 0);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 0);
width: 100%;
height: 100%;
left: -0.5px;
@@ -275,8 +272,7 @@
border-color: rgb(126, 252, 246);
border-width: 1px;
border-style: solid;
-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 0);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 0);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 0);
position: absolute;
left: 0;
top: 0;
@@ -298,8 +294,7 @@
background-color: rgb(2, 17, 20) !important;
}
.elem-style-sicfi .layuimini-color .elem-content li {
-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 0);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 0);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 0);
}
.elem-style-sicfi .layuimini-color .elem-content li.layui-this {
background-color: rgb(126, 252, 246);
@@ -671,8 +666,7 @@
background-color: rgb(126, 252, 246);
border-color: rgb(6, 216, 215);
color: rgb(126, 252, 246) !important;
-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 0);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 0);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 0);
}
.elem-style-sicfi .layui-layer-shade {
background-color: #fff !important;
@@ -682,8 +676,7 @@
width: calc(100% - 10px);
}
.elem-style-sicfi .layuimini-menu-left .layui-nav .layui-nav-item {
-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 0);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 0);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 0);
color: rgb(126, 252, 246);
background-color: rgba(62, 251, 251, 0.5);
}