feat: 绘画列表页动图资源修改；fix: 滑动操作功能bug修复

src/useFunctions/useSmoothSwipe.js

@@ -259,10 +259,10 @@ export default function useSmoothSwipe({
     watch(scrollTargetRef, (v) => {
       if (v) {
         v.addEventListener('wheel', onWheel)
-        v.addEventListener('mousedown', onMouseDown)
-        v.addEventListener('mouseleave', onMouseLeave)
-        v.addEventListener('mousemove', onMouseMove)
-        v.addEventListener('mouseup', onMouseUp)
+        // v.addEventListener('mousedown', onMouseDown)
+        // v.addEventListener('mouseleave', onMouseLeave)
+        // v.addEventListener('mousemove', onMouseMove)
+        // v.addEventListener('mouseup', onMouseUp)
         // v.addEventListener('touchstart', onTouchStart)
         // v.addEventListener('touchmove', onTouchMove)
         // v.addEventListener('touchend', onTouchEnd)

src/views/PaintingList.vue

@@ -3,6 +3,12 @@
     class="painting-list"
   >
     <!-- 背景序列帧 -->
+    <img
+      class="bg-serial-frames-top-left"
+      src="@/assets/images/serial-frame-painting-list-top-left.png"
+      alt=""
+      draggable="false"
+    >
     <SerialFrames
       class="bg-serial-frames-top"
       :image-src="require(`@/assets/images/serial-frame-painting-list-top.png`)"
@@ -11,14 +17,12 @@
       :frame-number="33"
       :frame-duration="55"
     />
-    <SerialFrames
+    <img
       class="bg-serial-frames-bottom"
-      :image-src="require(`@/assets/images/serial-frame-painting-list-bottom.png`)"
-      :total-width="13194"
-      :height="865"
-      :frame-number="33"
-      :frame-duration="55"
-    />
+      src="@/assets/images/serial-frame-painting-list-bottom.png"
+      alt=""
+      draggable="false"
+    >
 
     <ul
       ref="menuEl"
@@ -343,9 +347,9 @@ const isShowPaintingStyleDesc = ref(false)
 </script>
 
 <style lang="less" scoped>
-// ::-webkit-scrollbar {
-//   display:none;
-// }
+::-webkit-scrollbar {
+  display:none;
+}
 
 .painting-list{
   position: absolute;
@@ -354,19 +358,31 @@ const isShowPaintingStyleDesc = ref(false)
   width: 100%;
   height: 100%;
   background-color: rgba(121, 143, 108, 1);
+  >img.bg-serial-frames-top-left{
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: calc(250 / v-bind('windowHeightDesign') * v-bind('windowHeight') * 1px);
+    transform: translate(0, -40%);
+    z-index: 1;
+  }
   >.bg-serial-frames-top{
     position: absolute;
     top: 0;
     right: 0;
-    transform: translate(0, 0) scale(0.8);
+    height: calc(692 / v-bind('windowHeightDesign') * v-bind('windowHeight') * 1px);
+    transform: translate(10%, -5%);
     transform-origin: top right;
+    z-index: 1;
   }
   >.bg-serial-frames-bottom{
     position: absolute;
     bottom: 0;
     right: 175px;
+    height: calc(300 / v-bind('windowHeightDesign') * v-bind('windowHeight') * 1px);
     transform: translate(0, 10%) scale(1);
     transform-origin: bottom left;
+    z-index: 1;
   }
   >ul{
     position: absolute;
@@ -633,6 +649,9 @@ const isShowPaintingStyleDesc = ref(false)
       }
     }
   }
+  >.button-back{
+    z-index: 2;
+  }
   >.operation-tip{
     position: absolute;
     left: 43px;