fix：更新竹谱序列帧超出的问题

src/views/BambooBookScene1.vue

@@ -1,11 +1,8 @@
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted } from "vue"
 import useSizeAdapt from "@/useFunctions/useSizeAdapt"
 
-const {
-  windowSizeInCssForRef,
-  windowSizeWhenDesignForRef,
-} = useSizeAdapt()
+const { windowSizeInCssForRef, windowSizeWhenDesignForRef } = useSizeAdapt()
 
 const isShowOperationTip = ref(true)
 
@@ -21,9 +18,9 @@ const touchEnd = (event) => {
   let currentX = event.changedTouches[0].pageX
   let tx = currentX - lastX.value
   if (tx < 0) {
-    emit('slide-right')
+    emit("slide-right")
   } else if (tx > 0) {
-    emit('slide-left')
+    emit("slide-left")
   }
 }
 
@@ -35,13 +32,12 @@ const touchEnd = (event) => {
 //   emit('slide-left')
 // }
 
-const emit = defineEmits(['slide-right', 'slide-left', 'close'])
+const emit = defineEmits(["slide-right", "slide-left", "close"])
 
 const x = window.innerHeight / 1018
 
-const innerWidth = ref((15523 / 33) * x + 'px')
-const innerHeight = ref(window.innerHeight + 'px')
-
+const innerWidth = ref((15523 / 33) * x + "px")
+const innerHeight = ref(window.innerHeight + "px")
 </script>
 
 <template>
@@ -51,7 +47,9 @@ const innerHeight = ref(window.innerHeight + 'px')
     @touchend="touchEnd($event)"
   >
     <!-- 竹叶序列帧 -->
-    <div class="xuliezheng" />
+    <div class="xuliezheng-box">
+      <div class="xuliezheng" />
+    </div>
     <div class="screen-box1">
       <div class="title-box">
         芥子园画谱
@@ -80,39 +78,48 @@ const innerHeight = ref(window.innerHeight + 'px')
   </div>
 </template>
 
-<style lang='less' scoped>
+<style lang="less" scoped>
 .screen-box {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
-
-  .xuliezheng {
-    width: v-bind(innerWidth);
-    max-width: 350px;
+  .xuliezheng-box {
+    width: 300px;
     height: v-bind(innerHeight);
-    background-image: url(@/assets/images/zhupu-min.png);
-    background-size: cover;
+    overflow: hidden;
     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));
+
+    .xuliezheng {
+      width: calc(v-bind(innerWidth));
+      // max-width: 30px;
+      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));
+        }
       }
     }
   }
@@ -128,60 +135,93 @@ const innerHeight = ref(window.innerHeight + 'px')
 
     .title-box {
       color: #ffffff;
-      font-size: calc(48 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
-      line-height: calc(56 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+      font-size: calc(
+        48 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
+      line-height: calc(
+        56 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
       position: absolute;
-      font-family: 'KingHwa_OldSong';
-      letter-spacing: .3em;
-      top: calc(95 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      font-family: "KingHwa_OldSong";
+      letter-spacing: 0.3em;
+      top: calc(
+        95 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
       // right: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       right: 13%;
     }
 
     .zhupu-box {
       color: #ffffff;
-      font-size: calc(24 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
-      line-height: calc(28 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+      font-size: calc(
+        24 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
+      line-height: calc(
+        28 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
       position: absolute;
-      font-family: 'KingHwa_OldSong';
-      letter-spacing: .3em;
+      font-family: "KingHwa_OldSong";
+      letter-spacing: 0.3em;
       top: 50%;
       right: 20%;
       // right: calc(75 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     }
 
-    >.operation-h {
+    > .operation-h {
       position: absolute;
       right: 14%;
       // right: calc(55 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       bottom: 35%;
-      width: calc(50 / v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+      width: calc(
+        50 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
     }
 
-    >.disc-img {
-      width: calc(151 / v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
-      height: calc(456 / v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+    > .disc-img {
+      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: 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 {
+    > .system-btns {
       width: 100%;
-      padding: 0 calc(20 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
+      padding: 0
+        calc(
+          20 / v-bind(windowSizeWhenDesignForRef) *
+            v-bind(windowSizeInCssForRef)
+        );
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       position: absolute;
-      bottom: calc(20 /v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
+      bottom: calc(
+        20 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef)
+      );
       z-index: 2;
     }
   }
-
 }
-
-
-</style>
+</style>