diff --git a/src/components/PublicComponent/PublicComponent.vue b/src/components/PublicComponent/PublicComponent.vue
index f40216d..6b91b87 100644
--- a/src/components/PublicComponent/PublicComponent.vue
+++ b/src/components/PublicComponent/PublicComponent.vue
@@ -15,11 +15,13 @@
 
   <div class="hot-search">
     <h1 class="title">{{ $t('hotSearch') }}</h1>
-    <div class="row">
-      <div class="item" v-for="item of hotRecommend" :key="item.shopId" @click="handleHot(item)">
-        <div class="text">{{ item.shopName }}</div>
+    <ScrollView class="row" :list="hotRecommend" scroll-x>
+      <div style="display: inline-block; white-space: nowrap">
+        <div class="item" v-for="item of hotRecommend" :key="item.shopId" @click="handleHot(item)">
+          <div class="text">{{ item.shopName }}</div>
+        </div>
       </div>
-    </div>
+    </ScrollView>
   </div>
 
   <div class="bottom">
@@ -40,6 +42,7 @@ import { useHandleScreen } from '@/composables/useHandleScreen'
 import { useLogout } from '@/composables/useLogout'
 import { useInitMap } from '@/composables/useInitMap'
 import Map from '@/components/Map/Map.vue'
+import ScrollView from '@/base/ScrollView/ScrollView.vue'
 const Logout = defineAsyncComponent(() => import('@/base/Logout/Logout.vue'))
 const AutoBackNotification = defineAsyncComponent(() => import('@/base/AutoBackNotification/AutoBackNotification.vue'))
 const Temperature = defineAsyncComponent(() => import('@/base/Temperature/Temperature.vue'))
@@ -120,10 +123,12 @@ watch(route, to => {
   }
   .row {
     margin-top: 16px;
+    width: calc(100vw - 68px);
+    overflow: hidden;
+    white-space: nowrap;
     .item {
       position: relative;
       display: inline-block;
-      max-width: 176px;
       height: 52px;
 
       background: rgba(255, 255, 255, 0.8);