jpcj-h5/src/views/classify/index.vue

<template>
	<m-nav-bar :title="query.title" />
	<div class="cell-box">
		<van-cell
			class="cell"
			:title="item.title"
			is-link
			center
			v-for="(item, index) in classData"
			:key="index"
			:border="false"
			@click="
				() => {
					push({
						name: 'exercise',
						query: {
							...query,
							title:item.title,
							columnAll:item.columnId
						},
					});
				}
			">
			<template #icon>
				<div class="icon">{{ index + 1 }}</div>
			</template>
		</van-cell>
		<view class="classify-tip">
			<m-classify-tip :content="classifyTip"></m-classify-tip>
		</view>
	</div>
</template>

<script setup lang="ts">
import { getQuestionColumn, getTopicClass } from "@/api";
import { ref } from "vue";
import { RouterBus } from "@/hooks";
const {
	route: { query },
	router: { push },
} = new RouterBus();
const classData = ref([]);
const classifyTip = query.title === "地方专题" ? ref(["地方题库,如有个别地区增加【地方题库】,请选择该区域的【地方题库】+【必学题】学习,如果没有无需学习地方题库"]) : ref(["分类练习,学员可重点学习自己不懂的题目.", "建议新学员直接看软件必考题技巧,快速学习"]);
getQuestionColumn({
	model:query['model'] as string,
	subject:query.subject=='1'?'k1_3':'k4_3'
}).then(({ data }) => {
	//地方专题第一个选项去掉
	// if (query.title == "地方专题") {
	// 	data.data?.shift();
	// }

	classData.value = data.data;
});
</script>

<style lang="scss" scoped>
.classify-tip {
	width: 375px;
	margin-top: 20px;
}
.cell-box {
	display: flex;
	padding: 5px 15px;
	flex-wrap: wrap;
	justify-content: space-between;
	.cell {
		width: 167px;
		margin-top: 10px;
		box-shadow: 0px 0px 10px rgba(124, 129, 136, 0.2);
	}
	.icon {
		width: 20px;
		height: 20px;
		background: #498ef5;
		border-radius: 50%;
		font-weight: 500;
		font-family: PingFang SC;
		font-size: 13px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #ffffff;
		margin-right: 5px;
	}
}
</style>