From 8caeda2b06f393adfe3389bae378ee41ea937ff7 Mon Sep 17 00:00:00 2001
From: xcbyy <2578898740@qq.com>
Date: Fri, 23 Oct 2026 16:26:37 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E9=A6=96=E9=A1=B5=E7=83=AD=E6=90=9C?=
 =?UTF-8?q?=E6=A0=87=E7=AD=BE=E4=BC=98=E5=8C=96=E4=B8=BA=E5=8D=95=E8=A1=8C?=
 =?UTF-8?q?=E6=A8=AA=E5=90=91=E6=BB=9A=E5=8A=A8=E5=B9=B6=E8=A7=A3=E9=99=A4?=
 =?UTF-8?q?=E8=83=B6=E5=9B=8A=E9=81=BF=E8=AE=A9=E5=8F=B3=E4=BE=A7=E6=8C=A4?=
 =?UTF-8?q?=E5=8E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pwuniapp/pages/index/index.vue | 63 +++++++++++++++++++++++++---------
 1 file changed, 46 insertions(+), 17 deletions(-)

diff --git a/pwuniapp/pages/index/index.vue b/pwuniapp/pages/index/index.vue
index c749c4d..0ee7a39 100644
--- a/pwuniapp/pages/index/index.vue
+++ b/pwuniapp/pages/index/index.vue
@@ -15,17 +15,21 @@
           <image class="clear-svg" :src="ICONS.close" mode="aspectFit" />
         </view>
       </view>
-      <!-- 热搜关键词推荐栏 -->
+      <!-- 热搜关键词推荐栏 (单行横向滑动，满宽利用，杜绝折行堆叠) -->
       <view class="hot-search-tags" v-if="!searchKeyword">
         <text class="hot-label">热搜：</text>
-        <view
-          v-for="word in hotSearchWords"
-          :key="word"
-          class="hot-tag btn-active"
-          @click="searchKeyword = word"
-        >
-          {{ word }}
-        </view>
+        <scroll-view class="hot-scroll-view" scroll-x :show-scrollbar="false" enhanced :bounces="false">
+          <view class="hot-tags-row">
+            <view
+              v-for="word in hotSearchWords"
+              :key="word"
+              class="hot-tag btn-active"
+              @click="searchKeyword = word"
+            >
+              {{ word }}
+            </view>
+          </view>
+        </scroll-view>
       </view>
     </view>
 
@@ -835,17 +839,13 @@ const navTo = (url) => {
 
 .header-search {
   padding-top: var(--safe-header-gap, 36rpx);
-  padding-right: calc(32rpx + var(--capsule-right-space, 0rpx));
+  padding-right: 32rpx;
   padding-bottom: 20rpx;
   padding-left: 32rpx;
   background-color: #0A0F1D;
   position: sticky;
   top: 0;
   z-index: 50;
-  /* #ifdef MP-WEIXIN */
-  /* 微信小程序端胶囊按钮避让 (capsule-space) */
-  padding-right: calc(32rpx + var(--capsule-right-space, 210rpx));
-  /* #endif */
 
   .search-box {
     display: flex;
@@ -854,6 +854,7 @@ const navTo = (url) => {
     height: 80rpx;
     /* #ifdef MP-WEIXIN */
     height: var(--capsule-height, 64rpx);
+    margin-right: var(--capsule-right-space, 210rpx);
     /* #endif */
     border-radius: 40rpx;
     padding: 0 28rpx;
@@ -1437,23 +1438,51 @@ const navTo = (url) => {
 .hot-search-tags {
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
-  gap: 12rpx;
+  width: 100%;
   margin-top: 14rpx;
+  overflow: hidden;
 
   .hot-label {
+    flex-shrink: 0;
     font-size: 20rpx;
     color: #64748B;
+    margin-right: 8rpx;
+    line-height: 1;
+  }
+
+  .hot-scroll-view {
+    flex: 1;
+    min-width: 0;
+    white-space: nowrap;
+
+    ::-webkit-scrollbar {
+      display: none;
+      width: 0 !important;
+      height: 0 !important;
+      -webkit-appearance: none;
+      background: transparent;
+    }
+  }
+
+  .hot-tags-row {
+    display: inline-flex;
+    align-items: center;
+    gap: 12rpx;
   }
 
   .hot-tag {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     font-size: 20rpx;
     color: #94A3B8;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.08);
-    padding: 4rpx 14rpx;
+    padding: 6rpx 16rpx;
     border-radius: 20rpx;
     transition: all 0.2s;
+    white-space: nowrap;
   }
 }