更换一张解说序列帧

web/src/views/scene/components/xuliezhen.vue

@@ -14,37 +14,37 @@ export default {
 </script>
 
 <style lang="less" scoped>
-@full: 21200px;
-@single: 500px;
-@scale: 0.7;
-
+@full-width: 21200px;
+@height: 500px;
+@frame-num: 53;
+@scale: 0.65;
 .jieshuo {
   position: fixed;
   z-index: 9;
-  width: @single * @scale;
-  height: @single* @scale;
+  width: @full-width / @frame-num * @scale;
+  height: @height * @scale;
   overflow: hidden;
   pointer-events: none;
   bottom: 0;
   right: 0;
   > img {
-    width: @full * @scale;
+    width: @full-width * @scale;
     left: 0;
     height: 100%;
     position: absolute;
-    animation: jieshuo 2.4s steps(53) infinite;
+    animation: jieshuo 2.4s steps(@frame-num) infinite;
   }
 }
 
 .jieshuospk {
   > img {
-    animation: jieshuo 3.4s steps(53) infinite;
+    animation: jieshuo 3.4s steps(@frame-num) infinite;
   }
 }
 
 @keyframes jieshuo {
   100% {
-    left: -@full* @scale;
+    left: -@full-width* @scale;
   }
 }
 </style>