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:
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}
|
||||
Reference in New Issue
Block a user