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

新增文章块列表组件

Browse Source
This commit is contained in:
augushong
2023-07-29 16:24:47 +08:00
parent 570c9944ab
commit 2f36a745f9
9 changed files with 179 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
source/components/_index.scss
View File

@@ -26,6 +26,7 @@
@import './list/ul-photo-card-list/index';
@import './list/ul-photo-list/index';
@import './list/ul-photo-list-b/index';
@import './list/ul-post-block-list/index';
@import './list/ul-post-list/index';
@import './list/ul-site-group/index';
@import './logo/ul-logo/index';

6
source/components/list/ul-post-block-list/_index.env Normal file
View File

@@ -0,0 +1,6 @@
title=文章块列表
padding=0
margin=0
gray=0
mobile=0
inner_margin=0

54
source/components/list/ul-post-block-list/_index.html Normal file
View File

@@ -0,0 +1,54 @@
<div class="ul-group-title">
修复统一高度
</div>
<div class="ul-post-block-list">
<div class="ul-post-block-item" data-repeat="4">
<div class="poster ul-demo-img-bg">
</div>
<div class="title">
PHP基金会年预算已达300万元
</div>
<div class="desc">
PHP基金会在2021年11月23日上线运营,目前已经$411,184.29,换算人民币260万元,年度预算达到$488,021.00,算换人民币300万元.
</div>
</div>
<div class="ul-post-block-item">
<div class="poster ul-demo-img-bg">
</div>
<div class="title">
PHP基金会年预算已达300万元
</div>
<div class="desc">
PHP基金会在2021年11月23日上线运营,目前已经$411,184.29,换算人民币260万元,年度预算达到$488,021.00,算换人民币300万元.PHP基金会在2021年11月23日上线运营,目前已经$411,184.29,换算人民币260万元,年度预算达到$488,021.00,算换人民币300万元.
</div>
</div>
</div>
<div class="ul-group-title">
固定块高度
</div>
<div class="ul-post-block-list fixed-height">
<div class="ul-post-block-item" data-repeat="4">
<div class="poster ul-demo-img-bg">
</div>
<div class="title">
PHP基金会年预算已达300万元
</div>
<div class="desc">
PHP基金会在2021年11月23日上线运营,目前已经$411,184.29,换算人民币260万元,年度预算达到$488,021.00,算换人民币300万元.
</div>
</div>
<div class="ul-post-block-item">
<div class="poster ul-demo-img-bg">
</div>
<div class="title">
PHP基金会年预算已达300万元
</div>
<div class="desc">
PHP基金会在2021年11月23日上线运营,目前已经$411,184.29,换算人民币260万元,年度预算达到$488,021.00,算换人民币300万元.PHP基金会在2021年11月23日上线运营,目前已经$411,184.29,换算人民币260万元,年度预算达到$488,021.00,算换人民币300万元.
</div>
</div>
</div>

0
source/components/list/ul-post-block-list/_index.md Normal file
View File

5
source/components/list/ul-post-block-list/_index.php Normal file
View File

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

65
source/components/list/ul-post-block-list/_index.scss Normal file
View File

@@ -0,0 +1,65 @@
.ul-post-block-list {
$spaceSize: 8px;
$colCount: 3;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
margin: -$spaceSize;
.ul-post-block-item {
margin: $spaceSize;
width: calc((100%/$colCount) - $spaceSize * 2);
align-self: normal;
&:hover {
background-color: #efefef;
}
.poster {
width: 100%;
height: 120px;
}
.title {
font-size: 14px;
font-weight: 600;
line-height: 20px;
color: #333;
padding: 6px;
}
.desc {
padding: 0 6px 6px 6px;
font-size: 12px;
line-height: 20px;
color: #999;
}
}
&.fixed-height {
.ul-post-block-item {
.title {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.desc {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
}
}
}

2
source/components/list/ul-post-list/_index.scss
View File

@@ -20,8 +20,6 @@
.main {
width: 100%;
.info {
padding-bottom: 28px;