fix(mp): 商品详情页底部操作栏 fixed 固定定位
- footer 改为 position: fixed 固定在视口底部,不随页面滚动 - 内容区添加 padding-bottom 留出 footer 高度 + 安全区域 - 移除不可靠的 flex + overflow 方案
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user