designer-hub/packages/app/src/pages/home/components/class-item.vue

<script lang="ts" setup>
import { PropType } from 'vue'
import { frame, peoples, polygon16 } from '../../../core/libs/svgs'
import { Content } from '../../../core/libs/models'
import dayjs from 'dayjs'
import { useRouter } from '../../../core/utils/router'

defineProps({
  customClass: {
    type: String,
    default: () => '',
  },
  title: {
    type: String,
    default: () => '',
  },
  options: {
    type: Object as PropType<Content>,
    default: () => ({}),
  },
})
const router = useRouter()
</script>
<template>
  <view
    class="relative h-43 flex items-end"
    :class="[customClass]"
    @click="router.push(`/pages/home/classmates-detail/index?id=${options.id}`)"
  >
    <view class="absolute left-0 bottom-0 rounded-2xl overflow-hidden">
      <wd-img
        custom-class="vertical-bottom"
        width="136"
        height="172"
        mode="scaleToFill"
        :src="options.bannerUrl"
      />
      <div
        class="absolute left-2.5 bottom-2.5 px-2 py-1 bg-black/30 rounded-[20px] backdrop-blur-[10px]"
      >
        <div class="text-white text-[10px] font-normal font-['PingFang_SC'] leading-relaxed">
          <!-- 米兰2班 -->
          {{ options.classGrade }}
        </div>
      </div>
    </view>
    <div
      class="w-full h-[145px] pl-39 pt-6 pr-6 pb-6 flex flex-col box-border bg-white rounded-2xl shadow"
    >
      <div class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-normal">
        <!-- 2024届米兰国际家具展 -->
        {{ options.title }}
      </div>

      <view
        class="flex items-center justify-between text-black/60 text-sm font-normal font-['PingFang_SC'] leading-[34px]"
      >
        <wd-img width="18" height="18" :src="frame"></wd-img>
        <div class="">{{ dayjs(options.studyStartDate).format('MM-DD') }}</div>
        <wd-img custom-class="mx-1" width="5" height="5" :src="polygon16" />
        <div>{{ dayjs(options.studyEndDate).format('MM-DD') }}</div>
        <view class="flex-1"></view>
        <wd-img :src="peoples" width="16" height="16"></wd-img>
        <div class="ml-1">{{ options.studyPersonCount }}</div>
      </view>
      <view class="flex-1"></view>
      <view
        class="flex justify-between text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[34px]"
      >
        <div class="">班长:{{ options.studyMonitor }}</div>
        <div class="">领队:{{ options.studyLeader }}</div>
      </view>
    </div>
  </view>
</template>