diff --git a/src/components/common/common-styles/index.vue b/src/components/common/common-styles/index.vue
index ad9de9d0..a9788e4a 100644
--- a/src/components/common/common-styles/index.vue
+++ b/src/components/common/common-styles/index.vue
@@ -126,7 +126,6 @@ const background_img_url_change = (arry: uploadList[]) => {
 };
 
 const margin_event = (val: number | undefined) => {
-    form.margin = Number(val);
     form.margin_top = Number(val);
     form.margin_bottom = Number(val);
     form.margin_left = Number(val);
diff --git a/src/components/common/hot/index.vue b/src/components/common/hot/index.vue
index a1a6a197..ac37830c 100644
--- a/src/components/common/hot/index.vue
+++ b/src/components/common/hot/index.vue
@@ -11,8 +11,10 @@
                 <div class="left-content flex-1 pa-20">
                     <el-scrollbar class="img-scrollbar">
                         <div class="img-container">
-                            <div ref="imgBoxRef" @mousedown.prevent="start_drag" @mousemove.prevent="move_drag" @mouseup.prevent="end_drag">
-                                <el-image :src="hot_list.img" class="w img" @selectstart.prevent @contextmenu.prevent @dragstart.prevent></el-image>
+                            <div ref="imgBoxRef" class="oh" @mousedown.prevent="start_drag" @mousemove.prevent="move_drag" @mouseup.prevent="end_drag">
+                                <div ref="imgRef">
+                                    <el-image :src="hot_list.img" class="w img" @selectstart.prevent @contextmenu.prevent @dragstart.prevent></el-image>
+                                </div>
                                 <div ref="areaRef" class="area" :style="init_drag_style"></div>
                                 <div v-for="(item, index) in hot_list.hot" :key="index" class="area-box" :style="rect_style(item.drag_start, item.drag_end)" @mousedown.prevent="start_drag_area_box(index, $event)" @dblclick="dbl_drag_event(item, index)">
                                     <div class="del-btn" @click.stop="del_area_event(index)"><icon name="close"></icon></div>
@@ -85,6 +87,8 @@ const modelValue = defineModel({ type: Object as PropType<hotData>, default: {}
 const dialog_visible = defineModel('visibleDialog', { type: Boolean, default: false });
 const hot_list = ref<hotData>({
     img: '',
+    img_height: 1,
+    img_width: 1,
     hot: [],
 });
 const hot_list_index = ref(0);
@@ -98,6 +102,7 @@ watch(
 
 //#region 左侧画布-----------------------------------------------start
 const imgBoxRef = ref<HTMLElement | null>(null);
+const imgRef = ref<HTMLElement | null>(null);
 const rect_start = ref<rectCoords>({ x: 0, y: 0, width: 0, height: 0 });
 const rect_end = ref<rectCoords>({ x: 0, y: 0, width: 0, height: 0 });
 const areaRef = ref<HTMLElement | null>(null);
@@ -254,6 +259,7 @@ const hot_confirm_event = () => {
 const open_hot_event = () => {
     if (modelValue.value.img.length > 0) {
         dialog_visible.value = true;
+        hot_list.value = cloneDeep(modelValue.value);
     } else {
         ElMessage({
             type: 'warning',
@@ -268,8 +274,30 @@ const close_event = () => {
 };
 // 确认回调
 const confirm_event = () => {
-    modelValue.value = hot_list.value;
-    close_event();
+    if (hot_list.value.hot.length > 0) {
+        // 筛选数组hot中所有的link是否有空值，如果有则提示出来
+        if (is_obj_empty(hot_list.value.hot)) {
+            ElMessage({
+                type: 'warning',
+                message: '请先设置热区',
+            });
+            return;
+        }
+        const no_link_list = hot_list.value.hot.filter((item) => {
+            return is_obj_empty(item.link);
+        });
+        if (no_link_list.length > 0) {
+            ElMessage.error('请设置热区链接!');
+            return;
+        } else {
+            hot_list.value.img_height = imgRef.value?.clientHeight || 0;
+            hot_list.value.img_width = imgRef.value?.clientWidth || 0;
+            modelValue.value = hot_list.value;
+            close_event();
+        }
+    } else {
+        ElMessage.error('至少选择一个热区!');
+    }
 };
 //#endregion 热区开启关闭确认取消回调 -----------------------------------------------end
 </script>
diff --git a/src/components/model-hot-zone/index.vue b/src/components/model-hot-zone/index.vue
index 34836460..f490af66 100644
--- a/src/components/model-hot-zone/index.vue
+++ b/src/components/model-hot-zone/index.vue
@@ -1,7 +1,8 @@
 <template>
-    <div :style="style_container">
-        <div class="video re" :style="style">
+    <div ref="containerRef" class="oh" :style="style_container">
+        <div ref="hotRef" class="hot re" :style="style">
             <image-empty v-model="img" class="w" error-img-style="width:10rem;height:10rem;" error-style="padding:15rem 0;"></image-empty>
+            <div v-for="(item, index) in hot" :key="index" class="hot_box" :style="rect_style(item.drag_start, item.drag_end)"></div>
         </div>
     </div>
 </template>
@@ -13,24 +14,55 @@ const props = defineProps({
         default: () => ({}),
     },
 });
-
+const containerRef = ref<HTMLElement | null>(null);
+const hotRef = ref<HTMLElement | null>(null);
 const style = ref('');
 const style_container = ref('');
 const img = ref('');
+const hot = ref<hotListData[]>([]);
+const img_width = ref(1);
+const img_height = ref(1);
 watch(
     props.value,
     (newVal, oldValue) => {
-        console.log(newVal);
         const new_content = newVal?.content || {};
         const new_style = newVal?.style || {};
         img.value = new_content?.img[0];
+        hot.value = new_content?.hot.hot;
+        img_width.value = new_content?.hot.img_width || 1;
+        img_height.value = new_content?.hot.img_height || 1;
         style_container.value = common_styles_computer(new_style.common_style);
     },
     { immediate: true, deep: true }
 );
+
+const rect_style = computed(() => {
+    return (start: rectCoords, end: rectCoords) => {
+        let w_scale1 = 1;
+        let h_scale1 = 1;
+        let w_scale2 = 1;
+        let h_scale2 = 1;
+        if (containerRef.value && hotRef.value) {
+            // 原图片的宽和高和实际展示的图片宽和高的比例
+            w_scale1 = containerRef.value?.clientWidth / img_width.value;
+            h_scale1 = containerRef.value?.clientHeight / img_height.value;
+
+            // 坐标缩小比例  containerRef的宽高除以hotRef的宽高
+            w_scale2 = hotRef.value?.clientWidth / containerRef.value?.clientWidth;
+            h_scale2 = hotRef.value?.clientHeight / containerRef.value?.clientHeight;
+        }
+        console.log('containerRef', containerRef.value?.clientWidth, containerRef.value?.clientHeight, 'hotRef', hotRef.value?.clientWidth, hotRef.value?.clientHeight);
+        console.log('w_scale1', w_scale1, 'h_scale1', h_scale1, 'w_scale2', w_scale2, 'h_scale2', h_scale2);
+        return `left: ${start.x * w_scale1 * w_scale2}px;top: ${start.y * h_scale1 * h_scale2}px;width: ${Math.max(end.width * w_scale1 * w_scale2, 1)}px;height: ${Math.max(end.height * h_scale1 * h_scale2, 1)}px;display: flex;`;
+    };
+});
 </script>
 <style lang="scss" scoped>
-.video {
+.hot {
     min-height: 1rem;
+    .hot_box {
+        background-color: red;
+        position: absolute;
+    }
 }
 </style>
diff --git a/src/components/model-hot-zone/model-hot-zone-content.vue b/src/components/model-hot-zone/model-hot-zone-content.vue
index bc166e46..591f8496 100644
--- a/src/components/model-hot-zone/model-hot-zone-content.vue
+++ b/src/components/model-hot-zone/model-hot-zone-content.vue
@@ -29,6 +29,7 @@ const update_hot_data = (val: any) => {
     } else {
         form.value.hot.img = '';
     }
+    form.value.hot.hot = [];
 };
 </script>
 <style lang="scss" scoped>
diff --git a/src/components/model-hot-zone/model-hot-zone-styles.vue b/src/components/model-hot-zone/model-hot-zone-styles.vue
index aef67474..690ae8f0 100644
--- a/src/components/model-hot-zone/model-hot-zone-styles.vue
+++ b/src/components/model-hot-zone/model-hot-zone-styles.vue
@@ -13,9 +13,9 @@ const props = defineProps({
     },
 });
 // 默认值
-let form = reactive(props.value);
+let form = ref(props.value);
 const common_styles_update = (val: Object) => {
-    form.common_style = val;
+    form.value.common_style = val;
 };
 </script>
 <style lang="scss" scoped>
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index 52cf2461..ad29d166 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -102,6 +102,8 @@ declare global {
      */
     type hotData = {
         img: string;
+        img_width: number;
+        img_height: number;
         hot: hotListData[];
     };
     type rectCoords = {