修改背景

src/views/makePie/index.vue

@@ -14,13 +14,22 @@
         第二视角
       </button>
     </div>
-    <CanvasWithExternalBackground
-      :width="800"
-      :height="600"
-      :background-image-url="backgroundUrl"
-      @background-updated="handleBackgroundUpdate"
-    />
-
+    <div v-if="type == 1">
+      <CanvasWithExternalBackground
+        :width="800"
+        :height="600"
+        :background-image-url="backgroundUrl"
+        @background-updated="handleBackgroundUpdate"
+      />
+    </div>
+    <div v-if="type == 2">
+      <CanvasWithExternalBackground
+        :width="800"
+        :height="600"
+        :background-image-url="backgroundUrl"
+        @background-updated="handleBackgroundUpdate"
+      />
+    </div>
     <div class="controls">
       <button @click="changeBackground">更换背景图</button>
       <input
@@ -51,7 +60,10 @@ export default {
   },
   data() {
     return {
-      backgroundUrl: pic1 // 默认背景图URL
+      backgroundUrl: pic1, // 默认背景图URL
+      type: 1,
+      pic1,
+      pic2
     }
   },
   mounted() {
@@ -64,6 +76,14 @@ export default {
     loadBackgroundImage(url) {
       this.backgroundUrl = url
     },
+    getType(e) {
+      this.type = e
+      if (e === 1) {
+        this.loadBackgroundImage(pic1)
+      } else {
+        this.loadBackgroundImage(pic2)
+      }
+    },
     handleBgChange(e) {
       const file = e.target.files[0]
       if (!file) return
@@ -83,9 +103,8 @@ export default {
 </script>
 
 <style>
-
-.left-bar{
-  padding:0  20px;
+.left-bar {
+  padding: 0 20px;
 }
 .default-btn {
   width: 145px;