study-ipad/src/views/study/chinese/index.vue

<template>
  <StudyLayout>
    <div class="grid h-full w-full grid-cols-2 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-cubes mr-2"></i>
            板块提升
            <div
              class="subject-questions-btn bg-subject-color ml-auto flex items-center rounded-full px-3 py-1 text-sm"
              @click="$router.push({ name: 'chinese-question' })"
            >
              <i class="fas fa-question-circle mr-1"></i>
              <span>更多</span>
            </div>
          </div>
        </div>
        <!-- 图表容器 -->
        <div
          class="flex flex-1 flex-col overflow-y-auto p-4"
          style="flex-wrap: unset"
        >
          <!-- 图表切换标签 -->
          <div class="mt-2 mb-4 flex space-x-2">
            <button
              :class="
                state.type === 1
                  ? 'bg-[var(--czr-main-color)] text-white'
                  : 'bg-gray-100 text-gray-600'
              "
              class="chart-tab rounded-full px-3 py-1 text-sm"
              @click="state.type = 1"
            >
              知识点掌握
            </button>
            <button
              :class="
                state.type === 2
                  ? 'bg-[var(--czr-main-color)] text-white'
                  : 'bg-gray-100 text-gray-600'
              "
              class="chart-tab rounded-full px-3 py-1 text-sm"
              @click="state.type = 2"
            >
              成绩趋势
            </button>
            <button
              :class="
                state.type === 3
                  ? 'bg-[var(--czr-main-color)] text-white'
                  : 'bg-gray-100 text-gray-600'
              "
              class="chart-tab rounded-full px-3 py-1 text-sm"
              @click="state.type = 3"
            >
              练习完成度
            </button>
          </div>

          <!-- 知识点掌握情况图表 -->
          <div class="mb-6 flex-1">
            <chart1 v-if="state.type === 1" />
            <chart2 v-if="state.type === 2" />
            <chart3 v-if="state.type === 3" />
          </div>

          <!-- 统计卡片 -->
          <div class="mt-4 grid grid-cols-2 gap-4 md:grid-cols-4">
            <div
              class="stat-card rounded-lg border-l-4 border-blue-500 bg-gray-50 p-3"
            >
              <div class="text-xs text-gray-500">当前难度等级</div>
              <div class="mt-1 text-xl font-bold text-gray-800">S</div>
            </div>
            <div
              class="stat-card rounded-lg border-l-4 border-green-500 bg-gray-50 p-3"
            >
              <div class="text-xs text-gray-500">正确率</div>
              <div class="mt-1 text-xl font-bold text-gray-800">85%</div>
            </div>
            <div
              class="stat-card rounded-lg border-l-4 border-yellow-500 bg-gray-50 p-3"
            >
              <div class="text-xs text-gray-500">待提升板块</div>
              <div class="mt-1 text-xl font-bold text-gray-800">文言文</div>
            </div>
            <div
              class="stat-card rounded-lg border-l-4 border-purple-500 bg-gray-50 p-3"
            >
              <div class="text-xs text-gray-500">优秀板块</div>
              <div class="mt-1 text-xl font-bold text-gray-800">作文</div>
            </div>
          </div>

          <div class="flex items-center justify-between py-3">
            <div class="font-semibold text-gray-800">最近刷题记录</div>
            <div class="ml-auto">
              <q-input
                class="date w-[250px]"
                rounded
                standout="focus"
                :dense="true"
                v-model="dateStr"
                readonly
              >
                <template v-slot:prepend>
                  <q-icon name="event" class="cursor-pointer" color="">
                    <q-popup-proxy
                      cover
                      transition-show="scale"
                      transition-hide="scale"
                    >
                      <q-date
                        v-model="state.query.date"
                        mask="YYYY-MM-DD"
                        range
                      >
                        <div class="row items-center justify-end">
                          <q-btn
                            v-close-popup
                            label="关闭"
                            color="primary"
                            flat
                          />
                        </div>
                      </q-date>
                    </q-popup-proxy>
                  </q-icon>
                </template>
                <template v-slot:append>
                  <q-icon
                    v-if="dateStr"
                    name="clear"
                    class="cursor-pointer"
                    @click="state.query.date = {}"
                  />
                </template>
              </q-input>
            </div>
          </div>
          <div class="max-h-[120px] overflow-y-auto">
            <div
              class="record-item cursor-pointer rounded-lg border border-gray-100 p-2"
              @click="$router.push({ name: 'chinese-question' })"
            >
              <div class="flex items-center justify-between">
                <span class="text-sm font-medium">文言文阅读专项</span>
              </div>
              <div class="mt-1 text-xs text-gray-500">
                2025-07-06 | 25题（<span class="text-red">5</span>/<span
                  class="text-green"
                  >20</span
                >） | 正确率80%
              </div>
            </div>
            <div
              class="record-item cursor-pointer rounded-lg border border-gray-100 p-2"
              @click="$router.push({ name: 'chinese-question' })"
            >
              <div class="flex items-center justify-between">
                <span class="text-sm font-medium">文言文阅读专项</span>
              </div>
              <div class="mt-1 text-xs text-gray-500">
                2025-07-06 | 25题（<span class="text-red">5</span>/<span
                  class="text-green"
                  >20</span
                >） | 正确率80%
              </div>
            </div>
            <div
              class="record-item cursor-pointer rounded-lg border border-gray-100 p-2"
              @click="$router.push({ name: 'chinese-question' })"
            >
              <div class="flex items-center justify-between">
                <span class="text-sm font-medium">文言文阅读专项</span>
              </div>
              <div class="mt-1 text-xs text-gray-500">
                2025-07-06 | 25题（<span class="text-red">5</span>/<span
                  class="text-green"
                  >20</span
                >） | 正确率80%
              </div>
            </div>
            <div
              class="record-item cursor-pointer rounded-lg border border-gray-100 p-2"
              @click="$router.push({ name: 'chinese-question' })"
            >
              <div class="flex items-center justify-between">
                <span class="text-sm font-medium">文言文阅读专项</span>
              </div>
              <div class="mt-1 text-xs text-gray-500">
                2025-07-06 | 25题（<span class="text-red">5</span>/<span
                  class="text-green"
                  >20</span
                >） | 正确率80%
              </div>
            </div>
            <div
              class="record-item cursor-pointer rounded-lg border border-gray-100 p-2"
              @click="$router.push({ name: 'chinese-question' })"
            >
              <div class="flex items-center justify-between">
                <span class="text-sm font-medium">文言文阅读专项</span>
              </div>
              <div class="mt-1 text-xs text-gray-500">
                2025-07-06 | 25题（<span class="text-red">5</span>/<span
                  class="text-green"
                  >20</span
                >） | 正确率80%
              </div>
            </div>
            <div
              class="record-item cursor-pointer rounded-lg border border-gray-100 p-2"
              @click="$router.push({ name: 'chinese-question' })"
            >
              <div class="flex items-center justify-between">
                <span class="text-sm font-medium">文言文阅读专项</span>
              </div>
              <div class="mt-1 text-xs text-gray-500">
                2025-07-06 | 25题（<span class="text-red">5</span>/<span
                  class="text-green"
                  >20</span
                >） | 正确率80%
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-span-1 flex flex-col gap-6 overflow-hidden px-0.5">
        <div
          class="flex flex-1 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-calendar-alt mr-2"></i>
              考形训练
              <div class="absolute right-2 ml-auto flex">
                <q-select
                  class="select ml-4 w-[120px]"
                  rounded
                  standout="focus"
                  v-model="state.query.p1"
                  :options="[
                    { label: '近三个月', value: '近三个月' },
                    { label: '本学期', value: '本学期' },
                    { label: '上学期', value: '上学期' },
                    { label: '本年度', value: '本年度' },
                    { label: '全部', value: '全部' },
                  ]"
                  :dense="true"
                >
                </q-select>
                <q-select
                  class="select ml-4 w-[120px]"
                  rounded
                  standout="focus"
                  v-model="state.query.p2"
                  :options="[
                    { label: '全部类型', value: '全部类型' },
                    { label: '周测', value: '周测' },
                    { label: '月考', value: '月考' },
                    { label: '期中考试', value: '期中考试' },
                    { label: '期末考试', value: '期末考试' },
                  ]"
                  :dense="true"
                >
                </q-select>
              </div>
            </div>
          </div>
          <div class="h-[200px]">
            <chart4 />
          </div>
          <div class="flex-1 overflow-y-auto p-6">
            <div class="timeline-date">2023年12月</div>
            <div class="exam-item mb-3 rounded-lg border border-gray-300 p-3">
              <div class="mb-2 flex items-start justify-between">
                <div>
                  <div class="flex items-center font-semibold">
                    <span
                      class="bg-exam-weekly mr-2 h-2 w-2 rounded-full"
                    ></span>
                    周测
                  </div>
                  <div class="mt-0.5 text-sm text-gray-500">12月22日</div>
                </div>
                <span class="text-sm font-medium text-gray-800">88分</span>
              </div>
              <div class="mt-3 grid grid-cols-2 gap-3 text-sm md:grid-cols-4">
                <div class="rounded bg-gray-50 p-2 text-center">
                  <div class="text-xs text-gray-500">试卷难度</div>
                  <div class="font-medium text-gray-800">S</div>
                </div>
                <div class="rounded bg-gray-50 p-2 text-center">
                  <div class="text-xs text-gray-500">用时</div>
                  <div class="font-medium text-gray-800">45分钟</div>
                </div>
                <div class="rounded bg-gray-50 p-2 text-center">
                  <div class="text-xs text-gray-500">得分</div>
                  <div class="font-medium text-gray-800">96分</div>
                </div>
                <div class="rounded bg-gray-50 p-2 text-center">
                  <div class="text-xs text-gray-500">错题</div>
                  <div class="font-medium text-red-500">3题</div>
                </div>
              </div>
              <div class="mt-3">
                <div class="mb-1 text-xs text-gray-500">错题类型：</div>
                <div class="flex flex-wrap gap-2">
                  <span
                    class="mistake-tag rounded-full bg-red-100 px-2 py-0.5 text-xs text-red-800"
                    >阅读理解(2)</span
                  >
                  <span
                    class="mistake-tag rounded-full bg-red-100 px-2 py-0.5 text-xs text-red-800"
                    >基础知识(1)</span
                  >
                </div>
              </div>
              <div class="mt-3 flex justify-end">
                <button
                  class="text-subject-color flex items-center text-xs hover:underline"
                  @click="$router.push({ name: 'chinese-question' })"
                >
                  <i class="fas fa-file-alt mr-1"></i>
                  查看详情
                </button>
              </div>
            </div>
            <div class="exam-item mb-3 rounded-lg border border-gray-300 p-3">
              <div class="mb-2 flex items-start justify-between">
                <div>
                  <div class="flex items-center font-semibold">
                    <span
                      class="bg-exam-weekly mr-2 h-2 w-2 rounded-full"
                    ></span>
                    期中
                  </div>
                  <div class="mt-0.5 text-sm text-gray-500">12月12日</div>
                </div>
                <span class="text-sm font-medium text-gray-800">88分</span>
              </div>
              <div class="mt-3 grid grid-cols-2 gap-3 text-sm md:grid-cols-4">
                <div class="rounded bg-gray-50 p-2 text-center">
                  <div class="text-xs text-gray-500">试卷难度</div>
                  <div class="font-medium text-gray-800">S</div>
                </div>
                <div class="rounded bg-gray-50 p-2 text-center">
                  <div class="text-xs text-gray-500">用时</div>
                  <div class="font-medium text-gray-800">45分钟</div>
                </div>
                <div class="rounded bg-gray-50 p-2 text-center">
                  <div class="text-xs text-gray-500">得分</div>
                  <div class="font-medium text-gray-800">96分</div>
                </div>
                <div class="rounded bg-gray-50 p-2 text-center">
                  <div class="text-xs text-gray-500">错题</div>
                  <div class="font-medium text-red-500">3题</div>
                </div>
              </div>
              <div class="mt-3">
                <div class="mb-1 text-xs text-gray-500">错题类型：</div>
                <div class="flex flex-wrap gap-2">
                  <span
                    class="mistake-tag rounded-full bg-red-100 px-2 py-0.5 text-xs text-red-800"
                    >阅读理解(2)</span
                  >
                  <span
                    class="mistake-tag rounded-full bg-red-100 px-2 py-0.5 text-xs text-red-800"
                    >基础知识(1)</span
                  >
                </div>
              </div>
              <div class="mt-3 flex justify-end">
                <button
                  class="text-subject-color flex items-center text-xs hover:underline"
                  @click="$router.push({ name: 'chinese-question' })"
                >
                  <i class="fas fa-file-alt mr-1"></i>
                  查看详情
                </button>
              </div>
            </div>
            <div class="timeline-date">2023年11月</div>
            <div class="exam-item mb-3 rounded-lg border border-gray-300 p-3">
              <div class="mb-2 flex items-start justify-between">
                <div>
                  <div class="flex items-center font-semibold">
                    <span
                      class="bg-exam-weekly mr-2 h-2 w-2 rounded-full"
                    ></span>
                    周测
                  </div>
                  <div class="mt-0.5 text-sm text-gray-500">12月22日</div>
                </div>
                <span class="text-sm font-medium text-gray-800">88分</span>
              </div>
              <div class="mt-3 grid grid-cols-2 gap-3 text-sm md:grid-cols-4">
                <div class="rounded bg-gray-50 p-2 text-center">
                  <div class="text-xs text-gray-500">试卷难度</div>
                  <div class="font-medium text-gray-800">S</div>
                </div>
                <div class="rounded bg-gray-50 p-2 text-center">
                  <div class="text-xs text-gray-500">用时</div>
                  <div class="font-medium text-gray-800">45分钟</div>
                </div>
                <div class="rounded bg-gray-50 p-2 text-center">
                  <div class="text-xs text-gray-500">得分</div>
                  <div class="font-medium text-gray-800">96分</div>
                </div>
                <div class="rounded bg-gray-50 p-2 text-center">
                  <div class="text-xs text-gray-500">错题</div>
                  <div class="font-medium text-red-500">3题</div>
                </div>
              </div>
              <div class="mt-3">
                <div class="mb-1 text-xs text-gray-500">错题类型：</div>
                <div class="flex flex-wrap gap-2">
                  <span
                    class="mistake-tag rounded-full bg-red-100 px-2 py-0.5 text-xs text-red-800"
                    >阅读理解(2)</span
                  >
                  <span
                    class="mistake-tag rounded-full bg-red-100 px-2 py-0.5 text-xs text-red-800"
                    >基础知识(1)</span
                  >
                </div>
              </div>
              <div class="mt-3 flex justify-end">
                <button
                  class="text-subject-color flex items-center text-xs hover:underline"
                  @click="$router.push({ name: 'chinese-question' })"
                >
                  <i class="fas fa-file-alt mr-1"></i>
                  查看详情
                </button>
              </div>
            </div>
            <div class="exam-item mb-3 rounded-lg border border-gray-300 p-3">
              <div class="mb-2 flex items-start justify-between">
                <div>
                  <div class="flex items-center font-semibold">
                    <span
                      class="bg-exam-weekly mr-2 h-2 w-2 rounded-full"
                    ></span>
                    期中
                  </div>
                  <div class="mt-0.5 text-sm text-gray-500">12月12日</div>
                </div>
                <span class="text-sm font-medium text-gray-800">88分</span>
              </div>
              <div class="mt-3 grid grid-cols-2 gap-3 text-sm md:grid-cols-4">
                <div class="rounded bg-gray-50 p-2 text-center">
                  <div class="text-xs text-gray-500">试卷难度</div>
                  <div class="font-medium text-gray-800">S</div>
                </div>
                <div class="rounded bg-gray-50 p-2 text-center">
                  <div class="text-xs text-gray-500">用时</div>
                  <div class="font-medium text-gray-800">45分钟</div>
                </div>
                <div class="rounded bg-gray-50 p-2 text-center">
                  <div class="text-xs text-gray-500">得分</div>
                  <div class="font-medium text-gray-800">96分</div>
                </div>
                <div class="rounded bg-gray-50 p-2 text-center">
                  <div class="text-xs text-gray-500">错题</div>
                  <div class="font-medium text-red-500">3题</div>
                </div>
              </div>
              <div class="mt-3">
                <div class="mb-1 text-xs text-gray-500">错题类型：</div>
                <div class="flex flex-wrap gap-2">
                  <span
                    class="mistake-tag rounded-full bg-red-100 px-2 py-0.5 text-xs text-red-800"
                    >阅读理解(2)</span
                  >
                  <span
                    class="mistake-tag rounded-full bg-red-100 px-2 py-0.5 text-xs text-red-800"
                    >基础知识(1)</span
                  >
                </div>
              </div>
              <div class="mt-3 flex justify-end">
                <button
                  class="text-subject-color flex items-center text-xs hover:underline"
                  @click="$router.push({ name: 'chinese-question' })"
                >
                  <i class="fas fa-file-alt mr-1"></i>
                  查看详情
                </button>
              </div>
            </div>
          </div>
        </div>
        <div
          class="flex 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-clock mr-2"></i>
              错题统计
              <div
                class="subject-questions-btn bg-subject-color ml-auto flex items-center rounded-full px-3 py-1 text-sm"
                @click="$router.push({ name: 'chinese-question' })"
              >
                <i class="fas fa-question-circle mr-1"></i>
                <span>查看详情</span>
              </div>
            </div>
          </div>
          <div class="flex flex-col p-4">
            <div class="grid grid-cols-3 gap-4">
              <div class="flex flex-1 items-center rounded-lg bg-gray-50 p-3">
                <div
                  class="mr-3 flex h-10 w-10 items-center justify-center rounded-full bg-blue-100"
                >
                  <i class="fas fa-clipboard-list text-blue-600"></i>
                </div>
                <div>
                  <div class="text-sm text-gray-500">本学科总做题数</div>
                  <div class="text-lg font-bold">246题</div>
                </div>
              </div>
              <div class="flex flex-1 items-center rounded-lg bg-gray-50 p-3">
                <div
                  class="mr-3 flex h-10 w-10 items-center justify-center rounded-full bg-red-100"
                >
                  <i class="fas fa-times-circle text-red-600"></i>
                </div>
                <div>
                  <div class="text-sm text-gray-500">错题数</div>
                  <div class="text-lg font-bold">59题</div>
                </div>
              </div>
              <div class="flex flex-1 items-center rounded-lg bg-gray-50 p-3">
                <div
                  class="mr-3 flex h-10 w-10 items-center justify-center rounded-full bg-red-100"
                >
                  <i class="fas fa-times-circle text-red-600"></i>
                </div>
                <div>
                  <div class="text-sm text-gray-500">错误率</div>
                  <div class="text-lg font-bold">23%</div>
                </div>
              </div>
            </div>
            <div class="mt-4 border-t border-gray-100 pt-4">
              <div class="mb-3 text-sm font-medium">错题最多的知识点</div>
              <div class="flex flex-wrap gap-2">
                <span
                  class="mistake-tag rounded-full bg-red-100 px-2 py-1 text-xs text-red-800"
                  >文言文虚词 (12题)</span
                >
                <span
                  class="mistake-tag rounded-full bg-red-100 px-2 py-1 text-xs text-red-800"
                  >现代文阅读理解 (9题)</span
                >
                <span
                  class="mistake-tag rounded-full bg-red-100 px-2 py-1 text-xs text-red-800"
                  >诗歌鉴赏 (7题)</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </StudyLayout>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive } from 'vue'
