From b55e62486c53ed5d541542b96ca2626225403d0f Mon Sep 17 00:00:00 2001
From: admin <liuyu65@126.com>
Date: Sat, 10 Oct 2026 15:12:12 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E5=85=A8=E7=AB=99=E5=8F=96=E6=B6=88?=
 =?UTF-8?q?=E9=80=9A=E6=A0=8F=E5=A4=A7=E5=9B=BE=EF=BC=8C=E5=9B=BE=E9=9B=86?=
 =?UTF-8?q?=E6=94=B9=E5=8F=8C=E5=88=97=EF=BC=8C=E6=96=87=E7=AB=A0=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E6=96=87=E5=AD=97=E7=8E=AF=E7=BB=95=E6=8E=92=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 website/static/css/style.css              | 18 +++++++++++++-----
 website/static/tool-enthalpy-diagram.html |  4 ++--
 website/static/tool-serial-terminal.html  |  2 +-
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/website/static/css/style.css b/website/static/css/style.css
index 454a64d..633e02d 100644
--- a/website/static/css/style.css
+++ b/website/static/css/style.css
@@ -335,15 +335,16 @@ a:hover { color: var(--brand-dark); }
 .product-card .product-meta { font-size: 0.78rem; color: var(--ink-3); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
 
 /* Screenshots & figures */
-.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 22px; margin-top: 32px; }
+.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 32px; }
 .shot {
   background: #071022; border: 1px solid var(--line); border-radius: var(--radius);
   overflow: hidden; box-shadow: var(--shadow); margin: 0;
 }
 .shot img { display: block; width: 100%; height: auto; }
 .shot figcaption { padding: 13px 18px; font-size: 0.86rem; color: var(--ink-2); background: #fff; border-top: 1px solid var(--line); }
-.shot.wide { grid-column: 1 / -1; }
-.shot.contain img { background: #fff; }
+.shot.wide { grid-column: auto; }
+.shot.contain { display: flex; flex-direction: column; background: #fff; }
+.shot.contain img { width: auto; max-width: 100%; max-height: 560px; margin: 0 auto; display: block; }
 .feature-visual.has-image { padding: 0; background: #071022; }
 .feature-visual.has-image img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; display: block; }
 
@@ -473,7 +474,7 @@ table.admin .actions { white-space: nowrap; }
 }
 
 /* Article */
-.article { line-height: 1.85; font-size: 0.98rem; color: var(--ink); margin-top: 22px; }
+.article { line-height: 1.85; font-size: 0.98rem; color: var(--ink); margin-top: 22px; display: flow-root; }
 .article h1, .article h2, .article h3, .article h4 { color: var(--ink); margin: 1.7em 0 0.6em; line-height: 1.4; letter-spacing: -0.01em; }
 .article h1 { font-size: 1.6rem; border-bottom: 1px solid var(--line); padding-bottom: 0.3em; }
 .article h2 { font-size: 1.3rem; }
@@ -488,7 +489,12 @@ table.admin .actions { white-space: nowrap; }
 .article table { width: 100%; border-collapse: collapse; margin: 1.1em 0; font-size: 0.92rem; }
 .article th, .article td { border: 1px solid var(--line); padding: 9px 13px; text-align: left; }
 .article th { background: var(--bg-soft); color: var(--ink); }
-.article img { max-width: 100%; border-radius: 12px; }
+.article img {
+  float: right; width: min(46%, 430px); height: auto;
+  margin: 4px 0 16px 26px; border-radius: 12px;
+}
+.article img:nth-of-type(even) { float: left; margin: 4px 26px 16px 0; }
+.article h1, .article h2, .article h3 { clear: both; }
 .article a { text-decoration: underline; }
 
 /* ------------------------------------------------------------------ */
@@ -520,6 +526,8 @@ table.admin .actions { white-space: nowrap; }
   .cta-band { padding: 40px 28px; }
   .post-list { grid-template-columns: 1fr; }
   .product-grid { grid-template-columns: 1fr; }
+  .gallery { grid-template-columns: 1fr; }
+  .article img, .article img:nth-of-type(even) { float: none; width: 100%; margin: 1em 0; }
   .hero-stats { grid-template-columns: repeat(2, 1fr); }
 }
 
diff --git a/website/static/tool-enthalpy-diagram.html b/website/static/tool-enthalpy-diagram.html
index 05c31fa..fc22844 100644
--- a/website/static/tool-enthalpy-diagram.html
+++ b/website/static/tool-enthalpy-diagram.html
@@ -117,11 +117,11 @@
       <h2 class="section-title">界面实录</h2>
       <p class="section-desc">手机与平板横屏实际运行界面。</p>
       <div class="gallery">
-        <figure class="shot">
+        <figure class="shot contain">
           <img src="/static/img/enthalpy/1.jpg" alt="湿空气焓湿图 计算表">
           <figcaption>计算表 —— 已知干球温度 40 °C、相对湿度 60%，自动求解全部结果</figcaption>
         </figure>
-        <figure class="shot">
+        <figure class="shot contain">
           <img src="/static/img/enthalpy/2.jpg" alt="湿空气焓湿图 焓湿图页面">
           <figcaption>焓湿图 —— 曲线族、状态点定位与光标查询</figcaption>
         </figure>
diff --git a/website/static/tool-serial-terminal.html b/website/static/tool-serial-terminal.html
index 58bc005..b06943d 100644
--- a/website/static/tool-serial-terminal.html
+++ b/website/static/tool-serial-terminal.html
@@ -132,7 +132,7 @@
           <img src="/static/img/serial/tablet-dark.jpg" alt="串口调试助手 平板深色 - 网络模式">
           <figcaption>平板横屏 · 深色 —— TCP Server 网络模式与 12 种校验算法选择</figcaption>
         </figure>
-        <figure class="shot">
+        <figure class="shot contain">
           <img src="/static/img/serial/phone-light.jpg" alt="串口调试助手 手机版">
           <figcaption>手机版（1080 × 2400）—— 单栏布局与底部导航</figcaption>
         </figure>