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

新增极简图标卡片；

Browse Source
This commit is contained in:
augushong
2022-04-04 10:38:28 +08:00
parent 7f453df942
commit f7d8cb9a99
4 changed files with 177 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
demo/pc/card.html
View File

@@ -155,3 +155,17 @@
</div>
</div>
</fieldset>
<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>

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

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

29
source/scss/card/_ul-card-simple-icon.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-image {
width : 80px;
height : 80px;
background-size : cover;
background-position: center;
display : inline-block;
}
.ul-card-simple-icon-title {
border-top : 2px solid #ebeef5;
margin-top : 8px;
padding-top: 8px;
}
}

1
source/scss/layui-ul.scss
View File

@@ -3,6 +3,7 @@
@import './nav/index';
@import './form/index';
@import './fieldset/index';
@import './card/index';
/* 头部开始 */