|
|
@@ -0,0 +1,481 @@
|
|
|
+<template>
|
|
|
+ <StudyLayout>
|
|
|
+ <div class="grid h-full w-full grid-cols-4 gap-6 overflow-hidden p-6">
|
|
|
+ <div
|
|
|
+ class="col-span-4 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="absolute right-2 ml-auto flex">
|
|
|
+ <q-select
|
|
|
+ class="select ml-4 w-[100px]"
|
|
|
+ rounded
|
|
|
+ standout="focus"
|
|
|
+ v-model="state.query.p2"
|
|
|
+ :options="['全部题', '错题', '正确题']"
|
|
|
+ :dense="true"
|
|
|
+ >
|
|
|
+ </q-select>
|
|
|
+ </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">
|
|
|
+ <template v-for="(item, index) in state.list">
|
|
|
+ <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">
|
|
|
+ 题目 {{ index + 1 }} - {{ item.name }}
|
|
|
+ </div>
|
|
|
+ <div class="flex space-x-1">
|
|
|
+ <q-btn
|
|
|
+ round
|
|
|
+ size="xs"
|
|
|
+ icon="book"
|
|
|
+ color="red"
|
|
|
+ @click="state.showHistory = true"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 题目的图片 -->
|
|
|
+ <div
|
|
|
+ class="bg-gray-light mb-4 flex justify-center rounded-lg p-4"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ :src="item.question"
|
|
|
+ alt="题目图片"
|
|
|
+ class="max-h-40 rounded"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <!-- 答案的图片 -->
|
|
|
+ <div
|
|
|
+ class="bg-gray-light mb-4 flex justify-center rounded-lg p-4"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ :src="item.answer"
|
|
|
+ alt="答案图片"
|
|
|
+ class="max-h-32 rounded"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <!-- 视频解析列表 -->
|
|
|
+ <div v-if="$route.query.isVideo && item.videos?.length > 0">
|
|
|
+ <div class="mb-2 text-sm font-medium text-gray-800">
|
|
|
+ 视频解析：
|
|
|
+ </div>
|
|
|
+ <ul class="space-y-2">
|
|
|
+ <template v-for="video in item.videos">
|
|
|
+ <li
|
|
|
+ class="video-item flex items-center justify-between rounded-lg border border-[#e5e7eb] p-2"
|
|
|
+ >
|
|
|
+ <span class="text-sm">{{ video.name }}</span>
|
|
|
+ <div
|
|
|
+ class="play-video bg-subject-color hover:bg-subject-dark rounded-full p-1.5 transition-colors"
|
|
|
+ @click="state.showVideo = true"
|
|
|
+ >
|
|
|
+ <i class="fas fa-circle-play text-xl"></i>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </template>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </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>
|
|
|
+ <q-dialog v-model="state.showVideo">
|
|
|
+ <q-card style="width: 60%; max-width: 60%">
|
|
|
+ <q-card-section>
|
|
|
+ <div class="text-h6">视频解析（汉字结构类型及特点）</div>
|
|
|
+ </q-card-section>
|
|
|
+
|
|
|
+ <q-card-section>
|
|
|
+ <video
|
|
|
+ class="h-full w-full"
|
|
|
+ src="http://cyberplayer.bcelive.com/videoworks/mda-kbuhu4wqdi08dwix/cyberplayer/mp4/cyberplayer-demo.mp4"
|
|
|
+ />
|
|
|
+ </q-card-section>
|
|
|
+ </q-card>
|
|
|
+ </q-dialog>
|
|
|
+ <q-dialog v-model="state.showHistory">
|
|
|
+ <q-card style="max-width: 60%">
|
|
|
+ <q-card-section>
|
|
|
+ <div class="text-h6">
|
|
|
+ 历史做题记录（下列汉字中属于独体字的是哪一项？）
|
|
|
+ </div>
|
|
|
+ </q-card-section>
|
|
|
+
|
|
|
+ <q-card-section>
|
|
|
+ <div class="px-4">
|
|
|
+ <q-timeline>
|
|
|
+ <q-timeline-entry heading>
|
|
|
+ <div class="text-xl">2023-02-11</div>
|
|
|
+ </q-timeline-entry>
|
|
|
+ <q-timeline-entry
|
|
|
+ subtitle="11:22:33"
|
|
|
+ icon="fa-solid fa-xmark "
|
|
|
+ color="red"
|
|
|
+ />
|
|
|
+ <q-timeline-entry
|
|
|
+ subtitle="14:22:33"
|
|
|
+ icon="fa-solid fa-check "
|
|
|
+ color="green"
|
|
|
+ />
|
|
|
+ </q-timeline>
|
|
|
+ <q-timeline>
|
|
|
+ <q-timeline-entry heading>
|
|
|
+ <div class="text-xl">2023-01-24</div>
|
|
|
+ </q-timeline-entry>
|
|
|
+ <q-timeline-entry
|
|
|
+ subtitle="08:22:33"
|
|
|
+ icon="fa-solid fa-check "
|
|
|
+ color="green"
|
|
|
+ />
|
|
|
+ <q-timeline-entry
|
|
|
+ subtitle="14:22:33"
|
|
|
+ icon="fa-solid fa-check "
|
|
|
+ color="green"
|
|
|
+ />
|
|
|
+ </q-timeline>
|
|
|
+ </div>
|
|
|
+ </q-card-section>
|
|
|
+ </q-card>
|
|
|
+ </q-dialog>
|
|
|
+ </StudyLayout>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { computed, onMounted, reactive, ref } from 'vue'
|
|
|
+import StudyLayout from '@/views/study/components/study-layout.vue'
|
|
|
+import { Plus } from '@element-plus/icons-vue'
|
|
|
+
|
|
|
+const state: any = reactive({
|
|
|
+ selected: null,
|
|
|
+ treeText: '',
|
|
|
+ query: {
|
|
|
+ p2: '错题',
|
|
|
+ date: {},
|
|
|
+ },
|
|
|
+ showVideo: false,
|
|
|
+ showHistory: false,
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ name: '下列汉字中属于独体字的是哪一项？',
|
|
|
+ question: 'https://picsum.photos/id/24/400/200',
|
|
|
+ answer: 'https://picsum.photos/id/26/400/150',
|
|
|
+ videos: [
|
|
|
+ {
|
|
|
+ name: '独体字与合体字的区别',
|
|
|
+ url: 'http://cyberplayer.bcelive.com/videoworks/mda-kbuhu4wqdi08dwix/cyberplayer/mp4/cyberplayer-demo.mp4',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '常见独体字结构分析',
|
|
|
+ url: 'http://cyberplayer.bcelive.com/videoworks/mda-kbuhu4wqdi08dwix/cyberplayer/mp4/cyberplayer-demo.mp4',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '找出下列选项中书写有误的汉字并改正？',
|
|
|
+ question: 'https://picsum.photos/id/24/400/200',
|
|
|
+ answer: 'https://picsum.photos/id/26/400/150',
|
|
|
+ videos: [
|
|
|
+ {
|
|
|
+ name: '汉字结构分类详解',
|
|
|
+ url: 'http://cyberplayer.bcelive.com/videoworks/mda-kbuhu4wqdi08dwix/cyberplayer/mp4/cyberplayer-demo.mp4',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '下列哪个汉字是上下结构？',
|
|
|
+ question: 'https://picsum.photos/id/24/400/200',
|
|
|
+ answer: 'https://picsum.photos/id/26/400/150',
|
|
|
+ videos: [
|
|
|
+ {
|
|
|
+ name: '汉字结构分类详解',
|
|
|
+ url: 'http://cyberplayer.bcelive.com/videoworks/mda-kbuhu4wqdi08dwix/cyberplayer/mp4/cyberplayer-demo.mp4',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '下列哪组汉字都是左右结构？',
|
|
|
+ question: 'https://picsum.photos/id/24/400/200',
|
|
|
+ answer: 'https://picsum.photos/id/26/400/150',
|
|
|
+ videos: [
|
|
|
+ {
|
|
|
+ name: '汉字结构分类详解',
|
|
|
+ url: 'http://cyberplayer.bcelive.com/videoworks/mda-kbuhu4wqdi08dwix/cyberplayer/mp4/cyberplayer-demo.mp4',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+})
|
|
|
+const dateStr = computed(() => {
|
|
|
+ if (state.query.date.from && state.query.date.to) {
|
|
|
+ return `${state.query.date.from} - ${state.query.date.to}`
|
|
|
+ }
|
|
|
+ return ''
|
|
|
+})
|
|
|
+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;
|
|
|
+ }
|
|
|
+}
|
|
|
+:deep(.date) {
|
|
|
+ .q-placeholder {
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+}
|
|
|
+:deep(.focus) {
|
|
|
+ background: rgba(0, 0, 0, 0.1) !important;
|
|
|
+}
|
|
|
+:deep(.q-tree__node--selected),
|
|
|
+:deep(.q-tree__node--selected .q-tree__node-header-content) {
|
|
|
+ color: var(--czr-main-color) !important;
|
|
|
+}
|
|
|
+// FILE (create it): src/quasar-variables.sass
|
|
|
+</style>
|
taiji_caozhaorui