feat: 首页新增静态货品分层模块

分类7图+随身电力/桌搭空间/电力补给三板块+底部大图，共22张静态图均带新窗口跳转链接；移动端按列数等分自适应；gitignore忽略bak

.gitignore

@@ -21,3 +21,4 @@ public/admin
 public/.well-known
 pd.sh
 pm.sh
+*.bak

app/index/view/zh-cn/index/index.html

@@ -6,107 +6,90 @@
   {/foreach}
 </div>
 
-<!-- Banner Area End --><!-- Goods Area Start -->
+<!-- 静态分类图模块：上3下4 -->
 <div class="product-area">
   <div class="container">
-    <div class="cate-list">
-      <ul>
-        {foreach $nav_info as $item} {if isset($item.children)} {if $item.id === 1} {foreach $item.children as $it1}
-        <li>
-          <a log="a" href="{$it1.url}"
-            ><img log="img" src="__STATIC__{$it1.icon}" alt="" />
-            <p>{$it1.name}</p>
-          </a>
-        </li>
-        {/foreach} {/if} {/if} {/foreach}
-      </ul>
+    <div class="home-img-grid home-cate3">
+      <a log="a" target="_blank" href="https://www.ntonpower.cn/index/goods/index.html?cate1=4"><img log="img" src="__LOCAL__assets/images/home/n_c1.png" alt="口袋插排" /></a>
+      <img log="img" src="__LOCAL__assets/images/home/n_c2.png" alt="" />
+      <a log="a" target="_blank" href="https://www.ntonpower.cn/index/goods/index.html?cate1=316"><img log="img" src="__LOCAL__assets/images/home/n_c3.png" alt="旅行转换头" /></a>
     </div>
-    <!-- Section Title & Tab Start -->
+    <div class="home-img-grid home-cate4">
+      <img log="img" src="__LOCAL__assets/images/home/n_c4.png" alt="" />
+      <a log="a" target="_blank" href="https://www.ntonpower.cn/index/goods/index.html?cate1=329"><img log="img" src="__LOCAL__assets/images/home/n_c5.png" alt="小风扇" /></a>
+      <img log="img" src="__LOCAL__assets/images/home/n_c6.png" alt="" />
+      <img log="img" src="__LOCAL__assets/images/home/n_c7.png" alt="" />
+    </div>
+  </div>
+</div>
 
-    <div class="row">
-      <!-- Section Title Start -->
-      <!-- Section Title End -->
-      <!-- Goods Area End --><!-- Testimonial Area Start -->
-      <div class="banner-area-2 mt-60px">
+<!-- 货品分层板块（1）：随身电力 -->
+<div class="home-section">
   <div class="container">
-          <div class="row m-0">
-            <div class="col-md-7 p-0">
-              <div class="single-banner nth-child-1">
-                <img log="img" src="__STATIC__{$f_image['goods_one']['image']??''}" alt="" />
-                <div class="banner-content nth-child-1">
-                  <span class="title">{$f_image['goods_one']['value']??"" | raw }</span>
-                </div>
-              </div>
-            </div>
-            <div class="col-md-5 p-0">
-              <div class="single-banner nth-child-2 mb-lm-30px mt-lm-30px">
-                <img log="img" src="__STATIC__{$f_image['goods_two']['image']??''}" alt="" />
-                <div class="banner-content nth-child-2">
-                  <span class="title">{$f_image['goods_two']['value']??"" | raw }</span>
-                </div>
-              </div>
-              <div class="single-banner nth-child-3">
-                <img log="img" src="__STATIC__{$f_image['goods_three']['image']??''}" alt="" />
-                <div class="banner-content nth-child-3">
-                  <span class="title">{$f_image['goods_three']['value']??"" | raw }</span>
-                </div>
-              </div>
-            </div>
-          </div>
+    <div class="section-title text-center">
+      <h2 class="title">随身电力</h2>
+      <p class="home-subtitle">揣上满格电量，奔赴每一场出行</p>
     </div>
+    <div class="home-img-block home-power-big">
+      <a log="a" target="_blank" href="https://www.ntonpower.cn/index/goods/index.html?cate1=4"><img log="img" src="__LOCAL__assets/images/home/h_n1.png" alt="口袋插排" /></a>
     </div>
+    <div class="home-img-grid home-power-small">
+      <a log="a" target="_blank" href="https://www.ntonpower.cn/index/goods/index.html?cate1=316"><img log="img" src="__LOCAL__assets/images/home/h_n2.png" alt="旅行转换头" /></a>
+      <a log="a" target="_blank" href="javascript:;"><img log="img" src="__LOCAL__assets/images/home/h_n3.png" alt="胶囊充电宝" /></a>
+      <a log="a" target="_blank" href="https://www.ntonpower.cn/index/goods/index.html?cate1=329"><img log="img" src="__LOCAL__assets/images/home/h_n4.png" alt="口袋小风扇" /></a>
     </div>
   </div>
 </div>
