综述: 优化福利专区页面布局和积分订单功能
- 调整页面内容区域高度,移除底部多余内边距,优化页面布局 - 修改底部导航栏定位方式,从固定定位改为普通文档流定位,避免遮挡内容 - 调整悬浮购物车按钮位置,使其与新的底部导航栏布局适配 - 优化积分订单tab切换逻辑,进入订单页面时隐藏购物车按钮,提升用户体验
This commit is contained in:
parent
acaea8fd8d
commit
d94fbdc464
|
|
@ -85,7 +85,6 @@
|
||||||
border-radius: 20px 20px 0 0;
|
border-radius: 20px 20px 0 0;
|
||||||
margin-top: -15px;
|
margin-top: -15px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
padding-bottom: 120px;
|
|
||||||
min-height: calc(100vh - 200px);
|
min-height: calc(100vh - 200px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -874,15 +873,12 @@
|
||||||
|
|
||||||
/* 底部导航 */
|
/* 底部导航 */
|
||||||
.bottom-nav {
|
.bottom-nav {
|
||||||
position: fixed;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
background: white;
|
background: white;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
padding: 10px 0 25px;
|
padding: 10px 0 25px;
|
||||||
border-top: 1px solid #eee;
|
border-top: 1px solid #eee;
|
||||||
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-item {
|
.nav-item {
|
||||||
|
|
@ -912,7 +908,7 @@
|
||||||
/* 悬浮购物车图标 */
|
/* 悬浮购物车图标 */
|
||||||
.floating-cart {
|
.floating-cart {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 90px;
|
bottom: 20px;
|
||||||
right: 20px;
|
right: 20px;
|
||||||
width: 60px;
|
width: 60px;
|
||||||
height: 60px;
|
height: 60px;
|
||||||
|
|
@ -1704,6 +1700,14 @@
|
||||||
if (tabName === 'orders') {
|
if (tabName === 'orders') {
|
||||||
renderPointsOrders();
|
renderPointsOrders();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 积分订单tab不显示购物车按钮
|
||||||
|
const floatingCart = document.getElementById('floatingCart');
|
||||||
|
if (tabName === 'orders') {
|
||||||
|
floatingCart.style.display = 'none';
|
||||||
|
} else {
|
||||||
|
floatingCart.style.display = 'flex';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 渲染积分订单数据
|
// 渲染积分订单数据
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue