From 16b8885eb1d1d6d6ee422cb9c1d98dde7711e2c2 Mon Sep 17 00:00:00 2001
From: zoujing <kidevelop@163.com>
Date: Sun, 10 Aug 2025 20:44:40 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BB=84=E4=BB=B6=E7=9A=84=E7=82=B9?=
 =?UTF-8?q?=E5=87=BB=E4=BA=8B=E4=BB=B6=E7=9A=84=E7=83=AD=E5=8C=BA=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../booking/QuickBookingContentList.vue       | 94 ++++++++++---------
 pages/module/detail/DetailCardCompontent.vue  |  1 +
 .../detail/DetailCardGoodsContentList.vue     | 93 +++++++++---------
 .../discovery/DiscoveryCradContentList.vue    | 28 +++---
 pages/module/recommend/RecommendPostsList.vue | 18 ++--
 5 files changed, 121 insertions(+), 113 deletions(-)

diff --git a/pages/module/booking/QuickBookingContentList.vue b/pages/module/booking/QuickBookingContentList.vue
index 3b90a49..3c2a070 100644
--- a/pages/module/booking/QuickBookingContentList.vue
+++ b/pages/module/booking/QuickBookingContentList.vue
@@ -2,30 +2,32 @@
 	<view class="container">
 		<ModuleTitle :title="commodityDTO.title" />
 		<view class="container-scroll">
-			<view class="mk-card-item" v-for="(item, index) in commodityDTO.commodityList" :key="`${item.commodityId}-${index}`">
-				<!-- <view class="card-badge">超值推荐</view> -->
-				<image class="card-img" :src="item.commodityIcon" mode="aspectFill" />
-				<view class="card-content">
-					<view class="card-title-column">
-						<text class="card-title">{{ item.commodityName }}</text>
-						<view class="card-tags" v-for="(tag) in item.commodityTradeRuleList" :key="tag">
-							<text class="card-tag">{{ tag }}</text>
-						</view>
-					</view>
-					<template v-for="(serviceItem, index) in item.commodityServices" :key="serviceItem.serviceTitle">
-						<view v-if="index < 3" class="card-desc">· {{ serviceItem.serviceTitle }}</view>
-					</template>
-					<view class="card-bottom-row">
-						<view class="card-price-row">
-							<text class="card-price-fu">￥</text>
-							<text class="card-price">{{ item.commodityPrice }}</text>
-							<text class="card-unit">/人</text>
-						</view>
-						
-						<text class="card-btn" @click="placeOrderHandle(item)">下单</text>
-					</view>	
-				</view>
-			</view>
+            <view v-for="(item, index) in commodityDTO.commodityList" :key="`${item.commodityId}-${index}`">
+                <view class="mk-card-item" @click="placeOrderHandle(item)">
+                	<!-- <view class="card-badge">超值推荐</view> -->
+                	<image class="card-img" :src="item.commodityIcon" mode="aspectFill" />
+                	<view class="card-content">
+                		<view class="card-title-column">
+                			<text class="card-title">{{ item.commodityName }}</text>
+                			<view class="card-tags" v-for="(tag) in item.commodityTradeRuleList" :key="tag">
+                				<text class="card-tag">{{ tag }}</text>
+                			</view>
+                		</view>
+                		<template v-for="(serviceItem, index) in item.commodityServices" :key="serviceItem.serviceTitle">
+                			<view v-if="index < 3" class="card-desc">· {{ serviceItem.serviceTitle }}</view>
+                		</template>
+                		<view class="card-bottom-row">
+                			<view class="card-price-row">
+                				<text class="card-price-fu">￥</text>
+                				<text class="card-price">{{ item.commodityPrice }}</text>
+                				<text class="card-unit">/人</text>
+                			</view>
+
+                			<text class="card-btn">下单</text>
+                		</view>
+                	</view>
+                </view>
+            </view>
 		</view>
 	</view>
 </template>
@@ -39,7 +41,7 @@
 			default: {}
 		}
 	})
