ieplus-app/src/pagesStudy/pages/exam-start/components/exam-subtitle.vue

<template>
  <view class="px-20 py-14 bg-back flex justify-between items-center gap-x-20">
    <text class="flex-1 min-w-1 text-26 ellipsis-1">{{ pageSubtitle }}</text>
    <view class="flex items-baseline">
      <text class="text-34 text-primary font-bold">{{ virtualCurrentIndex + 1 }}</text>/
      <text class="text-28 text-fore-subtitle">{{ virtualTotalCount }}</text>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { Transfer } from '@/types';
import { EXAM_PAGE_OPTIONS, EXAM_DATA } from '@/types/injectionSymbols';
import { useExam } from '@/composables/useExam';

const examPageOptions = inject(EXAM_PAGE_OPTIONS) || {} as Transfer.ExamAnalysisPageOptions;
const examData = inject(EXAM_DATA) || {} as ReturnType<typeof useExam>;
const { virtualCurrentIndex, virtualTotalCount } = examData;

const pageSubtitle = computed(() => {
  if (examPageOptions) {
    const { name } = examPageOptions;
    return name;
  }
  return '';
});
</script>
<style lang="scss" scoped></style>