优化ui，公司背景，底部导航栏图标，筛选功能，详情导航栏，单位

UI修改计划.md

@@ -278,8 +278,8 @@ uni.loadFontFace({
 | UI-0010 | ✅ 已改 | 筛选入口从搜索行（被胶囊遮挡）移至商品区顶部；[ActiveFilters.vue](pages/products/components/ActiveFilters.vue) 重构为一行布局：筛选图标 + 已选标签横向滚动（scroll-x 不换行）+ 清除按钮，FilterDrawer 逻辑不变 |
 | UI-0011 | ✅ 已改 | [CountryBar.vue](pages/products/components/CountryBar.vue)：国旗与名称间距 20rpx → 8rpx（4px）；标签上下 row-gap 16rpx → 20rpx（+2px） |
 | UI-0012 | ✅ 已改 | [products.css](pages/products/products.css) 页面背景 + [ProductGrid.vue](pages/products/components/ProductGrid.vue) 右侧内容区背景 → #ECECEC |
-| UI-0013 | ✅ 已改 | tab_product_gray/orange.png 由 57×57 放大至 72×72（Pillow LANCZOS），与 home 图标一致 |
-| UI-0014 | ⏸ 暂缓 | 按要求暂不修改（Figma node-id=1508-155） |
+| UI-0013 | ✅ 已改 | tabbar 4 图标改为 Figma 官方导出（1594-124/1962-307 首页、1594-115/1962-309 产品）；product 原画布 19px vs home 24px 是大小不一的根源，按 24/19×3.79 倍导出统一 72×72 |
+| UI-0014 | ✅ 已改 | [product-detail.vue](pages/product-detail/product-detail.vue) 增加自定义导航栏（navigationStyle:custom）：固定白底，状态栏占位 + 44px 导航行，左侧返回按钮（CSS 边框箭头，44px 命中区，无历史时回首页）+ 居中标题"产品详情"；内容区 paddingTop 改为 statusBarHeight + 44px |
 | 全局字体 | ✅ 已改 | 首页 [index.vue](pages/index/index.vue) `onLoad` 用 `uni.loadFontFace(global: true)` 加载 `fonts/PingFang-Regular.subset.ttf`（family 自定义名 `PingFangSC`；App.vue onLaunch 调用会报 not font page，已移至页面）；[app.css](app.css) 字体栈首位插入 `'PingFangSC'`，加载失败自动回退系统字体 |
 
 **注意事项**：

app.css

@@ -29,7 +29,7 @@ page {
     font-size: 28rpx;
     color: var(--color-text-primary);
     background-color: var(--color-bg-page);
-    font-family: 'PingFangSC', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
+    font-family: 'CusPingFangSC', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
 }
 
 /* 通用样式 */

pages/index/components/CompanyIntro.vue

@@ -1,7 +1,8 @@
 <template>
   <!-- 公司简介 + 底部CTA - Figma 1461:1606 + 1498:1769 -->
   <view class="company-section">
-    <!-- 背景图 - 设计师切图原图（UI-007），清晰 + 0.2透明（同设计稿） -->
+    <view class="company-content">
+      <!-- 背景图 - 设计师切图原图（UI-007），作为内容区背景，不设透明度 -->
       <view class="company-bg">
         <image
           class="bg-img"
@@ -10,7 +11,6 @@
         ></image>
       </view>
 
-    <view class="company-content">
       <!-- 公司简介标题 - 居中 20px Heavy -->
       <text class="section-title">公司简介</text>
 
@@ -131,14 +131,14 @@ export default {
   overflow: hidden;
 }
 
-/* 背景图 - 模糊 + 0.5透明 */
+/* 背景图 - company-content 的背景层（z-index:-1 垫在文字下，高度跟随内容区） */
 .company-bg {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
-  height: 1088rpx;
-  z-index: 0;
+  height: 100%;
+  z-index: -1;
   overflow: hidden;
 }
 .bg-img {
@@ -151,6 +151,7 @@ export default {
   position: relative;
   z-index: 1;
   padding-top: 40rpx;
+  padding-bottom: 40rpx;
 }
 
 /* 公司简介标题 - 20px Heavy #000000 居中 */
@@ -231,7 +232,6 @@ export default {
   display: flex;
   flex-wrap: wrap;
   gap: 20rpx;
-  margin-bottom: 60rpx;
 }
 .ability-card {
   width: 345rpx;
@@ -239,7 +239,7 @@ export default {
   height: 180rpx;
   background: #ffffff;
   border-radius: 12rpx;
-  margin-bottom: 20rpx;
+  /* 上下间距与 WhyChoose 四方块一致：只用 grid 的 gap 20rpx，不叠加 margin */
   padding: 32rpx 20rpx;
   box-sizing: border-box;
   display: flex;

pages/index/components/WhyChoose.vue

@@ -27,10 +27,10 @@ export default {
 </script>
 
 <style scoped>
-/* 区块 - 灰色背景 #F8F8F8（UI-006 上下留白对称） */
+/* 区块 - 灰色背景 #F8F8F8，上下内边距 20px(390px宽) → 38rpx */
 .why-section {
   width: 100%;
-  padding: 96rpx 0;
+  padding: 38rpx 0;
   background: #f8f8f8;
   box-sizing: border-box;
 }

pages/index/index.vue

@@ -105,8 +105,9 @@ export default {
     loadGlobalFont() {
       uni.loadFontFace({
         global: true,
-        family: 'PingFangSC',
+        family: 'CusPingFangSC',
         source: `url("${buildUrl('/assets/miniprogram/fonts/PingFang-Regular.subset.ttf')}")`,
+        // source: 'url("https://raw.githubusercontent.com/googlefonts/zcool-kuaile/main/fonts/ttf/ZCOOLKuaiLe-Regular.ttf")' , // ✅ 正确
         success: () => console.log('字体加载成功'),
         fail: err => console.warn('字体加载失败，回退系统字体', err)
       })

pages/product-detail/components/SizeChart.vue

@@ -3,6 +3,8 @@
   <view class="chart-wrap">
     <view class="header-row">
       <text class="title">产品尺码</text>
+      <!-- 单位小字：设计稿 1566-1160，11px Medium 黑 50%，与标题底对齐 -->
+      <text class="unit">单位：cm</text>
     </view>
 
     <view class="table">
@@ -50,10 +52,10 @@ export default {
   background: #ffffff;
 }
 
-/* 标题行：产品尺码 + 单位 */
+/* 标题行：产品尺码（左） + 单位（右），按文字基线对齐（字下边界齐平） */
 .header-row {
   display: flex;
-  align-items: center;
+  align-items: baseline;
   margin-bottom: 20rpx; /* 10px */
 }
 .title {
@@ -61,6 +63,15 @@ export default {
   color: #000000;
   line-height: 33rpx;
 }
+/* 单位小字：紧接标题右侧（不靠右对齐），11px → 21rpx，行高 17px → 33rpx，黑色 50% 透明 */
+.unit {
+  margin-left: 12rpx;
+  font-size: 21rpx;
+  font-weight: 500;
+  color: #000000;
+  opacity: 0.5;
+  line-height: 33rpx;
+}
 /* 表格 */
 .table {
   display: flex;

pages/product-detail/product-detail.css

@@ -6,6 +6,47 @@
   background: #ffffff;
 }
 
+/* 自定义导航栏（UI-0014）：固定顶部白底，状态栏占位 + 44px 导航行 */
+.nav-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  background: #ffffff;
+  z-index: 999;
+}
+.nav-inner {
+  position: relative;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+/* 返回按钮：44px 命中区，箭头用 CSS 边框绘制，无需图标资源 */
+.nav-back {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.nav-back-arrow {
+  width: 18rpx;
+  height: 18rpx;
+  border-left: 4rpx solid #000000;
+  border-bottom: 4rpx solid #000000;
+  transform: rotate(45deg);
+  margin-left: 8rpx;
+}
+.nav-title {
+  font-size: 32rpx;
+  font-weight: 500;
+  color: #000000;
+}
+
 /* 区块之间的灰色分隔条：390x6px #F5F5F5 */
 .section-divider {
   width: 100%;

pages/product-detail/product-detail.vue

@@ -1,6 +1,16 @@
 <template>
   <!-- 产品详情页 - 接入 /public/goods/{goodId} 接口 -->
-  <view class="detail-page" :style="{ paddingTop: statusBarHeight + 'px' }">
+  <view class="detail-page" :style="{ paddingTop: (statusBarHeight + 44) + 'px' }">
+    <!-- 自定义导航栏：返回按钮 + 标题（UI-0014，navigationStyle:custom 需自绘） -->
+    <view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
+      <view class="nav-inner">
+        <view class="nav-back" @tap="goBack">
+          <view class="nav-back-arrow"></view>
+        </view>
+        <text class="nav-title">产品详情</text>
+      </view>
+    </view>
+
     <!-- 产品图片轮播 + 指示点 -->
     <DetailSwiper :images="productImages" />
 
@@ -153,6 +163,16 @@ export default {
     }
   },
   methods: {
+    // 返回上一页；无历史（如直接打开详情）时回首页 tab
+    goBack() {
+      const pages = getCurrentPages()
+      if (pages.length > 1) {
+        uni.navigateBack({ delta: 1 })
+      } else {
+        uni.switchTab({ url: '/pages/index/index' })
+      }
+    },
+
     async loadDetail(goodId) {
       if (!goodId) return
       this.loading = true

pages/products/components/ActiveFilters.vue

@@ -1,13 +1,14 @@
 <template>
   <!-- 筛选条件条：[筛选图标] [已选标签横向滚动] [清除] 同一行，防换行 -->
   <view class="active-filters" id="activeFilters">
-    <!-- 筛选入口：打开筛选抽屉 -->
+    <!-- 筛选入口：打开筛选抽屉；无选中条件时按设计稿显示"筛选"文字 -->
     <view class="filter-entry" @tap="onOpen">
       <image
         class="filter-entry-icon"
         src="/static/icons/products/icon_filter.png"
         mode="aspectFit"
       />
+      <text v-if="list.length === 0" class="filter-entry-text">筛选</text>
     </view>
 
     <!-- 已选标签：横向滚动，不换行 -->
@@ -78,10 +79,11 @@ export default {
   background: #ffffff;
   border-bottom: 1rpx solid #eeeeee;
 }
-/* 筛选入口图标（设计稿 18x18px → 35rpx） */
+/* 筛选入口（设计稿 1962-300：图标 18x18px + "筛选"12px Medium，间距 4px → 8rpx） */
 .filter-entry {
   display: flex;
   align-items: center;
+  gap: 8rpx;
   padding: 8rpx 16rpx 8rpx 0;
   flex-shrink: 0;
 }
@@ -89,6 +91,11 @@ export default {
   width: 35rpx;
   height: 35rpx;
 }
+.filter-entry-text {
+  font-size: 23rpx;
+  font-weight: 500;
+  color: #000000;
+}
 /* 标签区：横向滚动不换行 */
 .tags-scroll {
   flex: 1;