xiangqinxiangmu/LiangZhiYUMao/pages/astrology/bazi.vue

<template>
	<view class="bazi-container">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="navbar-content">
				<view class="navbar-left" @click="goBack">
					<text class="back-icon">←</text>
				</view>
				<view class="navbar-title">八字测算</view>
				<view class="navbar-right"></view>
			</view>
		</view>

		<!-- 输入区域 -->
		<view class="input-section" v-if="!hasResult">
			<view class="section-card">
				<view class="section-title">📅 出生信息</view>
				<view class="input-group">
					<view class="input-item">
						<text class="input-label">出生日期</text>
						<picker 
							mode="date" 
							:value="birthDate"
							@change="onDateChange"
							class="date-picker"
						>
							<view class="picker-display">
								{{ birthDateDisplay }}
							</view>
						</picker>
					</view>
					
					<view class="input-item">
						<text class="input-label">出生时辰</text>
						<picker 
							:range="timeRanges"
							:value="timeIndex"
							@change="onTimeChange"
							class="time-picker"
						>
							<view class="picker-display">
								{{ timeDisplay }}
							</view>
						</picker>
					</view>
				</view>
				
				<button class="calculate-btn" @click="calculateBazi">
					开始测算
				</button>
			</view>
		</view>

		<!-- 结果区域 -->
		<view class="result-section" v-if="hasResult">
			<!-- 八字信息 -->
			<view class="bazi-info-card">
				<view class="section-title">🔮 您的八字</view>
				<view class="bazi-display">
					<view class="bazi-pillar" v-for="(pillar, key) in baziResult" :key="key">
						<view class="pillar-label">{{ getPillarLabel(key) }}</view>
						<view class="pillar-value">
							<text class="gan">{{ pillar.gan }}</text>
							<text class="zhi">{{ pillar.zhi }}</text>
						</view>
						<view class="pillar-wuxing">{{ pillar.wuxing }}</view>
					</view>
				</view>
				
				<view class="birth-info">
					<view class="info-item">
						<text class="info-icon">🐉</text>
						<text class="info-text">生肖：{{ birthInfo.shengxiao }}</text>
					</view>
					<view class="info-item">
						<text class="info-icon">🎵</text>
						<text class="info-text">纳音：{{ birthInfo.nayin }}</text>
					</view>
					<view class="info-item">
						<text class="info-icon">⚡</text>
						<text class="info-text">日主：{{ baziAnalysis.riganWuxing }}{{ getDayGan() }}</text>
					</view>
				</view>
			</view>

			<!-- 五行分析 -->
			<view class="wuxing-analysis-card">
				<view class="section-title">🔥 五行分析</view>
				<view class="wuxing-chart">
					<view 
						class="wuxing-item" 
						v-for="(count, wuxing) in baziAnalysis.analysis.wuxingCount" 
						:key="wuxing"
					>
						<view class="wuxing-icon" :class="wuxing === '金' ? 'wuxing-jin' : wuxing === '木' ? 'wuxing-mu' : wuxing === '水' ? 'wuxing-shui' : wuxing === '火' ? 'wuxing-huo' : wuxing === '土' ? 'wuxing-tu' : 'wuxing-default'">{{ getWuxingIcon(wuxing) }}</view>
						<view class="wuxing-name">{{ wuxing }}</view>
						<view class="wuxing-count">{{ count }}</view>
						<view class="wuxing-bar">
							<view class="wuxing-progress" :style="{width: (count / 8) * 100 + '%'}"></view>
						</view>
					</view>
				</view>
			</view>

			<!-- 命理分析 -->
			<view class="analysis-card">
				<view class="section-title">📊 命理分析</view>
				<view class="analysis-content">
					<view class="analysis-item">
						<view class="analysis-header">
							<text class="analysis-icon">💪</text>
							<text class="analysis-title">日主强弱</text>
						</view>
						<text class="analysis-desc">{{ baziAnalysis.analysis.qiangRuo.type }}</text>
						<text class="analysis-detail">{{ baziAnalysis.analysis.qiangRuo.description }}</text>
					</view>
					
					<view class="analysis-item">
						<view class="analysis-header">
							<text class="analysis-icon">🌟</text>
							<text class="analysis-title">用神建议</text>
						</view>
						<text class="analysis-desc">{{ baziAnalysis.analysis.yongshen.primary }}</text>
						<text class="analysis-detail">{{ baziAnalysis.analysis.yongshen.description }}</text>
					</view>
				</view>
			</view>

			<!-- 性格特征 -->
			<view class="personality-card">
				<view class="section-title">🎭 性格特征</view>
				<view class="personality-tags">
					<view 
						class="personality-tag" 
						v-for="(trait, index) in baziAnalysis.analysis.personality" 
						:key="index"
					>
						{{ trait }}
					</view>
				</view>
			</view>

			<!-- 命理总结 -->
			<view class="summary-card">
				<view class="section-title">📝 命理总结</view>
				<text class="summary-text">{{ baziAnalysis.analysis.summary }}</text>
			</view>

			<!-- 验证信息 -->
			<view class="validation-card" v-if="baziAnalysis && baziAnalysis.validation">
				<view class="section-title">🔍 测算验证</view>
				<view class="validation-content">
					<view class="validation-status" :class="validationStatusClass">
						<text class="status-icon">{{ validationIcon }}</text>
						<text class="status-text">{{ validationText }}</text>
					</view>
					<view class="validation-details" v-if="baziAnalysis.validation.differences && baziAnalysis.validation.differences.length > 0">
						<text class="details-title">算法对比:</text>
						<view class="difference-item" v-for="(diff, index) in baziAnalysis.validation.differences" :key="index">
							<text class="difference-text">{{ diff }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 专业版信息（极速数据API特有） -->
			<view class="professional-card" v-if="baziAnalysis && baziAnalysis.apiProvider === 'jisuapi'">
				<view class="section-title">🏆 专业版信息</view>
				<view class="professional-content">
					<!-- 个人信息 -->
					<view class="professional-section">
						<view class="section-subtitle">个人信息</view>
						<view class="info-grid">
							<view class="info-item" v-if="baziAnalysis.animal">
								<text class="info-icon">🐉</text>
								<text class="info-label">生肖:</text>
								<text class="info-value">{{ baziAnalysis.animal }}</text>
							</view>
							<view class="info-item" v-if="baziAnalysis.taiyuan">
								<text class="info-icon">🎭</text>
								<text class="info-label">胎元:</text>
								<text class="info-value">{{ baziAnalysis.taiyuan }}</text>
							</view>
							<view class="info-item" v-if="baziAnalysis.minggong">
								<text class="info-icon">🏠</text>
								<text class="info-label">命宫:</text>
								<text class="info-value">{{ baziAnalysis.minggong }}</text>
							</view>
						</view>
					</view>

					<!-- 农历信息 -->
					<view class="professional-section" v-if="baziAnalysis.lunar">
						<view class="section-subtitle">农历对照</view>
						<view class="lunar-info">
							<text class="lunar-text">
								农历{{ baziAnalysis.lunar.year }}年{{ baziAnalysis.lunar.month }}月{{ baziAnalysis.lunar.day }}日{{ baziAnalysis.lunar.hour }}时
							</text>
						</view>
					</view>

					<!-- 节气信息 -->
					<view class="professional-section" v-if="baziAnalysis.jieqi">
						<view class="section-subtitle">节气信息</view>
						<view class="jieqi-info">
							<view class="jieqi-item" v-if="baziAnalysis.jieqi.prev">
								<text class="jieqi-label">上一节气:</text>
								<text class="jieqi-value">{{ baziAnalysis.jieqi.prev.jieqiname }} ({{ baziAnalysis.jieqi.prev.date }})</text>
							</view>
							<view class="jieqi-item" v-if="baziAnalysis.jieqi.next">
								<text class="jieqi-label">下一节气:</text>
								<text class="jieqi-value">{{ baziAnalysis.jieqi.next.jieqiname }} ({{ baziAnalysis.jieqi.next.date }})</text>
							</view>
						</view>
					</view>

					<!-- 神煞信息 -->
					<view class="professional-section" v-if="baziAnalysis.shensha && baziAnalysis.shensha.length > 0">
						<view class="section-subtitle">神煞分析</view>
						<view class="shensha-grid">
							<view class="shensha-group" v-for="(group, index) in baziAnalysis.shensha" :key="index">
								<view class="shensha-item" v-for="(shensha, idx) in group" :key="idx">
									{{ shensha }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 建议指导 -->
			<view class="suggestions-card">
				<view class="section-title">💡 人生建议</view>
				<view class="suggestions-list">
					<view 
						class="suggestion-item" 
						v-for="(suggestion, index) in suggestions" 
						:key="index"
					>
						<text class="suggestion-icon">✨</text>
						<text class="suggestion-text">{{ suggestion }}</text>
					</view>
				</view>
			</view>

			<!-- 配对入口 -->
			<view class="match-entry-card">
				<view class="section-title">💕 八字配对</view>
				<view class="match-entry-content">
					<view class="match-description">
						想知道什么样的人与您最有缘分吗？点击下方开始八字配对测试！
					</view>
					<button class="match-btn" @click="goBaziMatch">
						开始八字配对
					</button>
				</view>
			</view>

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

<script>
import baziUtil from '@/utils/bazi.js'

export default {
	data() {
		return {
			// 输入数据
			birthDate: '',
			birthDateDisplay: '请选择出生日期',
			timeIndex: 0,
			timeDisplay: '子时 (23:00-01:00)',
			
			// 时辰选择器数据
			timeRanges: [
				'子时 (23:00-01:00)', 
				'丑时 (01:00-03:00)', 
				'寅时 (03:00-05:00)',
				'卯时 (05:00-07:00)', 
				'辰时 (07:00-09:00)', 
				'巳时 (09:00-11:00)',
				'午时 (11:00-13:00)', 
				'未时 (13:00-15:00)', 
				'申时 (15:00-17:00)',
				'酉时 (17:00-19:00)', 
				'戌时 (19:00-21:00)', 
				'亥时 (21:00-23:00)'
			],
			
			// 结果数据
			hasResult: false,
			baziResult: null,
			baziAnalysis: null,
			birthInfo: null,
			suggestions: []
		}
	},
	
	computed: {
		// 获取时辰对应的小时数
		selectedHour() {
			const hourMap = [23, 1, 3, 5, 7, 9, 11, 13, 15, 17, 19, 21]
			return hourMap[this.timeIndex]
		},

		// 验证状态样式类
		validationStatusClass() {
			if (!this.baziAnalysis || !this.baziAnalysis.validation) return ''
			
			const status = this.baziAnalysis.validation.status
			if (status === 'verified') return 'status-verified'
			if (status === 'api_corrected') return 'status-corrected'
			return 'status-local'
		},

		// 验证图标
		validationIcon() {
			if (!this.baziAnalysis || !this.baziAnalysis.validation) return '🔍'
			
			const status = this.baziAnalysis.validation.status
			if (status === 'verified') return '✅'
			if (status === 'api_corrected') return '🔧'
			return '💡'
		},

		// 验证文本
		validationText() {
			if (!this.baziAnalysis || !this.baziAnalysis.validation) return '本地算法'
			
			const validation = this.baziAnalysis.validation
			const accuracy = Math.round(validation.accuracy * 100)
			
			if (validation.status === 'verified') {
				return `专业API验证通过 (准确度${accuracy}%)`
			} else if (validation.status === 'api_corrected') {
				return `已使用专业API修正结果`
			} else {
				return `本地算法 (建议配置专业API)`
			}
		}
	},
	
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack()
		},
		
		// 日期选择
		onDateChange(e) {
			this.birthDate = e.detail.value
			this.birthDateDisplay = e.detail.value
		},
		
		// 时辰选择
		onTimeChange(e) {
			this.timeIndex = e.detail.value
			this.timeDisplay = this.timeRanges[e.detail.value]
		},
		
		// 开始测算
		async calculateBazi() {
			if (!this.birthDate) {
				uni.showToast({
					title: '请选择出生日期',
					icon: 'none'
				})
				return
			}
			
			uni.showLoading({
				title: '测算中...',
				mask: true
			})
			
			try {
				console.log('开始八字测算')
				console.log('出生日期:', this.birthDate, '时辰:', this.timeDisplay)
				
				// 计算八字（使用增强版API + 本地算法）
				const birthDateObj = new Date(this.birthDate + ' 12:00:00')
				const baziData = await baziUtil.calculateEnhancedBaZi(birthDateObj, this.selectedHour)
				
				console.log('八字计算结果:', baziData)
				
				// 获取建议
				const suggestions = baziUtil.getBaziSuggestions(baziData)
				
				// 保存结果
				this.baziResult = {
					year: baziData.year,
					month: baziData.month,
					day: baziData.day,
					hour: baziData.hour
				}
				this.baziAnalysis = baziData
				this.birthInfo = baziData.birthInfo
				this.suggestions = suggestions
				this.hasResult = true
				
				console.log('八字测算完成')
				
				// 保存到本地存储
				uni.setStorageSync('baziResult', {
					birthDate: this.birthDate,
					timeIndex: this.timeIndex,
					baziData: baziData,
					lastUpdate: new Date().getTime()
				})
				
			} catch (error) {
				console.error('八字测算异常:', error)
				uni.showToast({
					title: '测算异常，请重试',
					icon: 'none'
				})
			} finally {
				uni.hideLoading()
			}
		},
		
		// 重新测算
		resetTest() {
			this.hasResult = false
			this.baziResult = null
			this.baziAnalysis = null
			this.birthInfo = null
			this.suggestions = []
		},
		
		// 跳转到八字配对
		goBaziMatch() {
			// 将当前八字数据传递给配对页面
			const baziData = {
				baziAnalysis: this.baziAnalysis,
				birthDate: this.birthDate,
				timeIndex: this.timeIndex
			}
			
			uni.navigateTo({
				url: '/pages/astrology/bazi-match',
				success: () => {
					// 通过事件或存储传递数据
					uni.setStorageSync('currentBazi', baziData)
				}
			})
		},
		
		// 获取柱标签
		getPillarLabel(key) {
			const labels = {
				'year': '年柱',
				'month': '月柱', 
				'day': '日柱',
				'hour': '时柱'
			}
			return labels[key] || key
		},
		
		// 获取日干
		getDayGan() {
			return this.baziResult ? this.baziResult.day.gan : ''
		},
		
		// 获取五行图标
		getWuxingIcon(wuxing) {
			if (wuxing === '金') return '🔱'
			if (wuxing === '木') return '🌳'
			if (wuxing === '水') return '💧'
			if (wuxing === '火') return '🔥'
			if (wuxing === '土') return '🏔️'
			return '⚪'
		},
	},
	
	onLoad() {
		// 尝试恢复之前的计算结果
		const savedResult = uni.getStorageSync('baziResult')
		if (savedResult && savedResult.baziData) {
			const timeDiff = new Date().getTime() - savedResult.lastUpdate
			// 如果在1小时内，可以恢复结果
			if (timeDiff < 60 * 60 * 1000) {
				this.birthDate = savedResult.birthDate
				this.birthDateDisplay = savedResult.birthDate
				this.timeIndex = savedResult.timeIndex
				this.timeDisplay = this.timeRanges[savedResult.timeIndex]
				
				const baziData = savedResult.baziData
				this.baziResult = {
					year: baziData.year,
					month: baziData.month,
					day: baziData.day,
					hour: baziData.hour
				}
				this.baziAnalysis = baziData
				this.birthInfo = baziData.birthInfo
				this.suggestions = baziUtil.getBaziSuggestions(baziData)
				this.hasResult = true
				
				console.log('恢复之前的八字测算结果')
			}
		}
	}
}
</script>

