fix: unify product detail back button with top mask style
This commit is contained in:
@@ -5,28 +5,23 @@
|
||||
|
||||
.page-header.design-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: flex-end;
|
||||
min-height: 88rpx;
|
||||
padding-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.header-spacer {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
flex-shrink: 0;
|
||||
padding-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
font-size: 56rpx;
|
||||
font-weight: 800;
|
||||
line-height: 1.15;
|
||||
letter-spacing: 0;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.header-manage {
|
||||
width: 88rpx;
|
||||
text-align: center;
|
||||
text-align: right;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: var(--accent-secondary);
|
||||
|
||||
@@ -125,7 +125,6 @@ export default function DesignListPage() {
|
||||
<LoginGuard>
|
||||
<View className='design-page'>
|
||||
<View className='page-header design-header' style={{ paddingTop: `${safe.statusBarHeight + 12}px` }}>
|
||||
<View className='header-spacer' />
|
||||
<Text className='header-title'>我的设计清单</Text>
|
||||
<View className='header-manage' onTap={handleManage}>
|
||||
<Text>{managing ? '完成' : '管理'}</Text>
|
||||
|
||||
@@ -279,7 +279,7 @@ export default function DIYPage() {
|
||||
<ScrollTopMask title="设计工作台" targetSelector=".page-header.surface-card" showBack />
|
||||
<View className='diy-page'>
|
||||
|
||||
<View className='page-header surface-card mt-20' style={{ paddingTop: `${safe.statusBarHeight + 12}px` }}>
|
||||
<View className='page-header surface-card' style={{ paddingTop: `${safe.statusBarHeight + 12}px` }}>
|
||||
<View className='flex-between' style={{ width: '100%' }}>
|
||||
<Text className='back-btn' onTap={goBack}>←</Text>
|
||||
<Text className='page-title'>设计工作台</Text>
|
||||
|
||||
@@ -481,8 +481,3 @@
|
||||
font-weight: 600;
|
||||
color: var(--accent-secondary);
|
||||
}
|
||||
|
||||
/* --- 底部留白 --- */
|
||||
.page-bottom-spacer {
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
@@ -56,7 +56,7 @@ export default function OrderDetailPage() {
|
||||
return (
|
||||
<View className={`theme-${resolvedTheme}`}>
|
||||
<ThemedPageMeta />
|
||||
<ScrollTopMask title="订单详情" targetSelector=".page-header" showBack />
|
||||
<ScrollTopMask title="订单详情" targetSelector=".page-header" showBack />
|
||||
<View className='order-detail-page'>
|
||||
<View className='page-header' style={{ paddingTop: `${safe.statusBarHeight + 12}px` }}>
|
||||
<View className='page-header-inner'>
|
||||
@@ -75,7 +75,7 @@ export default function OrderDetailPage() {
|
||||
return (
|
||||
<View className={`theme-${resolvedTheme}`}>
|
||||
<ThemedPageMeta />
|
||||
<ScrollTopMask title="订单详情" targetSelector=".page-header" showBack />
|
||||
<ScrollTopMask title="订单详情" targetSelector=".page-header" showBack />
|
||||
<View className='order-detail-page'>
|
||||
|
||||
<View className='page-header' style={{ paddingTop: `${safe.statusBarHeight + 12}px` }}>
|
||||
@@ -209,8 +209,6 @@ export default function OrderDetailPage() {
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className='page-bottom-spacer' />
|
||||
|
||||
{/* 地址选择底部弹窗 */}
|
||||
{showAddrPicker && (
|
||||
<View className='modal-overlay' style={{ alignItems: 'flex-end', justifyContent: 'flex-end' }}>
|
||||
|
||||
@@ -8,15 +8,16 @@
|
||||
.orders-page .page-header {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
padding-top: 0;
|
||||
padding-bottom: 32rpx;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.orders-page .page-title {
|
||||
display: block;
|
||||
font-size: 44rpx;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
font-size: 56rpx;
|
||||
font-weight: 800;
|
||||
line-height: 1.15;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
@@ -19,8 +19,8 @@
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
flex: 0 0 auto;
|
||||
border-radius: 50%;
|
||||
background: var(--bg-card);
|
||||
@@ -36,7 +36,8 @@
|
||||
}
|
||||
|
||||
.back-arrow {
|
||||
font-size: 36rpx;
|
||||
font-size: 44rpx;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
@@ -53,7 +54,7 @@
|
||||
}
|
||||
|
||||
.nav-placeholder {
|
||||
width: 88rpx;
|
||||
width: 80rpx;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
|
||||
@@ -28,7 +28,7 @@ export default function ProductPage() {
|
||||
return (
|
||||
<View className={`theme-${resolvedTheme}`}>
|
||||
<ThemedPageMeta />
|
||||
<ScrollTopMask title="商品详情" targetSelector=".page-header" showBack />
|
||||
<ScrollTopMask title="商品详情" targetSelector=".page-header" showBack />
|
||||
<View className='product-page'>
|
||||
<View className='page-header' style={{ marginTop: `${safe.statusBarHeight + 12}px` }}>
|
||||
<View className='page-header-inner'>
|
||||
@@ -173,9 +173,6 @@ export default function ProductPage() {
|
||||
</View>
|
||||
</BottomActionBar>
|
||||
|
||||
{/* 安全区占位(防止内容被 action-bar 遮挡) */}
|
||||
<View className='safe-bottom-placeholder' />
|
||||
|
||||
{/* 数量选择弹窗 */}
|
||||
{showModal && (
|
||||
<View className='modal-overlay'>
|
||||
|
||||
@@ -46,7 +46,7 @@
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
text-align: center;
|
||||
font-size: 44rpx;
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
color: var(--text-primary);
|
||||
|
||||
@@ -95,7 +95,6 @@ export default function ServicePage() {
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={{ height: '80rpx' }} />
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
|
||||
@@ -142,6 +142,7 @@ export default function SettingsPage() {
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 底部留白:短内容页,为退出登录按钮与底部保留呼吸空间 */}
|
||||
<View style={{ height: '80rpx' }} />
|
||||
|
||||
{/* 编辑弹窗 */}
|
||||
|
||||
@@ -281,10 +281,10 @@
|
||||
.shop-back-btn {
|
||||
position: fixed;
|
||||
top: calc(env(safe-area-inset-top, 20px) + 20rpx);
|
||||
left: 24rpx;
|
||||
left: 30rpx;
|
||||
z-index: 50;
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba(40, 35, 32, 0.5);
|
||||
backdrop-filter: blur(16px) saturate(1.4);
|
||||
@@ -302,9 +302,10 @@
|
||||
}
|
||||
|
||||
.shop-back-arrow {
|
||||
font-size: 36rpx;
|
||||
color: var(--text-primary);
|
||||
font-size: 44rpx;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* --- Bottom Action Bar — 毛玻璃由 BottomActionBar 提供,本地只补充价格摘要 --- */
|
||||
|
||||
@@ -277,7 +277,7 @@ export default function ShopDetailPage() {
|
||||
<View
|
||||
className="shop-back-btn"
|
||||
onTap={() => Taro.navigateBack()}
|
||||
style={{ top: `${safe.backBtnPaddingTop}px`, opacity: heroStyles.backBtnOpacity }}
|
||||
style={{ top: `${safe.menuButtonTop}px`, opacity: heroStyles.backBtnOpacity }}
|
||||
>
|
||||
<Text className="shop-back-arrow">←</Text>
|
||||
</View>
|
||||
|
||||
@@ -8,15 +8,15 @@
|
||||
}
|
||||
|
||||
.shop-header {
|
||||
text-align: center;
|
||||
padding: 48rpx 0 32rpx;
|
||||
padding-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.shop-header-title {
|
||||
font-size: 44rpx;
|
||||
font-weight: 700;
|
||||
font-size: 56rpx;
|
||||
font-weight: 800;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: 0;
|
||||
line-height: 1.15;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
@@ -94,11 +94,12 @@
|
||||
}
|
||||
|
||||
.udb-header .page-title {
|
||||
text-align: center;
|
||||
font-size: 44rpx;
|
||||
font-weight: 700;
|
||||
text-align: left;
|
||||
font-size: 56rpx;
|
||||
font-weight: 800;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: 0;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
/* 工具栏 */
|
||||
|
||||
Reference in New Issue
Block a user