<template>
	<view class="container">
		<view class="header">
			<view class="welcome">
				<text class="welcome-title">欢迎来到答题挑战</text>
				<text class="welcome-subtitle">多种玩法，等你来挑战</text>
			</view>
		</view>
		
		<view class="game-modes">
			<view class="mode-card" @click="goToRandom">
				<view class="mode-icon random-icon">🎲</view>
				<view class="mode-info">
					<text class="mode-title">随机答题</text>
					<text class="mode-desc">随机抽取题目，自由挑战</text>
				</view>
				<text class="mode-arrow">›</text>
			</view>
			
			<view class="mode-card" @click="goToCategory">
				<view class="mode-icon category-icon">📚</view>
				<view class="mode-info">
					<text class="mode-title">类目答题</text>
					<text class="mode-desc">按类目分类，系统学习</text>
				</view>
				<text class="mode-arrow">›</text>
			</view>
			
			<view class="mode-card" @click="goToQuick">
				<view class="mode-icon quick-icon">⚡</view>
				<view class="mode-info">
					<text class="mode-title">快速答题</text>
					<text class="mode-desc">限时挑战，速度比拼</text>
				</view>
				<text class="mode-arrow">›</text>
			</view>
		</view>
		
		<view class="tips">
			<view class="tip-item">
				<text class="tip-icon">💡</text>
				<text class="tip-text">每日坚持答题，提升知识储备</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
		}
	},
	
	methods: {
		goToRandom() {
			uni.switchTab({
				url: '/pages/random/random'
			})
		},
		
		goToCategory() {
			uni.switchTab({
				url: '/pages/category/category'
			})
		},
		
		goToQuick() {
			uni.switchTab({
				url: '/pages/quick/quick'
			})
		}
	}
}
</script>

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

.header {
	margin-bottom: 60rpx;
}

.welcome {
	text-align: center;
}

.welcome-title {
	display: block;
	font-size: 48rpx;
	font-weight: bold;
	color: #ffffff;
	margin-bottom: 20rpx;
}

.welcome-subtitle {
	display: block;
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.9);
}

.game-modes {
	display: flex;
	flex-direction: column;
	gap: 30rpx;
}

.mode-card {
	display: flex;
	align-items: center;
	background: #ffffff;
	border-radius: 24rpx;
	padding: 40rpx;
	box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.15);
	transition: all 0.3s;
}

.mode-card:active {
	transform: scale(0.98);
	box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.1);
}

.mode-icon {
	width: 100rpx;
	height: 100rpx;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 50rpx;
	margin-right: 30rpx;
}

.random-icon {
	background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.category-icon {
	background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.quick-icon {
	background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.mode-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10rpx;
}

.mode-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.mode-desc {
	font-size: 26rpx;
	color: #999;
}

.mode-arrow {
	font-size: 50rpx;
	color: #ccc;
	font-weight: bold;
}

.tips {
	margin-top: 60rpx;
}

.tip-item {
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 16rpx;
	padding: 30rpx;
}

.tip-icon {
	font-size: 36rpx;
	margin-right: 20rpx;
}

.tip-text {
	font-size: 28rpx;
	color: #ffffff;
}
</style>