<style scoped>
.bazi-container {
	min-height: 100vh;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding-bottom: 40rpx;
}

/* 自定义导航栏 */
.custom-navbar {
	background: rgba(255, 255, 255, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
}

.navbar-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 88rpx;
	padding: 0 30rpx;
	padding-top: 40rpx;
}

.navbar-left {
	width: 80rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.back-icon {
	font-size: 36rpx;
	color: #ffffff;
	font-weight: bold;
}

.navbar-title {
	flex: 1;
	text-align: center;
	font-size: 36rpx;
	font-weight: bold;
	color: #ffffff;
}

.navbar-right {
	width: 80rpx;
}

/* 输入区域 */
.input-section {
	padding: 40rpx 30rpx;
	padding-top: 168rpx;
}

.section-card {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 24rpx;
	padding: 40rpx 30rpx;
	box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.1);
}

.section-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333333;
	margin-bottom: 40rpx;
	text-align: center;
}

.input-group {
	margin-bottom: 60rpx;
}

.input-item {
	margin-bottom: 40rpx;
}

.input-label {
	font-size: 32rpx;
	font-weight: bold;
	color: #666666;
	display: block;
	margin-bottom: 20rpx;
}

.date-picker,
.time-picker {
	width: 100%;
}

.picker-display {
	background: #f8f9fa;
	border: 2rpx solid #e9ecef;
	border-radius: 16rpx;
	padding: 24rpx 30rpx;
	font-size: 32rpx;
	color: #333333;
	text-align: center;
}

