feat: 首页新增静态货品分层模块
分类7图+随身电力/桌搭空间/电力补给三板块+底部大图，共22张静态图均带新窗口跳转链接；移动端按列数等分自适应；gitignore忽略bak
This commit is contained in:
opd-admin
@@ -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">
|
||||
<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" 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>
|
||||
|
||||
<!-- 货品分层板块（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" 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' }
|
||||
|
||||
Reference in New Issue
Block a user