xiangqinxiangmu/LiangZhiYUMao/pages/index/index.vue

<template>
	<view class="home-page">
		<!-- 顶部状态栏 -->
		<view class="top-bar">
			<view class="logo">婚恋</view>
			<view class="top-right-icons">
				<!-- 红娘工作台切换按钮 - 根据数据库查询结果动态显示 -->
				<view v-if="showMatchmakerButton"
					class="matchmaker-btn" @click="openMatchmakerPopup">
					<text class="switch-icon">🔄</text>
					<text class="switch-text">切换工作台</text>
				</view>
				<!-- 消息通知图标 -->
				<view class="msg-icon" @click="goToMessages">
					<text class="icon">🔔</text>
					<view v-if="unreadCount > 0" class="badge">{{ unreadCount }}</view>
				</view>
			</view>
		</view>

		<!-- 个性化欢迎语 -->
		<!-- <view class="welcome-card" v-if="userInfo.nickname">
			<view class="welcome-content">
				<text class="welcome-text">你好，{{ userInfo.nickname }}！</text>
				<text class="match-info">今天有 <text class="highlight">{{ matchCount }}</text> 位新嘉宾和你匹配哦 ❤️</text>
			</view>
		</view> -->

		<!-- 轮播图 -->
		<view class="banner-section" v-if="bannerList && bannerList.length > 0">
			<swiper class="banner-swiper" :indicator-dots="true" :autoplay="true" :interval="4000" :duration="1000"
				:circular="true" indicator-color="rgba(255, 255, 255, 0.5)" indicator-active-color="#E91E63">
				<swiper-item v-for="(banner, index) in bannerList" :key="index">
					<view class="banner-item" @click="handleBannerClick(banner)">
						<image :src="banner.cover_image || banner.coverImage" class="banner-image" mode="aspectFill"
							:data-section="'banner'" :data-index="index"
							@error="handleImageError" @load="handleImageLoad"></image>
						<view class="banner-mask">
							<view class="banner-title">{{ banner.name }}</view>
							<view class="banner-subtitle" v-if="banner.subtitle">{{ banner.subtitle }}</view>
							<view class="banner-btn">查看更多</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 小喇叭公告栏 -->
		<view class="notice-bar" v-if="noticeList && noticeList.length > 0">
			<text class="notice-icon">📢</text>
			<swiper class="notice-swiper" vertical :autoplay="true" :interval="3000" :duration="500"
				:circular="true">
				<swiper-item v-for="(notice, index) in noticeList" :key="index">
					<view class="notice-text">{{ notice.content }}</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 核心功能入口 -->
		<view class="function-grid">
			<view class="grid-item" v-for="(item, index) in functionList" :key="index" @click="handleFunctionClick(item)">
				<view class="grid-icon-wrapper" :style="{ background: item.gradient || item.bgColor || '#FFE5F1' }">
					<text class="grid-icon" :style="{ color: item.iconColor || '#333333' }">{{ item.icon }}</text>
				</view>
				<text class="grid-text">{{ item.name }}</text>
			</view>
		</view>

		<!-- 成功案例 -->
		<view class="section success-case-section" v-if="successCases && successCases.length > 0">
			<view class="section-header">
				<text class="section-title">💕 成功案例</text>
				<text class="section-more" @click="goToSuccessCaseList">查看更多 ></text>
			</view>
			<view class="success-case-grid">
				<view class="case-card" v-for="(caseItem, index) in successCases.slice(0, 2)" :key="index" 
					@click="handleSuccessCaseClick(caseItem)">
					<view class="case-image-wrapper">
						<image :src="caseItem.imageUrl" class="case-image" mode="aspectFill"
							:data-section="'successCase'" :data-index="index"
							@error="handleImageError" @load="handleImageLoad"></image>
					</view>
					<view class="case-content">
						<view class="couple-names">{{ caseItem.maleUserNickname || '先生' }}&{{ caseItem.femaleUserNickname || '女士' }}</view>
						<view class="case-quote">{{ caseItem.quote || '我们通过平台找到了彼此❤️' }}</view>
						<view class="case-meta">
							<text class="marriage-date">相识于{{ formatMarriageDate(caseItem.marriageDate) }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 平台活动 -->
		<view class="section activity-recommend-section" v-if="hotActivities && hotActivities.length > 0">
			<view class="section-header">
				<text class="section-title">🎉 平台活动</text>
				<text class="section-more" @click="goToActivityList">查看更多 ></text>
			</view>
			<view class="activity-scroll-container">
				<view class="activity-scroll-wrapper">
					<view class="activity-scroll-content">
						<!-- 第一组活动 -->
						<view class="activity-card-scroll" v-for="(activity, index) in hotActivities" :key="index" 
							@click="handleActivityClick(activity)">
							<view class="activity-image-wrapper">
								<image :src="activity.cover_image" class="activity-image" mode="aspectFill"
									:data-section="'activity'" :data-index="index"
									@error="handleImageError" @load="handleImageLoad"></image>
								<view class="activity-status" v-if="activity.status === 1">报名中</view>
							</view>
							<view class="activity-info-static">
								<view class="activity-name-static">{{ activity.name }}</view>
								<view class="activity-time-static">{{ formatActivityTime(activity.startTime, activity.endTime) }}</view>
							</view>
						</view>
						<!-- 第二组活动（用于无缝滚动） -->
						<view class="activity-card-scroll" v-for="(activity, index) in hotActivities" :key="index + 100" 
							@click="handleActivityClick(activity)">
							<view class="activity-image-wrapper">
								<image :src="activity.coverImage" class="activity-image" mode="aspectFill" 
									:data-section="'activity'" :data-index="index + 100"
									@error="handleImageError" @load="handleImageLoad"></image>
								<view class="activity-status" v-if="activity.status === 1">报名中</view>
							</view>
							<view class="activity-info-static">
								<view class="activity-name-static">{{ activity.name }}</view>
								<view class="activity-time-static">{{ formatActivityTime(activity.startTime, activity.endTime) }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 今日缘分推荐 -->
		<!-- <view class="section fate-recommend-section" v-if="todayRecommendUsers && todayRecommendUsers.length > 0">
			<view class="section-header">
				<text class="section-title">🌟 今日缘分</text>
				<text class="section-more" @click="goToRecommend">查看更多 ></text>
			</view>
			<view class="fate-cards">
				<view class="fate-card" v-for="(user, index) in todayRecommendUsers" :key="index" 
					@click="handleUserClick(user)">
					<view class="user-avatar-wrapper">
						<image :src="user.avatarUrl || user.avatar" class="user-avatar" mode="aspectFill"
							:data-section="'todayRecommend'" :data-index="index"
							@error="handleImageError" @load="handleImageLoad"></image>
						<view class="online-status" v-if="user.isOnline"></view>
					</view>
					<view class="user-basic-info">
						<text class="user-nickname">{{ user.nickname }}</text>
						<text class="user-age-location">{{ user.age }}岁 · {{ user.location || user.city }}</text>
					</view>
					<view class="match-score">
						<text class="match-text">匹配度</text>
						<text class="match-percentage">{{ formatMatchScore(user.compatibilityScore) }}%</text>
					</view>
					<view class="user-tags">
						<text class="user-tag" v-for="(tag, tagIndex) in parseUserTags(user).slice(0, 2)" :key="tagIndex">
							{{ tag }}
						</text>
					</view>
				</view>
			</view>
		</view> -->

		<!-- 个人魅力指数 -->
		<view class="section charm-index-section" v-if="userInfo.userId">
			<view class="charm-card">
				<view class="charm-header">
					<text class="charm-title">💖 个人魅力指数</text>
					<text class="charm-score">{{ charmIndex.totalScore }}</text>
				</view>
				<view class="charm-progress">
					<view class="progress-bar">
						<view class="progress-fill" :style="{ width: charmIndex.totalScore + '%' }"></view>
					</view>
					<text class="progress-text">超越了{{ charmIndex.beatPercentage }}%的用户</text>
				</view>
				<view class="charm-items">
					<view class="charm-item" v-for="(item, index) in charmIndex.items" :key="index">
						<text class="charm-item-label">{{ item.label }}</text>
						<view class="charm-item-progress">
							<view class="item-progress-bar">
								<view class="item-progress-fill" :style="{ width: item.score + '%' }"></view>
							</view>
							<text class="charm-item-score">{{ item.score }}%</text>
						</view>
					</view>
				</view>
				<view class="charm-tip">
					<text class="tip-text">💡 {{ charmIndex.tip }}</text>
				</view>
			</view>
		</view>

		<!-- 底部占位 -->
		<view class="bottom-placeholder"></view>

		<!-- 底部导航栏 -->
		<view class="tabbar">
			<view class="tabbar-item active" @click="switchTab('index')">
				<text class="tabbar-icon">🏠</text>
				<text class="tabbar-text">首页</text>
			</view>
			<view class="tabbar-item" @click="switchTab('plaza')">
				<text class="tabbar-icon">💕</text>
				<text class="tabbar-text">动态</text>
			</view>
			<view class="tabbar-item" @click="switchTab('recommend')">
				<text class="tabbar-icon">👍</text>
				<text class="tabbar-text">推荐</text>
			</view>
			<view class="tabbar-item" @click="switchTab('message')">
				<text class="tabbar-icon">💬</text>
				<text class="tabbar-text">消息</text>
				<view v-if="unreadCount >= 1" class="tabbar-badge">{{ unreadCount }}</view>
			</view>
			<view class="tabbar-item" @click="switchTab('mine')">
				<text class="tabbar-icon">👤</text>
				<text class="tabbar-text">我的</text>
			</view>
		</view>

		<!-- 红娘提示弹框 -->
		<uni-popup ref="matchmakerPopup" type="dialog">
			<uni-popup-dialog
				type="confirm"
				title="红娘工作台"
				content="您是平台认证红娘，是否前往红娘工作台？"
				confirmText="前往工作台"
				cancelText="取消"
				@confirm="goToMatchmakerWorkspace"
				@cancel="closeMatchmakerPopup">
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import api, { request } from '@/utils/api.js'
	import { formatTime, formatCountdown, isLoggedIn, goToLogin } from '@/utils/util.js'
	import { DEFAULT_IMAGES, ACTIVITY_TYPES } from '@/config/index.js'
	
	import timManager from '@/utils/tim-manager.js'

	export default {
		data() {
			return {
				// 用户信息
				userInfo: {},
				matchCount: 3,
				
				// 是否显示红娘工作台按钮（根据数据库查询结果）
				showMatchmakerButton: false,

				// 轮播图数据
				bannerList: [],

				// 公告数据
				noticeList: [],

				// 功能入口
			functionList: [],

				// 热门活动
				hotActivities: [],

				// 成功案例
				successCases: [],

				// VIP特权（保留但不在首页显示）
				vipPrivileges: [
					{ icon: '💎', text: '专属红娘服务' },
					{ icon: '⚡', text: '优先匹配推荐' },
					{ icon: '👑', text: '贵族身份标识' },
					{ icon: '🔒', text: '隐身访问模式' }
				],

				// 今日推荐用户
				todayRecommendUsers: [],

				// 个人魅力指数
				charmIndex: {
					totalScore: 75,
					beatPercentage: 68,
					items: [
						{ label: '资料完整度', score: 80 },
						{ label: '活跃度', score: 70 },
						{ label: '互动质量', score: 75 },
						{ label: '形象分数', score: 72 }
					],
					tip: '完善更多个人信息可提升魅力指数'
				},

				// 倒计时定时器
				countdownTimer: null,

				// 图片加载错误计数
				imageErrorCount: 0,
				
				// 是否已经显示过红娘弹框（避免重复显示）
				hasShownMatchmakerPopup: false
			}
		},
			computed: {
			    // 从Vuex获取全局未读数
			    unreadCount() {
			      return this.$store.getters.getTotalUnread || 0;
			    }
			  },
		onLoad() {
			this.loadUserInfo()
			this.loadBannerData()
			this.loadNoticeData()
			this.loadFunctionGridData()
			// this.loadTodayRecommend()
			this.loadCharmIndex()
			this.loadHotActivities()
			this.loadSuccessCases()
			// 监听未读消息数更新事件
			uni.$on('conversationUnreadUpdate', (totalUnread) => {
				console.log('📬 首页收到未读数更新:', totalUnread);
				this.$store.dispatch('updateTotalUnread', totalUnread);
			});
		},

		onUnload() {
			// 清理资源
			uni.$off('conversationUnreadUpdate');
		},
		onShow() {
			console.log('📱 页面onShow触发')
			// 页面显示时重新加载用户信息（确保登录后能更新）
			this.loadUserInfo()
			// 页面显示时查询数据库检查是否为红娘
			this.checkMatchmakerStatusFromDB()
		},
		methods: {
			// 从数据库查询用户是否为红娘
			async checkMatchmakerStatusFromDB() {
				try {
					const userId = uni.getStorageSync('userId')
					if (!userId) {
						console.log('⚠️ 用户未登录，不显示红娘按钮')
						this.showMatchmakerButton = false
						return
					}
					
					console.log('🔍 查询用户红娘状态，userId:', userId)
					
					// 调用API查询用户的is_matchmaker字段
					const result = await api.user.getMatchmakerStatus(userId)
					
					if (result && result.isMatchmaker !== undefined) {
						const isMatchmaker = parseInt(result.isMatchmaker)
						console.log('✅ 查询成功，isMatchmaker:', isMatchmaker)
						
						// 根据查询结果设置按钮显示状态
						this.showMatchmakerButton = (isMatchmaker === 1)
						
						// 同时更新本地存储的用户信息
						const userInfo = uni.getStorageSync('userInfo') || {}
						userInfo.isMatchmaker = isMatchmaker
						uni.setStorageSync('userInfo', userInfo)
						this.userInfo.isMatchmaker = isMatchmaker
						
						console.log('🎯 红娘按钮显示状态:', this.showMatchmakerButton ? '显示' : '隐藏')
					} else {
						console.log('⚠️ 查询结果异常，不显示红娘按钮')
						this.showMatchmakerButton = false
					}
				} catch (error) {
					console.error('❌ 查询红娘状态失败:', error)
					this.showMatchmakerButton = false
				}
			},
			
			// 前往红娘工作台
			async goToMatchmakerWorkspace() {
				console.log('🚀 前往红娘工作台')
				this.$refs.matchmakerPopup.close()
				
				try {
					const userId = uni.getStorageSync('userId')
					if (!userId) {
						uni.showToast({ title: '请先登录', icon: 'none' })
						return
					}
					
					if (!timManager.tim) {
						try {
							timManager.init(1600109674)
							console.log('✅ TIM SDK 初始化完成（首页）')
						} catch (e) {
							console.error('❌ TIM 初始化失败（首页）:', e)
						}
					}
					
					const res = await uni.request({
						url: 'http://localhost:8081/api/matchmaker/current',
						method: 'GET',
						data: { userId }
					})
					
					if (!res[1] || res[1].data.code !== 200) {
						uni.showToast({ title: '获取红娘信息失败', icon: 'none' })
						return
					}
					
					const matchmakerInfo = res[1].data.data || {}
					const imUserId = matchmakerInfo.imUserId
					if (!imUserId) {
						uni.showToast({ title: '红娘IM账号缺失', icon: 'none' })
						return
					}
					
					// 获取UserSig时使用原始imUserId（包含m_前缀）
					const sigRes = await uni.request({
						url: `http://localhost:8083/api/im/getUserSig?userId=${encodeURIComponent(imUserId)}`,
						method: 'GET'
					})
					
					if (!sigRes[1] || sigRes[1].data.code !== 200) {
						uni.showToast({ title: '获取UserSig失败', icon: 'none' })
						return
					}
					
					const userSig = sigRes[1].data.data.userSig
					console.log('✅ 首页获取 UserSig:', userSig ? '成功' : '失败')
					
					try {
						await timManager.logout()
						console.log('✅ 已登出之前的IM账号（首页）')
					} catch (e) {
						console.log('⚠️ 登出失败或未登录（首页）:', e.message)
					}
					
					await timManager.login(imUserId, userSig)
					console.log('✅ 红娘已在首页登录 IM:', imUserId)
					
					uni.$emit('matchmakerIMReady', { imUserId })
				} catch (error) {
					console.error('❌ 首页初始化红娘IM失败:', error)
					uni.showToast({ title: '红娘IM初始化失败', icon: 'none' })
				}
				
				uni.navigateTo({
					url: '/pages/matchmaker-workbench/index',
					fail: (err) => {
						console.error('❌ 跳转红娘工作台失败:', err)
						uni.showToast({ title: '跳转失败', icon: 'none' })
					}
				})
			},
			
			// 关闭红娘弹框
			closeMatchmakerPopup() {
				console.log('🚫 用户选择不前往红娘工作台')
				this.$refs.matchmakerPopup.close()
			},
			
			// 加载用户信息
			loadUserInfo() {
				// 从本地存储或接口获取用户信息
				const userInfo = uni.getStorageSync('userInfo')
				if (userInfo) {
					this.userInfo = userInfo
					this.matchCount = Math.floor(Math.random() * 10) + 1
				}
			},

			// 加载轮播图数据
			async loadBannerData() {
				try {
					// 调用 API 获取轮播图数据
					const data = await api.home.getBanners()
					if (data && data.length > 0) {
						// 处理轮播图数据，确保字段格式正确
						this.bannerList = data.map(banner => ({
							...banner,
							cover_image: banner.cover_image || banner.coverImage || DEFAULT_IMAGES.banner,
							name: banner.name || banner.title || '',
							subtitle: banner.subtitle || '',
							type: banner.type || 'activity',
							targetId: banner.targetId || banner.id
						}))
					}
				} catch (error) {
					console.error('获取轮播图失败:', error)
					// 使用默认数据
				}
			},
			
			// 加载金刚区功能列表
			async loadFunctionGridData() {
				try {
					// 调用 API 获取金刚区功能数据
					const data = await api.home.getFunctionGrid()
					if (data && data.length > 0) {
						// 处理金刚区数据，确保字段格式正确
						this.functionList = data.map(item => ({
							...item,
							// 确保渐变背景色格式正确
							gradient: item.gradient || `linear-gradient(135deg, ${item.bgColor} 0%, ${this.lightenColor(item.bgColor, 10)} 100%)`
						}))
					}
				} catch (error) {
					console.error('获取金刚区功能列表失败:', error)
					// 使用默认数据作为降级方案
					this.functionList = [
						{ id: 1, name: '星命测算', icon: '💖', path: '/pages/astrology/index', bgColor: '#FF6B9D', iconColor: '#FFFFFF', gradient: 'linear-gradient(135deg, #FF6B9D 0%, #FF8EAB 100%)' },
						{ id: 2, name: '红娘列表', icon: '👤', path: '/pages/matchmakers/list', bgColor: '#6BC5F8', iconColor: '#FFFFFF', gradient: 'linear-gradient(135deg, #6BC5F8 0%, #87CEEB 100%)' },
						{ id: 4, name: '精品课程', icon: '📚', path: '/pages/courses/list', bgColor: '#FF8C42', iconColor: '#FFFFFF', gradient: 'linear-gradient(135deg, #FF8C42 0%, #FFA366 100%)' },
						{ id: 5, name: '今日缘分', icon: '💝', path: '/pages/recommend/index', bgColor: '#FF69B4', iconColor: '#FFFFFF', gradient: 'linear-gradient(135deg, #FF69B4 0%, #FF8CC8 100%)', needLogin: true }
					]
				}
			},
			
			// 颜色提亮函数（用于生成渐变背景色）
			lightenColor(color, percent) {
				// 移除#号
				color = color.replace('#', '')
				// 转换为RGB
				let r = parseInt(color.substring(0, 2), 16)
				let g = parseInt(color.substring(2, 4), 16)
				let b = parseInt(color.substring(4, 6), 16)
				// 提亮颜色
				r = Math.min(255, Math.round(r + (255 - r) * percent / 100))
				g = Math.min(255, Math.round(g + (255 - g) * percent / 100))
				b = Math.min(255, Math.round(b + (255 - b) * percent / 100))
				// 转换回十六进制
				return '#' + ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')
			},

			// 加载公告数据
			async loadNoticeData() {
				try {
					// 调用 API 获取公告数据
					const data = await api.home.getNotices()
					if (data && data.length > 0) {
						this.noticeList = data
					}
				} catch (error) {
					console.error('获取公告失败:', error)
					// 使用默认数据
				}
			},

			// 加载今日推荐
			async loadTodayRecommend() {
				try {
					const userId = this.userInfo.userId || parseInt(uni.getStorageSync('userId'))
					if (!userId) {
						console.log('用户未登录，跳过今日推荐加载')
						return
					}
					
					// 调用推荐API获取推荐用户列表
					const data = await api.recommend.getUsers({
						userId: userId,
						oppoOnly: 1,  // 只推荐异性
						limit: 20     // 获取20个用户用于筛选
					})
					
					if (data && data.length > 0) {
						// 按匹配度降序排序，取前3个匹配度最高的用户
						const sortedUsers = data
							.filter(user => user.compatibilityScore && user.compatibilityScore > 0)
							.sort((a, b) => (b.compatibilityScore || 0) - (a.compatibilityScore || 0))
							.slice(0, 3)
						
						// 处理用户数据
						this.todayRecommendUsers = sortedUsers.map(user => ({
							...user,
							avatarUrl: this.validateImageUrl(user.avatarUrl || DEFAULT_IMAGES.avatar),
							age: user.age || 0,
							location: this.formatLocation(user),
							isOnline: false  // 可以根据实际情况设置
						}))
						
						console.log('今日缘分推荐加载成功，匹配度最高的用户:', this.todayRecommendUsers)
					}
				} catch (error) {
					console.error('获取推荐用户失败:', error)
					this.todayRecommendUsers = []
				}
			},

			// 格式化位置信息
			formatLocation(user) {
				const parts = []
				if (user.provinceName) parts.push(user.provinceName)
				if (user.cityName) parts.push(user.cityName)
				if (parts.length === 0 && user.location) return user.location
				if (parts.length === 0 && user.city) return user.city
				return parts.join(' ')
			},

			// 格式化匹配度分数
			formatMatchScore(score) {
				if (!score) return '0.0'
				return Number(score).toFixed(1)
			},

			// 解析用户标签
			parseUserTags(user) {
				const tags = []
				if (user.star) tags.push(user.star)
				if (user.jobTitle) tags.push(user.jobTitle)
				if (user.hobby) {
					try {
						const hobbies = typeof user.hobby === 'string' ? JSON.parse(user.hobby) : user.hobby
						if (Array.isArray(hobbies)) {
							tags.push(...hobbies.slice(0, 2))
						}
					} catch (e) {
						console.error('解析兴趣爱好失败:', e)
					}
				}
				return tags
			},

			// 加载魅力指数
			async loadCharmIndex() {
				try {
					if (this.userInfo.userId) {
						// 调用 API 获取魅力指数
						// const data = await api.user.getCharmIndex(this.userInfo.userId)
						// if (data) {
						//     this.charmIndex = data
						// }
					}
				} catch (error) {
					console.error('获取魅力指数失败:', error)
				}
			},

			// 加载热门活动
			async loadHotActivities() {
				try {
					// 调用 API 获取活动列表（获取所有状态为1的活动，而不是只获取热门活动）
					const data = await api.activity.getList({
						status: 1,
						limit: 10
					})
					if (data && data.length > 0) {
						this.hotActivities = data.map((activity, index) => {
							const rawCover = this.validateImageUrl(activity.cover_image || activity.coverImage || activity.imageUrl || activity.image_url)
							return {
							...activity,
							coverImage: this.ensureRomanticCover(rawCover, index),
							name: activity.name || activity.title || '',
							startTime: activity.startTime || activity.start_time || activity.startDate || '',
							endTime: activity.endTime || activity.end_time || activity.endDate || '',
							status: activity.status || 0
						}})
					} 
				} catch (error) {
					console.error('获取热门活动失败:', error)

				}
			},

			// 格式化活动时间（支持开始和结束时间）
			formatActivityTime(startTime, endTime) {
				if (!startTime) return '时间待定'
				try {
					const start = new Date(startTime)
					const startMonth = start.getMonth() + 1
					const startDay = start.getDate()
					const startHour = start.getHours().toString().padStart(2, '0')
					const startMinute = start.getMinutes().toString().padStart(2, '0')

					let timeStr = `${startMonth}月${startDay}日 ${startHour}:${startMinute}`

					// 如果有结束时间，添加结束时间
					if (endTime) {
						const end = new Date(endTime)
						const endMonth = end.getMonth() + 1
						const endDay = end.getDate()
						const endHour = end.getHours().toString().padStart(2, '0')
						const endMinute = end.getMinutes().toString().padStart(2, '0')

						timeStr += ` - ${endMonth}月${endDay}日 ${endHour}:${endMinute}`
					}

					return timeStr
				} catch (error) {
					return '时间待定'
				}
			},

			// 加载成功案例
			async loadSuccessCases() {
				try {
					// 调用 API 获取成功案例列表
					const data = await api.successCase.getList({
						pageNum: 1,
						pageSize: 5
					})
					if (data && data.length > 0) {
						this.successCases = data.map(caseItem => ({
							...caseItem,
							maleUserNickname: caseItem.maleUserNickname || caseItem.male_user_nickname || '先生',
							femaleUserNickname: caseItem.femaleUserNickname || caseItem.female_user_nickname || '女士',
							imageUrl: this.validateImageUrl(caseItem.imageUrl || caseItem.image_url || DEFAULT_IMAGES.couple),
							quote: caseItem.quote || '我们通过平台找到了彼此❤️',
							marriageDate: caseItem.marriageDate || caseItem.marriage_date || ''
						}))
					} else {
						// 使用默认数据
						this.successCases = []
					}
				} catch (error) {
					console.error('获取成功案例失败:', error)
					
				}
			},

			// 格式化结婚日期
			formatMarriageDate(dateStr) {
				if (!dateStr) return '佳音渐近'
				try {
					const date = new Date(dateStr)
					const year = date.getFullYear()
					const month = date.getMonth() + 1
					const day = date.getDate()
					return `${year}年${month}月${day}日`
				} catch (error) {
					return '佳音渐近'
				}
			},

			// 跳转到VIP页面
			goToVip() {
				uni.navigateTo({
					url: '/pages/vip/index'
				})
			},

			// 跳转到活动列表
			goToActivityList() {
				uni.navigateTo({
					url: '/pages/activities/list'
				})
			},

			// 处理活动点击
			handleActivityClick(activity) {
				uni.navigateTo({
					url: `/pages/activities/detail?id=${activity.id}`
				})
			},

			// 跳转到成功案例列表
			goToSuccessCaseList() {
				uni.navigateTo({
					url: '/pages/success-case/list'
				})
			},

			// 处理成功案例点击
			handleSuccessCaseClick(caseItem) {
				const caseNo = caseItem.caseNo || caseItem.case_no
				uni.navigateTo({
					url: `/pages/success-case/detail?caseNo=${caseNo}`
				})
			},

			// 处理图片加载错误并回退到默认图
			handleImageError(e) {
				const failedSrc = e.detail ? e.detail.errMsg : '未知错误'
				const dataset = (e && e.target && e.target.dataset) ? e.target.dataset : {}
				const section = dataset.section
				const index = dataset.index
				
				console.warn('图片加载失败:', failedSrc, 'section:', section, 'index:', index)
				
				const fallbackMap = {
					banner: DEFAULT_IMAGES.banner,
					activity: DEFAULT_IMAGES.activity,
					successCase: DEFAULT_IMAGES.couple,
					todayRecommend: DEFAULT_IMAGES.avatar
				}
				
				const setFallback = (list, targetIndex, key, fallback, extraKeys = []) => {
					if (!Array.isArray(list) || list.length === 0) return
					const numIndex = Number(targetIndex)
					if (Number.isNaN(numIndex)) return
					const normalizedIndex = ((numIndex % list.length) + list.length) % list.length
					if (!list[normalizedIndex]) return
					this.$set(list[normalizedIndex], key, fallback)
					extraKeys.forEach(extraKey => this.$set(list[normalizedIndex], extraKey, fallback))
				}
				
				switch (section) {
					case 'banner':
						setFallback(this.bannerList, index, 'cover_image', fallbackMap.banner)
						setFallback(this.bannerList, index, 'coverImage', fallbackMap.banner)
						break
					case 'activity':
						setFallback(this.hotActivities, index, 'coverImage', this.getRomanticImage(index))
						break
					case 'successCase':
						setFallback(this.successCases, index, 'imageUrl', fallbackMap.successCase)
						break
					case 'todayRecommend':
						setFallback(this.todayRecommendUsers, index, 'avatar', fallbackMap.todayRecommend)
						break
					default:
						break
				}
			},

			// 处理图片加载成功
			handleImageLoad(e) {
				// 图片加载成功，重置错误计数
				this.imageErrorCount = 0
			},

			// 验证和处理图片URL
			validateImageUrl(url) {
				if (!url || url === 'null' || url === 'undefined') {
					return DEFAULT_IMAGES.activity || DEFAULT_IMAGES.banner || 'http://115.190.125.125:9001/static-images/login-bg.png'
				}

				let cleanedUrl = String(url).trim()
				const httpIndex = cleanedUrl.indexOf('http')
				if (httpIndex > 0) {
					cleanedUrl = cleanedUrl.slice(httpIndex)
				}

				if (!cleanedUrl) {
					return DEFAULT_IMAGES.activity || DEFAULT_IMAGES.banner || 'http://115.190.125.125:9001/static-images/login-bg.png'
				}
				
				// 如果是相对路径，添加协议和域名
				if (cleanedUrl.startsWith('/')) {
					// 检查是否是完整的服务器路径
					if (cleanedUrl.startsWith('/banners/') || cleanedUrl.startsWith('/activities/') || cleanedUrl.startsWith('/images/')) {
						return `http://115.190.125.125:9000${cleanedUrl}`
					}
					return `http://115.190.125.125:9000${cleanedUrl}`
				}
				
				// 如果已经是完整URL，直接返回
				if (cleanedUrl.startsWith('http://') || cleanedUrl.startsWith('https://')) {
					return cleanedUrl
				}
				
				// 其他情况返回默认图片
				return DEFAULT_IMAGES.activity || DEFAULT_IMAGES.banner || 'http://115.190.125.125:9001/static-images/login-bg.png'
			},

			getRomanticImage(index = 0) {
				if (!this.romanticImages || this.romanticImages.length === 0) {
					return DEFAULT_IMAGES.activity || DEFAULT_IMAGES.banner || 'http://115.190.125.125:9001/static-images/login-bg.png'
				}
				const idx = Math.abs(Number(index) || 0) % this.romanticImages.length
				return this.romanticImages[idx]
			},

			ensureRomanticCover(url, index = 0) {
				if (!url || url === DEFAULT_IMAGES.activity || url === DEFAULT_IMAGES.banner || url === 'http://115.190.125.125:9001/static-images/login-bg.png') {
					return this.getRomanticImage(index)
				}
				return url
			},

			// 跳转到推荐页面
			goToRecommend() {
				uni.navigateTo({
					url: '/pages/recommend/index'
				})
			},

			// 处理用户点击
			handleUserClick(user) {
				const userId = user.userId || user.id
				if (!userId) {
					uni.showToast({
						title: '用户信息错误',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: `/pages/recommend/user-detail?userId=${userId}`
				})
			},

			// 格式化时间
			formatTime,

			// Banner点击
			handleBannerClick(banner) {
				if (banner.type === 'activity') {
					uni.navigateTo({
						url: `/pages/activities/detail?id=${banner.targetId}`
					})
				} else if (banner.type === 'course') {
					uni.navigateTo({
						url: `/pages/courses/detail?id=${banner.targetId}`
					})
				} else if (banner.type === 'case') {
					uni.navigateTo({
						url: '/pages/success-case/list'
					})
				}
			},

            // 功能入口点击
            handleFunctionClick(item) {
                // 今日缘分：直接跳转到专门的推荐页面
                 if (item && (item.id === 5 || item.name === '今日缘分' || item.name === '今日推荐')) {
                    console.log('点击今日缘分，跳转到专门页面')
                    uni.navigateTo({
                        url: '/pages/today-recommend/index',
                        success: () => {
                            console.log('跳转今日缘分页面成功')
                        },
                        fail: (err) => {
                            console.error('跳转今日缘分页面失败:', err)
                            uni.showToast({
                                title: '页面跳转失败',
                                icon: 'none'
                            })
                        }
                    })
                    return
                }
                // 检查是否需要登录
                if (item.needLogin && !isLoggedIn()) {
                    uni.navigateTo({
                        url: '/pages/page3/page3'
                    })
                    return
                }

				if (item.path) {
					let url = item.path
					if (item.query) {
						const queryStr = Object.keys(item.query).map(key => `${key}=${item.query[key]}`).join('&')
						url += '?' + queryStr
					}
					uni.navigateTo({
						url: url,
						fail: () => {
							uni.showToast({
								title: '功能开发中',
								icon: 'none'
							})
						}
					})
				}
			},


			// 跳转到消息中心
			goToMessages() {
				uni.navigateTo({
					url: '/pages/message/index',
					fail: () => {
						uni.showToast({
							title: '功能开发中',
							icon: 'none'
						})
					}
				})
			},
			
			// 打开红娘工作台弹框
			openMatchmakerPopup() {
				// 删除检查处理标记的逻辑，每次点击都显示弹框
				if (this.$refs.matchmakerPopup) {
					this.$refs.matchmakerPopup.open()
				}
			},


		// 切换Tab
		switchTab(tab) {
			if (tab === 'index') return

			const tabPages = {
				plaza: '/pages/plaza/index',
				recommend: '/pages/recommend/index',
				message: '/pages/message/index',
				mine: '/pages/mine/index'
			}

			if (tabPages[tab]) {
				uni.redirectTo({
					url: tabPages[tab]
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
	.home-page {
		min-height: 100vh;
		background: #F5F5F5;
		padding-bottom: 120rpx;
	}

	/* 顶部状态栏 */
	.top-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 25rpx 35rpx;
		background: #FFFFFF;
		border-bottom: 2rpx solid #E0E0E0;

		.logo {
			font-size: 38rpx;
			font-weight: 800;
			color: #E91E63;
		}

		.top-right-icons {
			display: flex;
			align-items: center;
			gap: 20rpx;
		}

		.matchmaker-btn {
			position: relative;
			width: auto;
			height: auto;
			display: flex;
			align-items: center;
			justify-content: center;
			background: transparent;
			border-radius: 0;
			transition: all 0.3s ease;
			padding: 10rpx 20rpx;
			color: #E91E63;
			font-weight: 600;
			border: 2rpx solid #E91E63;
			border-radius: 25rpx;
			
			&:active {
				opacity: 0.8;
				transform: scale(0.98);
				background: rgba(233, 30, 99, 0.1);
			}

			.switch-icon {
				font-size: 28rpx;
				margin-right: 8rpx;
			}
			
			.switch-text {
				font-size: 26rpx;
				color: #E91E63;
				font-weight: 600;
			}
		}

		.msg-icon {
			position: relative;
			width: 68rpx;
			height: 68rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #FFE5F1;
			border-radius: 50%;
			transition: all 0.2s ease;
			
			&:active {
				opacity: 0.8;
				transform: scale(0.95);
			}

			.icon {
				font-size: 44rpx;
			}

			.badge {
				position: absolute;
				top: -5rpx;
				right: -5rpx;
				min-width: 36rpx;
				height: 36rpx;
				line-height: 36rpx;
				padding: 0 8rpx;
				background: #FF6B6B;
				color: #FFFFFF;
				font-size: 20rpx;
				font-weight: bold;
				border-radius: 18rpx;
				text-align: center;
			}
		}
	}

	/* 个性化欢迎语 */
	.welcome-card {
		margin: 25rpx 35rpx;
		padding: 35rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		border: 2rpx solid #E0E0E0;

		.welcome-content {
			display: flex;
			flex-direction: column;
			gap: 16rpx;

			.welcome-text {
				font-size: 34rpx;
				font-weight: 700;
				color: #333333;
				line-height: 1.3;
			}

			.match-info {
				font-size: 28rpx;
				color: #666666;
				line-height: 1.4;

				.highlight {
					color: #E91E63;
					font-weight: 800;
					font-size: 36rpx;
				}
			}
		}
	}

	/* 轮播图 */
	.banner-section {
		margin: 10rpx 10rpx;

		.banner-swiper {
			height: 480rpx;
			border-radius: 16rpx;
			overflow: hidden;
			border: 2rpx solid #E0E0E0;

			.banner-item {
				position: relative;
				width: 100%;
				height: 100%;
				overflow: hidden;

				.banner-image {
					width: 100%;
					height: 100%;
				}

				.banner-mask {
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					padding: 35rpx;
					background: rgba(0, 0, 0, 0.6);
					color: #FFFFFF;

					.banner-title {
						font-size: 38rpx;
						font-weight: 800;
						margin-bottom: 12rpx;
						line-height: 1.2;
					}

					.banner-subtitle {
						font-size: 26rpx;
						margin-bottom: 24rpx;
					}

					.banner-btn {
						display: inline-block;
						padding: 12rpx 32rpx;
						background: #E91E63;
						border-radius: 8rpx;
						font-size: 26rpx;
						font-weight: 600;
						transition: all 0.2s ease;
						
						&:active {
							opacity: 0.8;
						}
					}
				}
			}
		}
	}

	/* 公告栏 */
	.notice-bar {
		display: flex;
		align-items: center;
		margin: 25rpx 35rpx;
		padding: 24rpx 30rpx;
		background: #FFF8E1;
		border-radius: 8rpx;
		border: 2rpx solid #FFD54F;
		border-left: 6rpx solid #FFC107;

		.notice-icon {
			font-size: 34rpx;
			margin-right: 24rpx;
		}

		.notice-swiper {
			flex: 1;
			height: 44rpx;

			.notice-text {
				font-size: 28rpx;
				color: #795548;
				line-height: 44rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-weight: 500;
			}
		}
	}

	/* 功能入口 */
	.function-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 24rpx;
		margin: 20rpx 1rpx;
		padding: 30rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		border: 2rpx solid #E0E0E0;

		.grid-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 14rpx;
			padding: 20rpx 12rpx;
			transition: all 0.3s ease;
			border-radius: 12rpx;

			&:active {
				transform: scale(0.95);
				opacity: 0.9;
			}

			.grid-icon-wrapper {
				width: 140rpx;
				height: 140rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 20rpx;
				position: relative;
				overflow: hidden;
				/* 外阴影 + 内阴影 - 增强立体感和深度感 */
				box-shadow: inset 0 2rpx 8rpx rgba(255, 255, 255, 0.3),
							0 10rpx 30rpx rgba(0, 0, 0, 0.2),
							0 4rpx 12rpx rgba(0, 0, 0, 0.15);
				transition: all 0.3s ease;

				/* 光泽效果 - 左上角强烈高光，模拟图片中的光泽 */
				&::before {
					content: '';
					position: absolute;
					top: -60%;
					left: -60%;
					width: 220%;
					height: 220%;
					background: linear-gradient(135deg, 
						rgba(255, 255, 255, 0.6) 0%, 
						rgba(255, 255, 255, 0.4) 15%, 
						rgba(255, 255, 255, 0.2) 30%, 
						rgba(255, 255, 255, 0.05) 50%, 
						transparent 70%);
					transform: rotate(45deg);
					pointer-events: none;
					z-index: 1;
					border-radius: 50%;
				}

				/* 底部深度阴影 - 增强立体感 */
				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					height: 40%;
					background: linear-gradient(to top, 
						rgba(0, 0, 0, 0.15) 0%, 
						rgba(0, 0, 0, 0.08) 50%, 
						transparent 100%);
					pointer-events: none;
					z-index: 1;
					border-radius: 0 0 20rpx 20rpx;
				}

				&:active {
					transform: scale(0.92);
					box-shadow: inset 0 2rpx 8rpx rgba(255, 255, 255, 0.2),
								0 6rpx 20rpx rgba(0, 0, 0, 0.25);
				}

				.grid-icon {
					font-size: 70rpx;
					position: relative;
					z-index: 2;
					/* 图标阴影 - 让图标更突出 */
					filter: drop-shadow(0 3rpx 8rpx rgba(0, 0, 0, 0.2));
					text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
				}
			}

			.grid-text {
				font-size: 24rpx;
				font-weight: 600;
				color: #333333;
				text-align: center;
				line-height: 1.2;
			}
		}
	}

	/* 区块样式 */
	.section {
		margin: 40rpx 0;

		.section-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 35rpx;
			margin-bottom: 25rpx;

			.section-title {
				font-size: 36rpx;
				font-weight: 800;
				color: #333333;
				border-left: 6rpx solid #E91E63;
				padding-left: 16rpx;
			}

			.section-more {
				font-size: 26rpx;
				color: #E91E63;
				font-weight: 600;
				transition: all 0.2s ease;
				
				&:active {
					opacity: 0.6;
				}
			}
		}
	}

	/* 平台活动展示区 */
	.activity-recommend-section {
		.activity-scroll-container {
			margin: 0 35rpx;
			overflow: hidden;
			position: relative;

			.activity-scroll-wrapper {
				width: 100%;
				overflow: hidden;

				.activity-scroll-content {
					display: flex;
					animation: activityScroll 30s linear infinite;
					gap: 20rpx;
					width: fit-content;

					&:hover {
						animation-play-state: paused;
					}

					.activity-card-scroll {
						flex-shrink: 0;
						width: 500rpx;
						background: #FFFFFF;
						border-radius: 16rpx;
						overflow: hidden;
						border: 2rpx solid #E0E0E0;
						transition: all 0.3s ease;

						&:active {
							transform: scale(0.98);
							opacity: 0.9;
						}

						.activity-image-wrapper {
							position: relative;
							width: 100%;
							height: 280rpx;
							overflow: hidden;

							.activity-image {
								width: 100%;
								height: 100%;
							}

							.activity-status {
								position: absolute;
								top: 15rpx;
								right: 15rpx;
								padding: 6rpx 12rpx;
								background: #4CAF50;
								color: #FFFFFF;
								font-size: 22rpx;
								font-weight: 600;
								border-radius: 8rpx;
							}
						}

						.activity-info-static {
							padding: 20rpx;

							.activity-name-static {
								font-size: 28rpx;
								font-weight: 700;
								color: #333333;
								margin-bottom: 8rpx;
								line-height: 1.3;
							}

							.activity-time-static {
								font-size: 24rpx;
								color: #666666;
								line-height: 1.4;
							}
						}
					}
				}
			}
		}
	}

	@keyframes activityScroll {
		0% {
			transform: translateX(0);
		}
		100% {
			transform: translateX(-50%);
		}
	}

	/* 今日缘分推荐 */
	.fate-recommend-section {
		.fate-cards {
			display: flex;
			gap: 20rpx;
			padding: 0 35rpx;
			overflow-x: auto;
			scrollbar-width: none;

			&::-webkit-scrollbar {
				display: none;
			}

			.fate-card {
				min-width: 320rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 25rpx;
				border: 2rpx solid #E0E0E0;
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 15rpx;
				position: relative;
				transition: all 0.2s ease;

				&:active {
					background: #F5F5F5;
				}

				.user-avatar-wrapper {
					position: relative;

					.user-avatar {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						border: 3rpx solid #E0E0E0;
					}

					.online-status {
						position: absolute;
						bottom: 5rpx;
						right: 5rpx;
						width: 20rpx;
						height: 20rpx;
						background: #4CAF50;
						border-radius: 50%;
						border: 3rpx solid white;
					}
				}

				.user-basic-info {
					text-align: center;

					.user-nickname {
						font-size: 28rpx;
						font-weight: 700;
						color: #333333;
						display: block;
						margin-bottom: 5rpx;
					}

					.user-age-location {
						font-size: 24rpx;
						color: #666666;
					}
				}

				.match-score {
					display: flex;
					align-items: center;
					gap: 8rpx;
					padding: 8rpx 16rpx;
					background: #FFE5F1;
					border-radius: 8rpx;

					.match-text {
						font-size: 22rpx;
						color: #666666;
					}

					.match-percentage {
						font-size: 26rpx;
						font-weight: 700;
						color: #E91E63;
					}
				}

				.user-tags {
					display: flex;
					gap: 8rpx;
					flex-wrap: wrap;
					justify-content: center;

					.user-tag {
						font-size: 20rpx;
						color: #666666;
						background: #F5F5F5;
						padding: 6rpx 12rpx;
						border-radius: 8rpx;
						border: 1rpx solid #E0E0E0;
					}
				}
			}
		}
	}

	/* 个人魅力指数 */
	.charm-index-section {
		margin: 25rpx 35rpx;

		.charm-card {
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 35rpx;
			border: 2rpx solid #E0E0E0;

			.charm-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 25rpx;

				.charm-title {
					font-size: 32rpx;
					font-weight: 800;
					color: #333333;
				}

				.charm-score {
					font-size: 48rpx;
					font-weight: 800;
					color: #E91E63;
				}
			}

			.charm-progress {
				margin-bottom: 30rpx;

				.progress-bar {
					width: 100%;
					height: 12rpx;
					background: #FFE5F1;
					border-radius: 6rpx;
					overflow: hidden;
					margin-bottom: 10rpx;

					.progress-fill {
						height: 100%;
						background: #E91E63;
						border-radius: 6rpx;
						transition: width 1s ease;
					}
				}

				.progress-text {
					font-size: 24rpx;
					color: #666666;
					text-align: center;
					display: block;
				}
			}

			.charm-items {
				display: flex;
				flex-direction: column;
				gap: 20rpx;
				margin-bottom: 25rpx;

				.charm-item {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.charm-item-label {
						font-size: 26rpx;
						color: #666666;
						font-weight: 500;
					}

					.charm-item-progress {
						display: flex;
						align-items: center;
						gap: 12rpx;
						flex: 1;
						margin-left: 20rpx;

						.item-progress-bar {
							flex: 1;
							height: 8rpx;
							background: #FFE5F1;
							border-radius: 4rpx;
							overflow: hidden;

							.item-progress-fill {
								height: 100%;
								background: #E91E63;
								border-radius: 4rpx;
								transition: width 1s ease;
							}
						}

						.charm-item-score {
							font-size: 24rpx;
							color: #E91E63;
							font-weight: 600;
							min-width: 60rpx;
							text-align: right;
						}
					}
				}
			}

			.charm-tip {
				padding: 20rpx;
				background: #FFF8E1;
				border-radius: 8rpx;
				border: 2rpx solid #FFD54F;

				.tip-text {
					font-size: 24rpx;
					color: #666666;
					line-height: 1.5;
				}
			}
		}
	}

	/* 底部占位 */
	.bottom-placeholder {
		height: 30rpx;
	}

	/* 底部导航栏 */
	.tabbar {
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				display: flex;
				background-color: #FFFFFF;
				border-top: 1rpx solid #F0F0F0;
				padding-bottom: constant(safe-area-inset-bottom);
				padding-bottom: env(safe-area-inset-bottom);
				z-index: 999;
				box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		
				.tabbar-item {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 15rpx 0;
					position: relative;
		
					.tabbar-icon {
						font-size: 44rpx;
						margin-bottom: 5rpx;
					}
		
					.tabbar-text {
						font-size: 22rpx;
						color: #666666;
					}
		
					&.active {
						.tabbar-text {
							color: #E91E63;
							font-weight: bold;
						}
					}
				}
			}


	/* 成功案例 */
	.success-case-section {
		.success-case-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 20rpx;
			margin: 0 35rpx;

			.case-card {
				background: #FFFFFF;
				border-radius: 16rpx;
				overflow: hidden;
				border: 2rpx solid #E0E0E0;
				transition: all 0.3s ease;

				&:active {
					transform: scale(0.98);
					opacity: 0.9;
				}

				.case-image-wrapper {
					width: 100%;
					height: 320rpx;
					position: relative;
					overflow: hidden;

					.case-image {
						width: 100%;
						height: 100%;
					}
				}

				.case-content {
					padding: 20rpx;

					.couple-names {
						font-size: 28rpx;
						font-weight: 700;
						color: #333333;
						margin-bottom: 10rpx;
						line-height: 1.3;
					}

					.case-quote {
						font-size: 24rpx;
						color: #666666;
						line-height: 1.5;
						margin-bottom: 12rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}

					.case-meta {
						.marriage-date {
							font-size: 22rpx;
							color: #999999;
							line-height: 1.4;
						}
					}
				}
			}
		}
	}

	@keyframes marquee {
		0% {
			transform: translateX(0);
		}
		100% {
			transform: translateX(-50%);
		}
	}
	
	.tabbar-badge {
	      position: absolute;
	      top: 8rpx;
	      right: 50%;
	      margin-right: -40rpx;
	      min-width: 32rpx;
	      height: 32rpx;
	      line-height: 32rpx;
	      padding: 0 6rpx;
	      background-color: #FA5151;
	      border-radius: 16rpx;
	      font-size: 20rpx;
	      color: #FFFFFF;
	      text-align: center;
	    }

</style>