<template>
	<view>
		<view class="cellWrap">
			<view class="cellItem" v-for="item in cellList" :index="item.id" :key="item.id" @click="intoPage(item)">
				 <image class="cellImg" :src="item.img"></image>
				 <text class="cellText">{{item.title}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				query:{
					page: 1
				},
				cellList: [
					{img:'../../static/exam/exam.png',title:'正式考试',id:'exam'},
					{img:'../../static/exam/test.png',title:'考试记录',id:'test'},
					// {img:'../../static/exam/question.png',title:'专题练习',id:'question'},
					// {img:'../../static/exam/errorIcon.png',title:'错题记录',id:'record'},
					]
			}
		},
		methods: {
			intoPage(item){
				switch (item.id){
					case 'exam':
					uni.navigateTo({
						url:"/pages/exam/exam"
					})
					break;
					case 'test':
					uni.navigateTo({
						url:"/pages/exam/record"
					})
					break;
					case 'question':
					uni.navigateTo({
						url:"/pages/exam/question"
					})
					break;
					case 'erroRrecord':
					uni.navigateTo({
						url:"/pages/exam/erroRrecord"
					})
					break;
				}
				
			}
		}
	}
</script>

<style>
	.cellWrap{
		display: flex;
		flex-flow: wrap;
		margin: auto;
		margin-top: 30upx;
		margin-bottom: 30upx;
		justify-content: space-evenly;
	
	}
.cellItem{
	width: 35%;
	display: flex;
	flex-direction: column;
	text-align: center;
	margin-top: 50upx;
}
.cellImg{
	margin: auto;
	width: 120upx;
	height: 120upx;
}
.cellText{
	height: 60upx;
	line-height: 60upx;
	text-align: center;
	color: #339900;
}
 .cellItem:nth-of-type(2) .cellText{
	color: #efb336;
}
 .cellItem:nth-of-type(3) .cellText{
	color: #1296db;
}
 .cellItem:nth-of-type(4) .cellText{
	color: #d81e06;
}
</style>
