Browse Source

feat(app): 优化活动相关组件显示

- 修改活动倒计时组件文字表述
- 为热门活动组件添加活动状态文本
- 优化活动卡片组件布局
- 修复活动相关组件的样式问题
EvilDragon 3 months ago
parent
commit
2ac85ea3f7

+ 8 - 0
packages/app/src/components/hot-activity-item.vue

@@ -6,6 +6,7 @@ import ButtonEvo from './button-evo.vue'
 import { useRouter } from '../core/utils/router'
 import { useActivity } from '../composables/activity'
 import { omit } from 'radash'
+import {getActivityStatusText} from "@/core/utils/common";
 
 const props = withDefaults(
   defineProps<{ options?: StudyTour | Activity; type?: 'studyTour' | 'activity' }>(),
@@ -39,6 +40,13 @@ const { listItemButtonText, statusText, status, difference, startAt, endAt, refr
           mode="scaleToFill"
         />
         <div
+          class="w-9 h-4 bg-black/60 rounded-[20px] backdrop-blur-[15px] absolute top-2.5 left-[7px] flex items-center justify-center"
+        >
+          <div class="text-white text-[9px] font-normal font-['PingFang_SC']">
+            {{ getActivityStatusText(options?.applyStartTime, options?.applyEndTime) }}
+          </div>
+        </div>
+        <div
           class="w-[202px] left-[119px] top-0 absolute text-black text-base font-normal font-['PingFang_SC'] leading-relaxed"
         >
           <!-- 活动预告 | 日本研学·东京艺术大学设计游学 -->

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

@@ -26,7 +26,7 @@ onMounted(() => {
     </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="" autoplay @change="(e) => (current = e.detail.current)">
+        <swiper class="" :autoplay="true" @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>

+ 1 - 1
packages/app/src/pages/home/components/activity-count-down.vue

@@ -26,7 +26,7 @@ const time = ref(
     <wd-count-down :time="time" @finish="emits('end')">
       <template #default="{ current }">
         <div v-if="time" class="flex items-center gap-1.25 text-black/40 text-sm">
-          <div>距{{ { waiting: '报名开始', running: '报名结束' }[status] }}还</div>
+          <div>距{{ { waiting: '报名开始', running: '报名结束' }[status] }}还</div>
           <div
             v-if="current.days"
             class="w-4 h-4 bg-black/90 rounded text-white text-2.5 flex items-center justify-center"

+ 1 - 1
packages/app/src/pages/home/components/register-card.vue

@@ -7,7 +7,7 @@ import { getActivitySignups } from '../../../core/libs/requests'
 import { NetImages } from '../../../core/libs/net-images'
 import { useRouter } from '../../../core/utils/router'
 import { getActivityStatusButtonText, getActivityStatusText } from '../../../core/utils/common'
-import AvatarGroupCasual from "@/components/avatar-group-casual/avatar-group-casual.vue";
+import AvatarGroupCasual from '@/components/avatar-group-casual/avatar-group-casual.vue'
 
 const props = defineProps<{
   customClass?: string