last update

.env.dev

@@ -2,3 +2,5 @@ VUE_APP_BASE_API='https://market.cebg.games'
 VUE_APP_BASE_API2='https://invitation.counterfire.games'
 //VUE_APP_BASE_API2='http://192.168.100.83:3000/'
 VUE_APP_GPAL_API='https://gacha.counterfire.games'
+
+VUE_APP_GPAL_API3='https://webapi.cebggame.com'

.env.production

@@ -1,3 +1,4 @@
 VUE_APP_BASE_API='https://market.cebg.games'
 VUE_APP_BASE_API2='https://invitation.counterfire.games'
 VUE_APP_GPAL_API='https://gacha.counterfire.games'
+VUE_APP_GPAL_API3='https://webapi.cebggame.com'

src/api/User.js

@@ -1,6 +1,6 @@
 import request from '@/utils/request'
 import request2 from '@/utils/requestduplicate'
-
+import request3 from '@/utils/requests'
 
 const GPAL_URL = import.meta.env.VUE_APP_GPAL_API;
 
@@ -87,6 +87,13 @@ export const logout = () =>
     data
   })
 }
+
+export const getBasic=(params)=>{
+  return request3({
+    url: `/api/claim/result/${params}`,
+    method: 'get',
+  })
+}
 //
 // export const changePass = (params: any) =>
 //   request({

src/components/task/TaskTwo.vue

@@ -16,13 +16,13 @@
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                Invite Quest</a
+                VIEW YOUR QUEST</a
               >
             </div>
           </div>
 
           <div class="complete">
-            <!-- Complete the Sailor’s Quest to unlock the invite quest -->
+            <!-- <div class="connect-btn">Connect and check</div> -->
           </div>
         </div>
         <div class="content-conter">
@@ -73,8 +73,131 @@
             </div>
           </div>
           <div class="content-right" v-if="isStatus">
+            <!-- <div class="connect-centent">
+              <div class="connect-btn">Connect and check</div>
+            </div> -->
+
+            <div class="got">You got</div>
+
+            <div class="got-btn">
+              <div class="points-btn">
+                <div class="points-item">Points :</div>
+                <div class="points-item-number">{{ userInfo.point }}</div>
+              </div>
+              <div class="points-btn">
+                <div class="points-item">Ranking :</div>
+                <div class="points-item-number">{{ userInfo.rank }}</div>
+              </div>
+            </div>
+            <!-- <div class="boders">
+              <img src="../../assets//img/task/boders.png" alt="" />
+            </div> -->
+
+            <div class="rewards-card">
+              <div class="base-rewards">
+                <div>
+                  <img src="../../assets/img/task/ts_main_zuanshi.png" alt="" />
+                </div>
+                <div class="cec-top">
+                  <a-tooltip placement="bottom" overlayClassName="my-tooltip">
+                    <template #title>
+                      <div>
+                        <div class="tooltip-text">
+                          Basic Rewards equate to one-third of each player’s
+                          earned points, summing up to a distribution of 500,000
+                          CEC.
+                        </div>
+                      </div>
+                    </template>
+
+                    <div class="cec-title">Basic Rewards</div>
+                  </a-tooltip>
+
+                  <div class="cec-content">
+                    <div class="cec-lable">CEC</div>
+                    <div class="cec-number">
+                      {{ parseFloat((userInfo.point / 3).toFixed(2)) }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="base-rewards">
+                <div>
+                  <img src="../../assets/img/task/ts_main_zuanshi.png" alt="" />
+                </div>
+                <div class="cec-top">
+                  <a-tooltip placement="bottom" overlayClassName="my-tooltip">
+                    <template #title>
+                      <div class="tooltip-text">
+                        Ranking rewards total 500,000 CEC
+
+                        <div>Top 10% points holders share 40%</div>
+                        <div>Top 10%-30% points holders share 40%</div>
+                        <div>Top 30%-50% points holders share 20%</div>
+                      </div>
+                    </template>
+
+                    <div class="cec-title">Rank Rewards</div>
+                  </a-tooltip>
+                  <!-- <div class="cec-title">Rank Rewards</div> -->
+                  <div class="cec-content">
+                    <div class="cec-lable">CEC</div>
+                    <div class="cec-number">{{ cecRankShow }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <!-- <div class="total-boders">
+              <img src="../../assets//img/task/boderstow.png" alt="" />
+            </div> -->
+            <div class="total-rewards">
+              <div class="total-lable">
+                <div class="triangle-icon-left">
+                  <img src="../../assets//img/task/triangle.png" alt="" />
+                </div>
+                <div class="total-cec">Total Rewards CEC</div>
+                <div class="triangle-icon-right">
+                  <img src="../../assets//img/task/triangle.png" alt="" />
+                </div>
+              </div>
+              <div class="total-number">
+                {{
+                  parseFloat(
+                    parseFloat((userInfo.point / 3).toFixed(2)) +
+                      Number(cecRankShow)
+                  ).toFixed(2)
+                }}
+              </div>
+            </div>
+            <div class="claim-btn">Claim</div>
+            <div class="claim-text">Claim time to be announced</div>
+            <div class="boders">
+              <img src="../../assets//img/task/boders.png" alt="" />
+            </div>
+            <div class="yoyo-content">
+              <div class="your-yoyo-lable">
+                <div class="your-yoyo-text">
+                  Your Yoyo <span class="your-yoyo-number"> {{ userInfo.tickets }}</span>
+                </div>
+                <div class="yoyo-coming-soon">Yoyo event coming soon</div>
+              </div>
+              <div class="yoyo-img">
+                <img src="../../assets/img/task/Yoyo.png" alt="" />
+              </div>
+            </div>
+            <div class="gacha-star">
+              <div class="gacha-star-item">
+                <div class="icon-star">
+                  <img src="../../assets/img/task/icon_star.png" alt="" />
+                </div>
+                <div>
+                  Gacha&Star rewards are not displayed on this page for the time
+                  being, and will be announced after the snapshot.
+                </div>
+              </div>
+            </div>
             <!-- <div class="link-title">Invite Link</div> -->
-            <div class="boder-left"></div>
+            <!-- <div class="boder-left"></div>
             <div class="link-btn">
               <div>
                 <div>Invite Link</div>
@@ -118,23 +241,14 @@
                     userInfo.point ? userInfo.point : "0"
                   }}</span>
                 </div>
