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

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>