Merge branch 'cec-claim' of http://git.kingsome.cn/huangjinming/CounterFireGames into touenament

src/components/home/banner.vue

@@ -2,15 +2,35 @@
   <div class="promo-container">
    
     <div class="background-img">
-      <video ref="videoRef" autoplay loop muted>
+      <!-- <video ref="videoRef" autoplay loop muted>
         <source
           src="../../assets/video/scene.mp4"
           type="video/mp4"
         />
-      </video>
+      </video> -->
+      <!-- <img src="@/assets/img/home/gameWeb_KV.png" alt=""> -->
+      <!-- :autoplay="{ delay: 4000, disableOnInteraction: false }" :navigation="true" -->
+      <swiper
+        :loop="true"
+        :spaceBetween="10"
+        :autoplay="{ delay: 4000, disableOnInteraction: false }"
+        :thumbs="{ swiper: thumbsSwiper }"
+        :modules="modules"
+        @slideChange="onSlideChange"
+        class="mySwiper2"
+      >
+        <swiper-slide
+          v-for="(slideContent, index) in weaponListBig"
+          :key="index"
+        >
+          <div class="weapon-name">
+            <img :src="slideContent.url" alt="" />
+          </div>
+        </swiper-slide>
+      </swiper>
     </div>
 
-    <div class="overlay">
+    <div class="overlay" v-if="selectWeaponIdenx == 0">
       <div class="game-title-img">
         <!-- <img
           src="../../assets/img/home/gameWeb_p1_slogan.png"
@@ -18,7 +38,7 @@
         /> -->
         <!-- <a href="https://mint.counterfire.games/" target="_blank" rel="noopener noreferrer"> -->
           <img
-            src="../../assets/img/home/new-img/gameWeb_p1_slogan.png"
+            src="@/assets/img/home/new-img/gameWeb_p1_slogan.png"
             alt="Game Background"
           />
         <!-- </a> -->
@@ -44,11 +64,49 @@
         <!-- <div class="poster poster-there"></div> -->
       </div>
     </div>
