diff --git a/package.json b/package.json
index c54e974..eace6ad 100644
--- a/package.json
+++ b/package.json
@@ -18,8 +18,10 @@
     "fabric": "^5.3.0",
     "gsap": "^3.12.2",
     "howler": "^2.2.4",
+    "image-frame-player": "^1.0.2",
     "pinia": "^2.1.6",
     "pixi.js": "7.2.4",
+    "plyr": "^3.7.8",
     "qs": "^6.11.2",
     "three": "0.148.0",
     "three-orbit-controls": "^82.1.0",
diff --git a/src/assets/images/index/arrow-icon.png b/src/assets/images/index/arrow-icon.png
index b57f79b..96907dd 100644
Binary files a/src/assets/images/index/arrow-icon.png and b/src/assets/images/index/arrow-icon.png differ
diff --git a/src/assets/images/index/bg.jpg b/src/assets/images/index/bg.jpg
index 86b801e..01fc1d7 100644
Binary files a/src/assets/images/index/bg.jpg and b/src/assets/images/index/bg.jpg differ
diff --git a/src/assets/images/index/boat-2.png b/src/assets/images/index/boat-2.png
index 66c437a..19d7be9 100644
Binary files a/src/assets/images/index/boat-2.png and b/src/assets/images/index/boat-2.png differ
diff --git a/src/assets/images/index/boat-3.png b/src/assets/images/index/boat-3.png
new file mode 100644
index 0000000..a98bfaa
Binary files /dev/null and b/src/assets/images/index/boat-3.png differ
diff --git a/src/assets/images/index/boat.png b/src/assets/images/index/boat.png
index 42cc4fe..c9e4022 100644
Binary files a/src/assets/images/index/boat.png and b/src/assets/images/index/boat.png differ
diff --git a/src/assets/images/index/bottom-bird-1.png b/src/assets/images/index/bottom-bird-1.png
index 54f93d7..e0bd648 100644
Binary files a/src/assets/images/index/bottom-bird-1.png and b/src/assets/images/index/bottom-bird-1.png differ
diff --git a/src/assets/images/index/cloud-bottom.png b/src/assets/images/index/cloud-bottom.png
index e84f706..ac86fc9 100644
Binary files a/src/assets/images/index/cloud-bottom.png and b/src/assets/images/index/cloud-bottom.png differ
diff --git a/src/assets/images/index/crane-1.png b/src/assets/images/index/crane-1.png
index 3244373..a4abafc 100644
Binary files a/src/assets/images/index/crane-1.png and b/src/assets/images/index/crane-1.png differ
diff --git a/src/assets/images/index/crane-2.png b/src/assets/images/index/crane-2.png
index e26f436..27eef2f 100644
Binary files a/src/assets/images/index/crane-2.png and b/src/assets/images/index/crane-2.png differ
diff --git a/src/assets/images/index/crane-3.png b/src/assets/images/index/crane-3.png
deleted file mode 100644
index 4ddce74..0000000
Binary files a/src/assets/images/index/crane-3.png and /dev/null differ
diff --git a/src/assets/images/index/hhl-cloud.png b/src/assets/images/index/hhl-cloud.png
new file mode 100644
index 0000000..73a7288
Binary files /dev/null and b/src/assets/images/index/hhl-cloud.png differ
diff --git a/src/assets/images/index/line.png b/src/assets/images/index/line.png
index a4a8a93..e40070b 100644
Binary files a/src/assets/images/index/line.png and b/src/assets/images/index/line.png differ
diff --git a/src/assets/images/index/location-bj.png b/src/assets/images/index/location-bj.png
index 22b9b45..4bd2cf1 100644
Binary files a/src/assets/images/index/location-bj.png and b/src/assets/images/index/location-bj.png differ
diff --git a/src/assets/images/index/location-gz.png b/src/assets/images/index/location-gz.png
index 92b1bef..0c6c973 100644
Binary files a/src/assets/images/index/location-gz.png and b/src/assets/images/index/location-gz.png differ
diff --git a/src/assets/images/index/location-sh.png b/src/assets/images/index/location-sh.png
index 3c4c32e..4132286 100644
Binary files a/src/assets/images/index/location-sh.png and b/src/assets/images/index/location-sh.png differ
diff --git a/src/assets/images/index/location-wh.png b/src/assets/images/index/location-wh.png
index 4f3a605..280251d 100644
Binary files a/src/assets/images/index/location-wh.png and b/src/assets/images/index/location-wh.png differ
diff --git a/src/assets/images/index/location-xa.png b/src/assets/images/index/location-xa.png
index 98eed7f..607a094 100644
Binary files a/src/assets/images/index/location-xa.png and b/src/assets/images/index/location-xa.png differ
diff --git a/src/assets/images/index/name-bj.png b/src/assets/images/index/name-bj.png
index 956062d..0ecd583 100644
Binary files a/src/assets/images/index/name-bj.png and b/src/assets/images/index/name-bj.png differ
diff --git a/src/assets/images/index/name-gz.png b/src/assets/images/index/name-gz.png
index 64e2491..4cd7b06 100644
Binary files a/src/assets/images/index/name-gz.png and b/src/assets/images/index/name-gz.png differ
diff --git a/src/assets/images/index/name-sh.png b/src/assets/images/index/name-sh.png
index 40d82e7..1a4a87d 100644
Binary files a/src/assets/images/index/name-sh.png and b/src/assets/images/index/name-sh.png differ
diff --git a/src/assets/images/index/name-wh.png b/src/assets/images/index/name-wh.png
index 6030a58..f6ebec8 100644
Binary files a/src/assets/images/index/name-wh.png and b/src/assets/images/index/name-wh.png differ
diff --git a/src/assets/images/index/name-xa.png b/src/assets/images/index/name-xa.png
index c95bed3..51c7232 100644
Binary files a/src/assets/images/index/name-xa.png and b/src/assets/images/index/name-xa.png differ
diff --git a/src/assets/images/index/sign-icon.png b/src/assets/images/index/sign-icon.png
index 9d6bfdc..609fa69 100644
Binary files a/src/assets/images/index/sign-icon.png and b/src/assets/images/index/sign-icon.png differ
diff --git a/src/assets/images/index/tips.png b/src/assets/images/index/tips.png
index cab6eb1..28c2626 100644
Binary files a/src/assets/images/index/tips.png and b/src/assets/images/index/tips.png differ
diff --git a/src/assets/images/index/title-flower.png b/src/assets/images/index/title-flower.png
new file mode 100644
index 0000000..3c7376f
Binary files /dev/null and b/src/assets/images/index/title-flower.png differ
diff --git a/src/assets/images/index/title.png b/src/assets/images/index/title.png
index 3f5b6f6..e2ff8a2 100644
Binary files a/src/assets/images/index/title.png and b/src/assets/images/index/title.png differ
diff --git a/src/assets/images/index/top-bird-1.png b/src/assets/images/index/top-bird-1.png
index 98b3551..1dca7fc 100644
Binary files a/src/assets/images/index/top-bird-1.png and b/src/assets/images/index/top-bird-1.png differ
diff --git a/src/assets/images/index/top-bird-2.png b/src/assets/images/index/top-bird-2.png
index e89da0c..8290e64 100644
Binary files a/src/assets/images/index/top-bird-2.png and b/src/assets/images/index/top-bird-2.png differ
diff --git a/src/assets/images/load/bar.png b/src/assets/images/load/bar.png
new file mode 100644
index 0000000..9952aa8
Binary files /dev/null and b/src/assets/images/load/bar.png differ
diff --git a/src/assets/images/load/bg.jpg b/src/assets/images/load/bg.jpg
new file mode 100644
index 0000000..13dedf7
Binary files /dev/null and b/src/assets/images/load/bg.jpg differ
diff --git a/src/assets/images/load/icon.png b/src/assets/images/load/icon.png
new file mode 100644
index 0000000..ae2a238
Binary files /dev/null and b/src/assets/images/load/icon.png differ
diff --git a/src/assets/images/xlz/xfl_1.png b/src/assets/images/xlz/xfl_1.png
new file mode 100644
index 0000000..0e028c0
Binary files /dev/null and b/src/assets/images/xlz/xfl_1.png differ
diff --git a/src/assets/images/xlz/xfl_10.png b/src/assets/images/xlz/xfl_10.png
new file mode 100644
index 0000000..b7107af
Binary files /dev/null and b/src/assets/images/xlz/xfl_10.png differ
diff --git a/src/assets/images/xlz/xfl_11.png b/src/assets/images/xlz/xfl_11.png
new file mode 100644
index 0000000..07bcfe3
Binary files /dev/null and b/src/assets/images/xlz/xfl_11.png differ
diff --git a/src/assets/images/xlz/xfl_12.png b/src/assets/images/xlz/xfl_12.png
new file mode 100644
index 0000000..aef55aa
Binary files /dev/null and b/src/assets/images/xlz/xfl_12.png differ
diff --git a/src/assets/images/xlz/xfl_13.png b/src/assets/images/xlz/xfl_13.png
new file mode 100644
index 0000000..275fc45
Binary files /dev/null and b/src/assets/images/xlz/xfl_13.png differ
diff --git a/src/assets/images/xlz/xfl_14.png b/src/assets/images/xlz/xfl_14.png
new file mode 100644
index 0000000..00ca544
Binary files /dev/null and b/src/assets/images/xlz/xfl_14.png differ
diff --git a/src/assets/images/xlz/xfl_15.png b/src/assets/images/xlz/xfl_15.png
new file mode 100644
index 0000000..2b220d9
Binary files /dev/null and b/src/assets/images/xlz/xfl_15.png differ
diff --git a/src/assets/images/xlz/xfl_16.png b/src/assets/images/xlz/xfl_16.png
new file mode 100644
index 0000000..2dba8b9
Binary files /dev/null and b/src/assets/images/xlz/xfl_16.png differ
diff --git a/src/assets/images/xlz/xfl_17.png b/src/assets/images/xlz/xfl_17.png
new file mode 100644
index 0000000..2a3244e
Binary files /dev/null and b/src/assets/images/xlz/xfl_17.png differ
diff --git a/src/assets/images/xlz/xfl_18.png b/src/assets/images/xlz/xfl_18.png
new file mode 100644
index 0000000..1d20ffe
Binary files /dev/null and b/src/assets/images/xlz/xfl_18.png differ
diff --git a/src/assets/images/xlz/xfl_19.png b/src/assets/images/xlz/xfl_19.png
new file mode 100644
index 0000000..9cd0065
Binary files /dev/null and b/src/assets/images/xlz/xfl_19.png differ
diff --git a/src/assets/images/xlz/xfl_2.png b/src/assets/images/xlz/xfl_2.png
new file mode 100644
index 0000000..af43a25
Binary files /dev/null and b/src/assets/images/xlz/xfl_2.png differ
diff --git a/src/assets/images/xlz/xfl_20.png b/src/assets/images/xlz/xfl_20.png
new file mode 100644
index 0000000..b0c5543
Binary files /dev/null and b/src/assets/images/xlz/xfl_20.png differ
diff --git a/src/assets/images/xlz/xfl_21.png b/src/assets/images/xlz/xfl_21.png
new file mode 100644
index 0000000..e97b60f
Binary files /dev/null and b/src/assets/images/xlz/xfl_21.png differ
diff --git a/src/assets/images/xlz/xfl_22.png b/src/assets/images/xlz/xfl_22.png
new file mode 100644
index 0000000..4a4f950
Binary files /dev/null and b/src/assets/images/xlz/xfl_22.png differ
diff --git a/src/assets/images/xlz/xfl_23.png b/src/assets/images/xlz/xfl_23.png
new file mode 100644
index 0000000..013ee6b
Binary files /dev/null and b/src/assets/images/xlz/xfl_23.png differ
diff --git a/src/assets/images/xlz/xfl_24.png b/src/assets/images/xlz/xfl_24.png
new file mode 100644
index 0000000..864e10c
Binary files /dev/null and b/src/assets/images/xlz/xfl_24.png differ
diff --git a/src/assets/images/xlz/xfl_25.png b/src/assets/images/xlz/xfl_25.png
new file mode 100644
index 0000000..3a7e8e2
Binary files /dev/null and b/src/assets/images/xlz/xfl_25.png differ
diff --git a/src/assets/images/xlz/xfl_26.png b/src/assets/images/xlz/xfl_26.png
new file mode 100644
index 0000000..1ec65c7
Binary files /dev/null and b/src/assets/images/xlz/xfl_26.png differ
diff --git a/src/assets/images/xlz/xfl_27.png b/src/assets/images/xlz/xfl_27.png
new file mode 100644
index 0000000..1c45734
Binary files /dev/null and b/src/assets/images/xlz/xfl_27.png differ
diff --git a/src/assets/images/xlz/xfl_28.png b/src/assets/images/xlz/xfl_28.png
new file mode 100644
index 0000000..2c7e635
Binary files /dev/null and b/src/assets/images/xlz/xfl_28.png differ
diff --git a/src/assets/images/xlz/xfl_29.png b/src/assets/images/xlz/xfl_29.png
new file mode 100644
index 0000000..60713bd
Binary files /dev/null and b/src/assets/images/xlz/xfl_29.png differ
diff --git a/src/assets/images/xlz/xfl_3.png b/src/assets/images/xlz/xfl_3.png
new file mode 100644
index 0000000..6ff6d1e
Binary files /dev/null and b/src/assets/images/xlz/xfl_3.png differ
diff --git a/src/assets/images/xlz/xfl_30.png b/src/assets/images/xlz/xfl_30.png
new file mode 100644
index 0000000..ee6de67
Binary files /dev/null and b/src/assets/images/xlz/xfl_30.png differ
diff --git a/src/assets/images/xlz/xfl_31.png b/src/assets/images/xlz/xfl_31.png
new file mode 100644
index 0000000..5554bf3
Binary files /dev/null and b/src/assets/images/xlz/xfl_31.png differ
diff --git a/src/assets/images/xlz/xfl_32.png b/src/assets/images/xlz/xfl_32.png
new file mode 100644
index 0000000..48abbae
Binary files /dev/null and b/src/assets/images/xlz/xfl_32.png differ
diff --git a/src/assets/images/xlz/xfl_33.png b/src/assets/images/xlz/xfl_33.png
new file mode 100644
index 0000000..a9d595e
Binary files /dev/null and b/src/assets/images/xlz/xfl_33.png differ
diff --git a/src/assets/images/xlz/xfl_34.png b/src/assets/images/xlz/xfl_34.png
new file mode 100644
index 0000000..2809bed
Binary files /dev/null and b/src/assets/images/xlz/xfl_34.png differ
diff --git a/src/assets/images/xlz/xfl_35.png b/src/assets/images/xlz/xfl_35.png
new file mode 100644
index 0000000..0e028c0
Binary files /dev/null and b/src/assets/images/xlz/xfl_35.png differ
diff --git a/src/assets/images/xlz/xfl_4.png b/src/assets/images/xlz/xfl_4.png
new file mode 100644
index 0000000..43ffd87
Binary files /dev/null and b/src/assets/images/xlz/xfl_4.png differ
diff --git a/src/assets/images/xlz/xfl_5.png b/src/assets/images/xlz/xfl_5.png
new file mode 100644
index 0000000..b646b9d
Binary files /dev/null and b/src/assets/images/xlz/xfl_5.png differ
diff --git a/src/assets/images/xlz/xfl_6.png b/src/assets/images/xlz/xfl_6.png
new file mode 100644
index 0000000..b4aa688
Binary files /dev/null and b/src/assets/images/xlz/xfl_6.png differ
diff --git a/src/assets/images/xlz/xfl_7.png b/src/assets/images/xlz/xfl_7.png
new file mode 100644
index 0000000..e3f652b
Binary files /dev/null and b/src/assets/images/xlz/xfl_7.png differ
diff --git a/src/assets/images/xlz/xfl_8.png b/src/assets/images/xlz/xfl_8.png
new file mode 100644
index 0000000..44c9a09
Binary files /dev/null and b/src/assets/images/xlz/xfl_8.png differ
diff --git a/src/assets/images/xlz/xfl_9.png b/src/assets/images/xlz/xfl_9.png
new file mode 100644
index 0000000..48fb224
Binary files /dev/null and b/src/assets/images/xlz/xfl_9.png differ
diff --git a/src/components/Index.vue b/src/components/Index.vue
index f6193f9..bf4d478 100644
--- a/src/components/Index.vue
+++ b/src/components/Index.vue
@@ -1,23 +1,442 @@
-
 <template>
   <div class="IndexPage">
