1072 lines
32 KiB
Vue
1072 lines
32 KiB
Vue
<template>
|
||
<div class="mint">
|
||
<div class="mint-page">
|
||
<div class="mint-header">
|
||
<div class="mint-header-logo" @click="handlHome">
|
||
<img src="@/assets/img/cec_activity/mint_Logo1.png" alt />
|
||
</div>
|
||
<div class="mint-header-right">
|
||
<div class="left">
|
||
<div @click="loginDiscord">
|
||
<img src="@/assets/img/cec_activity/Icon_Disc.png" alt />
|
||
</div>
|
||
<div @click="toTwitter">
|
||
<img src="@/assets/img/cec_activity/Icon_X.png" alt />
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="wallet" v-if="localWalletStore.address == null || localWalletStore.address == ''" @click="getLinkWallet">
|
||
<span>Connect Wallet</span>
|
||
<div class="wallet-btn">
|
||
<img class="hover-show" src="@/assets/img/cec_activity/ConnectMenu1.png" alt />
|
||
<img class="hover-none" src="@/assets/img/cec_activity/ConnectMenu2.png" alt />
|
||
</div>
|
||
</div>
|
||
<div class="wallet" v-else @click="isLogout = !isLogout">
|
||
<div
|
||
class="wallet-address"
|
||
>{{ localWalletStore.showAddress }}</div>
|
||
<div class="wallet-btn">
|
||
<img class="hover-show" src="@/assets/img/cec_activity/ConnectMenu1.png" alt />
|
||
<img class="hover-none" src="@/assets/img/cec_activity/ConnectMenu2.png" alt />
|
||
</div>
|
||
<div class="log-out" v-if="isLogout" @click="logOut">logout</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mint-body">
|
||
<div class="mint-body-left">
|
||
<div class="mint-body-left-title">
|
||
<h2>Contribution Clash</h2>
|
||
</div>
|
||
<div class="mint-body-left-text">
|
||
500,000 $CEC Awaits – Earn Your Share!
|
||
</div>
|
||
<div class="mint-body-left-time">
|
||
<div class="left">
|
||
<div class="tips">
|
||
<div class="tips-icon">
|
||
<img src="@/assets/img/cec_activity/event_help.png" alt />
|
||
</div>
|
||
<div class="tips-text">
|
||
<div>
|
||
<p>Your contribution credits will be tracked in real time throughout the event.</p>
|
||
<p>The final distribution of the 500,000 CEC prize pool will be based on your percentage of total contribution credits at the event's close.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div>Event start: 2024.8.22 06:00 (GMT)</div>
|
||
<div>Event end: 2024.9.22 05:59 (GMT)</div>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="mint-body-left-time">Event start: 2024.8.22 06:00 (GMT)</div> -->
|
||
<!-- <div class="mint-body-left-time">Event end: 2024.9.22 05:59 (GMT)</div> -->
|
||
|
||
<div class="mint-body-left-content">
|
||
<p>Your Credits</p>
|
||
<div class="mint-body-left-contribute">
|
||
<li>
|
||
<div>
|
||
<img src="@/assets/img/cec_activity/icon_Credit_big.png" alt />
|
||
</div>
|
||
<h6>{{ Number(cecInfo.my_contribution) == 0 ? '-' : cecInfo.my_contribution }}</h6>
|
||
</li>
|
||
</div>
|
||
<div class="mint-body-left-my-pro">
|
||
<p>Your Credit Share</p>
|
||
<p>
|
||
<span>{{ contributionLogs(myWidthShare) }}%</span>
|
||
</p>
|
||
</div>
|
||
<div class="line"></div>
|
||
<h4>Expected Rewards</h4>
|
||
<div class="mint-body-left-cec">
|
||
<div>
|
||
<img src="@/assets/img/marketplace/CECIcon.png" alt />
|
||
</div>
|
||
<h3>{{ cecInfo.my_expected_cec }}</h3>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mint-body-content">
|
||
<div class="mint-body-content-total">
|
||
<div>
|
||
<img src="@/assets/img/marketplace/CECIcon.png" alt />
|
||
</div>
|
||
<h3>{{ cecInfo.total_cec_pool }}</h3>
|
||
</div>
|
||
<div class="mint-body-content-bar">
|
||
<div class="bar">
|
||
<div class="left" :style="{width: `${myWidth}%`}">
|
||
<div class="my-amount">
|
||
<li>
|
||
<div>Your Credits</div>
|
||
<span>{{ Number(cecInfo.my_contribution) == 0 ? '-' : cecInfo.my_contribution }}</span>
|
||
</li>
|
||
<div class="line"></div>
|
||
<li>
|
||
<div>Your Credit Share</div>
|
||
<p>{{ contributionLogs(myWidthShare) }}%</p>
|
||
</li>
|
||
</div>
|
||
</div>
|
||
<div class="right" v-if="totalWidth != 100" :style="{width: `${totalWidth}%`}"></div>
|
||
<div class="total-right" v-else :style="{width: `${totalWidth}%`}"></div>
|
||
</div>
|
||
<div class="total">
|
||
<li>
|
||
<h4>Total</h4>
|
||
<h6>Contribution Credits</h6>
|
||
<div></div>
|
||
<p>{{ cecInfo.global_contribution }}</p>
|
||
</li>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mint-body-right">
|
||
<div class="mint-body-right-top">
|
||
<div class="mint-body-right-top-title">
|
||
How to obtain Contribution points
|
||
</div>
|
||
<div class="mint-body-right-top-text">
|
||
To compete in the Contribution Clash, accumulate Contribution Credits through the following methods:
|
||
</div>
|
||
<div class="mint-body-right-top-line"></div>
|
||
<div class="mint-body-right-top-con">
|
||
<p>1. Top-Up Diamonds: Earn 1 Contribution Credit for every 1U spent automatically.</p>
|
||
<p>2. Spend Gold in-Game: Receive 1 Contribution Credit for every 10 Gold spent in-game. (Note: Gold card synthesis and Market purchases are excluded.)</p>
|
||
<p>3. Stake and Earn: Contribution Credits earned from ongoing staking activities will also count towards your total.</p>
|
||
</div>
|
||
</div>
|
||
<div class="mint-body-right-btm">
|
||
<p>Game Download</p>
|
||
<div @click="downloadGame()">
|
||
<img src="@/assets/img/cec_activity/btn_appStore.png" alt />
|
||
</div>
|
||
<div @click="downloadGame('Google Play')">
|
||
<img src="@/assets/img/cec_activity/btn_googlePlay.png" alt />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mint-body-btm"></div>
|
||
</div>
|
||
<div class="footer">
|
||
<div class="footer-left">
|
||
<div>
|
||
<img src="@/assets/img/cec_activity/game_logo02.png" alt />
|
||
</div>
|
||
<p>© Candy Bubble Global Limited.ALL RIGHTS RESERVED.</p>
|
||
</div>
|
||
<div class="footer-right">
|
||
<!-- <li>
|
||
<a href="https://discord.com/invite/counterfire" target="_blank">
|
||
<img src="./../assets/home/com_Discord_icon.png" alt="">
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://twitter.com/@playCounterFire" target="_blank">
|
||
<img src="./../assets/home/com_X_icon.png" alt="">
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://www.youtube.com/@playCounterFire" target="_blank">
|
||
<img src="./../assets/home/com_Youtube_icon.png" alt="">
|
||
</a>
|
||
</li>-->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div ref="cecActivityModel">
|
||
<a-modal :class="'cecActivityModel'" :getContainer="() => $refs.cecActivityModel" v-model:open="cecActivityDialogVisible" :closable="false" :footer="null" :maskClosable="false">
|
||
<div class="log-title">Contribution Rules</div>
|
||
<div class="closable" @click="cecActivityDialogVisible = false">
|
||
<img src="@/assets/img/marketplace/Close_counter.png" alt="">
|
||
</div>
|
||
<h3>To compete in the Contribution Clash, accumulate Contribution Credits through the following methods:</h3>
|
||
<div class="text">
|
||
<!-- <p>To compete in the Contribution Clash, accumulate Contribution Credits through the following methods:</p> -->
|
||
<p>1. Top-Up Diamonds: Earn 1 Contribution Credit for every 1U spent automatically.</p>
|
||
<p>2. Spend Gold in-Game: Receive 1 Contribution Credit for every 10 Gold spent in-game. (Note: Gold card synthesis and Market purchases are excluded.)</p>
|
||
<p>3. Stake and Earn: Contribution Credits earned from ongoing staking activities will also count towards your total.</p>
|
||
</div>
|
||
</a-modal>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {ref, watch, computed, onMounted} from "vue";
|
||
import { BlockChain } from "@/components/chain/BlockChain"
|
||
import { apiCecActivity } from "@/utils/marketplace"
|
||
import { contributionLogs } from "@/configs/priceCalculate"
|
||
import {walletStore} from "@/store/wallet";
|
||
import { useMarketplaceStore } from "@/store/marketplace"
|
||
const localWalletStore = walletStore()
|
||
const marketplaceStore = useMarketplaceStore()
|
||
|
||
import {useRouter, useRoute} from "vue-router";
|
||
const router = useRouter();
|
||
|
||
const totalCecPool = ref(0)
|
||
const cecInfo = ref({
|
||
my_contribution: 0,
|
||
global_contribution: 0,
|
||
total_cec_pool: 500000,
|
||
my_expected_cec: 0
|
||
})
|
||
|
||
const myWidthShare = computed(() => {
|
||
let str = (Number(cecInfo.value.my_contribution) / Number(cecInfo.value.global_contribution)) * 100
|
||
if(!localWalletStore.token) {
|
||
str = 0
|
||
}
|
||
return str
|
||
})
|
||
|
||
const myWidth = computed(() => {
|
||
let str = (Number(cecInfo.value.my_contribution) / Number(cecInfo.value.global_contribution)) * 100
|
||
if(!localWalletStore.token) {
|
||
str = 0
|
||
} else {
|
||
if(str < 10 && str != 0) return 10
|
||
}
|
||
return str
|
||
})
|
||
|
||
const totalWidth = computed(() => {
|
||
let str = 100-myWidth.value
|
||
return str
|
||
})
|
||
|
||
//
|
||
const getCecActivity = async () => {
|
||
if(localWalletStore.token) {
|
||
const { errcode, errmsg, contributionPoint, info } = await apiCecActivity(localWalletStore.address)
|
||
if(errcode != 0) return
|
||
totalCecPool.value = contributionPoint
|
||
cecInfo.value = info
|
||
}
|
||
}
|
||
|
||
const cecActivityDialogVisible = ref(false)
|
||
|
||
// 链接钱包
|
||
const getLinkWallet = async () =>{
|
||
await new BlockChain().connect()
|
||
getCecActivity()
|
||
}
|
||
|
||
const isLogout = ref(false)
|
||
// 退出登录
|
||
const logOut = async () =>{
|
||
try {
|
||
isLogout.value = false
|
||
await new BlockChain().logout()
|
||
location.reload()
|
||
} catch (e) {
|
||
console.log(e)
|
||
}
|
||
}
|
||
|
||
// 跳回首页
|
||
const handlHome = () => {
|
||
router.push("/");
|
||
};
|
||
|
||
// 下载
|
||
const downloadGame = (platform) => {
|
||
if (platform == "Android") {
|
||
window.location.href = "https://counterfire.games/release/counterfire.apk";
|
||
} else if (platform == "Google Play") {
|
||
window.open(
|
||
"https://play.google.com/store/apps/details?id=com.cege.games.release"
|
||
);
|
||
} else {
|
||
window.open("https://apps.apple.com/app/counter%20fire/id6444462915");
|
||
}
|
||
};
|
||
|
||
const loginDiscord = () => {
|
||
const _address = localWalletStore.address;
|
||
const codeChallenge = Date.now();
|
||
const state = btoa(`${_address}|${codeChallenge}`);
|
||
// const url = 'https://discord.com/api/oauth2/authorize?client_id=1116692240224501850&redirect_uri=http%3A%2F%2Flocalhost%3A3010%2Fdiscord%2Fredirect_uri&response_type=code&scope=guilds%20identify%20guilds.members.read'
|
||
const url = `https://discord.com/api/oauth2/authorize?client_id=1117759635269636096&redirect_uri=https%3A%2F%2Foauth-svr.cebggame.com%2Fdiscord%2Fredirect_uri&response_type=code&scope=guilds%20identify%20guilds.members.read&state=${state}`;
|
||
// location.href = url
|
||
// // Redirect the user to the Discord OAuth2 authorization page
|
||
let params = `scrollbars=yes,resizable=yes,status=no,location=no,toolbar=no,menubar=no,width=600,height=800,left=100,top=100`;
|
||
let newwin = window.open(url, "discord login", params);
|
||
console.log(newwin)
|
||
var timer = setInterval(function() {
|
||
if (newwin.closed) {
|
||
clearInterval(timer);
|
||
}
|
||
}, 10);
|
||
};
|
||
|
||
// 发送推文
|
||
const toTwitter = () => {
|
||
const url = "https://twitter.com/intent/tweet?text=";
|
||
const hashtags = encodeURIComponent(
|
||
"I've just minted my @playCounterFire Genesis Heroes! Catch me in the upcoming P2E Season 1!"
|
||
);
|
||
const imageUrl = encodeURIComponent(
|
||
`https://sphere.market/immutable/collection/0x3A85cA6615953c683826FBe54fA5e2a770ee8bA2`
|
||
);
|
||
const params = `${hashtags}&url=${imageUrl}`;
|
||
// const params = `${hashtags}`;
|
||
window.open(`${url}${params}`, "_blank");
|
||
};
|
||
|
||
const mintInit = async () => {};
|
||
|
||
onMounted(() => {
|
||
getCecActivity()
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.mint {
|
||
background: #1a1821;
|
||
.mint-page {
|
||
.mint-header {
|
||
position: relative;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 1497px;
|
||
height: 152px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
z-index: 9;
|
||
.mint-header-logo {
|
||
width: 263px;
|
||
height: 100%;
|
||
cursor: pointer;
|
||
}
|
||
.mint-header-right {
|
||
display: flex;
|
||
align-items: center;
|
||
color: #fff;
|
||
.left {
|
||
width: 106px;
|
||
height: 47px;
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
align-items: center;
|
||
background: #2d2738;
|
||
border-radius: 25px;
|
||
margin-right: 21px;
|
||
div {
|
||
width: 19px;
|
||
height: 14px;
|
||
display: flex;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
.right {
|
||
cursor: pointer;
|
||
.wallet {
|
||
width: 220px;
|
||
height: 50px;
|
||
border-radius: 26px;
|
||
padding-left: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: 80px;
|
||
background: #2d2738;
|
||
position: relative;
|
||
span {
|
||
display: inline-block;
|
||
width: 100%;
|
||
height: 100%;
|
||
line-height: 50px;
|
||
margin-right: 10px;
|
||
font-size: 16px;
|
||
}
|
||
.wallet-address {
|
||
width: 100%;
|
||
height: 100%;
|
||
line-height: 50px;
|
||
font-size: 16px;
|
||
}
|
||
.wallet-btn {
|
||
z-index: 999;
|
||
position: absolute;
|
||
top: -25px;
|
||
right: -45px;
|
||
width: 100px;
|
||
height: 100px;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.hover-show {
|
||
display: block;
|
||
}
|
||
.hover-none {
|
||
display: none;
|
||
}
|
||
.wallet-list {
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: -50%;
|
||
transform: translateX(-50%);
|
||
border-radius: 20px;
|
||
overflow: hidden;
|
||
display: none;
|
||
li {
|
||
width: 200px;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
padding: 10px;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
display: flex;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
background: #342f3b;
|
||
img {
|
||
width: 30px;
|
||
height: 30px;
|
||
margin-right: 8px;
|
||
}
|
||
&:hover {
|
||
background: #e0e0e0;
|
||
color: #0f1013;
|
||
}
|
||
}
|
||
}
|
||
&:hover {
|
||
.hover-show {
|
||
display: none;
|
||
}
|
||
.hover-none {
|
||
display: block;
|
||
}
|
||
.wallet-list {
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
.log-out {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 100%;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #2d2738;
|
||
border-radius: 26px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 16px;
|
||
border: 2px solid #bb7fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.mint-body {
|
||
width: 1497px;
|
||
margin: 0 auto;
|
||
position: relative;
|
||
top: -152px;
|
||
.mint-body-left {
|
||
position: absolute;
|
||
top: 140px;
|
||
left: 35px;
|
||
z-index: 9;
|
||
.mint-body-left-title {
|
||
display: flex;
|
||
align-items: center;
|
||
h2 {
|
||
font-family: "Anton";
|
||
font-weight: 400;
|
||
font-size: 48px;
|
||
color: #fff;
|
||
}
|
||
|
||
}
|
||
.mint-body-left-text {
|
||
font-family: "Poppins";
|
||
font-size: 17px;
|
||
color: #fff;
|
||
}
|
||
.mint-body-left-time {
|
||
display: flex;
|
||
align-items: center;
|
||
text-align: left;
|
||
font-family: "Poppins";
|
||
font-weight: 400;
|
||
font-size: 20px;
|
||
color: #994ffd;
|
||
.left {
|
||
.tips {
|
||
position: relative;
|
||
.tips-icon {
|
||
width: 60px;
|
||
height: 66px;
|
||
cursor: pointer;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.tips-text {
|
||
display: none;
|
||
}
|
||
&:hover {
|
||
.tips-text {
|
||
display: block;
|
||
position: absolute;
|
||
top: -107px;
|
||
left: 35px;
|
||
width: 492px;
|
||
height: 120px;
|
||
background: #1a1821;
|
||
border-radius: 32px;
|
||
border: 2px solid #8144d2;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
div {
|
||
width: 425px;
|
||
height: 80px;
|
||
p {
|
||
font-family: "Poppins";
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #fff;
|
||
line-height: 1.2;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.right {
|
||
div {
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
}
|
||
.mint-body-left-content {
|
||
width: 241px;
|
||
height: 303px;
|
||
margin-top: 31px;
|
||
background: #2c2635;
|
||
border-radius: 40px;
|
||
text-align: left;
|
||
p {
|
||
padding-top: 21px;
|
||
padding-left: 17px;
|
||
font-family: "Poppins";
|
||
font-weight: 400;
|
||
font-size: 16px;
|
||
color: #dcc2f1;
|
||
}
|
||
.mint-body-left-contribute {
|
||
width: 100%;
|
||
height: 69px;
|
||
margin-top: 4px;
|
||
position: relative;
|
||
li {
|
||
position: absolute;
|
||
left: -14px;
|
||
width: 269px;
|
||
height: 69px;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 27px;
|
||
background: url("@/assets/img/cec_activity/Credit_bg1.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
div {
|
||
width: 42px;
|
||
height: 42px;
|
||
margin-right: 11px;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
h6 {
|
||
font-family: "Anton";
|
||
font-weight: 400;
|
||
font-size: 42px;
|
||
color: #00deff;
|
||
}
|
||
}
|
||
}
|
||
.mint-body-left-my-pro {
|
||
// display: flex;
|
||
// align-items: center;
|
||
font-family: "Poppins";
|
||
font-weight: 400;
|
||
font-size: 16px;
|
||
color: #dcc2f1;
|
||
p {
|
||
padding-top: 10px;
|
||
span {
|
||
font-family: "Anton";
|
||
font-weight: 400;
|
||
font-size: 24px;
|
||
color: #ffffff;
|
||
}
|
||
&:last-child {
|
||
padding: 0;
|
||
text-align: right;
|
||
padding-right: 24px;
|
||
line-height: 1;
|
||
}
|
||
}
|
||
}
|
||
.line {
|
||
width: 227px;
|
||
height: 2px;
|
||
background: #423757;
|
||
margin: 0 auto;
|
||
margin-top: 12px;
|
||
}
|
||
h4 {
|
||
font-family: "Poppins";
|
||
font-weight: 400;
|
||
font-size: 16px;
|
||
color: #dcc2f1;
|
||
padding-left: 14px;
|
||
margin-top: 15px;
|
||
}
|
||
.mint-body-left-cec {
|
||
display: flex;
|
||
align-items: center;
|
||
div {
|
||
width: 59px;
|
||
height: 57px;
|
||
margin: 0 15px 0 11px;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
h3 {
|
||
font-family: "Anton";
|
||
font-weight: 400;
|
||
font-size: 46px;
|
||
color: #ffc35b;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.mint-body-content {
|
||
width: 992px;
|
||
height: 890px;
|
||
background: url("@/assets/img/cec_activity/CEC_chest.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
margin: 0 auto;
|
||
margin-bottom: 50px;
|
||
position: relative;
|
||
.mint-body-content-total {
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: 140px;
|
||
transform: translateX(-50%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 416px;
|
||
height: 80px;
|
||
background: url("@/assets/img/cec_activity/totalCEC_bg.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
div {
|
||
width: 59px;
|
||
height: 57px;
|
||
margin-right: 12px;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
h3 {
|
||
font-family: "Anton";
|
||
font-weight: 400;
|
||
font-size: 48px;
|
||
color: #fff;
|
||
}
|
||
}
|
||
.mint-body-content-bar {
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: 0;
|
||
transform: translateX(-50%);
|
||
width: 565px;
|
||
margin: 0 auto;
|
||
.bar {
|
||
width: 565px;
|
||
height: 48px;
|
||
padding: 10px;
|
||
background: #25212f;
|
||
border-radius: 24px;
|
||
border: 2px solid #44395b;
|
||
display: flex;
|
||
> div {
|
||
height: 100%;
|
||
}
|
||
.left {
|
||
width: 10%;
|
||
background: linear-gradient(180deg, #f38d3b, #ffd86e);
|
||
border-radius: 20px 0 0 20px;
|
||
position: relative;
|
||
cursor: pointer;
|
||
.my-amount {
|
||
display: none;
|
||
position: absolute;
|
||
left: 50%;
|
||
top: -95px;
|
||
transform: translateX(-50%);
|
||
width: 232px;
|
||
height: 67px;
|
||
background: #2c2635;
|
||
border-radius: 20px;
|
||
font-family: "Poppins";
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #dcc2f1;
|
||
li {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 32px;
|
||
padding: 0 20px;
|
||
div {
|
||
text-align: left;
|
||
width: 125px;
|
||
}
|
||
span {
|
||
font-family: "Poppins";
|
||
font-weight: bold;
|
||
font-size: 18px;
|
||
color: #00deff;
|
||
}
|
||
p {
|
||
font-family: "Poppins";
|
||
font-weight: bold;
|
||
font-size: 18px;
|
||
color: #fff;
|
||
}
|
||
}
|
||
.line {
|
||
width: 212px;
|
||
height: 2px;
|
||
margin: 0 auto;
|
||
background: #423757;
|
||
}
|
||
&:after {
|
||
display: block;
|
||
content: "";
|
||
border-width: 15px;
|
||
border-style: solid;
|
||
border-color: #ffc96a transparent transparent transparent;
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: -30px;
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
&:hover {
|
||
.my-amount {
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
.right {
|
||
width: 90%;
|
||
background: linear-gradient(180deg, #8929ff, #e362ff);
|
||
border-radius: 0 20px 20px 0;
|
||
}
|
||
.total-right {
|
||
background: linear-gradient(180deg, #8929ff, #e362ff);
|
||
border-radius: 20px;
|
||
}
|
||
}
|
||
.total {
|
||
position: absolute;
|
||
top: -45px;
|
||
right: -120px;
|
||
width: 150px;
|
||
height: 145px;
|
||
background: url("@/assets/img/cec_activity/credit_bg2.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
li {
|
||
width: 127px;
|
||
height: 90px;
|
||
font-family: "Poppins";
|
||
text-align: center;
|
||
h4 {
|
||
font-size: 16px;
|
||
color: #fffeff;
|
||
}
|
||
h6 {
|
||
font-weight: 400;
|
||
font-size: 12px;
|
||
color: #fffeff;
|
||
}
|
||
div {
|
||
width: 100%;
|
||
height: 2px;
|
||
background: #423757;
|
||
}
|
||
p {
|
||
font-weight: bold;
|
||
font-size: 18px;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.mint-body-right {
|
||
width: 260px;
|
||
// height: 630px;
|
||
background: #2c2635;
|
||
border-radius: 28px;
|
||
position: absolute;
|
||
top: 154px;
|
||
right: 65px;
|
||
// padding: 25px 45px 30px 46px;
|
||
box-sizing: border-box;
|
||
.mint-body-right-top {
|
||
// height: 502px;
|
||
background: #1A1821;
|
||
border-radius: 28px;
|
||
border: 2px solid #4B3E5D;
|
||
// padding: 14px 45px 30px 46px;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
color: #fff;
|
||
.mint-body-right-top-title {
|
||
position: absolute;
|
||
top: 18px;
|
||
left: -20px;
|
||
width: 298px;
|
||
height: 74px;
|
||
background: url('src/assets/img/cec_activity/Credit_bg3.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
font-family: 'Anton';
|
||
font-weight: 400;
|
||
font-size: 20px;
|
||
color: #FFFFFF;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.mint-body-right-top-text {
|
||
margin-top: 108px;
|
||
font-family: 'Poppins-Regular';
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
padding-left: 14px;
|
||
}
|
||
.mint-body-right-top-line {
|
||
width: 233px;
|
||
height: 2px;
|
||
background: #423757;
|
||
margin: 15px auto;
|
||
}
|
||
.mint-body-right-top-con {
|
||
padding-left: 14px;
|
||
p {
|
||
font-family: 'Poppins-Regular';
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #DCC2F1;
|
||
margin-bottom: 25px;
|
||
&:last-child {
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.mint-body-right-btm {
|
||
height: 228px;
|
||
padding: 15px 45px 30px 46px;
|
||
box-sizing: border-box;
|
||
p {
|
||
height: 16px;
|
||
margin-bottom: 20px;
|
||
font-family: "Poppins";
|
||
font-weight: bold;
|
||
font-size: 19px;
|
||
color: #ffffff;
|
||
}
|
||
div {
|
||
width: 169px;
|
||
height: 59px;
|
||
margin-top: 10px;
|
||
cursor: pointer;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.mint-body-btm {
|
||
// width: 300px;
|
||
// height: 200px;
|
||
// background: #2c2635;
|
||
// border-radius: 28px;
|
||
// position: absolute;
|
||
// bottom: 154px;
|
||
// right: 65px;
|
||
}
|
||
}
|
||
.footer {
|
||
width: 100%;
|
||
height: 98px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 45px;
|
||
box-sizing: border-box;
|
||
border-top: 2px solid #2c2635;
|
||
background: #1a1821;
|
||
.footer-left {
|
||
color: #877e98;
|
||
font-size: 18px;
|
||
display: flex;
|
||
align-items: center;
|
||
div {
|
||
width: 235px;
|
||
height: 51px;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
:deep(.cecActivityModel) {
|
||
width: 1020px !important;
|
||
height: 400px;
|
||
background: #1A1821;
|
||
box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13);
|
||
border-radius: 100px;
|
||
border: 1px solid #B966FF;
|
||
.ant-modal-content {
|
||
width: 944px;
|
||
margin: 0 auto;
|
||
color: #FFF;
|
||
background: #1A1821;
|
||
border-radius: 100px;
|
||
box-shadow: 0 0 0 0;
|
||
.ant-modal-body {
|
||
overflow: hidden;
|
||
.log-title {
|
||
width: 944px;
|
||
margin: 0 auto;
|
||
font-family: 'Anton';
|
||
font-weight: 400;
|
||
font-size: 48px;
|
||
color: #FFFFFF;
|
||
margin-top: 23px;
|
||
border-bottom: 2px solid #3D4057;
|
||
}
|
||
.closable {
|
||
position: absolute;
|
||
right: -80px;
|
||
top: -30px;
|
||
z-index: 99;
|
||
cursor: pointer;
|
||
img {
|
||
width: 120px;
|
||
height: 120px;
|
||
}
|
||
}
|
||
h3 {
|
||
font-family: 'Poppins';
|
||
font-weight: bold;
|
||
font-size: 16px;
|
||
color: #AB74EA;
|
||
margin-top: 20px;
|
||
}
|
||
// .staking-content {
|
||
// display: flex;
|
||
// justify-content: space-between;
|
||
// li {
|
||
// width: 427px;
|
||
// border-radius: 50px;
|
||
// h4 {
|
||
// font-family: 'Poppins';
|
||
// font-weight: bold;
|
||
// font-size: 30px;
|
||
// color: #AB74EA;
|
||
// text-align: center;
|
||
// }
|
||
// .hero-title {
|
||
// height: 50px;
|
||
// line-height: 50px;
|
||
// background: #604680;
|
||
// border-radius: 30px 30px 0 0;
|
||
// font-family: 'Poppins';
|
||
// font-weight: bold;
|
||
// font-size: 18px;
|
||
// color: #F6F6F6;
|
||
// span {
|
||
// display: inline-block;
|
||
// text-align: center;
|
||
// &:nth-child(1) {
|
||
// width: 127px;
|
||
// border-right: 2px solid #1a1821;
|
||
// }
|
||
// &:nth-child(2) {
|
||
// width: 300px;
|
||
// }
|
||
// }
|
||
// }
|
||
// .hero-body {
|
||
// div {
|
||
// height: 46px;
|
||
// line-height: 46px;
|
||
// text-align: center;
|
||
// background: #2d2738;
|
||
// font-family: 'Poppins';
|
||
// font-weight: 600;
|
||
// font-size: 20px;
|
||
// color: #F3F0FF;
|
||
// border-top: 2px solid #1a1821;
|
||
// span {
|
||
// display: inline-block;
|
||
// text-align: center;
|
||
// &:nth-child(1) {
|
||
// width: 127px;
|
||
// border-right: 2px solid #1a1821;
|
||
// }
|
||
// &:nth-child(2) {
|
||
// width: 300px;
|
||
// }
|
||
// }
|
||
// &:last-child {
|
||
// border-radius: 0 0 30px 30px;
|
||
// }
|
||
// }
|
||
// }
|
||
// }
|
||
// }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|