-<!-- Deal Area Start -->
-<div class="deal-area mt-60px">
-  <div class="deal-inner position-relative">
-    <img log="img" src="__STATIC__{$f_image['goods_four']['image']??''}" alt="" />
-    <div class="deal-wrapper">
-      <p>SETMSPACE</p>
-      <h3 class="title">
-        {$f_image['goods_four']['value']??"" | raw }
-      </h3>
-    </div>
-  </div>
-</div>
-<!-- Section Title & Tab End -->
-<div class="product-bg">
+
+<!-- 货品分层板块（2）：桌搭空间 -->
+<div class="home-section">
   <div class="container">
-    <div class="row">
-      <div class="col">
-        <div class="tab-content mt-60px">
-          <div class="section-title text-center mb-60px">
-            <h2 class="title">新品推荐</h2>
-          </div>
-          <!-- 1st tab start -->
-          <div class="tab-pane fade show active" id="tab-jewelry">
-            <div class="row">
-              {foreach $goods_is_new as $good}
-              <div class="col-lg-4 col-xl-4 col-md-6 col-sm-6 col-xs-6 mb-30px">
-                <!-- Single Prodect -->
-                <div class="product">
-                  <div class="thumb">
-                    <a log="a" href="{:url('index/goods/detail?id='.$good.id)}" class="image"
-                      ><img log="img" src="__STATIC__{$good.main_img}" alt="Product"
-                    /></a>
-                  </div>
-                  <div class="content">
-                    <h5 class="title"><a log="a" href="{:url('index/goods/detail?id='.$good.id)}">{$good.name}</a></h5>
-                    <span>{$good.model_number}</span>
-                  </div>
-                  <a log="a" href="{:url('index/goods/detail?id='.$good.id)}">
-                    <button title="Add To Cart" class="add-to-cart">了解详情</button>
-                  </a>
-                </div>
-              </div>
-              {/foreach}
-            </div>
-          </div>
-          <!-- 1st tab end -->
+    <div class="section-title text-center">
+      <h2 class="title">桌搭空间</h2>
+      <p class="home-subtitle">搭建你的理想桌面，告别线材杂乱</p>
     </div>
+    <div class="home-img-block home-desk-big">
+      <a log="a" target="_blank" href="https://www.ntonpower.cn/index/goods/detail.html?id=33"><img log="img" src="__LOCAL__assets/images/home/h2_n1.png" alt="小能岛桌面插排" /></a>
     </div>
+    <div class="home-img-grid home-desk-small">
+      <a log="a" target="_blank" href="https://www.ntonpower.cn/index/goods/detail.html?id=38"><img log="img" src="__LOCAL__assets/images/home/h2_n2.png" alt="丸电磁吸插排" /></a>
+      <a log="a" target="_blank" href="https://www.ntonpower.cn/index/goods/detail.html?id=39"><img log="img" src="__LOCAL__assets/images/home/h2_n3.png" alt="家用插排" /></a>
+      <a log="a" target="_blank" href="https://www.ntonpower.cn/index/goods/detail.html?id=37"><img log="img" src="__LOCAL__assets/images/home/h2_n4.png" alt="简循桌面风扇" /></a>
     </div>
   </div>
 </div>
+
+<!-- 货品分层板块（3）：电力补给 -->
+<div class="home-section">
+  <div class="container">
+    <div class="section-title text-center">
+      <h2 class="title">电力补给</h2>
+      <p class="home-subtitle">桌搭配件，补齐用电细节</p>
+    </div>
+    <div class="home-img-block home-charge-big">
+      <a log="a" target="_blank" href="https://www.ntonpower.cn/index/goods/detail.html?id=17"><img log="img" src="__LOCAL__assets/images/home/h3_n1.png" alt="可充电锂电池" /></a>
+    </div>
+    <div class="home-img-grid home-charge-small">
+      <a log="a" target="_blank" href="https://www.ntonpower.cn/index/goods/detail.html?id=23"><img log="img" src="__LOCAL__assets/images/home/h3_n2.png" alt="电池配件" /></a>
+      <a log="a" target="_blank" href="https://www.ntonpower.cn/index/goods/detail.html?id=42"><img log="img" src="__LOCAL__assets/images/home/h3_n3.png" alt="磁吸充电线" /></a>
+    </div>
+    <div class="home-img-grid home-charge-small">
+      <a log="a" target="_blank" href="https://www.ntonpower.cn/index/goods/detail.html?id=26"><img log="img" src="__LOCAL__assets/images/home/h3_n4.png" alt="理线收纳" /></a>
+      <a log="a" target="_blank" href="https://www.ntonpower.cn/index/goods/detail.html?id=30"><img log="img" src="__LOCAL__assets/images/home/h3_n5.png" alt="插排收纳盒" /></a>
+    </div>
+  </div>
+</div>
+
+<!-- 底部大图 + 店铺底部导航 -->
+<div class="home-section home-mt-150">
+  <div class="container">
+    <div class="home-img-block home-bottom-big">
+      <img log="img" src="__LOCAL__assets/images/home/n_cpbs.png" alt="" />
+    </div>
+    <div class="home-img-block home-bottom-nav">
+      <img log="img" src="__LOCAL__assets/images/home/n_dpdbd.png" alt="" />
+    </div>
+  </div>
+</div>
+
 {include file='zh-cn/common/footer'} {include file='zh-cn/common/script' }

