diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts
index ef03fc9a6..13b1c4721 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts
@@ -2,39 +2,26 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
/** 广告魔方属性 */
export interface MagicCubeProperty {
- // 上圆角
- borderRadiusTop: number;
- // 下圆角
- borderRadiusBottom: number;
- // 间隔
- space: number;
- // 导航菜单列表
- list: MagicCubeItemProperty[];
- // 组件样式
- style: ComponentStyle;
+ borderRadiusTop: number; // 上圆角
+ borderRadiusBottom: number; // 下圆角
+ space: number; // 间隔
+ list: MagicCubeItemProperty[]; // 导航菜单列表
+ style: ComponentStyle; // 组件样式
}
/** 广告魔方项目属性 */
export interface MagicCubeItemProperty {
- // 图标链接
- imgUrl: string;
- // 链接
- url: string;
- // 宽
- width: number;
- // 高
- height: number;
- // 上
- top: number;
- // 左
- left: number;
- // 右
- right: number;
- // 下
- bottom: number;
+ imgUrl: string; // 图标链接
+ url: string; // 链接
+ width: number; // 宽
+ height: number; // 高
+ top: number; // 上
+ left: number; // 左
+ right: number; // 右
+ bottom: number; // 下
}
-// 定义组件
+/** 定义组件 */
export const component = {
id: 'MagicCube',
name: '广告魔方',
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/index.vue
index 5a3aa7e57..1965bde82 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/index.vue
@@ -9,9 +9,11 @@ import { ElImage } from 'element-plus';
/** 广告魔方 */
defineOptions({ name: 'MagicCube' });
+
const props = defineProps<{ property: MagicCubeProperty }>();
-// 一个方块的大小
-const CUBE_SIZE = 93.75;
+
+const CUBE_SIZE = 93.75; // 一个方块的大小
+
/**
* 计算方块的行数
* 行数用于计算魔方的总体高度,存在以下情况:
@@ -80,5 +82,3 @@ const rowCount = computed(() => {
-
-
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue
index 1f23095c6..ddccd8d0f 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue
@@ -18,11 +18,14 @@ import ComponentContainerProperty from '../../component-container-property.vue';
defineOptions({ name: 'MagicCubeProperty' });
const props = defineProps<{ modelValue: MagicCubeProperty }>();
+
const emit = defineEmits(['update:modelValue']);
+
const formData = useVModel(props, 'modelValue', emit);
-// 选中的热区
-const selectedHotAreaIndex = ref(-1);
+const selectedHotAreaIndex = ref(-1); // 选中的热区
+
+/** 处理热区被选中事件 */
const handleHotAreaSelected = (_: any, index: number) => {
selectedHotAreaIndex.value = index;
};
@@ -30,7 +33,6 @@ const handleHotAreaSelected = (_: any, index: number) => {
-
魔方设置
每格尺寸187 * 187
@@ -89,5 +91,3 @@ const handleHotAreaSelected = (_: any, index: number) => {
-
-