mirror of
https://gitee.com/ulthon/ulthon_admin.git
synced 2026-07-07 18:42:49 +08:00
feat: 实现基本的详情生成
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user