feat: mobile产品分类
This commit is contained in:
@@ -9,6 +9,7 @@ return [
|
|||||||
'产品' => 'Product',
|
'产品' => 'Product',
|
||||||
'联系方式' => 'Contact',
|
'联系方式' => 'Contact',
|
||||||
'查看所有' => 'View All',
|
'查看所有' => 'View All',
|
||||||
|
'查看全部' => 'View All',
|
||||||
'明星产品/热点产品' => 'Featured Products',
|
'明星产品/热点产品' => 'Featured Products',
|
||||||
'了解更多' => 'Learn More',
|
'了解更多' => 'Learn More',
|
||||||
'Orico 技术' => 'ORICO Technology',
|
'Orico 技术' => 'ORICO Technology',
|
||||||
|
|||||||
93
app/index/view/mobile/product/category.html
Normal file
93
app/index/view/mobile/product/category.html
Normal file
@@ -0,0 +1,93 @@
|
|||||||
|
{extend name="public/base" /}
|
||||||
|
{block name="style"}
|
||||||
|
<link rel="stylesheet" type="text/css" href="__CSS__/product_category.css" />
|
||||||
|
{/block}
|
||||||
|
{block name="main"}
|
||||||
|
<div class="oricoEGapp">
|
||||||
|
<!-- banner轮播图 -->
|
||||||
|
{notempty name="focus_image"}
|
||||||
|
<div>
|
||||||
|
{volist name="focus_image" id="fi"}
|
||||||
|
<a {notempty name="fi.link" }href="{$fi.link}"{/notempty}>
|
||||||
|
<img src="{$fi.image}" />
|
||||||
|
</a>
|
||||||
|
{/volist}
|
||||||
|
</div>
|
||||||
|
{/notempty}
|
||||||
|
<div class="oricoEGapp-catelists">
|
||||||
|
<!-- 二级分类导航 -->
|
||||||
|
<div class="first_list_category">
|
||||||
|
<div class="scroller">
|
||||||
|
<ul class="clearfix">
|
||||||
|
{volist name="list" id="vo"}
|
||||||
|
<li>
|
||||||
|
<a href="{:url('product/subcategory', ['id' => $vo.id])}">
|
||||||
|
<div class="category_list">
|
||||||
|
<p>{$vo.name}</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
{/volist}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 二级分类几个产品展示 -->
|
||||||
|
{volist name="list" id="vo"}
|
||||||
|
<div class="m_Container">
|
||||||
|
<div class="product_list_title">
|
||||||
|
<div class="product_title">{$vo.name}</div>
|
||||||
|
<a href="{:url('product/subcategory', ['id' => $vo.id])}" class="view_all text_gray">
|
||||||
|
{:lang('查看全部')}<span class="icon-Double-Arrow"></span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="product_list">
|
||||||
|
{notempty name="vo.products"}
|
||||||
|
<ul>
|
||||||
|
{volist name="vo.products" id="pro" length="4"}
|
||||||
|
<li class="img-responsive">
|
||||||
|
<a href="{:url('product/detail', ['id' => $pro.id])}">
|
||||||
|
<img src="{$pro.cover_image}">
|
||||||
|
<span class="title">{$pro.name}</span>
|
||||||
|
<span class="subtitle">{$pro.spu}</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
{/volist}
|
||||||
|
</ul>
|
||||||
|
{/notempty}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/volist}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/block}
|
||||||
|
{block name="script"}
|
||||||
|
<script type="text/javascript">
|
||||||
|
// 自定义 navbarscroll 方法
|
||||||
|
$(function() {
|
||||||
|
let startX = 0;
|
||||||
|
let isDragging = false;
|
||||||
|
let currentLi;
|
||||||
|
$('.scroller ul li').on('mousedown touchstart', function(e) {
|
||||||
|
startX = e.type === 'touchstart' ? e.originalEvent.touches[0].clientX : e.clientX;
|
||||||
|
isDragging = true;
|
||||||
|
currentLi = $(this);
|
||||||
|
});
|
||||||
|
$(document).on('mousemove touchmove', function(e) {
|
||||||
|
if (isDragging) {
|
||||||
|
const currentX = e.type === 'touchmove' ? e.originalEvent.touches[0].clientX : e.clientX;
|
||||||
|
const diffX = currentX - startX;
|
||||||
|
if (diffX > 20) { // 设定一个最小滑动距离，这里设为20像素
|
||||||
|
// 右滑操作
|
||||||
|
$('.scroller ul li').removeClass('cur');
|
||||||
|
currentLi.addClass('cur');
|
||||||
|
// 这里可以添加更多右滑后要执行的操作，例如显示对应内容
|
||||||
|
isDragging = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
$(document).on('mouseup touchend', function() {
|
||||||
|
isDragging = false;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
{/block}
|
||||||
74
app/index/view/mobile/product/subcategory.html
Normal file
74
app/index/view/mobile/product/subcategory.html
Normal file
@@ -0,0 +1,74 @@
|
|||||||
|
{extend name="public/base" /}
|
||||||
|
{block name="style"}
|
||||||
|
<link rel="stylesheet" type="text/css" href="__CSS__/product_subcategory.css" />
|
||||||
|
{/block}
|
||||||
|
{block name="main"}
|
||||||
|
<div class="oricoEGapp">
|
||||||
|
<!-- banner轮播图 -->
|
||||||
|
{notempty name="focus_image"}
|
||||||
|
<div>
|
||||||
|
{volist name="focus_image" id="fi"}
|
||||||
|
<a {notempty name="fi.link"}href="{$fi.link}"{/notempty}>
|
||||||
|
<img src="{$fi.image}" alt="" style="width:100%;margin-top:3.5rem;" />
|
||||||
|
</a>
|
||||||
|
{/volist}
|
||||||
|
</div>
|
||||||
|
{/notempty}
|
||||||
|
<!-- 三级产品列表 -->
|
||||||
|
<div class="oricoEGapp-subcatelists">
|
||||||
|
<div class="m_Container">
|
||||||
|
{notempty name="categorys_data"}
|
||||||
|
<div class="product_list">
|
||||||
|
<ul>
|
||||||
|
{assign name="products" value=":\think\helper\Arr::flatMap(fn($pro) => $pro['products'], $categorys_data)" /}
|
||||||
|
{volist name="products" id="pr"}
|
||||||
|
<li class="img-responsive product-img">
|
||||||
|
{notempty name="pr.sku"}
|
||||||
|
<a href="{:url('product/detail', ['id' => $pr.id])}">
|
||||||
|
{volist name="pr.sku" id="ps" key="pk"}
|
||||||
|
<img src="{:thumb($ps.main_image)}" class="img_p" {neq name="pk" value="1" }style="display:none;"{/neq}>
|
||||||
|
{/volist}
|
||||||
|
</a>
|
||||||
|
{/notempty}
|
||||||
|
<a href="{:url('product/detail', ['id' => $pr.id])}">
|
||||||
|
<span class="title nowrap_ellipsis">{$pr.name}</span>
|
||||||
|
<span class="subtitle">{$pr.spu}</span>
|
||||||
|
</a>
|
||||||
|
{notempty name="pr.colors"}
|
||||||
|
<div class="hd Multi_color">
|
||||||
|
<ul>
|
||||||
|
{volist name="pr.colors" id="pc"}
|
||||||
|
<li class="img-responsive S-small-img">
|
||||||
|
<div class="cricle">
|
||||||
|
{assign name="color_type" value=":rgb_or_image($pc.attr_value)" /}
|
||||||
|
{eq name="color_type" value="IMAGE"}
|
||||||
|
<img src="{$pc.attr_value}" alt="" class="S-Cricle-Bg">
|
||||||
|
{elseif condition="$color_type == 'RGB'" /}
|
||||||
|
<span class="rgb_hex" {:style(['background-color'=>$pc.attr_value])}></span>
|
||||||
|
{/eq}
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
{/volist}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{/notempty}
|
||||||
|
</li>
|
||||||
|
{/volist}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{/notempty}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/block}
|
||||||
|
{block name="script"}
|
||||||
|
<script type="text/javascript">
|
||||||
|
$(function() {
|
||||||
|
// 图片切换
|
||||||
|
$('.Multi_color').find('.S-small-img').click(function() {
|
||||||
|
var index = $(this).index();
|
||||||
|
$(this).parents('.product-img').find('.img_p').eq(index).show().siblings().hide();
|
||||||
|
});
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
{/block}
|
||||||
25
public/static/index/mobile/css/product_category.css
Executable file
25
public/static/index/mobile/css/product_category.css
Executable file
@@ -0,0 +1,25 @@
|
|||||||
|
.oricoEGapp-catelists {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.oricoEGapp-catelists .first_list_category {
|
||||||
|
margin-top: 50px;
|
||||||
|
width: 100%;
|
||||||
|
overflow-x: auto;
|
||||||
|
height: 3.4rem;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
.oricoEGapp-catelists .scroller ul {
|
||||||
|
background-color: #fafafa;
|
||||||
|
list-style-type: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.oricoEGapp-catelists .scroller ul li {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
padding-bottom: 15px;
|
||||||
|
}
|
||||||
9
public/static/index/mobile/css/product_subcategory.css
Executable file
9
public/static/index/mobile/css/product_subcategory.css
Executable file
@@ -0,0 +1,9 @@
|
|||||||
|
.oricoEGapp-subcatelists {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.oricoEGapp-subcatelists .product_list {
|
||||||
|
margin-top: 4.5rem;
|
||||||
|
}
|
||||||
|
.oricoEGapp-subcatelists .product_list .img_p {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user