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

新增消息信息操作卡片；

Browse Source
This commit is contained in:
augushong
2022-04-04 14:53:17 +08:00
parent 4de1cb0ffa
commit a222dcd5b0
3 changed files with 95 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
demo/pc/card.html
View File

@@ -169,3 +169,54 @@
</div> </div>
</div> </div>
</fieldset> </fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>消息信息操作卡片</legend>
<div class="layui-field-box ">
<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>
</fieldset>

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

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

42
source/scss/card/_ul-card-message.scss Normal file
View File

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