fix

mobile/src/components/about/Grid9Panel.vue

@@ -3,14 +3,14 @@
     <div class="bg-up"></div>
     <div class="bg-middle"></div>
     <div class="bg-down"></div>
-    <!-- <div class="copy-writing">
+    <div class="copy-writing">
-      <div class="name">{{ (teamItem.name) }}</div>
+      <div class="name">{{ teamItem.name }}</div>
-      <div class="title">{{teamItem.title}}</div>
+      <div class="title">{{ teamItem.title }}</div>
       <div class="team-boder">
         <img src="@/assets/img/about/team-card-boder.png" alt="" />
       </div>
-      <div class="slogan" v-html="teamItem.slogan "></div>
+      <div class="slogan" v-html="teamItem.slogan"></div>
-    </div> -->
+    </div>
   </div>
 </template>
 <script setup>
@@ -20,7 +20,7 @@ defineProps(["teamItem"]);
 .bg {
   width: 100%;
   // padding-left: 15px;
- margin-left: 45px;
+  margin-left: 45px;
   position: absolute;
   left: 0;
   bottom: 38px;
@@ -29,24 +29,26 @@ defineProps(["teamItem"]);
   justify-content: center;
   flex-direction: column;
   overflow: hidden;
-  min-height: 210px;
+  min-height: 180px;
-  max-height: 865px;
+  max-height: 835px;
 }
 
 .copy-writing {
-  position: absolute;
+  // position: absolute;
-  width: 300px;
+  width: 400px;
-  height: 400px;
+  height: 800px;
-  // overflow: hidden;
+  margin: 0 auto;
+  overflow: hidden;
   text-align: center;
   .name {
-    padding-top: 20px;
+    padding-top: 80px;
-    width: 270px;
+    width: 400px;
     margin: 0 auto;
-    font-size: 22px;
+    font-size: 36px;
     font-family: "Big John";
     font-weight: 400;
     color: #ffffff;
+    line-height: 42px;
   }
   .title {
     margin: 0 auto;
@@ -56,19 +58,19 @@ defineProps(["teamItem"]);
     color: #ffffff;
   }
   .slogan {
-    // margin: 0 auto;
+    margin: 0 auto;
-    width: 66%;
+    width: 400px;
-    margin-left: 47px;
+    // margin-left: 47px;
     text-align: center;
-    font-size: 20px;
+    font-size: 30px;
     font-family: Arial;
     font-weight: bold;
     color: #ffffff;
-    // line-height: 32px;
+    line-height: 60px;
   }
 }
 .copy-writing:hover .name {
-  padding-top: 50px;
+  padding-top: 180px;
   width: 270px;
   margin: 0 auto;
   font-size: 22px;
@@ -77,11 +79,11 @@ defineProps(["teamItem"]);
   color: #ffffff;
 }
 .team-boder {
-  width: 191px;
+  width: 400px;
-  height: 4px;
+  height: 8px;
   padding-top: 40px;
   padding-bottom: 40px;
-  margin-left: 60px;
+  // margin-left: 60px;
 }
 .bg-up {
   position: absolute;

mobile/src/components/about/Roadmap.vue

@@ -3,9 +3,6 @@
     <div class="roadmap-bg">
       <img src="@/assets/img/about/roadmap-bg.png" alt="" />
     </div>
-    <div class="blue-monster">
-      <img src="@/assets/img/about/blue-monster.png" alt="" />
-    </div>
     <div class="history-bottom-boder">
       <img src="@/assets/img/about/history-bottom-boder.png" alt="" />
     </div>
@@ -23,69 +20,32 @@
       <div class="title-boder">
         <img src="@/assets/img/about/roadmap-title-boder.png" alt="" />
       </div>
-      <div class="history">
+      <div class="roadmap-home">
-        <div
+        <swiper
-          class="history-content"
+          :modules="modules"
-          v-for="(item, index) in history"
+          :loop="true"
-          :key="index"
+          :slides-per-view="1"
+          :autoplay="{ delay: 4000, disableOnInteraction: false }"
+          :pagination="{ clickable: true }"
         >
-          <div class="title">{{ item.title }}</div>
+          <!-- loop可循环轮播，autoplay可自动播放 -->
-          <div class="time">{{ item.time }}</div>
+          <swiper-slide v-for="(item, index) in HistoryList" :key="index">
-        </div>
+            <div class="time-content">
-      </div>
+              <div class="title-and-time">
-      <div class="history-bottom">
+                <div class="time-content-title">{{ item.title }}</div>
-        <img src="@/assets/img/about/roadmap-time.png" alt="" />
+                <div class="time-content-time">{{ item.time }}</div>
-      </div>
+              </div>
-
+              <div class="title-boder">
-      <div class="history-card">
+                <img src="../../assets/img/about/roadmap-time-top.png" alt="" />
-        <div class="card-item">
+              </div>
-          <div class="item">
+              <div class="time-content-content">
-            <div class="text">PVE Model</div>
+                <div v-for="(content, i) in item.content" :key="i">
-            <div class="text">2D TPS Version Dev</div>
+                  {{ content }}
-          </div>
+                </div>
-        </div>
+              </div>
-        <div class="card-item">
+            </div>
-          <div class="item">
+          </swiper-slide>
-            <div class="text">Genesis NFT IGO</div>
+        </swiper>
-            <div class="text">Official Website V1</div>
-            <div class="text">PVP Released</div>
-            <div class="text">Alpha Test</div>
-          </div>
-        </div>
-
-        <div class="card-item">
-          <div class="item">
-            <div class="text">3D TPS-Hero Version <br> upgrade</div>
-            <div class="text">CEBG in-app wallet</div>
-            <div class="text">Social System</div>
-            <div class="text">Free-to-Play NFT<br> mode</div>
-          </div>
-        </div>
-
-        <div class="card-item">
-          <div class="item">
-            <div class="text">Completing 3D <br>Upgrade</div>
-            <div class="text">10K+ Participation<br> in Test II</div>
-            <div class="text">NFT New Collection<br> Mint</div>
-            <div class="text">In-Game Marketplace</div>
-          </div>
-        </div>
-        <div class="card-item">
-          <div class="item">
-            <div class="text">Million Player in 3 <br>month</div>
-            <div class="text">Off-line E-sport Event</div>
-            <div class="text">KOL<br> Engine completed</div>
-            <div class="text">City Warfare testing</div>
-          </div>
-        </div>
-        <div class="card-item">
-          <div class="item">
-            <div class="text">Million Player</div>
-            <div class="text">Off-line E-sport Event</div>
-            <div class="text">KOL Engine <br>completed</div>
-            <div class="text">City Warfare testing</div>
-          </div>
-        </div>
       </div>
     </div>
   </div>
@@ -93,17 +53,75 @@
 
 <script setup>
 import { ref, computed, reactive, onMounted } from "vue";
+// 引入swiper组件
+import { Swiper, SwiperSlide } from "swiper/vue";
+// 引入swiper样式（按需导入）
+import "swiper/css";
+// import "swiper/css/pagination"; // 轮播图底面的小圆点
+
+// 引入swiper核心和所需模块
+import { Autoplay, Pagination } from "swiper";
+const modules = [Autoplay];
 const Y1 = ref(0);
 const ratio = ref(0.2); //视差偏移率
 
 const positionY1 = ref(0); //背景Y轴偏移量
-const history = reactive([
+const HistoryList = reactive([
-  { title: "Seed Round", time: "2021.11" },
+  {
-  { title: "NFT IGO", time: "2022.4" },
+    title: "Seed Round",
-  { title: "B Round", time: "2022.11" },
+    time: "2021.11",
-  { title: "Beta Test II", time: "2023.4" },
+    content: ["PVE Model", "2D TPS Version Dev"],
-  { title: "Official Launch", time: "2023.06+" },
+  },
-  { title: "Million-Player Game", time: "2023.9" },
+  {
+    title: "NFT IGO",
+    time: "2022.4",
+    content: [
+      "Genesis NFT IGO",
+      "Official Website V1",
+      "PVP Released",
+      "Alpha Test",
+    ],
+  },
+  {
+    title: "BRound",
+    time: "2022.11",
+    content: [
+      "3D TPS-Hero Version <br> upgrade",
+      "CEBG in-app wallet",
+      "Social System",
+      "Free-to-Play NFT<br> mode",
+    ],
+  },
+  {
+    title: "Beta Test II",
+    time: "2023.4",
+    content: [
+      "Completing 3D <br>Upgrade",
+      "10K+ Participation<br> in Test II",
+      "NFT New Collection<br> Mint",
+      "In-Game Marketplace",
+    ],
+  },
+  {
+    title: "Official Launch",
+    time: "2023.06+",
+    content: [
+      "Million Player in 3 <br>month",
+      "Off-line E-sport Event",
+      "KOL<br> Engine completed",
+      "City Warfare testing",
+    ],
+  },
+  {
+    title: "Million-Player Game",
+    time: "2023.9",
+    content: [
+      "Million Player",
+      "Off-line E-sport Event",
+      "KOL Engine <br>completed",
+      "City Warfare testing",
+    ],
+  },
 ]);
 onMounted(() => {
   window.addEventListener("scroll", handleScroll); //创建滚动监听，页面滚动回调handleScroll方法
@@ -123,6 +141,8 @@ function handleScroll() {
 <style lang="scss" scoped>
 .roadmap {
   position: relative;
+  // background: #1e393d;
+  padding-bottom: 256px;
   .roadmap-bg {
     position: absolute;
     left: 0;
@@ -143,7 +163,6 @@ function handleScroll() {
     bottom: 108px;
     width: 820px;
     height: 667px;
-    // z-index: ;
     img {
       width: 820px;
       height: 667px;
@@ -174,17 +193,64 @@ function handleScroll() {
     z-index: -1;
   }
   .content {
-    width: 1440px;
-    margin: 0 auto;
     .title {
-      padding-top: 110px;
+      padding-top: 85px;
       font-size: 48px;
+      text-align: center;
       font-family: "Big John";
       font-weight: 400;
       color: #ffffff;
+      margin-bottom: 35px;
     }
     .title-boder {
       width: 695px;
+      margin: 0 auto;
+      padding-bottom: 64px;
+    }
+    .roadmap-home {
+      width: 710px;
+      margin: 0 auto;
+      .swiper-slide {
+        // background-color: #bfc;
+        // height: 200px;
+      }
+
+      .time-content {
+        .title-and-time {
+          margin-bottom: 36px;
+        }
+        .time-content-title {
+          text-align: center;
+          font-size: 40px;
+          font-family: "Big John";
+          font-weight: 400;
+          color: #ffffff;
+        }
+        .time-content-time {
+          font-size: 40px;
+          text-align: center;
+          font-family: " Big John";
+          font-weight: 400;
+          color: #ffffff;
+        }
+        .time-content-content {
+          width: 630px;
+          margin: 0 auto;
+          height: 410px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          background: url("@/assets/img/about/roadmap-time-bg.png") no-repeat;
+          background-size: contain;
+          font-size: 30px;
+          text-align: center;
+          font-family: Arial;
+          font-weight: 400;
+          color: #ffffff;
+          line-height: 36px;
+        }
+      }
     }
     .history {
       display: flex;
@@ -219,24 +285,25 @@ function handleScroll() {
         height: 290px;
         background: #1e293b;
         border-radius: 12px;
-        background: url("../../assets/img/about/history-bg.png")no-repeat;
+        background: url("../../assets/img/about/history-bg.png") no-repeat;
         background-size: contain;
         font-size: 16px;
         font-family: Arial;
         font-weight: 400;
         color: #ffffff;
         line-height: 22px;
-        display: flex;flex-direction: column;
+        display: flex;
-        justify-content:center ;
+        flex-direction: column;
+        justify-content: center;
         align-items: center;
-        .item{
+        .item {
-            padding-left: 10px;
+          padding-left: 10px;
-        .text{
+          .text {
-         position: relative;
+            position: relative;
-         margin-bottom: 17px;
+            margin-bottom: 17px;
-        }
+          }
-        .text::after{
+          .text::after {
-            content: ' ';
+            content: " ";
             position: absolute;
             left: -10px;
             top: 8px;
@@ -244,7 +311,7 @@ function handleScroll() {
             height: 3px;
             background-color: #fff;
             border-radius: 4px;
-        }
+          }
         }
       }
     }

mobile/src/components/about/VisionMission.vue

@@ -41,9 +41,9 @@
         </div>
         <div class="card-list">
           <div class="card-item" v-for="team in cardText">
-            <!-- <div class="cardbg">
+            <div class="cardbg">
               <img src="@/assets/img/about/card-bg.png" alt="" />
-            </div> -->
+            </div>
             <Grid9Panel class="grid" :teamItem="team"></Grid9Panel>
           </div>
         </div>
@@ -216,7 +216,7 @@ function handleScroll() {
       }
       .card-list {
         padding-top: 100px;
-        padding-bottom: 251px;
+        // padding-bottom: 251px;
         width: 710px;
         margin: 0 auto;
         display: flex;
@@ -228,13 +228,13 @@ function handleScroll() {
           border-radius: 12px;
           width: 710px;
           height: 930px;
-          margin-bottom: 65px;
+          margin-bottom: 39px;
           .cardbg {
             position: absolute;
             // left: 30px;
             // top: 40px;
             animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-            animation: myfirstcard2 0.5s 1 alternate forwards;
+            animation: myfirstcard2 1s 1 alternate forwards;
             border-radius: 12px;
             width: 270px;
             height: 270px;
@@ -267,7 +267,7 @@ function handleScroll() {
   max-height: 865px;
   cursor: pointer;
   animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  animation: myfirstnone 0.5s alternate 1 forwards;
+  animation: myfirstnone 1.5s alternate 1 forwards;
 }
 
 .card-item:hover {
@@ -296,10 +296,10 @@ function handleScroll() {
 }
 @keyframes myfirstcard1 {
   0% {
-    left: 30px;
+    left: 50px;
-    top: 40px;
+    top: 30px;
-    width: 270px;
+    width: 308px;
-    height: 270px;
+    height: 308px;
   }
   100% {
     left: 0px;
@@ -311,9 +311,9 @@ function handleScroll() {
 @keyframes myfirstcard2 {
   100% {
     left: 30px;
-    top: 40px;
+    top: 30px;
-    width: 270px;
+    width: 308px;
-    height: 270px;
+    height: 308px;
   }
   0% {
     left: 0px;

mobile/src/views/AboutView.vue

@@ -2,6 +2,7 @@
     <div>
       <IntroductionBanner></IntroductionBanner>
       <VisionMission></VisionMission>
+      <Roadmap></Roadmap>
     </div>
 </template>