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

<script lang="ts" setup>
import HotActivityItem from './hot-activity-item.vue'

withDefaults(defineProps<{ items?: any[] }>(), { items: () => [] })
const swiperList = [{}]
const item = ref()

const current = ref(0)
onMounted(() => {
  console.log('mounted')
  nextTick(() => {
    console.log('nextTick')
    console.log(item.value)
  })
})
</script>
<template>
  <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="" autoplay @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>
        </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>