bug fix

package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-app",
-  "version": "0.0.7",
+  "version": "1.0.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve --mode dev",

src/main.js

@@ -77,6 +77,7 @@ app.use(store)
   .use(router)
   .use(clickOutside)
   .use(clickAudio)
+  .use(ElementPlus)
   // .use(VueViewer)
   // .component('HotSpot', HotSpot)
   .mount('#app')

src/views/JigsawGame.vue

@@ -6,7 +6,10 @@
     }"
   >
     <div class="left-wrapper">
-      <div class="object-wrapper">
+      <div
+        v-loading="isLoading"
+        class="object-wrapper"
+      >
         <object
           ref="svgContainer"
           :data="require(`@/assets/images/jigsaw-game-${$route.query.sceneL2Idx}/compound.svg`)"
@@ -110,6 +113,7 @@ export default {
       heightForDrop: 0,
       imgFrameThicknessWhenDesign: '15',
       isCelebrating: false,
+      isLoading: true,
     }
   },
   computed: {
@@ -121,6 +125,9 @@ export default {
     },
   },
   mounted() {
+    if (this.jigsawProgressSceneL2.isJigsawDone) {
+      this.isLoading = false
+    }
     this.resetStatus()
   },
   unmounted() {
@@ -130,7 +137,7 @@ export default {
       'recordJigsawDone',
       'replayJigsaw',
     ]),
-    resetStatus() {
+    resetStatus(needDelay = true) {
       this.activeJigsawIdx = 0
       this.jigsawItems = shuffle(config.sceneTree[Number(this.$route.query.sceneL2Idx)].jigsawList.map((item) => {
         return {
@@ -138,11 +145,19 @@ export default {
           hasPut: false,
         }
       }))
-      setTimeout(() => {
-        if (!this.jigsawProgressSceneL2.isJigsawDone) {
-          this.hideAllInSvg()
-        }
-      }, 300)
+      if (needDelay) {
+        setTimeout(() => {
+          if (!this.jigsawProgressSceneL2.isJigsawDone) {
+            this.hideAllInSvg()
+          }
+        }, 1000)
+      } else {
+        setTimeout(() => {
+          if (!this.jigsawProgressSceneL2.isJigsawDone) {
+            this.hideAllInSvg()
+          }
+        }, 100)
+      }
     },
     hideAllInSvg() {
       const objectDocument = this.$refs.svgContainer.contentDocument
@@ -151,6 +166,7 @@ export default {
         const element = gList[index]
         element.setAttribute('visibility', 'hidden')
       }
+      this.isLoading = false
     },
     onDragStart(e, jigsawImgName, idx) {
       // 不知道为啥，在svg内部元素上无法触发drop事件，求助gpt也没用。只好用一个透明方块放在需要能drop的svg内部元素上面。
@@ -178,7 +194,7 @@ export default {
       console.log('svg original size by viewBox attribute: ', svgWidth, svgHeight)
 
       // show g element
-      // gTarget.setAttribute('visibility', 'show')
+      gTarget.setAttribute('visibility', 'show')
 
       // save drag info
       e.dataTransfer.setData('text/plain', jigsawImgName)
@@ -281,7 +297,7 @@ export default {
       this.jigsawItems.forEach(element => {
         element.hasPut = false
       })
-      this.resetStatus()
+      this.resetStatus(false)
       this.replayJigsaw(Number(this.$route.query.sceneL2Idx))
     }
   },
@@ -290,7 +306,8 @@ export default {
 
 <style lang="less">
 :root{
-  --el-overlay-color-lighter: transparent;
+  --el-overlay-color-lighter: transparent !important;
+  --el-mask-color: #fff !important;
 }
 </style>
 <style lang="less" scoped>