last update

.env.dev

@@ -2,3 +2,4 @@ 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://m.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://m.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

@@ -19,8 +19,132 @@
         </div>
         <div class="content-conter">
           <div class="content-right" v-if="isStatus">
-            <!-- <div class="link-title">Invite Link</div> -->
+            <div class="got">You got</div>
-            <div class="boder-left"></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"
+                    trigger="click"
+                  >
+                    <template #title>
+                      <div class="tooltip-text">
+                        <div>
+                          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-title">Base Rewards</div> -->
+                  <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"
+                    trigger="click"
+                  >
+                    <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-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="boder-left"></div>
             <div class="link-btn">
               <div>
                 <div class="link-btn-title">Invite Link</div>
@@ -52,12 +176,13 @@
                     >
                       <template #title>
                         <div class="tooltip-text">
-                          <span v-html="typesInRegular"></span
+                          <span v-html="typesInRegular"></span><br />
-                          ><br />
                         </div>
                       </template>
 
-                      <span class="item-number-right"> + {{ totalRegularPoints }}</span>
+                      <span class="item-number-right">
+                        + {{ totalRegularPoints }}</span
+                      >
                     </a-tooltip>
                   </div>
                 </div>
@@ -95,22 +220,12 @@
                   </template>
                   <div class="you-input-item">
                     Top
-                    <span class="item-number"
+                    <span class="item-number">
-                      > {{ userInfo.top != null ? userInfo.top : "0" }}%</span
+                      {{ userInfo.top != null ? userInfo.top : "0" }}%</span
                     >
                   </div>
                 </a-tooltip>
-                <!-- <a-tooltip placement="bottomLeft">
+               
-                  <template #title>
-                    <span>10 points for each successful invite.</span>
-                  </template>
-                  <div class="you-input-item">
-                    Top
-                    <span class="item-number"
-                      >{{ userInfo.top > 30 ? "+30" : userInfo.top }}%</span
-                    >
-                  </div>
-                </a-tooltip> -->
               </div>
               <div class="invitation">
                 <div class="invitation-img">
@@ -122,12 +237,7 @@
                 </div>
               </div>
               <div class="points-ticket">
-                <!-- <div class="points-item">
+              
-                  You Ticket
-                  <span class="item-number">{{
-                    userInfo.tickets ? userInfo.tickets : "0"
-                  }}</span>
-                </div> -->
                 <a-tooltip
                   placement="bottom"
                   overlayClassName="my-tooltip"
@@ -150,16 +260,17 @@
                   <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 v-else>
               <div class="quest-content">
                 <div class="quest-left">
                   <div class="currency-img">
@@ -178,7 +289,8 @@
                 <div class="token-btn">Token Rewards</div>
                 <div class="token-btn">Yoyo Event</div>
               </div>
-            <div class="gacha-quest" @click="handTaskOne">Gacha Quest</div>
+              <div class="gacha-quest" @click="login">Connect and check</div>
+            </div>
           </div>
           <div class="content-left">
             <div class="leaderboard">Leaderboard</div>
@@ -240,9 +352,16 @@ 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();
@@ -254,10 +373,32 @@ const rank = ref(0);
 const top = ref(0);
 const points = ref(0);
 const ticket = ref(0);
+const cecRankShow = ref(0);
 const counter = ref(null);
 const data = reactive([]);
-const isStatus= ref(false)
+const isStatus = ref(false);
 const userInfo = reactive({});
