任一存 2 лет назад
Родитель
Сommit
a668c804d6
2 измененных файлов с 29 добавлено и 1 удалено
  1. 28 0
      src/views/JigsawGame.vue
  2. 1 1
      src/views/Level3.vue

+ 28 - 0
src/views/JigsawGame.vue

@@ -1,6 +1,9 @@
 <template>
   <div
     class="jigsaw-game"
+    :class="{
+      celebrating: isCelebrating,
+    }"
   >
     <div class="left-wrapper">
       <div class="object-wrapper">
@@ -106,6 +109,7 @@ export default {
       widthForDrop: 0,
       heightForDrop: 0,
       imgFrameThicknessWhenDesign: '15',
+      isCelebrating: false,
     }
   },
   computed: {
@@ -127,6 +131,7 @@ export default {
       'replayJigsaw',
     ]),
     resetStatus() {
+      this.activeJigsawIdx = 0
       this.jigsawItems = shuffle(config.sceneTree[Number(this.$route.query.sceneL2Idx)].jigsawList.map((item) => {
         return {
           name: item,
@@ -263,6 +268,10 @@ export default {
           },
         })
         this.recordJigsawDone(Number(this.$route.query.sceneL2Idx))
+        this.isCelebrating = true
+        setTimeout(() => {
+          this.isCelebrating = false
+        }, 1000)
       }
     },
     onDragOver(e) {
@@ -279,6 +288,11 @@ export default {
 }
 </script>
 
+<style lang="less">
+:root{
+  --el-overlay-color-lighter: transparent;
+}
+</style>
 <style lang="less" scoped>
 .jigsaw-game {
   position: absolute;
@@ -293,6 +307,20 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
+  &.celebrating{
+    animation: flash 0.8s forwards;
+  }
+  @keyframes flash {
+    0% {
+      filter: brightness(1)
+    }
+    50% {
+      filter: brightness(1.2)
+    }
+    100% {
+      filter: brightness(1)
+    }
+  }
   >.left-wrapper {
     width: calc(950 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
     height: calc(628 / v-bind('windowSizeWhenDesign') * v-bind('unit'));

+ 1 - 1
src/views/Level3.vue

@@ -372,7 +372,7 @@ export default {
         font-size: calc(20 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
         line-height: 1.3;
         font-family: Source Han Sans CN-Regular, Source Han Sans CN;
-        font-weight: 400;
+        font-weight: 600;
         color: #2D241D;
         overflow-y: auto;
         padding-right: calc(8 / v-bind('windowSizeWhenDesign') * v-bind('unit'));