From 9beffba12718f62c64c7183949627de05fab8da9 Mon Sep 17 00:00:00 2001
From: augushong <augushong@163.com>
Date: Fri, 28 Jan 2022 20:09:57 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=A8=AA=E7=89=88=E6=97=B6?=
 =?UTF-8?q?=E9=97=B4=E8=BD=B4;?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demo/pc/timeline.html   | 51 +++++++++++++++++++++++++++++++++++++++++
 public/cdn/layui-ul.css | 16 +++++++++++++
 2 files changed, 67 insertions(+)
 create mode 100644 demo/pc/timeline.html

diff --git a/demo/pc/timeline.html b/demo/pc/timeline.html
new file mode 100644
index 0000000..63342e8
--- /dev/null
+++ b/demo/pc/timeline.html
@@ -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>
\ No newline at end of file
diff --git a/public/cdn/layui-ul.css b/public/cdn/layui-ul.css
index 09fa27f..b6f1eaf 100644
--- a/public/cdn/layui-ul.css
+++ b/public/cdn/layui-ul.css
@@ -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;
 }
\ No newline at end of file