ulthon/layui-ul
1
0
Fork 0
mirror of https://gitee.com/ulthon/layui-ul.git synced 2026-07-09 13:42:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 迁移消息信息操作卡片

Browse Source
This commit is contained in:
augushong
2025-08-31 12:03:12 +08:00
parent b34f6c00e7
commit c2f7b26a53
11 changed files with 91 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
demo/pc/card.html
View File

@@ -3,58 +3,8 @@
<div class="layui-field-box "> <div class="layui-field-box ">
<div class="ul-padding-md ul-bg-gray"> <div class="ul-padding-md ul-bg-gray">
<div class="ul-card-message">
<div class="header">
<div class="title">
奥宏科技·预约会议
</div>
<div class="status">
技术人员
</div>
</div>
<div class="body">
<div class="item">
<div class="item-title">
预约时间
</div>
<div class="item-value">
2022年4月4日14:29:12
</div>
</div>
<div class="item">
<div class="item-title">
地点
</div>
<div class="item-value">
一楼会议室
</div>
</div>
<div class="item">
<div class="item-title">
备注
</div>
<div class="item-value">
备注内容备注内容备注内容备注内容备注内容备注内容备注内容备注内容备注内容备注内容备注内容备注内容
</div>
</div>
</div>
<div class="footer">
<div class="layui-btn layui-btn-sm layui-btn-primary">取消</div>
<div class="layui-btn layui-btn-sm layui-btn-normal">确认</div>
</div>
</div>
</div> </div>
</div> </div>
</fieldset> </fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>数据详情卡片-简约</legend>
<div class="layui-field-box">
<div class="ul-mobile-box">
</div>
</div>
</fieldset>

74
public/cdn/layui-ul.css
View File

@@ -356,43 +356,6 @@
overflow: hidden; overflow: hidden;
} }
.ul-card-message {
border-radius: 10px 10px 0 0;
background-color: #fff;
}
.ul-card-message .header {
padding: 15px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
font-weight: 600;
border-bottom: 2px solid #eee;
}
.ul-card-message .body {
padding: 15px;
padding-bottom: 0;
}
.ul-card-message .body .item {
display: flex;
align-items: flex-start;
justify-content: flex-start;
line-height: 1.8;
margin-bottom: 10px;
}
.ul-card-message .body .item .item-title {
width: 90px;
color: #999;
}
.ul-card-message .body .item .item-value {
white-space: normal;
width: calc(100% - 90px);
}
.ul-card-message .footer {
text-align: right;
padding: 15px;
}
.ul-group-title-simple { .ul-group-title-simple {
line-height: 30px; line-height: 30px;
font-size: 16px; font-size: 16px;
@@ -1012,6 +975,43 @@
padding: 5px 15px 5px 15px; padding: 5px 15px 5px 15px;
} }
.ul-card-message {
border-radius: 10px 10px 0 0;
background-color: #fff;
}
.ul-card-message .header {
padding: 15px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
font-weight: 600;
border-bottom: 2px solid #eee;
}
.ul-card-message .body {
padding: 15px;
padding-bottom: 0;
}
.ul-card-message .body .item {
display: flex;
align-items: flex-start;
justify-content: flex-start;
line-height: 1.8;
margin-bottom: 10px;
}
.ul-card-message .body .item .item-title {
width: 90px;
color: #999;
}
.ul-card-message .body .item .item-value {
white-space: normal;
width: calc(100% - 90px);
}
.ul-card-message .footer {
text-align: right;
padding: 15px;
}
.ul-card-money { .ul-card-money {
padding: 26px; padding: 26px;
background-color: #1E9FFF; background-color: #1E9FFF;

2
public/cdn/layui-ul.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
source/components/_index.scss
View File

@@ -6,6 +6,7 @@
@import './card/ul-card-data-a/index'; @import './card/ul-card-data-a/index';
@import './card/ul-card-data-simple/index'; @import './card/ul-card-data-simple/index';
@import './card/ul-card-file/index'; @import './card/ul-card-file/index';
@import './card/ul-card-message/index';
@import './card/ul-card-money/index'; @import './card/ul-card-money/index';
@import './card/ul-card-qrcode/index'; @import './card/ul-card-qrcode/index';
@import './card/ul-card-simple-icon/index'; @import './card/ul-card-simple-icon/index';

6
source/components/card/ul-card-message/_index.env Normal file
View File

@@ -0,0 +1,6 @@
title=消息信息操作卡片
padding=0
margin=0
gray=0
mobile=0
inner_margin=0

40
source/components/card/ul-card-message/_index.html Normal file
View File

@@ -0,0 +1,40 @@
<div class="ul-card-message">
<div class="header">
<div class="title">
奥宏科技·预约会议
</div>
<div class="status">
技术人员
</div>
</div>
<div class="body">
<div class="item">
<div class="item-title">
预约时间
</div>
<div class="item-value">
2022年4月4日14:29:12
</div>
</div>
<div class="item">
<div class="item-title">
地点
</div>
<div class="item-value">
一楼会议室
</div>
</div>
<div class="item">
<div class="item-title">
备注
</div>
<div class="item-value">
备注内容备注内容备注内容备注内容备注内容备注内容备注内容备注内容备注内容备注内容备注内容备注内容
</div>
</div>
</div>
<div class="footer">
<div class="layui-btn layui-btn-sm layui-btn-primary">取消</div>
<div class="layui-btn layui-btn-sm layui-btn-normal">确认</div>
</div>
</div>

0
source/components/card/ul-card-message/_index.md Normal file
View File

5
source/components/card/ul-card-message/_index.php Normal file
View File

@@ -0,0 +1,5 @@
<?php
return [
];

0
source/scss/card/_ul-card-message.scss → source/components/card/ul-card-message/_index.scss
View File

3
source/scss/card/_index.scss
View File

@@ -1,2 +1 @@
@import './ul-card-simple-icon'; @import './ul-card-simple-icon';
@import './ul-card-message';

36
source/scss/layui-ul.css
View File

@@ -327,42 +327,6 @@
padding: 15px; padding: 15px;
} }
.ul-card-message {
border-radius: 10px 10px 0 0;
background-color: #fff;
}
.ul-card-message .header {
padding: 15px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
font-weight: 600;
border-bottom: 2px solid #eee;
}
.ul-card-message .body {
padding: 15px;
padding-bottom: 0;
}
.ul-card-message .body .item {
display: flex;
align-items: flex-start;
justify-content: flex-start;
line-height: 1.8;
margin-bottom: 10px;
}
.ul-card-message .body .item .item-title {
width: 90px;
color: #999;
}
.ul-card-message .body .item .item-value {
white-space: normal;
width: calc(100% - 90px);
}
.ul-card-message .footer {
text-align: right;
padding: 15px;
}
.ul-jumbotron { .ul-jumbotron {
padding: 15px; padding: 15px;