public/assets/css/style.min.css

@@ -317,16 +317,14 @@ input {
   margin-bottom: 50px;
 }
 .section-title .title {
-  font-size: 24px;
+  font-size: 2.6rem;
   font-weight: 600;
   display: inline-block;
-  color: #424242;
-  margin: 0 0 25px;
-  line-height: 27px;
+  margin-top: 175px;
 }
 @media only screen and (max-width: 767px) {
   .section-title .title {
-    font-size: 30px;
+    font-size: 2.4rem;
   }
 }
 @media only screen and (min-width: 992px) and (max-width: 1199px) {
@@ -351,7 +349,6 @@ input {
 }
 .section-title P {
   line-height: 30px;
-  color: #747474;
 }
 @media only screen and (max-width: 479px) {
   .section-title.mb-60px {
@@ -9401,3 +9398,82 @@ body.offcanvas-open {
     --bs-gutter-x: 0;
   }
 }
+
+/* ===== 首页静态模块（新增） ===== */
+/* 公共：小图行 flex 居中 */
+.home-img-grid {
+    display: grid;
+    gap: 28px;
+    grid-auto-flow: column;
+    margin-top: 23px;
+    align-items: center;
+    justify-content: center;
+}
+.home-img-grid img {
+  height: auto;
+  max-width: 100%;
+  display: block;
+}
+/* 公共：大图块居中 */
+.home-img-block { text-align: center; }
+.home-img-block img { max-width: 100%; height: auto; display: inline-block; margin: 0; }
+.home-subtitle { font-size: 1.2rem; margin: 5px 0 0; }
+.home-mt-150 { margin-top: 150px; }
+
+/* 公共：图片跳转链接 */
+.home-img-grid a { display: block; }
+.home-img-block a { display: inline-block; }
+
+/* 分类 7 图：上排3张 home-cate3 / 下排4张 home-cate4 */
+.home-cate3,
+.home-cate4 {
+  display: flex;
+  justify-content: center;
+  align-items: end;
+  gap: 0;
+}
+.home-cate3 img { margin: 40px 95px; }
+.home-cate4 img { margin: 40px 95px; }
+/* 随身电力：大图 h_n1 + 小图 h_n2-h_n4（小图间距走 .home-img-grid 的 gap） */
+.home-power-big img { margin: 0; }
+/* 桌搭空间：大图 h2_n1 + 小图 h2_n2-h2_n4 */
+.home-desk-big img { margin: 0; }
+/* 电力补给：大图 h3_n1 + 两行小图 h3_n2-h3_n5 */
+.home-charge-big img { margin: 0; }
+/* 底部：大图 n_cpbs + 店铺底部导航 n_dpdbd */
+.home-bottom-big img { margin: 0; }
+.home-bottom-nav img { margin: 0; }
+
+/* ===== 移动端自适应（≤767px） ===== */
+@media (max-width: 767px) {
+  /* 小图行改为按列数等分铺满，间距收紧 */
+  .home-img-grid {
+    gap: 8px;
+    margin-top: 12px;
+    grid-auto-flow: row;
+    width: 100%;
+  }
+  .home-img-grid img { width: 100%; margin: 0; }
+  /* 分类 7 图：3列 / 4列等分 */
+  .home-cate3,
+  .home-cate4 {
+    display: grid;
+    align-items: baseline;
+    gap: 8px;
+  }
+  .home-cate3 { grid-template-columns: repeat(3, 1fr); }
+  .home-cate4 { grid-template-columns: repeat(4, 1fr); }
+  .home-cate3 img,
+  .home-cate4 img { margin: 0; }
+  /* 随身电力 / 桌搭空间小图：3列等分 */
+  .home-power-small,
+  .home-desk-small { grid-template-columns: repeat(3, 1fr); }
+  /* 电力补给小图：2列等分 */
+  .home-charge-small { grid-template-columns: repeat(2, 1fr); }
+  /* 大图撑满宽度 */
+  .home-img-block img { width: 100%; }
+  /* 间距与字号收缩 */
+  .home-mt-150 { margin-top: 60px; }
+  .home-subtitle { font-size: 0.85rem; }
+  .section-title .title { margin-top: 60px; font-size: 1.75rem; }
+}