fix:竹谱细节调整和序列帧更新

src/views/BambooBookScene1.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import useSizeAdapt from "@/useFunctions/useSizeAdapt"
 
 const {
@@ -24,6 +24,16 @@ const touchMove = (event) => {
 }
 
 const emit = defineEmits(['slide', 'close'])
+
+const x = window.innerHeight / 1018
+
+const innerWidth = ref((15523 / 33) * x + 'px')
+const innerHeight = ref(window.innerHeight + 'px')
+
+// onMounted(()=> {
+
+// })
+
 </script>
 
 <template>
@@ -32,6 +42,8 @@ const emit = defineEmits(['slide', 'close'])
     @touchstart="handletouchstart($event)"
     @touchmove="touchMove($event)"
   >
+    <!-- 竹叶序列帧 -->
+    <div class="xuliezheng" />
     <div class="screen-box1">
       <div class="title-box">
         芥子园画谱
@@ -39,11 +51,17 @@ const emit = defineEmits(['slide', 'close'])
       <div class="zhupu-box">
         竹谱
       </div>
-      <img
+      <!-- <img
+        v-if="isShowOperationH"
         class="operation-h"
         src="@/assets/images/icon_operation_h_white.png"
         alt=""
-      >
+      > -->
+      <OperationTip
+        class="operation-h"
+        text=""
+        direction="h"
+      />
       <img
         class="disc-img"
         src="@/assets/images/zhupu-disc.png"
@@ -65,6 +83,34 @@ const emit = defineEmits(['slide', 'close'])
   height: 100%;
   position: relative;
 
+  .xuliezheng {
+    width: v-bind(innerWidth);
+    height: v-bind(innerHeight);
+    background-image: url(@/assets/images/zhupu-min.png);
+    background-size: cover;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    background-position-x: 0;
+    background-repeat: no-repeat;
+
+    animation-name: xuliezhen-animation;
+    animation-timing-function: steps(33);
+    animation-duration: 4s;
+    animation-iteration-count: infinite;
+    transition-property: bottom;
+
+    @keyframes xuliezhen-animation {
+      0% {
+        background-position-x: 0;
+      }
+
+      100% {
+        background-position-x: calc(100% - v-bind(innerWidth));
+      }
+    }
+  }
+
   .screen-box1 {
     width: 100%;
     height: 100%;
@@ -82,7 +128,8 @@ const emit = defineEmits(['slide', 'close'])
       font-family: 'KingHwa_OldSong';
       letter-spacing: .3em;
       top: calc(95 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      right: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      // right: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      right: 13%;
     }
 
     .zhupu-box {
@@ -93,19 +140,27 @@ const emit = defineEmits(['slide', 'close'])
       font-family: 'KingHwa_OldSong';
       letter-spacing: .3em;
       top: 50%;
-      right: calc(75 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      right: 20%;
+      // right: calc(75 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     }
 
     >.operation-h {
       position: absolute;
-      right: calc(55 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      bottom: 30%;
+      right: 14%;
+      // right: calc(55 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      bottom: 35%;
       width: calc(50 / v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
     }
 
     >.disc-img {
-      margin-right: calc(170 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      margin-bottom: calc(230 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      width: calc(151 / v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+      height: calc(456 / v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+      position: absolute;
+      left: calc(75 / v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+      top: calc(153 / v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+      // left: 12%;
+      // margin-right: calc(170 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      // margin-bottom: calc(250 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     }
 
     >.system-btns {

src/views/BambooBookScene2.vue

@@ -92,7 +92,7 @@ const {
 
     .title-disc {
       width: 100%;
-      color: white;
+      color: #ffffffa6;
       text-align: center;
       // position: absolute;
       font-size: calc(20 /v-bind(windowSizeWhenDesignForRef)* v-bind(windowSizeInCssForRef));
@@ -117,11 +117,17 @@ const {
       margin: calc(58 / v-bind(windowSizeWhenDesignForRef)*v-bind(windowSizeInCssForRef)) auto;
 
       >.active {
+        width: calc(55 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        height: calc(55 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         background-image: url(@/assets/images/btn_active.png);
-        padding: calc(8 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
+        // padding: calc(8 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
         background-size: 100% 100%;
         transform: scale(1.2);
         color: #7B916B;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-shadow: 2px 4px 4px rgba(71,100,70,0.5);
         font-size: calc(36 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeWhenDesignForRef));
         font-family: calc(42 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeWhenDesignForRef));
       }

src/views/BambooHotView.vue

@@ -134,7 +134,7 @@ const scrollFn = () => {
     currentIndex.value = 2
   } else if (elementScrollLeft > 2426 && elementScrollLeft < 3275) {
     currentIndex.value = 3
-  } else if (elementScrollLeft > 3276 ) {
+  } else if (elementScrollLeft > 3276) {
     currentIndex.value = 4
   }
 }
@@ -151,11 +151,23 @@ onMounted(() => {
     true
   )
 
+  window.addEventListener('touchstart', () => {
+    //  手势按钮消失
+    let operationH = document.getElementById('operationH')
+    operationH.style.opacity = 0
+
+    window.removeEventListener('touchstart', () => {
+      //  手势按钮消失
+      let operationH = document.getElementById('operationH')
+      operationH.style.opacity = 0
+    })
+  })
+
   setTimeout(() => {
     if (scrollableElement.value) {
       scrollableElement.value.scrollLeft = 383
     }
-  }, 300)
+  }, 50)
 
 })
 </script>
@@ -196,23 +208,23 @@ onMounted(() => {
       </div>
     </div>
     <div class="system-btns">
-      <BtnBack
-        @click="goBack"
-      />
+      <BtnBack @click="goBack" />
 
-      <img
+      <OperationTip
+        id="operationH"
         class="operation-h"
-        src="@/assets/images/icon_operation_h_white.png"
-        alt=""
-      >
+        text=""
+        direction="h"
+      />
     </div>
   </div>
 </template>
 
 <style lang='less' scoped>
-::-webkit-scrollbar{
+::-webkit-scrollbar {
   display: none;
 }
+
 .home {
   width: 100%;
   height: 100%;
@@ -277,17 +289,19 @@ onMounted(() => {
   }
 
   .system-btns {
-      width: 100%;
-      padding: 0 calc(20 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
-      display: flex;
-      // flex-direction: column;
-      justify-content: flex-end;
-      position: absolute;
-      bottom: calc(20 /v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
-      z-index: 2;
-      .operation-h{
-        width: calc(36 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
-      }
+    width: 100%;
+    padding: 0 calc(20 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
+    display: flex;
+    // flex-direction: column;
+    justify-content: flex-end;
+    position: absolute;
+    bottom: calc(60 /v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
+    z-index: 2;
+
+    .operation-h {
+      width: calc(36 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+      transition: opacity 0.5s ease-in-out;
     }
+  }
 }
 </style>

src/views/GameView.vue

@@ -78,7 +78,7 @@ onMounted(() => {
     <iframe
       v-if="mode === 'unity'"
       class="game-box"
-      src="https://sit-cnzhengquan.4dage.com/web/index.html#/"
+      src=""
     />
   </div>
 </template>
@@ -93,8 +93,7 @@ onMounted(() => {
     width: 100%;
     height: 100%;
     background: url(@/assets/images/bg-game.png);
-    background-size: 100% 100%;
-
+    background-size: cover;
     transition: all .3s;
 
 
@@ -113,14 +112,14 @@ onMounted(() => {
       font-family: 'KaiTi';
 
       position: absolute;
-      top: calc(487 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      bottom: calc(300 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       left: 50%;
       transform: translateX(-50%);
       padding-top: 30px;
       letter-spacing: .05em;
 
       >.line-title {
-        color: #707F48;
+        color: #707f48c7;
         font-weight: 600;
         line-height: 29px;
         // text-stroke: 1px #707F48;
@@ -149,7 +148,7 @@ onMounted(() => {
       font-family: 'KaiTi';
 
       position: absolute;
-      top: calc(576 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      bottom: calc(229 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       left: 50%;
       transform: translateX(-50%);
       padding-top: 30px;