feat(offline-activity): 线下活动卡片

src/components/card.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 defineProps({
   customClass: {
-    type: String,
+    type: String || Array,
     default: () => '',
   },
 })

src/pages/home/components/offline-activity-item.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import Card from '@/components/card.vue'
+import { frame } from '@/core/libs/svgs'
+
+defineProps({
+  customClass: {
+    type: String,
+    default: () => '',
+  },
+})
+</script>
+<template>
+  <card :custom-class="[customClass, 'p-0!']">
+    <view class="relative">
+      <img
+        class="w-[347px] h-[202px] rounded-tl-2xl rounded-tr-2xl vertical-bottom"
+        src="https://via.placeholder.com/347x202"
+      />
+      <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>
+      <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">第18期</div>
+      </div>
+    </view>
+    <div class="p-5 bg-white rounded-bl-[20px] rounded-br-[20px] shadow">
+      <div
+        class="w-[244px] text-black/40 text-base font-normal font-['PingFang SC'] leading-normal"
+      >
+        白衣剑客·这是格斗的“芭蕾”
+      </div>
+      <view class="flex items-center mb-4">
+        <wd-img custom-class="vertical-bottom" :src="frame" width="20" height="20"></wd-img>
+        <div class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-[34px]">
+          07.15 14:20
+        </div>
+      </view>
+      <view class="flex">
+        <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">
+            举办方：筑巢荟
+          </div>
+        </div>
+      </view>
+    </div>
+  </card>
+</template>

src/pages/home/offline-activity/index.vue

@@ -11,6 +11,7 @@
 import SectionHeading from '@/components/section-heading.vue'
 import Card from '@/components/card.vue'
 import RegisterCard from '../components/register-card.vue'
+import OfflineActivityItem from '../components/offline-activity-item.vue'
 
 const tab = ref<number>(0)
 </script>
@@ -36,6 +37,7 @@ const tab = ref<number>(0)
         <wd-tab :title="`标签${item}`"></wd-tab>
       </block>
     </wd-tabs>
+    <offline-activity-item class="my-6"></offline-activity-item>
   </view>
 </template>