Merge branch 'master' of http://face3d.4dage.com:7005/renyicun/HuiZhouGuJianZhu

src/assets/lionSpeach.json

@@ -15,7 +15,7 @@
     {
       "开始时间": 0,
       "结束时间": 9,
-      "语句": "你是不是早已习惯了城市里的高楼大厦？你知道吗？古徽州人的家可是在绿水青山之间的。"
+      "语句": "你是不是早已习惯了城市里的高楼大厦？你知道吗，古徽州人的家可是在绿水青山之间的。"
     },
     {
       "开始时间": 10,
@@ -90,7 +90,7 @@
     },
     {
       "开始时间": 11,
-      "语句": "无论在占地面积还是建设规模上，徽州祠堂都超出了一般民居等建筑。"
+      "语句": "无论在占地面积还是建筑规模上，徽州祠堂都超出了一般民居等建筑。"
     }
   ],
   "9": [

src/components/CastView.vue

@@ -88,6 +88,7 @@ export default {
     >div{
       font-size: calc(28 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
       margin-bottom: 0.7em;
+      text-align: center;
     }
   }
   >button.back {

src/components/StartUp.vue

@@ -3,11 +3,11 @@
     <button
       v-show="!isBeginVideo"
       v-click-audio
+      class="begin"
       :style="{
         left: beginBtnPos.x + 'px',
         top: beginBtnPos.y + 'px',
       }"
-      class="begin"
       @click="onClickBeginVideo"
     >
       <img
@@ -40,22 +40,37 @@
 
 <script>
 import useWindowSizeAdaptor from '@/useFunctions/useWindowSizeAdaptor.js'
-import { reactive } from "vue"
+import { onMounted, reactive, ref } from "vue"
 export default {
   name: 'StartUp',
   emits: ['begin', 'over'],
   setup() {
     const { windowSizeWhenDesign, unit } = useWindowSizeAdaptor()
+    const beginBtnPos = ref({})
+    // const beginBtnPos = reactive( utils.mapPosFromDraftToWindow({
+    //   x: 1850,
+    //   y: 630,
+    // }, 'contain'))
+    function computebeginBtnPos() {
+      beginBtnPos.value = utils.mapPosFromDraftToWindow({
+        x: 1850,
+        y: 630,
+      }, 'contain')
+      console.log('更新屏幕', beginBtnPos.value)
+    }
 
-    const beginBtnPos = reactive(utils.mapPosFromDraftToWindow({
-      x: 1850,
-      y: 630,
-    }, 'contain'))
+    onMounted(() => {
+      beginBtnPos.value = utils.mapPosFromDraftToWindow({
+        x: 1850,
+        y: 630,
+      }, 'contain')
+      window.addEventListener('resize', computebeginBtnPos)
+    })
 
     return {
       windowSizeWhenDesign,
       unit,
-      beginBtnPos,
+      beginBtnPos
     }
   },
   data() {
@@ -97,20 +112,26 @@ export default {
   height: 100%;
   background-color: #000;
   z-index: 10;
+
   >button.begin {
     position: absolute;
     right: 5vh;
     bottom: 5vh;
     z-index: 1;
+    // left: calc(1850 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+    // top: calc(630 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
     width: calc(40 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
     height: fit-content;
+
     >img {
       width: 100%;
     }
+
     &:hover {
       transform: scale(1.1);
     }
   }
+
   >video {
     position: absolute;
     left: 0;
@@ -118,6 +139,7 @@ export default {
     width: 100%;
     height: 100%;
   }
+
   // >.skip {
   //   position: absolute;
   //   top: 70px;

src/views/BuildTown.vue

@@ -40,6 +40,11 @@
       <div class="build-tip">
         点击图纸，重现古镇建设过程
       </div>
+      <button
+        v-click-audio
+        class="replay"
+        @click="onClickReplay"
+      />
     </div>
     <div class="right">
       <div class="effect">
@@ -129,17 +134,40 @@
     </div>
     <audio
       v-show="false"
+      ref="audio-drop-effect"
+      class="drop-effect"
+      :src="require(`@/assets/audios/drop-effect.mp3`)"
+    />
+    <audio
+      v-show="false"
       ref="complete-tip"
       class="complete-tip"
       :src="require(`@/assets/audios/complete-tip.mp3`)"
     />
+    <Teleport
+      to="body"
+    >
+      <transition
+        name="fade-in-out"
+      >
+        <div
+          v-if="isCelebrating"
+          class="celebrate"
+        >
+          <img
+            class=""
+            src="@/assets/images/celebrate.gif"
+            alt=""
+            draggable="false"
+          >
+        </div>
+      </transition>
+    </Teleport>
   </div>
 </template>
 
 <script>
-import { onMounted, reactive, toRefs, ref } from 'vue'
 import useWindowSizeAdaptor from '@/useFunctions/useWindowSizeAdaptor.js'
-import { ElMessageBox } from 'element-plus'
 
 export default {
   name: 'BuildTown',
@@ -259,6 +287,9 @@ export default {
     ...mapMutations([
       'recordBuildProgress',
     ]),
+    onClickReplay() {
+      this.recordBuildProgress(1)
+    }
   },
 }
 </script>
@@ -345,7 +376,7 @@ export default {
     >.build-tip {
       position: absolute;
       left: 50%;
-      bottom: calc(-70 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+      top: calc(-170 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
       transform: translate(-50%, 100%);
       width: calc(530 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
       height: calc(60 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
@@ -362,6 +393,22 @@ export default {
       color: #C26827;
       line-height: calc(28 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
     }
+
+    >button.replay {
+      position: absolute;
+      bottom: calc(-30 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+      left: 50%;
+      transform: translate(-50%, 100%);
+      width: calc(220 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+      height: calc(110 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+      background-image: url(@/assets/images/btn-replay.png);
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+      &:hover{
+        transform: translate(-50%, 100%) scale(1.1);
+      }
+    }
   }
   >.right {
     position: relative;

src/views/Home.vue

@@ -58,6 +58,7 @@
       />
     </transition>
     <button
+      v-show="!isShowCast"
       v-click-audio
       class="lion-male"
       :style="{
@@ -74,6 +75,7 @@
       >
     </button>
     <button
+      v-show="!isShowCast"
       v-click-audio
       class="lion-female"
       :class="{
@@ -95,6 +97,7 @@
 
     <button
       v-for="(item, idx) in menu"
+      v-show="!isShowCast"
       :key="idx"
       v-click-audio
       class="label"

src/views/JigsawGame.vue

@@ -6,6 +6,9 @@
     }"
   >
     <div class="left-wrapper">
+      <!-- <div class="build-tip">
+        点击图纸，重现古镇建设过程
+      </div> -->
       <div
         v-loading="isLoading"
         class="object-wrapper"
@@ -303,6 +306,10 @@ export default {
       const id = `_${temp.join('.')}-剪影_图像`
       const svgEl = this.$refs.svgComp.$el
       svgEl.getElementById(id).setAttribute('visibility', 'hidden')
+      // if (jigsawImgName == '6.围墙.png' || jigsawImgName == '5.围墙.png') {
+      //   console.log(jigsawImgName, '到了')
+      //   svgEl.getElementById(id).setAttribute('opacity', '0.5')
+      // }
     },
     onDrop(e) {
       e.preventDefault()
@@ -313,6 +320,11 @@ export default {
       const svgEl = this.$refs.svgComp.$el
       svgEl.getElementById(id).setAttribute('visibility', 'show')
 
+      if (id == '_6.围墙_图像' || id == '_5.围墙_图像') {
+        console.log(id, '到了')
+        svgEl.getElementById(id).setAttribute('opacity', '0.5')
+      }
+
       const idx = Number(e.dataTransfer.getData('text/html'))
       this.jigsawItems[idx].hasPut = true
 
@@ -323,13 +335,17 @@ export default {
       if (!this.jigsawItems.find((item) => {
         return !item.hasPut
       })) {
+
         this.recordJigsawDone(Number(this.$route.query.sceneL2Idx))
         this.$refs['complete-tip'].play()
+        this.$refs.svgComp.$el.getElementById('_5.围墙_图像') ? this.$refs.svgComp.$el.getElementById('_5.围墙_图像').setAttribute('opacity', '1') : ''
+        this.$refs.svgComp.$el.getElementById('_6.围墙_图像') ? this.$refs.svgComp.$el.getElementById('_6.围墙_图像').setAttribute('opacity', '1') : ''
         setTimeout(() => {
+
           this.isCelebrating = true
           setTimeout(() => {
             this.isCelebrating = false
-          }, 4000)
+          }, 1000)
         }, 0)
       }
     },
@@ -388,6 +404,26 @@ export default {
     margin-right: calc(83 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
     padding: calc(v-bind('imgFrameThicknessWhenDesign') / v-bind('windowSizeWhenDesign') * v-bind('unit'));
     position: relative;
+    >.build-tip {
+      position: absolute;
+      left: 50%;
+      top: calc(-170 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+      transform: translate(-50%, 100%);
+      width: calc(530 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+      height: calc(60 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+      background-image: url(@/assets/images/build-tip-bg.png);
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: calc(24 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+      font-weight: bold;
+      color: #C26827;
+      line-height: calc(28 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+    }
     >.object-wrapper {
       width: 100%;
       height: 100%;
@@ -469,7 +505,7 @@ export default {
   top: 0;
   width: 100%;
   height: 100%;
-  background-color: #fff;
+  // background-color: #fff;
   >img{
     position: absolute;
     left: 50%;

src/views/Level3.vue

@@ -359,17 +359,22 @@ export default {
     >.speach-text-wrapper {
       position: absolute;
       left: calc(346 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
-      bottom: calc(34 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+      bottom: calc(100 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
       width: calc(576 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
       height: calc(380 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
       background-image: url(@/assets/images/speach-text-wrapper.png);
-      background-size: cover;
+      // background-size: cover;
+      background-size: 100% 100%;
       background-repeat: no-repeat;
       background-position: center center;
-      padding-top: calc(90 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
-      padding-left: calc(100 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
-      padding-right: calc(80 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
-      padding-bottom: calc(210 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+      // padding-top: calc(90 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+      // padding-left: calc(100 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+      // padding-right: calc(80 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+      // padding-bottom: calc(210 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+      padding-top: calc(102 / var(--2727b869-windowSizeWhenDesign) * var(--2727b869-unit));
+      padding-left: calc(100 / var(--2727b869-windowSizeWhenDesign) * var(--2727b869-unit));
+      padding-right: calc(91 / var(--2727b869-windowSizeWhenDesign) * var(--2727b869-unit));
+      padding-bottom: calc(115 / var(--2727b869-windowSizeWhenDesign) * var(--2727b869-unit));
       >.speach-text {
         height: 100%;
         font-size: calc(20 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
@@ -381,13 +386,17 @@ export default {
         padding-right: calc(8 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
         position: relative;
         overflow-x: hidden;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-indent: 2em;
         >.mask{
           position: absolute;
           left: -100%;
           top: 0;
           width: 200%;
           height: 100%;
-          background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 30%);
+          background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 30% );
           &.active {
             animation: changeSpeachText 2s linear forwards;
           }