fix: make home channel bar horizontally scrollable

docs/业务进度管理.md

@@ -13,6 +13,20 @@
 
 ## 一、已完成事项
 
+### 95. 首页频道栏横向滚动与等宽间距
+
+- 状态：代码已修改，待页面验证 - 时间：2026-08-02
+
+完成内容：
+- 首页频道栏改用 `scroll-view` 支持左右滑动，频道数量增加或窄屏显示时不会挤压“更多”入口。
+- 频道项使用固定宽度并统一 `gap`，频道名称为一个、两个或三个字时仍保持一致的布局间距。
+
+涉及模块：
+- `uniapp/src/pages/index/index.vue`
+
+验证说明：
+- 已完成模板与样式静态检查，未执行 H5 构建或浏览器验证。
+
 ### 94. 统一开发编排接入 crawler
 
 - 状态：已完成 - 时间：2026-08-01

docs/设计稿映射.md

@@ -25,7 +25,7 @@
 | 赛事中心（含世界杯专题入口） | `uniapp/src/pages/match/match.vue` | ✅ 已完成 | 2026-07-11 赛程、直播、赔率改为在赛事中心当前内容区域切换；运动和联赛分类仅在赛程显示，赔率只保留盘口与联赛/球队搜索；2026-08-01 `/packages_match/pages/worldcup` 作为赛事 Tab 入口时默认展示赛事主页，专题仅由页面内入口打开 |
 | 赛事详情页 | `uniapp/src/pages/match_detail/match_detail.vue` | 🚧 部分完成 | 2026-05-29 优化顶部赛事摘要头部，补充联赛、对阵、状态与直播入口信息 |
 | 世界杯专题页（排名导航） | `uniapp/src/packages_match/pages/worldcup.vue` | 🚧 部分完成 | 2026-05-20 已按设计稿拆分排名导航、积分榜、球员榜组件，后续可继续细化表格视觉与新闻页样式 |
-| 首页 | `uniapp/src/pages/index/index.vue` | 🚧 部分完成 | 2026-07-31 已按当前设计图重构为“今日焦点赛程、主推大图、最新资讯”三段式首页；频道仍复用后台配置分类，待实际 H5 页面验收后确认最终状态 |
+| 首页 | `uniapp/src/pages/index/index.vue` | 🚧 部分完成 | 2026-07-31 已按当前设计图重构为“今日焦点赛程、主推大图、最新资讯”三段式首页；2026-08-02 频道栏改为可横向滑动，频道项固定宽度并统一间距；频道仍复用后台配置分类，待实际 H5 页面验收后确认最终状态 |
 | 新闻详情 | `uniapp/src/pages/news_detail/news_detail.vue` | 待核对 | 富文本与图片渲染已存在相关实现 |
 | 个人中心 | 待补充 | 待核对 | 需核对实际页面路径 |
 | AI 分析 | 待补充 | 待核对 | 需核对实际页面路径 |

uniapp/src/pages/index/index.vue

@@ -14,12 +14,14 @@
         </view>
 
         <view class="channel-bar">
-            <view class="channel-bar__list">
-                <view v-for="item in primaryChannels" :key="item.channelKey" class="channel-bar__item"
-                    :class="{ 'channel-bar__item--active': currentChannel === item.index }" @tap="switchChannel(item.index)">
-                    <text>{{ item.name }}</text>
+            <scroll-view scroll-x class="channel-bar__scroll" show-scrollbar="false">
+                <view class="channel-bar__list">
+                    <view v-for="item in primaryChannels" :key="item.channelKey" class="channel-bar__item"
+                        :class="{ 'channel-bar__item--active': currentChannel === item.index }" @tap="switchChannel(item.index)">
+                        <text>{{ item.name }}</text>
+                    </view>
                 </view>
-            </view>
+            </scroll-view>
             <view class="channel-bar__more" @tap="goChannelManage">
                 <text>更多</text>
                 <UIcon name="arrow-down" size="22" color="#667085" />
@@ -488,16 +490,27 @@ onUnload(() => uni.$off('channelChanged', onChannelChanged))
     background: #fff;
     border-bottom: 1rpx solid #edf0f5;
 
-    &__list {
-        min-width: 0;
+    &__scroll {
         flex: 1;
-        display: flex;
+        min-width: 0;
+        height: 86rpx;
+        white-space: nowrap;
+    }
+
+    &__list {
+        display: inline-flex;
         align-items: stretch;
+        min-width: 100%;
+        height: 100%;
+        padding: 0 12rpx;
+        gap: 12rpx;
+        box-sizing: border-box;
+        white-space: nowrap;
     }
 
     &__item {
-        flex: 1;
-        min-width: 0;
+        flex: 0 0 116rpx;
+        width: 116rpx;
         position: relative;
         display: flex;
         justify-content: center;
@@ -508,6 +521,8 @@ onUnload(() => uni.$off('channelChanged', onChannelChanged))
         overflow: hidden;
 
         text {
+            display: block;
+            max-width: 100%;
             overflow: hidden;
             text-overflow: ellipsis;
         }