orico-official-website/app/index/view/mobile/product/classify.html

{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}