127 lines
2.5 KiB
Vue
127 lines
2.5 KiB
Vue
<template>
|
|
<view>
|
|
<view class="cellWrap">
|
|
<view class="cellItem" v-for="item in cellList" :index="item.id" :key="item.id" @click="intoPage(item)">
|
|
<view :class="item.class">
|
|
<image class="cellImg" :src="item.img"></image>
|
|
</view>
|
|
<text class="cellText">{{item.title}}</text>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="cellWrap">
|
|
<view class="cellItem" @click="intoPage('exam')">
|
|
<view class="exam">
|
|
<image class="cellImg" src="../../static/exam/exam.png"></image>
|
|
</view>
|
|
<text class="cellText">正式考试</text>
|
|
</view>
|
|
<view class="cellItem" @click="intoPage('test')">
|
|
<view class="test">
|
|
<image class="cellImg" src="../../static/exam/test.png"></image>
|
|
</view>
|
|
<text class="cellText">考试记录</text>
|
|
</view>
|
|
</view> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
query:{
|
|
page: 1
|
|
},
|
|
cellList: [
|
|
{img:'../../static/exam/exam.png',title:'正式考试',id:'exam',class:'exam'},
|
|
{img:'../../static/exam/test.png',title:'考试记录',id:'test',class:'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;
|
|
}
|
|
.exam{
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
background: #46bb5a;
|
|
border-radius: 40rpx;
|
|
padding: 36rpx;
|
|
margin: auto;
|
|
}
|
|
.test{
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
background: #ecc041;
|
|
border-radius: 40rpx;
|
|
padding: 36rpx;
|
|
margin: auto;
|
|
}
|
|
</style>
|