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

增加站点导航卡片样式

Browse Source
This commit is contained in:
augushong
2022-08-22 15:40:23 +08:00
parent 4999e23c3f
commit d44391deea
4 changed files with 106 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
demo/pc/list.html
View File

@@ -380,7 +380,7 @@
<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">
<div class="ul-site-group" data-repeat="3"> <div class="ul-site-group" data-repeat="2">
<div class="ul-site-group-header"> <div class="ul-site-group-header">
新上线 新上线
</div> </div>
@@ -405,6 +405,37 @@
</div> </div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>站点导航（卡片）</legend>
<div class="layui-field-box">
<div class="ul-site-group ul-bg-gray ul-padding-md" data-repeat="2">
<div class="ul-site-group-header">
新上线
</div>
<div class="ul-site-list">
<div class="ul-site-item card" data-repeat="6">
<div class="ul-site-item-logo" style="background-image: url('/static/images/view.jpg')">
</div>
<div class="ul-site-item-info">
<div class="ul-site-item-title">
layui奥宏样式库
</div>
<div class="ul-site-item-desc">
纯CSS的组件案例样式大全
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</fieldset> </fieldset>

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

@@ -1304,69 +1304,6 @@ body .layui-quote-gray {
font-size: 14px; font-size: 14px;
} }
.ul-site-group {
margin-bottom: 8px;
}
.ul-site-group-header {
font-size : 16px;
color : #333;
padding-bottom: 8px;
}
.ul-site-list {
display : flex;
align-items : flex-start;
justify-content: flex-start;
flex-wrap : wrap;
margin-top : 8px;
}
.ul-site-item {
width : 20%;
margin-right : 5%;
display : flex;
align-items : flex-start;
justify-content: flex-start;
margin-bottom : 15px;
}
.ul-site-item-logo {
width : 24px;
height : 24px;
margin-right : 8px;
margin-top : 4px;
background-size : cover;
background-position: center;
}
.ul-site-item-info {
width: calc(100% - 34px);
}
.ul-site-item-title {
color : #4662d9;
font-weight : bold;
text-decoration: none;
}
.ul-site-item-desc {
font-size: 12px;
color : #666;
}
@media screen and (max-width:450px) {
.ul-site-item {
width: 49%;
}
.ul-site-item-desc {
font-size : 11px;
margin-top: 3px;
}
}
.ul-timeline-rowstyle { .ul-timeline-rowstyle {
display : flex; display : flex;

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

@@ -1,2 +1,3 @@
@import './ul-avatar-list'; @import './ul-avatar-list';
@import './ul-order-list-simple-card'; @import './ul-order-list-simple-card';
@import './ul-site-list';

72
source/scss/list/_ul-site-list.scss Normal file
View File

@@ -0,0 +1,72 @@
.ul-site-group {
margin-bottom: 8px;
}
.ul-site-group-header {
font-size : 16px;
color : #333;
padding-bottom: 8px;
}
.ul-site-list {
display : flex;
align-items : flex-start;
justify-content: flex-start;
flex-wrap : wrap;
margin-top : 8px;
}
.ul-site-item {
width : 20%;
margin-right : 5%;
display : flex;
align-items : flex-start;
justify-content: flex-start;
margin-bottom : 15px;
&.card {
background-color: #fff;
border-radius : 5px;
padding : 10px;
margin-right : 15px;
}
}
.ul-site-item-logo {
width : 34px;
height : 34px;
margin-right : 8px;
margin-top : 4px;
background-size : cover;
background-position: center;
}
.ul-site-item-info {
width: calc(100% - 34px);
}
.ul-site-item-title {
color : #4662d9;
font-weight : bold;
text-decoration: none;
}
.ul-site-item-desc {
font-size: 12px;
color : #666;
}
@media screen and (max-width:450px) {
.ul-site-item {
width: 49%;
}
.ul-site-item-desc {
font-size : 11px;
margin-top: 3px;
}
}