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

将数据详情卡片-简约改造为组件源码

Browse Source
This commit is contained in:
augushong
2024-03-13 16:41:33 +08:00
parent d427261737
commit b84c93cd0a
10 changed files with 102 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
demo/pc/card.html
View File

@@ -171,49 +171,7 @@
<legend>数据详情卡片-简约</legend> <legend>数据详情卡片-简约</legend>
<div class="layui-field-box"> <div class="layui-field-box">
<div class="ul-mobile-box"> <div class="ul-mobile-box">
<div class="ul-data-card">
<div class="header">
<div class="mian">
<i class="layui-icon layui-icon-user"></i>
<span>奥古斯宏</span>
</div>
<div class="plus">
<div class="layui-btn layui-btn-sm">详情</div>
</div>
</div>
<div class="body">
<div class="main">
<div class="item" data-repeat="3">
<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>
<div class="footer">
<div class="main">
2022年4月14日21:28:44
</div>
<div class="plus">
<div class="layui-btn layui-btn-sm layui-btn-normal">删除</div>
<div class="layui-btn layui-btn-sm layui-btn-primary">修改</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</fieldset> </fieldset>

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

@@ -389,49 +389,6 @@
padding: 15px; padding: 15px;
} }
.ul-data-card {
margin: 15px;
padding: 15px;
box-shadow: 0 0 3px #bbb;
border-radius: 5px;
}
.ul-data-card .header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
.ul-data-card .body {
padding: 10px 0;
}
.ul-data-card .body .main {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
}
.ul-data-card .body .main .item {
min-width: 50%;
display: flex;
align-items: center;
margin-bottom: 10px;
}
.ul-data-card .body .main .item .item-title {
font-size: 14px;
font-weight: 600;
}
.ul-data-card .body .main .item .item-value {
font-size: 14px;
}
.ul-data-card .footer {
border-top: 1px solid #eee;
padding-top: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.ul-group-title-simple { .ul-group-title-simple {
line-height: 30px; line-height: 30px;
font-size: 16px; font-size: 16px;
@@ -1045,6 +1002,49 @@
left: 0; left: 0;
} }
.ul-data-card {
margin: 15px;
padding: 15px;
box-shadow: 0 0 3px #bbb;
border-radius: 5px;
}
.ul-data-card .header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
.ul-data-card .body {
padding: 10px 0;
}
.ul-data-card .body .main {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
}
.ul-data-card .body .main .item {
min-width: 50%;
display: flex;
align-items: center;
margin-bottom: 10px;
}
.ul-data-card .body .main .item .item-title {
font-size: 14px;
font-weight: 600;
}
.ul-data-card .body .main .item .item-value {
font-size: 14px;
}
.ul-data-card .footer {
border-top: 1px solid #eee;
padding-top: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.ul-easy-image { .ul-easy-image {
margin: 5px; margin: 5px;
border-radius: 15px; border-radius: 15px;

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

File diff suppressed because one or more lines are too long

3
source/components/_index.scss
View File

@@ -4,6 +4,7 @@
@import './card/ul-card-file/index'; @import './card/ul-card-file/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-data-card/index';
@import './card/ul-easy-image/index'; @import './card/ul-easy-image/index';
@import './card/ul-info-card/index'; @import './card/ul-info-card/index';
@import './descriptions/ul-descriptions-form/index'; @import './descriptions/ul-descriptions-form/index';
@@ -35,4 +36,4 @@
@import './nav/ul-nav-block/index'; @import './nav/ul-nav-block/index';
@import './nav/ul-nav-grid/index'; @import './nav/ul-nav-grid/index';
@import './nav/ul-nav-info/index'; @import './nav/ul-nav-info/index';
@import './nav/ul-nav-tree-2/index'; @import './nav/ul-nav-tree-2/index';

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

@@ -0,0 +1,6 @@
title=数据详情卡片-简约
padding=0
margin=0
gray=0
mobile=1
inner_margin=0

43
source/components/card/ul-data-card/_index.html Normal file
View File

@@ -0,0 +1,43 @@
<div class="ul-data-card">
<div class="header">
<div class="mian">
<i class="layui-icon layui-icon-user"></i>
<span>奥古斯宏</span>
</div>
<div class="plus">
<div class="layui-btn layui-btn-sm">详情</div>
</div>
</div>
<div class="body">
<div class="main">
<div class="item" data-repeat="3">
<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>
<div class="footer">
<div class="main">
2022年4月14日21:28:44
</div>
<div class="plus">
<div class="layui-btn layui-btn-sm layui-btn-normal">删除</div>
<div class="layui-btn layui-btn-sm layui-btn-primary">修改</div>
</div>
</div>
</div>

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

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

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

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

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

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