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-1 overflow-y-auto p-4">
          <!-- 图表切换标签 -->
          <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 h-[300px]">
            <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-2xl font-bold text-gray-800">128</div>
              <div class="mt-1 text-xs text-green-500">
                <i class="fas fa-arrow-up"></i> 12% 较上月
              </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-2xl font-bold text-gray-800">85%</div>
              <div class="mt-1 text-xs text-green-500">
                <i class="fas fa-arrow-up"></i> 3% 较上月
              </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-2xl font-bold text-gray-800">78%</div>
              <div class="mt-1 text-xs text-red-500">
                <i class="fas fa-arrow-down"></i> 2% 较上月
              </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-2xl font-bold text-gray-800">86分</div>
              <div class="mt-1 text-xs text-green-500">
                <i class="fas fa-arrow-up"></i> 5分 较上月
              </div>
            </div>
          </div>

          <!-- 薄弱知识点提示 -->
          <div
            class="mt-6 rounded-lg border border-yellow-100 bg-yellow-50 p-3"
          >
            <div class="flex items-center font-semibold text-gray-800">
              <i class="fas fa-lightbulb mr-2 text-yellow-500"></i>
              学习建议
            </div>
            <div class="mt-2 text-sm text-gray-600">
              根据你的学习数据，建议重点加强
              <span class="font-medium text-red-500">诗歌鉴赏</span> 和
              <span class="font-medium text-red-500">文言文</span> 部分的练习。
              这两个知识点的掌握程度低于你的平均水平，可通过专项练习提升。
            </div>
            <button
              class="text-subject-color mt-3 flex items-center text-sm hover:underline"
            >
              <i class="fas fa-graduation-cap mr-1"></i>
              查看推荐练习
            </button>
          </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-->
              <!--                class="ml-auto flex space-x-2 text-xs font-normal text-gray-800"-->
              <!--              >-->
              <!--                <div class="relative">-->
              <!--                  <select-->
              <!--                    class="focus:ring-subject-color/50 appearance-none rounded-lg bg-gray-100 py-1.5 pr-8 pl-3 text-sm focus:ring-2 focus:outline-none"-->
              <!--                  >-->
              <!--                    <option value="recent">最近三个月</option>-->
              <!--                    <option value="this_term">本学期</option>-->
              <!--                    <option value="last_term">上学期</option>-->
              <!--                    <option value="this_year">本年度</option>-->
              <!--                    <option value="all">全部</option>-->
              <!--                  </select>-->
              <!--                  <div-->
              <!--                    class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500"-->
              <!--                  >-->
              <!--                    <i class="fas fa-chevron-down text-xs"></i>-->
              <!--                  </div>-->
              <!--                </div>-->
              <!--                <div class="relative">-->
              <!--                  <select-->
              <!--                    class="focus:ring-subject-color/50 appearance-none rounded-lg bg-gray-100 py-1.5 pr-8 pl-3 text-sm focus:ring-2 focus:outline-none"-->
              <!--                  >-->
              <!--                    <option value="all">全部类型</option>-->
              <!--                    <option value="weekly">周测</option>-->
              <!--                    <option value="monthly">月考</option>-->
              <!--                    <option value="midterm">期中考试</option>-->
              <!--                    <option value="final">期末考试</option>-->
              <!--                  </select>-->
              <!--                  <div-->
              <!--                    class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500"-->
              <!--                  >-->
              <!--                    <i class="fas fa-chevron-down text-xs"></i>-->
              <!--                  </div>-->
              <!--                </div>-->
              <!--              </div>-->
            </div>
          </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">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">20题</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 class="rounded bg-gray-50 p-2 text-center">
                  <div class="text-xs text-gray-500">正确率</div>
                  <div class="font-medium text-green-500">85%</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">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">20题</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 class="rounded bg-gray-50 p-2 text-center">
                  <div class="text-xs text-gray-500">正确率</div>
                  <div class="font-medium text-green-500">85%</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">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">20题</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 class="rounded bg-gray-50 p-2 text-center">
                  <div class="text-xs text-gray-500">正确率</div>
                  <div class="font-medium text-green-500">85%</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">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">20题</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 class="rounded bg-gray-50 p-2 text-center">
                  <div class="text-xs text-gray-500">正确率</div>
                  <div class="font-medium text-green-500">85%</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="flex gap-4">
              <div
                class="flex flex-1 items-center justify-between rounded-lg bg-gray-50 p-3"
              >
                <div class="flex items-center">
                  <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>

              <div
                class="flex flex-1 items-center justify-between rounded-lg bg-gray-50 p-3"
              >
                <div class="flex items-center">
                  <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>

              <div
                class="flex flex-1 items-center justify-between rounded-lg bg-gray-50 p-3"
              >
                <div class="flex items-center">
                  <div
                    class="mr-3 flex h-10 w-10 items-center justify-center rounded-full bg-green-100"
                  >
                    <i class="fas fa-check-circle text-green-600"></i>
                  </div>
                  <div>
                    <div class="text-sm text-gray-500">正确率</div>
                    <div class="text-lg font-bold">76%</div>
                  </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 { 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'

const state: any = reactive({
  type: 1,
  query: {
    p1: '近三个月',
    p2: '全部类型',
  },
})
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>