From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/components/DiyEditor/components/mobile/MagicCube/index.vue | 76 ++++++++++++++++++++++++++++++++++++++
1 files changed, 76 insertions(+), 0 deletions(-)
diff --git a/src/components/DiyEditor/components/mobile/MagicCube/index.vue b/src/components/DiyEditor/components/mobile/MagicCube/index.vue
new file mode 100644
index 0000000..0abb353
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/MagicCube/index.vue
@@ -0,0 +1,76 @@
+<template>
+ <div
+ class="relative"
+ :style="{
+ height: `${rowCount * CUBE_SIZE}px`,
+ width: `${4 * CUBE_SIZE}px`,
+ padding: `${property.space}px`
+ }"
+ >
+ <div
+ v-for="(item, index) in property.list"
+ :key="index"
+ class="absolute"
+ :style="{
+ width: `${item.width * CUBE_SIZE - property.space}px`,
+ height: `${item.height * CUBE_SIZE - property.space}px`,
+ top: `${item.top * CUBE_SIZE}px`,
+ left: `${item.left * CUBE_SIZE}px`
+ }"
+ >
+ <el-image
+ class="h-full w-full"
+ fit="cover"
+ :src="item.imgUrl"
+ :style="{
+ borderTopLeftRadius: `${property.borderRadiusTop}px`,
+ borderTopRightRadius: `${property.borderRadiusTop}px`,
+ borderBottomLeftRadius: `${property.borderRadiusBottom}px`,
+ borderBottomRightRadius: `${property.borderRadiusBottom}px`
+ }"
+ >
+ <template #error>
+ <div class="image-slot">
+ <div
+ class="flex items-center justify-center"
+ :style="{
+ width: `${item.width * CUBE_SIZE}px`,
+ height: `${item.height * CUBE_SIZE}px`
+ }"
+ >
+ <Icon icon="ep-picture" color="gray" :size="CUBE_SIZE" />
+ </div>
+ </div>
+ </template>
+ </el-image>
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts">
+import { MagicCubeProperty } from './config'
+
+/** 骞垮憡榄旀柟 */
+defineOptions({ name: 'MagicCube' })
+const props = defineProps<{ property: MagicCubeProperty }>()
+// 涓�涓柟鍧楃殑澶у皬
+const CUBE_SIZE = 93.75
+/**
+ * 璁＄畻鏂瑰潡鐨勮鏁�
+ * 琛屾暟鐢ㄤ簬璁＄畻榄旀柟鐨勬�讳綋楂樺害锛屽瓨鍦ㄤ互涓嬫儏鍐碉細
+ * 1. 娌℃湁鏁版嵁鏃讹紝榛樿灏卞彧鏄剧ず涓�琛岀殑楂樺害
+ * 2. 搴曢儴鐨勭┖鐧戒笉绠楅珮搴︼紝渚嬪鍙湁绗竴琛屾湁鏁版嵁锛岄偅涔堝氨鍙樉绀轰竴琛岀殑楂樺害
+ * 3. 椤堕儴鍙婁腑闂寸殑绌虹櫧绠楅珮搴︼紝渚嬪涓�鍏辨湁鍥涜锛屽彧鏈夋渶鍚庝竴琛屾湁鏁版嵁锛岄偅涔堜篃鏄剧ず鍥涜鐨勯珮搴�
+ */
+const rowCount = computed(() => {
+ let count = 0
+ if (props.property.list.length > 0) {
+ // 鏈�澶ц鍙�
+ count = Math.max(...props.property.list.map((item) => item.top + item.height))
+ }
+ // 淇濊瘉鑷冲皯鏈変竴琛�
+ return count == 0 ? 1 : count
+})
+</script>
+
+<style scoped lang="scss"></style>
--
Gitblit v1.8.0