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

src/pages/shop/detail/index.scss

@@ -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);