feat: 调整商品详情的展示样式

pages/module/recommend/RecommendPostsList.vue

@@ -1,48 +1,50 @@
 <template>
-	<view class="container">
-		<ModuleTitle :title="recommendTheme.themeName" />
-		<view class="container-scroll">
-            <view v-for="(item, index) in recommendTheme.recommendPostsList" :key="index">
-                <view class="mk-card-item"  @click="sendReply(item)">
-                	<image :src="item.coverPhoto" mode="aspectFill"></image>
-                	<view class="overlay-gradient">
-                		<text class="overlay-text">{{ item.topic }}</text>
-                	</view>
-                </view>
-            </view>
-		</view>
-	</view>
+  <view class="container">
+    <ModuleTitle :title="recommendTheme.themeName" />
+    <view class="container-scroll">
+      <view
+        v-for="(item, index) in recommendTheme.recommendPostsList"
+        :key="index"
+      >
+        <view class="mk-card-item" @click="sendReply(item)">
+          <image :src="item.coverPhoto" mode="aspectFill"></image>
+          <view class="overlay-gradient">
+            <text class="overlay-text">{{ item.topic }}</text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script setup>
-	import ModuleTitle from '@/components/ModuleTitle/index.vue'
-	import { defineProps } from 'vue'
-	import { RECOMMEND_POSTS_TITLE } from '@/constant/constant.js'
+import ModuleTitle from "@/components/ModuleTitle/index.vue";
+import { defineProps } from "vue";
+import { RECOMMEND_POSTS_TITLE } from "@/constant/constant.js";
 
-	const props = defineProps({
-		recommendTheme: {
-			type: Object,
-			default: {}
-		}
-	})
-
-	const sendReply = (item) => {
-		const topic = item.userInputContent || item.topic.replace(/^#/, '');
-		uni.$emit(RECOMMEND_POSTS_TITLE, topic);
-	}
+const props = defineProps({
+  recommendTheme: {
+    type: Object,
+    default: {},
+  },
+});
 
+const sendReply = (item) => {
+  const topic = item.userInputContent || item.topic.replace(/^#/, "");
+  uni.$emit(RECOMMEND_POSTS_TITLE, topic);
+};
 </script>
 
 <style lang="scss" scoped>
-	.container {
-    width: 100%;
-	}
+.container {
+  width: 100%;
+}
 
-	.container-scroll {
+.container-scroll {
   display: flex;
   flex-direction: row;
   overflow-x: auto;
-  margin-top: 4px;
+  margin: 4px 0 6px;
 
   .mk-card-item {
     flex-shrink: 0; /* 关键：防止 flex 布局压缩子元素宽度 */
@@ -87,5 +89,4 @@
     }
   }
 }
-
 </style>