fix

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue</title>
+    <title>CEBG</title>
   </head>
   <script type="module">
      import {Buffer} from 'buffer';

src/components/home/ChipCard.vue

@@ -1,35 +1,28 @@
 <template>
   <div>
     <div class="chip-container">
-      <div class="chip">
-        <div class="chip-top">
-          <div class="chip-item">
-            <div class="role-chip-title">ROLE CHIP</div>
-            <div class="role-chip-img">
-              <img src="@/assets/img/home/chip/001.png" alt="" />
-              <img src="@/assets/img/home/chip/002.png" alt="" />
-              <img src="@/assets/img/home/chip/003.png" alt="" />
-              <img src="@/assets/img/home/chip/004.png" alt="" />
-              <img src="@/assets/img/home/chip/005.png" alt="" />
-              <img src="@/assets/img/home/chip/006.png" alt="" />
-              <img src="@/assets/img/home/chip/007.png" alt="" />
-              <img src="@/assets/img/home/chip/008.png" alt="" />
-              <img src="@/assets/img/home/chip/009.png" alt="" />
-              <img src="@/assets/img/home/chip/010.png" alt="" />
-            </div>
+      <div class="chip-content">
+        <div class="title"> <img src="../../assets/img/home/chip/chip-title.png" alt=""></div>
+        <div class="container">
+          <div class="grid">
+            <div class="grid-item-red">  </div>
+            <div class="grid-item-red"></div>
+            <div class="grid-item-red"></div>
+            <div class="grid-item-red"></div>
           </div>
-        </div>
-        <div class="weapon-chip-top">
-          <div class="chip-item">
-            <div class="role-chip-title">WEAPON CHIP</div>
-            <div class="role-chip-img">
-              <img src="@/assets/img/home/chip/010.png" alt="" />
-              <img src="@/assets/img/home/chip/012.png" alt="" />
-              <img src="@/assets/img/home/chip/013.png" alt="" />
-              <img src="@/assets/img/home/chip/014.png" alt="" />
-              <img src="@/assets/img/home/chip/015.png" alt="" />
-              <img src="@/assets/img/home/chip/016.png" alt="" />
-            </div>
+
+          <div class="grid">
+            <div class="grid-item-yellow"></div>
+            <div class="grid-item-yellow"></div>
+            <div class="grid-item-yellow"></div>
+            <div class="grid-item-yellow"></div>
+          </div>
+
+          <div class="grid">
+            <div class="grid-item-blue"></div>
+            <div class="grid-item-blue"></div>
+            <div class="grid-item-blue"></div>
+            <div class="grid-item-blue"></div>
           </div>
         </div>
       </div>
