宣纸也能移动

src/views/HomeView.vue

@@ -9,10 +9,25 @@
     @dragstart.prevent
   >
     <div
+      class="paper-wrap"
+      :style="{
+        left: paperPositionLeft,
+      }"
+    >
+      <img
+        v-for="index in 3"
+        :key="index"
+        class="paper"
+        src="@/assets/background.jpg"
+        alt=""
+        @dragstart.prevent
+      >
+    </div>
+    <div
       ref="landscape-wrap"
       class="landscape-wrap"
       :style="{
-        left: landscapePositionleft,
+        left: landscapePositionLeft,
       }"
     >
       <img
@@ -159,7 +174,8 @@ export default {
 
       // 镜头平移相关
       translateLength: 0,
-      landscapePositionleft: '18.491%',
+      paperPositionLeft: 0,
+      landscapePositionLeft: '18.491%',
       peopleFarPositionRight: initPeopleFarPositionRight,
       peopleNearPositionLeft: initialPeopleNearPositionLeft,
       introducePositionLeft: '3.347%',
@@ -323,7 +339,8 @@ export default {
         //   this.tourState = 1
         // }
 
-        this.landscapePositionleft = `calc(18.491% + ${vNew * landscapeSpeedRate}px)`
+        this.paperPositionLeft = `${vNew * landscapeSpeedRate}px`
+        this.landscapePositionLeft = `calc(18.491% + ${vNew * landscapeSpeedRate}px)`
         this.peopleFarPositionRight = `calc(${initPeopleFarPositionRight} - ${vNew * peopleFarSpeedRate}px)`
         this.peopleNearPositionLeft = `calc(${initialPeopleNearPositionLeft} + ${vNew * peopleNearSpeedRate}px)`
         this.introducePositionLeft = `calc(3.347% + ${vNew * introduceSpeedRate}px)`
@@ -480,11 +497,17 @@ export default {
 .home {
   width: 100%;
   height: 100%;
-  background-image: url(@/assets/background.jpg);
-  background-repeat: repeat;
-  background-size: contain;
   position: relative;
   overflow: hidden;
+  .paper-wrap {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    display: flex;
+    > .paper {
+      height: 100%;
+    }
+  }
   .landscape-wrap {
     position: absolute;
     height: 30%;