-                <!-- <a-tooltip placement="bottomLeft">
-                  <template #title>
-                    <span>10 points for each successful invite.</span>
-                  </template> -->
+                
                 <div class="you-input-item">
                   Rank
                   <span class="item-number">{{
                     userInfo.rank ? userInfo.rank : "0"
                   }}</span>
                 </div>
-                <!-- <div class="you-input-item">
-                    Top
-                    <span class="item-number"
-                      >{{ userInfo.top > 30 ? "+30" : userInfo.top }}%</span
-                    >
-                  </div> -->
-                <!-- </a-tooltip> -->
+                
                 <a-tooltip placement="bottom" overlayClassName="my-tooltip">
                   <template #title>
                     <div class="tooltip-text">
@@ -208,39 +322,39 @@
                     <div class="img-tips"></div>
                   </a-tooltip>
                 </div>
-                <!-- <div>
-                  <img src="@/assets/img/task/candy-dispenser.png" alt="" />
-                </div> -->
+               
               </div>
 
-              <!-- <div class="tip">
-              <div class="tip-item">10 points for each successful invite</div>
-              <div class="tip-item">1 ticket for every 20 points</div>
+             
             </div> -->
-            </div>
           </div>
           <div class="content-right-not-login" v-else>
-            <div class="complete">
+            <!-- <div class="complete">
               Complete the Gacha Quest to unlock the invite quest
+            </div> -->
+            <div v-if="!isStatus && chain.logined" class="the-event">
+              The event has ended
             </div>
-            <div class="quest-content">
-              <div class="quest-left">
-                <div class="currency-img">
-                  <img src="@/assets/img/task/currency.png" alt="" />
+            <div v-else>
+              <div class="quest-content">
+                <div class="quest-left">
+                  <div class="currency-img">
+                    <img src="@/assets/img/task/currency.png" alt="" />
+                  </div>
+                </div>
+                <div class="quest-right">
+                  <div class="candy-dispenser-img">
+                    <img src="@/assets/img/task/candy-dispenser.png" alt="" />
+                  </div>
                 </div>
               </div>
-              <div class="quest-right">
-                <div class="candy-dispenser-img">
-                  <img src="@/assets/img/task/candy-dispenser.png" alt="" />
-                </div>
-              </div>
-            </div>
 
