hookehuyr

fix(知识库): 修复状态提示条未水平居中的样式问题

将 scroll-view 上的内边距移至内部产品列表容器,确保全宽状态提示条相对于屏幕水平居中,同时保持产品网格布局不变。
...@@ -5,6 +5,21 @@ ...@@ -5,6 +5,21 @@
5 5
6 --- 6 ---
7 7
8 +## [2026-02-03] - 修复知识库页面样式问题
9 +
10 +### 修复
11 +- 修复知识库页面底部提示文字未水平居中的问题
12 + -`scroll-view` 上的 `px-[40rpx]` 内边距移至内部的产品列表容器
13 + - 确保"加载中"、"加载更多"、"没有更多了"、"暂无相关产品"等全宽状态提示条能够相对于屏幕水平居中
14 + - 保持产品列表网格的视觉布局不变
15 +
16 +---
17 +
18 +**详细信息**
19 +- **影响文件**: `src/pages/knowledge-base/index.vue`
20 +- **技术栈**: Vue 3, Taro 4, TailwindCSS
21 +- **测试状态**: ✅ 已修复
22 +
8 ## [2026-02-03] - 知识库页面产品列表接口集成 23 ## [2026-02-03] - 知识库页面产品列表接口集成
9 24
10 ### 新增 25 ### 新增
......
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
32 32
33 <!-- 列表容器 --> 33 <!-- 列表容器 -->
34 <scroll-view 34 <scroll-view
35 - class="flex-1 min-h-0 overflow-y-auto px-[40rpx] pb-[calc(160rpx+env(safe-area-inset-bottom))]" 35 + class="flex-1 min-h-0 overflow-y-auto pb-[calc(160rpx+env(safe-area-inset-bottom))]"
36 scroll-y 36 scroll-y
37 @scrolltolower="onScrollToLower" 37 @scrolltolower="onScrollToLower"
38 > 38 >
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
42 </view> 42 </view>
43 43
44 <!-- Product Grid --> 44 <!-- Product Grid -->
45 - <view v-else class="flex flex-wrap justify-between"> 45 + <view v-else class="flex flex-wrap justify-between px-[40rpx]">
46 <!-- Card Item --> 46 <!-- Card Item -->
47 <view v-for="(item, index) in products" :key="item.id" 47 <view v-for="(item, index) in products" :key="item.id"
48 class="w-[48%] bg-white rounded-[24rpx] overflow-hidden mb-[24rpx] shadow-sm flex flex-col active:scale-[0.98] transition-transform duration-200" 48 class="w-[48%] bg-white rounded-[24rpx] overflow-hidden mb-[24rpx] shadow-sm flex flex-col active:scale-[0.98] transition-transform duration-200"
......