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

feat: 迁移极简图标卡片

Browse Source
This commit is contained in:
augushong
2025-08-31 11:59:20 +08:00
parent 3fb89f2d58
commit b34f6c00e7
10 changed files with 87 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
demo/pc/card.html
View File

@@ -1,17 +1,3 @@
<fieldset class="layui-elem-field layui-field-title">
<legend>极简图标卡片</legend>
<div class="layui-field-box">
<div class="ul-card-simple-icon" data-repeat="3">
<div class="ul-card-simple-icon-image" style="background-image: url('/static/images/view.jpg');">
</div>
<div class="ul-card-simple-icon-title">
图标
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title"> <fieldset class="layui-elem-field layui-field-title">
<legend>消息信息操作卡片</legend> <legend>消息信息操作卡片</legend>
<div class="layui-field-box "> <div class="layui-field-box ">

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

@@ -1102,6 +1102,37 @@
left: 0; left: 0;
} }
.ul-card-simple-icon {
display: inline-block;
margin-right: 15px;
margin-bottom: 15px;
box-shadow: 0 2px 12px 0 #bbb;
border-radius: 4px;
border: 1px solid #ebeef5;
background-color: #fff;
box-sizing: border-box;
width: 100px;
padding: 10px;
text-align: center;
}
.ul-card-simple-icon .ul-card-simple-icon-image {
width: 80px;
height: 80px;
background-size: cover;
background-position: center;
display: inline-block;
}
.ul-card-simple-icon .ul-card-simple-icon-title {
border-top: 2px solid #ebeef5;
margin-top: 8px;
padding-top: 8px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.ul-data-card { .ul-data-card {
margin: 15px; margin: 15px;
padding: 15px; padding: 15px;

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

@@ -8,6 +8,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-card-simple-icon/index';
@import './card/ul-data-card/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';

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

@@ -0,0 +1,6 @@
title=极简图标卡片
padding=0
margin=0
gray=0
mobile=0
inner_margin=0

14
source/components/card/ul-card-simple-icon/_index.html Normal file
View File

@@ -0,0 +1,14 @@
<div
class="ul-card-simple-icon"
data-repeat="3"
>
<div
class="ul-card-simple-icon-image"
style="background-image: url('/static/images/view.jpg');"
>
</div>
<div class="ul-card-simple-icon-title">
图标
</div>
</div>

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

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

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

29
source/components/card/ul-card-simple-icon/_index.scss Normal file
View File

@@ -0,0 +1,29 @@
.ul-card-simple-icon {
display: inline-block;
margin-right: 15px;
margin-bottom: 15px;
box-shadow: 0 2px 12px 0 #bbb;
border-radius: 4px;
border: 1px solid #ebeef5;
background-color: #fff;
box-sizing: border-box;
width: 100px;
padding: 10px;
text-align: center;
}
.ul-card-simple-icon .ul-card-simple-icon-image {
width: 80px;
height: 80px;
background-size: cover;
background-position: center;
display: inline-block;
}
.ul-card-simple-icon .ul-card-simple-icon-title {
border-top: 2px solid #ebeef5;
margin-top: 8px;
padding-top: 8px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

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

@@ -327,35 +327,6 @@
padding: 15px; padding: 15px;
} }
.ul-card-simple-icon {
display: inline-block;
margin-right: 15px;
margin-bottom: 15px;
box-shadow: 0 2px 12px 0 #bbb;
border-radius: 4px;
border: 1px solid #ebeef5;
background-color: #fff;
box-sizing: border-box;
width: 100px;
padding: 10px;
text-align: center;
}
.ul-card-simple-icon .ul-card-simple-icon-image {
width: 80px;
height: 80px;
background-size: cover;
background-position: center;
display: inline-block;
}
.ul-card-simple-icon .ul-card-simple-icon-title {
border-top: 2px solid #ebeef5;
margin-top: 8px;
padding-top: 8px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.ul-card-message { .ul-card-message {
border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;
background-color: #fff; background-color: #fff;