|
@@ -0,0 +1,728 @@
|
|
|
+<template>
|
|
|
+ <StudyLayout>
|
|
|
+ <div class="grid h-full w-full grid-cols-4 gap-6 overflow-hidden p-6">
|
|
|
+ <div
|
|
|
+ class="col-span-1 flex h-full flex-col overflow-hidden rounded-xl bg-white shadow-md"
|
|
|
+ >
|
|
|
+ <div class="bg-[var(--czr-main-color)]/80 p-4 text-white">
|
|
|
+ <div class="flex items-center text-xl font-bold">
|
|
|
+ <i class="fas fa-book mr-2"></i>
|
|
|
+ 知识点分类
|
|
|
+ <div class="ml-auto flex space-x-1 font-normal">
|
|
|
+ <div
|
|
|
+ id="expandAll"
|
|
|
+ class="text-subject-color flex items-center text-xs hover:underline"
|
|
|
+ @click="ref_tree.expandAll()"
|
|
|
+ >
|
|
|
+ <i class="fas fa-plus-square mr-1"></i>
|
|
|
+ <span>全部展开</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ id="collapseAll"
|
|
|
+ class="text-subject-color flex items-center text-xs hover:underline"
|
|
|
+ @click="ref_tree.collapseAll()"
|
|
|
+ >
|
|
|
+ <i class="fas fa-minus-square mr-1"></i>
|
|
|
+ <span>全部折叠</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="border-b border-b-[#e5e7eb] p-3">
|
|
|
+ <div class="relative">
|
|
|
+ <!-- <input-->
|
|
|
+ <!-- type="text"-->
|
|
|
+ <!-- placeholder="搜索知识点..."-->
|
|
|
+ <!-- class="search-input w-full rounded-lg border border-[#e5e7eb] py-1.5 pr-3 pl-9 text-sm focus:border-[var(--czr-main-color)]/20 focus:outline-none"-->
|
|
|
+ <!-- />-->
|
|
|
+ <!-- <i-->
|
|
|
+ <!-- class="fas fa-search absolute top-1/2 left-3 -translate-y-1/2 transform text-sm text-[#6b7280]"-->
|
|
|
+ <!-- ></i>-->
|
|
|
+ <div class="quasar-css">
|
|
|
+ <q-input
|
|
|
+ v-model="state.treeText"
|
|
|
+ outlined
|
|
|
+ placeholder="搜索知识点..."
|
|
|
+ :dense="true"
|
|
|
+ >
|
|
|
+ <template v-slot:prepend>
|
|
|
+ <q-icon name="search" />
|
|
|
+ </template>
|
|
|
+ <template v-slot:append>
|
|
|
+ <q-icon
|
|
|
+ v-if="state.treeText !== ''"
|
|
|
+ name="clear"
|
|
|
+ class="cursor-pointer"
|
|
|
+ @click="state.treeText = ''"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </q-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="quasar-css overflow-y-auto p-2">
|
|
|
+ <q-tree
|
|
|
+ ref="ref_tree"
|
|
|
+ :nodes="treeData"
|
|
|
+ node-key="name"
|
|
|
+ label-key="name"
|
|
|
+ v-model:selected="state.selected"
|
|
|
+ :filter="state.treeText"
|
|
|
+ >
|
|
|
+ <template v-slot:default-header="prop">
|
|
|
+ <div class="flex w-full items-center text-sm">
|
|
|
+ <div class="">
|
|
|
+ {{ prop.node.name }}
|
|
|
+ </div>
|
|
|
+ <div class="ml-auto">{{ prop.node.total }}题</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </q-tree>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="col-span-3 flex h-full flex-col overflow-hidden rounded-xl bg-white shadow-md"
|
|
|
+ >
|
|
|
+ <div class="bg-[var(--czr-main-color)]/80 p-4 text-white">
|
|
|
+ <div class="relative flex items-center text-xl font-bold">
|
|
|
+ <i class="fas fa-book mr-2"></i>
|
|
|
+ 题目列表
|
|
|
+ <span class="text-base" v-if="state.selected">
|
|
|
+ ({{ treeMapCpt.get(state.selected).name }} - 共{{
|
|
|
+ treeMapCpt.get(state.selected).total
|
|
|
+ }}题)
|
|
|
+ </span>
|
|
|
+ <div class="quasar-css absolute right-2 ml-auto flex">
|
|
|
+ <q-input
|
|
|
+ class="w-[140px]"
|
|
|
+ v-model="state.query.p1"
|
|
|
+ borderless
|
|
|
+ placeholder="搜索题目..."
|
|
|
+ :dense="true"
|
|
|
+ :input-style="{ color: '#ffffff' }"
|
|
|
+ >
|
|
|
+ <template v-slot:prepend>
|
|
|
+ <q-icon name="search" color="white" />
|
|
|
+ </template>
|
|
|
+ <template v-slot:append>
|
|
|
+ <q-icon
|
|
|
+ v-if="state.query.p1"
|
|
|
+ name="clear"
|
|
|
+ class="cursor-pointer"
|
|
|
+ @click="state.query.p1 = ''"
|
|
|
+ color="white"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </q-input>
|
|
|
+ <q-select
|
|
|
+ class="select ml-4 w-[100px]"
|
|
|
+ borderless
|
|
|
+ v-model="state.query.p2"
|
|
|
+ :options="[
|
|
|
+ { label: '全部题型', value: '全部题型' },
|
|
|
+ { label: '选择题', value: '选择题' },
|
|
|
+ { label: '填空题', value: '填空题' },
|
|
|
+ ]"
|
|
|
+ :dense="true"
|
|
|
+ >
|
|
|
+ </q-select>
|
|
|
+ <q-toggle
|
|
|
+ class="ml-4 text-sm font-normal"
|
|
|
+ v-model="state.query.p3"
|
|
|
+ label="只看错题"
|
|
|
+ :dense="true"
|
|
|
+ color="var(--czr-main-color)"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex-1 overflow-y-auto p-4" id="questionsContainer">
|
|
|
+ <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
|
|
|
+ <!-- 题目卡片1 -->
|
|
|
+ <div
|
|
|
+ class="question-card overflow-hidden rounded-xl border border-[#e5e7eb] bg-white shadow-sm"
|
|
|
+ >
|
|
|
+ <div class="p-4">
|
|
|
+ <div class="mb-3 flex items-start justify-between">
|
|
|
+ <div class="text-base font-semibold text-gray-800">
|
|
|
+ 题目 1 - 下列汉字中属于独体字的是哪一项?
|
|
|
+ </div>
|
|
|
+ <div class="flex space-x-1">
|
|
|
+ <div
|
|
|
+ class="text-gray-dark hover:text-warning-color transition-colors"
|
|
|
+ title="收藏题目"
|
|
|
+ >
|
|
|
+ <i class="fas fa-star"></i>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="text-gray-dark hover:text-danger-color transition-colors"
|
|
|
+ title="错题标记"
|
|
|
+ >
|
|
|
+ <i class="fas fa-exclamation-circle"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 题目的图片 -->
|
|
|
+ <div
|
|
|
+ class="bg-gray-light mb-4 flex justify-center rounded-lg p-4"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="https://picsum.photos/id/24/400/200"
|
|
|
+ alt="题目图片"
|
|
|
+ class="max-h-40 rounded"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 答案的图片 -->
|
|
|
+ <div
|
|
|
+ class="bg-gray-light mb-4 flex justify-center rounded-lg p-4"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="https://picsum.photos/id/20/400/150"
|
|
|
+ alt="答案图片"
|
|
|
+ class="max-h-32 rounded"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 视频解析列表 -->
|
|
|
+ <div>
|
|
|
+ <div class="mb-2 text-sm font-medium text-gray-800">
|
|
|
+ 视频解析:
|
|
|
+ </div>
|
|
|
+ <ul class="space-y-2">
|
|
|
+ <li
|
|
|
+ class="video-item flex items-center justify-between rounded-lg border border-[#e5e7eb] p-2"
|
|
|
+ >
|
|
|
+ <span class="text-sm">独体字与合体字的区别</span>
|
|
|
+ <div
|
|
|
+ class="play-video bg-subject-color hover:bg-subject-dark rounded-full p-1.5 text-white transition-colors"
|
|
|
+ data-video="https://example.com/video1.mp4"
|
|
|
+ data-title="独体字与合体字的区别"
|
|
|
+ data-duration="10:24"
|
|
|
+ data-views="1.2k"
|
|
|
+ >
|
|
|
+ <i class="fas fa-play text-xs"></i>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li
|
|
|
+ class="video-item flex items-center justify-between rounded-lg border border-[#e5e7eb] p-2"
|
|
|
+ >
|
|
|
+ <span class="text-sm">常见独体字结构分析</span>
|
|
|
+ <div
|
|
|
+ class="play-video bg-subject-color hover:bg-subject-dark rounded-full p-1.5 text-white transition-colors"
|
|
|
+ data-video="https://example.com/video2.mp4"
|
|
|
+ data-title="常见独体字结构分析"
|
|
|
+ data-duration="8:45"
|
|
|
+ data-views="986"
|
|
|
+ >
|
|
|
+ <i class="fas fa-play text-xs"></i>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 题目卡片2 -->
|
|
|
+ <div
|
|
|
+ class="question-card overflow-hidden rounded-xl border border-[#e5e7eb] bg-white shadow-sm"
|
|
|
+ >
|
|
|
+ <div class="p-4">
|
|
|
+ <div class="mb-3 flex items-start justify-between">
|
|
|
+ <div class="font-semibold text-gray-800">
|
|
|
+ 题目 2 - 下列哪组汉字都是左右结构?
|
|
|
+ </div>
|
|
|
+ <div class="flex space-x-1">
|
|
|
+ <div
|
|
|
+ class="text-warning-color hover:text-gray-dark transition-colors"
|
|
|
+ title="已收藏"
|
|
|
+ >
|
|
|
+ <i class="fas fa-star"></i>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="text-gray-dark hover:text-danger-color transition-colors"
|
|
|
+ title="错题标记"
|
|
|
+ >
|
|
|
+ <i class="fas fa-exclamation-circle"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 题目的图片 -->
|
|
|
+ <div
|
|
|
+ class="bg-gray-light mb-4 flex justify-center rounded-lg p-4"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="https://picsum.photos/id/28/400/200"
|
|
|
+ alt="题目图片"
|
|
|
+ class="max-h-40 rounded"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 答案的图片 -->
|
|
|
+ <div
|
|
|
+ class="bg-gray-light mb-4 flex justify-center rounded-lg p-4"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="https://picsum.photos/id/26/400/150"
|
|
|
+ alt="答案图片"
|
|
|
+ class="max-h-32 rounded"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 视频解析列表 -->
|
|
|
+ <div>
|
|
|
+ <div class="mb-2 text-sm font-medium text-gray-800">
|
|
|
+ 视频解析:
|
|
|
+ </div>
|
|
|
+ <ul class="space-y-2">
|
|
|
+ <li
|
|
|
+ class="video-item flex items-center justify-between rounded-lg border border-[#e5e7eb] p-2"
|
|
|
+ >
|
|
|
+ <span class="text-sm">汉字结构分类详解</span>
|
|
|
+ <div
|
|
|
+ class="play-video bg-subject-color hover:bg-subject-dark rounded-full p-1.5 text-white transition-colors"
|
|
|
+ data-video="https://example.com/video3.mp4"
|
|
|
+ data-title="汉字结构分类详解"
|
|
|
+ data-duration="12:10"
|
|
|
+ data-views="2.1k"
|
|
|
+ >
|
|
|
+ <i class="fas fa-play text-xs"></i>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 题目卡片3 -->
|
|
|
+ <div
|
|
|
+ class="question-card overflow-hidden rounded-xl border border-[#e5e7eb] bg-white shadow-sm"
|
|
|
+ >
|
|
|
+ <div class="p-4">
|
|
|
+ <div class="mb-3 flex items-start justify-between">
|
|
|
+ <div class="font-semibold text-gray-800">
|
|
|
+ 题目 3 - 找出下列选项中书写有误的汉字并改正
|
|
|
+ </div>
|
|
|
+ <div class="flex space-x-1">
|
|
|
+ <div
|
|
|
+ class="text-gray-dark hover:text-warning-color transition-colors"
|
|
|
+ title="收藏题目"
|
|
|
+ >
|
|
|
+ <i class="fas fa-star"></i>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="text-danger-color hover:text-gray-dark transition-colors"
|
|
|
+ title="已标记为错题"
|
|
|
+ >
|
|
|
+ <i class="fas fa-exclamation-circle"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 题目的图片 -->
|
|
|
+ <div
|
|
|
+ class="bg-gray-light mb-4 flex justify-center rounded-lg p-4"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="https://picsum.photos/id/42/400/200"
|
|
|
+ alt="题目图片"
|
|
|
+ class="max-h-40 rounded"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 答案的图片 -->
|
|
|
+ <div
|
|
|
+ class="bg-gray-light mb-4 flex justify-center rounded-lg p-4"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="https://picsum.photos/id/49/400/150"
|
|
|
+ alt="答案图片"
|
|
|
+ class="max-h-32 rounded"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 视频解析列表 -->
|
|
|
+ <div>
|
|
|
+ <div class="mb-2 text-sm font-medium text-gray-800">
|
|
|
+ 视频解析:
|
|
|
+ </div>
|
|
|
+ <ul class="space-y-2">
|
|
|
+ <li
|
|
|
+ class="video-item flex items-center justify-between rounded-lg border border-[#e5e7eb] p-2"
|
|
|
+ >
|
|
|
+ <span class="text-sm">常见形近字辨析</span>
|
|
|
+ <div
|
|
|
+ class="play-video bg-subject-color hover:bg-subject-dark rounded-full p-1.5 text-white transition-colors"
|
|
|
+ data-video="https://example.com/video4.mp4"
|
|
|
+ data-title="常见形近字辨析"
|
|
|
+ data-duration="15:30"
|
|
|
+ data-views="1.8k"
|
|
|
+ >
|
|
|
+ <i class="fas fa-play text-xs"></i>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li
|
|
|
+ class="video-item flex items-center justify-between rounded-lg border border-[#e5e7eb] p-2"
|
|
|
+ >
|
|
|
+ <span class="text-sm">易错字书写规则</span>
|
|
|
+ <div
|
|
|
+ class="play-video bg-subject-color hover:bg-subject-dark rounded-full p-1.5 text-white transition-colors"
|
|
|
+ data-video="https://example.com/video5.mp4"
|
|
|
+ data-title="易错字书写规则"
|
|
|
+ data-duration="9:42"
|
|
|
+ data-views="1.5k"
|
|
|
+ >
|
|
|
+ <i class="fas fa-play text-xs"></i>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li
|
|
|
+ class="video-item flex items-center justify-between rounded-lg border border-[#e5e7eb] p-2"
|
|
|
+ >
|
|
|
+ <span class="text-sm">汉字笔画顺序规则</span>
|
|
|
+ <div
|
|
|
+ class="play-video bg-subject-color hover:bg-subject-dark rounded-full p-1.5 text-white transition-colors"
|
|
|
+ data-video="https://example.com/video6.mp4"
|
|
|
+ data-title="汉字笔画顺序规则"
|
|
|
+ data-duration="7:55"
|
|
|
+ data-views="1.3k"
|
|
|
+ >
|
|
|
+ <i class="fas fa-play text-xs"></i>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 题目卡片4 -->
|
|
|
+ <div
|
|
|
+ class="question-card overflow-hidden rounded-xl border border-[#e5e7eb] bg-white shadow-sm"
|
|
|
+ >
|
|
|
+ <div class="p-4">
|
|
|
+ <div class="mb-3 flex items-start justify-between">
|
|
|
+ <div class="font-semibold text-gray-800">
|
|
|
+ 题目 4 - 下列哪个汉字是上下结构?
|
|
|
+ </div>
|
|
|
+ <div class="flex space-x-1">
|
|
|
+ <div
|
|
|
+ class="text-gray-dark hover:text-warning-color transition-colors"
|
|
|
+ title="收藏题目"
|
|
|
+ >
|
|
|
+ <i class="fas fa-star"></i>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="text-gray-dark hover:text-danger-color transition-colors"
|
|
|
+ title="错题标记"
|
|
|
+ >
|
|
|
+ <i class="fas fa-exclamation-circle"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 题目的图片 -->
|
|
|
+ <div
|
|
|
+ class="bg-gray-light mb-4 flex justify-center rounded-lg p-4"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="https://picsum.photos/id/60/400/200"
|
|
|
+ alt="题目图片"
|
|
|
+ class="max-h-40 rounded"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 答案的图片 -->
|
|
|
+ <div
|
|
|
+ class="bg-gray-light mb-4 flex justify-center rounded-lg p-4"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="https://picsum.photos/id/65/400/150"
|
|
|
+ alt="答案图片"
|
|
|
+ class="max-h-32 rounded"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 视频解析列表 -->
|
|
|
+ <div>
|
|
|
+ <div class="mb-2 text-sm font-medium text-gray-800">
|
|
|
+ 视频解析:
|
|
|
+ </div>
|
|
|
+ <ul class="space-y-2">
|
|
|
+ <li
|
|
|
+ class="video-item flex items-center justify-between rounded-lg border border-[#e5e7eb] p-2"
|
|
|
+ >
|
|
|
+ <span class="text-sm">汉字结构类型及特点</span>
|
|
|
+ <div
|
|
|
+ class="play-video bg-subject-color hover:bg-subject-dark rounded-full p-1.5 text-white transition-colors"
|
|
|
+ data-video="https://example.com/video7.mp4"
|
|
|
+ data-title="汉字结构类型及特点"
|
|
|
+ data-duration="11:20"
|
|
|
+ data-views="954"
|
|
|
+ >
|
|
|
+ <i class="fas fa-play text-xs"></i>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 分页控件 -->
|
|
|
+ <div class="mt-6 flex justify-center">
|
|
|
+ <div class="flex items-center space-x-1">
|
|
|
+ <div
|
|
|
+ class="pagination-item hover:bg-gray-light flex h-8 w-8 items-center justify-center rounded transition-colors"
|
|
|
+ >
|
|
|
+ <i class="fas fa-chevron-left text-xs"></i>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="pagination-item active flex h-8 w-8 items-center justify-center rounded"
|
|
|
+ >
|
|
|
+ 1
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="pagination-item hover:bg-gray-light flex h-8 w-8 items-center justify-center rounded transition-colors"
|
|
|
+ >
|
|
|
+ 2
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="pagination-item hover:bg-gray-light flex h-8 w-8 items-center justify-center rounded transition-colors"
|
|
|
+ >
|
|
|
+ 3
|
|
|
+ </div>
|
|
|
+ <span class="flex h-8 w-8 items-center justify-center">...</span>
|
|
|
+ <div
|
|
|
+ class="pagination-item hover:bg-gray-light flex h-8 w-8 items-center justify-center rounded transition-colors"
|
|
|
+ >
|
|
|
+ 6
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="pagination-item hover:bg-gray-light flex h-8 w-8 items-center justify-center rounded transition-colors"
|
|
|
+ >
|
|
|
+ <i class="fas fa-chevron-right text-xs"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </StudyLayout>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { computed, onMounted, reactive, ref } from 'vue'
|
|
|
+import StudyLayout from '@/views/study/components/study-layout.vue'
|
|
|
+
|
|
|
+const state: any = reactive({
|
|
|
+ selected: null,
|
|
|
+ treeText: '',
|
|
|
+ query: {
|
|
|
+ p1: '',
|
|
|
+ p2: '全部题型',
|
|
|
+ p3: true,
|
|
|
+ },
|
|
|
+})
|
|
|
+const ref_tree = ref()
|
|
|
+const treeData = [
|
|
|
+ {
|
|
|
+ name: '基础知识',
|
|
|
+ total: 328,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ name: '字音字形',
|
|
|
+ total: 128,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ name: '声母韵母',
|
|
|
+ total: 48,
|
|
|
+ children: [
|
|
|
+ { name: '声母辨析', total: 25 },
|
|
|
+ { name: '韵母辨析', total: 18 },
|
|
|
+ { name: '整体认读音节', total: 5 },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '字形结构',
|
|
|
+ total: 80,
|
|
|
+ children: [
|
|
|
+ { name: '独体字', total: 24 },
|
|
|
+ { name: '合体字', total: 32 },
|
|
|
+ { name: '形近字', total: 16 },
|
|
|
+ { name: '多音字', total: 8 },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '词语辨析',
|
|
|
+ total: 145,
|
|
|
+ children: [
|
|
|
+ { name: '近义词', total: 45 },
|
|
|
+ { name: '反义词', total: 35 },
|
|
|
+ { name: '成语辨析', total: 50 },
|
|
|
+ { name: '熟语运用', total: 15 },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '句子运用',
|
|
|
+ total: 55,
|
|
|
+ children: [
|
|
|
+ { name: '病句辨析', total: 30 },
|
|
|
+ { name: '修辞手法', total: 15 },
|
|
|
+ { name: '句式转换', total: 10 },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '文言文',
|
|
|
+ total: 196,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ name: '文言实词',
|
|
|
+ total: 96,
|
|
|
+ children: [
|
|
|
+ { name: '一词多义', total: 40 },
|
|
|
+ { name: '古今异义', total: 35 },
|
|
|
+ { name: '通假字', total: 21 },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '文言虚词',
|
|
|
+ total: 65,
|
|
|
+ children: [
|
|
|
+ { name: '之乎者也', total: 35 },
|
|
|
+ { name: '而何乃焉', total: 30 },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '文言句式',
|
|
|
+ total: 35,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '现代文阅读',
|
|
|
+ total: 178,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ name: '记叙文',
|
|
|
+ total: 78,
|
|
|
+ children: [
|
|
|
+ { name: '写人记事', total: 45 },
|
|
|
+ { name: '写景状物', total: 33 },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '说明文',
|
|
|
+ total: 55,
|
|
|
+ children: [
|
|
|
+ { name: '事物说明', total: 30 },
|
|
|
+ { name: '事理说明', total: 25 },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '议论文',
|
|
|
+ total: 45,
|
|
|
+ children: [
|
|
|
+ { name: '论点论据', total: 25 },
|
|
|
+ { name: '论证方法', total: 20 },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '诗歌鉴赏',
|
|
|
+ total: 164,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ name: '古诗',
|
|
|
+ total: 104,
|
|
|
+ children: [
|
|
|
+ { name: '唐诗', total: 45 },
|
|
|
+ { name: '宋诗', total: 35 },
|
|
|
+ { name: '乐府诗', total: 24 },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '词曲',
|
|
|
+ total: 45,
|
|
|
+ children: [
|
|
|
+ { name: '宋词', total: 30 },
|
|
|
+ { name: '元曲', total: 15 },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '现代诗',
|
|
|
+ total: 15,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '写作技巧',
|
|
|
+ total: 120,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ name: '记叙文写作',
|
|
|
+ total: 65,
|
|
|
+ children: [
|
|
|
+ { name: '人物描写', total: 35 },
|
|
|
+ { name: '情节安排', total: 30 },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '议论文写作',
|
|
|
+ total: 45,
|
|
|
+ children: [
|
|
|
+ { name: '论点确立', total: 20 },
|
|
|
+ { name: '论据选择', total: 25 },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '应用文写作',
|
|
|
+ total: 10,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+]
|
|
|
+const treeMapCpt = computed(() => {
|
|
|
+ const map = new Map()
|
|
|
+ const deep = (arr) => {
|
|
|
+ arr.forEach((v) => {
|
|
|
+ map.set(v.name, v)
|
|
|
+ if (v.children?.length > 0) {
|
|
|
+ deep(v.children)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ deep(treeData)
|
|
|
+ return map
|
|
|
+})
|
|
|
+onMounted(() => {})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+$primary: red;
|
|
|
+
|
|
|
+.search-input:focus {
|
|
|
+ box-shadow: 0 0 0 3px rgba(var(--czr-main-color-rgb), 0.2);
|
|
|
+}
|
|
|
+.question-card {
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.question-card:hover {
|
|
|
+ transform: translateY(-5px);
|
|
|
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+:deep(.select) {
|
|
|
+ .ellipsis {
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ .q-select__dropdown-icon {
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|