-            <div class="token-btns">
-              <div class="token-btn">Token Rewards</div>
-              <div class="token-btn">Yoyo Event</div>
+              <div class="token-btns">
+                <div class="token-btn">Token Rewards</div>
+                <div class="token-btn">Yoyo Event</div>
+              </div>
+              <div class="gacha-quest" @click="login">Connect and check</div>
             </div>
-            <div class="gacha-quest" @click="handTaskOne">Gacha Quest</div>
           </div>
         </div>
       </div>
@@ -256,13 +370,21 @@ import { useRouter, useRoute } from "vue-router";
 import Vue3autocounter from "vue3-autocounter";
 import NavBar from "../layout/navber.vue";
 import { useCopyToClipboard } from "../../hooks/useCopyToClipboard";
-import { getLeaderboard, UserInfo, UserStatus, getJoin } from "@/api/User";
+import {
+  getLeaderboard,
+  UserInfo,
+  UserStatus,
+  getJoin,
+  getBasic,
+} from "@/api/User";
 import { useChainStore } from "@/store/chain";
 import { useAppStore } from "@/store/app";
+import { hasMetamask } from "@/utils/chain.util";
 import { ref, reactive, watchEffect, onMounted, watch, computed } from "vue";
 import { message } from "ant-design-vue";
 const chain = useChainStore();
 const AppModule = useAppStore();
+const loginLoading = ref(false);
 const router = useRouter();
 const route = useRoute();
 const invited = ref(0);
@@ -274,6 +396,28 @@ const counter = ref(null);
 const isStatus = ref(false);
 const data = reactive([]);
 const userInfo = reactive({});