-	
+
 	/// 去下单
 	const placeOrderHandle = (item) => {
 		uni.navigateTo({
@@ -50,7 +52,7 @@
 </script>
 
 <style lang="scss" scoped>
-	.container {		
+	.container {
 
 		.container-scroll {
 			display: flex;
@@ -58,16 +60,16 @@
 			overflow-x: auto;
 			overflow-y: hidden;
 			margin: 4px 0;
-			
+
 			/* 隐藏滚动条 */
-			scrollbar-width: none; 
+			scrollbar-width: none;
 			&::-webkit-scrollbar {
-			  display: none; 
+			  display: none;
 			}
-			
+
 			.mk-card-item {
 			  position: relative;
-			  
+
 			  display: flex;
 			  flex-direction: column;
 			  align-items: start;
@@ -77,7 +79,7 @@
 			  border-radius: 10px;
 			  margin-right: 8px;
 			  padding-bottom: 12px;
-			  
+
 			  .card-badge {
 			    position: absolute;
 			    top: 8px;
@@ -89,7 +91,7 @@
 			    border-radius: 4px;
 			    z-index: 2;
 			  }
-			
+
 			  .card-img {
 			    width: 188px;
 			    height: 114px;
@@ -97,7 +99,7 @@
 			    object-fit: cover; /* 确保图片不变形，保持比例裁剪 */
 			    flex-shrink: 0; /* 防止图片被压缩 */
 			  }
-			
+
 			  .card-content {
 				box-sizing: border-box;
 			    padding: 10px 12px 0 12px;
@@ -109,14 +111,14 @@
 			    flex: 1; /* 让内容区域占据剩余空间 */
 			    overflow: hidden; /* 防止内容溢出 */
 			  }
-			
+
 			  .card-title-column {
 			    display: flex;
 			    align-items: start;
 				flex-direction: column;
 			    width: 100%;
 			  }
-			
+
 			  .card-title {
 			    font-size: 16px;
 			    font-weight: bold;
@@ -131,14 +133,14 @@
 			    line-height: 1.4;
 			    max-height: 2.8em; /* 2行的高度 */
 			  }
-			
+
 			  .card-tags {
 			    display: flex;
 				flex-direction: row;
 				align-items: start;
 			    padding: 6px 0;
 			  }
-			
+
 			  .card-tag {
 			    background: #f5f5f5;
 			    color: #ff6600;
@@ -147,13 +149,13 @@
 			    padding: 0 6px;
 			    margin-left: 2px;
 			  }
-			
+
 			  .card-desc {
 			    font-size: 13px;
 			    color: #888;
 			    margin-top: 2px;
 			  }
-			
+
 			  .card-bottom-row {
 			    display: flex;
 			    align-items: center;
@@ -161,14 +163,14 @@
 			    margin-top: 8px;
 				width: 100%;
 			  }
-			
+
 			  .card-price-row {
 				.card-price-fu {
 					color: #ff6600;
 					font-size: 11px;
 					font-weight: normal;
 				}
-			    
+
 				.card-price {
 					color: #ff6600;
 					font-size: 16px;
@@ -181,7 +183,7 @@
 			      margin-left: 2px;
 			    }
 			  }
-			
+
 			  .card-btn {
 			    background: #ff6600;
 			    color: #fff;
@@ -191,8 +193,8 @@
 			    height: 32px;
 			    line-height: 32px;
 			  }
-			}	
-			
+			}
+
 		}
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/module/detail/DetailCardCompontent.vue b/pages/module/detail/DetailCardCompontent.vue
index 739faa7..58b9fa9 100644
--- a/pages/module/detail/DetailCardCompontent.vue
+++ b/pages/module/detail/DetailCardCompontent.vue
@@ -30,6 +30,7 @@
 <style scoped lang="scss">
 .container {
     width: 100%;
+    padding: 12px 0;
 }
 
 </style>
diff --git a/pages/module/detail/DetailCardGoodsContentList.vue b/pages/module/detail/DetailCardGoodsContentList.vue
index 9c8e517..efcdb47 100644
--- a/pages/module/detail/DetailCardGoodsContentList.vue
+++ b/pages/module/detail/DetailCardGoodsContentList.vue
@@ -2,29 +2,30 @@
 	<view class="container">
 		<ModuleTitle title="相关商品" />
 		<view class="container-scroll">
-			<view class="mk-card-item" v-for="(item, index) in commodityList" :key="`${item.commodityId}-${index}`">
-				<image class="card-img" :src="item.commodityPhoto" mode="aspectFill" />
-				<view class="card-content">
-					<view class="card-title-column">
-						<text class="card-title">{{ item.commodityName }}</text>
-						<view class="card-tags" v-for="(tag) in item.commodityTradeRuleList" :key="tag">
-							<text class="card-tag">{{ tag }}</text>
-						</view>
-					</view>
-					<template v-for="(serviceItem, index) in item.commodityServices" :key="serviceItem.serviceTitle">
-						<view v-if="index < 3" class="card-desc">· {{ serviceItem.serviceTitle }}</view>
-					</template>
-					<view class="card-bottom-row">
-						<view class="card-price-row">
-							<text class="card-price-fu">￥</text>
-							<text class="card-price">{{ item.specificationPrice }}</text>
-							<text class="card-unit">/人</text>
-						</view>
-						
-						<text class="card-btn" @click="placeOrderHandle(item)">下单</text>
-					</view>	
-				</view>
-			</view>
+            <view v-for="(item, index) in commodityList" :key="`${item.commodityId}-${index}`">
+                <view class="mk-card-item"  @click="placeOrderHandle(item)">
+                    <image class="card-img" :src="item.commodityPhoto" mode="aspectFill" />
+                	<view class="card-content">
+                		<view class="card-title-column">
+                			<text class="card-title">{{ item.commodityName }}</text>
+                			<view class="card-tags" v-for="(tag) in item.commodityTradeRuleList" :key="tag">
+                				<text class="card-tag">{{ tag }}</text>
+                			</view>
+                		</view>
+                		<template v-for="(serviceItem, index) in item.commodityServices" :key="serviceItem.serviceTitle">
+                			<view v-if="index < 3" class="card-desc">· {{ serviceItem.serviceTitle }}</view>
+                		</template>
+                		<view class="card-bottom-row">
+                			<view class="card-price-row">
+                				<text class="card-price-fu">￥</text>
+                				<text class="card-price">{{ item.specificationPrice }}</text>
+                				<text class="card-unit">/人</text>
+                			</view>
+                			<text class="card-btn">下单</text>
+                		</view>
+                	</view>
+                </view>
+            </view>
 		</view>
 	</view>
 </template>
@@ -38,7 +39,7 @@
 			default: []
 		}
 	})
-	
+
 	/// 去下单
 	const placeOrderHandle = (item) => {
 		uni.navigateTo({
@@ -49,8 +50,8 @@
 </script>
 
 <style lang="scss" scoped>
-	.container {		
-        margin-bottom: 8px 0;
+	.container {
+        margin: 6px 0 0;
 
 		.container-scroll {
 			display: flex;
@@ -58,16 +59,16 @@
 			overflow-x: auto;
 			overflow-y: hidden;
 			margin: 4px 0;
-			
+
 			/* 隐藏滚动条 */
-			scrollbar-width: none; 
+			scrollbar-width: none;
 			&::-webkit-scrollbar {
-			  display: none; 
+			  display: none;
 			}
-			
+
 			.mk-card-item {
 			  position: relative;
-			  
+
 			  display: flex;
 			  flex-direction: column;
 			  align-items: start;
@@ -77,7 +78,7 @@
 			  border-radius: 10px;
 			  margin-right: 8px;
 			  padding-bottom: 12px;
-			  
+
 			  .card-badge {
 			    position: absolute;
 			    top: 8px;
@@ -89,7 +90,7 @@
 			    border-radius: 4px;
 			    z-index: 2;
 			  }
-			
+
 			  .card-img {
 			    width: 188px;
 			    height: 114px;
@@ -97,7 +98,7 @@
 			    object-fit: cover; /* 确保图片不变形，保持比例裁剪 */
 			    flex-shrink: 0; /* 防止图片被压缩 */
 			  }
-			
+
 			  .card-content {
 				box-sizing: border-box;
 			    padding: 10px 12px 0 12px;
@@ -109,14 +110,14 @@
 			    flex: 1; /* 让内容区域占据剩余空间 */
 			    overflow: hidden; /* 防止内容溢出 */
 			  }
-			
+
 			  .card-title-column {
 			    display: flex;
 			    align-items: start;
 				flex-direction: column;
 			    width: 100%;
 			  }
-			
+
 			  .card-title {
 			    font-size: 16px;
 			    font-weight: bold;
@@ -131,14 +132,14 @@
 			    line-height: 1.4;
 			    max-height: 2.8em; /* 2行的高度 */
 			  }
-			
+
 			  .card-tags {
 			    display: flex;
 				flex-direction: row;
 				align-items: start;
 			    padding: 6px 0;
 			  }
-			
+
 			  .card-tag {
 			    background: #f5f5f5;
 			    color: #ff6600;
@@ -147,13 +148,13 @@
 			    padding: 0 6px;
 			    margin-left: 2px;
 			  }
-			
+
 			  .card-desc {
 			    font-size: 13px;
 			    color: #888;
 			    margin-top: 2px;
 			  }
-			
+
 			  .card-bottom-row {
 			    display: flex;
 			    align-items: center;
@@ -161,14 +162,14 @@
 			    margin-top: 8px;
 				width: 100%;
 			  }
-			
+
 			  .card-price-row {
 				.card-price-fu {
 					color: #ff6600;
 					font-size: 11px;
 					font-weight: normal;
 				}
-			    
+
 				.card-price {
 					color: #ff6600;
 					font-size: 16px;
@@ -181,7 +182,7 @@
 			      margin-left: 2px;
 			    }
 			  }
-			
+
 			  .card-btn {
 			    background: #ff6600;
 			    color: #fff;
@@ -191,8 +192,8 @@
 			    height: 32px;
 			    line-height: 32px;
 			  }
-			}	
-			
+			}
+
 		}
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/module/discovery/DiscoveryCradContentList.vue b/pages/module/discovery/DiscoveryCradContentList.vue
index b68ff17..7fccad3 100644
--- a/pages/module/discovery/DiscoveryCradContentList.vue
+++ b/pages/module/discovery/DiscoveryCradContentList.vue
@@ -2,10 +2,12 @@
 	<view class="container">
 		<ModuleTitle :title="recommendTheme.themeName" />
 		<view class="container-scroll">
-			<view class="mk-card-item" v-for="(item, index) in recommendTheme.recommendPostsList" :key="index" @click="sendReply(item)">
-				<image :src="item.coverPhoto" mode="widthFix"></image>
-				<text>{{ item.topic }}</text>
-			</view>
+            <view v-for="(item, index) in recommendTheme.recommendPostsList" :key="index">
+                <view class="mk-card-item" @click="sendReply(item)">
+                	<image :src="item.coverPhoto" mode="widthFix"></image>
+                	<text>{{ item.topic }}</text>
+                </view>
+            </view>
 		</view>
 	</view>
 </template>
@@ -20,7 +22,7 @@
 			default: {}
 		}
 	})
-	
+
 	const sendReply = (item) => {
 		const topic = item.userInputContent || item.topic.replace(/^#/, '');
 		uni.$emit(RECOMMEND_POSTS_TITLE, topic);
@@ -29,20 +31,20 @@
 </script>
 
 <style lang="scss" scoped>
-	.container {		
-		
+	.container {
+
 		.container-scroll {
 			display: flex;
 			flex-direction: row;
 			overflow-x: auto;
 			margin-top: 4px;
-			
+
 			/* 隐藏滚动条 */
-			scrollbar-width: none; 
+			scrollbar-width: none;
 			&::-webkit-scrollbar {
-			  display: none; 
+			  display: none;
 			}
-			
+
 			.mk-card-item {
 				display: flex;
 				flex-direction: column;
@@ -52,7 +54,7 @@
 				background-color: #ffffff;
 				border-radius: 10px;
 				margin-right: 8px;
-				
+
 				image {
 					width: 188px;
 					height: 112px;
@@ -67,4 +69,4 @@
 			}
 		}
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/module/recommend/RecommendPostsList.vue b/pages/module/recommend/RecommendPostsList.vue
index 8f89d7c..a39586a 100644
--- a/pages/module/recommend/RecommendPostsList.vue
+++ b/pages/module/recommend/RecommendPostsList.vue
@@ -2,12 +2,14 @@
 	<view class="container">
 		<ModuleTitle :title="recommendTheme.themeName" />
 		<view class="container-scroll">
-			<view class="mk-card-item" v-for="(item, index) in recommendTheme.recommendPostsList" :key="index" @click="sendReply(item)">
-				<image :src="item.coverPhoto" mode="aspectFill"></image>
-				<view class="overlay-gradient">
-    				<text class="overlay-text">{{ item.topic }}</text>
-  				</view>				
-			</view>
+            <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>
@@ -33,7 +35,7 @@
 
 <style lang="scss" scoped>
 	.container {
-    width: 100%;		
+    width: 100%;
 	}
 
 	.container-scroll {
@@ -92,4 +94,4 @@
   }
 }
 
-</style>
\ No newline at end of file
+</style>