From 53a317c8cf6966b6819268fd74d425f42cc2fd91 Mon Sep 17 00:00:00 2001 From: jsasg <735273025@qq.com> Date: Thu, 16 Apr 2026 11:03:14 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F=E5=9C=86=E8=A7=92?= =?UTF-8?q?=E5=8A=A8=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/index/view/mobile/product/classify.html | 54 ++- public/static/index/mobile/css/category.css | 360 +++++++++++--------- 2 files changed, 246 insertions(+), 168 deletions(-) diff --git a/app/index/view/mobile/product/classify.html b/app/index/view/mobile/product/classify.html index 30597a8b..cdd925b5 100644 --- a/app/index/view/mobile/product/classify.html +++ b/app/index/view/mobile/product/classify.html @@ -62,7 +62,7 @@ {if condition="!empty($child.products)"}
{volist name="$child.products" id="pro"} - +
@@ -116,5 +116,55 @@ back.addEventListener('click',()=>{ window.location.href = document.referrer; }) +// 更新侧边栏相邻元素的圆角 +function updateSidebarAdjacentRadius() { + const sidebarItems = document.querySelectorAll('.sidebar li'); + + // 先移除所有相邻类名 + sidebarItems.forEach(item => { + item.classList.remove('active-prev', 'active-next'); + }); + + // 找到当前激活的项 + let activeIndex = -1; + sidebarItems.forEach((item, index) => { + if (item.classList.contains('active')) { + activeIndex = index; + } + }); + + // 添加上一个和下一个的类名（使用requestAnimationFrame确保DOM更新） + requestAnimationFrame(() => { + if (activeIndex > 0) { + sidebarItems[activeIndex - 1].classList.add('active-prev'); + } + if (activeIndex < sidebarItems.length - 1) { + sidebarItems[activeIndex + 1].classList.add('active-next'); + } + }); +} + +// 绑定点击事件 +document.querySelectorAll('.sidebar li').forEach(item => { + item.addEventListener('click', function() { + // 移除所有active + document.querySelectorAll('.sidebar li').forEach(li => { + li.classList.remove('active'); + }); + // 添加active + this.classList.add('active'); + // 更新相邻圆角 + updateSidebarAdjacentRadius(); + + // 您的tab切换逻辑 + // const tabId = this.getAttribute('data-tab'); + // 切换内容... + }); +}); + +// 页面初始化时调用 +if (document.querySelector('.sidebar li.active')) { + updateSidebarAdjacentRadius(); +} -{/block} +{/block} \ No newline at end of file diff --git a/public/static/index/mobile/css/category.css b/public/static/index/mobile/css/category.css index e8c146a5..4592dbeb 100644 --- a/public/static/index/mobile/css/category.css +++ b/public/static/index/mobile/css/category.css @@ -1,195 +1,223 @@ - * { - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: sans-serif; - font-size: inherit !important; - /* font-size:100% !important; */ - } +* { + 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 +body { + background: #f5f5f5; + font-size: inherit !important; + /* font-size:100% !important; */ + height: 100vh; + overflow: hidden; + max-width: 100vw !important; - } +} - .top-box { - width: 100%; - box-sizing: border-box; - padding: 20px 22px; - background: #fff; - margin-top: 46px; - /* border-bottom: 1px solid #f0f0f0; */ - box-shadow: 0 2px 8px rgba(217, 217, 217, 0.2); - } +.top-box { + width: 100%; + box-sizing: border-box; + padding: 20px 22px; + background: #fff; + margin-top: 46px; + /* border-bottom: 1px solid #f0f0f0; */ + box-shadow: 0 2px 8px rgba(217, 217, 217, 0.2); +} - .top-bar { - display: flex; - align-items: center; - height: 0.82rem; - background: #F1F2F5; - justify-content: space-between; - border-radius: 0.2rem; - padding: 0 16px; - } +.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; - } +.back { + width: 0.28rem; + height: 0.28rem; + color: #333; + cursor: pointer; + display: flex; + align-items: center; +} +.back img { + width: 0.28rem; + height: 0.28rem; +} +.title { + font-size: 0.32rem !important; + font-weight: 500; +} - .title { - font-size: 0.32rem !important; - font-weight: 500; - } +/* 主体布局 */ +.main { + display: flex; + height: calc(100% - 46px); + margin-top:0.018rem; +} - /* 主体布局 */ - .main { - display: flex; - height: calc(100% - 46px); - margin-top:0.018rem; - } +/* 左侧菜单 #FAFAFA;*/ +.sidebar { + width: 114px; + background: #fff; + overflow-y: auto; + box-sizing: border-box; +} - /* 左侧菜单 */ - .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; /* #686A70;*/ + cursor: pointer; + background:#FAFAFA; + /* 分别控制上下圆角的过渡 */ + border-top-right-radius: 0; + border-bottom-right-radius: 0; + transition: border-radius 1s cubic-bezier(0.4, 0, 0.2, 1); +} +.sidebar li.active { + color: #004BFA; + background: #fff; +} - .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; - border-top-right-radius: 0.17rem; - border-bottom-right-radius:0.17rem ; - } +.sidebar li.active-prev { + border-bottom-right-radius: 0.17rem !important; +} - /* 右侧内容 */ - .right-content { - flex: 1; - overflow-y: auto; - padding-left: 12px; - background: #fff; - margin-bottom: 80px; +.sidebar li.active-next { + border-top-right-radius: 0.17rem !important; +} +/* 右侧内容 */ +.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; +.sec-header { + display: flex; + justify-content: space-between; + align-items: center; - padding-top: 24px; - padding-right: 17px; - padding-bottom: 12px; + padding-top: 24px; + padding-right: 17px; + padding-bottom: 12px; - } +} - .sec-title { - font-size: 0.28rem !important; - color: #686A70; - font-weight: 500 - } +.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; - } +.sec-arrow { + width: 0.28rem; + height: 0.28rem; + display: flex; + align-items: center; + justify-content: center; + color: #666; + font-size: 20px; + cursor: pointer; +} +.sec-arrow img { + width: 0.28rem; + height: 0.28rem; +} +/* 横向滚动容器 */ +.scroll-box { + display: flex; + gap: 10px; + overflow-x: auto; + scroll-behavior: smooth; - /* 横向滚动容器 */ - .scroll-box { - display: flex; - gap: 10px; - overflow-x: auto; - scroll-behavior: smooth; + scrollbar-width: none; +} - scrollbar-width: none; - } +.scroll-box::-webkit-scrollbar { + display: 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 { + display: flex; + flex-direction: column; + align-items: center; + border-radius: 12px; + padding-left: 19px; + padding-right: 19px; + +} +.card-img { + width: 1.52rem; + background: #f1f1f1; + display: flex; + align-items: center; + justify-content: center; + color: #999; + margin-top: 8px; +} - .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 img { + width: 100%; - .card-img { - width: 1.52rem; - background: #f1f1f1; - display: flex; - align-items: center; - justify-content: center; - color: #999; - } +} - .card-img img { - width: 100%; - } +.card-info { + + text-align: center; + padding-top: 8px; + padding-bottom: 10px; +} - .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-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 +} - .card-model { - font-size: 0.16rem !important; - color: #686A70; - margin-top: 4px - } +/* 内容区块默认隐藏 */ +.tab-pane { + display: none +} - /* 内容区块默认隐藏 */ - .tab-pane { - display: none - } - - /* 激活时显示 */ - .tab-pane.active { - display: block; - - } +/* 激活时显示 */ +.tab-pane.active { + display: block; +}