From 0348b664951ab154053b1fef7d8e442f1710a548 Mon Sep 17 00:00:00 2001
From: peijunlei <pjl@suq.cn>
Date: Wed, 2 Sep 2026 17:59:34 +0800
Subject: [PATCH] =?UTF-8?q?feat(solution):=20sl-clients=5F=5Fgrid=E4=B8=AD?=
 =?UTF-8?q?=E7=9A=84=E5=86=85=E5=AE=B9=E5=A6=82=E6=9E=9C=E8=B6=85=E8=BF=87?=
 =?UTF-8?q?5=E4=B8=AA=E6=97=B6=E3=80=82=E8=87=AA=E5=8A=A8=E5=BE=AA?=
 =?UTF-8?q?=E7=8E=AF=E6=92=AD=E6=94=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/themes/dist_static/static/css/solution.css | 46 +++++++++++++++++++++++
 public/themes/website/1/zh/demo/solution.html     | 22 +++++++----
 2 files changed, 61 insertions(+), 7 deletions(-)

diff --git a/public/themes/dist_static/static/css/solution.css b/public/themes/dist_static/static/css/solution.css
index c1f62fc..f9b4fd8 100644
--- a/public/themes/dist_static/static/css/solution.css
+++ b/public/themes/dist_static/static/css/solution.css
@@ -203,6 +203,9 @@
   font-weight: 400;
   line-height: var(--font-64);
 }
+.sl-clients__viewport {
+  width: 100%;
+}
 .sl-clients__grid {
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
@@ -227,6 +230,34 @@
   object-fit: contain;
 }
 
+/* 超过 5 个：CSS 横向无缝循环（内容在模板里复制一份） */
+.sl-clients__viewport.is-marquee {
+  overflow: hidden;
+  container-type: inline-size;
+}
+.sl-clients__viewport.is-marquee .sl-clients__grid {
+  display: flex;
+  width: max-content;
+  gap: 1.5rem;
+  animation: sl-clients-marquee 30s linear infinite;
+}
+.sl-clients__viewport.is-marquee .sl-clients__item {
+  flex: 0 0 calc((100cqi - 6rem) / 5);
+  width: calc((100cqi - 6rem) / 5);
+}
+.sl-clients__viewport.is-marquee:hover .sl-clients__grid {
+  animation-play-state: paused;
+}
+@keyframes sl-clients-marquee {
+  from { transform: translateX(0); }
+  to { transform: translateX(-50%); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .sl-clients__viewport.is-marquee .sl-clients__grid {
+    animation: none;
+  }
+}
+
 .sl-cases {
   position: relative;
   padding-top: 7.5rem;
@@ -418,6 +449,10 @@
   .sl-clients__grid {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
+  .sl-clients__viewport.is-marquee .sl-clients__item {
+    flex-basis: calc((100cqi - 4.5rem) / 4);
+    width: calc((100cqi - 4.5rem) / 4);
+  }
   .sl-cases__body {
     grid-template-columns: 1fr;
     gap: 40Px;
@@ -442,6 +477,10 @@
   .sl-clients__grid {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
+  .sl-clients__viewport.is-marquee .sl-clients__item {
+    flex-basis: calc((100cqi - 3rem) / 3);
+    width: calc((100cqi - 3rem) / 3);
+  }
   .sl-cases__nav {
     margin-top: 24Px;
   }
@@ -471,6 +510,13 @@
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 12Px;
   }
+  .sl-clients__viewport.is-marquee .sl-clients__grid {
+    gap: 12Px;
+  }
+  .sl-clients__viewport.is-marquee .sl-clients__item {
+    flex-basis: calc((100cqi - 12Px) / 2);
+    width: calc((100cqi - 12Px) / 2);
+  }
   .sl-clients__item {
     height: 100Px;
   }
diff --git a/public/themes/website/1/zh/demo/solution.html b/public/themes/website/1/zh/demo/solution.html
index 4fa9691..ec4deb9 100644
--- a/public/themes/website/1/zh/demo/solution.html
+++ b/public/themes/website/1/zh/demo/solution.html
@@ -154,13 +154,21 @@
     {if !empty($sub_cates[4])}
     <section class="sl-clients section__wrap" id="clients" data-header-dark>
       <h2 class="sl-clients__title">{$sub_cates[4]['title'] ?? ''}</h2>
-      <div class="sl-clients__grid">
-        {php}
-        $contents = getContentByCategory($sub_cates[4]['id'], $seller_id, 6, 'sort asc', ['thumbnail', 'category']);
-        {/php}
-        {volist name="contents" id="vo"}
-        <div class="sl-clients__item"><img src="{$vo['thumbnail']['url'] ?? ''}" alt="" width="252" height="160" loading="lazy" /></div>
-        {/volist}
+      {php}
+      $contents = getContentByCategory($sub_cates[4]['id'], $seller_id, 20, 'sort asc', ['thumbnail', 'category']);
+      $clients_marquee = is_array($contents) && count($contents) > 5;
+      {/php}
+      <div class="sl-clients__viewport{if $clients_marquee} is-marquee{/if}">
+        <div class="sl-clients__grid">
+          {volist name="contents" id="vo"}
+          <div class="sl-clients__item"><img src="{$vo['thumbnail']['url'] ?? ''}" alt="" width="252" height="160" loading="lazy" /></div>
+          {/volist}
+          {if $clients_marquee}
+          {volist name="contents" id="vo"}
+          <div class="sl-clients__item" aria-hidden="true"><img src="{$vo['thumbnail']['url'] ?? ''}" alt="" width="252" height="160" loading="lazy" /></div>
+          {/volist}
+          {/if}
+        </div>
       </div>
     </section>
     {/if}