designer-hub/packages/app/src/components/hot-activity-item.vue

<script lang="ts" setup>
import dayjs from 'dayjs'
import { Activity, StudyTour } from '../core/libs/models'
import TiltedButton from './tilted-button.vue'
import ActivityCountDown from '@/pages/home/components/activity-count-down.vue'
import ButtonEvo from './button-evo.vue'
import { useRouter } from '../core/utils/router'

withDefaults(defineProps<{ options?: StudyTour | Activity; type?: 'studyTour' | 'activity' }>(), {})
const router = useRouter()
</script>
<template>
  <view class="relative w-full h-full box-border flex m-a">
    <view class="w-full h-full flex flex-col justify-between pt-14 box-border px-3.5">
      <!-- <view class="flex"></view> -->
      <div class="w-[321px] h-[88px] relative">
        <div class="w-[94px] h-3 left-[185px] top-[64px] absolute">
          <div
            class="left-0 top-0 absolute text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[34px] flex items-center"
          >
            <!-- 07.15 08.10 -->
            {{ dayjs(options?.studyStartTime || options?.planStudyStartTime).format('MM.DD') }}
            <wd-icon name="play" size="22px"></wd-icon>
            {{ dayjs(options?.studyEndTime || options?.planStudyEndTime).format('MM.DD') }}
          </div>
        </div>
        <wd-img
          custom-class="w-[110px] h-[88px] left-0 top-0 absolute rounded-[10px] overflow-hidden vertical-bottom"
          :src="options?.thumbnailUrl"
          mode="scaleToFill"
        />
        <div
          class="w-[202px] left-[119px] top-0 absolute text-black text-base font-normal font-['PingFang_SC'] leading-relaxed"
        >
          <!-- 活动预告 | 日本研学·东京艺术大学设计游学 -->
          {{ options?.name }}
        </div>
        <div
          class="left-[119px] top-[64px] absolute text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[34px]"
        >
          游学时间：
        </div>
      </div>
      <view class="flex items-center justify-between mb-1.5">
        <ActivityCountDown
          :start-at="options?.applyStartTime"
          :end-at="options?.applyEndTime"
        ></ActivityCountDown>
        <div>
          <ButtonEvo
            size="md"
            @click="router.push(`/pages/home/activity/detail/index?id=${options?.id}&type=${type}`)"
          >
            立即报名
          </ButtonEvo>
        </div>
      </view>
    </view>
  </view>
</template>