ieplus-app/src/pagesStudy/pages/study-plan/components/page-header.vue

<template>
  <view class="relative">
    <ie-image :is-oss="true" src="/study-bg5.png" customClass="w-full h-[555rpx] absolute top-0 left-0 z-0" />
    <ie-image :is-oss="true" src="/study-bg6.png" customClass="w-220 h-205 absolute top-83 right-38 z-1" />
    <view class="relative z-2">
      <view class="pt-122 ml-43">
        <ie-image :is-oss="true" src="/study-title2.png" customClass="w-240 h-52" />
        <view class="mt-22 text-24 text-fore-light"> 每天按计划学习，让进步看得见~</view>
      </view>
      <view class="mt-32 mx-30 px-40 py-28 rounded-10 bg-white flex items-center justify-between">
        <view v-for="(item, index) in stat" :key="item.desc" class="text-start">
          <view class="">
            <text class="text-36 text-fore-title font-bold">{{ item.data }}</text>
            <text class="ml-8 text-24 text-fore-light">{{ item.unit }}</text>
          </view>
          <view class="mt-8 text-24 text-fore-light">{{ item.desc }}</view>
        </view>
      </view>
    </view>

  </view>
</template>
<script lang="ts" setup>
import { STUDY_PLAN_STATS, STUDY_PLAN } from '@/types/injectionSymbols';
const studyPlan = inject(STUDY_PLAN);
const studyPlanStatsRef = inject(STUDY_PLAN_STATS);

const stat = computed(() => {
  const studyPlanStats = studyPlanStatsRef?.value;
  return [
    {
      data: getValue(studyPlanStats?.doneDay),
      unit: '天',
      desc: '本月已完成'
    },
    {
      data: getValue(studyPlanStats?.undoneDay),
      unit: '天',
      desc: '本月未完成'
    },
    {
      data: getValue(studyPlanStats?.videoTimes),
      unit: 'h',
      desc: '学习时长'
    },
    {
      data: getValue(studyPlanStats?.questionCnt),
      unit: '题',
      desc: '答题总数'
    }
  ]
});
const getValue = (val?: number) => {
  return val || 0;
}
</script>
<style lang="scss" scoped></style>