feat: mobile端classify页面
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 4s
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 4s
This commit is contained in:
@@ -267,6 +267,59 @@ class Product extends Common
|
|||||||
return View::fetch('subcategory');
|
return View::fetch('subcategory');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 单纯分类页
|
||||||
|
*/
|
||||||
|
public function classify()
|
||||||
|
{
|
||||||
|
$pid = request()->param('id/d', 0);
|
||||||
|
|
||||||
|
// 获取当前选中的父分类
|
||||||
|
$parent = ProductCategoryModel::field(['id', 'name'])->find($pid);
|
||||||
|
View::assign('parent', $parent);
|
||||||
|
|
||||||
|
// 获取分类及产品信息
|
||||||
|
$categorys = ProductCategoryModel::field(['id', 'pid', 'name', 'path', 'level'])
|
||||||
|
->language($this->lang_id)
|
||||||
|
->displayed(true)
|
||||||
|
->children($pid)
|
||||||
|
->order(['pid' => 'asc', 'sort' => 'asc', 'id' => 'desc'])
|
||||||
|
->select()
|
||||||
|
->toArray();
|
||||||
|
|
||||||
|
// 组装第三级分类所属产品数据
|
||||||
|
$lv3_id_arr = array_column(array_filter($categorys, fn($item)=> $item['level'] === 3), 'id');
|
||||||
|
$products = ProductModel::field([
|
||||||
|
'id',
|
||||||
|
'category_id',
|
||||||
|
'name',
|
||||||
|
'short_name',
|
||||||
|
'cover_image',
|
||||||
|
'spu'
|
||||||
|
])
|
||||||
|
->byCategory($lv3_id_arr)
|
||||||
|
->language($this->lang_id)
|
||||||
|
->enabled(true)
|
||||||
|
->onSale(true)
|
||||||
|
->onShelves(true)
|
||||||
|
->select()
|
||||||
|
->toArray();
|
||||||
|
$product_groups = [];
|
||||||
|
foreach ($products as $product) {
|
||||||
|
$product_groups[$product['category_id']][] = $product;
|
||||||
|
}
|
||||||
|
foreach ($categorys as $key => $category) {
|
||||||
|
if ($category['level'] < 3) continue;
|
||||||
|
$categorys[$key]['products'] = $product_groups[$category['id']] ?? [];
|
||||||
|
}
|
||||||
|
|
||||||
|
$tree = array_to_tree($categorys, $pid);
|
||||||
|
View::assign('categorys', $tree);
|
||||||
|
|
||||||
|
return View::fetch('classify');
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 产品搜索
|
* 产品搜索
|
||||||
*/
|
*/
|
||||||
|
|||||||
@@ -18,6 +18,8 @@ Route::group('product', function () {
|
|||||||
Route::get('category/:id', 'Product/category');
|
Route::get('category/:id', 'Product/category');
|
||||||
// 产品分类 - 查看子类
|
// 产品分类 - 查看子类
|
||||||
Route::get('subcategory/:id', 'Product/subcategory');
|
Route::get('subcategory/:id', 'Product/subcategory');
|
||||||
|
// 单纯分类页
|
||||||
|
Route::get('classify/:id', 'Product/classify');
|
||||||
// 产品详情页
|
// 产品详情页
|
||||||
Route::get('detail/:id', 'Product/detail');
|
Route::get('detail/:id', 'Product/detail');
|
||||||
// 产品询盘
|
// 产品询盘
|
||||||
|
|||||||
@@ -1,545 +1,93 @@
|
|||||||
<!DOCTYPE html>
|
{extend name="public/base" /}
|
||||||
<html lang="zh-CN">
|
{block name="style"}
|
||||||
|
<link rel="stylesheet" type="text/css" href="__CSS__/product_category.css" />
|
||||||
<head>
|
{/block}
|
||||||
<meta charset="UTF-8">
|
{block name="main"}
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<div class="oricoEGapp">
|
||||||
<title>ORICO 移动硬盘</title>
|
<!-- banner轮播图 -->
|
||||||
<script type="text/javascript">
|
{notempty name="focus_image"}
|
||||||
(function (doc, win)
|
<div>
|
||||||
{
|
{volist name="focus_image" id="fi"}
|
||||||
var docEl = doc.documentElement;
|
<a {notempty name="fi.link" }href="{$fi.link}"{/notempty}>
|
||||||
var resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize';
|
<img src="{$fi.image}" style="width: 100%;margin-top: 3.5rem;"/>
|
||||||
var designWidth = 804; // 设计稿宽度
|
</a>
|
||||||
var designRemPx = 100; // 设计稿下 1rem 对应 px
|
{/volist}
|
||||||
|
</div>
|
||||||
function setRootFontSize ()
|
{/notempty}
|
||||||
{
|
<div class="oricoEGapp-catelists">
|
||||||
var clientWidth = docEl.clientWidth;
|
<!-- 二级分类导航 -->
|
||||||
if (!clientWidth) return;
|
<div class="first_list_category">
|
||||||
|
<div class="scroller">
|
||||||
// 计算基础字号
|
<ul class="clearfix">
|
||||||
var fontSize = (clientWidth / designWidth) * designRemPx;
|
{volist name="list" id="vo"}
|
||||||
|
<li>
|
||||||
// 限制范围（可选）
|
<a href="{:url('product/subcategory', ['id' => $vo.id])}">
|
||||||
fontSize = Math.max(fontSize, 28); // 最小 28px
|
<div class="category_list">
|
||||||
fontSize = Math.min(fontSize, 80); // 最大 80px
|
<p>{$vo.name}</p>
|
||||||
|
</div>
|
||||||
docEl.style.fontSize = fontSize + 'px';
|
</a>
|
||||||
|
</li>
|
||||||
// 设置 body 基准，避免继承问题
|
{/volist}
|
||||||
doc.body.style.fontSize = '14px';
|
</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_i18n('查看全部')}<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="{:thumb($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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
});
|
||||||
setRootFontSize();
|
$(document).on('mouseup touchend', function() {
|
||||||
win.addEventListener(resizeEvt, setRootFontSize);
|
isDragging = false;
|
||||||
doc.addEventListener('DOMContentLoaded', setRootFontSize);
|
});
|
||||||
})(document, window);
|
});
|
||||||
</script>
|
</script>
|
||||||
<style>
|
{/block}
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-family: sans-serif
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background: #f5f5f5;
|
|
||||||
|
|
||||||
height: 100vh;
|
|
||||||
overflow: hidden
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-box {
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 20px 22px;
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-bar {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
height: 0.82rem;
|
|
||||||
background: #F1F2F5;
|
|
||||||
justify-content: space-between;
|
|
||||||
border-radius: 0.2rem;
|
|
||||||
padding: 0 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back {
|
|
||||||
width: 14px;
|
|
||||||
height: 14px;
|
|
||||||
color: #333;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
|
|
||||||
font-size: 0.32rem;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 主体布局 */
|
|
||||||
.main {
|
|
||||||
display: flex;
|
|
||||||
height: calc(100% - 46px)
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 左侧菜单 */
|
|
||||||
.sidebar {
|
|
||||||
width: 114px;
|
|
||||||
background: #FAFAFA;
|
|
||||||
overflow-y: auto;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar li {
|
|
||||||
list-style: none;
|
|
||||||
padding: 24px 0;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 0.28rem;
|
|
||||||
color: #686A70;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar li.active {
|
|
||||||
color: #004BFA;
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 右侧内容 */
|
|
||||||
.content {
|
|
||||||
flex: 1;
|
|
||||||
overflow-y: auto;
|
|
||||||
padding-left: 12px;
|
|
||||||
background: #fff;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.sec-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
padding-top: 24px;
|
|
||||||
padding-right: 17px;
|
|
||||||
padding-bottom: 12px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.sec-title {
|
|
||||||
font-size: 0.28rem;
|
|
||||||
color: #686A70;
|
|
||||||
font-weight: 500
|
|
||||||
}
|
|
||||||
|
|
||||||
.sec-arrow {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
color: #666;
|
|
||||||
font-size: 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 横向滚动容器 */
|
|
||||||
.scroll-box {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
overflow-x: auto;
|
|
||||||
scroll-behavior: smooth;
|
|
||||||
|
|
||||||
scrollbar-width: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scroll-box::-webkit-scrollbar {
|
|
||||||
display: none
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
flex-shrink: 0;
|
|
||||||
background: #FAFAFA;
|
|
||||||
border-radius: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
padding-top: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-img {
|
|
||||||
width: 1.52rem;
|
|
||||||
background: #f1f1f1;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-img img {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-info {
|
|
||||||
padding: 8px;
|
|
||||||
text-align: center
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-name {
|
|
||||||
font-size: 0.2rem;
|
|
||||||
width: 1.52rem;
|
|
||||||
height: auto;
|
|
||||||
color: #1D1D1F;
|
|
||||||
line-height: 1.4;
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-model {
|
|
||||||
font-size: 0.16rem;
|
|
||||||
color: #686A70;
|
|
||||||
margin-top: 4px
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 内容区块默认隐藏 */
|
|
||||||
.tab-pane {
|
|
||||||
display: none
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 激活时显示 */
|
|
||||||
.tab-pane.active {
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
}
|
|
||||||
/* 全屏侧边菜单 */
|
|
||||||
.full-menu {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: rgba(0, 0, 0, .4);
|
|
||||||
z-index: 9999;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.full-menu.show {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-wrap {
|
|
||||||
width: 80%;
|
|
||||||
height: 100%;
|
|
||||||
background: #fff;
|
|
||||||
position: relative;
|
|
||||||
padding: 20px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-close {
|
|
||||||
position: absolute;
|
|
||||||
right: 16px;
|
|
||||||
top: 16px;
|
|
||||||
font-size: 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-logo {
|
|
||||||
margin: 30px 0 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-logo img {
|
|
||||||
height: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-item {
|
|
||||||
padding: 14px 0;
|
|
||||||
border-bottom: 1px solid #eee;
|
|
||||||
font-size: 15px;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-item::after {
|
|
||||||
content: '>';
|
|
||||||
font-size: 12px;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sub-menu {
|
|
||||||
padding-left: 16px;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sub-menu.show {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sub-item {
|
|
||||||
padding: 10px 0;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<!-- 顶部返回栏（已完全按图纸修改） -->
|
|
||||||
<div class="top-box">
|
|
||||||
<div class="top-bar">
|
|
||||||
<div class="back">
|
|
||||||
<image src="./img/left.png"></image>
|
|
||||||
</div>
|
|
||||||
<div class="title">数据存储</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="main">
|
|
||||||
<!-- 左侧导航 -->
|
|
||||||
<ul class="sidebar">
|
|
||||||
<li class="nav-item" data-tab="tab1">固态硬盘</li>
|
|
||||||
<li class="nav-item active" data-tab="tab2">移动硬盘</li>
|
|
||||||
<li class="nav-item" data-tab="tab3">内存条</li>
|
|
||||||
<li class="nav-item" data-tab="tab4">NAS</li>
|
|
||||||
<li class="nav-item" data-tab="tab5">U盘/闪存卡</li>
|
|
||||||
<li class="nav-item" data-tab="tab6">混合存储</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<!-- 右侧分区内容 -->
|
|
||||||
<div class="content">
|
|
||||||
<!-- 固态硬盘 -->
|
|
||||||
<div class="tab-pane" id="tab1">
|
|
||||||
<div class="sec-header">
|
|
||||||
<div class="sec-title">固态硬盘</div>
|
|
||||||
<div class="sec-arrow" onclick="scrollNext(this)">
|
|
||||||
<img src="./img/y.png" alt="">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="scroll-box">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-img">
|
|
||||||
<img src="./img/111.png" alt="">
|
|
||||||
</div>
|
|
||||||
<div class="card-info">
|
|
||||||
<div class="card-name">
|
|
||||||
<div>M.2 NVMe 固态硬盘</div>
|
|
||||||
</div>
|
|
||||||
<div class="card-model">ORICO-SSD1T</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 移动硬盘（默认显示） -->
|
|
||||||
<div class="tab-pane active" id="tab2">
|
|
||||||
<!-- 磁吸移动硬盘 -->
|
|
||||||
<section class="sec-box">
|
|
||||||
<div class="sec-header">
|
|
||||||
<div class="sec-title">磁吸移动硬盘</div>
|
|
||||||
<div class="sec-arrow" onclick="scrollNext(this)">
|
|
||||||
<img src="./img/y.png" alt="">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="scroll-box">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-img">
|
|
||||||
<img src="./img/111.png" alt="">
|
|
||||||
</div>
|
|
||||||
<div class="card-info">
|
|
||||||
<div class="card-name">PS5 M.2固态硬盘测试专用九五二七</div>
|
|
||||||
<div class="card-model">ORICO-e7450</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-img">
|
|
||||||
<img src="./img/111.png" alt="">
|
|
||||||
</div>
|
|
||||||
<div class="card-info">
|
|
||||||
<div class="card-name">PS5 M.2固态硬盘</div>
|
|
||||||
<div class="card-model">ORICO-e7450</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 桌面移动硬盘 -->
|
|
||||||
<section>
|
|
||||||
<div class="sec-header">
|
|
||||||
<div class="sec-title">桌面移动硬盘</div>
|
|
||||||
<div class="sec-arrow" onclick="scrollNext(this)"><img src="./img/y.png" alt=""></div>
|
|
||||||
</div>
|
|
||||||
<div class="scroll-box">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-img">
|
|
||||||
<img src="./img/111.png" alt="">
|
|
||||||
</div>
|
|
||||||
<div class="card-info">
|
|
||||||
<div class="card-name">3.5英寸桌面硬盘</div>
|
|
||||||
<div class="card-model">ORICO-3588</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 内存条 -->
|
|
||||||
<div class="tab-pane" id="tab3">
|
|
||||||
<div class="sec-header">
|
|
||||||
<div class="sec-title">内存条</div>
|
|
||||||
<div class="sec-arrow" onclick="scrollNext(this)"><img src="./img/y.png" alt=""></div>
|
|
||||||
</div>
|
|
||||||
<div class="scroll-box">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-img">
|
|
||||||
<img src="./img/111.png" alt="">
|
|
||||||
</div>
|
|
||||||
<div class="card-info">
|
|
||||||
<div class="card-name">DDR4 16G 内存</div>
|
|
||||||
<div class="card-model">ORICO-RAM</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- NAS -->
|
|
||||||
<div class="tab-pane" id="tab4">
|
|
||||||
<div class="sec-header">
|
|
||||||
<div class="sec-title">NAS存储</div>
|
|
||||||
<div class="sec-arrow" onclick="scrollNext(this)"><img src="./img/y.png" alt=""></div>
|
|
||||||
</div>
|
|
||||||
<div class="scroll-box">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-img">
|
|
||||||
<img src="./img/111.png" alt="">
|
|
||||||
</div>
|
|
||||||
<div class="card-info">
|
|
||||||
<div class="card-name">4盘位NAS机箱</div>
|
|
||||||
<div class="card-model">ORICO-NAS</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- U盘/闪存卡 -->
|
|
||||||
<div class="tab-pane" id="tab5">
|
|
||||||
<div class="sec-header">
|
|
||||||
<div class="sec-title">U盘/闪存卡</div>
|
|
||||||
<div class="sec-arrow" onclick="scrollNext(this)"><img src="./img/y.png" alt=""></div>
|
|
||||||
</div>
|
|
||||||
<div class="scroll-box">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-img">
|
|
||||||
<img src="./img/111.png" alt="">
|
|
||||||
</div>
|
|
||||||
<div class="card-info">
|
|
||||||
<div class="card-name">高速U盘 128G</div>
|
|
||||||
<div class="card-model">ORICO-U128</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 混合存储 -->
|
|
||||||
<div class="tab-pane" id="tab6">
|
|
||||||
<div class="sec-header">
|
|
||||||
<div class="sec-title">混合存储</div>
|
|
||||||
<div class="sec-arrow" onclick="scrollNext(this)"><img src="./img/y.png" alt=""></div>
|
|
||||||
</div>
|
|
||||||
<div class="scroll-box">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-img">
|
|
||||||
<img src="./img/111.png" alt="">
|
|
||||||
</div>
|
|
||||||
<div class="card-info">
|
|
||||||
<div class="card-name">多功能扩展坞</div>
|
|
||||||
<div class="card-model">ORICO-DOCK</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// 点击右侧箭头滚动
|
|
||||||
function scrollNext (el)
|
|
||||||
{
|
|
||||||
const box = el.closest('section')?.querySelector('.scroll-box')
|
|
||||||
|| el.parentElement.nextElementSibling
|
|
||||||
if (box) box.scrollBy({ left: 150, behavior: 'smooth' })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 左侧Tab切换
|
|
||||||
const navItems = document.querySelectorAll('.nav-item')
|
|
||||||
const tabPanes = document.querySelectorAll('.tab-pane')
|
|
||||||
|
|
||||||
navItems.forEach(item =>
|
|
||||||
{
|
|
||||||
item.addEventListener('click', () =>
|
|
||||||
{
|
|
||||||
// 切换左侧激活状态
|
|
||||||
navItems.forEach(i => i.classList.remove('active'))
|
|
||||||
item.classList.add('active')
|
|
||||||
// 切换右侧内容
|
|
||||||
const target = item.dataset.tab
|
|
||||||
tabPanes.forEach(p => p.classList.remove('active'))
|
|
||||||
document.getElementById(target)?.classList.add('active')
|
|
||||||
})
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- 菜单结构 -->
|
|
||||||
<div class="full-menu" id="fullMenu">
|
|
||||||
<div class="menu-wrap">
|
|
||||||
<div class="menu-close" onclick="closeMenu()">×</div>
|
|
||||||
<div class="menu-logo">
|
|
||||||
<img src="./img/log.png" alt="">
|
|
||||||
</div>
|
|
||||||
<div class="menu-item" onclick="toggleSub(this)">产品列表
|
|
||||||
<div class="sub-menu">
|
|
||||||
<div class="sub-item">数据存储</div>
|
|
||||||
<div class="sub-item">充电系列</div>
|
|
||||||
<div class="sub-item">线材配件</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="menu-item">关于我们</div>
|
|
||||||
<div class="menu-item">服务支持</div>
|
|
||||||
<div class="menu-item">联系我们</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// 打开菜单
|
|
||||||
document.querySelector('.nav-img').onclick = function ()
|
|
||||||
{
|
|
||||||
document.getElementById('fullMenu').classList.add('show')
|
|
||||||
}
|
|
||||||
// 关闭菜单
|
|
||||||
function closeMenu ()
|
|
||||||
{
|
|
||||||
document.getElementById('fullMenu').classList.remove('show')
|
|
||||||
}
|
|
||||||
// 展开子菜单
|
|
||||||
function toggleSub (el)
|
|
||||||
{
|
|
||||||
el.querySelector('.sub-menu').classList.toggle('show')
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@@ -1,93 +0,0 @@
|
|||||||
{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}" style="width: 100%;margin-top: 3.5rem;"/>
|
|
||||||
</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_i18n('查看全部')}<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="{:thumb($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}
|
|
||||||
380
app/index/view/mobile/product/classify.html
Normal file
380
app/index/view/mobile/product/classify.html
Normal file
@@ -0,0 +1,380 @@
|
|||||||
|
{extend name="public/base" /}
|
||||||
|
|
||||||
|
{block name="style"}
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: sans-serif
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: #f5f5f5;
|
||||||
|
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-box {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 20px 22px;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-bar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 0.82rem;
|
||||||
|
background: #F1F2F5;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-radius: 0.2rem;
|
||||||
|
padding: 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
color: #333;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 0.32rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 主体布局 */
|
||||||
|
.main {
|
||||||
|
display: flex;
|
||||||
|
height: calc(100% - 46px)
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 左侧菜单 */
|
||||||
|
.sidebar {
|
||||||
|
width: 114px;
|
||||||
|
background: #FAFAFA;
|
||||||
|
overflow-y: auto;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar li {
|
||||||
|
list-style: none;
|
||||||
|
padding: 24px 0;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.28rem;
|
||||||
|
color: #686A70;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar li.active {
|
||||||
|
color: #004BFA;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 右侧内容 */
|
||||||
|
.content {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding-left: 12px;
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.sec-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
padding-top: 24px;
|
||||||
|
padding-right: 17px;
|
||||||
|
padding-bottom: 12px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.sec-title {
|
||||||
|
font-size: 0.28rem;
|
||||||
|
color: #686A70;
|
||||||
|
font-weight: 500
|
||||||
|
}
|
||||||
|
|
||||||
|
.sec-arrow {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #666;
|
||||||
|
font-size: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 横向滚动容器 */
|
||||||
|
.scroll-box {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
overflow-x: auto;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-box::-webkit-scrollbar {
|
||||||
|
display: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
flex-shrink: 0;
|
||||||
|
background: #FAFAFA;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-img {
|
||||||
|
width: 1.52rem;
|
||||||
|
background: #f1f1f1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-img img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-info {
|
||||||
|
padding: 8px;
|
||||||
|
text-align: center
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-name {
|
||||||
|
font-size: 0.2rem;
|
||||||
|
width: 1.52rem;
|
||||||
|
height: auto;
|
||||||
|
color: #1D1D1F;
|
||||||
|
line-height: 1.4;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-model {
|
||||||
|
font-size: 0.16rem;
|
||||||
|
color: #686A70;
|
||||||
|
margin-top: 4px
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 内容区块默认隐藏 */
|
||||||
|
.tab-pane {
|
||||||
|
display: none
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 激活时显示 */
|
||||||
|
.tab-pane.active {
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style>
|
||||||
|
/* 全屏侧边菜单 */
|
||||||
|
.full-menu {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, .4);
|
||||||
|
z-index: 9999;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.full-menu.show {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-wrap {
|
||||||
|
width: 80%;
|
||||||
|
height: 100%;
|
||||||
|
background: #fff;
|
||||||
|
position: relative;
|
||||||
|
padding: 20px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-close {
|
||||||
|
position: absolute;
|
||||||
|
right: 16px;
|
||||||
|
top: 16px;
|
||||||
|
font-size: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-logo {
|
||||||
|
margin: 30px 0 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-logo img {
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item {
|
||||||
|
padding: 14px 0;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
font-size: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item::after {
|
||||||
|
content: '>';
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-menu {
|
||||||
|
padding-left: 16px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-menu.show {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-item {
|
||||||
|
padding: 10px 0;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
{/block}
|
||||||
|
|
||||||
|
{block name="main"}
|
||||||
|
<!-- 顶部返回栏（已完全按图纸修改） -->
|
||||||
|
<div class="top-box">
|
||||||
|
<div class="top-bar">
|
||||||
|
<div class="back">
|
||||||
|
<image src="__IMAGES__/left.png"></image>
|
||||||
|
</div>
|
||||||
|
<div class="title">{$parent.name|default=''}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="main">
|
||||||
|
<!-- 左侧导航 -->
|
||||||
|
{if condition="!empty($categorys)"}
|
||||||
|
<ul class="sidebar">
|
||||||
|
{volist name="categorys" id="category"}
|
||||||
|
<li class="nav-item" data-tab="tab{$category.id}">{$category.name}</li>
|
||||||
|
{/volist}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<!-- 右侧分区内容 -->
|
||||||
|
<div class="content">
|
||||||
|
{volist name="categorys" id="category"}
|
||||||
|
<div class="tab-pane {eq name='$key' value='0'}active{/eq}" id="tab{$category.id}">
|
||||||
|
{if condition="!empty($category.children)"}
|
||||||
|
{volist name="$category.children" id="child"}
|
||||||
|
<section class="sec-box">
|
||||||
|
<div class="sec-header">
|
||||||
|
<div class="sec-title">{$child.name}</div>
|
||||||
|
<div class="sec-arrow" onclick="scrollNext(this)">
|
||||||
|
<img src="__IMAGES__/y.png" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{if condition="!empty($child.products)"}
|
||||||
|
<div class="scroll-box">
|
||||||
|
{volist name="$child.products" id="pro"}
|
||||||
|
<div class="card" href="{:url('product/detail', ['id' => $pro.id])}">
|
||||||
|
<div class="card-img">
|
||||||
|
<img src="{$pro.cover_image}" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<div class="card-name">{$pro.name}</div>
|
||||||
|
<div class="card-model">{$pro.spu}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/volist}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</section>
|
||||||
|
{/volist}
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/volist}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/block}
|
||||||
|
|
||||||
|
{block name="script"}
|
||||||
|
<script type="text/javascript">
|
||||||
|
(function (doc, win)
|
||||||
|
{
|
||||||
|
var docEl = doc.documentElement;
|
||||||
|
var resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize';
|
||||||
|
var designWidth = 804; // 设计稿宽度
|
||||||
|
var designRemPx = 100; // 设计稿下 1rem 对应 px
|
||||||
|
|
||||||
|
function setRootFontSize ()
|
||||||
|
{
|
||||||
|
var clientWidth = docEl.clientWidth;
|
||||||
|
if (!clientWidth) return;
|
||||||
|
|
||||||
|
// 计算基础字号
|
||||||
|
var fontSize = (clientWidth / designWidth) * designRemPx;
|
||||||
|
|
||||||
|
// 限制范围（可选）
|
||||||
|
fontSize = Math.max(fontSize, 28); // 最小 28px
|
||||||
|
fontSize = Math.min(fontSize, 80); // 最大 80px
|
||||||
|
|
||||||
|
docEl.style.fontSize = fontSize + 'px';
|
||||||
|
|
||||||
|
// 设置 body 基准，避免继承问题
|
||||||
|
doc.body.style.fontSize = '14px';
|
||||||
|
}
|
||||||
|
|
||||||
|
setRootFontSize();
|
||||||
|
win.addEventListener(resizeEvt, setRootFontSize);
|
||||||
|
doc.addEventListener('DOMContentLoaded', setRootFontSize);
|
||||||
|
})(document, window);
|
||||||
|
</script>
|
||||||
|
<script>
|
||||||
|
// 点击右侧箭头滚动
|
||||||
|
function scrollNext (el)
|
||||||
|
{
|
||||||
|
const box = el.closest('section')?.querySelector('.scroll-box')
|
||||||
|
|| el.parentElement.nextElementSibling
|
||||||
|
if (box) box.scrollBy({ left: 150, behavior: 'smooth' })
|
||||||
|
}
|
||||||
|
|
||||||
|
// 左侧Tab切换
|
||||||
|
const navItems = document.querySelectorAll('.nav-item')
|
||||||
|
const tabPanes = document.querySelectorAll('.tab-pane')
|
||||||
|
|
||||||
|
navItems.forEach(item =>
|
||||||
|
{
|
||||||
|
item.addEventListener('click', () =>
|
||||||
|
{
|
||||||
|
// 切换左侧激活状态
|
||||||
|
navItems.forEach(i => i.classList.remove('active'))
|
||||||
|
item.classList.add('active')
|
||||||
|
// 切换右侧内容
|
||||||
|
const target = item.dataset.tab
|
||||||
|
tabPanes.forEach(p => p.classList.remove('active'))
|
||||||
|
document.getElementById(target)?.classList.add('active')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
{/block}
|
||||||
@@ -449,7 +449,7 @@
|
|||||||
{if condition="!empty($header_categorys)"}
|
{if condition="!empty($header_categorys)"}
|
||||||
<div class="sub-menu">
|
<div class="sub-menu">
|
||||||
{volist name="header_categorys" id="vo" key="idx"}
|
{volist name="header_categorys" id="vo" key="idx"}
|
||||||
<div class="sub-item"><a href="#" target="_self">{$vo.name}</a></div>
|
<div class="sub-item"><a href="{:url('product/classify', ['id' => $vo.id])}" target="_self">{$vo.name}</a></div>
|
||||||
{/volist}
|
{/volist}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
Reference in New Issue
Block a user