-
+    <div class="index-title">
+      <div class="title-flower"></div>
+    </div>
+    <div class="location">
+      <div class="building index-location-bj"></div>
+      <div class="building index-location-xa"></div>
+      <div class="building index-location-sh"></div>
+      <div class="building index-location-wh"></div>
+      <div class="building index-location-gz"></div>
+    </div>
+    <div class="location-name">
+      <div class="place-name bj"></div>
+      <div class="place-name xa"></div>
+      <div class="place-name sh"></div>
+      <div class="place-name wh"></div>
+      <div class="place-name gz"></div>
+    </div>
+    <div class="index-line"></div>
+    <div class="location-mark">
+      <div class="mark mark-bj"></div>
+      <div class="mark mark-xa"></div>
+      <div class="mark mark-sh"></div>
+      <div class="mark mark-wh" @click="playFn(1)"></div>
+      <div class="mark mark-gz" @click="playFn(0)"></div>
+    </div>
+    <div class="top-bird-1"></div>
+    <div class="top-bird-2"></div>
+    <div class="crane-1"></div>
+    <div class="crane-2"></div>
+    <div class="boat-1"></div>
+    <div class="boat-2"></div>
+    <div class="boat-3"></div>
+    <div class="bottom-bird-1"></div>
+    <div class="bottom-cloud"></div>
+    <div class="xfl-icon">
+      <div id="frameBox"></div>
+    </div>
+  </div>
+  <div class="video-popup" @touchmove.prevent @click="hideVideo">
+    <div class="video-box">
+      <video ref="playerRef" class="plyr" id="player" controls>
+        <source src="https://cdn.plyr.io/static/our-video.mp4" type="video/mp4">
+        <!-- 你可以根据需要添加多个source标签，支持不同的视频格式 -->
+      </video>
+    </div>
   </div>
 </template>
 
 <script setup>
