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 14:53:20 +08:00
parent 47eb37d2cd
commit 570c9944ab
4 changed files with 56 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1937,33 +1937,37 @@
margin-top: 12px; margin-top: 12px;
padding-bottom: 12px; padding-bottom: 12px;
border-bottom: 1px solid #bbb; border-bottom: 1px solid #bbb;
position: relative;
} }
.ul-post-list .ul-post-item .poster { .ul-post-list .ul-post-item .poster {
height: 120px; height: 120px;
width: 240px; width: 240px;
margin-right: 12px;
} }
.ul-post-list .ul-post-item .main { .ul-post-list .ul-post-item .main {
margin-left: 12px; width: 100%;
position: relative;
} }
.ul-post-list .ul-post-item .main .title { .ul-post-list .ul-post-item .main .info {
padding-bottom: 28px;
}
.ul-post-list .ul-post-item .main .info .title {
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
} }
.ul-post-list .ul-post-item .main .desc { .ul-post-list .ul-post-item .main .info .desc {
font-size: 12px; font-size: 12px;
color: #999; color: #999;
margin-top: 4px; margin-top: 4px;
} }
.ul-post-list .ul-post-item .main .options { .ul-post-list .ul-post-item .options {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
position: absolute; position: absolute;
bottom: 0; bottom: 12px;
right: 0; right: 0;
} }
.ul-post-list .ul-post-item .main .options .item { .ul-post-list .ul-post-item .options .item {
margin-left: 12px; margin-left: 12px;
} }

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

File diff suppressed because one or more lines are too long

20
source/components/list/ul-post-list/_index.html
View File

@@ -1,6 +1,6 @@
<div class="ul-post-list"> <div class="ul-post-list">
<div class="ul-post-item" data-repeat="3"> <div class="ul-post-item" data-repeat="3">
<div class="poster ul-demo-img-bg" > <div class="poster ul-demo-img-bg">
</div> </div>
<div class="main"> <div class="main">
@@ -8,10 +8,22 @@
<div class="title">PHP基金会年预算已达300万元 </div> <div class="title">PHP基金会年预算已达300万元 </div>
<div class="desc">PHP基金会在2021年11月23日上线运营,目前已经$411,184.29,换算人民币260万元,年度预算达到$488,021.00,算换人民币300万元.</div> <div class="desc">PHP基金会在2021年11月23日上线运营,目前已经$411,184.29,换算人民币260万元,年度预算达到$488,021.00,算换人民币300万元.</div>
</div> </div>
<div class="options"> </div>
<div class="item">2023年7月29日</div> <div class="options">
<div class="item">PHP武器库</div> <div class="item">2023年7月29日</div>
<div class="item">PHP武器库</div>
</div>
</div>
<div class="ul-post-item">
<div class="main">
<div class="info">
<div class="title">PHP基金会年预算已达300万元 </div>
<div class="desc">PHP基金会在2021年11月23日上线运营,目前已经$411,184.29,换算人民币260万元,年度预算达到$488,021.00,算换人民币300万元.</div>
</div> </div>
</div> </div>
<div class="options">
<div class="item">2023年7月29日</div>
<div class="item">PHP武器库</div>
</div>
</div> </div>
</div> </div>

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

@@ -7,41 +7,48 @@
padding-bottom: 12px; padding-bottom: 12px;
border-bottom: 1px solid #bbb; border-bottom: 1px solid #bbb;
position: relative;
.poster { .poster {
height: 120px; height: 120px;
width: 240px; width: 240px;
margin-right: 12px;
} }
.main { .main {
margin-left: 12px;
position: relative;
.title { width: 100%;
font-size: 14px;
font-weight: 600;
}
.desc {
font-size: 12px;
color: #999;
margin-top: 4px;
}
.options { .info {
display: flex; padding-bottom: 28px;
align-items: center;
justify-content: flex-end;
position: absolute;
bottom: 0;
right: 0;
.item { .title {
margin-left: 12px; font-size: 14px;
font-weight: 600;
} }
.desc {
font-size: 12px;
color: #999;
margin-top: 4px;
}
}
}
.options {
display: flex;
align-items: center;
justify-content: flex-end;
position: absolute;
bottom: 12px;
right: 0;
.item {
margin-left: 12px;
} }
} }
} }