score-stat.vue 1.2 KB

123456789101112131415161718192021222324252627282930313233
  1. <template>
  2. <view class="shadow-card sticky bottom-20 px-16 py-26 bg-white rounded-15 mt-20">
  3. <view class="text-30 text-fore-title font-bold">得分分布</view>
  4. <view class="mt-20 mx-10 flex items-center bg-back rounded-10 py-30">
  5. <view class="flex-1 text-center">
  6. <view class="text-40 text-fore-title font-bold">{{ stats.maxScore}}</view>
  7. <view class="mt-5 text-28 text-fore-light">最高分</view>
  8. </view>
  9. <view class="flex-1 text-center">
  10. <view class="text-40 text-fore-title font-bold">{{ stats.averageScore }}</view>
  11. <view class="mt-5 text-28 text-fore-light">平均分</view>
  12. </view>
  13. <view class="flex-1 text-center">
  14. <view class="text-40 text-fore-title font-bold">{{ hitRate }}%</view>
  15. <view class="mt-5 text-28 text-fore-light">击败考生</view>
  16. </view>
  17. </view>
  18. </view>
  19. </template>
  20. <script lang="ts" setup>
  21. import { Study } from '@/types';
  22. const props = defineProps<{
  23. data: Study.Examinee;
  24. }>();
  25. const stats = computed(() => {
  26. return props.data.stats || {};
  27. });
  28. const hitRate = computed(() => {
  29. return stats.value.hitRate === 100 ? 99 : stats.value.hitRate;
  30. });
  31. </script>
  32. <style lang="scss" scoped></style>