jwl-applet/src/pages/questionBank/exclusiveExercise.vue

<template>
	<view class="p14">
		<view class="flex jc-sb">
			<view class="relative mr5" @tap="toIconSkill">
				<image style="width: 336rpx;height: 152rpx;" src="../../static/image/practice/errorprone_bg.png">
				</image>
				<view style="position: absolute;left: 0;top: 0;" class="p10">
					<view style="color: #04B13B;font-size: 18px;">图标技巧</view>
					<text style="color: #04B13B;font-size: 14px;">快速记忆</text>
				</view>
			</view>
			<view class="relative ml5" @tap="toChapterSkill">
				<image style="width: 363rpx;height: 170rpx;" src="../../static/image/practice/chapter_bg.png"></image>
				<view style="position: absolute;left: 0;top: 0;" class="p10">
					<view style="color: #FF6E02;font-size: 18px;">章节练习</view>
					<text style="color: #FF6E02;font-size: 14px;">共5章</text>
				</view>
			</view>
		</view>
		<view class="bc-fff pt14" style="border-radius: 20rpx;">
			<u-grid :border="false" col="4">
				<u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex" @click="toAnswer(listItem.title)">
					<view style="width: 84rpx;height: 84rpx;">
						<image style="width: 84rpx;" mode="widthFix" :src="listItem.image"></image>
					</view>
					<text class="grid-text fs14 cor-000">{{listItem.title}}</text>
					<text class="grid-text mb10 fs12 cor-999">{{listItem.subTitle}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="mt14 p14 bc-fff" style="border-radius: 20rpx;">
			<text class="fs18 cor-000 fw600">常见考点</text>
			<view class="flex ai-c wp100 mt15" style="flex-wrap: wrap;">
				<view class="wp50 flex ai-c mb15" v-for="(item,index) of testCenterList" :key="index">
					<view class="dot_item">{{index+1}}</view>
					<text class="ml5">{{item.label}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import errorIcon from "../../static/image/practice/error_icon.png"
	import newRulesIcon from "../../static/image/practice/newRules_icon.png"
	import neverWriteIcon from "../../static/image/practice/neverWrite_icon.png"
	export default {
		data() {
			return {
				errorIcon,
				newRulesIcon,
				neverWriteIcon,
				list:[{
					title:'新规题',
					subTitle:'392题',
					image:newRulesIcon
				},{
					title:'易错题',
					subTitle:'392题',
					image:errorIcon
				},{
					title:'未做题',
					subTitle:'392题',
					image:neverWriteIcon
				},{
					title:'单选题',
					subTitle:'392题',
					image:newRulesIcon
				},{
					title:'判断题',
					subTitle:'392题',
					image:errorIcon
				},{
					title:'图片题',
					subTitle:'392题',
					image:neverWriteIcon
				}],
				testCenterList:[
					{label:'驾驶证申请相关'},
					{label:'驾驶证申请相关'},
					{label:'驾驶证登记处罚'},
					{label:'机动车强制报废'},
					{label:'其他考点'},
					{label:'驾驶证登记处罚'},
					{label:'机动车强制报废'},
					{label:'其他考点'}]
			}
		},
		methods: {
			toAnswer(title) {
				uni.navigateTo({
					url:"/pages/questionBank/questionBank?navTitle="+title
				})
			},
			toIconSkill(){
				uni.navigateTo({
					url:"/pages/index/iconSkill"
				})
			},
			toChapterSkill(){
				uni.navigateTo({
					url:"/pages/questionBank/chapterExercise"
				})
			}
		}
	}
</script>

<style scoped>
.dot_item{
	width: 40rpx;
	height: 40rpx;
	line-height: 40rpx;
	color: #fff;
	text-align: center;
	background: #0BD032;
	border-radius: 50%;
}
</style>