<template>
	<un-pages
		:show-nav-bar="true"
		nav-bar-title="关于我们"
		:show-back="true"
		:show-tab-bar="false"
	>
		<view class="about-container">
			<!-- Logo和应用信息 -->
			<view class="app-info">
				<view class="app-logo">
					<text class="logo-icon">📊</text>
				</view>
				<text class="app-name">家庭记账</text>
				<text class="app-version">版本 1.0.0</text>
			</view>

			<!-- 功能介绍 -->
			<view class="feature-section">
				<view class="section-title">产品介绍</view>
				<view class="feature-card">
					<text class="feature-text">
						家庭记账是一款简单易用的个人及家庭财务管理应用。我们致力于帮助用户轻松记录每一笔收支，合理规划财务，实现财富增长。
					</text>
				</view>
			</view>

			<!-- 核心功能 -->
			<view class="feature-section">
				<view class="section-title">核心功能</view>
				<view class="feature-grid">
					<view class="feature-item">
						<view class="feature-icon-wrapper" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
							<uni-icons type="compose" size="24" color="#fff"></uni-icons>
						</view>
						<text class="feature-name">快速记账</text>
						<text class="feature-desc">简单快捷记录每一笔收支</text>
					</view>
					<view class="feature-item">
						<view class="feature-icon-wrapper" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
							<uni-icons type="person" size="24" color="#fff"></uni-icons>
						</view>
						<text class="feature-name">家庭共享</text>
						<text class="feature-desc">与家人共享财务数据</text>
					</view>
					<view class="feature-item">
						<view class="feature-icon-wrapper" style="background: linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%);">
							<uni-icons type="chart" size="24" color="#fff"></uni-icons>
						</view>
						<text class="feature-name">统计分析</text>
						<text class="feature-desc">多维度数据可视化分析</text>
					</view>
					<view class="feature-item">
						<view class="feature-icon-wrapper" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
							<uni-icons type="download" size="24" color="#fff"></uni-icons>
						</view>
						<text class="feature-name">数据导出</text>
						<text class="feature-desc">支持导出多种格式报表</text>
					</view>
				</view>
			</view>

			<!-- 联系我们 -->
			<view class="contact-section">
				<view class="section-title">联系我们</view>
				<view class="contact-list">
					<view class="contact-item">
						<view class="contact-left">
							<uni-icons type="email" size="20" color="#667eea"></uni-icons>
							<text class="contact-label">官方邮箱</text>
						</view>
						<text class="contact-value">support@familyaccount.com</text>
					</view>
					<view class="contact-item">
						<view class="contact-left">
							<uni-icons type="phone" size="20" color="#667eea"></uni-icons>
							<text class="contact-label">客服电话</text>
						</view>
						<text class="contact-value">400-XXX-XXXX</text>
					</view>
					<view class="contact-item">
						<view class="contact-left">
							<uni-icons type="chatbubble" size="20" color="#667eea"></uni-icons>
							<text class="contact-label">微信公众号</text>
						</view>
						<text class="contact-value">家庭记账助手</text>
					</view>
				</view>
			</view>

			<!-- 法律条款 -->
			<view class="legal-section">
				<view class="legal-item" @tap="navigateTo('/pages/ucenter/agreement/user')">
					<text class="legal-text">用户协议</text>
					<uni-icons type="right" size="16" color="#ccc"></uni-icons>
				</view>
				<view class="legal-item" @tap="navigateTo('/pages/ucenter/agreement/privacy')">
					<text class="legal-text">隐私政策</text>
					<uni-icons type="right" size="16" color="#ccc"></uni-icons>
				</view>
			</view>

			<!-- 底部版权信息 -->
			<view class="footer-section">
				<text class="copyright">© 2024 家庭记账 版权所有</text>
				<text class="icp">ICP备案号：京ICP备XXXXXXXX号</text>
			</view>
		</view>
	</un-pages>
