CEC 领取

src/components/about/TeamMember.vue

@@ -55,7 +55,7 @@ const teamMembers = [
       "4 million-player games in Shanda Group",
       "Producer in RobTop Games to build",
       'Geometry Battle Royale" with 20m gamers',
-      "Porducer of Counter Fire",
+      "Producer of Counter Fire",
     ],
   },
   {

src/components/chain/ClaimSelectModel.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="chain-modal" v-if="props.visible" :class="{ mobile: 'mobile' }">
+    <div class="modal-bg" @click="cancelSelect"></div>
+    <div class="modal-content" :class="{ mobile: 'mobile' }">
+      <div class="modal-title">You need to connect to supported network</div>
+      <div
+        class="chain-modal-card"
+        v-for="data in currentDatas"
+        :key="data.name"
+        @click="cardClicked(data.id)"
+      >
+        <div class="icon">
+          <img :src="data.logo" :alt="data.name" />
+        </div>
+        <div class="name">{{ data.name }}</div>
+        <div class="desc">{{ data.desc }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { computed } from "vue";
+import { useChainStore } from "@/store/chain";
+
+const chain = useChainStore();
+const props = defineProps({
+  visible: Boolean,
+  close: Function,
+});
+const chainDatas = computed(() => {
+  return [...chain.chainManager.availableChains.values()];
+});
+
+const currentDatas = computed(() => {
+  return chainDatas.value;
+});
+
+function cardClicked(id) {
+  hideModal(id);
+}
+
+function cancelSelect() {
+  hideModal({errcode: 1, errmsg: "user cancel select chain"});
+}
+
+function hideModal(result = null) {
+  props.close(result);
+}
+</script>
+<style lang="scss" scoped>
+.chain-modal {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  margin: 0;
+  z-index: 10;
+  .modal-bg {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: auto;
+    margin: 0;
+    background-color: #000000a3;
+  }
+  .modal-content {
+    width: 500px;
+    max-height: 400px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+    .mobile {
+      width: 100vw;
+    }
+    .modal-title {
+      background-color: rgb(255, 255, 255);
+      color: black;
+      border-radius: 12px 12px 0 0;
+      padding: 15px 20px;
+      border-bottom: 1px solid rgba(195, 195, 195, 0.14);
+    }
+    .chain-modal-card {
+      background-color: rgb(255, 255, 255);
+      transition: background-color 0.2s ease-in-out 0s;
+      display: flex;
+      flex-direction: column;
+      -webkit-box-pack: center;
+      justify-content: center;
+      -webkit-box-align: center;
+      align-items: center;
+      padding: 24px 16px;
+      text-align: center;
+      cursor: pointer;
+      &:first-child {
+        border-radius: 12px 12px 0 0;
+      }
+      &:not(:first-child) {
+        border-top: 1px solid rgba(195, 195, 195, 0.14);
+      }
+      &:last-child {
+        border-radius: 0 0 12px 12px;
+      }
+      .icon {
+        width: 45px;
+        height: 45px;
+        display: flex;
+        border-radius: 50%;
+        overflow: visible;
+        box-shadow: none;
+        -webkit-box-pack: center;
+        justify-content: center;
+        -webkit-box-align: center;
+        align-items: center;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+        .icon-svg {
+          width: 100%;
+          height: 100%;
+          fill: currentColor;
+          color: unset;
+          stroke: none;
+        }
+      }
+      .name {
+        width: 100%;
+        font-size: 24px;
+        font-weight: 700;
+        margin-top: 0.5em;
+        color: rgb(12, 12, 13);
+      }
+      .desc {
+        width: 100%;
+        font-size: 18px;
+        margin: 0.333em 0px;
+        color: rgb(169, 169, 188);
+      }
+    }
+  }
+}
+</style>

src/components/layout/NavBar.vue

@@ -35,7 +35,7 @@
         </div>
       </div>
 
-      <div class="header-right">
+      <div class="header-right" v-if="loginShowMenu">
         <div class="immutable-cart" v-if="isCart" @click="myCart">
           <div class="immutable-cart-img">
             <img src="@/assets/img/marketplace/Add_shopping_cart02.png" alt="">
@@ -100,7 +100,7 @@ const router = useRouter();
 const route = useRoute();
 const app = useAppStore();
 const showMenu = ref(false);
-const loginShowMenu = ref(false);
+const loginShowMenu = ref(true);
 const dropdownVisible = ref(false);
 const isCart = ref(false)
 const cartShow = ref(false)
@@ -179,6 +179,11 @@ const navList = reactive([
     name: "STAKE",
     path: "/cecActivity",
   },
+  {
+    id: 7,
+    name: "CLAIM",
+    path: "/claim",
+  },
 ]);
 function click(event) {
   router.push(event.key);
@@ -220,6 +225,8 @@ function handNavCurent(nav) {
     window.open(nav.path, "_blank")
   } else if(nav.id == 6) {
     router.push(nav.path);
+  } else if(nav.id == 7) {
+    router.push(nav.path);
   }
   // if (nav.id == 1 || nav.id == 2 || nav.id == 3) {
   //   window.open(nav.path, "_blank");
@@ -325,8 +332,11 @@ watch(() => route.path,(newPath, oldPath) => {
   // if(routerPath[1] == 'marketplace' || routerPath[1] == 'detail') {
     if(routerPath[1] == 'marketplace') {
     isCart.value = true
+    } else if(routerPath[1] == 'claim'){
+      loginShowMenu.value = false
     } else {
       isCart.value = false
+      loginShowMenu.value = true
     }
 })
 

src/router/index.js

@@ -8,6 +8,7 @@ import Detail from "../views/DetailView.vue";
 import PrivacyView from '../views/PrivacyView.vue';
 import TermsView from '../views/TermsView.vue';
 import CecActivityView from '../views/CecActivityView.vue';
+import ClaimView from '../views/ClaimView.vue';
 const routes = [
   {
     path: "/",
@@ -82,6 +83,15 @@ const routes = [
       canonical: "https://.counterfire.games",
     },
   },
+  {
+    path: "/claim",
+    name: "claim",
+    component: ClaimView,
+    meta: {
+      title: "claim",
+      canonical: "https://.counterfire.games",
+    },
+  },
   {
     path: "/privacy",
     name: "Privacy",

src/views/ClaimView.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="claim">
+    <div class="claim-content">
+      <div class="claim-content-title">
+        <img src="@/assets/img/marketplace/History txt.png" alt="">
+      </div>
+      <div class="claim-content-icon">
+        <img src="@/assets/img/marketplace/CECIcon.png" alt="">
+      </div>
+      <div class="claim-content-amount">
+        <p>CEC<span> : 0</span></p>
+      </div>
+      <div class="claim-content-address">
+        <div class="address">HX$56&ada06543sHk#htyu545323LXXXXa</div>
+        <div class="icon">
+          <img src="@/assets/img/marketplace/Counterfire_History _icon.png" alt="">
+        </div>
+      </div>
+      <div class="claim-content-btn">
+        <!-- <div class="claim-content-btn-claim">CLAIM</div> -->
+        <div class="claim-content-btn-login" @click="connectLogin">Connect another wallet</div>
+      </div>
+      <div class="claim-content-tips">
+        <p>Please select another wallet address to view</p>
+        <p>Please click <span>CLAIM</span> and select the wallet address where you</p>
+        <p>want to pay <span>gas</span> and receive the <span>token</span></p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, toRefs, toRaw, onMounted, computed, inject} from "vue"
+const message = inject('$message')
+
+const connectLogin = () => {
+  console.log('登录')
+}
+
+</script>
+
+<style lang="scss" scoped>
+.claim {
+  width: 100%;
+  height: 100%;
+  padding-top: 84px;
+  background: #16141b;
+  color: #fff;
+  position: relative;
+  .claim-content {
+    position: absolute;
+    top: 198px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 1192px;
+    height: 883px;
+    background: url('@/assets/img/marketplace/Counterfire_bg.png') no-repeat;
+    background-size: 100% 100%;
+    .claim-content-title {
+      width: 822px;
+      height: 40px;
+      margin: 0 auto;
+      margin-top: 72px;
+    }
+    .claim-content-icon {
+      width: 199px;
+      height: 191px;
+      margin: 0 auto;
+      margin-top: 106px;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .claim-content-amount {
+      text-align: center;
+      p {
+        font-family: 'Poppins';
+        font-weight: bold;
+        font-size: 48px;
+        span {
+
+        }
+      }
+    }
+    .claim-content-address {
+      display: flex;
+      position: relative;
+      .address {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 717px;
+        height: 78px;
+        margin: 0 auto;
+        border-radius: 39px;
+        background: rgba(0, 0, 0, .5);
+        font-family: 'Poppins';
+        font-weight: 400;
+        font-size: 30px;
+        
+      }
+      .icon {
+        position: absolute;
+        top: 50%;
+        right: 160px;
+        transform: translateY(-50%);
+        width: 60px;
+        height: 60px;
+        cursor: pointer;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .claim-content-btn {
+      width: 720px;
+      height: 74px;
+      background: #6336D7;
+      border-radius: 37px;
+      margin: 0 auto;
+      margin-top: 12px;
+      margin-bottom: 16px;
+      font-family: 'Poppins';
+      font-weight: bold;
+      font-size: 30px;
+      >div {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+      }
+      .claim-content-btn-claim {
+        // width: 100%;
+        // height: 100%;
+        // display: flex;
+        // align-items: center;
+        // justify-content: center;
+        // cursor: pointer;
+      }
+    }
+    .claim-content-tips {
+      font-family: 'Poppins';
+      font-weight: 400;
+      font-size: 24px;
+      color: #B3B5DA;
+      text-align: center;
+      p {
+        span {
+          font-family: 'Poppins-Regular';
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+</style>