<template>
  <div class="task-two">
    <div class="task-two-header">
      <NavBar></NavBar>
    </div>
    <div class="content">
      <div class="center">
        <div class="header">
          <div class="return">
            <div class="return-icon" @click="handTaskHome">
              <img src="@/assets/img/task/return.png" alt="" />
            </div>
            <div class="invite-quest">
              <a
                href="https://medium.com/@CounterFire/rise-of-gacha-4d5fac449d95"
                target="_blank"
                rel="noopener noreferrer"
              >
                VIEW YOUR QUEST</a
              >
            </div>
          </div>

          <div class="complete">
            <!-- <div class="connect-btn">Connect and check</div> -->
          </div>
        </div>
        <div class="content-conter">
          <div class="content-left">
            <div class="leaderboard">Leaderboard</div>
            <div class="address-header">
              <div class="address-header-item">#</div>
              <div class="address-header-item-address">Address</div>
              <div class="address-header-item-points">Points</div>
              <!-- <div>Points</div> -->
            </div>
            <div class="scroll-content">
              <a-list
                item-layout="vertical"
                class="value-list"
                :data-source="formattedData"
                :bordered="false"
                :split="false"
              >
                <template #renderItem="{ item }">
                  <a-list-item>
                    <div class="assress-item">
                      <div class="assress-item-id">{{ item.id }}</div>
                      <div>{{ item.account }}</div>
                      <div class="code">
                        <!-- <NumberCounter :duration="10000" :targetNumber="item.code"></NumberCounter>  -->
                        {{ item.point }}

                        <!-- <Vue3autocounter
                          ref="counter"
                          :startAmount="0"
                          :endAmount="Number(item.point)"
                          :duration="0.4"
                          prefix=""
                          suffix=""
                          separator=","
                          decimalSeparator="."
                          :decimals="0"
                          :autoinit="true"
                        >
                        </Vue3autocounter> -->
                      </div>
                      <!-- <div>{{ item.targetCode }}</div> -->
                    </div>
                  </a-list-item>
                </template>
              </a-list>
            </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="link-btn">
              <div>
                <div>Invite Link</div>
                <div>{{ inviteLink }}</div>
              </div>
              <div class="copy" @click="handleCopy">
                <img src="@/assets/img/task/copy-icon.png" alt="" />
              </div>
            </div>

            <div class="you">
              <div class="you-title">
                You Invited
                <span class="you-title-number">{{
                  userInfo.direct_clan ? userInfo.direct_clan : "0"
                }}</span>
              </div>
              <div class="you-input">
                <div v-if="userInfo.regular && userInfo.regular.length > 0">
                  <div class="you-input-item">
                    Points
                    <span class="item-number">
                      {{ userInfo.point - totalRegularPoints }}
                    </span>
                    <a-tooltip placement="bottom" overlayClassName="my-tooltip">
                      <template #title>
                        <div class="tooltip-text">
                          <span v-html="typesInRegular"></span><br />
                        </div>
                      </template>

                      <span class="item-number-right">
                        + {{ totalRegularPoints }}</span
                      >
                    </a-tooltip>
                  </div>
                </div>
                <div class="you-input-item" v-else>
                  Points
                  <span class="item-number">{{
                    userInfo.point ? userInfo.point : "0"
                  }}</span>
                </div>
                
                <div class="you-input-item">
                  Rank
                  <span class="item-number">{{
                    userInfo.rank ? userInfo.rank : "0"
                  }}</span>
                </div>
                
                <a-tooltip placement="bottom" overlayClassName="my-tooltip">
                  <template #title>
                    <div class="tooltip-text">
                      <div>
                        Top 10% points holder share 40% of the prize pool
                      </div>
                      <div>
                        Top 10%-30% points holder share 40% of the prize pool
                      </div>
                      <div>
                        Top 30%-50% points holder share 20% of the prize pool
                      </div>
                    </div>
                  </template>
                  <div class="you-input-item">
                    Top
                    <span class="item-number">
                      {{ userInfo.top != null ? userInfo.top : "0" }}%
                    </span>
                  </div>
                </a-tooltip>
              </div>
              <div class="invitation">
                <div class="invitation-img">
                  <img src="@/assets/img/task/currency.png" alt="" />
                </div>
                <div class="invitation-title">
                  10 points for each successful invite,<br />
                  Points will be used to get Token rewards and other.
                </div>
              </div>
              <div class="points-ticket">
                <div class="points-item">
                  <a-tooltip
                    placement="bottomLeft"
                    overlayClassName="my-tooltip"
                  >
                    <template #title>
                      <span class="tooltip-text"
                        >Every 20 points will earn you 1 Yoyo.</span
                      >
                    </template>

                    <div>
                      Your Yoyo
                      <span class="points-item-number">{{
                        userInfo.tickets ? userInfo.tickets : "0"
                      }}</span>
                    </div>
                  </a-tooltip>
                </div>
              </div>
              <div class="candy-dispenser">
                <div class="candy-img-content">
                  <img src="@/assets/img/task/candy-dispenser.png" alt="" />
                  <a-tooltip placement="bottom" overlayClassName="my-tooltip">
                    <template #title>
                      <div>
                        <div class="tooltip-text">
                          The Yoyo Machine event will be introduced after this
                          event ends.
                        </div>
                        <div class="tooltip-text">
                          You can then collect your Yoyo and participate in a
                          4-week-long lottery. Rewards may include
                          ARB\ETH\CEC\NFTs
                        </div>
                      </div>
                    </template>

                    <div class="img-tips"></div>
                  </a-tooltip>
                </div>
               
              </div>

             
            </div> -->
          </div>
          <div class="content-right-not-login" v-else>
            <!-- <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">
                    <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="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>
        </div>
      </div>
    </div>
    <div class="bg">
      <img src="@/assets/img/task/one-bg.png" alt="" />
    </div>
  </div>