</template>

<script>
export default {
	data() {
		return {
			appName: '家庭记账',
			version: '1.0.0'
		}
	},

	onLoad() {
		// 获取应用版本信息（如果有）
		this.getAppInfo()
	},

	methods: {
		// 获取应用信息
		getAppInfo() {
			// #ifdef APP-PLUS
			plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => {
				this.version = widgetInfo.version
			})
			// #endif
		},

		// 页面跳转
		navigateTo(url) {
			uni.navigateTo({
				url: url
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.about-container {
	min-height: 100vh;
	background: #F8F8F8;
	padding-bottom: 40rpx;
}

.app-info {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 80rpx 40rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.35);
	animation: fadeInDown 0.6s ease-out;

	.app-logo {
		width: 160rpx;
		height: 160rpx;
		background: rgba(255, 255, 255, 0.25);
		border-radius: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;
		border: 3rpx solid rgba(255, 255, 255, 0.3);
		backdrop-filter: blur(10rpx);
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.15);

		.logo-icon {
			font-size: 80rpx;
		}
	}

	.app-name {
		font-size: 40rpx;
		font-weight: bold;
		color: #fff;
		margin-bottom: 16rpx;
		text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.app-version {
		font-size: 26rpx;
		color: rgba(255, 255, 255, 0.85);
		font-weight: 500;
	}
}

.feature-section {
	margin: 30rpx;
	animation: fadeInUp 0.6s ease-out 0.1s both;

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		padding-left: 8rpx;
	}

	.feature-card {
		background: #fff;
		border-radius: 24rpx;
		padding: 30rpx;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);

		.feature-text {
			display: block;
			font-size: 28rpx;
			color: #666;
			line-height: 1.8;
			text-align: justify;
		}
	}

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

		.feature-item {
			background: #fff;
			border-radius: 24rpx;
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
			transition: transform 0.3s ease;

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

			.feature-icon-wrapper {
				width: 80rpx;
				height: 80rpx;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 20rpx;
				box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.12);
			}

			.feature-name {
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
				margin-bottom: 8rpx;
			}

			.feature-desc {
				font-size: 24rpx;
				color: #999;
				text-align: center;
				line-height: 1.5;
			}
		}
	}
}

.contact-section {
	margin: 30rpx;
	animation: fadeInUp 0.6s ease-out 0.2s both;

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		padding-left: 8rpx;
	}

	.contact-list {
		background: #fff;
		border-radius: 24rpx;
		overflow: hidden;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);

		.contact-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 32rpx 30rpx;
			border-bottom: 1rpx solid #f5f5f5;

			&:last-child {
				border-bottom: none;
			}

			.contact-left {
				display: flex;
				align-items: center;

				.contact-label {
					font-size: 28rpx;
					color: #333;
					margin-left: 16rpx;
					font-weight: 500;
				}
			}

			.contact-value {
				font-size: 26rpx;
				color: #666;
				font-weight: 500;
			}
		}
	}
}

.legal-section {
	margin: 30rpx;
	background: #fff;
	border-radius: 24rpx;
	overflow: hidden;
	box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
	animation: fadeInUp 0.6s ease-out 0.3s both;

	.legal-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 32rpx 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
		transition: background 0.3s ease;

		&:last-child {
			border-bottom: none;
		}

		&:active {
			background: #f8f8f8;
		}

		.legal-text {
			font-size: 30rpx;
			color: #333;
			font-weight: 500;
		}
	}
}

.footer-section {
	margin: 40rpx 30rpx 20rpx;
	text-align: center;
	animation: fadeInUp 0.6s ease-out 0.4s both;

	.copyright {
		display: block;
		font-size: 24rpx;
		color: #999;
		margin-bottom: 8rpx;
	}

	.icp {
		display: block;
		font-size: 22rpx;
		color: #bbb;
	}
}

@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translateY(-30rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
</style>
