ieplus-app/src/pagesStudy/pages/study-history/components/ie-exam-history.vue

<template>
  <view class="h-full bg-white flex flex-col">
    <view class="px-30 py-20 flex gap-x-20">
      <view class="exam-type-item" :class="{ 'is-active': examType === EnumExamRecordType.SIMULATED }"
        @click="handleChangeExamType(EnumExamRecordType.SIMULATED)">
        <ie-image src="/pagesStudy/static/image/icon-exam-test.png" custom-class="w-64 h-60" />
        <view class="exam-type-text">模拟仿真</view>
      </view>
      <view class="exam-type-item" :class="{ 'is-active': examType === EnumExamRecordType.HOMEWORK }"
        @click="handleChangeExamType(EnumExamRecordType.HOMEWORK)">
        <ie-image src="/pagesStudy/static/image/icon-exam-homework.png" custom-class="w-64 h-60" />
        <view class="exam-type-text">组卷作业</view>
      </view>
    </view>
    <scroll-view class="flex-1 min-h-1" scroll-y>
      <ie-exam-history-student v-if="isStudent" :exam-type="examType" />
      <ie-exam-history-teacher v-else :exam-type="examType" />
    </scroll-view>
  </view>
</template>
<script lang="ts" setup>
import { EnumExamRecordType } from '@/common/enum';
import IeExamHistoryStudent from './ie-exam-history-student.vue';
import IeExamHistoryTeacher from './ie-exam-history-teacher.vue';
import { useUserStore } from '@/store/userStore';
const { isStudent } = storeToRefs(useUserStore());
const examType = ref(EnumExamRecordType.SIMULATED);

const handleChangeExamType = (type: EnumExamRecordType) => {
  examType.value = type;
}
</script>
<style lang="scss" scoped>
.exam-type-item {
  @apply flex-1 h-175 rounded-15 bg-[#F5F5F5] flex flex-col items-center justify-center gap-y-10;
}

.exam-type-text {
  @apply text-28 text-fore-title font-bold;
}

.is-active {
  @apply bg-[#E6F7FF] relative;

  &::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 10px solid #E6F7FF;
  }

  .exam-type-text {
    @apply text-primary;
  }
}
</style>