+import gsap from 'gsap'
+import Plyr from 'plyr';
+import 'plyr/dist/plyr.css'; // 导入 Plyr 样式
+import ImageFramePlayer from 'image-frame-player';
+
+const playerRef = ref(null)
+const frame = ref(null)
+const imageFramePlayer = ref(null)
+const locationId = ref(1)
+
+// 视频库
+const videoList = [
+  new URL(`../assets/video/gz.mp4`, import.meta.url).href,
+  new URL(`../assets/video/video.mp4`, import.meta.url).href,
+]
+
+// 帧图
+const frameList = Array.from({ length: 35 }, (_, index) => {
+  return new URL(`../assets/images/xlz/xfl_${index + 1}.png`, import.meta.url).href
+});
+
+onMounted(() => {
+  animationFn();
+  palyFrame()
+  playerRef.value = new Plyr('#player', {
+    controls: ['play', 'progress', 'current-time', 'fullscreen'],
+    fullscreen: {
+      enabled: true, // 启用全屏功能
+      fallback: true, // 启用全屏回退
+      iosNative: true, // 在 iOS 上启用原生全屏
+    },
+    autoplay: true, // 自动播放
+    mute: false,    // 初始不静音
+    loop: {        // 循环播放
+      active: true
+    },
+  })
+})
+
+// 帧图初始化
+const palyFrame = () => {
+  imageFramePlayer.value = new ImageFramePlayer({
+    dom: document.getElementById("frameBox"),
+    imgArr: frameList,
+    fps: 35,
+    useCanvas: true,
+    loop: -1,
+    yoyo: true
+  });
+  imageFramePlayer.value.play();
+};
 
 
 
