| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <template> |
| H | 2 | <div |
| 3 | v-for="(item, index) in property.list" | |
| 4 | :key="index" | |
| 5 | class="absolute bottom-50% right-50% h-454px w-292px border-1px border-gray border-rounded-4px border-solid bg-white p-1px" | |
| 6 | :style="{ | |
| 7 | zIndex: 100 + index + (activeIndex === index ? 100 : 0), | |
| 8 | marginRight: `${-146 - index * 20}px`, | |
| 9 | marginBottom: `${-227 - index * 20}px` | |
| 10 | }" | |
| 11 | @click="handleActive(index)" | |
| 12 | > | |
| 13 | <el-image :src="item.imgUrl" fit="contain" class="h-full w-full"> | |
| 14 | <template #error> | |
| 15 | <div class="h-full w-full flex items-center justify-center"> | |
| 16 | <Icon icon="ep:picture" /> | |
| 17 | </div> | |
| 18 | </template> | |
| 19 | </el-image> | |
| 20 | <div class="absolute right-1 top-1 text-12px">{{ index + 1 }}</div> | |
| 21 | </div> | |
| 22 | </template> | |
| 23 | <script setup lang="ts"> | |
| 24 | import { PopoverProperty } from './config' | |
| 25 | ||
| 26 | /** 弹窗广告 */ | |
| 27 | defineOptions({ name: 'Popover' }) | |
| 28 | // 定义属性 | |
| 29 | defineProps<{ property: PopoverProperty }>() | |
| 30 | ||
| 31 | // 处理选中 | |
| 32 | const activeIndex = ref(0) | |
| 33 | const handleActive = (index: number) => { | |
| 34 | activeIndex.value = index | |
| 35 | } | |
| 36 | </script> | |
| 37 | ||
| 38 | <style scoped lang="scss"></style> | |