</template>

<script setup>
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,
  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);
const rank = ref(0);
const top = ref(0);
const points = ref(0);
const ticket = ref(0);
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) => ({
      ...item,
      account: item.account.slice(0, 6) + "..." + item.account.slice(-6),
    }))
    .reduce((acc, current) => {
      const x = acc.find((item) => item.account === current.account);
      if (!x) {
        return acc.concat([current]);
      } else {
        return acc;
      }
    }, []);
});
const typesInRegular = computed(() =>
  userInfo.regular.map((item) => item.type).join("<br/>")
);
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");
  }

  for (let key in target) {
    source[key] = target[key];
  }
};
const totalRegularPoints = computed(() =>
  userInfo.regular.reduce((total, item) => total + item.point, 0)
);
const handTaskHome = () => {
  const code = route.query.code;
  if (code) {
    router.push({ path: "/quest", query: { code: code } });
  } else {
    router.push("/quest");
  }
};
const handTaskOne = () => {
  const code = route.query.code;
  if (code) {
    router.push({ path: "/taskTwo", query: { code: code } });
  } else {
    router.push("/taskTwo");
  }
  console.log(router, "-=-=-");
};
watchEffect(() => {
  console.log(data); // 当数据改变时，这会被调用
});

const inviteLink = ref(
  `${import.meta.env.VUE_APP_GPAL_API}/?code=${userInfo.invite_code}`
);
const { copied, error, reset, copyToClipboard } = useCopyToClipboard();

const handleCopy = () => {
  reset();
  copyToClipboard(inviteLink.value).then(() => {
    if (copied.value) {
      message.success("Copy successful!");
    }
  });
};
watch(
  () => chain.logined,
  async (newValue, oldValue) => {
    // console.log("logined changed from", oldValue, "to", newValue);
    const res = await getLeaderboard({ offset: 0, limit: 100 });
    console.log(res);
    if (res) {
      data.value = res.data;

      res.data.forEach((e) => {
        data.push(e);
      });

      console.log(res.data, "res.data.data");
      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)
    ) {
      isStatus.value = true;
      const resjoin = await getJoin({
        account: AppModule.accountId,
        invite_code: route.query.code,
      });
    }
    const resq = await UserInfo({ account: AppModule.accountId });

    if (resq) {
      // userInfo.value = resq
      assign(userInfo, resq);
      inviteLink.value = `${import.meta.env.VUE_APP_GPAL_API}/?code=${
        userInfo.invite_code
      }`;
    }
    console.log(resq, "dsdsdsdsd");
    console.log(userInfo.value);
  }
);
onMounted(async () => {
  const res = await getLeaderboard({ offset: 0, limit: 100 });
  console.log(res);
  console.log(userPercentage, "userPercentage.value");
  if (res) {
    data.value = res.data;

    res.data.forEach((e) => {
      data.push(e);
    });

    console.log(res.data, "res.data.data");
    console.log(data.value, "ff");
  }
  const resStatus = await UserStatus({ account: AppModule.accountId });
  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 });

  if (resq) {
    // userInfo.value = resq
    assign(userInfo, resq);
    inviteLink.value = `${import.meta.env.VUE_APP_GPAL_API}/?code=${
      userInfo.invite_code
    }`;
  }
  console.log(res);
  //console.log(formattedData);
});
</script>

