diff --git a/src/views/app/Home.vue b/src/views/app/Home.vue
index 6ae8dfa..df3bf01 100644
--- a/src/views/app/Home.vue
+++ b/src/views/app/Home.vue
@@ -160,54 +160,58 @@ export default {
 }
 .home-container {
   //height: calc(100vh - 80px);
-
   width: 1920px;
   height: calc(1080px - 100px);
   display: flex;
   position: relative;
-
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  will-change: transform, opacity;
   & .home-text {
     position: absolute;
     top: 40px;
     left: 60px;
   }
-  & .right-container {
-    //background: #fff;
-    //height: 100%;
+  .right-container {
     position: relative;
     flex: 1;
-    & .bolloon-comp {
-      transition: all 1s ease-in-out;
+
+    .bolloon-comp {
+      transition: transform 1s ease-in-out;
       position: absolute;
       top: 200px;
-      //right: 460px;
       left: 800px;
       z-index: 11;
       animation: opcitys 4s ease-in-out forwards;
+      will-change: transform; // 提前通知浏览器优化
+      backface-visibility: hidden;
+      transform: translateZ(0); // 启用 GPU 加速
+
       &.move {
-        left: 1490px;
-        top: 390px;
+        transform: translate(690px, 190px) translateZ(0);
+        /* 原来 left: 1490px; top: 390px; */
       }
-      //margin-left: 500px;
     }
 
-    & .bottom-butterfly {
+    .bottom-butterfly {
       z-index: 10;
       position: absolute;
-      //bottom: 0;
-      height: 450px;
-      width: 100%;
-      //opacity: 0;
-      //animation: show-butterfly 1s ease-in-out forwards;
       bottom: 100px;
       left: -1000px;
-      margin-left: 650px;
+      margin-left: 650px; // 可以考虑移除或改为 transform
+      height: 450px;
+      width: 100%;
+      will-change: transform;
+      backface-visibility: hidden;
+      transform: translateZ(0);
+
       &.move {
-        left: -900px;
+        transform: translate(100px, 0) translateZ(0);
         bottom: 100px;
       }
+
       & * {
-        //zoom: 1.1;
+        //zoom: 1.1; // zoom 已废弃，不推荐使用
       }
     }
   }
@@ -228,15 +232,11 @@ export default {
 @keyframes show-butterfly {
   0% {
     opacity: 0;
-    bottom: -450px;
-    left: -50%;
-    margin-left: 500px;
+    transform: translate(-850px, 450px) rotate(-10deg);
   }
   100% {
     opacity: 1;
-    bottom: 50px;
-    left: -850px;
-    margin-left: 650px;
+    transform: translate(-850px, 0) rotate(0deg);
   }
 }
 
@@ -247,96 +247,84 @@ export default {
 .red-container,
 .red-container2 {
   .red-box {
-    transition: all 1s ease-in-out;
     position: absolute;
     z-index: 98;
     cursor: pointer;
+
+    /* GPU 加速 */
+    transform: translateZ(0);
+    backface-visibility: hidden;
+    will-change: transform, opacity;
+    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
+
     & .r-icon {
       width: 164px;
       height: 175px;
       position: absolute;
       z-index: 99;
+      background-size: contain;
+      background-position: center;
+      background-repeat: no-repeat;
     }
+
     & .r-ban {
       position: absolute;
-      background: url('../../assets/images/new/r-ban.png');
-      background-repeat: no-repeat;
-      background-size: cover;
-      background-position: center;
-      content: ' ';
+      background: url('../../assets/images/new/r-ban.png') no-repeat center center / cover;
       width: 239px;
       height: 98px;
       left: -35px;
       top: 100px;
-      z-index: -1;
+      z-index: 0;
+      transition: background-image 0.5s ease-in-out, opacity 0.5s ease-in-out;
     }
 
     &:hover {
-      & .r-ban {
-        transition: all 1s ease-in-out;
-        background: url('../../assets/images/new/r-ban-hover.png');
-        background-repeat: no-repeat;
-        background-size: cover;
-        background-position: center;
+      .r-ban {
+        background-image: url('../../assets/images/new/r-ban-hover.png');
+        opacity: 0.9;
       }
     }
+
     &.red-box-1 {
       animation: red1 1s ease-in-out forwards;
-      & .r-icon {
-        //width: 155px;
-        //height: 155px;
-        background: url('../../assets/images/new/r1.png');
-        background-size: contain;
-        background-position: center;
-        background-repeat: no-repeat;
+      .r-icon {
+        background-image: url('../../assets/images/new/r1.png');
       }
     }
+
     &.red-box-2 {
       animation: red2 1s ease-in-out forwards;
-      & .r-icon {
-        //width: 229px;
-        //height: 135px;
-        background: url('../../assets/images/new/r2.png');
-        background-size: contain;
-        background-position: center;
-        background-repeat: no-repeat;
+      .r-icon {
+        background-image: url('../../assets/images/new/r2.png');
       }
     }
+
     &.red-box-3 {
-      & .r-icon {
-        background: url('../../assets/images/new/r3.png');
-        background-size: contain;
-        background-position: center;
-        background-repeat: no-repeat;
-      }
       animation: red3 1s ease-in-out forwards;
+      .r-icon {
+        background-image: url('../../assets/images/new/r3.png');
+      }
     }
+
     &.red-box-4 {
-      & .r-icon {
-        background: url('../../assets/images/new/r4.png');
-        background-size: contain;
-        background-position: center;
-        background-repeat: no-repeat;
-      }
       animation: red4 1s ease-in-out forwards;
+      .r-icon {
+        background-image: url('../../assets/images/new/r4.png');
+      }
     }
+
     &.red-box-5 {
-      & .r-icon {
-        background: url('../../assets/images/new/r5.png');
-        background-size: contain;
-        background-position: center;
-        background-repeat: no-repeat;
-      }
       animation: red5 1s ease-in-out forwards;
-    }
-    &.red-box-6 {
-      & .r-icon {
-        background: url('../../assets/images/new/r6.png');
-        background-size: contain;
-        background-position: center;
-        background-repeat: no-repeat;
+      .r-icon {
+        background-image: url('../../assets/images/new/r5.png');
       }
+    }
+
+    &.red-box-6 {
       animation: red6 1s ease-in-out forwards;
+      .r-icon {
+        background-image: url('../../assets/images/new/r6.png');
+      }
     }
   }
 }
@@ -347,30 +335,31 @@ export default {
     z-index: 10;
     width: 164px;
     height: 175px;
+    // GPU 加速
+    transform: translateZ(0);
+    backface-visibility: hidden;
+    will-change: transform, opacity;
     &.red-box-1 {
-      left: -200px;
-      top: 53%;
       animation: red1 1.5s ease-in-out forwards;
+      transform: translate(-200px, 500px) translateZ(0);
     }
     &.red-box-2 {
-      left: -200px;
-      top: 10%;
       animation: red2 1.5s ease-in-out forwards;
+      transform: translate(-100px, 100px) translateZ(0);
     }
     &.red-box-3 {
-      left: -200px;
-      top: 0;
       animation: red3 1.5s ease-in-out forwards;
+      transform: translate(-200px, 0) translateZ(0);
     }
+
     &.red-box-4 {
-      right: 0;
-      top: 53%;
       animation: red4 1.5s ease-in-out forwards;
+      transform: translate(1920px, 0) translateZ(0);
     }
+
     &.red-box-5 {
-      right: -200px;
-      top: 53%;
       animation: red5 1.5s ease-in-out forwards;
+      transform: translate(1920px, 500px) translateZ(0);
     }
   }
   &.redContainerMove {
@@ -403,68 +392,75 @@ export default {
 
 .red-container2 {
   position: absolute;
-  //background: rgba(255, 255, 255, 0.5);
   width: 800px;
   height: 500px;
-  left: -800px;
-  top: -500px;
   opacity: 0;
+  z-index: 11;
+  // 初始位置使用 transform 替代 left/top
+  transform: translate(-800px, -500px);
+  will-change: transform, opacity;
+  backface-visibility: hidden;
+
   & .red-box {
     z-index: 99;
     cursor: pointer;
-    width: 108px !important;
+    width: 108px;
     height: 100px;
-    animation: redContainerMoves 2 ease-in-out;
-    transition: all 2s ease-in-out;
+    animation: redContainerMoves 2s ease-in-out forwards;
+    transition: opacity 2s ease-in-out;
     opacity: 0;
 
+    // 子图标
     & div:first-child {
-      width: 100px !important;
+      width: 100px;
       height: 100px;
       position: absolute;
       z-index: 99;
     }
 
+    // 背景遮罩
     & .r-ban {
+      position: absolute;
       width: 178px;
       height: 75px;
       top: 55px;
+      background: url('../../assets/images/new/r-ban.png') no-repeat center / cover;
     }
 
+    // 每个红点定位使用 transform
     &.red-box-1 {
-      left: 200px !important;
-      top: 52% !important;
-    }
-    &.red-box-2 {
-      left: 330px !important;
-      top: 43% !important;
-    }
-    &.red-box-3 {
-      left: 580px !important;
-      top: 24% !important;
-    }
-    &.red-box-4 {
-      left: 450px !important;
-      top: 33% !important;
+      transform: translate(200px, 200px) !important;
       z-index: 11;
     }
+
+    &.red-box-2 {
+      transform: translate(330px, 150px) !important;
+      z-index: 11;
+    }
+
+    &.red-box-3 {
+      transform: translate(610px, 50px) !important;
+      z-index: 11;
+    }
+
+    &.red-box-4 {
+      transform: translate(480px, 100px) !important;
+      z-index: 11;
+    }
+
     &.red-box-5 {
-      left: 300px !important;
-      top: 75% !important;
+      transform: translate(300px, 280px) !important;
     }
 
     &.red-box-6 {
-      left: 450px !important;
-      top: 65% !important;
+      transform: translate(450px, 65%);
     }
   }
+
+  // 显示动画触发类
   &.redContainerMove {
-    left: -130px !important;
-    top: 200px !important;
+    transform: translate(-130px, 200px);
     opacity: 1;
-    //.red-box {
-    //  animation: redContainerMovesLevel 1s ease-in-out;
-    //}
   }
 }
 
@@ -543,68 +539,59 @@ export default {
     }
   }
 }
-
 @keyframes red1 {
   0% {
-    left: -200px;
-    top: 51%;
+    transform: translate(-200px, 500px) scale(0.9) translateZ(0);
     opacity: 0;
   }
   100% {
-    left: 100px;
-    top: 51%;
+    transform: translate(100px, 500px) scale(1) translateZ(0);
     opacity: 1;
     z-index: 11;
   }
 }
 @keyframes red2 {
   0% {
-    left: -200px;
-    top: 10%;
+    transform: translate(-100px, 100px) scale(0.9) translateZ(0);
     opacity: 0;
   }
   100% {
-    left: 330px;
-    top: 32%;
+    transform: translate(250px, 300px) scale(1) translateZ(0);
     opacity: 1;
     z-index: 11;
   }
 }
 @keyframes red3 {
   0% {
-    left: -200px;
-    top: 0;
+    transform: translate(-200px, 0) scale(0.9) translateZ(0);
     opacity: 0;
   }
   100% {
-    left: 660px;
-    top: 28%;
+    transform: translate(560px, 300px) scale(1) translateZ(0);
     opacity: 1;
     z-index: 11;
   }
 }
 @keyframes red4 {
   0% {
-    right: -230px;
-    top: 13%;
+    transform: translate(1920px, 0px) scale(0.9) translateZ(0);
     opacity: 0;
   }
   100% {
-    right: 230px;
-    top: 23%;
+    transform: translate(1500px, 200px) scale(1) translateZ(0);
     opacity: 1;
+    z-index: 11;
   }
 }
 @keyframes red5 {
   0% {
-    right: -200px;
-    top: 43%;
+    transform: translate(1920px, 500px) scale(0.9) translateZ(0);
     opacity: 0;
   }
   100% {
-    right: 50px;
-    top: 50%;
+    transform: translate(1650px, 550px) scale(1) translateZ(0);
     opacity: 1;
+    z-index: 11;
   }
 }
 @keyframes red6 {
@@ -622,77 +609,69 @@ export default {
 }
 @keyframes red1Level {
   0% {
-    left: 100px;
-    top: 51%;
+    transform: translate(100px, 500px) scale(1) translateZ(0);
     opacity: 1;
   }
   100% {
-    left: -200px;
-    top: 51%;
+    transform: translate(-200px, 500px) scale(0.9) translateZ(0);
     opacity: 0;
+    z-index: 11;
   }
 }
 @keyframes red2Level {
   0% {
-    left: 330px;
-    top: 32%;
+    transform: translate(250px, 300px) scale(1) translateZ(0);
     opacity: 1;
   }
   100% {
-    left: -200px;
-    top: 10%;
+    transform: translate(-100px, 100px) scale(0.9) translateZ(0);
     opacity: 0;
+    z-index: 11;
   }
 }
 @keyframes red3Level {
   0% {
-    left: 660px;
-    top: 28%;
+    transform: translate(560px, 300px) scale(1) translateZ(0);
     opacity: 1;
   }
   100% {
-    left: -200px;
-    top: 0;
+    transform: translate(-200px, 0) scale(0.9) translateZ(0);
     opacity: 0;
+    z-index: 11;
   }
 }
 @keyframes red4Level {
   0% {
-    right: 230px;
-    top: 23%;
+    transform: translate(1500px, 200px) scale(1) translateZ(0);
     opacity: 1;
   }
   100% {
-    right: -230px;
-    top: 13%;
+    transform: translate(1920px, 0px) scale(0.9) translateZ(0);
     opacity: 0;
+    z-index: 11;
   }
 }
 @keyframes red5Level {
   0% {
-    right: 50px;
-    top: 50%;
+    transform: translate(1650px, 550px) scale(1) translateZ(0);
     opacity: 1;
   }
   100% {
-    right: -200px;
-    top: 43%;
+    transform: translate(1920px, 500px) scale(0.9) translateZ(0);
     opacity: 0;
+    z-index: 11;
   }
 }
 @keyframes red6Level {
   0% {
-    right: 240px;
-    top: 61%;
+    transform: translate(240px, 61%) scale(1) translateZ(0);
     opacity: 1;
   }
   100% {
-    right: -200px;
-    top: 53%;
+    transform: translate(-200px, 53%) scale(0.9) translateZ(0);
     opacity: 0;
   }
 }
-
 @keyframes redContainerMoves {
   0% {
     left: 0;
diff --git a/src/views/app/homeComponents/bolloon/index.vue b/src/views/app/homeComponents/bolloon/index.vue
index bfaae47..0595363 100644
--- a/src/views/app/homeComponents/bolloon/index.vue
+++ b/src/views/app/homeComponents/bolloon/index.vue
@@ -26,10 +26,6 @@ export default {
 </script>
 
 <style lang="scss">
-.home-right-container * {
-  transition: all 0.5s ease;
-}
-
 .home-right-container {
   position: relative;
   display: flex;
@@ -44,29 +40,26 @@ export default {
     width: 252px;
     height: 282px;
     margin-top: -100px;
-    transition: transform 0.5s ease; // 关键：控制缩放动画
     z-index: 9999;
+
+    /* GPU 加速优化 */
+    transform: translateZ(0);
+    backface-visibility: hidden;
+    will-change: transform, opacity;
+
+    /* 动画控制 */
+    transition: transform 0.5s ease;
+
     &.animateJump {
       animation: balloonJump 1s infinite alternate;
     }
 
     &.shrinkFalse {
-      //c重新变回来
-      animation-name: scales-1;
-      animation-duration: 1s;
-      animation-fill-mode: forwards;
-      animation-iteration-count: 1;
-      animation-timing-function: ease-in-out;
+      animation: scales-1 1s forwards 1 ease-in-out;
     }
+
     &.shrink {
-      //一次之后停止缩放动画 不会变回来
-      animation-name: scales;
-      animation-duration: 1s;
-      animation-fill-mode: forwards;
-      animation-iteration-count: 1;
-      animation-timing-function: ease-in-out;
-      //animation: none;
-      //transform: scale(0.6);
+      animation: scales 1s forwards 1 ease-in-out;
       margin-top: -100px;
 
       .balloon-pointer {
@@ -90,28 +83,28 @@ export default {
 // 跳动动画定义
 @keyframes balloonJump {
   from {
-    transform: translateY(0);
+    transform: translateY(0) translateZ(0);
   }
   to {
-    transform: translateY(-50px);
+    transform: translateY(-50px) translateZ(0);
   }
 }
 
 @keyframes scales {
   from {
-    transform: scale(1);
+    transform: scale(1) translateZ(0);
   }
   to {
-    transform: scale(0.6);
+    transform: scale(0.6) translateZ(0);
   }
 }
 
 @keyframes scales-1 {
   from {
-    transform: scale(0.6);
+    transform: scale(0.6) translateZ(0);
   }
   to {
-    transform: scale(1);
+    transform: scale(1) translateZ(0);
   }
 }
 </style>
diff --git a/src/views/app/homeComponents/bottom-butterfly/index.vue b/src/views/app/homeComponents/bottom-butterfly/index.vue
index a89d11a..5624d5e 100644
--- a/src/views/app/homeComponents/bottom-butterfly/index.vue
+++ b/src/views/app/homeComponents/bottom-butterfly/index.vue
@@ -11,7 +11,7 @@
         <!--帐篷 跟狗-->
         <div class="butterfly-2">
           <div class="positionR">
-            <div class="cursor-box box1" @click="cursorBoxClick(1)">
+            <div class="cursor-box box1" @click="cursorBoxClick(1)" :class="{ hide: !open }">
               <div class="cursor-title"></div>
               <div class="cursor-1 cursor" />
               <div class="cursor-desc"></div>
@@ -19,7 +19,7 @@
             <img src="../../../../assets/images/rs/road/road-1.png" alt="" class="road-1" />
             <img src="../../../../assets/images/rs/t2-1.png" alt="" class="t2-1" />
             <img class="road2-ban" src="../../../../assets/images/rs/road/road2-ban.png" alt="" />
-            <div class="cursor-box box2" @click="cursorBoxClick(2)">
+            <div class="cursor-box box2" @click="cursorBoxClick(2)" :class="{ hide: !open }">
               <div class="cursor-title"></div>
               <div class="cursor-2 cursor" />
               <div class="cursor-desc"></div>
@@ -33,7 +33,7 @@
             <img src="../../../../assets/images/rs/t3-1.png" alt="" class="t3-1" />
             <img src="../../../../assets/images/rs/road/road-3.png" alt="" class="road-3" />
             <img src="../../../../assets/images/rs/road/road3-ban.png" alt="" class="road3-ban" />
-            <div class="cursor-box box3" @click="cursorBoxClick(3)">
+            <div class="cursor-box box3" @click="cursorBoxClick(3)" :class="{ hide: !open }">
               <div class="cursor-title"></div>
               <div class="cursor-3 cursor" />
               <div class="cursor-desc"></div>
@@ -53,13 +53,13 @@
         <!--   学校 年轻人 小树林   -->
         <div class="butterfly-5">
           <div class="positionR">
-            <div class="cursor-box box4" @click="cursorBoxClick(4)">
+            <div class="cursor-box box4" @click="cursorBoxClick(4)" :class="{ hide: !open }">
               <div class="cursor-title"></div>
               <div class="cursor-4 cursor" />
               <div class="cursor-desc"></div>
             </div>
             <img src="../../../../assets/images/rs/t5-1.png" alt="" class="t5-1" />
-            <div class="cursor-box box5" @click="cursorBoxClick(5)">
+            <div class="cursor-box box5" @click="cursorBoxClick(5)" :class="{ hide: !open }">
               <div class="cursor-title"></div>
               <div class="cursor-5 cursor" />
               <div class="cursor-desc"></div>
@@ -110,6 +110,9 @@ export default {
   methods: {
     cursorBoxClick(index) {
       console.log(index)
+      if (!this.open) {
+        return false
+      }
       this.$router.push({
         path: '/pages',
         query: {
@@ -124,6 +127,11 @@ export default {
 }
 </script>
 <style scoped lang="scss">
+.hide {
+  width: 0;
+  height: 0;
+  cursor: unset;
+}
 .positionR {
   position: relative;
   width: 100%;
@@ -135,72 +143,97 @@ export default {
 
 .cursor-box {
   position: absolute;
-  z-index: 9999; // 提升到最高层
+  z-index: 9999; // 保持在最上层
   opacity: 0;
   width: 160px;
-  cursor: pointer;
   height: 150px;
-  transition: all 0.5s;
+  cursor: pointer;
+
+  // 启用 GPU 加速
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  will-change: transform, opacity;
+
+  transition: opacity 0.5s ease-in-out;
 
   &:hover {
-    //   .cursor-title 展示
     .cursor-title {
       opacity: 1;
     }
+
     .cursor {
-      background: url('../../../../assets/images/rs/cursor2.png');
-      background-repeat: no-repeat;
-      background-size: contain;
+      background-image: url('../../../../assets/images/rs/cursor2.png');
     }
+
     .cursor-desc {
-      width: 669px;
-      height: 99px;
       opacity: 1;
+      transform: translateX(0) scale(1);
     }
   }
+
   .cursor-title {
     width: 176px;
     height: 70px;
-    cursor: pointer;
     opacity: 0;
+    transition: opacity 0.3s ease-in-out;
+    pointer-events: none;
   }
+
   .cursor {
-    cursor: pointer;
     width: 99px;
     height: 113px;
-    z-index: 50;
     position: absolute;
     top: 50px;
-    margin-left: 40px;
-    background: url('../../../../assets/images/rs/cursor.png');
-    background-repeat: no-repeat;
-    background-size: contain;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 50;
+    background: url('../../../../assets/images/rs/cursor.png') no-repeat center / contain;
+    transition: background-image 0.3s ease-in-out;
+    pointer-events: none;
   }
 
   .cursor-desc {
-    width: 0;
-    position: fixed;
+    width: 669px;
+    height: 99px;
+    position: absolute;
+    top: -180px;
+    left: 50%;
+    transform: translateX(-50%) scale(0.95);
     opacity: 0;
-    //left: -1050px;
-    //top: -180px;
+    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
+    pointer-events: none;
+    background: transparent;
   }
 }
-
 .butterfly-box {
   position: relative;
   width: 100%;
-  //height: 600px;
-  //过度
-  transition: all 3s;
+  overflow: visible;
+
+  /* 启用 GPU 加速 */
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  will-change: transform, opacity;
+
+  // 子组件通用动画属性
+  .butterfly,
+  .cursor-title,
+  .cursor-desc,
+  .road {
+    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
+    backface-visibility: hidden;
+  }
+  // ======================
+  // 蝴蝶路径容器 - butterfly-1
+  // ======================
   .butterfly-1 {
     position: absolute;
-
     width: 476px;
     height: 176px;
-
     right: -30px;
     top: 0;
     z-index: 2;
+
     .t1-1 {
       position: absolute;
       top: -140px;
@@ -208,104 +241,134 @@ export default {
       height: 234px;
       left: -60px;
       z-index: 1;
+      transform: translateZ(0);
     }
   }
 
+  // ======================
+  // 蝴蝶路径容器 - butterfly-2
+  // ======================
   .butterfly-2 {
     position: absolute;
     width: 866px;
-    //height: 218px;
     top: 30px;
     right: 60px;
     z-index: 3;
+
     img {
       position: absolute;
+
       &.t2-1 {
         width: 672px;
         height: 271px;
         top: -70px;
         right: -20px;
         z-index: 1;
+        transform: translateZ(0);
       }
+
       &.road-1 {
-        position: absolute;
-        right: 120px;
         width: 256px;
         height: 107px;
-        opacity: 0;
+        right: 120px;
         top: 95px;
+        opacity: 0;
         z-index: 1;
+        transform: translateZ(0);
       }
+
       &.road-2 {
-        position: absolute;
-        scale: 0.5;
         width: 600px;
         height: 273px;
+        scale: 0.5;
         z-index: 0;
         opacity: 0;
+        transform: translateZ(0);
       }
+
       &.road2-ban {
-        position: absolute;
         left: 60px;
         opacity: 0;
         top: -30px;
         width: 0;
+        transform: translateZ(0);
       }
     }
-    .box1 {
+
+    .box1,
+    .box2 {
       position: absolute;
-      top: -235px;
-      right: 320px;
+      transform: translateZ(0);
+
       .cursor-title {
-        background: url('../../../../assets/images/rs/4@2x.png');
         background-repeat: no-repeat;
         background-size: cover;
         background-position: center;
       }
+
       &:hover {
         .cursor-desc {
-          background: url('../../../../assets/images/new/t1-desc.png');
-          background-repeat: no-repeat;
-          background-size: contain;
-          background-position: center;
-          left: -600px;
-          top: -100px;
+          opacity: 1;
+          transform: translateX(200px) translateY(-100px) translateZ(0);
+        }
+      }
+
+      .cursor-desc {
+        position: absolute;
+        opacity: 0;
+        background-repeat: no-repeat;
+        background-size: contain;
+        background-position: center;
+        transform: translateZ(0);
+        pointer-events: none;
+      }
+    }
+
+    .box1 {
+      top: -235px;
+      right: 320px;
+
+      &:hover {
+        .cursor-title {
+          background: url('../../../../assets/images/rs/1@2x.png') no-repeat center / cover;
+        }
+
+        .cursor-desc {
+          background-image: url('../../../../assets/images/new/t1-desc.png');
+          transform: translate(-1060px, 325px) translateZ(0);
         }
       }
     }
+
     .box2 {
-      position: absolute;
       top: -60px;
       right: 550px;
       .cursor-title {
-        background: url('../../../../assets/images/rs/5@2x.png');
-        background-repeat: no-repeat;
-        background-size: cover;
-        background-position: center;
+        background: url('../../../../assets/images/rs/2@2x.png') no-repeat center / cover;
       }
+
       &:hover {
         .cursor-desc {
-          background: url('../../../../assets/images/new/t2-desc.png');
-          background-repeat: no-repeat;
-          background-size: contain;
-          background-position: center;
-          left: -600px;
-          top: -90px;
+          background-image: url('../../../../assets/images/new/t2-desc.png');
+          transform: translate(-830px, 150px) translateZ(0);
         }
       }
     }
   }
 
+  // ======================
+  // 蝴蝶路径容器 - butterfly-3
+  // ======================
   .butterfly-3 {
     position: absolute;
-    background: url('../../../../assets/images/rs/t3.png');
-    width: 520px;
-    //height: 137px;
-    background-repeat: no-repeat;
+    background: url('../../../../assets/images/rs/t3.png') no-repeat;
     background-size: cover;
+    width: 520px;
     top: 94px;
     right: 505px;
     z-index: 2;
+    transform: translateZ(0);
+
     .t3-1 {
       position: absolute;
       width: 386px;
@@ -313,16 +376,19 @@ export default {
       top: -50px;
       right: 60px;
       z-index: 3;
+      transform: translateZ(0);
     }
+
     .road-3 {
       position: absolute;
       width: 69px;
-      //height: 167px;
       right: -100px;
       top: 20px;
       opacity: 0;
       z-index: 0;
+      transform: translateZ(0);
     }
+
     .road3-ban {
       position: absolute;
       left: 0;
@@ -330,53 +396,51 @@ export default {
       width: 520px;
       height: 196px;
       opacity: 0;
+      transform: translateZ(0);
     }
+
     .box3 {
       position: absolute;
       top: -10px;
       left: 0px;
+
       .cursor-title {
-        background: url('../../../../assets/images/rs/3@2x.png');
-        background-repeat: no-repeat;
-        background-size: cover;
-        background-position: center;
-      }
-      .cursor-desc {
-        ////transition: all 0s;
-        //background: url('../../../../assets/images/new/t3-desc.png');
-        //background-repeat: no-repeat;
-        //background-size: contain;
-        //background-position: center;
-        //top: -10px;
-        //left: 0px;
-        //width: 0;
-        //opacity: 0;
+        background: url('../../../../assets/images/rs/3@2x.png') no-repeat center / cover;
       }
 
       &:hover {
         .cursor-desc {
-          background: url('../../../../assets/images/new/t3-desc.png');
-          background-repeat: no-repeat;
-          background-size: contain;
-          background-position: center;
-          top: -275px;
-          left: -574px;
+          opacity: 1;
+          background: url('../../../../assets/images/new/t3-desc.png') no-repeat center / contain;
+          transform: translate(-654px, -90px) translateZ(0);
         }
       }
+
+      .cursor-desc {
+        position: absolute;
+        opacity: 0;
+        background-repeat: no-repeat;
+        background-size: contain;
+        background-position: center;
+        transform: translateZ(0);
+        pointer-events: none;
+      }
     }
   }
 
+  // ======================
+  // 蝴蝶路径容器 - butterfly-4
+  // ======================
   .butterfly-4 {
     position: absolute;
-    background: url('../../../../assets/images/rs/t4.png');
-    //width: 453px;
-    width: 482px;
-    //height: 170px;
-    background-repeat: no-repeat;
+    background: url('../../../../assets/images/rs/t4.png') no-repeat;
     background-size: cover;
+    width: 482px;
     top: 180px;
     right: 313px;
     z-index: 3;
+    transform: translateZ(0);
+
     .t4-1 {
       position: absolute;
       width: 381px;
@@ -384,89 +448,114 @@ export default {
       top: -77px;
       right: 8px;
       z-index: 1;
+      transform: translateZ(0);
     }
+
     .road-4 {
+      position: absolute;
       width: 69px;
       height: 62px;
-      position: absolute;
       z-index: 0;
       left: 150px;
       top: 138px;
       opacity: 0;
+      transform: translateZ(0);
     }
+
     .road-4-1 {
       position: absolute;
       width: 482px;
       right: -35px;
       top: 5px;
       opacity: 0;
+      transform: translateZ(0);
     }
   }
 
+  // ======================
+  // 蝴蝶路径容器 - butterfly-5
+  // ======================
   .butterfly-5 {
     position: absolute;
-    //background: url('../../../../assets/images/rs/t5.png');
     width: 473px;
-    //height: 291px;
-    background-repeat: no-repeat;
-    background-size: cover;
     top: 225px;
     right: 550px;
     z-index: 3;
+    transform: translateZ(0);
+
     .t5-1 {
       position: absolute;
       width: 473px;
       height: 291px;
-      //width: 440px;
-      //height: 155px ;
       top: -65px;
       right: 65px;
       z-index: 1;
+      transform: translateZ(0);
     }
-    .box4 {
+
+    .box4,
+    .box5 {
       position: absolute;
-      top: -100px;
-      right: 30px;
+      transform: translateZ(0);
+
       .cursor-title {
-        background: url('../../../../assets/images/rs/2@2x.png');
         background-repeat: no-repeat;
         background-size: cover;
         background-position: center;
       }
+
       &:hover {
+        .cursor-title {
+          background: url('../../../../assets/images/rs/5@2x.png') no-repeat center / cover;
+        }
+
         .cursor-desc {
-          background: url('../../../../assets/images/new/t4-desc.png');
-          background-repeat: no-repeat;
-          background-size: contain;
-          background-position: center;
-          left: -575px;
-          top: -485px;
+          opacity: 1;
+          transform: translate(-620px, -365px) translateZ(0);
+        }
+      }
+
+      .cursor-desc {
+        position: absolute;
+        opacity: 0;
+        background-repeat: no-repeat;
+        background-size: contain;
+        background-position: center;
+        transform: translateZ(0);
+        pointer-events: none;
+      }
+    }
+
+    .box4 {
+      top: -100px;
+      right: 30px;
+
+      &:hover {
+        .cursor-title {
+          background: url('../../../../assets/images/rs/4@2x.png') no-repeat center / cover;
+        }
+        .cursor-desc {
+          background: url('../../../../assets/images/new/t4-desc.png') no-repeat center / contain;
+          transform: translate(-935px, -215px) translateZ(0);
         }
       }
     }
+
     .box5 {
-      position: absolute;
       top: 50px;
       left: -30px;
-      .cursor-title {
-        background: url('../../../../assets/images/rs/1@2x.png');
-        background-repeat: no-repeat;
-        background-size: cover;
-        background-position: center;
-      }
+
       &:hover {
         .cursor-desc {
-          background: url('../../../../assets/images/new/t5-desc.png');
-          background-repeat: no-repeat;
-          background-size: contain;
-          background-position: center;
-          top: -495px;
-          left: -580px;
+          background: url('../../../../assets/images/new/t5-desc.png') no-repeat center / contain;
         }
       }
     }
   }
 
+  // ======================
+  // 蝴蝶路径容器 - butterfly-6
+  // ======================
   .butterfly-6 {
     position: absolute;
     bottom: 60px;
@@ -480,23 +569,30 @@ export default {
       top: -10px;
       left: -1471px;
       z-index: 1;
+      transform: translateZ(0);
     }
   }
 
+  // ======================
+  // 蝴蝶路径容器 - butterfly-7
+  // ======================
   .butterfly-7 {
     position: absolute;
     width: 389px;
     right: 10px;
-    //height: 520px;
     top: -20px;
     z-index: 5;
+    transform: translateZ(0);
+
     .t7-1 {
       width: 100%;
+      transform: translateZ(0);
     }
+
     .t7-ban {
-      //width: 100%;
       right: 10px;
       top: -20px;
+      transform: translateZ(0);
     }
   }
 }
diff --git a/vue.config.js b/vue.config.js
index 52dfc1e..810c7f1 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -28,6 +28,7 @@ module.exports = {
   productionSourceMap: false,
   devServer: {
     port: port,
+    host: '0.0.0.0',
     open: true,
     overlay: {
       warnings: false,