1250 lines
34 KiB
Vue
1250 lines
34 KiB
Vue
<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>
|