feat: 优化热门活动组件的布局和样式，提升用户体验

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

@@ -10,75 +10,50 @@ withDefaults(defineProps<{ options?: StudyTour | Activity; type?: 'studyTour' |
 const router = useRouter()
 </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">
-        <div class="flex justify-between">
-          <wd-img
-            custom-class="ms-1.5"
-            src="/static/svgs/unnamed.svg"
-            width="105px"
-            mode="widthFix"
-          ></wd-img>
-          <div></div>
-        </div>
-
-        <!-- <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"
-          />
+  <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="w-[202px] left-[119px] top-0 absolute text-black text-base font-normal font-['PingFang_SC'] leading-relaxed"
+            class="left-0 top-0 absolute text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[34px] flex items-center"
           >
-            <!-- 活动预告 | 日本研学·东京艺术大学设计游学 -->
-            {{ options?.name }}
+            <!-- 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
-            class="left-[119px] top-[64px] absolute text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[34px]"
+        </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}`)"
           >
-            游学时间：
-          </div>
+            立即报名
+          </ButtonEvo>
         </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>
   </view>

packages/app/src/components/hot-activity.vue

@@ -15,26 +15,41 @@ onMounted(() => {
 })
 </script>
 <template>
-  <swiper class="h-60" @change="(e) => (current = e.detail.current)">
-    <template v-for="it of items" :key="it.id">
-      <swiper-item class="h-60">
-        <HotActivityItem ref="item" :options="it.data" :type="it.type"></HotActivityItem>
-        <div class="absolute top-5 right-4 flex gap-1">
-          <template v-for="(it, i) in items" :key="i">
-            <div
-              class="w-1 h-1 rounded-full"
-              :class="`${current === i ? 'bg-white' : 'bg-white/40'}`"
-            ></div>
+  <view class="relative w-full box-border">
+    <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>
+    <div class="absolute left-0 right-0 top-1 bottom-6 z-1 py-3.5">
+      <div class="h-full w-full relative">
+        <swiper class="" @change="(e) => (current = e.detail.current)">
+          <template v-for="it of items" :key="it.id">
+            <swiper-item class="">
+              <HotActivityItem ref="item" :options="it.data" :type="it.type"></HotActivityItem>
+            </swiper-item>
           </template>
-        </div>
-      </swiper-item>
-    </template>
-  </swiper>
-  <!-- <wd-swiper :list="swiperList" autoplay>
-    <template #default="{ item }">
-      <wd-swiper-item>
-        <hot-activity-item></hot-activity-item>
-      </wd-swiper-item>
-    </template>
-  </wd-swiper> -->
+        </swiper>
+      </div>
+      <div class="absolute top-2 left-1.5 flex justify-between">
+        <wd-img
+          custom-class="ms-1.5"
+          src="/static/svgs/unnamed.svg"
+          width="105px"
+          mode="widthFix"
+        ></wd-img>
+      </div>
+      <div class="absolute top-5 right-4 flex gap-1">
+        <template v-for="(it, i) in items" :key="i">
+          <div
+            class="w-1 h-1 rounded-full"
+            :class="`${current === i ? 'bg-white' : 'bg-white/40'}`"
+          ></div>
+        </template>
+      </div>
+    </div>
+  </view>
 </template>

packages/app/src/pages/home/activity/detail/index.vue

@@ -17,7 +17,6 @@ import {
   studyTourSignup,
 } from '../../../../core/libs/requests'
 import { bell, map, rightFill } from '@designer-hub/assets/src/assets/svgs'
-import TiltedButton from '@/components/tilted-button.vue'
 import dayjs from 'dayjs'
 import BottomAppBar from '@/components/bottom-app-bar.vue'
 import { useRouter } from '../../../../core/utils/router'
@@ -31,11 +30,10 @@ import { NetImages } from '../../../../core/libs/net-images'
 import signupListDialogBg from '@designer-hub/assets/src/libs/assets/signupListDialogBg'
 import { getActivityStatusText, getCountsArr } from '../../../../core/utils/common'
 import { extractColorsFromImageData } from 'extract-colors/lib/extract-colors.mjs'
-import { replace, sort } from 'radash'
+import { sort } from 'radash'
 import { Activity, StudyTour } from '../../../../core/libs/models'
 import mapLocation from '@designer-hub/assets/src/libs/assets/mapLocation'
 import cameraWhite from '@designer-hub/assets/src/libs/assets/cameraWhite'
-import ImgBtnEvo from '@/components/img-btn-evo.vue'
 import ButtonEvo from '@/components/button-evo.vue'
 import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html.vue'
 const themeVars = ref<ConfigProviderThemeVars>({
@@ -472,6 +470,4 @@ onLoad(async (query: { id: string; type: 'activity' | 'studyTour' }) => {
     </wd-overlay>
   </div>
 </template>
-<style lang="scss">
-@import url('@/components/u-parse/u-parse.css');
-</style>
+<style lang="scss"></style>

packages/app/src/pages/home/index.vue

@@ -172,12 +172,12 @@ onShareAppMessage(async ({ from, target }) => {
           :items="currentStudyTour.studyTravelDOList"
         ></ScheduleCard>
       </template>
-      <SectionHeading title="按钮调试"></SectionHeading>
-      <div class="flex">
+      <!-- <SectionHeading title="按钮调试"></SectionHeading> -->
+      <!-- <div class="flex">
         <TiltedButton size="large" custom-class="w-30"></TiltedButton>
         <ButtonEvo>神奇按钮</ButtonEvo>
         <ImgBtnEvo></ImgBtnEvo>
-      </div>
+      </div> -->
       <!-- <div class="flex flex-col gap-1">
         <button>咲</button>
         <ButtonEvo custom-class="w-auto!">咲</ButtonEvo>