<style lang="scss" scoped>
.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 {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    right: 0;
    z-index: -1;
    bottom: 0;
    color: transparent;
    img {
      position: absolute;
      height: 100%;
      width: 100%;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      object-fit: cover;
      z-index: 0;
      color: transparent;
    }
  }
  .content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    height: calc(100% - 85px);
    justify-content: center;
    align-items: center;
    .header {
      // padding-top: 47px;
      display: flex;
      justify-content: space-between;
      .complete {
        // width: 48%;

        // 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;
        font-family: "GemunuExtraBold";
        font-weight: 400;
        display: flex;
        color: #ffffff;
        cursor: pointer;
        align-items: center;
        .return-icon {
          margin-right: 28px;
        }
      }
    }
    .content-conter {
      width: 100%;
      display: flex;
      //justify-content: space-between;
    }
    .content-left {
      // padding-top: 190px;
      // margin-top: 58px;
      width: 540px;
      padding-right: 33px;
      height: 600px;
      overflow: hidden;
      position: relative;

      //border-right: 1px solid #ffffff;
    }

    .content-right {
      // padding-top: 51px;
      // 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;
        left: 0;
        // height: 550px;
        width: 1px;
        background-color: #ffffff;
      }
      .link-title {
        font-size: 32px;
        font-family: "GemunuExtraBold";
        font-weight: 400;
        color: #ffffff;
        // margin-left: 180px;
        // margin-top: 19px;
        // margin-right: 28px;
      }
      .link-btn {
        width: 581px;
        height: 61px;
        border: 1px solid #8f7440;
        border-radius: 12px;
        font-size: 18px;
        line-height: 20px;
        font-family: "MEurostile";
        font-weight: 400;
        color: #96763a;
        display: flex;
        background: rgba(40, 33, 20, 0.6);
        justify-content: space-between;
        align-items: center;
        padding-left: 31px;
        padding-right: 31px;
        margin-bottom: 24px;
        // padding-top: 5px;
      }
      .you-input {
        width: 100%;
        // height: 51px;
        // padding-left: 31px;
        // padding-right: 31px;
        display: flex;
        align-items: center;
        line-height: 20px;
        margin-bottom: 26px;
        // background: rgba(40, 33, 20, 0.6);
        // border: 1px solid #ffffff;
        justify-content: space-between;
        border-radius: 12px;
        .you-input-item {
          font-size: 32px;
          font-family: "GemunuExtraBold";
          font-weight: 400;
          color: #ffffff;
        }
      }
      .item-number {
        font-size: 32px;
        font-family: "GemunuExtraBold";
        font-weight: 400;
        color: #5ce501;
      }
      .item-number-right {
        font-size: 22px;
        font-family: "GemunuExtraBold";
        font-weight: 400;
        position: relative;
        color: #5ce501;
      }
      .item-number-right::after {
        content: ""; /* 伪元素需要内容才能显示，这里我们不需要实际的内容，所以设置为空 */
        position: absolute; /* 使用绝对定位来放置红点 */
        top: 0px; /* 红点在右上角，所以 top 和 right 都设置为 0 */
        right: -6px;
        width: 6px; /* 可以根据需要调整红点的大小 */
        height: 6px;
        background-color: #f50123; /* 红点的颜色 */
        border-radius: 50%; /* 使红点成为一个圆形 */
      }
      .points-item {
        width: 100%;
        display: flex;

        // height: 51px;
        // text-align: center;
        line-height: 21px;
        // background: rgba(40, 33, 20, 0.6);
        // border: 1px solid #ffffff;
        // opacity: 0.6;
        font-size: 22px;
        font-family: "GemunuExtraBold";
        font-weight: 400;
        color: #ffffff;
        // padding-left: 31px;
        border-radius: 12px;
        .points-item-number {
          color: #5ce501;
        }
      }

      .points-ticket {
        display: flex;
        justify-content: space-between;
        margin-top: 49px;
      }
      .tip {
        display: flex;
        justify-content: space-between;
        color: #ffffff;
        font-size: 14px;
        font-family: "MEurostile";
        font-weight: 400;
        color: #afa07d;
        .tip-item {
          width: 281px;
          // height: 51px;
        }
      }
      .candy-dispenser {
        display: flex;
        justify-content: center;
      }
    }
  }
}
.candy-img-content {
  position: relative;
  .img-tips {
    width: 166px;
    height: 100px;
    // background-color: #5ce501;
    position: absolute;
    left: 0;
    bottom: 30px;
  }
}
// .points-title {
//   max-width: 250px; /* 设置最大宽度 */
//   word-wrap: break-word; /* 自动换行 */
// }
.tooltip-text {
  font-size: 16px;
  font-family: "Arial";
  font-weight: 400;
  color: #96763a;
}
.copy {
  cursor: pointer;
}
.scroll-content {
  height: 540px;
  overflow: auto;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: transparent transparent; /* Firefox */
}

