xiangqinxiangmu/LiangZhiYUMao/pages/index/index.vue

<template>
	<view class="home-page">
		<!-- 顶部状态栏 -->
		<view class="top-bar">
			<view class="logo">青鸾之恋
			<img v-if="showMatchmakerButton" @click="openMatchmakerPopup" src="https://api.zhongruanke.cn/minio/static-images/切换用户.png" class="back-icon" />
			</view>
			<!-- <view class="top-right-icons"> -->
				<!-- 红娘工作台切换按钮 - 根据数据库查询结果动态显示 -->
				
				<!-- <view v-if="showMatchmakerButton"
				class="matchmaker-btn" @click="openMatchmakerPopup">
					<text class="switch-icon">🔄</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="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>
			  <!-- 滚动容器 - 参考活动滚动的结构 -->
			  <view class="notice-scroll-container">
			    <view class="notice-scroll-wrapper">
			      <view class="notice-scroll-content">
			        <!-- 第一组公告 -->
			        <view class="notice-item-scroll" v-for="(notice, index) in noticeList" :key="index">
			          <text class="notice-text">{{ notice.content }}</text>
			        </view>
			        <!-- 第二组公告（用于无缝滚动） -->
			        <view class="notice-item-scroll" v-for="(notice, index) in noticeList" :key="index + 100">
			          <text class="notice-text">{{ notice.content }}</text>
			        </view>
			      </view>
			    </view>
			  </view>
			</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 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>

		<!-- 底部导航栏 -->
		<common-tabbar current="index" client-type="user" :badge-data="badgeData" />

		<!-- 红娘提示弹框 -->
		<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'
	import CommonTabbar from '@/components/common-tabbar/common-tabbar.vue'

	export default {
		components: {
			CommonTabbar
		},
		data() {
			return {
				// 用户信息
				userInfo: {},
				matchCount: 3,
				
				// 角标数据
				badgeData: {
					unreadCount: 0
				},
				
				// 是否显示红娘工作台按钮（根据数据库查询结果）
				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.checkMatchmakerStatusFromDB()
			// this.loadTodayRecommend()
			this.loadCharmIndex()
			this.loadHotActivities()
			this.loadSuccessCases()
			// 监听未读消息数更新事件
			uni.$on('conversationUnreadUpdate', (totalUnread) => {
				
				this.$store.dispatch('updateTotalUnread', totalUnread);
			});
		},

		onUnload() {
			// 清理资源
			uni.$off('conversationUnreadUpdate');
		},
		onShow() {
			
			// 页面显示时重新加载用户信息（确保登录后能更新）
			this.loadUserInfo()
			// 页面显示时查询数据库检查是否为红娘
			this.checkMatchmakerStatusFromDB()
		},
		methods: {
			// 从数据库查询用户是否为红娘
			async checkMatchmakerStatusFromDB() {
				try {
					const userId = uni.getStorageSync('userId')
					if (!userId) {
						
						this.showMatchmakerButton = false
						return
					}
					
					
					
					// 调用API查询用户的is_matchmaker字段
					const result = await api.user.getMatchmakerStatus(userId)
					
					if (result && result.isMatchmaker !== undefined) {
						const isMatchmaker = parseInt(result.isMatchmaker)
						
						
						// 根据查询结果设置按钮显示状态
						this.showMatchmakerButton = (isMatchmaker === 1)
						
						// 同时更新本地存储的用户信息
						const userInfo = await api.user.getDetailInfo(userId)
						console.log(userInfo)
						userInfo.isMatchmaker = isMatchmaker
						uni.setStorageSync('userInfo', userInfo)
						this.userInfo.isMatchmaker = isMatchmaker
						
						
					} else {
						
						this.showMatchmakerButton = false
					}
				} catch (error) {
				
					this.showMatchmakerButton = false
				}
			},
			
			// 前往红娘工作台
			async goToMatchmakerWorkspace() {
				
				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)
						
						} catch (e) {
							
						}
					}
					
					const res = await uni.request({
						url: 'https://api.zhongruanke.cn/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: `https://api.zhongruanke.cn/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
					
					
					try {
						await timManager.logout()
						
					} catch (e) {
						
					}
					
					await timManager.login(imUserId, userSig)
				
					
					uni.$emit('matchmakerIMReady', { imUserId })
				} catch (error) {
					
					uni.showToast({ title: '红娘IM初始化失败', icon: 'none' })
				}
				
				uni.navigateTo({
					url: '/pages/matchmaker-workbench/index',
					fail: (err) => {
					
						uni.showToast({ title: '跳转失败', icon: 'none' })
					}
				})
			},
			
			// 关闭红娘弹框
			closeMatchmakerPopup() {
				
				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) {
				
				}
			},
			
			// 加载金刚区功能列表
