From 3cbea32f2fe1d03330053c4b64a96b105eea07a2 Mon Sep 17 00:00:00 2001
From: peijunlei <pjl@suq.cn>
Date: Mon, 7 Sep 2026 11:07:45 +0800
Subject: [PATCH] =?UTF-8?q?refactor(section-5):=20=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E6=96=B0=E9=97=BB=E7=82=B9=E5=87=BB=E4=BA=A4=E4=BA=92=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/themes/dist_static/static/css/index.css    | 13 +++++-
 public/themes/website/1/zh/demo/single_index.html | 48 +++++++++++++----------
 2 files changed, 38 insertions(+), 23 deletions(-)

diff --git a/public/themes/dist_static/static/css/index.css b/public/themes/dist_static/static/css/index.css
index 80924ba..8182dca 100644
--- a/public/themes/dist_static/static/css/index.css
+++ b/public/themes/dist_static/static/css/index.css
@@ -625,6 +625,11 @@
   flex-direction: column;
   min-width: 0;
 }
+.section-5__list > li {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+}
 .section-5__item {
   display: flex;
   align-items: center;
@@ -632,14 +637,17 @@
   gap: 1.875rem;
   flex: 1;
   min-height: 0;
+  width: 100%;
   padding: 2.5rem 0;
   border-bottom: 1px solid rgba(46, 53, 58, 0.1);
+  color: inherit;
+  text-decoration: none;
   cursor: pointer;
 }
-.section-5__item:first-child {
+.section-5__list > li:first-child .section-5__item {
   padding-top: 0;
 }
-.section-5__item:last-child {
+.section-5__list > li:last-child .section-5__item {
   border-bottom: 0;
   padding-bottom: 0;
 }
@@ -670,6 +678,7 @@
   overflow: hidden;
 }
 .section-5__item-media {
+  display: block;
   flex-shrink: 0;
   width: 14.625rem;
   height: 9.375rem;
diff --git a/public/themes/website/1/zh/demo/single_index.html b/public/themes/website/1/zh/demo/single_index.html
index d557036..19d3709 100644
--- a/public/themes/website/1/zh/demo/single_index.html
+++ b/public/themes/website/1/zh/demo/single_index.html
@@ -897,35 +897,41 @@
             <div class="section-5__line" aria-hidden="true"></div>
             <ul class="section-5__list">
               {if(!empty($news[1]))}
-              <li class="section-5__item">
-                <div class="section-5__item-body">
-                  <h3 class="section-5__item-title">{$news[1]['title'] ?? ''}</h3>
-                  <time class="section-5__date" datetime="{$news[0]['publish_time'] ?? ''}">{$news[1]['publish_time'] ?? ''}</time>
-                </div>
-                <a class="section-5__item-media" href="{:hcUrl('detail/index',['id'=>$news[1]['id'],'cid'=>$news[1]['category_id']])}">
-                  <img src="{$news[1]['thumbnail_url'] ?? ''}" alt="" />
+              <li>
+                <a class="section-5__item" href="{:hcUrl('detail/index',['id'=>$news[1]['id'],'cid'=>$news[1]['category_id']])}">
+                  <div class="section-5__item-body">
+                    <h3 class="section-5__item-title">{$news[1]['title'] ?? ''}</h3>
+                    <time class="section-5__date" datetime="{$news[1]['publish_time'] ?? ''}">{$news[1]['publish_time'] ?? ''}</time>
+                  </div>
+                  <span class="section-5__item-media">
+                    <img src="{$news[1]['thumbnail_url'] ?? ''}" alt="" />
+                  </span>
                 </a>
               </li>
               {/if}
               {if(!empty($news[2]))}
-              <li class="section-5__item">
-                <div class="section-5__item-body">
-                  <h3 class="section-5__item-title">{$news[2]['title'] ?? ''}</h3>
-                  <time class="section-5__date" datetime="{$news[2]['publish_time'] ?? ''}">{$news[2]['publish_time'] ?? ''}</time>
-                </div>
-                <a class="section-5__item-media" href="{:hcUrl('detail/index',['id'=>$news[2]['id'],'cid'=>$news[2]['category_id']])}">
-                  <img src="{$news[2]['thumbnail_url'] ?? ''}" alt="" />
+              <li>
+                <a class="section-5__item" href="{:hcUrl('detail/index',['id'=>$news[2]['id'],'cid'=>$news[2]['category_id']])}">
+                  <div class="section-5__item-body">
+                    <h3 class="section-5__item-title">{$news[2]['title'] ?? ''}</h3>
+                    <time class="section-5__date" datetime="{$news[2]['publish_time'] ?? ''}">{$news[2]['publish_time'] ?? ''}</time>
+                  </div>
+                  <span class="section-5__item-media">
+                    <img src="{$news[2]['thumbnail_url'] ?? ''}" alt="" />
+                  </span>
                 </a>
               </li>
               {/if}
               {if(!empty($news[3]))}
-              <li class="section-5__item">
-                <div class="section-5__item-body">
-                  <h3 class="section-5__item-title">{$news[3]['title'] ?? ''}</h3>
-                  <time class="section-5__date" datetime="{$news[3]['publish_time'] ?? ''}">{$news[3]['publish_time'] ?? ''}</time>
-                </div>
-                <a class="section-5__item-media" href="{:hcUrl('detail/index',['id'=>$news[3]['id'],'cid'=>$news[3]['category_id']])}">
-                  <img src="{$news[3]['thumbnail_url'] ?? ''}" alt="" />
+              <li>
+                <a class="section-5__item" href="{:hcUrl('detail/index',['id'=>$news[3]['id'],'cid'=>$news[3]['category_id']])}">
+                  <div class="section-5__item-body">
+                    <h3 class="section-5__item-title">{$news[3]['title'] ?? ''}</h3>
+                    <time class="section-5__date" datetime="{$news[3]['publish_time'] ?? ''}">{$news[3]['publish_time'] ?? ''}</time>
+                  </div>
+                  <span class="section-5__item-media">
+                    <img src="{$news[3]['thumbnail_url'] ?? ''}" alt="" />
+                  </span>
                 </a>
               </li>
               {/if}