添加云彩

src/views/HomeView.vue

@@ -39,6 +39,30 @@
         @dragstart.prevent
       >
     </div>
+    <img
+      class="cloud2"
+      :style="{
+        left: cloud2PositionLeft,
+      }"
+      src="@/assets/cloud2.png"
+      alt=""
+    >
+    <img
+      class="cloud1"
+      :style="{
+        left: cloud1PositionLeft,
+      }"
+      src="@/assets/cloud1.png"
+      alt=""
+    >
+    <img
+      class="cloud3"
+      :style="{
+        left: cloud3PositionLeft,
+      }"
+      src="@/assets/cloud3.png"
+      alt=""
+    >
     <div
       class="people-far-wrap"
       :style="{
@@ -141,9 +165,15 @@
 </template>
 
 <script>
+const initialCloud2PositionLeft = '35%'
+const initialCloud1PositionLeft = '0%'
+const initialCloud3PositionLeft = '55%'
 const initialPeopleNearPositionLeft = '25%'
 const initPeopleFarPositionRight = '15%'
 const landscapeSpeedRate = 0.02
+const cloud2SpeedRate = 0.25
+const cloud1SpeedRate = 0.4
+const cloud3SpeedRate = 0.4
 const peopleFarSpeedRate = 0.4
 const peopleNearSpeedRate = 0.6
 const introduceSpeedRate = 0.6
@@ -176,6 +206,9 @@ export default {
       translateLength: 0,
       paperPositionLeft: 0,
       landscapePositionLeft: '18.491%',
+      cloud2PositionLeft: initialCloud2PositionLeft,
+      cloud1PositionLeft: initialCloud1PositionLeft,
+      cloud3PositionLeft: initialCloud3PositionLeft,
       peopleFarPositionRight: initPeopleFarPositionRight,
       peopleNearPositionLeft: initialPeopleNearPositionLeft,
       introducePositionLeft: '3.347%',
@@ -341,6 +374,9 @@ export default {
 
         this.paperPositionLeft = `${vNew * landscapeSpeedRate}px`
         this.landscapePositionLeft = `calc(18.491% + ${vNew * landscapeSpeedRate}px)`
+        this.cloud2PositionLeft = `calc(${initialCloud2PositionLeft} + ${vNew * cloud2SpeedRate}px)`
+        this.cloud1PositionLeft = `calc(${initialCloud1PositionLeft} + ${vNew * cloud1SpeedRate}px)`
+        this.cloud3PositionLeft = `calc(${initialCloud3PositionLeft} + ${vNew * cloud3SpeedRate}px)`
         this.peopleFarPositionRight = `calc(${initPeopleFarPositionRight} - ${vNew * peopleFarSpeedRate}px)`
         this.peopleNearPositionLeft = `calc(${initialPeopleNearPositionLeft} + ${vNew * peopleNearSpeedRate}px)`
         this.introducePositionLeft = `calc(3.347% + ${vNew * introduceSpeedRate}px)`
@@ -517,9 +553,24 @@ export default {
       height: 100%;
     }
   }
+  .cloud2 {
+    position: absolute;
+    height: 10%;
+    top: 55%;
+  }
+  .cloud1 {
+    position: absolute;
+    height: 15%;
+    top: 77%;
+  }
+  .cloud3 {
+    position: absolute;
+    height: 15%;
+    top: 84%;
+  }
   > .people-far-wrap {
     position: absolute;
-    top: 15%;
+    top: 14%;
     height: 750px;
     width: 500px;
     overflow: hidden;