<template>
	<view class="home-container">
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
		<view class="header">
			<text class="title">应行AI</text>
		</view>
		
		<view class="content">
			<text class="welcome-text">欢迎使用应行AI平台</text>
			<!-- 这里可以添加首页内容 -->
			<view class="feature-grid">
				<view class="feature-item" v-for="(item, index) in features" :key="index">
					<image :src="item.icon" class="feature-icon"></image>
					<text class="feature-text">{{ item.title }}</text>
				</view>
			</view>
		</view>
		
		<!-- 使用自定义TabBar -->
		<custom-tab-bar></custom-tab-bar>
	</view>
</template>

<script>
	import CustomTabBar from '@/components/custom-tab-bar/custom-tab-bar.vue';
	
	export default {
		components: {
			CustomTabBar
		},
		data() {
			return {
				statusBarHeight: 0,
				features: [
					{
						title: '功能一',
						icon: '/static/common/feature/feature1.png'
					},
					{
						title: '功能二',
						icon: '/static/common/feature/feature1.png'
					},
					{
						title: '功能三',
						icon: '/static/common/feature/feature1.png'
					},
					{
						title: '功能四',
						icon: '/static/common/feature/feature1.png'
					}
				]
			}
		},
		onLoad() {
			// 获取状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.home-container {
		min-height: 100vh;
		background-color: #f8f8f8;
		padding-bottom: calc(56px + env(safe-area-inset-bottom)); /* 为自定义tabBar预留空间 */
		
		.status-bar {
			background-color: #ffffff;
		}
		
		.header {
			background-color: #ffffff;
			height: 44px;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 15px;
			
			.title {
				font-size: 18px;
				font-weight: bold;
				color: #333333;
			}
		}
		
		.content {
			padding: 20px;
			
			.welcome-text {
				font-size: 16px;
				color: #333333;
				text-align: center;
				margin-bottom: 30px;
			}
			
			.feature-grid {
				display: flex;
				flex-wrap: wrap;
				margin: 0 -10px;
				
				.feature-item {
					width: 50%;
					padding: 10px;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					align-items: center;
					
					.feature-icon {
						width: 60px;
						height: 60px;
						margin-bottom: 10px;
						background-color: #e1f1ff;
						border-radius: 15px;
					}
					
					.feature-text {
						font-size: 14px;
						color: #333333;
					}
				}
			}
		}
	}
</style> 