fix(知识库): 修复状态提示条未水平居中的样式问题
将 scroll-view 上的内边距移至内部产品列表容器,确保全宽状态提示条相对于屏幕水平居中,同时保持产品网格布局不变。
Showing
2 changed files
with
17 additions
and
2 deletions
| ... | @@ -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" | ... | ... |
-
Please register or login to post a comment