designer-hub/packages/app/src/pages-sub/home/components/offline-activity-item.vue

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

defineProps({
  customClass: {
    type: String,
    default: () => '',
  },
  options: {
    type: Object as PropType<Content>,
    default: () => ({}),
  },
})
const router = useRouter()
</script>
<template>
  <div @click="router.push(`/pages-sub/home/classmates-detail/index?id=${options.id}`)">
    <card :custom-class="[customClass, 'p-0!']">
      <view class="relative aspect-[1.72/1]">
        <wd-img
          width="100%"
          height="100%"
          custom-class="vertical-bottom"
          class="w-[347px] h-[202px] rounded-tl-2xl rounded-tr-2xl"
          mode="aspectFill"
          :src="options.bannerUrl"
        />
        <!--        <template v-if="dayjs().isAfter(dayjs(options?.hostDate).add(1, 'd'))">-->
        <!--          <div-->
        <!--            class="absolute top-4 right-4 px-2.5 bg-black/30 rounded-[20px] backdrop-blur-[15px]"-->
        <!--          >-->
        <!--            <div class="text-white text-xs font-normal font-['PingFang_SC'] leading-relaxed">-->
        <!--              已结束-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </template>-->
        <div
          class="absolute top-4 left-4 px-2.5 rounded-md border border-solid border-white justify-center items-center gap-2.5 inline-flex"
        >
          <div class="text-white text-xs font-normal font-['PingFang_SC'] leading-normal">
            第{{ options.periodsCount }}期
          </div>
        </div>
      </view>
      <div class="p-5 bg-white rounded-bl-[20px] rounded-br-[20px] shadow">
        <div
          class="text-black text-base font-normal font-['PingFang_SC'] leading-normal text-ellipsis line-clamp-1 overflow-hidden"
        >
          {{ options.title }}
        </div>
        <view class="mt-1.5 flex items-center mb-4">
          <wd-img custom-class="vertical-bottom" :src="frame" width="20" height="20"></wd-img>
          <div
            class="flex items-center text-black/60 text-sm font-normal font-['PingFang_SC'] leading-[34px]"
          >
            <!-- <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> -->
            {{ dayjs(options?.hostDate).format('YYYY-MM-DD') }}
          </div>
        </view>
        <view class="flex gap-4">
          <div
            class="inline-block px-2.5 rounded-md border border-solid border-black/30 backdrop-blur-[6px] flex justify-center items-center"
          >
            <div class="text-black/60 text-xs font-normal font-['PingFang_SC'] leading-normal">
              举办方：{{ options.activityHost }}
            </div>
          </div>
          <div
            v-if="options.supportBrand"
            class="inline-block px-2.5 rounded-md border border-solid border-black/30 backdrop-blur-[6px] flex justify-center items-center"
          >
            <div class="text-black/60 text-xs font-normal font-['PingFang_SC'] leading-normal">
              赞助品牌：{{ options.supportBrand }}
            </div>
          </div>
        </view>
      </div>
    </card>
  </div>
</template>