From 4447aa4a39c5b7d99f1ae407d6269993cbd9d2ca Mon Sep 17 00:00:00 2001 From: jsasg <735273025@qq.com> Date: Thu, 16 Apr 2026 14:42:13 +0800 Subject: [PATCH] =?UTF-8?q?=E6=95=B4=E4=BD=93=E6=BB=9A=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/index/view/mobile/product/classify.html | 63 ++++++++++- app/index/view/mobile/public/header.html | 102 +----------------- public/static/index/mobile/css/category.css | 37 +++++-- public/static/index/mobile/css/new_header.css | 8 +- 4 files changed, 96 insertions(+), 114 deletions(-) diff --git a/app/index/view/mobile/product/classify.html b/app/index/view/mobile/product/classify.html index cdd925b5..6bf3774b 100644 --- a/app/index/view/mobile/product/classify.html +++ b/app/index/view/mobile/product/classify.html @@ -44,6 +44,7 @@ {volist name="categorys" id="category"}
  • {$category.name}
    • {/volist} +
  • @@ -62,7 +63,7 @@ {if condition="!empty($child.products)"}
    {volist name="$child.products" id="pro"} - +
    @@ -156,9 +157,7 @@ document.querySelectorAll('.sidebar li').forEach(item => { // 更新相邻圆角 updateSidebarAdjacentRadius(); - // 您的tab切换逻辑 - // const tabId = this.getAttribute('data-tab'); - // 切换内容... + }); }); @@ -166,5 +165,61 @@ document.querySelectorAll('.sidebar li').forEach(item => { if (document.querySelector('.sidebar li.active')) { updateSidebarAdjacentRadius(); } + + +// 动态计算 li-bottom 的高度 +function setLiBottomHeight() { + const sidebar = document.querySelector('.sidebar'); + const liBottom = document.querySelector('.sidebar .li-bottom'); + const sidebarItems = document.querySelectorAll('.sidebar li:not(.li-bottom)'); + + if (!sidebar || !liBottom || sidebarItems.length === 0) return; + + // 计算所有正常li的总高度 + let totalHeight = 0; + sidebarItems.forEach(item => { + totalHeight += item.offsetHeight; + }); + + // 获取sidebar的高度 + const sidebarHeight = sidebar.offsetHeight; + + // 计算剩余高度 + const remainingHeight = sidebarHeight - totalHeight; + + // 赋值给 li-bottom + if (remainingHeight > 0) { + liBottom.style.height = remainingHeight + 'px'; + } else { + liBottom.style.height = '0px'; + liBottom.style.display = 'none'; + } +} + +// 页面加载时执行 +window.addEventListener('load', function() { + setLiBottomHeight(); +}); + +// 窗口大小改变时重新计算 +window.addEventListener('resize', function() { + console.log('切换了吗') + setLiBottomHeight(); +}); + +// 如果侧边栏内容有动态变化，使用 MutationObserver 监听 +const observer = new MutationObserver(function() { + setLiBottomHeight(); +}); + +// 监听侧边栏变化 +const sidebar = document.querySelector('.sidebar'); +if (sidebar) { + observer.observe(sidebar, { + childList: true, + subtree: true, + attributes: true + }); +} {/block} \ No newline at end of file diff --git a/app/index/view/mobile/public/header.html b/app/index/view/mobile/public/header.html index 5fcb6191..215d33d3 100644 --- a/app/index/view/mobile/public/header.html +++ b/app/index/view/mobile/public/header.html @@ -15,7 +15,7 @@
    -
    +
    @@ -131,6 +131,7 @@
    + diff --git a/public/static/index/mobile/css/category.css b/public/static/index/mobile/css/category.css index 4592dbeb..6ae4979e 100644 --- a/public/static/index/mobile/css/category.css +++ b/public/static/index/mobile/css/category.css @@ -65,7 +65,7 @@ body { /* 左侧菜单 #FAFAFA;*/ .sidebar { width: 114px; - background: #fff; + background:#fafafa; overflow-y: auto; box-sizing: border-box; } @@ -77,7 +77,7 @@ body { font-size: 0.28rem !important; color:#686A70; /* #686A70;*/ cursor: pointer; - background:#FAFAFA; + background:#fff; /* 分别控制上下圆角的过渡 */ border-top-right-radius: 0; border-bottom-right-radius: 0; @@ -85,7 +85,7 @@ body { } .sidebar li.active { color: #004BFA; - background: #fff; + background: #fafafa; } @@ -101,16 +101,39 @@ body { flex: 1; overflow-y: auto; padding-left: 12px; - background: #fff; - margin-bottom: 80px; + background: #fafafa; + /* padding-bottom: 100px; */ } +.right-content { + flex: 1; + overflow-y: auto; + padding-left: 12px; + background: #fafafa; + position: relative; +} + +/* 在底部添加占位元素 */ +.right-content::after { + content: ''; + display: block; + height: 80px; /* 根据需要调整 */ + width: 100%; + flex-shrink: 0; +} + +/* 最后一个元素底部留白 */ +.sec-box:last-child { + margin-bottom: 80px; +} + + + .sec-header { display: flex; justify-content: space-between; align-items: center; - padding-top: 24px; padding-right: 17px; padding-bottom: 12px; @@ -153,7 +176,7 @@ body { .right-card { flex-shrink: 0; - background: #FAFAFA; + background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); diff --git a/public/static/index/mobile/css/new_header.css b/public/static/index/mobile/css/new_header.css index cf99c608..229adb66 100644 --- a/public/static/index/mobile/css/new_header.css +++ b/public/static/index/mobile/css/new_header.css @@ -118,9 +118,9 @@ .sub-menu { display: none; /* height: 100vh; */ - overflow-y: auto; + /* overflow-y: auto; overflow-x: hidden; - -webkit-overflow-scrolling: touch; + -webkit-overflow-scrolling: touch; */ } /* .sub-menu-overflow { @@ -449,9 +449,9 @@ overflow-y: visible !important; } -/* 其他导航的子菜单使用JS动态设置高度 */ +/* 其他导航的子菜单使用JS动态设置高度 .has-child:not(:first-child) .sub-menu { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; -} \ No newline at end of file +} */ \ No newline at end of file