.scroll-content::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.assress-item {
  display: flex;
  font-size: 18px;
  font-family: "MEurostile";
  font-weight: 400;
  color: #ffffff;
  justify-content: space-between;
  .assress-item-id {
    width: 40px;
  }
}
.address-header {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  font-family: "MEurostile";
  font-weight: 400;
  color: #898989;
  .address-header-item {
    width: 40px;
  }

  .address-header-item-address {
    width: 124px;
  }
  .address-header-item-points {
    width: 89px;
    text-align: center;
  }
}
.code {
  width: 89px;
  text-align: center;
  color: #5ce501;
  transition: all 0.3s ease-out;
}
.leaderboard {
  color: #ffffff;
  font-size: 32px;
  font-family: "GemunuExtraBold";
  font-weight: 400;
  color: #ffffff;
}
.you-title {
  font-size: 22px;
  font-family: "GemunuExtraBold";
  font-weight: 400;
  color: #ffffff;
  // text-align: center;
  margin-bottom: 20px;
  .you-title-number {
    color: #5ce501;
  }
}

.invite-quest {
  position: relative;
  line-height: 43px;
  a {
    color: #fff;
  }
  border-bottom: 2px solid transparent;
  &:hover {
    border-bottom: 2px solid #ccc;
  }
}

.invite-quest::after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 25px; /* Adjust according to your needs */
  height: 24px; /* Adjust according to your needs */
  background-image: url("@/assets/img/task/arrow.png");
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  right: -30px; /* Or adjust as per your needs */
  top: 20%; /* Or adjust as per your needs */
  //transform: translateY(-50%); /* To vertically center the image */
  transition: all 0.3s ease;
}

.invite-quest:hover::after {
  // right: -34px;
  // top: 48%; // 根据需要调整
  opacity: 1;
  transform: translate(3px, -3px);
}
.invitation {
  display: flex;
  padding-bottom: 10px;
  align-items: center;
  border-bottom: 1px solid #5d5548;
  .invitation-title {
    margin-left: 24px;
    font-size: 16px;
    font-family: "Arial";
    font-weight: 400;
    color: #d3d3d3;
  }
}
.content-right-not-login {
  padding-left: 135px;
  .quest-content {
    display: flex;
    width: 85%;
    margin: 0 auto;
    margin-top: 42px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
  }
  .token-btns {
    width: 100%;
    cursor: pointer;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }
  .gacha-quest {
    width: 409px;
    height: 58px;
    margin: 0 auto;
    cursor: pointer;
    margin-top: 47px;
    margin-bottom: 71px;
    text-align: center;
    line-height: 58px;
    background: url("@/assets/img/task/gacha-quest-bg.png") no-repeat;
    background-size: contain;
  }
  .token-btn {
    width: 215px;
    height: 53px;
    text-align: center;
    line-height: 53px;
    background: url("@/assets/img/task/token-btn-bg.png") no-repeat;
    background-size: contain;
    font-size: 18px;
    font-family: Arial;
    font-weight: 400;
    color: #96763a;
  }
  .currency-img {
    width: 117px;
    height: 95px;
  }
  .candy-dispenser-img {
    width: 124px;
    height: 124px;
  }
  .complete {
    // width: 90%;
    margin: 0 auto;
    margin-bottom: 17px;
    text-align: center;
    font-size: 22px;
    margin-top: 60px;
    font-family: "MEurostile";
    font-weight: 400;
    color: #c2c2c2;
  }
}

@media screen and (min-width: 1441px) {
  /* 在此处插入你希望在屏幕宽度大于1440px时应用的样式 */
  .header {
    margin-bottom: 60px;
  }
  /* 更多的样式代码 */
}
@media (min-width: 1200px) and (max-width: 1439px) {
  /* 在这里写你的样式规则 */
  .center {
    height: 85%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
</style>
<style lang="scss">
.my-tooltip {
  &.ant-tooltip {
    //sass写法
    max-width: 380px;
  }
}
</style>