+const cecRankShow = ref(0);
+const totalScore = ref(1518320);
+const rankScore = ref(82673);
+
+const remainingReward = ref(500000);
+
+const userPercentage = computed(
+  () => (userInfo.point / totalScore.value) * 100
+);
+const cuount = computed(() => (userInfo.rank / rankScore.value) * 100);
+const reward = computed(() => {
+  if (cuount.value > 0.5) {
+    return 0;
+  } else if (cuount.value <= 0.1) {
+    return remainingReward.value * 0.4 * (userPercentage.value * 0.1);
+  } else if (cuount.value > 0.1 && cuount.value <= 0.3) {
+    return remainingReward.value * 0.4 * (userPercentage.value * 0.2);
+  } else if (cuount.value > 0.3 && cuount.value <= 0.5) {
+    return remainingReward.value * 0.2 * (userPercentage.value * 0.2);
+  }
+});
+
 const formattedData = computed(() => {
   return data
     .map((item) => ({
@@ -292,16 +436,36 @@ const formattedData = computed(() => {
 const typesInRegular = computed(() =>
   userInfo.regular.map((item) => item.type).join("<br/>")
 );
-
-const assign = (source, target)=>{
+async function login(event) {
+  var next = window.location.href;
+  if (!hasMetamask()) {
+    var url = `https://metamask.app.link/dapp/${next}`;
+    location.href = url;
+  } else {
+    if (!chain.logined) {
+      // 没有登录情况下执行登录
+      loginLoading.value = true;
+      try {
+        await chain.chainManager.login();
+        chain.logined = chain.chainManager.isLogined;
+        currentTask.value = 2;
+        loginLoading.value = false;
+      } catch (err) {
+        loginLoading.value = false;
+      }
+      // console.log("logined:", chain.chainManager.isLogined);
+    }
+  }
+}
+const assign = (source, target) => {
   if (target === undefined || target === null) {
-    throw new TypeError('Cannot convert undefined or null to object')
+    throw new TypeError("Cannot convert undefined or null to object");
   }
 
   for (let key in target) {
-    source[key] = target[key]
+    source[key] = target[key];
   }
-}
+};
 const totalRegularPoints = computed(() =>
   userInfo.regular.reduce((total, item) => total + item.point, 0)
 );
@@ -316,9 +480,9 @@ const handTaskHome = () => {
 const handTaskOne = () => {
   const code = route.query.code;
   if (code) {
-    router.push({ path: "/undertest", query: { code: code } });
+    router.push({ path: "/taskTwo", query: { code: code } });
   } else {
-    router.push("/undertest");
+    router.push("/taskTwo");
   }
   console.log(router, "-=-=-");
 };
@@ -342,7 +506,7 @@ const handleCopy = () => {
 watch(
   () => chain.logined,
   async (newValue, oldValue) => {
-   // console.log("logined changed from", oldValue, "to", newValue);
+    // console.log("logined changed from", oldValue, "to", newValue);
     const res = await getLeaderboard({ offset: 0, limit: 100 });
     console.log(res);
     if (res) {
@@ -356,8 +520,15 @@ watch(
       console.log(data.value, "ff");
     }
     const userStatus = await UserStatus({ account: AppModule.accountId });
+    const basic = await getBasic(AppModule.accountId.toLowerCase());
+    cecRankShow.value = basic.data.cecRankShow;
 
-    if ( userStatus && userStatus.claim && Number(userStatus.claim) !== 0 && userStatus.status.every((status) => status == 1)) {
+    if (
+      userStatus &&
+      userStatus.claim &&
+      Number(userStatus.claim) !== 0 &&
+      userStatus.status.every((status) => status == 1)
+    ) {
       isStatus.value = true;
       const resjoin = await getJoin({
         account: AppModule.accountId,
@@ -380,6 +551,7 @@ watch(
 onMounted(async () => {
   const res = await getLeaderboard({ offset: 0, limit: 100 });
   console.log(res);
+  console.log(userPercentage, "userPercentage.value");
   if (res) {
     data.value = res.data;
 
@@ -391,7 +563,14 @@ onMounted(async () => {
     console.log(data.value, "ff");
   }
   const resStatus = await UserStatus({ account: AppModule.accountId });
-  if ( resStatus && resStatus.claim && Number(resStatus.claim) !== 0 && resStatus.status.every((status) => status == 1)) {
+  const basic = await getBasic(AppModule.accountId.toLowerCase());
+  cecRankShow.value = basic.data.cecRankShow;
+  if (
+    resStatus &&
+    resStatus.claim &&
+    Number(resStatus.claim) !== 0 &&
+    resStatus.status.every((status) => status == 1)
+  ) {
     isStatus.value = true;
   }
   const resq = await UserInfo({ account: AppModule.accountId });
@@ -412,10 +591,17 @@ onMounted(async () => {
 .task-two-header {
   // height: 65px;
 }
+.the-event {
+  padding-left: 100px;
+  padding-right: 100px;
+  color: #fff;
+  font-size: 28px;
+}
 .task-two {
   position: relative;
   width: 100%;
   height: 100%;
+
   //   height: calc(100vh - 65px);
   // padding-bottom: 100px;
   .bg {
@@ -455,10 +641,19 @@ onMounted(async () => {
       .complete {
         // width: 48%;
 
-        font-size: 18px;
-        font-family: "MEurostile";
-        font-weight: 400;
-        color: #959595;
+        // font-size: 18px;
+        // font-family: "MEurostile";
+        // font-weight: 400;
+        // color: #959595;
+      }
+
+      .connect-btn {
+        width: 242px;
+        height: 46px;
+        text-align: center;
+        line-height: 46px;
+        cursor: pointer;
+        background: #ffde29;
       }
       .return {
         font-size: 50px;
@@ -492,10 +687,216 @@ onMounted(async () => {
 
     .content-right {
       // padding-top: 51px;
-      border-left: 1px solid #5d5548;
+      // border-left: 1px solid #5d5548;
       padding-left: 66px;
       // width: 100%;
       position: relative;
+      .gacha-star {
+        // position: absolute;
+        // bottom: -50px;
+        // // right: 0px;
+        // left: 50%;
+        font-size: 12px;
+        width: 580px;
+        display: flex;
+        margin-top: 20px;
+        justify-content: center;
+        align-items: center;
+        font-family: "Poppins";
+        font-weight: 300;
+        color: #fefefe;
+        .gacha-star-item {
+          display: flex;
+          width: 480px;
+          .icon-star {
+            margin-right: 10px;
+          }
+        }
+      }
+      .boders {
+        margin-top: 10px;
+      }
+      .rewards-card {
+        padding-top: 29px;
+        padding-right: 42px;
+        width: 583px;
+        margin-bottom: 33px;
+        justify-content: space-between;
+        display: flex;
+        .base-rewards {
+          display: flex;
+          width: 210px;
+          justify-content: space-between;
+        }
+      }
+      .total-boders {
+        margin-top: 58px;
+      }
+      .cec-top {
+      }
+      .cec-title {
+        font-size: 19px;
+        font-family: "Poppins";
+        font-weight: 300;
+        position: relative;
+        color: #ffffff;
+      }
+      .cec-title::before {
+        content: "";
+        position: absolute;
+        top: 5px;
+        right: -9px;
+        width: 6px;
+        height: 6px;
+        background-color: red;
+        border-radius: 50%;
+      }
+      .cec-content {
+        display: flex;
+        width: 100%;
+        justify-content: space-between;
+        .cec-lable {
+          font-size: 19px;
+          font-family: "Poppins";
+          font-weight: 300;
+          color: #d79b30;
+        }
+        .cec-number {
+          font-size: 19px;
+          font-family: "Poppins";
+          font-weight: 400;
+          color: #fff000;
+        }
+      }
+      .connect-centent {
+        display: flex;
+        width: 783px;
+        justify-content: flex-end;
+      }
+
+      .points-btn {
+        width: 265px;
+        height: 52px;
+        padding-left: 32px;
+        display: flex;
+        padding-right: 32px;
+        align-items: center;
+        background: rgba(44, 34, 16, 0.5);
+        border: 1px solid #5c4e35;
+      }
+      .got {
+        font-size: 40px;
+        font-family: "GemunuExtraBold";
+        font-weight: 400;
+        // position: absolute;
+
+        color: #ffffff;
+        // margin-top: 72px;
+        margin-bottom: 15px;
+      }
+      .points-item-number {
+        font-size: 19px;
+        font-family: "Poppins-Regular";
+        font-weight: 400;
+        color: #52ff00;
+      }
+      .got-btn {
+        display: flex;
+        width: 583px;
+        justify-content: space-between;
+      }
+      .total-rewards {
+        width: 583px;
+        height: 66px;
+        background: rgba(44, 34, 16, 0.5);
+        border: 1px solid #5c4e35;
+        margin-top: 10px;
+        display: flex;
+        padding-left: 17px;
+        padding-right: 42px;
+        align-items: center;
+        justify-content: space-between;
+        .total-lable {
+          display: flex;
+          align-items: center;
+          .total-cec {
+            padding-left: 15px;
+            padding-right: 15px;
+            font-size: 19px;
+            font-family: "Poppins";
+            font-weight: 300;
+            color: #fefefe;
+          }
+          .triangle-icon-right {
+            transform: rotate(180deg);
+          }
+        }
+
+        .total-number {
+          font-size: 19px;
+          font-family: "Poppins";
+          font-weight: 400;
+          color: #fff000;
+        }
+      }
+      .claim-btn {
+        width: 153px;
+        height: 39px;
+        margin: 0 auto;
+        margin-top: 30px;
+        text-align: center;
+        line-height: 39px;
+        // cursor: pointer;
+        background: #757575;
+      }
+      .yoyo-content {
+        width: 100%;
+        justify-content: space-between;
+        display: flex;
+        padding-top: 20px;
+        align-items: center;
+        padding-right: 93px;
+        .your-yoyo-lable {
+          display: flex;
+          justify-content: space-between;
+          flex-direction: column;
+          .your-yoyo-text {
+            font-size: 28px;
+            font-family: "GemunuExtraBold";
+            font-weight: 400;
+            color: #ffffff;
+          }
+          .your-yoyo-number {
+            font-size: 28px;
+            font-family: "GemunuExtraBold";
+            font-weight: 400;
+            color: #62fe00;
+          }
+        }
+        .yoyo-coming-soon {
+          font-size: 18px;
+          font-family: "Poppins-Regular";
+          font-weight: 300;
+          color: #ffffff;
+        }
+      }
+      .yoyo-img {
+        width: 87px;
+        height: 60px;
+        img {
+          width: 87px;
+          // height: 60px;
+        }
+      }
+      .claim-text {
+        width: 38%;
+        font-size: 16px;
+        font-family: "Poppins-Regular";
+        font-weight: 300;
+        color: #fefefe;
+        margin: 0 auto;
+        margin-top: 18px;
+      }
       .boder-left {
         position: absolute;
         top: 50px;
@@ -842,7 +1243,7 @@ onMounted(async () => {
 .my-tooltip {
   &.ant-tooltip {
     //sass写法
-    max-width: 600px;
+    max-width: 380px;
   }
 }
 </style>

src/router/index.js

@@ -46,7 +46,7 @@ const routes = [
       import(/* webpackChunkName "TaskOne" */ "@/components/task/TaskOne.vue"),
   },
   {
-    path: "/taskTwo",
+    path: "/view",
     name: "TaskTwo",
     meta: {
       title: "Gacha TaskTwo",

src/utils/requests.ts

@@ -0,0 +1,65 @@
+import axios from 'axios'
+import { message } from 'ant-design-vue'
+
+import glodata from '@/store/user_global';
+
+// console.log(import.meta.env);
+
+const service = axios.create({
+  baseURL: import.meta.env.VUE_APP_GPAL_API3,
+  timeout: 10000
+})
+
+// Request interceptors
+service.interceptors.request.use(
+  (config) => {
+    // Add X-Access-Token header to every request, you can add other custom headers here
+    if (glodata.token) {
+      if (config.url) {
+        if (config.url.indexOf('?') > 0) {
+          config.url += `&token=${glodata.token}`
+        } else {
+          config.url += `?token=${glodata.token}`
+        }
+        if (config.url.indexOf('account=') < 0 && glodata.accountId) {
+          config.url += `&account=${glodata.accountId}`
+        }
+        if (config.url.indexOf('net_id=') < 0 && glodata.chainId) {
+          config.url += `&net_id=${glodata.chainId}`
+        }
+      }
+    }
+    config.headers['Content-Type'] = 'application/json'
+    return config
+  },
+  (error) => {
+    Promise.reject(error)
+  }
+)
+
+// Response interceptors
+service.interceptors.response.use(
+  (response) => {
+    // Some example codes here:
+    // code == 0: success
+    // code == 10: username or password is incorrect
+    // You can change this part for your own usage.
+    const res = response.data
+    if (res.errcode) {
+      // Message({
+      //   message: res.errmsg || 'Error',
+      //   type: 'error',
+      //   duration: 5 * 1000
+      // })
+     // return Promise.reject(new Error(res.errmsg || 'Error'))
+    } else {
+      return response.data
+    }
+  },
+  (error) => {
+    message.error(error.message, 5);
+    return Promise.reject(error)
+  }
+)
+
+export default service

src/views/TaskView.vue

@@ -3,6 +3,22 @@
     <div class="task-header"><NavBar></NavBar></div>
     <div class="content">
       <div class="center">
+        <div class="tab-activities">
+          <div :class="isTab ? 'item-btn-active' : 'item-btn'" @click="handTab(0)">
+            <div class="btn-icon">
+              <img v-if="!isTab"  src="../assets/img/task/gacha_icon2.png" alt="" />
+              <img v-else src="../assets/img/task/gacha_icon1.png" alt="" />
+            </div>
+            <div class="btn-text">gacha</div>
+          </div>
+          <div :class="!isTab ? 'item-btn-active' : 'item-btn'" @click="handTab(1)">
+            <div class="btn-icon">
+              <img v-if="!isTab" src="../assets/img/task/Badge_icon1.png" alt="" />
+              <img v-else src="../assets/img/task/Badge_icon2.png" alt="" />
+            </div>
+            <div class="btn-text">badge</div>
+          </div>
+        </div>
         <div class="task-bottom">
           <div class="bottom-left">
             <div class="the-title">
@@ -12,37 +28,72 @@
               <img src="../assets/img/task/title.png" alt="" />
             </div>
             <div>
-              <a
-                href="https://medium.com/@CounterFire/rise-of-gacha-4d5fac449d95"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="task-int"
-              >
-                <span class="task-int-item">
-                  <span class="task-left">Quest</span> introduction
+              <div>
+                <a
+                  href="https://medium.com/@CounterFire/rise-of-gacha-4d5fac449d95"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="task-int"
+                >
+                  <span class="task-int-item">
+                    <span class="task-left">Quest</span> introduction
+                  </span>
+                </a>
+              </div>
+              <div @click="handTaskTwo">
+                <span class="task-int">
+                  <span class="task-int-item">
+                    <span class="task-left">view</span> your quest
+                  </span>
                 </span>
-              </a>
+              </div>
             </div>
+
             <div class="step-btn">
-              <div class="step1" @click="handTaskOne">
+              <!-- <div class="step1" @click="handTaskOne">
                 <div class="step1-item">Step1 Gacha Quest</div>
+              </div> -->
+              <!-- <div class="step2" @click="handTaskTwo">
+                <div class="step2-item"><span>view </span> your quest</div>
+              </div> -->
+              <div class="event-text">EVENT DURATION:</div>
+              <div class="event-text">JUNE 26- JULY 31 AT 22:00(SGT)</div>
+            </div>
+            <div class="game-left">
+              <div class="download-game"></div>
+              <div class="game-img">
+                <img src="../assets/img/task/WEB3.png" alt="" />
               </div>
-              <div class="step2" @click="handTaskTwo">
-                <div class="step2-item">Step2 Invite Quest</div>
+              <!-- <div class="download-item-andriod">
+                <a href="https://counterfire.games/release/counterfire.apk">
+                  <img src="../assets/img/task/andriod.png" alt=""
+                /></a>
               </div>
+              <div class="download-item-google">
+                <a
+                  href="https://play.google.com/store/apps/details?id=com.cege.games.release"
+                >
+                  <img src="@/assets/img/task/google_play.png" alt=""
+                /></a>
+              </div>
+              <div class="download-item-app">
+                <a
+                  href="https://apps.apple.com/app/counter%20fire/id6444462915"
+                >
+                  <img src="@/assets/img/task/app.png" alt=""
+                /></a>
+              </div> -->
             </div>
           </div>
 
-          <div class="game">
+          <!-- <div class="game">
             <div>
               <div class="download-game"></div>
               <div class="game-img">
                 <img src="../assets/img/task/WEB3.png" alt="" />
               </div>
               <div class="download-item-andriod">
-                <a
-                  href="https://counterfire.games/release/counterfire.apk"
-                >
+                <a href="https://counterfire.games/release/counterfire.apk">
                   <img src="../assets/img/task/andriod.png" alt=""
                 /></a>
               </div>
@@ -61,7 +112,7 @@
                 /></a>
               </div>
             </div>
-          </div>
+          </div> -->
         </div>
       </div>
     </div>
@@ -81,6 +132,7 @@ const router = useRouter();
 const AppModule = useAppStore();
 const route = useRoute();
 let code = ref(null);
+const isTab = ref(false);
 const handTaskOne = () => {
   const code = route.query.code;
   if (code) {
@@ -94,12 +146,21 @@ const handTaskTwo = () => {
   /// router.push("/taskTwo");
   const code = route.query.code;
   if (code) {
-    router.push({ path: "/taskTwo", query: { code: code } });
+    router.push({ path: "/view", query: { code: code } });
   } else {
-    router.push("/taskTwo");
+    router.push("/view");
   }
   console.log(router, "-=-=-");
 };
+const handTab=(selectIndex)=>{
+  if(selectIndex ==0){
+    isTab.value =!isTab.value
+  }else{
+    isTab.value =!isTab.value
+    window.location.href='https://badge.counterfire.games/'
+    
+  }
+}
 
 watch(
   () => route.query,
@@ -170,14 +231,84 @@ onMounted(() => {
     .the-title {
       color: #fff;
       font-family: "Arial";
+      margin-bottom: 30px;
       font-size: 18px;
     }
+    .game-left {
+      height: 100%;
+      position: relative;
+      //left: -160px;
+      left: 0;
+      margin-top: 20px;
+      display: flex;
+      width: 860px;
+     // justify-content: space-between;
+      // flex-direction: column;
+      // justify-content: flex-end;
+      .download-game {
+      }
+      .game-img {
+        width: 171px;
+        height: 62px;
+        img {
+          width: 100%;
+        }
+        // position: absolute;
+        // left: 0;
+        // top: -80px;
+      }
+    }
   }
   .center {
     display: flex;
-    height: 80%;
+    height: 90%;
     width: 100%;
     flex-direction: column;
+    position: relative;
+    .tab-activities {
+      position: absolute;
+      left: -300px;
+      top: 10px;
+      .item-btn {
+        width: 288px;
+        height: 132px;
+        display: flex;
+        font-size: 30px;
+        font-family: "Big John";
+        font-weight: 400;
+        cursor: pointer;
+        color: #000000;
+        line-height: 30px;
+        
+        align-items: center;
+        justify-content: center;
+        background: url("../assets/img/task/event_tagBtn02.png") no-repeat;
+        background-size: 100% 100%;
+        .btn-icon{
+          width: 100px;
+          height: 100px;
+        }
+      }
+      .item-btn-active {
+        width: 288px;
+        height: 132px;
+        display: flex;
+        font-size: 30px;
+        font-family: "Big John";
+        font-weight: 400;
+        cursor: pointer;
+        .btn-icon{
+          width: 100px;
+          height: 100px;
+        }
+        color: #4f4e57;
+        line-height: 30px;
+        align-items: center;
+        justify-content: center;
+        background: url("../assets/img/task/event_tagBtn01.png") no-repeat;
+        background-size: 100% 100%;
+      }
+    }
   }
 
   // padding-top: 119px;
@@ -192,6 +323,14 @@ onMounted(() => {
 
   .step-btn {
     display: flex;
+    flex-direction: column;
+    .event-text {
+      color: #fff;
+      font-family: "Arial";
+      margin-top: 10px;
+      font-size: 20px;
+      // margin-bottom: 10px;
+    }
     .step1 {
       display: inline-block;
       width: 240px;
@@ -240,8 +379,8 @@ onMounted(() => {
 
   .step2 {
     display: inline-block;
-    width: 240px;
-    height: 70px;
+    // width: 240px;
+    // height: 70px;
     cursor: pointer;
     line-height: 70px;
     font-size: 18px;
@@ -250,31 +389,31 @@ onMounted(() => {
     color: #ffffff;
     text-align: center;
     // border: 2px solid rgb(190, 186, 186);
-    background: url("@/assets/img/task/task-btn.png") no-repeat;
-    background-size: contain;
+    // background: url("@/assets/img/task/task-btn.png") no-repeat;
+    // background-size: contain;
   }
   .step2-item {
     position: relative;
   }
-  .step2-item::after {
-    content: "";
-    display: inline-block;
-    position: absolute;
-    top: 50%;
-    left: 84%; /* 将图标放在文字的右侧 */
-    transform: translateY(-50%); /* 垂直居中对齐 */
-    width: 10px; /* 设置图标宽度 */
-    height: 10px; /* 设置图标高度 */
-    background-image: url("@/assets/img/task/triangle-black.png");
-    background-size: contain;
-    background-repeat: no-repeat;
-    margin-left: 0px; /* 与文字之间的间距 */
-    transition: margin-left 0.3s, background-image 0.3s; /* 添加过渡动画 */
-  }
-  .step2:hover .step2-item::after {
-    background-image: url("@/assets/img/task/triangle-black-active.png");
-    margin-left: 10px; /* 在 hover 时向前移动 4px */
-  }
+  // .step2-item::after {
+  //   content: "";
+  //   display: inline-block;
+  //   position: absolute;
+  //   top: 50%;
+  //   left: 84%; /* 将图标放在文字的右侧 */
+  //   transform: translateY(-50%); /* 垂直居中对齐 */
+  //   width: 10px; /* 设置图标宽度 */
+  //   height: 10px; /* 设置图标高度 */
+  //   background-image: url("@/assets/img/task/triangle-black.png");
+  //   background-size: contain;
+  //   background-repeat: no-repeat;
+  //   margin-left: 0px; /* 与文字之间的间距 */
+  //   transition: margin-left 0.3s, background-image 0.3s; /* 添加过渡动画 */
+  // }
+  // .step2:hover .step2-item::after {
+  //   background-image: url("@/assets/img/task/triangle-black-active.png");
+  //   margin-left: 10px; /* 在 hover 时向前移动 4px */
+  // }
 
   .step2:hover {
     background: url("@/assets/img/task/task-btn-active.png") no-repeat;
@@ -287,6 +426,7 @@ onMounted(() => {
   font-family: "MEurostile";
   font-weight: 400;
   color: #fff;
+  cursor: pointer;
   position: relative;
   text-transform: uppercase;
   //text-decoration: underline;
@@ -332,10 +472,10 @@ onMounted(() => {
 .task-bottom {
   display: flex;
   // padding-top: 38px;
-  justify-content: space-between;
-  align-items: flex-start;
+  // justify-content: space-between;
+  // align-items: flex-start;
 }
-.download-item-andriod{
+.download-item-andriod {
   width: 173px;
   height: 52px;
   margin-top: 18px;
@@ -378,25 +518,6 @@ onMounted(() => {
     width: 100%;
   }
 }
-.game {
-  height: 100%;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  .download-game {
-  }
-  .game-img {
-    width: 171px;
-    height: 62px;
-    img {
-      width: 100%;
-    }
-    // position: absolute;
-    // left: 0;
-    // top: -80px;
-  }
-}
 
 .task-bottom {
   display: flex;
@@ -416,6 +537,7 @@ onMounted(() => {
   position: relative;
   display: flex;
   flex-direction: column;
+  opacity: 0;
   justify-content: flex-end;
 }
 </style>