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
2022-01-28 20:09:57 +08:00
parent 6596d6cc82
commit 9beffba127
2 changed files with 67 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
demo/pc/timeline.html Normal file
View File

@@ -0,0 +1,51 @@
<fieldset class="layui-elem-field layui-field-title" style="display: contents;">
<legend>横版时间线</legend>
<div class="layui-field-box">
<blockquote class="layui-elem-quote">这个样式依赖原版layui</blockquote>
<div class="ul-padding-md">
<ul class="layui-timeline ul-timeline-rowstyle">
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月18日</h3>
<p>
layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
<br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
<br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i>
</p>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月16日</h3>
<p>杜甫的思想核心是儒家的仁政思想，他有“<em>致君尧舜上，再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有：</p>
<ul>
<li>《登高》</li>
<li>《茅屋为秋风所破歌》</li>
</ul>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月15日</h3>
<p>
中国人民抗日战争胜利72周年
<br>常常在想，尽管对这个国家有这样那样的抱怨，但我们的确生在了最好的时代
<br>铭记、感恩
<br>所有为中华民族浴血奋战的英雄将士
<br>永垂不朽
</p>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title">过去</div>
</div>
</li>
</ul>
</div>
</div>
</fieldset>

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

@@ -1478,4 +1478,20 @@ body .layui-quote-gray {
.ul-site-item-desc {
font-size: 12px;
color : #666;
}
.ul-timeline-rowstyle {
display : flex;
flex-wrap : nowrap;
overflow-x: auto;
width : 100%;
}
.ul-timeline-rowstyle .layui-timeline-item {
margin-right: 15px;
min-width : 300px;
}
.ul-timeline-rowstyle .layui-timeline-item:last-child::before {
display: block;
}