+
+    <div class="overlay overlay-one" v-if="selectWeaponIdenx == 1">
+      <div class="game-title-img-one">
+        <span @click="linkMedium"></span>
+        <img
+            src="@/assets/img/home/new-img/gameWeb_p1_slogan_1.png"
+            alt="Game Background"
+          />
+      </div>
+
+      <div class="download-buttons">
+        <button class="btn android-btn" @click="downloadGame('Android')">
+          <!-- Android -->
+        </button>
+        <button
+          class="btn google-play-btn"
+          @click="downloadGame('Google Play')"
+        >
+          <!-- GET IT ON Google Play -->
+        </button>
+        <button class="btn app-store-btn" @click="downloadGame('App Store')">
+          <!-- GET IT ON App Store -->
+        </button>
+      </div>
+      <div class="posters">
+        <div class="poster poster-one"></div>
+        <div class="poster poster-tow"></div>
+        <!-- <div class="poster poster-there"></div> -->
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { ref } from "vue";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import Weapon3dLoader from "./WeaponModelLoader.vue";
+import { FreeMode, Navigation, Thumbs, Autoplay } from "swiper/modules";
+import "swiper/css";
+import "swiper/css/free-mode";
+import "swiper/css/navigation";
+import "swiper/css/thumbs";
+const modules = [FreeMode, Navigation, Thumbs, Autoplay];
 
 const downloadGame = (platform) => {
   if (platform == "Android") {
@@ -61,6 +119,32 @@ const downloadGame = (platform) => {
     window.open("https://apps.apple.com/app/counter%20fire/id6444462915");
   }
 };
+
+const linkMedium = () => {
+  window.open("https://link.medium.com/EC7a8auq3Nb");
+}
+
+const weaponListBig = ref([
+  {
+    url: new URL(
+      "@/assets/img/home/gameWeb_KV.png",
+      import.meta.url
+    ).href,
+  },
+  {
+    url: new URL(
+      "@/assets/img/home/gameWeb_KV2(1).jpg",
+      import.meta.url
+    ).href,
+  }
+]);
+
+const selectWeaponIdenx = ref(0);
+const onSlideChange = (swiper) => {
+  console.log("Slide changed to index:", swiper.realIndex);
+  selectWeaponIdenx.value = swiper.realIndex;
+};
+
 </script>
 
 <style lang="scss" scoped>
@@ -74,25 +158,31 @@ const downloadGame = (platform) => {
     // padding-top: 84px;
     height: 100%;
     // background: url('../../assets/img/home/gameWeb_KV.png') no-repeat;
-    background: url('../../assets/img/home/new-img/gameWeb_KV.png') no-repeat;
+    // background: url('@/assets/img/home/gameWeb_KV.png') no-repeat;
-    background: 100% 100%;
+    // background-size: 100% 100%;
     video {
       width: 100%;
       height: 100%;
       object-fit: cover;
     }
+    .swiper {
+      height: 100%;
+      .weapon-name {
+        width: 100%;
+        height: 100%;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
   }
-  .game-title-img {
+  
-    width: 1262px;
-    height: 242px;
-    display: flex;
-    justify-content: center;
-  }
 
   .overlay {
     position: absolute;
     // top: 204px;
-    bottom: -250px;
+    bottom: -190px;
     left: 0;
     width: 100%;
     height: 100%;
@@ -101,29 +191,42 @@ const downloadGame = (platform) => {
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    z-index: 999;
 
-    .game-title {
+    .game-title-img {
-      font-size: 3rem;
+      width: 818px;
-      color: white;
+      height: 332px;
-      font-weight: bold;
+      margin-bottom: 23px;
-      margin-bottom: 10px;
+      display: flex;
+      justify-content: center;
     }
-
+    .game-title-img-one {
-    .game-tagline {
+      width: 757px;
-      font-size: 2rem;
+      height: 718px;
-      color: white;
+      margin-bottom: 43px;
-      margin-bottom: 20px;
+      display: flex;
+      justify-content: center;
+      span {
+        display: inline-block;
+        position: absolute;
+        left: 50%;
+        bottom: 260px;
+        transform: translateX(-58%);
+        width: 290px;
+        height: 48px;
+        cursor: pointer;
+      }
     }
-
+    
     .download-buttons {
       display: flex;
       gap: 50px;
-
+      z-index: 999;
       .btn {
         // padding: 10px 20px;
         border: none;
-        width: 223px;
+        width: 217px;
-        height: 68px;
+        height: 62px;
         cursor: pointer;
         border-radius: 5px;
         font-size: 1rem;
@@ -164,6 +267,7 @@ const downloadGame = (platform) => {
       // display: flex;
       // flex-direction: column;
       // justify-content: center;
+      z-index: 999;
       .poster {
         width: 50px;
         height: 30px;
@@ -206,5 +310,8 @@ const downloadGame = (platform) => {
       }
     }
   }
+  .overlay-one {
+    bottom: 4px;
+  }
 }
 </style>

src/views/ClaimView.vue

@@ -140,7 +140,7 @@
           <div class="user-address">
             <span>Address:</span> {{address}}
           </div>
-          <div class="rewards" v-if="localWalletStore.walletType == 3 && (rewardList !== undefined && rewardList.length > 0)">
+          <!-- <div class="rewards" v-if="localWalletStore.walletType == 3 && (rewardList !== undefined && rewardList.length > 0)">
             <div class="rewards-text">Tournament Rewards</div>
             <div class="rewards-hover">
               <li v-for="(item, index) in rewardList" :key="index">
@@ -157,7 +157,7 @@
                 </div>
               </li>
             </div>
-          </div>
+          </div> -->
         </div>
         <!-- <div class="content-tips content-tips-login" v-if="cecInfo.bindUid">
           <span>You'll receive your $CEC airdrop in Bitget spot account before the listing time.</span>
@@ -414,8 +414,8 @@ const getCecTotal = async () => {
   if(address.value) {
     let token = marketplaceStore.fireToken || localWalletStore.token
     let data = await apiCecInfoAll(address.value, token)
-    // cecInfo.value = data.data
+    cecInfo.value = data.data
-    // availableAmount.value = cecInfo.value.available
+    availableAmount.value = cecInfo.value.available
     // if(data.data.bindUid) {
     //   if(data.data.available == 0 || data.data.available == '0') {
     //     cecUserStatus.value = -2
@@ -638,7 +638,7 @@ const getCircuitRewardHistory = async () => {
 }
 
 onMounted(() => {
-  getCircuitRewardHistory()
+  // getCircuitRewardHistory()
   address.value = marketplaceStore.fireAddress || localWalletStore.address
   getCecTotal()
 })