Compare commits

..

10 Commits

Author SHA1 Message Date
opd-admin
f2099e99cd 样式调整 2026-10-16 16:07:00 +08:00
opd-admin
2b738e1fdb 链接矫正 2026-10-16 16:01:57 +08:00
opd-admin
86d91c3759 banner首屏CSS兜底,刷新不再堆叠闪烁 2026-10-16 16:00:00 +08:00
opd-admin
915e6aec8d swiper本地CDN替换,修复轮播初始化延迟 2026-10-16 15:52:41 +08:00
opd-admin
93f827fbed 链接添加 2026-10-16 15:50:45 +08:00
opd-admin
cd4ec54325 样式调整 2026-10-16 15:47:04 +08:00
opd-admin
3985b9941d 换图 2026-10-16 15:41:41 +08:00
opd-admin
2d8bb453b4 修改页面原地跳转 2026-10-16 11:47:28 +08:00
opd-admin
1e5187515a logo跟换 2026-10-16 11:18:42 +08:00
opd-admin
3fd98244fd feat: 首页新增静态货品分层模块
分类7图+随身电力/桌搭空间/电力补给三板块+底部大图,共22张静态图均带新窗口跳转链接;移动端按列数等分自适应;gitignore忽略bak
2026-10-16 11:08:14 +08:00
30 changed files with 205 additions and 106 deletions

3
.gitignore vendored
View File

@@ -20,4 +20,5 @@ public/GeoLite2-Country.mmdb
public/admin
public/.well-known
pd.sh
pm.sh
pm.sh
*.bak

View File

@@ -1,19 +1,23 @@
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/6.3.5/swiper-bundle.min.js"></script>
<script src="__LOCAL__assets/js/vendor/swiper-bundle.min.js"></script>
<script src="__LOCAL__assets/js/vendor/vendor.min.js"></script>
<script src="__LOCAL__assets/js/jquery.bxslider.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.setmspace').bxSlider({
// 初始化前先隐藏第一张以外的 banner,避免刷新时多张堆叠闪动
$('.setmspace').children('.slide:not(:first-child)').css('display', 'none');
var bannerSlider = $('.setmspace').bxSlider({
slideWidth: 1920,
infiniteLoop: false,
hideControlOnEnd: true,
slideMargin: 10,
auto: true
})
// 轮播接管布局后恢复所有 slide 显示(显式 block 以覆盖 CSS 兜底规则)
$('.setmspace').children('.slide').css('display', 'block');
})
</script>
<script type="text/javascript" src="__LOCAL__assets/js/action.js"></script>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="__LOCAL__assets/js/vendor/jquery-ui.min.js"></script>
<script src="__LOCAL__assets/js/plugins/plugins.min.js"></script>
<!-- Main Js -->
<script src="__LOCAL__assets/js/main.js"></script>

View File

@@ -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" style="margin-top: 10%;">
<a log="a" href="https://www.ntonpower.cn/index/goods/index.html?cate1=4"><img log="img" src="__LOCAL__assets/images/home/n_c1.png" alt="口袋插排" /></a>
<a log="a" href="https://www.ntonpower.cn/index/goods/index.html?cate1=3"><img log="img" src="__LOCAL__assets/images/home/n_c2.png" alt="" /></a>
<a log="a" 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">
<a log="a" href="https://www.ntonpower.cn/index/goods/index.html?cate1=315"><img log="img" src="__LOCAL__assets/images/home/n_c4.png" alt="" /></a>
<a log="a" href="https://www.ntonpower.cn/index/goods/index.html?cate1=329"><img log="img" src="__LOCAL__assets/images/home/n_c5.png" alt="小风扇" /></a>
<a log="a" href="https://www.ntonpower.cn/index/goods/index.html?cate1=330"><img log="img" src="__LOCAL__assets/images/home/n_c6.png" alt="" /></a>
<a log="a" href="https://www.ntonpower.cn/index/goods/index.html?cate1=331"><img log="img" src="__LOCAL__assets/images/home/n_c7.png" alt="" /></a>
</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">
<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>
</div>
</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">
<!-- 货品分层板块(1):随身电力 -->
<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>
</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" 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" 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" href="https://www.ntonpower.cn/index/goods/detail.html?id=43"><img log="img" src="__LOCAL__assets/images/home/h_n3.png" alt="胶囊充电宝" /></a>
<a log="a" 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>
<!-- 货品分层板块(2):桌搭空间 -->
<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-desk-big">
<a log="a" 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" 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" 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" 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" 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" 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" 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" 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" 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">
<a log="a" href="https://www.ntonpower.cn/index/about/index"><img log="img" src="__LOCAL__assets/images/home/n_dpdbd.png" alt="" /></a>
</div>
</div>
</div>
{include file='zh-cn/common/footer'} {include file='zh-cn/common/script' }

View File

@@ -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 {
@@ -591,7 +588,8 @@ input {
.main-menu ul li.dropdown ul li {
padding: 0;
margin: 0;
display: block;
display: flex;
align-items: center;
}
.main-menu ul li.dropdown ul li a {
display: block;
@@ -8417,9 +8415,11 @@ body.offcanvas-open {
.breadcrumb-area {
position: relative;
text-align: center;
}
.breadcrumb-area img {
max-width: 100%;
}
.breadcrumb-title {
position: absolute;
@@ -9401,3 +9401,87 @@ body.offcanvas-open {
--bs-gutter-x: 0;
}
}
/* banner轮播首屏兜底:JS初始化前仅显示第一张,防止刷新时多张堆叠闪烁(JS接管后由内联样式恢复显示) */
.setmspace .slide:not(:first-child) { display: none; }
/* ===== 首页静态模块(新增) ===== */
/* 公共:小图行 flex 居中 */
.home-img-grid {
display: grid;
gap: 40px;
grid-auto-flow: column;
margin-top: 35px;
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: 35px; }
.home-cate4 img { margin: 35px; }
/* 随身电力:大图 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; }
/* 桌搭空间小图行:单独控制间距 */
.home-desk-small.home-img-grid { gap: 28px; margin-top: 28px; }
/* 电力补给:大图 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; }
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 269 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 95 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 299 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 119 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 65 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 303 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 72 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 69 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 63 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 545 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 6.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long