mint完成
This commit is contained in:
yuyongdong
parent
928c69540d
commit
bd8916f2a7
@ -13,6 +13,11 @@
|
||||
property="og:image"
|
||||
content="https://mint.counterfire.games/mint.png"
|
||||
/>
|
||||
|
||||
<meta
|
||||
property="twitter:image"
|
||||
content="https://gacha.counterfire.games/images/counter.png"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
BIN
src/assets/home/prompt_bg.png
Normal file
BIN
src/assets/home/prompt_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
{{hour}}h:{{min}}m:{{sec}}s
|
||||
{{day}}D:{{hour}}H:{{min}}M:{{sec}}S
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -46,25 +46,25 @@
|
||||
</div>
|
||||
<div class="home-content-left-time-btm">
|
||||
<p>Guaranteed Mint</p>
|
||||
<div v-if="activityState == 0" class="mint-time">
|
||||
<div v-if="(activityState == 2 || activityState == 1) && totalLimit+500 < getMintConfig.maxSupply" class="mint-time">
|
||||
<p>OPENING</p>
|
||||
</div>
|
||||
<div v-else-if="activityState == 3 || totalLimit+500 >= getMintConfig.maxSupply" class="mint-time">
|
||||
<span class="mint-ent">The minting session has ended.</span>
|
||||
</div>
|
||||
<div v-else class="mint-time">
|
||||
<span>{{ days1 }}D</span>
|
||||
<span>{{ hours1 }}H</span>
|
||||
<span>{{ minutes1 }}M</span>
|
||||
<span>{{ senconds1 }}S</span>
|
||||
</div>
|
||||
<div v-if="activityState == 2 || activityState == 1" class="mint-time">
|
||||
<p>OPENING</p>
|
||||
</div>
|
||||
<div v-if="activityState == 3" class="mint-time">
|
||||
<span class="mint-ent">The minting session has ended.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-content-left-time-btm home-content-left-time-btm-tow">
|
||||
<p>FCFS Mint</p>
|
||||
<div v-if="activityState == 3" class="mint-time">
|
||||
<div v-if="activityState == 3 || totalLimit+500 >= getMintConfig.maxSupply" class="mint-time">
|
||||
<span class="mint-ent">The minting session has ended.</span>
|
||||
</div>
|
||||
<div v-else-if="activityState == 2" class="mint-time">
|
||||
<div v-else-if="activityState == 2 || totalLimit+500 >= getMintConfig.maxSupply" class="mint-time">
|
||||
<p>OPENING</p>
|
||||
</div>
|
||||
<div v-else class="mint-time">
|
||||
@ -91,7 +91,7 @@
|
||||
<div class="base-title-img">
|
||||
<img src="./../assets/home/icon_Immutable.png" alt="">
|
||||
</div>
|
||||
<div class="base-title-text">Base on Immutable zkEvm</div>
|
||||
<div class="base-title-text">Minting on Immutable zkEVM</div>
|
||||
</div>
|
||||
<div class="base-content">
|
||||
<p>-Pepare ETH on Immutable zkEVM for minting.</p>
|
||||
@ -100,7 +100,7 @@
|
||||
<!-- <p>-Pepare ETH on Immutable zkEVM for minting.</p> -->
|
||||
</div>
|
||||
<div class="base-btn">
|
||||
<a href="https://docs.google.com/document/d/1zixgbf60Fq4-wL_1xEpgaVzShWVa0XDjkCa65LzJzew/edit" target="_blank">Learn More</a>
|
||||
<a href="https://docs.google.com/document/d/1Hev5vThUYKpo717DHgJf0SKrvFj_DdA084JFaMNz7C0/edit" target="_blank">Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="explore-download">
|
||||
@ -118,6 +118,7 @@
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="mint-content-right">
|
||||
|
||||
<div class="home-content-right-top">
|
||||
<div class="wallet" @click="walletDialogVisible = true">
|
||||
<span v-if="getAddress == null || getAddress == ''">Connect Wallet</span>
|
||||
@ -145,10 +146,58 @@
|
||||
</div>
|
||||
|
||||
<div v-show="navIndex == 0" class="home-content-right-join">
|
||||
<div class="extension-text">
|
||||
<marquee scrollamount="10" width="100%">
|
||||
Prepare your mint funds on Immutable zkEVM NOW to secure your spot in the GTD WL!
|
||||
</marquee>
|
||||
</div>
|
||||
<div class="home-content-right-join-top">
|
||||
<img src="./../assets/home/Gen2_raw.gif" alt />
|
||||
</div>
|
||||
<div v-if="activityState == 0" class="home-content-right-join-btm">
|
||||
<div v-if="activityState == 3 || totalLimit+500 >= getMintConfig.maxSupply" class="home-content-right-join-btm">
|
||||
<div class="join-list">
|
||||
<div class="join-list-top">
|
||||
<div class="claim-period">
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="claim-tips">
|
||||
<h1>Details</h1>
|
||||
<div @click="tipsDialogVisible = true">
|
||||
<img src="./../assets/home/Icon_!.png" alt />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="join-list-btm">
|
||||
<div class="claim-total">
|
||||
<h1></h1>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="claim-price">
|
||||
<h1></h1>
|
||||
<div>
|
||||
<!-- <img src="./../assets/home/ETHicon.png" alt /> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="join-btm">
|
||||
<div class="join-btm-left">
|
||||
<p class="purchase">Please go to the marketplace to view and purchase.</p>
|
||||
</div>
|
||||
<div class="join-btm-right">
|
||||
<div
|
||||
class="noWhite"
|
||||
>
|
||||
<span>Mint</span>
|
||||
|
||||
<div>
|
||||
<img class="hover-show" src="./../assets/home/Arrow2.png" alt />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="activityState == 0" class="home-content-right-join-btm">
|
||||
<div class="join-list">
|
||||
<div class="join-list-top">
|
||||
<div class="claim-period">
|
||||
@ -206,7 +255,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="activityState == 1 || activityState == 2" class="home-content-right-join-btm">
|
||||
<div v-else-if="(activityState == 1 || activityState == 2) && totalLimit+500 < getMintConfig.maxSupply" class="home-content-right-join-btm">
|
||||
<div class="join-list">
|
||||
<div class="join-list-top">
|
||||
<div class="claim-period">
|
||||
@ -291,55 +340,17 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="activityState == 3" class="home-content-right-join-btm">
|
||||
<div class="join-list">
|
||||
<div class="join-list-top">
|
||||
<div class="claim-period">
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="claim-tips">
|
||||
<h1>Details</h1>
|
||||
<div @click="tipsDialogVisible = true">
|
||||
<img src="./../assets/home/Icon_!.png" alt />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="join-list-btm">
|
||||
<div class="claim-total">
|
||||
<h1></h1>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="claim-price">
|
||||
<h1></h1>
|
||||
<div>
|
||||
<!-- <img src="./../assets/home/ETHicon.png" alt /> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="join-btm">
|
||||
<div class="join-btm-left">
|
||||
<p class="purchase">Please go to the marketplace to view and purchase.</p>
|
||||
</div>
|
||||
<div class="join-btm-right">
|
||||
<div
|
||||
class="noWhite"
|
||||
>
|
||||
<span>Mint</span>
|
||||
|
||||
<div>
|
||||
<img class="hover-show" src="./../assets/home/Arrow2.png" alt />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="navIndex == 1" class="home-content-right-join">
|
||||
<div class="extension-text">
|
||||
<marquee scrollamount="10" width="100%">
|
||||
Prepare your mint funds on Immutable zkEVM NOW to secure your spot in the GTD WL!
|
||||
</marquee>
|
||||
</div>
|
||||
<div class="home-content-right-join-top">
|
||||
<img src="./../assets/home/Gen2_raw.gif" alt />
|
||||
</div>
|
||||
<div v-if="activityState == 3" class="home-content-right-join-btm">
|
||||
<div v-if="activityState == 3 || totalLimit+500 >= getMintConfig.maxSupply" class="home-content-right-join-btm">
|
||||
<div class="join-list">
|
||||
<div class="join-list-top">
|
||||
<div class="claim-period">
|
||||
@ -382,7 +393,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="activityState == 0 || activityState == 1" class="home-content-right-join-btm FCFS-no">
|
||||
<div v-else-if="activityState == 0 || activityState == 1" class="home-content-right-join-btm FCFS-no">
|
||||
<div class="tow-title">
|
||||
<p>FCFS Mint will be available on a</p>
|
||||
<p>first-come-first-served basis</p>
|
||||
@ -395,7 +406,7 @@
|
||||
<span>{{ senconds2 }}S</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="activityState == 2" class="home-content-right-join-btm">
|
||||
<div v-else-if="activityState == 2 && totalLimit+500 < getMintConfig.maxSupply" class="home-content-right-join-btm">
|
||||
<div class="join-list">
|
||||
<div class="join-list-top">
|
||||
<div class="claim-period">
|
||||
@ -533,9 +544,6 @@
|
||||
<img :src="item.imgUrl" alt />
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
<div class="wallet-item-right" v-if="index == 2">
|
||||
Recommended
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
@ -599,6 +607,7 @@
|
||||
</div>
|
||||
<div class="time">
|
||||
<StarTimer @stopTime="stopTimeChange" :openNft="openNft" :getAddress="getAddress" />
|
||||
<!-- <div>Tuesday, 02 July 2024 10:00:00 GMT</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -875,14 +884,14 @@ let hours2 = ref(0);
|
||||
let minutes2 = ref(0);
|
||||
let senconds2 = ref(0);
|
||||
let timer = null;
|
||||
const openNft = ref(1719828000000)
|
||||
const openNft = ref(1719914400000)
|
||||
// 倒计时
|
||||
const starTimer = () => {
|
||||
let now = new Date().getTime();
|
||||
let str = 1719568800000; // 开始（前24）
|
||||
let bar = 1719568800000; // 一期开始（一期倒计时4小时）
|
||||
let towBar = 1719583200000; // 二期开始 （一期倒计时4小时）
|
||||
let end = 1719604800000; // 结束 （）
|
||||
let str = 1719655200000; // 开始（前24）
|
||||
let bar = 1719655200000; // 一期开始（一期倒计时4小时）
|
||||
let towBar = 1719669600000; // 二期开始 （一期倒计时4小时）
|
||||
let end = 1719691200000; // 结束 （）
|
||||
let strTime = (str - now) / 1000; // 开始前毫秒数 - 现在毫秒数
|
||||
let begTime = (bar - now) / 1000; // 一期开始毫秒数 - 现在毫秒数
|
||||
let towBarTime = (towBar - now) / 1000; // 二期开始毫秒数 - 现在毫秒数
|
||||
@ -1015,7 +1024,7 @@ const getIsWhite = async () => {
|
||||
} else if (num1 > 0) {
|
||||
statusTxt.value = 'Congrats! Guaranteed Whitelisted'
|
||||
} else if (num2 > 0) {
|
||||
statusTxt.value = 'Congrats!FCFS Whitelisted!'
|
||||
statusTxt.value = 'Congrats! FCFS Whitelisted'
|
||||
} else {
|
||||
statusTxt.value = 'Not on the whitelist'
|
||||
}
|
||||
@ -1161,10 +1170,10 @@ const stopTimeChange = (e) => {
|
||||
// 发送推文
|
||||
const toTwitter = () => {
|
||||
const url = 'https://twitter.com/intent/tweet?text=';
|
||||
const hashtags = encodeURIComponent("I have just minted my Genesis Box for @playCounterFire! Eagerly starting the play2earn season, excited for my hero's debut in this thrilling quest!");
|
||||
// const imageUrl = encodeURIComponent(`https://opensea.io/assets/ethereum/0xec23679653337d4c6390d0eeba682246a6067777/`);
|
||||
// const params = `${hashtags}&url=${imageUrl}`;
|
||||
const params = `${hashtags}`;
|
||||
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');
|
||||
}
|
||||
|
||||
@ -1352,6 +1361,8 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
.mint-ent {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 24px !important;
|
||||
}
|
||||
}
|
||||
@ -2122,6 +2133,21 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
.extension-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 540.5px;
|
||||
height: 49px;
|
||||
line-height: 49px;
|
||||
font-family: 'Poppins-SemiBold';
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
color: #B680FF;
|
||||
background: url('./../assets/home/prompt_bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.join-pending {
|
||||
// margin-bottom: 50px;
|
||||
@ -2382,7 +2408,7 @@ onMounted(() => {
|
||||
.time {
|
||||
font-family: 'Poppins';
|
||||
font-weight: bold;
|
||||
font-size: 30px;
|
||||
font-size: 22px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
@ -2585,17 +2611,6 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
li:nth-child(3) {
|
||||
// border: 2px solid;
|
||||
// border-image: linear-gradient(to right, #FFAFFA, #D1FFFA, #6DD5F9, #C9BAFF, #94E2FF) 1;
|
||||
border-radius: 8px;
|
||||
// overflow: hidden;
|
||||
border: 2px solid transparent;
|
||||
background-clip: padding-box, border-box;
|
||||
background-origin: padding-box, border-box;
|
||||
background-image: linear-gradient(to right, #222, #222), linear-gradient(90deg, #FFAFFA, #D1FFFA, #6DD5F9, #C9BAFF, #94E2FF)
|
||||
|
||||
}
|
||||
li:nth-child(4) {
|
||||
background: #d5befa;
|
||||
.disconnect {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user