feat: 调节页面间隔

src/components/CanvasWithExternalBackground.vue

 <template>
-  <div class="container">
+  <div class="container" sype>
     <!-- <h1>Canvas交互演示 - 外部背景图</h1> -->
-
+    <el-dialog title="看板展示" :visible.sync="dialogFormVisible">
+      <el-form ref="form" :model="form" :inline="true">
+        <div v-for="(item, index) in formData" :key="index">
+          <el-row :gutter="20">
+            <el-col :span="10">
+              <el-form-item label="项目名称">
+                <el-input
+                  v-model="item.label"
+                  style="width: 100%"
+                  placeholder="请输入项目名称"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="项目内容">
+                <el-select
+                  v-model="item.value"
+                  style="width: 100%"
+                  placeholder="请选择项目内容"
+                >
+                  <el-option label="区域一" value="shanghai"></el-option>
+                  <el-option label="区域二" value="beijing"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-button @click="formData.splice(i, 1)" style="margin-top: 45px"
+                >删除</el-button
+              >
+            </el-col>
+          </el-row>
+        </div>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="formData.push({ label: '', value: '' })"
+          >增加项目</el-button
+        >
+        <el-button @click="dialogFormVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogFormVisible = false"
+          >确 定</el-button
+        >
+      </div>
+    </el-dialog>
     <div class="toolbar">
       <button @click="toggleAddMode" :class="{ 'active': isAddMode }">
         {{ isAddMode ? '退出添加模式' : '手动添加点位' }}
@@ -53,7 +95,7 @@
     >
       <div class="menu-item" @click="changeColor">更改颜色/图片</div>
       <div class="menu-item" @click="deleteItem">删除</div>
-      <div class="menu-item" @click="cloneItem">复制</div>
+      <div class="menu-item" @click="perintPoint">设置点位看板</div>
       <div class="menu-item" @click="bringToFront">置顶</div>
     </div>
 
@@ -101,7 +143,7 @@ export default {
   props: {
     width: {
       type: Number,
-      default: 800
+      default: 400
     },
     height: {
       type: Number,
@@ -109,16 +151,22 @@ export default {
     },
     fixedSize: {
       type: Number,
-      default: 10
+      default: 15
     },
     backgroundImageUrl: {
       type: String,
       default: ''
+    },
+    isEdit: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
     return {
       ctx: null,
+      form: {},
+      formData: [{ label: '', value: '' }],
       items: [], // 包含所有点位和图片
       backgroundImage: null, // 背景图对象
       isDragging: false,
@@ -145,7 +193,7 @@ export default {
         imageSrc: '',
         size: this.fixedSize
       },
-
+      dialogFormVisible: false,
       // 常量
       minSize: 20,
       maxSize: 100
@@ -194,7 +242,11 @@ export default {
       };
       img.src = url;
     },
-
+    perintPoint() {
+      this.dialogFormVisible = true
+      // const index = this.points.indexOf(this.contextMenu.point)
+      // this.$emit('perintPoint', this.points[index])
+    },
     // 切换手动添加点位模式
     toggleAddMode() {
       this.isAddMode = !this.isAddMode;
@@ -692,6 +744,8 @@ h1 {
 .canvas-container {
   border: 1px solid #ddd;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  width: 800px;
+  height: 600px;
 }
 
 canvas {

src/views/makePie/index.vue

@@ -67,7 +67,7 @@ export default {
     }
   },
   mounted() {
-    this.loadBackgroundImage(this.url)
+    this.loadBackgroundImage(this.pic1)
   },
   methods: {
     changeBackground() {
@@ -122,11 +122,11 @@ export default {
   cursor: pointer;
   margin-right: 10px;
 }
-.app {
+/* .app {
   padding: 20px;
   max-width: 1200px;
   margin: 0 auto;
-}
+} */
 .controls {
   margin-top: 20px;
   text-align: center;