xiangqinxiangmu/LiangZhiYUMao/pages/astrology/constellation.vue

<template>
	<view class="constellation-page">
		<!-- 自定义导航栏 -->
		<view class="custom-nav">
			<view class="nav-left" @click="goBack">
				<text class="back-icon">←</text>
			</view>
			<view class="nav-title">星座卡片</view>
			<view class="nav-right"></view>
		</view>

		<!-- 生日选择区域 -->
		<view class="birthday-selection-section" v-if="!hasResult">
			<view class="selection-card">
				<view class="card-title">✨ 星座运势测算</view>
				<view class="card-subtitle">选择你的生日，查看专属星座运势</view>
				
				<!-- 生日选择器 -->
				<view class="birthday-picker-wrapper">
					<view class="picker-label">选择生日</view>
					<picker mode="date" :value="birthday" @change="onBirthdayChange" :start="startDate" :end="endDate">
						<view class="birthday-display">
							<text class="birthday-icon">📅</text>
							<text class="birthday-text">{{ birthdayDisplay }}</text>
						</view>
					</picker>
				</view>

				<!-- 星座显示 -->
				<view class="constellation-preview" v-if="currentConstellation">
					<view class="constellation-info">
						<text class="constellation-emoji">{{ currentConstellation.emoji }}</text>
						<text class="constellation-name">{{ currentConstellation.name }}</text>
					</view>
					<text class="constellation-desc">{{ currentConstellation.description }}</text>
				</view>

				<button class="submit-btn" @click="handleSubmit" :disabled="!birthday">
					查看运势
				</button>
			</view>

			<!-- 装饰性星座图标 -->
			<view class="constellation-icons">
				<text class="constellation-icon" v-for="(constellation, index) in allConstellations" :key="index">
					{{ constellation.emoji }}
				</text>
			</view>
		</view>

		<!-- 运势结果 -->
		<view class="result-section" v-if="hasResult">
			<!-- 星座标题卡片 -->
			<view class="constellation-title-card">
				<view class="constellation-header">
					<view class="constellation-main">
						<text class="constellation-emoji-large">{{ currentConstellation.emoji }}</text>
						<view class="constellation-info-main">
							<text class="constellation-name-large">{{ currentConstellation.name }}</text>
							<text class="constellation-period">{{ currentConstellation.period }}</text>
						</view>
					</view>
					<view class="constellation-traits">
						<view class="trait-tag" v-for="(trait, index) in currentConstellation.traits" :key="index">
							{{ trait }}
						</view>
					</view>
				</view>
			</view>

			<!-- 今日运势 -->
			<view class="fortune-section">
				<view class="section-title">🔮 今日运势</view>
				<view class="fortune-card">
					<view class="fortune-summary">
						<view class="fortune-score-wrapper">
							<text class="fortune-score">{{ todayFortune.overallScore }}</text>
							<text class="fortune-unit">分</text>
						</view>
						<view class="fortune-level" :style="{background: todayFortune.levelColor}">
							{{ todayFortune.level }}
						</view>
					</view>
					<view class="fortune-details">
						<view class="fortune-item" v-for="(item, index) in todayFortune.details" :key="index">
							<view class="fortune-item-header">
								<text class="fortune-item-icon">{{ item.icon }}</text>
								<text class="fortune-item-label">{{ item.label }}</text>
							</view>
							<view class="fortune-score-bar">
								<view class="score-bar">
									<view class="score-fill" :style="{width: item.score + '%', background: item.color}"></view>
								</view>
								<text class="score-text">{{ item.score }}%</text>
							</view>
						</view>
					</view>
					<view class="fortune-advice">
						<text class="advice-label">💡 今日建议</text>
						<text class="advice-content">{{ todayFortune.advice }}</text>
					</view>
				</view>
			</view>

			<!-- 星座匹配 -->
			<view class="match-section">
				<view class="section-title">💕 星座匹配</view>
				<view class="match-card">
					<view class="match-best">
						<text class="match-category-title">最佳匹配</text>
						<view class="match-constellation-list">
							<view class="match-constellation-item best" v-for="(match, index) in constellationMatch.best" :key="index">
								<text class="match-emoji">{{ match.emoji }}</text>
								<text class="match-name">{{ match.name }}</text>
								<text class="match-score">{{ match.score }}%</text>
							</view>
						</view>
					</view>
					<view class="match-good">
						<text class="match-category-title">不错匹配</text>
						<view class="match-constellation-list">
							<view class="match-constellation-item good" v-for="(match, index) in constellationMatch.good" :key="index">
								<text class="match-emoji">{{ match.emoji }}</text>
								<text class="match-name">{{ match.name }}</text>
								<text class="match-score">{{ match.score }}%</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 幸运元素 -->
			<view class="lucky-section">
				<view class="section-title">🍀 今日幸运</view>
				<view class="lucky-grid">
					<view class="lucky-item" v-for="(item, index) in luckyElements" :key="index">
						<view class="lucky-icon-wrapper" :style="{background: item.bgColor}">
							<text class="lucky-icon">{{ item.icon }}</text>
						</view>
						<text class="lucky-label">{{ item.label }}</text>
						<text class="lucky-value">{{ item.value }}</text>
					</view>
				</view>
			</view>

			<!-- 星座特质详解 -->
			<view class="traits-section">
				<view class="section-title">🌟 星座特质</view>
				<view class="traits-card">
					<view class="trait-detail" v-for="(trait, index) in constellationTraits" :key="index">
						<view class="trait-header">
							<text class="trait-icon">{{ trait.icon }}</text>
							<text class="trait-title">{{ trait.title }}</text>
						</view>
						<text class="trait-content">{{ trait.content }}</text>
					</view>
				</view>
			</view>

			<!-- 重新测算 -->
			<view class="retest-btn" @click="handleRetest">
				重新测算
			</view>

			<!-- 数据来源说明 -->
			<view class="data-source" :class="{'api-source': isAPIData}">
				<text class="source-icon">{{ isAPIData ? '✓' : 'ℹ️' }}</text>
				<view class="source-content">
					<text class="source-text">数据来源：{{ dataSourceText }}</text>
					<text class="source-time">更新时间：{{ updateTime }}</text>
				</view>
			</view>

			<!-- 免责声明 -->
			<view class="disclaimer">
				<view class="disclaimer-title">⚠️ 免责声明</view>
				<view class="disclaimer-text">
					本星座运势基于占星学理论和统计数据分析，仅供娱乐参考，不作为人生决策依据。
					个人运势受多种因素影响，建议理性对待星座内容。
					真正的幸福需要自己努力争取和创造。
				</view>
			</view>
		</view>

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