async loadFunctionGridData() {
	try {
		// 调用 API 获取用户端金刚区功能数据
		const data = await api.home.getFunctionGridByType('user')
		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) {
	}
},
			
			// 颜色提亮函数（用于生成渐变背景色）
			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) {
				
				}
			},

			// 加载今日推荐
			async loadTodayRecommend() {
				try {
					const userId = this.userInfo.userId || parseInt(uni.getStorageSync('userId'))
					if (!userId) {
					
						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  // 可以根据实际情况设置
						}))
						
						
					}
				} catch (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) {
						
					}
				}
				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) {
					
				}
			},

			// 加载热门活动
			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) {
					

				}
			},

			// 格式化活动时间（支持开始和结束时间）
			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) {
					
					
				}
			},

			// 格式化结婚日期
			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
				
				
				
				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 || ''
				}

				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 || ''
				}
				
				// 如果是相对路径，添加协议和域名
				if (cleanedUrl.startsWith('/')) {
					// 检查是否是完整的服务器路径
					if (cleanedUrl.startsWith('/banners/') || cleanedUrl.startsWith('/activities/') || cleanedUrl.startsWith('/images/')) {
						return `https://api.zhongruanke.cn/minio/${cleanedUrl}`
					}
					return `https://api.zhongruanke.cn/minio/${cleanedUrl}`
				}
				
				// 如果已经是完整URL，直接返回
				if (cleanedUrl.startsWith('http://') || cleanedUrl.startsWith('https://')) {
					return cleanedUrl
				}
				
				// 其他情况返回默认图片
				return DEFAULT_IMAGES.activity || DEFAULT_IMAGES.banner || ''
			},

			getRomanticImage(index = 0) {
				if (!this.romanticImages || this.romanticImages.length === 0) {
					return DEFAULT_IMAGES.activity || DEFAULT_IMAGES.banner || ''
				}
				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 === '') {
					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 === '今日推荐')) {
                  
                    uni.navigateTo({
                        url: '/pages/today-recommend/index',
                        success: () => {
                            
                        },
                        fail: (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: '/subpkg-message/index/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;
			margin-top: 35px;
		}
		.back-icon{
			width: 20px;
			height: 20px;
		}

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

		.matchmaker-btn {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 16rpx 32rpx;
			background: linear-gradient(135deg, #9B7EDE 0%, #B19CD9 100%);
			border-radius: 30rpx;
			box-shadow: 0 8rpx 20rpx rgba(155, 126, 222, 0.3);
			transition: all 0.3s ease;
			border: none;
			
			&:active {
				transform: scale(0.95);
				box-shadow: 0 4rpx 12rpx rgba(155, 126, 222, 0.4);
			}
			
			.switch-text {
				font-size: 26rpx;
				color: #FFFFFF;
				font-weight: 700;
				letter-spacing: 0.5rpx;
			}
		}

		.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;
		    flex-shrink: 0; /* 固定图标不被挤压 */
		  }
		
		  // 公告滚动容器 - 参考活动滚动容器结构
		  .notice-scroll-container {
		    flex: 1;
		    overflow: hidden;
		    position: relative;
		    height: 60rpx;
		
		    .notice-scroll-wrapper {
		      width: 100%;
		      overflow: hidden;
		
		      .notice-scroll-content {
		        display: flex;
		        animation: noticeScroll 20s linear infinite; /* 滚动动画，时长可调整 */
		        gap: 40rpx; /* 公告之间的间距 */
		        width: fit-content;
		
		        // 悬停暂停滚动（可选）
		        &:hover {
		          animation-play-state: paused;
		        }
		
		        .notice-item-scroll {
		          flex-shrink: 0; /* 固定宽度，不被挤压 */
		          white-space: nowrap; /* 禁止文字换行 */
		          display: flex;
		          align-items: center;
		          height: 60rpx;
		
		          .notice-text {
		            font-size: 28rpx;
		            color: #795548;
		            line-height: 60rpx;
		            font-weight: 500;
		          }
		        }
		      }
		    }
		  }
		}
		
		// 公告滚动动画 - 参考活动滚动动画逻辑
		@keyframes noticeScroll {
		  0% {
		    transform: translateX(0);
		  }
		  100% {
		    transform: translateX(-50%); /* 滚动到第一组公告完全移出，第二组接上 */
		  }
		}
	
		
	/* 功能入口 */
	.function-grid {
	  display: flex; /* 核心：改为flex布局 */
	  flex-wrap: wrap; /* 自动换行 */
	  gap: 25rpx; /* 保留间距（注意：低版本浏览器可能不兼容flex gap，需用margin替代） */
	  margin: 20rpx 1rpx;
	  padding: 30rpx 20rpx;
	  background: #fefeff;
	  border-radius: 20rpx;
	  border: 2rpx solid #f0f0f5;
	  box-shadow: 0 4rpx 16rpx rgba(220, 220, 240, 0.2);
	  /* 兼容低版本浏览器（无flex gap时）：给子元素加margin，替代gap */
	  // > .grid-item {
	  //   margin: 0 15rpx 30rpx 15rpx;
	  // }
	  // > .grid-item:nth-child(4n+1) {
	  //   margin-left: 0;
	  // }
	  // > .grid-item:nth-child(n+5) {
	  //   margin-top: 30rpx;
	  // }
	}
	
	.grid-item {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  gap: 16rpx;
	  padding: 24rpx 12rpx;
	  transition: all 0.3s ease;
	  border-radius: 16rpx;
	  background: linear-gradient(180deg, #fff 0%, #fdfdff 100%);
	  box-shadow: 0 2rpx 8rpx rgba(220, 220, 240, 0.15);
	  /* 核心：保证4列均分，每列最小宽度限制 */
	  flex: 1;
	  min-width: calc(25% - 22.5rpx); /* 25% - 30rpx/2（gap的一半），适配4列 */
	  max-width: calc(25% - 22.5rpx);
	  box-sizing: border-box; /* 避免padding撑大宽度 */
	
	  &:hover,
	  &:active {
	    transform: translateY(-4rpx) scale(0.98);
	    background: linear-gradient(180deg, #fff 0%, #f8f8ff 100%);
	    box-shadow: 0 6rpx 18rpx rgba(200, 200, 230, 0.25);
	  }
	}
	
	/* 为不同功能定制图标容器底色（贴合功能主题） */
	.grid-item:nth-child(1) .grid-icon-wrapper {
	  background: linear-gradient(135deg, #ff85a2 0%, #ff5d8f 100%);
	}
	.grid-item:nth-child(2) .grid-icon-wrapper {
	  background: linear-gradient(135deg, #85cfff 0%, #5daaff 100%);
	}
	.grid-item:nth-child(3) .grid-icon-wrapper {
	  background: linear-gradient(135deg, #ffc885 0%, #ffaa5d 100%);
	}
	.grid-item:nth-child(4) .grid-icon-wrapper {
	  background: linear-gradient(135deg, #ff85d2 0%, #ff5daa 100%);
	}
	
	.grid-icon-wrapper {
	  width: 150rpx;
	  height: 150rpx;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  border-radius: 24rpx;
	  position: relative;
	  overflow: hidden;
	  box-shadow: inset 0 3rpx 10rpx rgba(255, 255, 255, 0.4),
	              0 8rpx 24rpx rgba(0, 0, 0, 0.12);
	  transition: all 0.3s ease;
	}
	
	.grid-icon-wrapper::before {
	  content: '';
	  position: absolute;
	  top: -50%;
	  left: -50%;
	  width: 200%;
	  height: 200%;
	  background: linear-gradient(135deg, 
	    rgba(255, 255, 255, 0.7) 0%, 
	    rgba(255, 255, 255, 0.3) 40%, 
	    transparent 80%);
	  transform: rotate(45deg);
	  pointer-events: none;
	  z-index: 1;
	}
	
	.grid-icon {
	  font-size: 80rpx;
	  color: #fff;
	  position: relative;
	  z-index: 2;
	  filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.15));
	}
	
	/* 功能图标装饰 */
	.grid-item:nth-child(1) .grid-icon::after {
	  content: '⭐';
	  position: absolute;
	  top: 10rpx;
	  right: 10rpx;
	  font-size: 30rpx;
	  transform: rotate(15deg);
	}
	.grid-item:nth-child(4) .grid-icon::after {
	  content: '🎀';
	  position: absolute;
	  bottom: 10rpx;
	  right: 10rpx;
	  font-size: 30rpx;
	}
	
	.grid-text {
	  font-size: 26rpx;
	  font-weight: 600;
	  color: #2d2d46;
	  text-align: center;
	  line-height: 1.3;
	  text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.05);
	}
	
	/* 响应式适配：小屏自动改为2列 */
	@media (max-width: 600rpx) {
	  .grid-item {
	    min-width: calc(50% - 15rpx);
	    max-width: calc(50% - 15rpx);
	  }
	}

	/* 区块样式 */
	.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;
		
				.first-icon{
					width: 25px;
					height: 25px;
					margin-bottom: 5px;
					margin-top: 5px;
				}
					.tabbar-icon {
						font-size: 44rpx;
						margin-bottom: 5rpx;
					}
		
					.tabbar-text {
						font-size: 22rpx;
						color: #722F37;
					}
		
					&.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>