修复摸大红移动端分类栏主题色与固定滚动

选中态改为主题橙,左侧分类固定仅右侧商品列表滚动。
This commit is contained in:
yml2213
2026-07-16 20:08:54 +08:00
parent 66ca2693b3
commit b44b3354b9
@@ -270,15 +270,18 @@ async function handleSupportClick() {
<style scoped>
.mohong-shell {
min-height: 100vh;
/* 固定视口高度:仅右侧列表滚动,左侧分类栏不随页面滚走 */
height: 100dvh;
max-height: 100dvh;
overflow: hidden;
background: #f5f7fb;
padding-bottom: calc(64px + env(safe-area-inset-bottom));
padding-bottom: calc(52px + env(safe-area-inset-bottom));
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.page-header {
position: sticky;
top: 0;
flex-shrink: 0;
z-index: 10;
display: flex;
align-items: center;
@@ -325,11 +328,17 @@ async function handleSupportClick() {
display: grid;
grid-template-columns: 88px minmax(0, 1fr);
min-height: 0;
overflow: hidden;
}
.cat-sidebar {
height: 100%;
min-height: 0;
background: #f7f8fa;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 8px 0 16px;
overscroll-behavior: contain;
}
.cat-item {
display: block;
@@ -345,15 +354,19 @@ async function handleSupportClick() {
}
.cat-item.active {
background: #fff;
border-left-color: #ff4d4f;
color: #ff4d4f;
border-left-color: #ff6a00;
color: #ff6a00;
font-weight: 700;
}
.list-panel {
background: #fff;
overflow-y: auto;
padding: 0 0 12px;
height: 100%;
min-height: 0;
background: #fff;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 0 0 12px;
overscroll-behavior: contain;
}
.state-loading {
padding: 40px 0;