new

postcss.config.cjs

@@ -1,23 +1,23 @@
-module.exports = {
-    plugins: {
-      'postcss-px-to-viewport': {
-        unitToConvert: 'px', // 需要转换的单位，默认为"px"
-        viewportWidth: 1920, // 设计稿的视口宽度
-        unitPrecision: 5, // 单位转换后保留的精度
-        propList: ['*'], // 能转化为vw的属性列表
-        viewportUnit: 'vw', // 希望使用的视口单位
-        fontViewportUnit: 'vw', // 字体使用的视口单位
-        selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
-        minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
-        mediaQuery: false, // 媒体查询里的单位是否需要转换单位
-        replace: true, //  是否直接更换属性值，而不添加备用属性
-        exclude: undefined, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
-        include: undefined, // 如果设置了include，那将只有匹配到的文件才会被转换
-        landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
-        landscapeUnit: 'vw', // 横屏时使用的单位
-        landscapeWidth: 1920 // 横屏时使用的视口宽度
-      }
-    }
-  }
+// module.exports = {
+//     plugins: {
+//       'postcss-px-to-viewport': {
+//         unitToConvert: 'px', // 需要转换的单位，默认为"px"
+//         viewportWidth: 1920, // 设计稿的视口宽度
+//         unitPrecision: 5, // 单位转换后保留的精度
+//         propList: ['*'], // 能转化为vw的属性列表
+//         viewportUnit: 'vw', // 希望使用的视口单位
+//         fontViewportUnit: 'vw', // 字体使用的视口单位
+//         selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
+//         minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
+//         mediaQuery: false, // 媒体查询里的单位是否需要转换单位
+//         replace: true, //  是否直接更换属性值，而不添加备用属性
+//         exclude: undefined, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
+//         include: undefined, // 如果设置了include，那将只有匹配到的文件才会被转换
+//         landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
+//         landscapeUnit: 'vw', // 横屏时使用的单位
+//         landscapeWidth: 1920 // 横屏时使用的视口宽度
+//       }
+//     }
+//   }
   
   

src/components/home/GameIntroduction.vue

@@ -26,7 +26,7 @@
           </XyzTransitionGroup>
         </div>
       </transition>
-      <div class="btn-demo"> </div>
+      <!-- <div class="btn-demo"> </div> -->
     </div>
     <div class="game-bg">
       <img src="@/assets/img/home/weapon-bg.jpg" alt="" />
@@ -65,7 +65,7 @@ function handactiveTab(index) {
 <style lang="scss" scoped>
 .container {
   position: relative;
-   height: 1080px;
+  //  height: 1080px;
   .tabs {
     width: 1440px;
     margin: 0 auto;

src/components/home/HeroSwiper.vue

@@ -42,7 +42,7 @@
           >
             <SwiperSlide v-for="(item, index) in heroList" :key="index">
               <XyzTransitionGroup class="item-group" xyz="fade ease">
-                <div class="hero-big-img">
+                <div class="hero-big-img" :class="index >= 7 ?  'man-bg' :'woman-bg'">
                   <img
                     class="hero_big_image"
                     v-if="activeIndex == index"
@@ -58,13 +58,10 @@
           >
             <img src="@/assets/img/home/hero-swiper-bg.png" alt="" />
           </div> -->
-          <div
-            class="swiper-btn2-prev"
-            :class="activeIndex == 0 ? 'swiper-button-disabled' : ''"
-          >
+          <div class="swiper-btn2-prev">
             <img src="@/assets/img/home/next.png" alt="" />
           </div>
-          <div class="swiper-btn2-next" :class="activeIndex == 9 ? '' : ''">
+          <div class="swiper-btn2-next">
             <img src="@/assets/img/home/prev.png" alt="" />
           </div>
         </div>
@@ -261,40 +258,57 @@ function test(index, sc) {
   width: 854px;
   height: 903px;
   position: relative;
-  left: 700px;
-  .hero-big-img {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  img {
-    max-width: 100%;
-    height: auto;
-    object-fit: cover;
-  }
+  left: 740px;
   .swiper-btn2-prev {
     position: absolute;
     top: 70px;
-    right: 140px;
-    z-index: 6;
+    right: 280px;
+    width: 50px;
+    height: 50px;
+    z-index: 10;
     cursor: pointer;
   }
   .swiper-btn2-next {
     position: absolute;
     top: 70px;
-    right: 40px;
-    z-index: 6;
+    right: 179px;
+    width: 50px;
+    height: 50px;
+    z-index: 10;
     cursor: pointer;
   }
+  .hero-big-img {
+    width: 854px;
+    position: relative;
+    height: 903px;
+    bottom: 0;
+    display: flex;
+    // justify-content: center;
+    // align-items: center;
+  }
+  img {
+    position: absolute;
+    bottom: 0;
+    max-width: 100%;
+    height: auto;
+    object-fit: cover;
+  }
+
   // .swiper-button-disabled {
   //   opacity: 0.5;
   //   pointer-events: none;
   //   cursor:not-allowed
   // }
 }
+.woman-bg{
+  background: url('@/assets/img/home/hero/hero-bg.png')no-repeat;
+  background-position: center bottom;
+} 
+.man-bg{
+  background: url('@/assets/img/home/hero/hero-active-bg.png')no-repeat;
+  background-position:center bottom;
+}
 .hero_big_image {
-  
- 
 }
 .hero-right {
   position: relative;

src/components/home/WeaponSwiper.vue

@@ -24,7 +24,7 @@
         @swiper="setWeaponThumbsSwiper"
         :slides-per-view="4"
         :modules="modules"
-        :space-between="23"
+        :space-between="20"
         class="weaponThumbs"
         :slideToClickedSlide="true"
         :centeredSlidesBounds="true"
@@ -138,9 +138,9 @@ function test(index, sc) {
   user-select: none;
   position: relative;
   // padding: 0 40px;
-
-  width: 1440px;
+  width: 940px;
   height: 200px;
+  margin: 0 auto;
   .swiper-button-prev::after {
     display: none;
   }
@@ -149,15 +149,15 @@ function test(index, sc) {
   }
   .swiper-button-prev-btn {
     position: absolute;
-    left:150px;
-    top: -180px;
+    left:-120px;
+    top:-280px;
     z-index: 5;
   }
   .swiper-button-next-btn {
     position: absolute;
-    right: 150px;
-    z-index: 5;
-    top:-180px;
+    z-index: 6;
+     right: -120px;
+    top:-280px;
   }
 
   .swiper-button-disabled {