refactor(hot-activity): 使用swiper代替uni-swipe-action

将uni-swipe-action组件替换为swiper组件，以改进轮播活动的实现。修改了相关组件以适配新样式，并启用了对新添加的元素和布局的支持。

src/components/hot-activity-item.vue

@@ -1,11 +1,91 @@
-<script lang="ts" setup></script>
+<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="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="relative h-full z-1 mx--3 mb--6 mt--1 box-border">
-      <wd-img :width="'100%'" :height="'100%'" src="/static/a.svg" mode="widthFix"></wd-img>
+    <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>

src/components/hot-activity.vue

@@ -2,15 +2,24 @@
 import HotActivityItem from './hot-activity-item.vue'
 
 const swiperList = [{}]
+const item = ref()
+
+onMounted(() => {
+  console.log('mounted')
+  nextTick(() => {
+    console.log('nextTick')
+    console.log(item.value)
+  })
+})
 </script>
 <template>
-  <uni-swipe-action>
+  <swiper class="h-60">
     <template v-for="it of swiperList" :key="it.id">
-      <uni-swipe-action-item>
-        <HotActivityItem></HotActivityItem>
-      </uni-swipe-action-item>
+      <swiper-item class="h-60">
+        <HotActivityItem ref="item"></HotActivityItem>
+      </swiper-item>
     </template>
-  </uni-swipe-action>
+  </swiper>
   <!-- <wd-swiper :list="swiperList" autoplay>
     <template #default="{ item }">
       <wd-swiper-item>

src/layouts/tabbar.vue

@@ -49,4 +49,4 @@ const items = [
   </wd-config-provider>
 </template>
 
-<style scoped lang="scss"></style>
+<style lang="scss"></style>

src/pages/index/index.vue

@@ -134,7 +134,7 @@ onLoad(() => {})
         </template>
       </view>
       <view class="my-6 mx-3.5">
-        <HotActivity class="my-8"></HotActivity>
+        <HotActivity></HotActivity>
       </view>
       <view class="my-6 mx-3.5">
         <Card>一分钟快速了解筑巢荟</Card>

src/static/svgs/vector.svg

@@ -0,0 +1,18 @@
+<svg width="367" height="258" viewBox="0 0 367 258" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_62_38)">
+<path d="M10 23C10 14.1634 17.1634 7 26 7H341C349.837 7 357 14.1634 357 23V166C357 174.837 349.837 182 341 182H26C17.1634 182 10 174.837 10 166V23Z" fill="black" fill-opacity="0.85"/>
+<path d="M10 18C10 9.16344 17.1634 2 26 2H135.723C144.17 2 152.226 5.56112 157.911 11.8085L179.439 35.4643C185.124 41.7117 193.179 45.2729 201.626 45.2729H341C349.837 45.2729 357 52.4363 357 61.2729V224C357 232.837 349.837 240 341 240H26C17.1634 240 10 232.837 10 224V18Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_62_38" x="0" y="0" width="367" height="258" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="8"/>
+<feGaussianBlur stdDeviation="5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_62_38"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_62_38" result="shape"/>
+</filter>
+</defs>
+</svg>