update

src/components/GameSwiper.vue

@@ -20,7 +20,10 @@
         >
           <div 
             class="carousel-track" 
-            :style="{ transform: `translateX(calc(-${currentIndex * 104}% + ${currentIndex * 60}px))`, transition: isTransitioning ? 'transform 0.3s ease' : 'none' }"
+            :style="{ 
+              transform: `translateX(calc(-${currentIndex * 104}% + ${currentIndex * 13.2}vw))`,
+              transition: isTransitioning ? 'transform 0.3s ease' : 'none'
+            }"
           >
             
             <div 
@@ -269,7 +272,8 @@ onUnmounted(() => {
     transform: translateY(0);
   }
   50% {
-    transform: translateY(-6px); /* 上浮一点点 */
+    /* 6px -> 6/375*100 ≈ 1.6vw */
+    transform: translateY(-1.6vw);
   }
 }
 
@@ -294,7 +298,8 @@ onUnmounted(() => {
     opacity: 0.6;
   }
   50% {
-    transform: translateX(-6px); /* 往左移动一点 */
+    /* 6px -> 1.6vw */
+    transform: translateX(-1.6vw);
     opacity: 1;
   }
 }
@@ -311,29 +316,35 @@ onUnmounted(() => {
     opacity: 0.6;
   }
   50% {
-    transform: translateX(6px); /* 往右移动一点 */
+    /* 6px -> 1.6vw */
+    transform: translateX(1.6vw);
     opacity: 1;
   }
 }
+
 .show-position {
   position: relative;
 }
+
 .shou-dev {
   position: absolute;
   top: 50vw;
   left: 11vw;
 }
+
 .shou-dev .shou-btn {
   width: 25vw;
   position: absolute;
   top: 7vw;
   left: 20vw;
 }
+
 .action-btn {
   display: flex;
   flex-flow: row;
   justify-content: center;
 }
+
 .action-btn .shou-click {
   width: 24vw;
 }
@@ -344,6 +355,7 @@ onUnmounted(() => {
   left: 2vw;
   top: -2vw;
 }
+
 .scene-item {
   position: fixed;
   cursor: pointer;
@@ -351,15 +363,18 @@ onUnmounted(() => {
   overflow: hidden;
   animation: float 4s ease-in-out infinite;
 }
+
 .scene-item:hover {
   transform: scale(1.05);
 }
+
 .scene-item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 }
+
 .item-1 {
   width: 14vw;
   height: 14vw;
@@ -367,6 +382,7 @@ onUnmounted(() => {
   left: 3vw;
   animation-delay: 0s;
 }
+
 .item-2 {
   width: 12vw;
   height: 12vw;
@@ -393,7 +409,8 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 20px;
+  /* 20px -> 5.33vw */
+  padding: 5.33vw;
   box-sizing: border-box;
   background-image: url('../assets/images/new/swiper-page-bg.webp');
   background-size: cover;
@@ -405,7 +422,8 @@ onUnmounted(() => {
   width: 100%;
   max-width: 100vw;
   position: relative;
-  padding: 0 20px;
+  /* 0 20px -> 0 5.33vw */
+  padding: 0 5.33vw;
   box-sizing: border-box;
 }
 
@@ -420,7 +438,8 @@ onUnmounted(() => {
   display: flex;
   flex-direction: row;
   width: 100%;
-  padding: 20px 0;
+  /* 20px 0 -> 5.33vw 0 */
+  padding: 5.33vw 0;
 }
 
 .carousel-slide {
@@ -430,9 +449,14 @@ onUnmounted(() => {
   background-size: cover;
   background-position: center;
   background-image: url('../assets/images/new/border-img.webp');
-  min-width: calc(100% - 160px);
+
-  width: calc(100% - 160px);
+  /* 100% - 160px -> 100% - 42.67vw (160/375*100) */
-  margin: 0 20px;
+  min-width: calc(100% - 42.67vw);
+  width: calc(100% - 42.67vw);
+
+  /* 0 20px -> 0 5.33vw */
+  margin: 0 5.33vw;
+
   flex-shrink: 0;
   cursor: pointer;
   user-select: none;
@@ -469,6 +493,7 @@ onUnmounted(() => {
   transform: translateX(-50%);
   display: flex;
   gap: 2vw;
+  /* 2vw 4vw 保持不变，这里本来就是 vw */
   padding: 2vw 4vw;
   background: rgba(0, 0, 0, 0.3);
   border-radius: 4vw;
@@ -476,13 +501,15 @@ onUnmounted(() => {
 }
 
 .indicator {
-  width: 10px;
+  /* 10px -> 2.67vw */
-  height: 10px;
+  width: 2.67vw;
+  height: 2.67vw;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.6);
   cursor: pointer;
   transition: all 0.3s ease;
-  border: 2px solid transparent;
+  /* 2px -> 0.53vw */
+  border: 0.53vw solid transparent;
 }
 
 .indicator:hover {
@@ -492,7 +519,8 @@ onUnmounted(() => {
 
 .indicator.active {
   background: #fff;
-  width: 28px;
+  /* 28px -> 7.47vw */
+  width: 7.47vw;
   border-radius: 5px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
@@ -500,21 +528,24 @@ onUnmounted(() => {
 /* 移动端适配 */
 @media (max-width: 768px) {
   .game-page {
-    padding: 10px;
+    /* 10px -> 2.67vw */
+    padding: 2.67vw;
   }
 
   .carousel-container {
-    padding: 0 10px;
+    /* 0 10px -> 0 2.67vw */
+    padding: 0 2.67vw;
   }
 
   .carousel-slide {
     min-width: calc(100% - 12vw);
     width: calc(100% - 12vw);
-    margin: 0 10px;
+    margin: 0 2.67vw;
   }
 
   .carousel-track {
-    padding: 10px 0;
+    /* 10px 0 -> 2.67vw 0 */
+    padding: 2.67vw 0;
   }
 }
 </style>