| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <template> |
| H | 2 | <div |
| 3 | class="relative" | |
| 4 | :style="{ height: `${rowCount * CUBE_SIZE}px`, width: `${4 * CUBE_SIZE}px` }" | |
| 5 | > | |
| 6 | <div | |
| 7 | v-for="(item, index) in property.list" | |
| 8 | :key="index" | |
| 9 | class="absolute" | |
| 10 | :style="{ | |
| 11 | width: `${item.width * CUBE_SIZE - property.space * 2}px`, | |
| 12 | height: `${item.height * CUBE_SIZE - property.space * 2}px`, | |
| 13 | margin: `${property.space}px`, | |
| 14 | top: `${item.top * CUBE_SIZE}px`, | |
| 15 | left: `${item.left * CUBE_SIZE}px` | |
| 16 | }" | |
| 17 | > | |
| 18 | <el-image | |
| 19 | class="h-full w-full" | |
| 20 | fit="cover" | |
| 21 | :src="item.imgUrl" | |
| 22 | :style="{ | |
| 23 | borderTopLeftRadius: `${property.borderRadiusTop}px`, | |
| 24 | borderTopRightRadius: `${property.borderRadiusTop}px`, | |
| 25 | borderBottomLeftRadius: `${property.borderRadiusBottom}px`, | |
| 26 | borderBottomRightRadius: `${property.borderRadiusBottom}px` | |
| 27 | }" | |
| 28 | > | |
| 29 | <template #error> | |
| 30 | <div class="image-slot"> | |
| 31 | <div | |
| 32 | class="flex items-center justify-center" | |
| 33 | :style="{ | |
| 34 | width: `${item.width * CUBE_SIZE}px`, | |
| 35 | height: `${item.height * CUBE_SIZE}px` | |
| 36 | }" | |
| 37 | > | |
| 38 | <Icon icon="ep-picture" color="gray" :size="CUBE_SIZE" /> | |
| 39 | </div> | |
| 40 | </div> | |
| 41 | </template> | |
| 42 | </el-image> | |
| 43 | </div> | |
| 44 | </div> | |
| 45 | </template> | |
| 46 | ||
| 47 | <script setup lang="ts"> | |
| 48 | import { MagicCubeProperty } from './config' | |
| 49 | ||
| 50 | /** 广告魔方 */ | |
| 51 | defineOptions({ name: 'MagicCube' }) | |
| 52 | const props = defineProps<{ property: MagicCubeProperty }>() | |
| 53 | // 一个方块的大小 | |
| 54 | const CUBE_SIZE = 93.75 | |
| 55 | /** | |
| 56 | * 计算方块的行数 | |
| 57 | * 行数用于计算魔方的总体高度，存在以下情况： | |
| 58 | * 1. 没有数据时，默认就只显示一行的高度 | |
| 59 | * 2. 底部的空白不算高度，例如只有第一行有数据，那么就只显示一行的高度 | |
| 60 | * 3. 顶部及中间的空白算高度，例如一共有四行，只有最后一行有数据，那么也显示四行的高度 | |
| 61 | */ | |
| 62 | const rowCount = computed(() => { | |
| 63 | let count = 0 | |
| 64 | if (props.property.list.length > 0) { | |
| 65 | // 最大行号 | |
| 66 | count = Math.max(...props.property.list.map((item) => item.bottom)) | |
| 67 | } | |
| 68 | // 行号从 0 开始，所以加 1 | |
| 69 | return count + 1 | |
| 70 | }) | |
| 71 | </script> | |
| 72 | ||
| 73 | <style scoped lang="scss"></style> | |