@@ -44,137 +37,40 @@ let ma;
 <style lang="scss" scoped>
 .chip-container {
   position: relative;
-
-  .chip {
+   
+  .chip-content {
     width: 1440px;
     margin: 0 auto;
     // margin-top: 102px;
-    padding-bottom: 342px;
-    .chip-name {
-      width: 335px;
-      font-size: 78px;
-      font-family: "Big John";
-
-      color: #1c3045;
+    .title{
+      padding-top: 78px;
+      display: flex;
+      justify-content: center;
     }
-    .chip-boder {
-      margin-top: 27px;
-      margin-bottom: 39px;
-      width: 100%;
-      img {
-        width: 100%;
-        height: 100px;
-      }
+    .container {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
     }
-    .chip-title {
-      width: 1432px;
-      font-size: 18px;
-      margin: 0 auto;
-      margin-bottom: 52px;
-      font-family: Arial;
-      font-weight: bold;
-      color: #1d2931;
-      line-height: 32px;
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      grid-template-rows: repeat(2, 1fr);
+      grid-gap: 10px;
+      width: 33.33%;
+      margin-bottom: 20px;
     }
-    .chip-top {
-      // padding-left: 28px;
-      // padding-right: 26px;
-      width: 100%;
-      height: 247px;
-      padding-top: 13px;
-      padding: 10px 10px 10px 10px;
-      background-color: rgba(136, 214, 249, 0.3);
-
-      background-size: contain;
-      .chip-item {
-        background-image: url("@/assets/img/home/chip/chip-item-bg.png");
-        background-repeat: no-repeat;
-        width: 100%;
-        height: 247px;
-        background-size: contain;
-      }
-      .role-chip-title {
-        font-size: 32px;
-        //  padding-top: 13px;
-        margin-left: 28px;
-        margin-bottom: 38px;
-        font-family: "BigJohn";
-
-        color: #507d97;
-        line-height: 32px;
-      }
-      .role-chip-img {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-left: 28px;
-        margin-right: 28px;
-        img {
-          width: 115px;
-          height: 109px;
-        }
-      }
+    .grid-item-red {
+       background:url('@/assets/img/home/chip/red-bg.png') no-repeat;
+      height: 200px;
     }
-    .weapon-chip-top {
+    .grid-item-yellow {
+       background:url('@/assets/img/home/chip/yellow-bg.png') no-repeat;
+      height: 200px;
     }
-    .weapon-chip-top {
-      width: 100%;
-      height: 247px;
-      padding-top: 13px;
-      margin-top: 32px;
-      background-color: rgba(136, 214, 249, 0.3);
-      padding: 10px 10px 10px 10px;
-
-      .chip-item {
-        background-image: url("@/assets/img/home/chip/chip-item-bg.png");
-        background-repeat: no-repeat;
-        width: 100%;
-        height: 247px;
-        background-size: contain;
-      }
-      .role-chip-title {
-        font-size: 32px;
-
-        margin-bottom: 38px;
-        // margin-top: 13px;
-        margin-left: 28px;
-        font-family: "BigJohn";
-
-        color: #507d97;
-        line-height: 32px;
-      }
-      .role-chip-img {
-        display: flex;
-        margin-left: 28px;
-        // justify-content: space-between;
-        align-items: center;
-        img {
-          width: 115px;
-          margin-right: 40px;
-          height: 109px;
-        }
-      }
-    }
-  }
-  .chip-bg {
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    color: transparent;
-    img {
-      position: absolute;
-      height: 100%;
-      width: 100%;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      z-index: -1;
-      color: transparent;
+    .grid-item-blue{
+       background:url('@/assets/img/home/chip/blue-bg.png') no-repeat;
+      height: 200px;
     }
   }
 }

src/components/home/TabBar.vue

@@ -78,10 +78,20 @@ function handactiveTab(index) {
 }
 
 .tab.active {
-  cursor: pointer;
-  // background-color: #f00;
-  color: #000101;
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  flex-direction: column;
+  background: none;
+  color: #000101;
+  text-transform: uppercase;
+  font-size: 16px;
+  font-weight: bold;
+  cursor: pointer;
+  padding: 24px;
+  margin-right: 40px;
   width: 96px;
   height: 96px;
 

src/components/home/petal.vue

@@ -1,62 +0,0 @@
-<template>
-    <div class="petal-container"></div>
-</template>
-  
-<script setup>
-  import { ref, onMounted } from 'vue';
-  
-  const petalCount = 50;
-  const container = ref(null);
-  
-  const createPetal = () => {
-    const petal = document.createElement('div');
-    petal.classList.add('petal');
-    petal.style.left = Math.random() * container.value.clientWidth + 'px';
-    petal.style.animationDelay = Math.random() * 10 + 's';
-    container.value.appendChild(petal);
-  };
-  
-  onMounted(() => {
-    for (let i = 0; i < petalCount; i++) {
-      createPetal();
-    }
-  });
-  </script>
-  
-  <style scoped>
-  .petal-container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    overflow: hidden;
-  }
-  
-  .petal {
-    position: absolute;
-    content: "";
-    height: 10px;
-    width: 10px;
-    border-radius: 50%;
-    background-color: pink;
-    transform: rotate(45deg) scale(1);
-    z-index: 1;
-  }
-  
-  @keyframes petal-fall {
-    0% {
-      transform: translate(0, 0) rotate(45deg) scale(1);
-      opacity: 1;
-    }
-    100% {
-      transform: translate(50vw, 100vh) rotate(45deg) scale(0);
-      opacity: 0;
-    }
-  }
-  
-  .petal {
-    animation: petal-fall 10s linear infinite;
-  }
-  </style>
-