+// 播放事件
+const playFn = (index) => {
+  gsap.to(".video-popup", {
+    autoAlpha: 1,
+    duration: 0.5
+  });
+  playerRef.value.source = {
+    type: 'video',
+    sources: [
+      {
+        src: videoList[index],
+        type: 'video/mp4'
+      }
+    ]
+  };
+}
+
+
+// 关闭弹窗
+const hideVideo = () => {
+  gsap.to(".video-popup", {
+    autoAlpha: 0,
+    duration: 0.5
+  });
+  playerRef.value.pause();
+}
+
+
+// 入场动画
+const animationFn = () => {
+
+
+  const tl = gsap.timeline({});
+  tl.from(".IndexPage", {
+    autoAlpha: 0,
+    scale: 1.2,
+    duration: 0.75,
+    ease: "power2.out",
+    onComplete: () => {
+      gsap.to(".title-flower", {
+        rotation: 360,
+        duration: 4,
+        repeat: -1,
+        ease: "linear",
+      });
+      gsap.to(".title-flower", {
+        scale: 1.5,
+        duration: 4,
+        repeat: -1,
+        ease: "linear",
+        yoyo: true,
+      });
+      gsap.to(".index-title", {
+        y: "-=20",
+        duration: 2,
+        repeat: -1,
+        ease: "linear",
+        yoyo: true,
+      });
+
+      gsap.to(".place-name", {
+        scale: "1.05",
+        y: "-=5",
+        duration: 2,
+        repeat: -1,
+        yoyo: true,
+        // ease: "back.inOut(1.7)",
+      })
+
+      gsap.to(".boat-1,.boat-2", {
+        scale: "1.05",
+        x: "-=30",
+        duration: 4,
+        repeat: -1,
+        yoyo: true,
+        ease: "back.inOut(1.1)",
+      })
+      gsap.to(".boat-3", {
+        scale: "1.05",
+        x: "+=30",
+        duration: 3,
+        repeat: -1,
+        yoyo: true,
+        ease: "back.inOut(2.9)",
+      })
+      gsap.to(".crane-1", {
+        scale: "1.1",
+        y: "-=10",
+        duration: 3,
+        repeat: -1,
+        yoyo: true,
+      })
+      gsap.to(".crane-2", {
+        scale: "1.1",
+        y: "-=10",
+        x: "-=20",
+        duration: 3,
+        repeat: -1,
+        yoyo: true,
+      })
+    }
+  })
+    .from(".index-title", {
+      autoAlpha: 0,
+      y: 20,
+      duration: 1,
+      ease: "power1.out",
+    })
+    .from(".bj,.index-location-bj", {
+      autoAlpha: 0,
+      y: -20,
+      duration: 1,
+      ease: "back.inOut(.3)",
+    }, 0.3)
+    .from(".xa,.index-location-xa", {
+      autoAlpha: 0,
+      y: -20,
+      duration: 1,
+      ease: "back.inOut(3)",
+    }, 0.5)
+    .from(".sh,.index-location-sh", {
+      autoAlpha: 0,
+      y: -20,
+      duration: 1,
+      ease: "back.inOut(3)",
+    }, 0.7)
+    .from(".wh,.index-location-wh", {
+      autoAlpha: 0,
+      y: -20,
+      duration: 1,
+      ease: "back.inOut(3)",
+    }, 1)
+    .from(".gz,.index-location-gz", {
+      autoAlpha: 0,
+      y: -20,
+      duration: 1,
+      ease: "back.inOut(3)",
+    }, 1.2)
+
+
+
+
+}
 
 </script>
 
 
 <style lang="scss" scoped>
 .IndexPage {
+  @include bgSrc("index/bg.jpg");
+  @include box(750px, 1929px);
+  overflow: auto;
+  position: relative;
+
+  .index-title {
+    @include bgSrc("index/title.png");
+    @include pos(502px, 299px, 114px, 44px);
+    position: relative;
+    pointer-events: none;
+    overflow: hidden;
+
+    .title-flower {
+      @include bgSrc("index/title-flower.png");
+      @include pos(58px, 56px, 246px, 79px);
+    }
+  }
+
+  .index-line {
+    @include bgSrc("index/line.png");
+    @include pos(348px, 1048px, 170px, 568px);
+    pointer-events: none;
+  }
+
+  .location {
+    .index-location-bj {
+      @include bgSrc("index/location-bj.png");
+      @include pos(644px, 217px, 105px, 384px);
+    }
+
+    .index-location-xa {
+      @include bgSrc("index/location-xa.png");
+      @include pos(303px, 319px, 36px, 647px);
+    }
+
+    .index-location-sh {
+      @include bgSrc("index/location-sh.png");
+      @include pos(378px, 413px, 372px, 760px);
+    }
+
+    .index-location-wh {
+      @include bgSrc("index/location-wh.png");
+      @include pos(192px, 229px, 94px, 1067px);
+    }
+
+    .index-location-gz {
+      @include bgSrc("index/location-gz.png");
+      @include pos(750px, 507px, 0px, 1402px);
+    }
+  }
+
+  .location-name {
+    .bj {
+      @include bgSrc("index/name-bj.png");
+      @include pos(98px, 65px, 161px, 404px);
+    }
+
+    .xa {
+      @include bgSrc("index/name-xa.png");
+      @include pos(98px, 65px, 190px, 658px);
+    }
+
+    .sh {
+      @include bgSrc("index/name-sh.png");
+      @include pos(98px, 65px, 610px, 797px);
+    }
+
+    .wh {
+      @include bgSrc("index/name-wh.png");
+      @include pos(98px, 66px, 266px, 1061px);
+    }
+
+    .gz {
+      @include bgSrc("index/name-gz.png");
+      @include pos(98px, 66px, 499px, 1389px);
+    }
+  }
+
+  .location-mark {
+    .mark {
+      @include bgSrc("index/sign-icon.png");
+    }
+
+    .mark-bj {
+      @include pos(73px, 75px, 466px, 540px);
+    }
+
+    .mark-xa {
+      @include pos(73px, 75px, 291px, 731px);
+    }
+
+    .mark-sh {
+      @include pos(73px, 75px, 393px, 976px);
+    }
+
+    .mark-wh {
+      @include pos(73px, 75px, 152px, 1348px);
+    }
+
+    .mark-gz {
+      @include pos(73px, 75px, 150px, 1558px);
+    }
+  }
+
+  .top-bird-1 {
+    @include bgSrc("index/top-bird-1.png");
+    @include pos(112px, 46px, 559px, 117px);
+    pointer-events: none;
+  }
+
+  .top-bird-2 {
+    @include bgSrc("index/top-bird-2.png");
+    @include pos(102px, 42px, 553px, 408px);
+    pointer-events: none;
+  }
+
+  .crane-1 {
+    @include bgSrc("index/crane-1.png");
+    @include pos(80px, 116px, 44px, 1147px);
+    pointer-events: none;
+  }
+
+  .crane-2 {
+    @include bgSrc("index/crane-2.png");
+    @include pos(117px, 112px, 197px, 1210px);
+    pointer-events: none;
+  }
+
+  .boat-1 {
+    @include bgSrc("index/boat.png");
+    @include pos(181px, 57px, 567px, 1156px);
+    pointer-events: none;
+  }
+
+  .boat-2 {
+    @include bgSrc("index/boat-2.png");
+    @include pos(186px, 62px, 125px, 1749px);
+    pointer-events: none;
+  }
+
+  .boat-3 {
+    @include bgSrc("index/boat.png");
+    @include pos(197px, 49px, 438px, 1834px);
+    pointer-events: none;
+  }
+
+  .bottom-bird-1 {
+    @include bgSrc("index/bottom-bird-1.png");
+    @include pos(89px, 42px, 324px, 1797px);
+    pointer-events: none;
+  }
+
+  .bottom-cloud {
+    @include bgSrc("index/cloud-bottom.png");
+    @include pos(749px, 371px, 0px, 1558px);
+    pointer-events: none;
+  }
+
+  .xfl-icon {
+    @include pos(163px, 153px, 245px, 679px);
+
+    #frameBox {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.video-popup {
   @include fixed();
   @include flexCen();
+  background-color: rgba($color: #000000, $alpha: .6);
+  visibility: hidden;
 
+  .video-box {
+    width: 700px;
+    // height: 393.75px;
+    border-radius: 12px;
+    border: 1px solid #fff;
+    // margin-top: -200px;
+    overflow: hidden;
 
+    .plyr {
+      // @include box(100%,100%);
+    }
+  }
 }
 </style>
diff --git a/src/components/Loading.vue b/src/components/Loading.vue
index ee1c800..3ccbc7b 100644
--- a/src/components/Loading.vue
+++ b/src/components/Loading.vue
@@ -1,31 +1,53 @@
 <template>
     <div class="LoadPage">
-        <Loading size="24px" type="spinner" color="#0094ff" vertical>loading...</Loading>
+        <div class="load-bg"></div>
+        <div class="load-container">
+            <div class="load-bar">
+                <div class="load-icon"></div>
+            </div>
+            <div class="load-num">{{ loadNumber }}%</div>
+        </div>
     </div>
 </template>
 
 <script setup>
 import gsap from 'gsap'
 import { Loading, Icon } from 'vant'
-import { loadImg } from '@/data/imgList'
+import { loadImg,pageImg } from '@/data/imgList'
 import Preloader from '@/plugins/Preloader'
 
 // 初始化
 const emit = defineEmits(["LoadPage"]); // 声明触发事件，对应父组件上面的方法
 
-
+const loadNumber = ref(0)
 
 onMounted(() => {
     Preloader(
         {
             name: '加载页资源',
             imgs: loadImg,
-            callback: (progress) => console.log('进度：', progress)
+            callback: (progress) => { }
         }
     ).then(
         res => {
-            console.log('加载完成');
-            gsap.to('.LoadPage', { duration: .5, autoAlpha: 0, onComplete: () => { emit("LoadPage", { action: 'hide' }) } })
+            gsap.set('.LoadPage', { autoAlpha: 1 })
+            // 开始加载内页
+            Preloader(
+                {
+                    name: '内页资源',
+                    imgs: pageImg,
+                    callback: (progress) => {
+                        // console.log(progress)
+                        loadNumber.value =  progress
+                        gsap.set('.load-icon', { left: (-15) + progress + '%' })
+                    }
+                }
+            ).then(
+                res => {
+                    gsap.to('.LoadPage', { duration: .5, autoAlpha: 0, onComplete: () => { emit("LoadPage", { action: 'hide' }) } })
+                }
+            )
+
         }
     )
 })
@@ -35,10 +57,39 @@ onMounted(() => {
 .LoadPage {
     @include fixed();
     @include flexCen();
+    visibility: hidden;
 
-    .brrage {
-        width: 750px;
-        height: 750px;
+    .load-bg {
+        @include pos(750px, 1624px, 0, 50%);
+        @include bgSrc('load/bg.jpg');
+        transform: translateY(-50%);
+    }
+
+    .load-container {
+        position: relative;
+        @include box(750px, 1180px);
+
+        .load-bar {
+            @include pos(597px, 38px, 77px, 437px);
+            @include bgSrc('load/bar.png');
+
+            .load-icon {
+                @include pos(126px, 114px, -15%, -85px);
+                @include bgSrc('load/icon.png');
+            }
+        }
+
+        .load-num {
+            @include pos(640px, 38px, 77px, 520px);
+            @include bgSrc('load/num.png');
+            font-size: 38px;
+            font-weight: 700;
+            color: #fff;
+            text-align: center;
+            line-height: 38px;
+            text-shadow: 3.886px 3.147px 4.3px rgba(18, 93, 87, 0.47);
+
+        }
     }
 }
 </style>
\ No newline at end of file
diff --git a/src/data/imgList.js b/src/data/imgList.js
index 1540be6..7d6e02f 100644
--- a/src/data/imgList.js
+++ b/src/data/imgList.js
@@ -1,20 +1,85 @@
+const load = ["load/bg.jpg"];
 
-const load = [
-    'load/1.png',
-]
+const page = [
+  "index/top-bird-2.png",
+  "index/name-xa.png",
+  "index/sign-icon.png",
+  "index/tips.png",
+  "index/title.png",
+  "index/title-flower.png",
+  "index/top-bird-1.png",
+  "index/arrow-icon.png",
+  "index/bg.jpg",
+  "index/boat-2.png",
+  "index/boat.png",
+  "index/bottom-bird-1.png",
+  "index/cloud-bottom.png",
+  "index/crane-1.png",
+  "index/crane-2.png",
+  "index/boat-3.png",
+  "index/line.png",
+  "index/location-bj.png",
+  "index/location-gz.png",
+  "index/location-sh.png",
+  "index/location-wh.png",
+  "index/location-xa.png",
+  "index/name-bj.png",
+  "index/name-gz.png",
+  "index/name-sh.png",
+  "index/name-wh.png",
+
+  "xlz/xfl_35.png",
+  "xlz/xfl_1.png",
+  "xlz/xfl_2.png",
+  "xlz/xfl_3.png",
+  "xlz/xfl_4.png",
+  "xlz/xfl_5.png",
+  "xlz/xfl_6.png",
+  "xlz/xfl_7.png",
+  "xlz/xfl_8.png",
+  "xlz/xfl_9.png",
+  "xlz/xfl_10.png",
+  "xlz/xfl_11.png",
+  "xlz/xfl_12.png",
+  "xlz/xfl_13.png",
+  "xlz/xfl_14.png",
+  "xlz/xfl_15.png",
+  "xlz/xfl_16.png",
+  "xlz/xfl_17.png",
+  "xlz/xfl_18.png",
+  "xlz/xfl_19.png",
+  "xlz/xfl_20.png",
+  "xlz/xfl_21.png",
+  "xlz/xfl_22.png",
+  "xlz/xfl_23.png",
+  "xlz/xfl_24.png",
+  "xlz/xfl_25.png",
+  "xlz/xfl_26.png",
+  "xlz/xfl_27.png",
+  "xlz/xfl_28.png",
+  "xlz/xfl_29.png",
+  "xlz/xfl_30.png",
+  "xlz/xfl_31.png",
+  "xlz/xfl_32.png",
+  "xlz/xfl_33.png",
+  "xlz/xfl_34.png",
+];
 
 // 处理为vite引入图片格式
 function imgCreate(url, img) {
-    let i = new URL(`../assets/images/${url}`, import.meta.url).href
-    img.push(i)
+  let i = new URL(`../assets/images/${url}`, import.meta.url).href;
+  img.push(i);
 }
 
+const loadImg = [];
+const pageImg = [];
 
-const loadImg = []
-const pageImg = []
-
-load.forEach(element => {
-    imgCreate(element, loadImg)
+load.forEach((element) => {
+  imgCreate(element, loadImg);
 });
 
-export { loadImg, pageImg }
\ No newline at end of file
+page.forEach((element) => {
+  imgCreate(element, pageImg);
+});
+
+export { loadImg, pageImg };
diff --git a/src/page/Home/App.vue b/src/page/Home/App.vue
index 87f65f3..d08d2f4 100644
--- a/src/page/Home/App.vue
+++ b/src/page/Home/App.vue
@@ -6,7 +6,10 @@ const showLoading = ref(true);
 const showIndex = ref(false);
 
 const LoadingFn = (item) =>{
-
+  if(item.action == 'hide'){
+    showLoading.value = false;
+    showIndex.value = true;
+  }
 }
 
 const IndexFn = (item) =>{
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 91dfa55..25a2de1 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -18,7 +18,7 @@ $green: green;
 }
 
 // DIV背景
-@mixin bg_pos($src) {
+@mixin bgSrc($src) {
   // new URL(`../assets/images/${url}`, import.meta.url).href
   background-image: url("../assets/images/" + $src);
   background-repeat: no-repeat;
diff --git a/yarn.lock b/yarn.lock
index 5a18099..e5b42ea 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1129,7 +1129,7 @@ copy-text-to-clipboard@^3.0.1:
   resolved "https://registry.npmmirror.com/copy-text-to-clipboard/-/copy-text-to-clipboard-3.2.0.tgz#0202b2d9bdae30a49a53f898626dcc3b49ad960b"
   integrity sha512-RnJFp1XR/LOBDckxTib5Qjr/PMfkatD0MUCQgdpqS8MdKiNUzBjAQBEN6oUy+jW7LI93BBG3DtMB2KOOKpGs2Q==
 
-core-js@^3.11.0:
+core-js@^3.11.0, core-js@^3.26.1:
   version "3.40.0"
   resolved "https://registry.npmmirror.com/core-js/-/core-js-3.40.0.tgz#2773f6b06877d8eda102fc42f828176437062476"
   integrity sha512-7vsMc/Lty6AGnn7uFpYT56QesI5D2Y/UkgKounk87OP9Z2H9Z8kj6jzcSGAxFmUtDOS0ntK6lbQz+Nsa0Jj6mQ==
@@ -1198,6 +1198,11 @@ csstype@^3.1.3:
   resolved "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
+custom-event-polyfill@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.npmmirror.com/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz#9bc993ddda937c1a30ccd335614c6c58c4f87aee"
+  integrity sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w==
+
 data-urls@^3.0.1:
   version "3.0.2"
   resolved "https://registry.npmmirror.com/data-urls/-/data-urls-3.0.2.tgz#9cf24a477ae22bcef5cd5f6f0bfbc1d2d3be9143"
@@ -1714,6 +1719,11 @@ ieee754@^1.1.13:
   resolved "https://registry.npmmirror.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
+image-frame-player@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmmirror.com/image-frame-player/-/image-frame-player-1.0.2.tgz#eddedd3b3e99de29a45278db71533e50f040b44c"
+  integrity sha512-4HNDcORl9U/EuO14G6v5rZ+rG+LTGd50cvYgoV02uuCsNfGWxOJba+RwxbfZjTf09wLzROrGiRpbuYAbpSZ4+w==
+
 immutable@^5.0.2:
   version "5.0.3"
   resolved "https://registry.npmmirror.com/immutable/-/immutable-5.0.3.tgz#aa037e2313ea7b5d400cd9298fa14e404c933db1"
@@ -1847,6 +1857,11 @@ lazystream@^1.0.0:
   dependencies:
     readable-stream "^2.0.5"
 
+loadjs@^4.2.0:
+  version "4.3.0"
+  resolved "https://registry.npmmirror.com/loadjs/-/loadjs-4.3.0.tgz#38c578cbb2e08835aa4407bd4ac6507dd1f7ed10"
+  integrity sha512-vNX4ZZLJBeDEOBvdr2v/F+0aN5oMuPu7JTqrMwp+DtgK+AryOlpy6Xtm2/HpNr+azEa828oQjOtWsB6iDtSfSQ==
+
 local-pkg@^0.4.3:
   version "0.4.3"
   resolved "https://registry.npmmirror.com/local-pkg/-/local-pkg-0.4.3.tgz#0ff361ab3ae7f1c19113d9bb97b98b905dbc4963"
@@ -2228,6 +2243,17 @@ pkg-types@^1.2.1, pkg-types@^1.3.0:
     mlly "^1.7.4"
     pathe "^2.0.1"
 
+plyr@^3.7.8:
+  version "3.7.8"
+  resolved "https://registry.npmmirror.com/plyr/-/plyr-3.7.8.tgz#b79bccc23687705b5d9a283b2a88c124bf7471ed"
+  integrity sha512-yG/EHDobwbB/uP+4Bm6eUpJ93f8xxHjjk2dYcD1Oqpe1EcuQl5tzzw9Oq+uVAzd2lkM11qZfydSiyIpiB8pgdA==
+  dependencies:
+    core-js "^3.26.1"
+    custom-event-polyfill "^1.0.7"
+    loadjs "^4.2.0"
+    rangetouch "^2.0.1"
+    url-polyfill "^1.1.12"
+
 postcss-px-to-viewport-8-plugin@^1.2.3:
   version "1.2.5"
   resolved "https://registry.npmmirror.com/postcss-px-to-viewport-8-plugin/-/postcss-px-to-viewport-8-plugin-1.2.5.tgz#6efed51b18431317319a32a427e17ebe954e9379"
@@ -2293,6 +2319,11 @@ queue-microtask@^1.2.2:
   resolved "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+rangetouch@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmmirror.com/rangetouch/-/rangetouch-2.0.1.tgz#c01105110fd3afca2adcb1a580692837d883cb70"
+  integrity sha512-sln+pNSc8NGaHoLzwNBssFSf/rSYkqeBXzX1AtJlkJiUaVSJSbRAWJk+4omsXkN+EJalzkZhWQ3th1m0FpR5xA==
+
 readable-stream@^2.0.0, readable-stream@^2.0.5:
   version "2.3.8"
   resolved "https://registry.npmmirror.com/readable-stream/-/readable-stream-2.3.8.tgz#91125e8042bba1b9887f49345f6277027ce8be9b"
@@ -2757,6 +2788,11 @@ url-parse@^1.5.3:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
+url-polyfill@^1.1.12:
+  version "1.1.13"
+  resolved "https://registry.npmmirror.com/url-polyfill/-/url-polyfill-1.1.13.tgz#e281edcded747a004b978c70941325b2243bfa97"
+  integrity sha512-tXzkojrv2SujumYthZ/WjF7jaSfNhSXlYMpE5AYdL2I3D7DCeo+mch8KtW2rUuKjDg+3VXODXHVgipt8yGY/eQ==
+
 url@^0.11.0:
   version "0.11.4"
   resolved "https://registry.npmmirror.com/url/-/url-0.11.4.tgz#adca77b3562d56b72746e76b330b7f27b6721f3c"