EIEI/wechat_wc
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 全站视觉焕新与悬浮玻璃 TabBar 迁移

Browse Source
This commit is contained in:
broccoli
2026-08-07 23:29:19 +08:00
parent 19408e5a8c
commit 61f1217384
97 changed files with 4007 additions and 2024 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/shop/detail/index.scss
+73 -45
View File
@@ -9,7 +9,7 @@
left: 0;
right: 0;
bottom: 0;
background: rgb(28, 22, 18);
background: var(--bg-page);
}
/* --- Fixed Hero Area --- */
@@ -18,7 +18,7 @@
top: 0;
left: 0;
width: 100%;
height: 65vh; /* hero takes 65% viewport height */
height: 65vh;
z-index: 0;
overflow: hidden;
}
@@ -56,22 +56,22 @@
left: 0;
right: 0;
z-index: 2;
padding: 80rpx 40rpx 24rpx;
padding: 96rpx 40rpx calc(24rpx + env(safe-area-inset-bottom));
display: flex;
flex-direction: column;
gap: 8rpx;
}
.shop-hero-title {
font-size: 40rpx;
font-size: 44rpx;
font-weight: 700;
line-height: 1.3;
color: #f0e6d8;
color: var(--text-primary);
}
.shop-hero-subtitle {
font-size: 22rpx;
color: #b0a395;
font-size: 24rpx;
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -92,7 +92,7 @@
.shop-hero-original {
font-size: 26rpx;
color: #8a7e72;
color: var(--text-muted);
text-decoration: line-through;
}
@@ -103,7 +103,7 @@
}
.shop-content {
min-height: 100vh; /* ensure scrollability */
min-height: 100vh;
will-change: transform;
}
@@ -113,7 +113,7 @@
position: sticky;
top: 0;
z-index: 4;
padding: 40rpx 40rpx 32rpx;
padding: 24rpx 40rpx 24rpx;
display: flex;
flex-direction: column;
gap: 10rpx;
@@ -122,15 +122,15 @@
}
.shop-band-title {
font-size: 44rpx;
font-size: 40rpx;
font-weight: 700;
line-height: 1.3;
color: #f0e6d8;
color: var(--text-primary);
}
.shop-band-subtitle {
font-size: 24rpx;
color: #b0a395;
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -144,59 +144,74 @@
}
.shop-band-price {
font-size: 48rpx;
font-size: 40rpx;
font-weight: 700;
color: var(--accent-primary);
}
.shop-band-original {
font-size: 26rpx;
color: #8a7e72;
color: var(--text-muted);
text-decoration: line-through;
}
/* --- Detail Body --- */
.shop-detail-body {
padding: 32rpx 40rpx 60rpx;
padding: 0 32rpx calc(48rpx + env(safe-area-inset-bottom));
will-change: opacity, transform;
box-sizing: border-box;
}
.shop-content-card {
padding: 32rpx;
background: var(--bg-card);
border: 1rpx solid var(--border);
border-radius: 32rpx;
box-shadow: var(--shadow-card);
box-sizing: border-box;
}
.shop-section {
margin-bottom: 32rpx;
}
.shop-section:last-child {
margin-bottom: 0;
}
.shop-section-title {
font-size: 34rpx;
font-weight: 700;
color: #f0e6d8;
margin: 28rpx 0 20rpx;
color: var(--text-primary);
margin: 0 0 20rpx;
display: block;
position: relative;
padding-left: 20rpx;
letter-spacing: 0;
}
.shop-section-title::before {
content: '';
position: absolute;
left: 0;
top: 6rpx;
bottom: 6rpx;
top: 8rpx;
bottom: 8rpx;
width: 6rpx;
border-radius: 4rpx;
background: linear-gradient(180deg, var(--accent-primary), var(--accent-primary-soft));
border-radius: 999rpx;
background: var(--accent-primary);
}
.shop-section-text {
font-size: 28rpx;
color: #c4b8a8;
line-height: 1.75;
color: var(--text-secondary);
line-height: 1.8;
display: block;
}
.shop-divider {
height: 2rpx;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
margin: 40rpx 0;
height: 1rpx;
background: var(--border);
margin: 32rpx 0;
}
/* --- Tags --- */
@@ -208,10 +223,11 @@
}
.shop-tag {
padding: 10rpx 28rpx;
border-radius: 40rpx;
height: 56rpx;
padding: 0 28rpx;
border-radius: 999rpx;
font-size: 22rpx;
font-weight: 500;
font-weight: 600;
background: var(--accent-primary-soft);
border: 1rpx solid var(--accent-primary);
display: inline-flex;
@@ -226,16 +242,16 @@
/* --- Spec Table --- */
.shop-spec-table {
width: 100%;
border-collapse: collapse;
border-radius: 16rpx;
border: 1rpx solid var(--border);
border-radius: 20rpx;
overflow: hidden;
font-size: 26rpx;
background: var(--bg-muted);
}
.shop-spec-row {
display: flex;
padding: 20rpx 24rpx;
border-bottom: 1rpx solid rgba(255,255,255,0.06);
padding: 24rpx 28rpx;
border-bottom: 1rpx solid var(--border);
}
.shop-spec-row:last-child {
@@ -244,14 +260,16 @@
.shop-spec-key {
width: 35%;
color: #8a7e72;
color: var(--text-muted);
font-weight: 500;
font-size: 24rpx;
}
.shop-spec-val {
flex: 1;
color: #e8e0d6;
color: var(--text-primary);
font-size: 26rpx;
font-weight: 500;
word-break: break-all;
}
@@ -268,11 +286,11 @@
width: 88rpx;
height: 88rpx;
border-radius: 50%;
background: rgba(0, 0, 0, 0.35);
backdrop-filter: blur(16rpx) saturate(1.4);
-webkit-backdrop-filter: blur(16rpx) saturate(1.4);
border: 1rpx solid rgba(255,255,255,0.12);
box-shadow: var(--shadow-card);
background: rgba(40, 35, 32, 0.5);
backdrop-filter: blur(16px) saturate(1.4);
-webkit-backdrop-filter: blur(16px) saturate(1.4);
border: 1rpx solid var(--glass-line);
box-shadow: var(--shadow-elevated);
display: flex;
align-items: center;
justify-content: center;
@@ -285,15 +303,25 @@
.shop-back-arrow {
font-size: 36rpx;
color: rgba(255,255,255,0.85);
color: var(--text-primary);
line-height: 1;
}
/* --- Bottom Action Bar — 样式由全局 .action-bar 提供，本地只补充价格摘要 --- */
.action-bar .price-summary {
/* --- Bottom Action Bar — 毛玻璃由 BottomActionBar 提供，本地只补充价格摘要 --- */
.bottom-action-bar .price-summary {
flex-shrink: 0;
}
.bottom-action-bar .btn-primary,
.bottom-action-bar .btn-secondary {
flex: 1;
text-align: center;
padding: 28rpx 0;
font-size: 28rpx;
font-weight: 600;
line-height: 1.2;
}
.summary-label {
font-size: 22rpx;
color: var(--text-secondary);
src/pages/shop/detail/index.tsx
+53 -42
View File
@@ -8,6 +8,7 @@ import { useSafeArea } from '../../../hooks/useSafeArea'
import { useStatusBar } from '../../../hooks/useStatusBar'
import { useThemeContext } from '../../../context/ThemeContext'
import ThemedPageMeta from '../../../components/ThemedPageMeta'
import BottomActionBar from '../../../components/BottomActionBar'
const clamp = (v: number, min: number, max: number) => Math.min(Math.max(v, min), max)
const lerp = (a: number, b: number, t: number) => a + (b - a) * t
@@ -210,49 +211,59 @@ export default function ShopDetailPage() {
transform: `translateY(${heroStyles.contentOffset}px)`
}}
>
{product.story && (
<View className="shop-section">
<Text className="shop-section-title">设计理念</Text>
<Text className="shop-section-text">{product.story}</Text>
</View>
)}
<View className="shop-divider" />
{product.scene && (
<View className="shop-section">
<Text className="shop-section-title">使用场景</Text>
<Text className="shop-section-text">{product.scene}</Text>
</View>
)}
{product.tags && product.tags.length > 0 && (
<View className="shop-section">
<View className="shop-tag-row">
{product.tags.map(tag => (
<View key={tag} className="shop-tag">
<Text className="shop-tag-text">{tag}</Text>
</View>
))}
<View className="shop-content-card">
{product.story && (
<View className="shop-section">
<Text className="shop-section-title">设计理念</Text>
<Text className="shop-section-text">{product.story}</Text>
</View>
</View>
)}
)}
<View className="shop-divider" />
{(product.story && product.scene) && (
<View className="shop-divider" />
)}
{product.specs && product.specs.length > 0 && (
<View className="shop-section">
<Text className="shop-section-title">规格参数</Text>
<View className="shop-spec-table">
{product.specs.map(([k, v]) => (
<View key={k} className="shop-spec-row">
<Text className="shop-spec-key">{k}</Text>
<Text className="shop-spec-val">{v}</Text>
</View>
))}
{product.scene && (
<View className="shop-section">
<Text className="shop-section-title">使用场景</Text>
<Text className="shop-section-text">{product.scene}</Text>
</View>
</View>
)}
)}
{product.tags && product.tags.length > 0 && (
<View className="shop-section">
<View className="shop-tag-row">
{product.tags.map(tag => (
<View key={tag} className="shop-tag">
<Text className="shop-tag-text">{tag}</Text>
</View>
))}
</View>
</View>
)}
{((product.story || product.scene) && product.tags && product.tags.length > 0) && (
<View className="shop-divider" />
)}
{((product.story || product.scene || (product.tags && product.tags.length > 0)) && product.specs && product.specs.length > 0) && (
<View className="shop-divider" />
)}
{product.specs && product.specs.length > 0 && (
<View className="shop-section">
<Text className="shop-section-title">规格参数</Text>
<View className="shop-spec-table">
{product.specs.map(([k, v]) => (
<View key={k} className="shop-spec-row">
<Text className="shop-spec-key">{k}</Text>
<Text className="shop-spec-val">{v}</Text>
</View>
))}
</View>
</View>
)}
</View>
<View className="shop-bottom-spacer" />
</View>
@@ -268,8 +279,8 @@ export default function ShopDetailPage() {
<Text className="shop-back-arrow">←</Text>
</View>
{/* Bottom CTA — 全局毛玻璃 action-bar，沿用 product/checkout 模式 */}
<View className="action-bar">
{/* Bottom CTA — 复用毛玻璃 BottomActionBar */}
<BottomActionBar>
<View className="price-summary">
<Text className="summary-label">起价</Text>
<Text className="summary-price">¥{product.price}</Text>
@@ -283,7 +294,7 @@ export default function ShopDetailPage() {
<View className="btn-primary" onTap={() => Taro.navigateTo({ url: `/pages/product/index?id=${product.id}` })}>
<Text>立即定制</Text>
</View>
</View>
</BottomActionBar>
<View className="safe-bottom-placeholder" />
</View>
)