+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) => ({
@@ -279,6 +420,31 @@ const typesInRegular = computed(() =>
 const totalRegularPoints = computed(() =>
   userInfo.regular.reduce((total, item) => total + item.point, 0)
 );
+const isMobile = () => {
+  const userAgent = navigator.userAgent;
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+    userAgent
+  );
+};
+async function login(event) {
+  var next = window.location.href;
+
+  if (isMobile() && !hasMetamask()) {
+    ///debugger
+    var url = `https://metamask.app.link/dapp/${next}`;
+    location.href = url;
+  } else {
+    if (!chain.logined) {
+      // 没有登录情况下执行登录
+      await chain.chainManager.login();
+      // console.log("logined:", chain.chainManager.isLogined);
+      chain.logined = chain.chainManager.isLogined;
+      // if (chain.logined) {
+      //   currentTask.value = 2;
+      // }
+    }
+  }
+}
 const assign = (source, target) => {
   if (target === undefined || target === null) {
     throw new TypeError("Cannot convert undefined or null to object");
@@ -299,9 +465,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, "-=-=-");
 };
@@ -339,8 +505,15 @@ watch(
       // console.log(data.value, "ff");
     }
     const userStatus = await UserStatus({ account: AppModule.accountId });
-    if (userStatus && userStatus.claim && Number(userStatus.claim) !== 0 && userStatus.status.every((status) => status == 1)) {
+    const basic = await getBasic(AppModule.accountId.toLowerCase());
-      isStatus.value = true
+    cecRankShow.value = basic.data.cecRankShow;
+    if (
+      userStatus &&
+      userStatus.claim &&
+      Number(userStatus.claim) !== 0 &&
+      userStatus.status.every((status) => status == 1)
+    ) {
+      isStatus.value = true;
       const resjoin = await getJoin({
         account: AppModule.accountId,
         invite_code: route.query.code,
@@ -373,9 +546,15 @@ onMounted(async () => {
     // console.log(data.value, "ff");
   }
   const userStatus = await UserStatus({ account: AppModule.accountId });
-  if (userStatus && userStatus.claim && Number(userStatus.claim) !== 0 && userStatus.status.every((status) => status == 1)) {
+  const basic = await getBasic(AppModule.accountId.toLowerCase());
-      isStatus.value = true
+  cecRankShow.value = basic.data.cecRankShow;
-      
+  if (
+    userStatus &&
+    userStatus.claim &&
+    Number(userStatus.claim) !== 0 &&
+    userStatus.status.every((status) => status == 1)
+  ) {
+    isStatus.value = true;
   }
   const resq = await UserInfo({ account: AppModule.accountId });
 
@@ -395,6 +574,16 @@ onMounted(async () => {
 .task-two-header {
   // height: 65px;
 }
+.the-event {
+  // padding-left: 100px;
+  // padding-right: 100px;
+  text-align: center;
+  font-family: "Arial";
+  padding-bottom: 120px;
+  padding-top: 120px;
+  color: #fff;
+  font-size: 38px;
+}
 .task-two {
   position: relative;
   width: 100%;
@@ -495,6 +684,225 @@ onMounted(async () => {
       justify-content: space-between;
       margin: 0 auto;
       position: relative;
+      .gacha-star {
+        // position: absolute;
+        // bottom: -50px;
+        // // right: 0px;
+        // left: 50%;
+        margin-bottom: 10px;
+        font-size: 22px;
+        width: 100%;
+        display: flex;
+        margin-top: 20px;
+        justify-content: center;
+        align-items: center;
+        font-family: "Poppins";
+        font-weight: 300;
+        color: #fefefe;
+        .gacha-star-item {
+          display: flex;
+          align-items: center;
+          width: 100%;
+          .icon-star {
+            width: 193px;
+            margin-right: 15px;
+
+            // height: 3px;
+            img {
+              width: 193px;
+              // height: 103px;
+            }
+          }
+        }
+      }
+      .boders {
+        margin-top: 10px;
+      }
+      .rewards-card {
+        padding-top: 29px;
+        padding-right: 4px;
+        width: 100%;
+        margin-bottom: 33px;
+        justify-content: space-between;
+        display: flex;
+        .base-rewards {
+          display: flex;
+          width: 270px;
+          justify-content: space-between;
+        }
+      }
+      .total-boders {
+        margin-top: 58px;
+      }
+      .cec-top {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        height: 100%;
+      }
+      .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: 22px;
+        font-family: "Poppins-Regular";
+        font-weight: 400;
+        color: #52ff00;
+      }
+      .got-btn {
+        display: flex;
+        width: 100%;
+        justify-content: space-between;
+      }
+      .total-rewards {
+        width: 100%;
+        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: 253px;
+        height: 69px;
+        margin: 0 auto;
+        margin-top: 30px;
+        text-align: center;
+        line-height: 69px;
+        // 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: 22px;
+          font-family: "Poppins-Regular";
+          font-weight: 300;
+          color: #ffffff;
+        }
+      }
+      .yoyo-img {
+        width: 107px;
+        height: 80px;
+        img {
+          width: 107px;
+          height: 80px;
+        }
+      }
+      .claim-text {
+        // width: 70%;
+        font-size: 22px;
+        font-family: "Poppins-Regular";
+        font-weight: 300;
+        color: #fefefe;
+        margin: 0 auto;
+        margin-top: 18px;
+      }
       .boder-left {
         position: absolute;
         top: 50px;
@@ -536,7 +944,7 @@ onMounted(async () => {
         .link-btn-title {
           color: #a68548;
         }
-        .link-url{
+        .link-url {
           white-space: nowrap;
         }
       }
@@ -584,7 +992,7 @@ onMounted(async () => {
       }
       .points-item {
         width: 281px;
-        font-size: 32px;
+        font-size: 24px;
         font-family: "SAIRABLACK";
         font-weight: 400;
         color: #ffffff;
@@ -734,7 +1142,7 @@ onMounted(async () => {
   font-weight: 400;
   color: #ffffff;
   justify-content: space-between;
-  .assress-item-id{
+  .assress-item-id {
     width: 60px;
   }
 }
@@ -834,7 +1242,7 @@ onMounted(async () => {
 .my-tooltip {
   &.ant-tooltip {
     //sass写法
-    max-width: 800px;
+    max-width: 400px;
   }
 }
 </style>

src/router/index.js

@@ -45,7 +45,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

@@ -7,8 +7,8 @@
           <div class="bottom-left">
             <div class="title-content"></div>
             <div class="game-bottom">
-              <div class="game">
+              <!-- <div class="game">
-                <!-- <div class="download-game"></div> -->
+                
                 <div class="download-item-andriod">
                   <a href="https://m.counterfire.games/release/counterfire.apk">
                     <img src="../assets/img/task/andriod.png" alt=""
@@ -28,7 +28,7 @@
                     <img src="@/assets/img/task/app.png" alt=""
                   /></a>
                 </div>
-              </div>
+              </div> -->
               <div class="game-img">
                 <img src="../assets/img/task/Web3.png" alt="" />
               </div>
@@ -49,21 +49,35 @@
                   <img src="../assets/img/task/arrow.png" alt="" />
                 </div>
               </div>
-              <div class="step-btn">
+              <div class="quest-text" @click="handTaskTwo">
+                <div>
+                  <span class="task-int">
+                    <span class="task-int-item">
+                      <span class="task-left">view</span> your quest
+                    </span>
+                  </span>
+                </div>
+                <div class="quest-img">
+                  <img src="../assets/img/task/arrow.png" alt="" />
+                </div>
+              </div>
+              <div class="event-text">EVENT DURATION:</div>
+              <div class="event-text">JUNE 26- JULY 31 AT 22:00(SGT)</div>
+              <!-- <div class="step-btn">
                 <div class="step1" @click="handTaskOne">
                   <div class="step1-item">Step1 Gacha Quest</div>
                 </div>
                 <div class="step2" @click="handTaskTwo">
-                  <div class="step2-item">Step2 Invite Quest</div>
+                  <div class="step2-item">Step1 Invite Quest</div>
-                </div>
                 </div>
+              </div> -->
             </div>
           </div>
         </div>
       </div>
     </div>
     <div class="bg">
-      <img src="@/assets/img/task/bg.png" alt="" />
+      <img src="@/assets/img/task/bg.jpg" alt="" />
     </div>
   </div>
 </template>
@@ -91,9 +105,9 @@ 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");
   }
 };
 
@@ -120,6 +134,14 @@ onMounted(() => {
 .task-header {
   // height: 65px;
 }
+.event-text {
+  color: #fff;
+  font-family: "Arial";
+  margin-top: 10px;
+  font-size: 26px;
+  margin-left: 40px;
+  // margin-bottom: 10px;
+}
 .title-content {
   margin-top: 90px;
 }
@@ -130,7 +152,7 @@ onMounted(() => {
   align-items: center;
   padding-right: 6px;
   margin: 0 auto;
-  margin-bottom: 72px;
+  // margin-bottom: 72px;
   .quest-img {
     width: 35px;
     height: 35px;
@@ -178,6 +200,7 @@ onMounted(() => {
     display: flex;
     justify-content: space-between;
     flex-direction: column;
+    padding-bottom: 110px;
     .the-title {
       color: #fff;
       text-align: center;
@@ -205,6 +228,7 @@ onMounted(() => {
 
   .step-btn {
     display: flex;
+    justify-content: center;
     width: 90%;
 
     justify-content: space-between;