<template>
	<div class="about-container">
		<div class="header">
			<h1>关于区块链身份认证系统</h1>
			<p>基于区块链技术的去中心化数字身份认证解决方案</p>
		</div>

		<div class="content">
			<div class="feature-section">
				<h2><el-icon><Star /></el-icon> 系统特点</h2>
				<el-row :gutter="30">
					<el-col :md="8" :sm="12" :xs="24" v-for="(feature, index) in features" :key="index">
						<div class="feature-card">
							<div class="icon-wrapper">
								<component :is="feature.icon" />
							</div>
							<h3>{{ feature.title }}</h3>
							<p>{{ feature.description }}</p>
						</div>
					</el-col>
				</el-row>
			</div>

			<div class="team-section">
				<h2><el-icon><User /></el-icon> 开发团队</h2>
				<el-row :gutter="30">
					<el-col :md="6" :sm="8" :xs="12" v-for="(member, index) in teamMembers" :key="index">
						<div class="member-card">
							<el-avatar :size="100" :src="member.avatar" />
							<h3>{{ member.name }}</h3>
							<p class="position">{{ member.position }}</p>
							<p class="bio">{{ member.bio }}</p>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { Opportunity, Lock, Star, User, Link, Key, Connection } from '@element-plus/icons-vue'

const features = [
	{
		icon: 'Shield',
		title: '安全可靠',
		description: '利用区块链不可篡改特性，确保身份数据真实可信'
	},
	{
		icon: 'Key',
		title: '自主控制',
		description: '用户完全掌控自己的身份数据，决定数据分享范围'
	},
	{
		icon: 'Connection',
		title: '跨平台认证',
		description: '一次认证，多平台通用，无需重复注册'
	},
	{
		icon: 'Link',
		title: '去中心化',
		description: '无中心服务器，避免单点故障和数据泄露风险'
	},
	{
		icon: 'Lock',
		title: '隐私保护',
		description: '采用零知识证明技术，最小化披露身份信息'
	},
	{
		icon: 'Opportunity',
		title: '透明可审计',
		description: '所有认证记录上链，可追溯不可抵赖'
	}
]

const teamMembers = [
	{
		name: '张区块链',
		position: '首席架构师',
		bio: '10年区块链开发经验，专注于分布式身份解决方案',
		avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
	},
	{
		name: '李密码学',
		position: '密码学专家',
		bio: '专注于零知识证明和同态加密技术研究',
		avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
	},
	{
		name: '王前端',
		position: '前端工程师',
		bio: '负责用户界面设计和交互体验优化',
		avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
	},
	{
		name: '赵合约',
		position: '智能合约工程师',
		bio: '设计并实现身份认证智能合约逻辑',
		avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
	}
]
</script>

<style scoped lang="scss">
.about-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 20px;
	color: #333;

	.header {
		text-align: center;
		margin-bottom: 50px;

		h1 {
			font-size: 2.5rem;
			color: #2c3e50;
			margin-bottom: 15px;
		}

		p {
			font-size: 1.2rem;
			color: #7f8c8d;
		}
	}

	.card {
		background: #fff;
		border-radius: 8px;
		padding: 30px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		height: 100%;
		transition: transform 0.3s;

		&:hover {
			transform: translateY(-5px);
		}

		h2 {
			color: #2c3e50;
			margin-bottom: 20px;
			display: flex;
			align-items: center;
			font-size: 1.5rem;

			.el-icon {
				margin-right: 10px;
				color: #409eff;
			}
		}

		p, li {
			color: #666;
			line-height: 1.8;
		}

		ul {
			padding-left: 20px;
		}
	}

	.feature-section, .team-section {
		margin: 60px 0;

		h2 {
			text-align: center;
			margin-bottom: 40px;
			font-size: 2rem;
			color: #2c3e50;
			display: flex;
			justify-content: center;
			align-items: center;

			.el-icon {
				margin-right: 10px;
				color: #409eff;
			}
		}
	}

	.feature-card {
		background: #fff;
		border-radius: 8px;
		padding: 30px;
		text-align: center;
		margin-bottom: 30px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		transition: all 0.3s;
		height: 100%;

		&:hover {
			transform: translateY(-5px);
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
		}

		.icon-wrapper {
			width: 60px;
			height: 60px;
			margin: 0 auto 20px;
			background: #f0f7ff;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;

			.el-icon {
				font-size: 24px;
				color: #409eff;
			}
		}

		h3 {
			color: #2c3e50;
			margin-bottom: 15px;
		}

		p {
			color: #666;
			line-height: 1.6;
		}
	}

	.member-card {
		text-align: center;
		margin-bottom: 30px;

		.el-avatar {
			margin-bottom: 15px;
			border: 3px solid #f0f7ff;
		}

		h3 {
			color: #2c3e50;
			margin-bottom: 5px;
		}

		.position {
			color: #409eff;
			font-weight: bold;
			margin-bottom: 10px;
		}

		.bio {
			color: #666;
			font-size: 0.9rem;
			line-height: 1.6;
		}
	}
}

@media (max-width: 768px) {
	.about-container {
		padding: 20px 15px;

		.header {
			h1 {
				font-size: 1.8rem;
			}

			p {
				font-size: 1rem;
			}
		}

		.card, .feature-card {
			padding: 20px;
		}
	}
}
</style>
