fix(mp): 商品详情页底部操作栏 fixed 固定定位

- footer 改为 position: fixed 固定在视口底部,不随页面滚动
- 内容区添加 padding-bottom 留出 footer 高度 + 安全区域
- 移除不可靠的 flex + overflow 方案
This commit is contained in:
iven
2026-05-22 20:06:39 +08:00
parent 7f324466bf
commit b3f53cd437

View File

@@ -5,9 +5,6 @@
.product-detail { .product-detail {
background: $bg; background: $bg;
display: flex;
flex-direction: column;
height: 100%;
&__loading, &__empty { &__loading, &__empty {
@include flex-center; @include flex-center;
@@ -32,9 +29,7 @@
} }
&__scroll { &__scroll {
flex: 1; padding-bottom: calc(70px + env(safe-area-inset-bottom));
overflow-y: auto;
-webkit-overflow-scrolling: touch;
} }
// 商品大图 // 商品大图
@@ -171,9 +166,12 @@
line-height: 1.6; line-height: 1.6;
} }
// 底部操作栏 // 底部操作栏 — fixed 固定在视口底部
&__footer { &__footer {
flex-shrink: 0; position: fixed;
bottom: 0;
left: 0;
right: 0;
background: $card; background: $card;
border-top: 1px solid $bd; border-top: 1px solid $bd;
padding: $sp-sm $sp-section; padding: $sp-sm $sp-section;