.calculate-btn {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #ffffff;
	border: none;
	border-radius: 50rpx;
	height: 100rpx;
	font-size: 36rpx;
	font-weight: bold;
	margin-top: 40rpx;
}

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

.bazi-info-card,
.wuxing-analysis-card,
.analysis-card,
.personality-card,
.summary-card,
.validation-card,
.professional-card,
.suggestions-card,
.match-entry-card {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 24rpx;
	padding: 40rpx 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.1);
}

/* 八字显示 */
.bazi-display {
	display: flex;
	justify-content: space-between;
	margin-bottom: 40rpx;
}

.bazi-pillar {
	flex: 1;
	text-align: center;
}

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

.pillar-value {
	margin-bottom: 10rpx;
}

.gan,
.zhi {
	display: inline-block;
	width: 60rpx;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	font-size: 32rpx;
	font-weight: bold;
	color: #ffffff;
	border-radius: 50%;
	margin: 0 5rpx;
}

.gan {
	background: linear-gradient(135deg, #FF6B9D 0%, #FFA5C6 100%);
}

.zhi {
	background: linear-gradient(135deg, #4CAF50 0%, #81C784 100%);
}

.pillar-wuxing {
	font-size: 24rpx;
	color: #666666;
}

.birth-info {
	padding-top: 30rpx;
	border-top: 1rpx solid #f0f0f0;
}

.info-item {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
}

.info-icon {
	font-size: 28rpx;
	margin-right: 20rpx;
}

.info-text {
	font-size: 28rpx;
	color: #666666;
}

/* 五行分析 */
.wuxing-chart {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
}

.wuxing-item {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.wuxing-icon {
	width: 60rpx;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	font-size: 32rpx;
	border-radius: 50%;
	color: #ffffff;
}

.wuxing-jin { background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%); }
.wuxing-mu { background: linear-gradient(135deg, #4CAF50 0%, #81C784 100%); }
.wuxing-shui { background: linear-gradient(135deg, #2196F3 0%, #64B5F6 100%); }
.wuxing-huo { background: linear-gradient(135deg, #F44336 0%, #EF5350 100%); }
.wuxing-tu { background: linear-gradient(135deg, #8BC34A 0%, #AED581 100%); }

.wuxing-name {
	width: 60rpx;
	font-size: 28rpx;
	font-weight: bold;
	color: #333333;
}

.wuxing-count {
	width: 40rpx;
	font-size: 28rpx;
	color: #666666;
	text-align: center;
}

.wuxing-bar {
	flex: 1;
	height: 16rpx;
	background: #f0f0f0;
	border-radius: 8rpx;
	overflow: hidden;
}

.wuxing-progress {
	height: 100%;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 8rpx;
	transition: width 0.3s ease;
}

/* 命理分析 */
.analysis-content {
	display: flex;
	flex-direction: column;
	gap: 30rpx;
}

.analysis-item {
	padding: 30rpx;
	background: #f8f9fa;
	border-radius: 16rpx;
}

.analysis-header {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
}

.analysis-icon {
	font-size: 28rpx;
	margin-right: 16rpx;
}

.analysis-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}

.analysis-desc {
	font-size: 30rpx;
	font-weight: bold;
	color: #667eea;
	margin-bottom: 10rpx;
}

.analysis-detail {
	font-size: 28rpx;
	color: #666666;
	line-height: 1.6;
}

/* 性格特征 */
.personality-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
}

.personality-tag {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #ffffff;
	padding: 16rpx 32rpx;
	border-radius: 40rpx;
	font-size: 28rpx;
	font-weight: bold;
}

/* 总结文本 */
.summary-text {
	font-size: 30rpx;
	color: #333333;
	line-height: 1.8;
	text-align: justify;
}

/* 建议列表 */
.suggestions-list {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
}

.suggestion-item {
	display: flex;
	align-items: flex-start;
	gap: 20rpx;
}

.suggestion-icon {
	font-size: 28rpx;
	margin-top: 6rpx;
}

.suggestion-text {
	flex: 1;
	font-size: 28rpx;
	color: #666666;
	line-height: 1.6;
}

/* 配对入口 */
.match-entry-content {
	text-align: center;
}

.match-description {
	font-size: 30rpx;
	color: #666666;
	line-height: 1.6;
	margin-bottom: 40rpx;
}

.match-btn {
	background: linear-gradient(135deg, #FF6B9D 0%, #FFA5C6 100%);
	color: #ffffff;
	border: none;
	border-radius: 50rpx;
	height: 88rpx;
	font-size: 32rpx;
	font-weight: bold;
}

/* 验证信息 */
.validation-content {
	text-align: center;
}

.validation-status {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24rpx 30rpx;
	border-radius: 16rpx;
	margin-bottom: 20rpx;
}

.status-verified {
	background: linear-gradient(135deg, #4CAF50 0%, #81C784 100%);
	color: #ffffff;
}

.status-corrected {
	background: linear-gradient(135deg, #FF9800 0%, #FFB74D 100%);
	color: #ffffff;
}

.status-local {
	background: linear-gradient(135deg, #2196F3 0%, #64B5F6 100%);
	color: #ffffff;
}

.status-icon {
	font-size: 32rpx;
	margin-right: 16rpx;
}

.status-text {
	font-size: 28rpx;
	font-weight: bold;
}

.validation-details {
	margin-top: 20rpx;
	padding: 20rpx;
	background: #f8f9fa;
	border-radius: 12rpx;
}

.details-title {
	font-size: 26rpx;
	color: #666666;
	font-weight: bold;
	margin-bottom: 16rpx;
	display: block;
}

.difference-item {
	margin-bottom: 12rpx;
}

.difference-text {
	font-size: 24rpx;
	color: #999999;
	line-height: 1.4;
}

/* 专业版信息 */
.professional-content {
	display: flex;
	flex-direction: column;
	gap: 30rpx;
}

.professional-section {
	padding: 25rpx;
	background: #f8f9fa;
	border-radius: 16rpx;
}

.section-subtitle {
	font-size: 30rpx;
	font-weight: bold;
	color: #667eea;
	margin-bottom: 20rpx;
	text-align: center;
}

.info-grid {
	display: flex;
	flex-direction: column;
	gap: 15rpx;
}

.info-item {
	display: flex;
	align-items: center;
	gap: 15rpx;
}

.info-icon {
	font-size: 24rpx;
	width: 30rpx;
}

.info-label {
	font-size: 28rpx;
	color: #666666;
	font-weight: bold;
	min-width: 80rpx;
}

.info-value {
	font-size: 28rpx;
	color: #333333;
	font-weight: bold;
}

.lunar-info {
	text-align: center;
}

.lunar-text {
	font-size: 30rpx;
	color: #667eea;
	font-weight: bold;
}

.jieqi-info {
	display: flex;
	flex-direction: column;
	gap: 12rpx;
}

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

.jieqi-label {
	font-size: 26rpx;
	color: #666666;
}

.jieqi-value {
	font-size: 26rpx;
	color: #333333;
	font-weight: bold;
}

.shensha-grid {
	display: flex;
	flex-direction: column;
	gap: 15rpx;
}

.shensha-group {
	display: flex;
	flex-wrap: wrap;
	gap: 10rpx;
}

.shensha-item {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #ffffff;
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
	font-weight: bold;
}

/* 重新测算按钮 */
.retest-btn {
	background: rgba(255, 255, 255, 0.2);
	color: #ffffff;
	border: 2rpx solid rgba(255, 255, 255, 0.3);
	border-radius: 50rpx;
	height: 80rpx;
	line-height: 76rpx;
	text-align: center;
	font-size: 32rpx;
	font-weight: bold;
	margin: 40rpx 30rpx;
}
</style>