feat: 探索发等UI调整

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 {
+		  position: relative; 
 		  display: block;
 		  height: 120px;
 		  line-height: 120px;
 		  text-align: center;
-		}
+		
-		.swiper-item image {
+		  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;
+		  }
+		}
+		
 	}
 </style>

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>

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>
+				<image :src="item.coverPhoto" mode="aspectFill"></image>
-				<text>{{ item.topic }} dd</text>
+				<view class="overlay-gradient">
+    				<text class="overlay-text">{{ item.topic }}</text>
+  				</view>				
 			</view>
 		</view>
 	</view>
@@ -12,9 +14,9 @@
 
 <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,
@@ -23,9 +25,7 @@
 	})
 
 	const sendReply = (item) => {
-		// 向父组件传递数据
+		const topic = item.userInputContent || item.topic.replace(/^#/, '');
-		const topic = item.topic.replace(/^#/, '');
-		console.log("======>", topic)
 		uni.$emit(RECOMMEND_POSTS_TITLE, topic);
 	}
 
@@ -33,6 +33,7 @@
 
 <style lang="scss" scoped>
 	.container {		
+	}
 
 	.container-scroll {
   display: flex;
@@ -47,27 +48,47 @@
   }
 
   .mk-card-item {
-				display: flex;
+    flex-shrink: 0; /* 关键：防止 flex 布局压缩子元素宽度 */
-				flex-direction: column;
+    width: 142px;
-				align-items: start;
+    height: 126px;
-				width: 188px;
-				height: 154px;
-				background-color: #ffffff;
     border-radius: 10px;
+    overflow: hidden;
     margin-right: 8px;
+    position: relative;
 
     image {
-					width: 188px;
+      width: 100%;
-					height: 112px;
+      height: 100%;
+      display: block;
     }
-				text {
+
-					padding: 12px;
+    /* 渐变背景层 */
-					text-align: center;
+    .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;
-					color: #333333;
+      text-align: left;
-				}
+      width: 100%;
     }
   }
 }
+
 </style>