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

{extend name="public/base" /}

{block name="style"}


<script type="text/javascript">
  (function (doc, win) {
        var docEl = doc.documentElement;
        var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
        
        function setRootFontSize() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            var fontSize = clientWidth / 8.04; // 750px/7.5=100px，375px/7.5=50px
            console.log(fontSize,'======fontSize=====')
            // 直接修改内联样式，优先级最高
            docEl.setAttribute('style', 'font-size: ' + fontSize + 'px !important;');
        }
      
        setRootFontSize();
        win.addEventListener(resizeEvt, setRootFontSize);
        doc.addEventListener('DOMContentLoaded', setRootFontSize);
    })(document, window);
</script>


<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: sans-serif;
        font-size: inherit !important; 
        /* font-size:100% !important; */
    }
    
    body {
        background: #f5f5f5;
        font-size: inherit !important; 
        /* font-size:100% !important; */
        height: 100vh;
        overflow: hidden
        
    }

    .top-box {
        width: 100%;
        box-sizing: border-box;
        padding: 20px 22px;
        background: #fff;
        margin-top: 46px;
    }

    .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 !important;
        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 16px;
        text-align: center;
        font-size: 0.28rem !important;
        color: #686A70;
        cursor: pointer;
    }

    .sidebar li.active {
        color: #004BFA;
        background: #fff;
    }

    /* 右侧内容 */
    .right-content {
        flex: 1;
        overflow-y: auto;
        padding-left: 12px;
        background: #fff;
        margin-bottom: 80px;

    }

    .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 !important;
        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
    }

    .right-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;
        color: #999;
    }

    .card-img img {
        width: 100%;
    }

    .card-info {
        padding: 8px;
        text-align: center
    }

    .card-name {
        font-size: 0.2rem !important;
        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 !important;
        color: #686A70;
        margin-top: 4px
    }

    /* 内容区块默认隐藏 */
    .tab-pane {
        display: none
    }

    /* 激活时显示 */
    .tab-pane.active {
        display: block;

    }
 
</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="right-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>
    // 点击右侧箭头滚动
    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}