fix

postcss.config.cjs

@@ -7,7 +7,7 @@ module.exports = {
         propList: ['*'], // 能转化为vw的属性列表
         viewportUnit: 'vw', // 希望使用的视口单位
         fontViewportUnit: 'vw', // 字体使用的视口单位
-        selectorBlackList: ['.bg-middle'], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
+        selectorBlackList: [''], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
         minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
         mediaQuery: false, // 媒体查询里的单位是否需要转换单位
         replace: true, //  是否直接更换属性值，而不添加备用属性

src/components/about/Grid9Panel.vue

@@ -4,12 +4,18 @@
     <div class="bg-up"></div>
     <div class="bg-down"></div>
     <div class="copy-writing">
-      <div class="title">Michael Yue Founder</div>
+      <div class="name">{{ (teamItem.name) }}</div>
-      <div><img src="" alt=""></div>
+      <div class="title">{{teamItem.title}}</div>
-      <div class="slogan">Ops Manager in Shanda Group.</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>
   </div>
 </template>
+<script setup>
+defineProps(["teamItem"]);
+</script>
 <style lang="scss" scoped>
 .bg {
   width: 100%;
@@ -18,7 +24,7 @@
   left: 0;
   bottom: 38px;
   height: 96px;
- overflow: hidden;
+  overflow: hidden;
   // height: 400px;
   min-height: 96px;
 }
@@ -29,7 +35,7 @@
   height: 400px;
   // overflow: hidden;
   text-align: center;
-  .title {
+  .name {
     padding-top: 20px;
     width: 270px;
     margin: 0 auto;
@@ -38,26 +44,41 @@
     font-weight: 400;
     color: #ffffff;
   }
-  .slogan {
+  .title{
     margin: 0 auto;
-    width: 222px;
+    font-size: 20px;
+    font-family: "Big John";
+    font-weight: 400;
+    color: #ffffff;
+  }
+  .slogan {
+    // margin: 0 auto;
+    width: 66%;
+    margin-left: 47px;
+    text-align: center;
     font-size: 20px;
     font-family: Arial;
     font-weight: bold;
     color: #ffffff;
-    line-height: 32px;
+    // line-height: 32px;
   }
 }
-.copy-writing:hover .title{
+.copy-writing:hover .name {
   padding-top: 50px;
-    width: 270px;
+  width: 270px;
-    margin: 0 auto;
+  margin: 0 auto;
-    font-size: 22px;
+  font-size: 22px;
-    font-family: "Big John";
+  font-family: "Big John";
-    font-weight: 400;
+  font-weight: 400;
-    color: #ffffff;
+  color: #ffffff;
+}
+.team-boder {
+  width: 191px;
+  height: 4px;
+  padding-top: 40px;
+  padding-bottom: 40px;
+  margin-left: 60px;
 }
-
 .bg-up {
   position: absolute;
   top: 0;

src/components/about/Roadmap.vue

@@ -145,8 +145,8 @@ function handleScroll() {
     height: 667px;
     // z-index: ;
     img {
-      width: 100%;
+      width: 820px;
-      height: 100%;
+      height: 667px;
     }
   }
   .history-bottom-boder {
@@ -219,7 +219,8 @@ function handleScroll() {
         height: 290px;
         background: #1e293b;
         border-radius: 12px;
-        background: url("../../assets/img/about/history-bg.png");
+        background: url("../../assets/img/about/history-bg.png")no-repeat;
+        background-size: contain;
         font-size: 16px;
         font-family: Arial;
         font-weight: 400;

src/components/about/VisionMission.vue

@@ -40,7 +40,13 @@
           <div class="team-title">TEAM</div>
         </div>
         <div class="card-list">
-          <div class="card-item">
+          <div class="card-item" v-for="team in cardText">
+            <div class="cardbg">
+              <img src="@/assets/img/about/card-bg.png" alt="" />
+            </div>
+            <Grid9Panel class="grid" :teamItem="team"></Grid9Panel>
+          </div>
+          <!-- <div class="card-item">
             <div class="cardbg">
               <img src="@/assets/img/about/card-bg.png" alt="" />
             </div>
@@ -57,13 +63,7 @@
               <img src="@/assets/img/about/card-bg.png" alt="" />
             </div>
             <Grid9Panel class="grid"></Grid9Panel>
-          </div>
+          </div> -->
-          <div class="card-item">
-            <div class="cardbg">
-              <img src="@/assets/img/about/card-bg.png" alt="" />
-            </div>
-            <Grid9Panel class="grid"></Grid9Panel>
-          </div>
         </div>
       </div>
     </div>
@@ -81,9 +81,31 @@ import { ref, computed, reactive, onMounted } from "vue";
 import Grid9Panel from "./Grid9Panel.vue";
 const Y1 = ref(0);
 const ratio = ref(0.2); //视差偏移率
-
 const positionY1 = ref(0); //背景Y轴偏移量
-
+const cardText = [
+  {
+    name: "Michael Yue",
+    title: "Founder",
+    slogan:
+      "Co-Founder of Giant Interactive(NASDAQ:GA)<br/>Ops Manager in Shanda Group",
+  },
+  {
+    name: "Yoda",
+    title: "Gaming Economist",
+    slogan: "CDO of Foxconn GroupGaming data expert in Giant Interactive",
+  },
+  {
+    name: "Super G.",
+    title: "Producer",
+    slogan: "Worked in Shanda Group with 4 million-player games.",
+  },
+  {
+    name: "Xin",
+    title: "CTO",
+    slogan:
+      "In charged of Legend, Legends of the World,The Romance of Legends, etc.",
+  },
+];
 onMounted(() => {
   window.addEventListener("scroll", handleScroll); //创建滚动监听，页面滚动回调handleScroll方法
   let bgTest = document.getElementById("bgTest");
@@ -213,7 +235,7 @@ function handleScroll() {
             // left: 30px;
             // top: 40px;
             animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-            animation: myfirstcard2 0.5s  1 alternate forwards;
+            animation: myfirstcard2 0.5s 1 alternate forwards;
             border-radius: 12px;
             img {
               width: 100%;
@@ -226,14 +248,13 @@ function handleScroll() {
         .card-item:hover .cardbg {
           border-radius: 12px;
           animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-          animation: myfirstcard1 0.5s  1 alternate forwards;
+          animation: myfirstcard1 0.5s 1 alternate forwards;
           img {
             border-radius: 12px;
             opacity: 0.3;
             filter: blur(3px);
           }
         }
-        
       }
     }
   }

src/components/home/Banner.vue

@@ -13,10 +13,14 @@
             /></a>
           </div>
           <div class="download-item">
-            <img src="@/assets/img/home/andriod.png" alt="" />
+            <a href="https://www.cebg.games/release/cebg.apk"
+              ><img src="@/assets/img/home/andriod.png" alt=""
+            /></a>
           </div>
           <div class="download-item">
-            <img src="@/assets/img/home/apple.png" alt="" />
+            <a href="https://www.cebg.games/release/cebg.apk">
+              <img src="@/assets/img/home/apple.png" alt=""
+            /></a>
           </div>
         </div>
       </div>
@@ -43,7 +47,7 @@ import Slogan from "./Slogan.vue";
 .banner {
   width: 100%;
   height: 100vh;
-   height: 937px;
+  height: 937px;
   // padding-top: 60px;
   // background: url("@/assets/img/home/banner-out.jpg") no-repeat;
   // background-size: 100% 100%;

src/components/layout/NavBar.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <div class="header header-top">
+      <div class="header-logo"><a href="#"> <img src="../../assets/img/home/header-logo.png" alt=""></a></div>
       <div class="nav">
         <a
           class="nav-item duration-200"
@@ -142,11 +143,18 @@ function handNavCurent(nav) {
   background-color: rgb(255, 255, 255);
   width: 100%;
   // height: 60px;
+  display: flex;
+  align-items: center;
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
     0 2px 4px -2px rgba(0, 0, 0, 0.1);
-
+ .header-logo{
+  margin-left: 20PX;
+  // padding-left: 20px;
+  width: 54px;
+  height: 54px;
+ }
   .nav {
-    padding-left: 252px;
+    padding-left: 83px;
     display: flex;
     justify-content: space-between;
     width: 1130px;