cma_search/client_mp/pages/exam/index.vue

95 lines
1.7 KiB
Python

<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/test"
})
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>