951 lines
28 KiB
Vue
951 lines
28 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>
|
|
<a href="https://discord.gg/counterfire" target="_blank">
|
|
<img src="@/assets/img/cec_activity/Icon_Disc.png" alt />
|
|
</a>
|
|
</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-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>
|
|
</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(
|
|
"500,000 $CEC Awaits - Earn Your Share!"
|
|
);
|
|
const imageUrl = encodeURIComponent(
|
|
`https://counterfire.games/cecActivity`
|
|
);
|
|
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;
|
|
a {
|
|
display: block;
|
|
width: 19px;
|
|
height: 14px;
|
|
}
|
|
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('@/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: 200px;
|
|
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%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|