import StudyLayout from '@/views/study/components/study-layout.vue'
import chart1 from './chart-1.vue'
import chart2 from './chart-2.vue'
import chart3 from './chart-3.vue'
import chart4 from './chart-4.vue'

const state: any = reactive({
  type: 1,
  query: {
    p1: '近三个月',
    p2: '全部类型',
    date: {},
  },
})
const dateStr = computed(() => {
  if (state.query.date.from && state.query.date.to) {
    return `${state.query.date.from} - ${state.query.date.to}`
  }
  return ''
})
onMounted(() => {})
</script>

<style lang="scss" scoped>
.subject-questions-btn {
  transition: all 0.2s ease;
}

.subject-questions-btn:hover {
  background-color: var(--czr-main-color);
  transform: translateY(-2px);
}

.stat-card {
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.exam-item {
  transition: all 0.2s ease;
  position: relative;
}

.exam-item:hover {
  background-color: rgba(67, 97, 238, 0.05);
}

.mistake-tag {
  cursor: pointer;
  transition: all 0.2s ease;
}

.mistake-tag:hover {
  background-color: rgba(239, 68, 68, 0.2);
  transform: scale(1.05);
}

.progress-ring {
  transform: rotate(-90deg);
  width: 40px;
  height: 40px;
}

.progress-ring-circle {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.5s ease;
}
/* 时间轴样式 */
.timeline {
  position: relative;
  padding-left: 2rem;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0.5rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #e5e7eb;
}

.timeline-date-group {
  margin-bottom: 1.5rem;
}

.timeline-date {
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
}

.timeline-date::before {
  content: '';
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: white;
  border: 2px solid #4361ee;
  margin-right: 0.5rem;
  z-index: 10;
  position: relative;
}
:deep(.select) {
  .ellipsis {
    color: #ffffff;
  }
  .q-select__dropdown-icon {
    color: #ffffff;
  }
  .focus {
    background: rgba(0, 0, 0, 0.1);
  }
}
</style>