<script>
import { getConstellation } from '@/utils/util.js'
import constellationUtil from '@/utils/constellation.js'

export default {
	data() {
		return {
			// 生日相关
			birthday: uni.getStorageSync("userInfo").birthDate,
			birthdayDisplay: '请选择生日',
			startDate: '1950-01-01',
			endDate: '2010-12-31',
			
			// 星座相关
			currentConstellation: null,
			hasResult: false,
			updateTime: '',
			
			// 运势数据
			todayFortune: null,
			constellationMatch: null,
			luckyElements: [],
			constellationTraits: [],
			
			// 所有星座数据
			allConstellations: constellationUtil.getAllConstellations()
		}
	},

	computed: {
		// 是否使用API数据
		isAPIData() {
			return this.todayFortune?.source === 'tianapi'
		},
		
		// 数据来源文本
		dataSourceText() {
			if (this.isAPIData) {
				return '天行数据专业API'
			}
			return '星座占星学理论'
		}
	},

	onLoad() {
		this.initData()
	},

	methods: {
		initData() {
			// 设置更新时间
			const date = new Date()
			const year = date.getFullYear()
			const month = parseInt(date.getMonth() + 1)
			const day = parseInt(date.getDate())
			this.updateTime = `${year}年${month}月${day}日`
		},

		// 生日选择
		onBirthdayChange(e) {
			this.birthday = e.detail.value
			this.birthdayDisplay = this.formatBirthday(this.birthday)
			
			// 实时计算星座
			const constellationName = getConstellation(this.birthday)
			this.currentConstellation = this.allConstellations.find(c => c.name === constellationName)
			
			
		},

		// 格式化生日显示
		formatBirthday(birthday) {
			if (!birthday) return '请选择生日'
			const date = new Date(birthday)
			const month = date.getMonth() + 1
			const day = date.getDate()
			return `${month}月${day}日`
		},

		// 提交查看运势
		async handleSubmit() {
			if (!this.birthday) {
				uni.showToast({
					title: '请选择生日',
					icon: 'none'
				})
				return
			}

			// 显示加载中
			uni.showLoading({
				title: '运势分析中...',
				mask: true
			})

			try {
				
				
				// 生成运势数据
				await this.generateFortuneData()
				
				this.hasResult = true
			

				// 保存到本地存储
				uni.setStorageSync('constellationFortune', {
					birthday: this.birthday,
					constellation: this.currentConstellation,
					fortune: this.todayFortune,
					lastUpdate: new Date().getTime()
				})

			} catch (error) {
				
				
				uni.showToast({
					title: '分析异常，请重试',
					icon: 'none',
					duration: 2000
				})
			} finally {
				uni.hideLoading()
			}
		},

		// 生成运势数据
		async generateFortuneData() {
			try {
				// 获取星座运势（优先API，失败时使用本地数据）
				const fortuneData = await constellationUtil.getConstellationFortune(this.currentConstellation.name)
				
				// 转换数据格式为页面需要的格式
				this.todayFortune = {
					overallScore: fortuneData.overall || 80,
					level: fortuneData.level || '良好',
					levelColor: fortuneData.levelColor || 'linear-gradient(135deg, #2196F3 0%, #64B5F6 100%)',
					details: [
						{
							label: '爱情运',
							icon: '💕',
							score: fortuneData.love || 75,
							color: 'linear-gradient(135deg, #E91E63 0%, #FF6B9D 100%)'
						},
						{
							label: '事业运',
							icon: '💼',
							score: fortuneData.career || 78,
							color: 'linear-gradient(135deg, #2196F3 0%, #64B5F6 100%)'
						},
						{
							label: '财运',
							icon: '💰',
							score: fortuneData.wealth || 72,
							color: 'linear-gradient(135deg, #FF9800 0%, #FFB74D 100%)'
						},
						{
							label: '健康运',
							icon: '🌿',
							score: fortuneData.health || 80,
							color: 'linear-gradient(135deg, #4CAF50 0%, #81C784 100%)'
						}
					],
					advice: fortuneData.advice || '今天是美好的一天，保持积极心态！',
					source: fortuneData.source || 'local'
				}
				
				// 生成星座匹配
				this.constellationMatch = constellationUtil.generateConstellationMatch(this.currentConstellation.name)
				
				// 生成幸运元素
				this.luckyElements = constellationUtil.generateLuckyElements(this.currentConstellation.name)
				
				// 生成星座特质
				this.constellationTraits = constellationUtil.generateConstellationTraits(this.currentConstellation.name)
				
			} catch (error) {
			
				this.todayFortune = this.generateDefaultFortune()
				this.constellationMatch = { best: [], good: [] }
				this.luckyElements = []
				this.constellationTraits = []
			}
		},

		// 生成默认运势数据（异常情况下使用）
		generateDefaultFortune() {
			const scores = {
				overall: Math.floor(Math.random() * 30) + 70,
				love: Math.floor(Math.random() * 40) + 60,
				career: Math.floor(Math.random() * 40) + 60,
				wealth: Math.floor(Math.random() * 40) + 60,
				health: Math.floor(Math.random() * 40) + 60
			}
			
			const levels = ['一般', '良好', '极佳', '超棒']
			const levelColors = [
				'linear-gradient(135deg, #9E9E9E 0%, #BDBDBD 100%)',
				'linear-gradient(135deg, #2196F3 0%, #64B5F6 100%)',
				'linear-gradient(135deg, #4CAF50 0%, #81C784 100%)',
				'linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%)'
			]
			
			const levelIndex = Math.floor(scores.overall / 25)
			const level = levels[Math.min(levelIndex, levels.length - 1)]
			const levelColor = levelColors[Math.min(levelIndex, levelColors.length - 1)]
			
			const advices = [
				'今天是展现个人魅力的好时机，保持积极心态！',
				'适合与他人合作，团队协作能带来意想不到的收获。',
				'财运不错，但要理性消费，避免冲动购买。',
				'健康运势平稳，适量运动有助提升整体状态。',
				'感情方面有新的进展，单身者有机会遇到心仪对象。'
			]
			
			return {
				overallScore: scores.overall,
				level: level,
				levelColor: levelColor,
				details: [
					{
						label: '爱情运',
						icon: '💕',
						score: scores.love,
						color: 'linear-gradient(135deg, #E91E63 0%, #FF6B9D 100%)'
					},
					{
						label: '事业运',
						icon: '💼',
						score: scores.career,
						color: 'linear-gradient(135deg, #2196F3 0%, #64B5F6 100%)'
					},
					{
						label: '财运',
						icon: '💰',
						score: scores.wealth,
						color: 'linear-gradient(135deg, #FF9800 0%, #FFB74D 100%)'
					},
					{
						label: '健康运',
						icon: '🌿',
						score: scores.health,
						color: 'linear-gradient(135deg, #4CAF50 0%, #81C784 100%)'
					}
				],
				advice: advices[Math.floor(Math.random() * advices.length)],
				source: 'local'
			}
		},


		// 重新测算
		handleRetest() {
			this.hasResult = false
			this.birthday = ''
			this.birthdayDisplay = '请选择生日'
			this.currentConstellation = null
			this.todayFortune = null
			this.constellationMatch = null
			this.luckyElements = []
			this.constellationTraits = []
		},

		// 返回
		goBack() {
			uni.navigateBack({
				delta: 1
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.constellation-page {
	min-height: 100vh;
	background: linear-gradient(180deg, #FFF9F9 0%, #FFFFFF 50%);
	padding-bottom: 40rpx;
}

/* 自定义导航栏 */
.custom-nav {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 88rpx;
	padding: 0 30rpx;
	background-color: #FFFFFF;
	border-bottom: 1rpx solid #F0F0F0;

	.nav-left {
		width: 80rpx;

		.back-icon {
			font-size: 40rpx;
			color: #333333;
		}
	}

	.nav-title {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		font-size: 34rpx;
		font-weight: 600;
		color: #333333;
	}

	.nav-right {
		width: 80rpx;
	}
}

/* 生日选择区域 */
.birthday-selection-section {
	padding: 60rpx 30rpx;
	display: flex;
	flex-direction: column;
	align-items: center;

	.selection-card {
		width: 100%;
		background-color: #FFFFFF;
		border-radius: 30rpx;
		padding: 60rpx 40rpx;
		box-shadow: 0 8rpx 30rpx rgba(156, 39, 176, 0.1);
		text-align: center;

		.card-title {
			font-size: 40rpx;
			font-weight: bold;
			color: #333333;
			margin-bottom: 15rpx;
		}

		.card-subtitle {
			font-size: 26rpx;
			color: #999999;
			margin-bottom: 50rpx;
		}

		.birthday-picker-wrapper {
			margin-bottom: 30rpx;
			text-align: left;
			
			.picker-label {
				font-size: 28rpx;
				color: #666666;
				margin-bottom: 15rpx;
			}

			.birthday-display {
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #F8F8F8;
				border-radius: 20rpx;
				padding: 25rpx 30rpx;
				border: 2rpx solid #9C27B0;
				transition: all 0.3s;

				.birthday-icon {
					font-size: 40rpx;
					margin-right: 15rpx;
				}

				.birthday-text {
					font-size: 32rpx;
					color: #333333;
					font-weight: 500;
				}
			}
			
			&:active .birthday-display {
				background-color: #F3E5F5;
				transform: scale(0.98);
			}
		}

		.constellation-preview {
			background: linear-gradient(135deg, #F3E5F5 0%, #E1BEE7 100%);
			border-radius: 20rpx;
			padding: 30rpx;
			margin-bottom: 30rpx;
			text-align: center;

			.constellation-info {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 15rpx;

				.constellation-emoji {
					font-size: 60rpx;
					margin-right: 15rpx;
				}

				.constellation-name {
					font-size: 36rpx;
					color: #9C27B0;
					font-weight: 600;
				}
			}

			.constellation-desc {
				font-size: 24rpx;
				color: #666666;
			}
		}

		.submit-btn {
			width: 100%;
			height: 90rpx;
			background: linear-gradient(135deg, #9C27B0 0%, #E1BEE7 100%);
			color: #FFFFFF;
			font-size: 32rpx;
			font-weight: 600;
			border-radius: 45rpx;
			border: none;
			box-shadow: 0 8rpx 20rpx rgba(156, 39, 176, 0.3);

			&:disabled {
				opacity: 0.5;
			}

			&:active:not(:disabled) {
				opacity: 0.9;
			}
		}
	}

	.constellation-icons {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 20rpx;
		margin-top: 50rpx;
		opacity: 0.3;

		.constellation-icon {
			font-size: 48rpx;
			animation: float 3s ease-in-out infinite;

			&:nth-child(2n) {
				animation-delay: 0.5s;
			}

			&:nth-child(3n) {
				animation-delay: 1s;
			}
		}
	}
}

@keyframes float {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10rpx);
	}
}

/* 结果区域 */
.result-section {
	padding: 30rpx 25rpx 40rpx 25rpx;
}

/* 星座标题卡片 */
.constellation-title-card {
	background: linear-gradient(135deg, #9C27B0 0%, #E1BEE7 100%);
	border-radius: 32rpx;
	padding: 50rpx 40rpx;
	text-align: center;
	box-shadow: 0 12rpx 40rpx rgba(156, 39, 176, 0.25);
	margin-bottom: 40rpx;

	.constellation-header {
		.constellation-main {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 30rpx;
			
			.constellation-emoji-large {
				font-size: 120rpx;
				margin-right: 30rpx;
			}
			
			.constellation-info-main {
				display: flex;
				flex-direction: column;
				align-items: flex-start;

				.constellation-name-large {
					font-size: 42rpx;
					font-weight: bold;
					color: #FFFFFF;
					margin-bottom: 10rpx;
				}

				.constellation-period {
					font-size: 24rpx;
					color: rgba(255, 255, 255, 0.8);
				}
			}
		}

		.constellation-traits {
			display: flex;
			justify-content: center;
			gap: 15rpx;
			flex-wrap: wrap;

			.trait-tag {
				background-color: rgba(255, 255, 255, 0.2);
				color: #FFFFFF;
				font-size: 24rpx;
				padding: 8rpx 16rpx;
				border-radius: 20rpx;
				backdrop-filter: blur(10rpx);
			}
		}
	}
}

/* 通用标题 */
.section-title {
	font-size: 36rpx;
	font-weight: 600;
	color: #333333;
	margin-bottom: 25rpx;
	padding: 0 10rpx;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

/* 今日运势 */
.fortune-section {
	margin-bottom: 40rpx;
	
	.fortune-card {
		background-color: #FFFFFF;
		border-radius: 24rpx;
		padding: 40rpx 30rpx;
		box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.08);
		
		.fortune-summary {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;
			padding-bottom: 25rpx;
			border-bottom: 1rpx solid #F0F0F0;

			.fortune-score-wrapper {
				display: flex;
				align-items: baseline;

				.fortune-score {
					font-size: 72rpx;
					font-weight: bold;
					color: #9C27B0;
					line-height: 1;
				}

				.fortune-unit {
					font-size: 28rpx;
					color: #666666;
					margin-left: 8rpx;
				}
			}

			.fortune-level {
				padding: 12rpx 30rpx;
				border-radius: 30rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				font-weight: 600;
			}
		}

		.fortune-details {
			margin-bottom: 30rpx;

			.fortune-item {
				margin-bottom: 25rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.fortune-item-header {
					display: flex;
					align-items: center;
					margin-bottom: 12rpx;

					.fortune-item-icon {
						font-size: 28rpx;
						margin-right: 12rpx;
					}

					.fortune-item-label {
						font-size: 28rpx;
						color: #333333;
						font-weight: 500;
					}
				}

				.fortune-score-bar {
					display: flex;
					align-items: center;

					.score-bar {
						flex: 1;
						height: 12rpx;
						background-color: #F0F0F0;
						border-radius: 6rpx;
						overflow: hidden;
						margin-right: 15rpx;

						.score-fill {
							height: 100%;
							border-radius: 6rpx;
							transition: width 0.6s ease;
						}
					}

					.score-text {
						font-size: 24rpx;
						color: #9C27B0;
						font-weight: 600;
						min-width: 50rpx;
						text-align: right;
					}
				}
			}
		}

		.fortune-advice {
			background: linear-gradient(135deg, #F3E5F5 0%, #FFEEF5 100%);
			border-radius: 15rpx;
			padding: 25rpx;

			.advice-label {
				font-size: 26rpx;
				color: #9C27B0;
				font-weight: 600;
				display: block;
				margin-bottom: 12rpx;
			}

			.advice-content {
				font-size: 28rpx;
				color: #333333;
				line-height: 1.6;
			}
		}
	}
}

/* 星座匹配 */
.match-section {
	margin-bottom: 40rpx;
	
	.match-card {
		background-color: #FFFFFF;
		border-radius: 24rpx;
		padding: 30rpx;
		box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.08);
		
		.match-best, .match-good {
			margin-bottom: 30rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.match-category-title {
				font-size: 30rpx;
				color: #333333;
				font-weight: 600;
				margin-bottom: 20rpx;
				display: block;
			}

			.match-constellation-list {
				display: flex;
				gap: 15rpx;
				flex-wrap: wrap;

				.match-constellation-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 20rpx 15rpx;
					border-radius: 15rpx;
					min-width: 120rpx;

					&.best {
						background: linear-gradient(135deg, #FFE5EE 0%, #FFF0F5 100%);
						border: 2rpx solid #E91E63;
					}

					&.good {
						background: linear-gradient(135deg, #E3F2FD 0%, #F0F8FF 100%);
						border: 2rpx solid #2196F3;
					}

					.match-emoji {
						font-size: 36rpx;
						margin-bottom: 8rpx;
					}

					.match-name {
						font-size: 24rpx;
						color: #333333;
						margin-bottom: 5rpx;
					}

					.match-score {
						font-size: 22rpx;
						font-weight: 600;
					}

					&.best .match-score {
						color: #E91E63;
					}

					&.good .match-score {
						color: #2196F3;
					}
				}
			}
		}
	}
}

/* 幸运元素 */
.lucky-section {
	margin-bottom: 40rpx;

	.lucky-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;

		.lucky-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #FFFFFF;
			border-radius: 15rpx;
			padding: 30rpx 20rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);

			.lucky-icon-wrapper {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 15rpx;

				.lucky-icon {
					font-size: 40rpx;
				}
			}

			.lucky-label {
				font-size: 24rpx;
				color: #999999;
				margin-bottom: 8rpx;
			}

			.lucky-value {
				font-size: 28rpx;
				color: #333333;
				font-weight: 600;
			}
		}
	}
}

/* 星座特质详解 */
.traits-section {
	margin-bottom: 40rpx;
	
	.traits-card {
		background-color: #FFFFFF;
		border-radius: 24rpx;
		padding: 0;
		box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.08);
		overflow: hidden;
		
		.trait-detail {
			padding: 30rpx;
			border-bottom: 1rpx solid #F5F5F5;
			
			&:last-child {
				border-bottom: none;
			}
			
			.trait-header {
				display: flex;
				align-items: center;
				margin-bottom: 15rpx;
				
				.trait-icon {
					font-size: 32rpx;
					margin-right: 15rpx;
				}
				
				.trait-title {
					font-size: 30rpx;
					color: #9C27B0;
					font-weight: 600;
				}
			}
			
			.trait-content {
				font-size: 28rpx;
				color: #333333;
				line-height: 1.8;
				text-align: justify;
			}
		}
	}
}

/* 重新测算 */
.retest-btn {
	text-align: center;
	padding: 30rpx 40rpx;
	font-size: 30rpx;
	color: #666666;
	background-color: #F8F8F8;
	border-radius: 25rpx;
	margin: 20rpx 20rpx 30rpx 20rpx;
	border: 2rpx solid #E0E0E0;

	&:active {
		color: #9C27B0;
		background-color: #F3E5F5;
		border-color: #9C27B0;
	}
}

/* 数据来源说明 */
.data-source {
	display: flex;
	align-items: center;
	background-color: #E3F2FD;
	border-radius: 20rpx;
	padding: 25rpx 30rpx;
	margin-bottom: 30rpx;
	transition: all 0.3s;

	.source-icon {
		font-size: 32rpx;
		margin-right: 15rpx;
	}

	.source-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8rpx;

		.source-text {
			font-size: 28rpx;
			color: #1976D2;
			font-weight: 500;
		}

		.source-time {
			font-size: 24rpx;
			color: #64B5F6;
		}
	}

	// API数据特殊样式
	&.api-source {
		background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
		border-left: 6rpx solid #4CAF50;

		.source-icon {
			color: #4CAF50;
		}

		.source-text {
			color: #2E7D32;
		}

		.source-time {
			color: #66BB6A;
		}
	}
}

/* 免责声明 */
.disclaimer {
	background-color: #FFF3E0;
	border-radius: 20rpx;
	padding: 30rpx;
	border-left: 6rpx solid #FF9800;
	margin: 0 10rpx;

	.disclaimer-title {
		font-size: 30rpx;
		font-weight: 600;
		color: #F57C00;
		margin-bottom: 20rpx;
	}

	.disclaimer-text {
		font-size: 26rpx;
		color: #666666;
		line-height: 2.0;
		text-align: justify;
	}
}

/* 底部占位 */
.bottom-placeholder {
	height: 60rpx;
}
</style>