|
@@ -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'));
|