update2

src/components/Index.vue

@@ -27,6 +27,7 @@
     </div>
     <div class="top-bird-1"></div>
     <div class="top-bird-2"></div>
+    <div class="wh-cloud"></div>
     <div class="crane-1"></div>
     <div class="crane-2"></div>
     <div class="boat-1"></div>
@@ -51,6 +52,8 @@
     </div>
     <div class="cls-btn" @click="hideVideo"></div>
   </div>
+  <Line />
+
 </template>
 
 <script setup>
@@ -59,6 +62,8 @@ import Plyr from 'plyr';
 import 'plyr/dist/plyr.css'; // 导入 Plyr 样式
 import ImageFramePlayer from 'image-frame-player';
 import {showSuccessToast} from "vant";
+import Line from './Line.vue';
+
 
 const playerRef = ref(null)
 const frame = ref(null)
@@ -361,10 +366,16 @@ const animationFn = () => {
     pointer-events: none;
   }
 
+  .wh-cloud {
+    @include bgSrc("index/wh-cloud.png");
+    @include pos(324px, 298px, 9px, 1061px);
+    pointer-events: none;
+  }
+
   .location {
     .index-location-bj {
       @include bgSrc("index/location-bj.png");
-      @include pos(644px, 217px, 105px, 384px);
+      @include pos(507px, 233px, 142px, 341px);
     }
 
     .index-location-xa {

src/components/Line.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="container">
+    <!-- SVG路径作为轨迹 -->
+    <svg style="display: none;">
+      <path id="path" d="M10 80 L40 50 C60 30 80 80 100 50 S140 20 180 80" />
+    </svg>
+
+    <!-- 动画元素 -->
+    <div class="box"></div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue';
+import { gsap } from 'gsap';
+
+// 手动注册 PathPlugin（GSAP 3.9.0+ 版本内置）
+gsap.registerPlugin(gsap.PathPlugin);
+
+console.log('gsap',gsap);
+
+
+onMounted(() => {
+    const box = document.querySelector('.box');
+  const path = document.getElementById('path');
+
+  // 创建动画
+  gsap.to(box, {
+    duration: 5,
+    ease: 'power2.inOut',
+    motionPath: {
+      path: path,       // 绑定 SVG 路径元素
+      align: 'start',   // 对齐路径起点（默认值）
+      autoRotate: true  // 自动旋转方向（GSAP 3.9.0+ 支持）
+    }
+  });
+});
+</script>
+
+<style>
+.container {
+  position: relative;
+  width: 100%;
+  height: 600px;
+}
+
+.box {
+  width: 50px;
+  height: 50px;
+  background-color: red;
+  position: absolute;
+  top: 80px; /* 初始位置与SVG路径起点对齐 */
+  left: 10px;
+}
+</style>