<template>
  <view class="h-full">
    <vhs-exam-history-student v-if="isStudent" />
    <vhs-exam-history-teacher v-else />
  </view>
</template>
<script lang="ts" setup>
import VhsExamHistoryStudent from './vhs-exam-history-student.vue';
import VhsExamHistoryTeacher from './vhs-exam-history-teacher.vue';
import { useUserStore } from '@/store/userStore';

const { isStudent } = storeToRefs(useUserStore());
</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>