From 8325ec80add1f6818ac71b61b01ccbc94d6f7d03 Mon Sep 17 00:00:00 2001
From: zoujing <kidevelop@163.com>
Date: Mon, 4 Aug 2025 22:49:11 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8E=A2=E7=B4=A2=E5=8F=91=E7=AD=89UI?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/module/banner/ActivityListComponent.vue |  36 ++++--
 .../discovery/DiscoveryCradContentList.vue    |  70 ++++++++++++
 pages/module/recommend/RecommendPostsList.vue | 107 +++++++++++-------
 3 files changed, 161 insertions(+), 52 deletions(-)
 create mode 100644 pages/module/discovery/DiscoveryCradContentList.vue

diff --git a/pages/module/banner/ActivityListComponent.vue b/pages/module/banner/ActivityListComponent.vue
index 384e24b..ce1eccb 100644
--- a/pages/module/banner/ActivityListComponent.vue
+++ b/pages/module/banner/ActivityListComponent.vue
@@ -10,6 +10,7 @@
 			<swiper-item v-for="item in activityList" :key="item.id">
 				<view class="swiper-item">
 					<image :src="item.activityCover" mode="aspectFill"></image>
+					<view class="corner-btn">快速预定</view>
 				</view>
 			</swiper-item>		
 		</swiper>
@@ -45,15 +46,32 @@
 			border-radius: 8px;
 		}
 		.swiper-item {
-			display: block;
-			height: 120px;
-			line-height: 120px;
-			text-align: center;
+		  position: relative; 
+		  display: block;
+		  height: 120px;
+		  line-height: 120px;
+		  text-align: center;
+		
+		  image {
+		    width: 100%;
+		    height: 100%;
+		    border-radius: 8px;
+		    display: block;
+		  }
+		
+		  .corner-btn {
+		    position: absolute;
+		    right: 12px;
+		    bottom: 12px;
+		    background-color: #ffeb00;
+		    color: #333;
+		    font-size: 14px;
+		    font-weight: 500;
+		    padding: 4px 12px;
+		    border-radius: 20px; 
+		    line-height: 1.5;
+		  }
 		}
-		.swiper-item image {
-			width: 100%;
-			height: 100%;
-			border-radius: 8px;
-		}		
+		
 	}
 </style>
\ No newline at end of file
diff --git a/pages/module/discovery/DiscoveryCradContentList.vue b/pages/module/discovery/DiscoveryCradContentList.vue
new file mode 100644
index 0000000..b68ff17
--- /dev/null
+++ b/pages/module/discovery/DiscoveryCradContentList.vue
@@ -0,0 +1,70 @@
+<template>
+	<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>
+	</view>
+</template>
+
+<script setup>
+	import ModuleTitle from '@/components/ModuleTitle/index.vue'
+	import { RECOMMEND_POSTS_TITLE } from '@/constant/constant'
+	import { defineProps } from 'vue'
+	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 {		
+		
+		.container-scroll {
+			display: flex;
+			flex-direction: row;
+			overflow-x: auto;
+			margin-top: 4px;
+			
+			/* 隐藏滚动条 */
+			scrollbar-width: none; 
+			&::-webkit-scrollbar {
+			  display: none; 
+			}
+			
+			.mk-card-item {
+				display: flex;
+				flex-direction: column;
+				align-items: start;
+				width: 188px;
+				height: 154px;
+				background-color: #ffffff;
+				border-radius: 10px;
+				margin-right: 8px;
+				
+				image {
+					width: 188px;
+					height: 112px;
+				}
+				text {
+					padding: 12px;
+					text-align: center;
+					font-weight: 500;
+					font-size: 12px;
+					color: #333333;
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages/module/recommend/RecommendPostsList.vue b/pages/module/recommend/RecommendPostsList.vue
index 4d37f57..5095f37 100644
--- a/pages/module/recommend/RecommendPostsList.vue
+++ b/pages/module/recommend/RecommendPostsList.vue
@@ -3,8 +3,10 @@
 		<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 }} dd</text>
+				<image :src="item.coverPhoto" mode="aspectFill"></image>
+				<view class="overlay-gradient">
+    				<text class="overlay-text">{{ item.topic }}</text>
+  				</view>				
 			</view>
 		</view>
 	</view>
@@ -12,20 +14,18 @@
 
 <script setup>
 	import ModuleTitle from '@/components/ModuleTitle/index.vue'
+	import { defineProps } from 'vue'
 	import { RECOMMEND_POSTS_TITLE } from '@/constant/constant.js'
 
-	import { defineProps } from 'vue'
 	const props = defineProps({
 		recommendTheme: {
 			type: Object,
 			default: {}
 		}
 	})
-	
+
 	const sendReply = (item) => {
-		// 向父组件传递数据
-		const topic = item.topic.replace(/^#/, '');
-		console.log("======>", topic)
+		const topic = item.userInputContent || item.topic.replace(/^#/, '');
 		uni.$emit(RECOMMEND_POSTS_TITLE, topic);
 	}
 
@@ -33,41 +33,62 @@
 
 <style lang="scss" scoped>
 	.container {		
-		
-		.container-scroll {
-			display: flex;
-			flex-direction: row;
-			overflow-x: auto;
-			margin-top: 4px;
-			
-			/* 隐藏滚动条 */
-			scrollbar-width: none; 
-			&::-webkit-scrollbar {
-			  display: none; 
-			}
-			
-			.mk-card-item {
-				display: flex;
-				flex-direction: column;
-				align-items: start;
-				width: 188px;
-				height: 154px;
-				background-color: #ffffff;
-				border-radius: 10px;
-				margin-right: 8px;
-				
-				image {
-					width: 188px;
-					height: 112px;
-				}
-				text {
-					padding: 12px;
-					text-align: center;
-					font-weight: 500;
-					font-size: 12px;
-					color: #333333;
-				}
-			}
-		}
 	}
+
+	.container-scroll {
+  display: flex;
+  flex-direction: row;
+  overflow-x: auto;
+  margin-top: 4px;
+
+  /* 隐藏滚动条 */
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  .mk-card-item {
+    flex-shrink: 0; /* 关键：防止 flex 布局压缩子元素宽度 */
+    width: 142px;
+    height: 126px;
+    border-radius: 10px;
+    overflow: hidden;
+    margin-right: 8px;
+    position: relative;
+
+    image {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+
+    /* 渐变背景层 */
+    .overlay-gradient {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 50px; /* 渐变层高度，可调 */
+      background: linear-gradient(
+        to bottom,
+        rgba(0, 0, 0, 0.001) 0%,
+        rgba(0, 0, 0, 0.5) 100%
+      );
+      display: flex;
+      align-items: flex-end; /* 文字贴近底部 */
+      padding: 0 8px 6px; /* 内边距让文字与边缘保持距离 */
+      box-sizing: border-box;
+    }
+
+    /* 渐变层上的文字 */
+    .overlay-text {
+      color: #fff;
+      font-weight: 500;
+      font-size: 12px;
+      text-align: left;
+      width: 100%;
+    }
+  }
+}
+
 </style>
\ No newline at end of file