fix(ui): 首页热搜标签优化为单行横向滚动并解除胶囊避让右侧挤压

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
+        <scroll-view class="hot-scroll-view" scroll-x :show-scrollbar="false" enhanced :bounces="false">
-          v-for="word in hotSearchWords"
+          <view class="hot-tags-row">
-          :key="word"
+            <view
-          class="hot-tag btn-active"
+              v-for="word in hotSearchWords"
-          @click="searchKeyword = word"
+              :key="word"
-        >
+              class="hot-tag btn-active"
-          {{ word }}
+              @click="searchKeyword = word"
-        </view>
+            >
+              {{ 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;
+  width: 100%;
-  gap: 12rpx;
   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;
   }
 }