ulthon/ulthon_admin
1
0
Fork 0
mirror of https://gitee.com/ulthon/ulthon_admin.git synced 2026-11-08 12:00:49 +08:00
Code Issues 1 Packages Projects Releases Wiki Activity

feat(table): 内置卡片形态与本地化样式

Browse Source
This commit is contained in:
augushong
2026-09-11 01:45:37 +00:00
parent a96137e290
commit 26534aed1c
3 changed files with 396 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
public/static/admin/css/public.css
View File

@@ -175,8 +175,7 @@ body {
.layuimini-upload-show a img {
height: 80px;
-o-object-fit: cover;
object-fit: cover;
object-fit: cover;
}
.layuimini-upload-show .uploads-delete-tip {
@@ -414,6 +413,8 @@ table样式
}
.layui-layer-easy .layui-layer-moves {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
@@ -727,6 +728,138 @@ table样式
border-radius: 0;
}
.ua-layout-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
}
.ua-layout-empty {
padding: 24px 0;
text-align: center;
color: #999;
}
.ua-layout-loading {
min-height: 60px;
opacity: 0.55;
pointer-events: none;
}
.ua-data-card {
display: flex;
flex-direction: column;
padding: 10px 12px;
border: 1px solid #f2f2f2;
border-radius: 5px;
background-color: #fff;
cursor: pointer;
transition: border-color 0.2s, box-shadow 0.2s;
}
.ua-data-card:hover {
border-color: #d2d2d2;
}
.ua-data-card-checked {
border-color: rgb(22, 183, 119);
box-shadow: 0 0 0 1px rgb(22, 183, 119) inset;
}
.ua-data-card-disabled {
background-color: #fafafa;
cursor: not-allowed;
}
.ua-data-card-disabled .ua-data-card-title,
.ua-data-card-disabled .ua-data-card-item-value,
.ua-data-card-disabled .ua-data-card-time {
color: #c2c2c2;
}
.ua-data-card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 8px;
margin-bottom: 8px;
border-bottom: 1px solid #f2f2f2;
}
.ua-data-card-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: bold;
}
.ua-data-card-check {
flex: none;
margin-left: 8px;
color: #d2d2d2;
font-size: 18px;
line-height: 1;
}
.ua-data-card-checked .ua-data-card-check {
color: rgb(22, 183, 119);
}
.ua-data-card-body {
flex: 1;
}
.ua-data-card-item {
display: flex;
margin-bottom: 4px;
line-height: 22px;
}
.ua-data-card-item:last-child {
margin-bottom: 0;
}
.ua-data-card-item-title {
flex: none;
color: #999;
}
.ua-data-card-item-title::after {
content: "：";
}
.ua-data-card-item-value {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ua-data-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid #f2f2f2;
}
.ua-data-card-time {
color: #999;
font-size: 12px;
}
.ua-data-card-operat {
display: flex;
flex-wrap: wrap;
gap: 4px;
justify-content: flex-end;
}
.ua-data-card-operat a {
margin: 0;
}
@media (max-width: 768px) {
.ua-layout-cards {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.layuimini-form .layui-form-item {
padding-right: 0;
@@ -761,4 +894,4 @@ table样式
.search-tab .layui-tabs-body {
display: none;
}
}

142
public/static/admin/css/public.scss
View File

@@ -740,6 +740,148 @@ table样式
}
// 多形态渲染：内置 card 形态（模板管线给容器挂 .ua-layout-cards，卡片本体为
// .ua-data-card 族；admin-table.js 内置 card 模板产出，样式本地化不依赖 CDN）
.ua-layout-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
}
.ua-layout-empty {
padding: 24px 0;
text-align: center;
color: #999;
}
// 模板管线 reload 期间的加载态标记（wrapper 在 done 后移除）
.ua-layout-loading {
min-height: 60px;
opacity: .55;
pointer-events: none;
}
.ua-data-card {
display: flex;
flex-direction: column;
padding: 10px 12px;
border: 1px solid #f2f2f2;
border-radius: 5px;
background-color: #fff;
cursor: pointer;
transition: border-color .2s, box-shadow .2s;
&:hover {
border-color: #d2d2d2;
}
}
.ua-data-card-checked {
border-color: rgb(22, 183, 119);
box-shadow: 0 0 0 1px rgb(22, 183, 119) inset;
}
// 禁用行（_disabled）：整卡置灰不可勾选（卡内操作按钮仍可用，与引擎 LAY_DISABLED 只锁勾选的语义一致）
.ua-data-card-disabled {
background-color: #fafafa;
cursor: not-allowed;
.ua-data-card-title,
.ua-data-card-item-value,
.ua-data-card-time {
color: #c2c2c2;
}
}
.ua-data-card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 8px;
margin-bottom: 8px;
border-bottom: 1px solid #f2f2f2;
}
.ua-data-card-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: bold;
}
.ua-data-card-check {
flex: none;
margin-left: 8px;
color: #d2d2d2;
font-size: 18px;
line-height: 1;
}
.ua-data-card-checked .ua-data-card-check {
color: rgb(22, 183, 119);
}
.ua-data-card-body {
flex: 1;
}
.ua-data-card-item {
display: flex;
margin-bottom: 4px;
line-height: 22px;
&:last-child {
margin-bottom: 0;
}
}
.ua-data-card-item-title {
flex: none;
color: #999;
&::after {
content: '：';
}
}
.ua-data-card-item-value {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ua-data-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid #f2f2f2;
}
.ua-data-card-time {
color: #999;
font-size: 12px;
}
.ua-data-card-operat {
display: flex;
flex-wrap: wrap;
gap: 4px;
justify-content: flex-end;
a {
margin: 0;
}
}
@media (max-width: 768px) {
.ua-layout-cards {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.layuimini-form .layui-form-item {
padding-right: 0;