style(RecommendPostsList): refine component layout and styling

- replace root div with semantic section element
- adjust container classes for proper flex layout, horizontal scrolling, and consistent spacing
- add shrink-0 to post items to prevent width shrinking
- add object-cover to cover images to maintain aspect ratio
- fix Tailwind left percentage syntax
- update development environment VITE_TOKEN value

.env.development

@@ -14,6 +14,6 @@ VITE_SOCKET_BASE_URL = "wss://onefeel.brother7.cn/ingress/agent/ws/chat"
 VITE_CLIENT_ID = "6"
 
 # Token
-VITE_TOKEN = "eyJraWQiOiJiMTVhZTk0Mi03MjI5LTMyOWUtODA1Yi0wNjFlNmRjYTE1MDQiLCJhbGciOiJSUzI1NiJ9.eyJ0ZW5hbnRfaWQiOjEsInN1YiI6Im94T3NGN2lqTkxvbEFIdkhDZDYtek1acE5kNWsiLCJjbGllbnRJZCI6ImN1c3RvbSIsImlzcyI6Imh0dHBzOi8vcGlnNGNsb3VkLmNvbSIsImNsaWVudF9pZCI6ImN1c3RvbSIsImF1dGhvcml0aWVzIjpbXSwiYXVkIjoiY3VzdG9tIiwibGljZW5zZSI6Imh0dHBzOi8vcGlnNGNsb3VkLmNvbSIsIndlY2hhdF9vcGVuaWQiOiJveE9zRjdpak5Mb2xBSHZIQ2Q2LXpNWnBOZDVrIiwibmJmIjoxNzgwMjgxMzQ4LCJ1c2VyX2lkIjoiMjAwNTEwMjg0NDQ2OTM4NzI2NSIsInNjb3BlIjpbInNlcnZlciJdLCJleHAiOjE3ODAyOTEzNDgsImlhdCI6MTc4MDI4MTM0OCwianRpIjoiNzU0NGM1OTQtNzQxZC00NzUwLThkYjctN2I3MTg5ODljMTFhIiwidXNlcm5hbWUiOiJveE9zRjdpak5Mb2xBSHZIQ2Q2LXpNWnBOZDVrIn0.Zzwbly0HQ7VHx3O2aBGNTvQCwo16r_Ey3bUGWl3CQdnHqPL6JT098eCzx834Z7pDTUBodRRv-_IZA_aKJ-f3lHrH75N-phXbne92ui668DpIezHyRSphTSmKm2cfYeVPPEwQYSTzmnDv6SNyETtl84E2fcsZUtElRyxtbmjvSUi4qkBreDHNvbNfFL-xITe-tE0cet2RbSRwkDlD6u-inLUhKpZlgV10saSYpsHqLEaVBcDrRgdFWDlpoDoW15f2LgvB0RcQkgh5tRF55TJ2SukBsAdrJxDBwkaiaHXPOc6ewynZm0lixdAt4acR-HGx5NaG-5Lr1no5zg8EqYsEpA"
+VITE_TOKEN = "eyJraWQiOiJiMTVhZTk0Mi03MjI5LTMyOWUtODA1Yi0wNjFlNmRjYTE1MDQiLCJhbGciOiJSUzI1NiJ9.eyJ0ZW5hbnRfaWQiOjEsInN1YiI6Im94T3NGN2lqTkxvbEFIdkhDZDYtek1acE5kNWsiLCJjbGllbnRJZCI6ImN1c3RvbSIsImlzcyI6Imh0dHBzOi8vcGlnNGNsb3VkLmNvbSIsImNsaWVudF9pZCI6ImN1c3RvbSIsImF1dGhvcml0aWVzIjpbXSwiYXVkIjoiY3VzdG9tIiwibGljZW5zZSI6Imh0dHBzOi8vcGlnNGNsb3VkLmNvbSIsIndlY2hhdF9vcGVuaWQiOiJveE9zRjdpak5Mb2xBSHZIQ2Q2LXpNWnBOZDVrIiwibmJmIjoxNzgwMjk1MzQ0LCJ1c2VyX2lkIjoiMjAwNTEwMjg0NDQ2OTM4NzI2NSIsInNjb3BlIjpbInNlcnZlciJdLCJleHAiOjE3ODAzMDUzNDQsImlhdCI6MTc4MDI5NTM0NCwianRpIjoiZDgwMmZiZTktMjgxMi00MWU1LWE5MTQtMjBlMTdhZWJiYzA5IiwidXNlcm5hbWUiOiJveE9zRjdpak5Mb2xBSHZIQ2Q2LXpNWnBOZDVrIn0.HXA_IaLKX4M4AnBRHJvk9UbegccWTBWsJ9871TAeAX3SowYBhwyKJMxYhYfFt79WX30_UEa8MNmI49djlDM2ODuaS0Hr-rMsih-QJOasCvAc3AKv8dF8dlxIN0Yqb0visQs9tIaKjBCFDi9B78Ns24kmVCdEW4M90XrqmEIMvXzAyMdXSPL0FWO2IDLTt4EqWc_-wYvizCD4-VbImK2YnlzCqxQW-bvAamws9_psoV_AHflx7esDaOXOv_EAsvqlPAyh0Nf7Mey1wOK4_e-aJOHC1833xWajsK4dBi8-pVw5bA8NYsZowN36wJztDj76QUU51kkR6c_abyoS8EzZCg"
 
 

src/pages/home/components/RecommendPostsList/index.vue

@@ -1,15 +1,16 @@
 <template>
-  <div>
+  <section>
     <ModuleTitle :title="recommendTheme.themeName" />
 
-    <div class="m-[4px_0_6px] text-[0px] overflow-x whitespace-nowrap">
-      <div class="w-[128px] bg-white inline-block rounded-[20px] mr-[8px]"
-        v-for="(item, index) in recommendTheme.recommendPostsList" :key="index" @click="sendReply(item)">
+    <div
+      class="mt-[4px] mb-[6px] mr-[-12px] pr-[12px] flex gap-[8px] overflow-x-auto whitespace-nowrap scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
+      <div class="w-[128px] shrink-0 bg-white rounded-[20px]" v-for="(item, index) in recommendTheme.recommendPostsList"
+        :key="index" @click="sendReply(item)">
         <div class="m-[4px] relative">
-          <img class="w-[120px] h-[120px] rounded-[16px] relative z-10" :src="item.coverPhoto" />
+          <img class="w-[120px] h-[120px] object-cover rounded-[16px] relative z-10" :src="item.coverPhoto" />
 
           <div
-            class="w-[96px] h-[96px] bg-ink-200 rounded-[16px] absolute bottom-[-4px] left-50% transform translate-x-[-50%] z-1">
+            class="w-[96px] h-[96px] bg-ink-200 rounded-[16px] absolute bottom-[-4px] left-[50%] transform translate-x-[-50%] z-1">
           </div>
         </div>
 
@@ -20,7 +21,7 @@
         </div>
       </div>
     </div>
-  </div>
+  </section>
 </template>
 
 <script setup>