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

<script lang="ts" setup>
import TiltedButton from './tilted-button.vue'
</script>
<template>
  <view class="relative w-full box-border">
    <!-- <view class="absolute w-full h-full pt-2 pb-6 box-border">
      <view class="bg-black w-full h-full rounded-2xl"></view>
    </view> -->
    <view class="relative h-full mx--2.5 mb--6 mt--1 box-border">
      <wd-img
        :width="'100%'"
        :height="'100%'"
        src="/static/svgs/vector.svg"
        mode="widthFix"
      ></wd-img>
    </view>
    <view class="absolute left-0 right-0 top-1 bottom-6 z-1 p-3.5">
      <view class="w-full h-full flex flex-col justify-between">
        <wd-img
          custom-class="ms-1.5"
          src="/static/svgs/unnamed.svg"
          width="105px"
          mode="widthFix"
        ></wd-img>
        <!-- <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]"
            >
              07.15 08.10
            </div>
          </div>
          <wd-img
            custom-class="w-[110px] h-[88px] left-0 top-0 absolute rounded-[10px] overflow-hidden vertical-bottom"
            src="https://via.placeholder.com/110x88"
            mode="scaleToFill"
          />
          <div
            class="w-[202px] left-[119px] top-0 absolute text-black text-base font-normal font-['PingFang_SC'] leading-relaxed"
          >
            活动预告 | 日本研学·东京艺术大学设计游学
          </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">
          <view
            class="flex items-center text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[34px]"
          >
            距结束还剩
            <view
              class="w-4 h-4 bg-black/90 rounded flex-col justify-center items-center gap-2.5 inline-flex mx-1.5"
            >
              <view
                class="text-white text-[10px] font-normal font-['PingFang_SC'] leading-[10.18px]"
              >
                05
              </view>
            </view>
            天
            <div
              class="w-4 h-4 bg-black/90 rounded flex-col justify-center items-center gap-2.5 inline-flex mx-1.5"
            >
              <div
                class="text-white text-[10px] font-normal font-['PingFang_SC'] leading-[10.18px]"
              >
                05
              </div>
            </div>
            时
            <div
              class="w-4 h-4 bg-black/90 rounded flex-col justify-center items-center gap-2.5 inline-flex mx-1.5"
            >
              <div
                class="text-white text-[10px] font-normal font-['PingFang_SC'] leading-[10.18px]"
              >
                05
              </div>
            </div>
            分
          </view>
          <tilted-button>立即报名</tilted-button>
        </view>
      </view>
    </view>
  </view>
</template>