2562 lines
80 KiB
Vue
2562 lines
80 KiB
Vue
<template>
|
||
<div class="zillionaire">
|
||
<div class="content" v-show="navIndex == 0 || navIndex == 1 || navIndex == 2">
|
||
<div class="left">
|
||
<div class="left-top">
|
||
<div class="left-top-logo">
|
||
<img src="./../../assets/home/mint_Logo1.png" alt />
|
||
</div>
|
||
<div class="left-top-points">
|
||
<div class="left-top-points-left">
|
||
<li>
|
||
<div class="top">
|
||
<span class="textCol4">{{ myInviteCount }}</span>
|
||
<img src="./../../assets/common/Invites.png" alt="">
|
||
</div>
|
||
<div class="btm">Invites</div>
|
||
<div class="hover-tips">Successful invtations</div>
|
||
</li>
|
||
<li>
|
||
<div class="top">
|
||
<span class="textCol3">{{ myEnhanceCount }}</span>
|
||
<img src="./../../assets/common/Icon_Boosting.png" alt="">
|
||
</div>
|
||
<div class="btm">Boosting</div>
|
||
<div class="hover-tips">Daily boosting reamaining times</div>
|
||
</li>
|
||
<li>
|
||
<div class="top">
|
||
<span class="textCol2">{{ todayStepTicket }}</span>
|
||
<img src="./../../assets/common/Icon_Explore.png" alt="">
|
||
</div>
|
||
<div class="btm">Exploration</div>
|
||
<div class="hover-tips">Explorations obtained</div>
|
||
</li>
|
||
<li>
|
||
<div class="top">
|
||
<span class="textCol1">{{ usesScore }}</span>
|
||
<img src="./../../assets/common/Icon_Points.png" alt="">
|
||
</div>
|
||
<div class="btm">Points</div>
|
||
<div class="hover-tips">Explorations obtained</div>
|
||
</li>
|
||
<div class="touxiang">
|
||
<UserImg :imgSrc="myTwitterAvatar" />
|
||
</div>
|
||
</div>
|
||
<div class="left-top-points-right">
|
||
<img v-if="inWhiteList == 1" src="@/assets/common/wallet-yes.png" alt="">
|
||
<img v-else src="@/assets/common/wallet-no.png" alt="">
|
||
<div class="hover-tips">Holder of the partner NFT collections will receive additional rewards</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="left-title">
|
||
<div class="left-title-left" v-if="navIndex == 0 || navIndex == 2">
|
||
<div>LOOMING FOG OF THE <img src="./../../assets/home/Icon_star.png" alt=""> UNKNOWN</div>
|
||
<p v-if="navIndex == 0">Phase 1 Quest Log</p>
|
||
</div>
|
||
<div class="left-title-left" v-if="navIndex == 1">
|
||
<div>HILL'S <img src="./../../assets/home/Icon_star.png" alt=""> TREASURE HUNT</div>
|
||
<p>
|
||
Phase 2 Exploration Missions
|
||
</p>
|
||
</div>
|
||
<div class="left-title-right">
|
||
<p>Invite friends to earn</p>
|
||
<p>more rewards <span class="tips" @click="ruleDialogVisible = true">!</span></p>
|
||
<div class="copy-btn" @click="copyLinkCode"><img src="./../../assets/common/Icon_Explore.png" alt=""> Copy referral link</div>
|
||
<div class="copy-see" @click="isLogin">
|
||
View Invites
|
||
</div>
|
||
<div class="rule"></div>
|
||
</div>
|
||
</div>
|
||
<div class="explore">
|
||
<div class="explore-zill">
|
||
<gameView ref="stepId" :stepAmount="stepAmount" :getTotalUsed="getTotalUsed" @awardDialog="exploreAwardDialog" />
|
||
</div>
|
||
<div class="explore-desc" v-if="navIndex == 0 || navIndex == 2">
|
||
<div class="explore-desc-logo">
|
||
<img src="./../../assets/home/Icon_smile.png" alt="">
|
||
</div>
|
||
<h4>How it works</h4>
|
||
<div
|
||
class="desc"
|
||
>Every step is filled with possibilities; every movement might begin a new chapter. <br /> All on-chain activities are built on opBNB. <br />Click on the smiley face to view more details on Medium</div>
|
||
</div>
|
||
<div class="explore-desc-map" v-if="navIndex == 1">
|
||
<li>
|
||
<h2>EXPLORE</h2>
|
||
<div class="logo">
|
||
<img src="./../../assets/common/Icon_Explore1.png" alt="">
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="check">
|
||
<span @click="decrease">-</span>
|
||
<span>{{ stepTicket }} <img src="./../../assets/common/Icon_Explore1.png" alt=""></span>
|
||
<span @click="increase">+</span>
|
||
</div>
|
||
<div class="max" @click="exploreMax">
|
||
MAX
|
||
</div>
|
||
</li>
|
||
<li class="explore-btn" @click="exploreCli(stepTicket)">Explore Map</li>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="right-header">
|
||
<div class="right-header-left">
|
||
</div>
|
||
<div class="right-header-right">
|
||
<div class="link">
|
||
<li v-for="(item, index) in linkList" :key="index">
|
||
<a :href="item.hrefLink" target="_blank" rel="noopener noreferrer">
|
||
<div>
|
||
<img :src="item.imgSrc" alt />
|
||
</div>
|
||
</a>
|
||
</li>
|
||
</div>
|
||
<div class="wallet" @click="onWalletLogin">
|
||
<span v-if="!showAddress">X Connected</span>
|
||
<div
|
||
class="wallet-address"
|
||
v-else
|
||
>{{ showAddress }}</div>
|
||
<div class="wallet-btn">
|
||
<img v-if="!showAddress" class="hover-show" src="./../../assets/home/Connect Menu1.png" alt />
|
||
<img v-else class="hover-none" src="@/assets/home/ICON03.png" alt />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="nav-btm">
|
||
<div class="nav">
|
||
<li
|
||
:class="{active: navIndex == index}"
|
||
v-for="(item, index) in navList"
|
||
:key="index"
|
||
@click="navBtn(index)"
|
||
>
|
||
<div class="nav-img">
|
||
<img v-if="navIndex == index" :src="item.imgSrc1" alt="">
|
||
<img v-else :src="item.imgSrc" alt="">
|
||
</div>
|
||
</li>
|
||
</div>
|
||
</div>
|
||
<div class="right-title" v-if="navIndex == 0">
|
||
<p>Phase 1</p>
|
||
<h3>Complete quests to shatter the looming</h3>
|
||
<h3>fog that veils the unknown!</h3>
|
||
</div>
|
||
<div class="right-title" v-if="navIndex == 2">
|
||
<p></p>
|
||
<h3>Join hands with us and our partners to achieve your goals</h3>
|
||
</div>
|
||
<div class="content-right" v-if="navIndex == 0">
|
||
<div class="title">
|
||
<div class="title-left">
|
||
<div>Quest</div>
|
||
</div>
|
||
</div>
|
||
<div class="quest">
|
||
<div class="bar">
|
||
<div class="bar-left">
|
||
<div class="bar-top">
|
||
<div class="bar-top-left">Progress</div>
|
||
<div class="bar-top-right">
|
||
<div class="bar-top-jinDu" :style="{width: filteredBar+'%'}" ref="questPendingBg"></div>
|
||
</div>
|
||
</div>
|
||
<div class="bar-btm">
|
||
<p>*Complete tasks to win three exploration</p>
|
||
<p>attempts.</p>
|
||
</div>
|
||
</div>
|
||
<div class="bar-right">
|
||
<div class="bar-no">
|
||
<span>X 3 </span>
|
||
<img src="@/assets/common/Icon_Explore.png" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="quest-list">
|
||
<li v-for="(item, index) in activeList" :key="index">
|
||
<div class="quest-item" @click="toPost(item, true)">
|
||
<div class="content-right-left">
|
||
<!-- <div class="img-logo">
|
||
<img src="./../../assets/home/twitter.png" alt />
|
||
</div>
|
||
<div class="score">
|
||
<span>{{ item.score }} Pts</span>
|
||
</div>-->
|
||
<div class="desc">
|
||
<h3>{{ item.title }}</h3>
|
||
<p>{{ item.desc }}</p>
|
||
</div>
|
||
</div>
|
||
<div v-if="token != null" class="btn">
|
||
<div class="is-btn">
|
||
<div v-if="item.status == 0" class="started" @click.stop="toPost(item)">{{ item.actionTitle }}</div>
|
||
<CheckBtn v-if="item.status == 1" @stateupdate="toCheck" :dataid="item.id" time="10" title="Verify" class="started">Verify</CheckBtn>
|
||
<div v-if="item.status == 2" class="claim" @click.stop="getTaskClaim(item.id)">Claim</div>
|
||
<div v-if="item.status == 3" class="success">+{{ item.score }} <img src="./../../assets/common/Checkmark (1).png" alt=""></div>
|
||
</div>
|
||
</div>
|
||
<div class='light-btn' v-else @click.stop="onWalletLogin">Connect Wallet</div>
|
||
</div>
|
||
</li>
|
||
</div>
|
||
</div>
|
||
<div class="tips">
|
||
*Claim will consume a small amount of gas.
|
||
</div>
|
||
</div>
|
||
<div class="skip" v-if="navIndex == 0">
|
||
<div class="skip-left">
|
||
<div class="skip-icon">
|
||
<img src="./../../assets/home/Icon_.png" alt="">
|
||
</div>
|
||
<div class="skip-desc">
|
||
<p>You will skip the social media tasks, forfeiting the points for this</p>
|
||
<p>section, but you can still come back to complete it when you wish.</p>
|
||
</div>
|
||
</div>
|
||
<div class="skip-right" @click="navIndex = 1">
|
||
Skip
|
||
</div>
|
||
</div>
|
||
<div class="sign-in-content" v-if="navIndex == 1">
|
||
<div class="calen-content">
|
||
<Calen ref="renewCheck" :activityData='activityData' />
|
||
<div class="rewards">
|
||
<p>Cumulative Rewards</p>
|
||
<div v-if="gameStateData.totalStat" class="rewards-list">
|
||
<li v-for="(item, index) in gameStateData.totalStat" :key="index">
|
||
<div class="center no-state" v-if="item.state == 0">
|
||
<div>
|
||
<div class="top">
|
||
<img src="./../../assets/common/Icon_Explore.png" alt="">
|
||
<span> ×{{ item.tickets }}</span>
|
||
</div>
|
||
<div class="btm">{{ item.days }} Days</div>
|
||
</div>
|
||
</div>
|
||
<div class="center state" v-if="item.state == 1" @click="getCheckClaim(item.days)">
|
||
<div>
|
||
<div class="top">
|
||
<img src="./../../assets/common/Icon_Explore1.png" alt="">
|
||
<span>× {{ item.tickets }}</span>
|
||
</div>
|
||
<div class="btm">{{ item.days }} Days</div>
|
||
</div>
|
||
</div>
|
||
<div class="center yes-state" v-if="item.state == 9">
|
||
<div>
|
||
<div class="top">
|
||
<img src="./../../assets/common/Icon_Explore9.png" alt="">
|
||
<span>× {{ item.tickets }}</span>
|
||
</div>
|
||
<div class="btm">{{ item.days }} Days</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</div>
|
||
<div v-else class="rewards-list">
|
||
<li>
|
||
<div class="center no-state">
|
||
<div>
|
||
<div class="top">
|
||
<img src="./../../assets/common/Icon_Explore.png" alt="">
|
||
<span>× 1</span>
|
||
</div>
|
||
<div class="btm">5 Days</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="center no-state">
|
||
<div>
|
||
<div class="top">
|
||
<img src="./../../assets/common/Icon_Explore.png" alt="">
|
||
<span>× 2</span>
|
||
</div>
|
||
<div class="btm">10 Days</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="center no-state">
|
||
<div>
|
||
<div class="top">
|
||
<img src="./../../assets/common/Icon_Explore.png" alt="">
|
||
<span>× 3</span>
|
||
</div>
|
||
<div class="btm">20 Days</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="center no-state">
|
||
<div>
|
||
<div class="top">
|
||
<img src="./../../assets/common/Icon_Explore.png" alt="">
|
||
<span>× 4</span>
|
||
</div>
|
||
<div class="btm">30 Days</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</div>
|
||
</div>
|
||
<div class="rewards">
|
||
<p>Bonus Rewards</p>
|
||
<div v-if="gameStateData.seqStat" class="rewards-list">
|
||
<li v-for="(item, index) in gameStateData.seqStat" :key="index">
|
||
<div class="center no-state" v-if="item.state == 0">
|
||
<div>
|
||
<div class="top">
|
||
<img src="./../../assets/common/Icon_Explore.png" alt="">
|
||
<span>× {{ item.tickets }}</span>
|
||
</div>
|
||
<div class="btm">{{ item.days }} Days</div>
|
||
</div>
|
||
</div>
|
||
<div class="center state" v-if="item.state == 1" @click="claimSeqStat(item.days)">
|
||
<div>
|
||
<div class="top">
|
||
<img src="./../../assets/common/Icon_Explore1.png" alt="">
|
||
<span>× {{ item.tickets }}</span>
|
||
</div>
|
||
<div class="btm">{{ item.days }} Days</div>
|
||
</div>
|
||
</div>
|
||
<div class="center yes-state" v-if="item.state == 9">
|
||
<div>
|
||
<div class="top">
|
||
<img src="./../../assets/common/Icon_Explore9.png" alt="">
|
||
<span>× {{ item.tickets }}</span>
|
||
</div>
|
||
<div class="btm">{{ item.days }} Days</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</div>
|
||
<div v-else class="rewards-list">
|
||
<li>
|
||
<div class="center no-state">
|
||
<div>
|
||
<div class="top">
|
||
<img src="./../../assets/common/Icon_Explore.png" alt="">
|
||
<span>× 1</span>
|
||
</div>
|
||
<div class="btm">3 Days</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="center no-state">
|
||
<div>
|
||
<div class="top">
|
||
<img src="./../../assets/common/Icon_Explore.png" alt="">
|
||
<span>× 2</span>
|
||
</div>
|
||
<div class="btm">7 Days</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="center no-state">
|
||
<div>
|
||
<div class="top">
|
||
<img src="./../../assets/common/Icon_Explore.png" alt="">
|
||
<span>× 3</span>
|
||
</div>
|
||
<div class="btm">15 Days</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="center no-state">
|
||
<div>
|
||
<div class="top">
|
||
<img src="./../../assets/common/Icon_Explore.png" alt="">
|
||
<span>× 4</span>
|
||
</div>
|
||
<div class="btm">30 Days</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="check">
|
||
<div class="check-btm">
|
||
<p>*Checking in will consume a small amount of gas.</p>
|
||
</div>
|
||
<div class="check-top">
|
||
<li v-if="gameStateData.todayStat == 0" @click="walletCheck">
|
||
<span>Daily Check-in </span>+{{ gameStateData.todayTickets }}
|
||
<img src="./../../assets/common/Icon_Daily.png" alt="">
|
||
</li>
|
||
<div class="check-yes" v-if="gameStateData.todayStat == 9">
|
||
<img src="./../../assets/home/check-yes.png" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content-right" v-if="navIndex == 2">
|
||
<div class="title">
|
||
<!-- <div class="title-left">
|
||
<div>Partner</div>
|
||
</div> -->
|
||
</div>
|
||
<div class="quest">
|
||
<div class="partner-list">
|
||
<div>
|
||
coming soon
|
||
</div>
|
||
<!-- <div class="partner">
|
||
<div>Partner</div>
|
||
<div>Rewards</div>
|
||
<div></div>
|
||
</div>
|
||
<li v-for="(item, index) in nftsList" :key="index">
|
||
<div class="quest-item">
|
||
<div class="content-rewards-left">
|
||
<div class="img-logo">
|
||
<img src="./../../assets/home/twitter.png" alt />
|
||
</div>
|
||
<div class="desc">
|
||
<h3>{{ item.collection }}</h3>
|
||
<p>{{ item.projectName }}</p>
|
||
</div>
|
||
</div>
|
||
<div class="rewards">
|
||
<img src="@/assets/box/box01.png" alt="">
|
||
</div>
|
||
<div v-if="token != null" class="btn">
|
||
<div class="is-btn">
|
||
<div>Chick</div>
|
||
<div v-if="item.status == 0" class="started" @click="toPost(item)">{{ item.actionTitle }}</div>
|
||
<CheckBtn v-if="item.status == 1" @stateupdate="toCheck" :dataid="item.id" time="10" title="Check" class="started">Check</CheckBtn>
|
||
<div v-if="item.status == 2" class="claim" @click="getTaskClaim(item.id)">Claim</div>
|
||
<div v-if="item.status == 3" class="success">+{{ item.score }} <img src="./../../assets/home/Checkmark.png" alt=""></div>
|
||
</div>
|
||
</div>
|
||
<div class='light-btn' v-else @click="onWalletLogin">Connect Wallet</div>
|
||
</div>
|
||
</li> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content-box" v-show="navIndex == 3 || navIndex == 4">
|
||
<div class="box">
|
||
<div class="box-top">
|
||
<div class="left">
|
||
<div class="left-top">
|
||
<div class="left-top-logo">
|
||
<img src="./../../assets/home/mint_Logo1.png" alt />
|
||
</div>
|
||
<div class="left-top-points">
|
||
<div class="left-top-points-left">
|
||
<li>
|
||
<div class="top">
|
||
<span class="textCol4">{{ myInviteCount }}</span>
|
||
<img src="./../../assets/common/Invites.png" alt="">
|
||
</div>
|
||
<div class="btm">Invites</div>
|
||
<div class="hover-tips">Successful invtations</div>
|
||
</li>
|
||
<li>
|
||
<div class="top">
|
||
<span class="textCol3">{{ myEnhanceCount }}</span>
|
||
<img src="./../../assets/common/Icon_Boosting.png" alt="">
|
||
</div>
|
||
<div class="btm">Boosting</div>
|
||
<div class="hover-tips">Daily boosting reamaining times</div>
|
||
</li>
|
||
<li>
|
||
<div class="top">
|
||
<span class="textCol2">{{ todayStepTicket }}</span>
|
||
<img src="./../../assets/common/Icon_Explore.png" alt="">
|
||
</div>
|
||
<div class="btm">Exploration</div>
|
||
<div class="hover-tips">Explorations obtained</div>
|
||
</li>
|
||
<li>
|
||
<div class="top">
|
||
<span class="textCol1">{{ usesScore }}</span>
|
||
<img src="./../../assets/common/Icon_Points.png" alt="">
|
||
</div>
|
||
<div class="btm">Points</div>
|
||
<div class="hover-tips">Explorations obtained</div>
|
||
</li>
|
||
<div class="touxiang">
|
||
<UserImg :imgSrc="myTwitterAvatar" />
|
||
</div>
|
||
</div>
|
||
<div class="left-top-points-right">
|
||
<img v-if="inWhiteList == 1" src="@/assets/common/wallet-yes.png" alt="">
|
||
<img v-else src="@/assets/common/wallet-no.png" alt="">
|
||
<div class="hover-tips">Holder of the partner NFT collections will receive additional rewards</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="right-header">
|
||
<div class="right-header-left">
|
||
</div>
|
||
<div class="right-header-right">
|
||
<div class="link">
|
||
<li v-for="(item, index) in linkList" :key="index">
|
||
<a :href="item.hrefLink" target="_blank" rel="noopener noreferrer">
|
||
<div>
|
||
<img :src="item.imgSrc" alt />
|
||
</div>
|
||
</a>
|
||
</li>
|
||
</div>
|
||
<div class="wallet" @click="onWalletLogin">
|
||
<span v-if="!showAddress">X Connected</span>
|
||
<div
|
||
class="wallet-address"
|
||
v-else
|
||
>{{ showAddress }}</div>
|
||
<div class="wallet-btn">
|
||
<img v-if="!showAddress" class="hover-show" src="./../../assets/home/Connect Menu1.png" alt />
|
||
<img v-else class="hover-none" src="@/assets/home/ICON03.png" alt />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="nav-btm">
|
||
<div class="nav">
|
||
<li
|
||
:class="{active: navIndex == index}"
|
||
v-for="(item, index) in navList"
|
||
:key="index"
|
||
@click="navBtn(index)"
|
||
>
|
||
<div class="nav-img">
|
||
<img v-if="navIndex == index" :src="item.imgSrc1" alt="">
|
||
<img v-else :src="item.imgSrc" alt="">
|
||
</div>
|
||
</li>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="box-btm" v-show="navIndex == 3">
|
||
<BoxBtm ref="boxList" @toExplore="toExplore" @awardDialog="activityDialog" />
|
||
</div>
|
||
<div class="box-btm" v-show="navIndex == 4">
|
||
<Ranking :activityName="activityData.name" ref="rankingData" />
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- 登录弹窗 -->
|
||
<WalletDialog class="wallet-dialog" :walletDialogVisible="walletDialogVisible" @closeDialog="closeDialog" />
|
||
|
||
<!-- 宝箱助力弹窗 -->
|
||
<HelpDialog class="help-dialog" :helpDialogVisible="helpDialogVisible" @onWalletLogin="onWalletLogin" @handleClose="helpHandleClose" @awardDialog="helpAwardDialog" />
|
||
|
||
<!-- 奖励弹窗 -->
|
||
<AwardDialog :ExploreDialogVisible="ExploreDialogVisible" @handleClose="ExploreHandleClose" @toComplete="toComplete" :eventName="eventName" :awardData="awardData" :level1='level1' :level2='level2' :level3='level3' :level4='level4' :dialogTitle="dialogTitle" />
|
||
|
||
<!-- 邀请列表 -->
|
||
<LogDialog :logDialogVisible="logDialogVisible" @handleClose="logHandleClose" />
|
||
|
||
<!-- Loading -->
|
||
<Loading :Loading="isLoading" />
|
||
|
||
<RuleDialog :ruleDialogVisible="ruleDialogVisible" @handleClose="ruleHandleClose" />
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Calen from "./calenView.vue";
|
||
import BoxBtm from './boxBtm.vue'
|
||
import Ranking from './ranking.vue'
|
||
import UserImg from '@/components/userImg.vue'
|
||
import gameView from "./gameView.vue";
|
||
import CheckBtn from "@/components/checkBtn.vue";
|
||
import WalletDialog from "@/components/walletDialog/index.vue";
|
||
import AwardDialog from './awardDialog.vue'
|
||
import HelpDialog from './helpDialog.vue'
|
||
import LogDialog from './logDialog.vue'
|
||
import Loading from '@/components/loading.vue'
|
||
import RuleDialog from './ruleDialog.vue'
|
||
import { getToken } from '@/utils/cookies.js'
|
||
// import { getWalletAddress, isWalletConnected, linkWallet } from "@/wallet/index.js";
|
||
import {
|
||
apiUploadInviteCode,
|
||
apiBeginActivity,
|
||
apiCheckActivity,
|
||
apiTaskClaim,
|
||
apiCheckinClaim,
|
||
apiCheckinClaimSeq,
|
||
retweetTwitter,
|
||
followTwitter,
|
||
joinDiscord,
|
||
apiProgress,
|
||
apiGameStat,
|
||
apiUsercheckin,
|
||
apiEnhanceBox,
|
||
apiNftList,
|
||
} from "./../../utils/webapi.js";
|
||
import { sendToChain, sendHelp } from "./../../utils/chainapi.js";
|
||
import { Wallet } from '@/wallet/index.js'
|
||
import { formatShowAddress } from "@/utils/utils.js";
|
||
|
||
export default {
|
||
components: {
|
||
UserImg,
|
||
Calen,
|
||
gameView,
|
||
WalletDialog,
|
||
BoxBtm,
|
||
Ranking,
|
||
CheckBtn,
|
||
AwardDialog,
|
||
HelpDialog,
|
||
LogDialog,
|
||
Loading,
|
||
RuleDialog,
|
||
},
|
||
data() {
|
||
return {
|
||
linkList: [
|
||
{
|
||
imgSrc: require('@/assets/common/Icon_Disc.png'),
|
||
hrefLink: 'https://discord.gg/counterfire',
|
||
},
|
||
{
|
||
imgSrc: require('@/assets/common/Icon_X.png'),
|
||
hrefLink: 'https://twitter.com/playCounterFire',
|
||
}
|
||
],
|
||
ruleDialogVisible: false,
|
||
inWhiteList: 0,
|
||
activityData: {},
|
||
baseTasks: [],
|
||
myScoreTotal: 0,
|
||
myInviteCount: 0,
|
||
myEnhanceCount: 0,
|
||
myTwitterAvatar: '',
|
||
navList: [
|
||
{
|
||
id: 1,
|
||
name: 1,
|
||
imgSrc: require("./../../assets/common/P1-up.png"),
|
||
imgSrc1: require("./../../assets/common/P1.png"),
|
||
},
|
||
{
|
||
id: 2,
|
||
name: 2,
|
||
imgSrc: require("./../../assets/common/P2-up.png"),
|
||
imgSrc1: require("./../../assets/common/P2.png"),
|
||
},
|
||
{
|
||
id: 3,
|
||
name: 3,
|
||
imgSrc: require("./../../assets/common/P5-up.png"),
|
||
imgSrc1: require("./../../assets/common/P5.png"),
|
||
},
|
||
{
|
||
id: 4,
|
||
name: 4,
|
||
imgSrc: require("./../../assets/common/P3-up.png"),
|
||
imgSrc1: require("./../../assets/common/P3.png"),
|
||
},
|
||
{
|
||
id: 5,
|
||
name: 5,
|
||
imgSrc: require("./../../assets/common/P4-up.png"),
|
||
imgSrc1: require("./../../assets/common/P4.png"),
|
||
}
|
||
],
|
||
navIndex: 0,
|
||
walletDialogVisible: false,
|
||
gameStateData: {},
|
||
activityName: "",
|
||
activityId: "uaw_activity",
|
||
isWallet: false,
|
||
activeList: [],
|
||
isTask: true,
|
||
token: null,
|
||
checking: false,
|
||
userData: {
|
||
code: "111"
|
||
},
|
||
helpLogList: [
|
||
{
|
||
nickname: "0000000"
|
||
}
|
||
],
|
||
helpDialogVisible: false,
|
||
helpAmount: 0,
|
||
stepAmount: 0,
|
||
myAddress: this.$store.state.user.address,
|
||
getTotalUsed: 0, // 已探索总次数
|
||
todayStepTicket: 0, // 探索总次数
|
||
stepTicket: 1, // 探索次数
|
||
inviteTableData: [],
|
||
ExploreDialogVisible: false,
|
||
awardData: {},
|
||
level1: [],
|
||
level2: [],
|
||
level3: [],
|
||
level4: [],
|
||
dialogTitle: '',
|
||
eventName: '',
|
||
logDialogVisible: false,
|
||
nftsList: [],
|
||
isNewUser: 0,
|
||
isLoading: false,
|
||
};
|
||
},
|
||
watch: {
|
||
},
|
||
computed: {
|
||
filteredBar() {
|
||
let aa = this.activeList.filter(item => this.baseTasks.includes(item.id))
|
||
let bb = aa.filter(item => item.status == 3).length
|
||
let cc = bb / this.baseTasks.length * 100
|
||
return cc
|
||
},
|
||
showAddress () {
|
||
let address = this.$store.state.user.address
|
||
return formatShowAddress(address)
|
||
},
|
||
usesScore() {
|
||
return this.$store.state.user.userData?.scoreTotal || 0
|
||
}
|
||
},
|
||
created() {
|
||
this.userData = JSON.parse(localStorage.getItem("userData"));
|
||
this.token = getToken();
|
||
},
|
||
mounted() {
|
||
this.initData()
|
||
this.$nextTick(() => {
|
||
if (this.$route.params.name) {
|
||
if(this.$route.params.boxId.split("id=")[1] != 'undefined') {
|
||
this.helpDialogVisible = true
|
||
}
|
||
}
|
||
});
|
||
},
|
||
methods: {
|
||
async initData() {
|
||
await this.getActivity();
|
||
this.getNftList()
|
||
this.$store.dispatch('wallet/restore')
|
||
this.$store.dispatch('user/restore')
|
||
if (this.token) {
|
||
this.getProgress();
|
||
this.getGameStat();
|
||
this.getUserState()
|
||
this.myAddress = formatShowAddress(this.$store.state.user.address)
|
||
this.myTwitterAvatar = this.userData.twitterAvatar
|
||
this.myScoreTotal = this.userData.scoreTotal
|
||
this.myInviteCount = this.userData.inviteCount
|
||
this.myEnhanceCount = this.userData.enhanceCount
|
||
this.inWhiteList = this.userData.inWhiteList
|
||
if(this.$route.params.name) {
|
||
this.helpConfirm()
|
||
}
|
||
|
||
} else {
|
||
this.walletDialogVisible = true
|
||
}
|
||
},
|
||
// 获取活动信息
|
||
async getActivity() {
|
||
await this.$axios
|
||
.get(process.env.VUE_APP_API_URL+`/api/activity/${this.activityId}`)
|
||
.then(res => {
|
||
this.activityName = res.data.data.name;
|
||
const actionTitles = {
|
||
TwitterConnect: "Connect",
|
||
TwitterFollow: "Follow",
|
||
TwitterRetweet: "Retweet",
|
||
DiscordJoin: 'Join',
|
||
DiscordConnect: "Connect"
|
||
};
|
||
this.activeList.length = 0
|
||
for (let data of res.data.data.tasks) {
|
||
data.actionTitle = actionTitles[data.task] || 'Proceed'
|
||
this.activeList.push(data)
|
||
}
|
||
this.activityData = res.data.data
|
||
this.baseTasks = res.data.data.baseTasks
|
||
})
|
||
.catch(err => {
|
||
console.info(err);
|
||
});
|
||
},
|
||
|
||
// 查看社交任务进度
|
||
async getProgress() {
|
||
let { errcode, data } = await apiProgress()
|
||
if (!errcode) {
|
||
let stateMap = new Map()
|
||
data.forEach(item => {
|
||
stateMap.set(item.id, item.status)
|
||
})
|
||
for (let i = 0; i < this.activeList.length; i++) {
|
||
this.$set(this.activeList[i], "status", stateMap.get(this.activeList[i].id) || 0)
|
||
}
|
||
}
|
||
},
|
||
|
||
// 开始任务
|
||
async toPost(data, onlyaction) {
|
||
// debugger
|
||
if(data.status == 0 || !onlyaction){
|
||
let res = await apiBeginActivity(data.id);
|
||
if(res.errcode == 0) {
|
||
await this.getProgress()
|
||
}
|
||
}
|
||
|
||
if (data.task == "TwitterConnect") {
|
||
await this.loginTwitter(data.id);
|
||
} else if(data.task == "TwitterFollow") {
|
||
followTwitter(data.cfg.account)
|
||
} else if(data.task == "TwitterRetweet") {
|
||
retweetTwitter(data.cfg.content)
|
||
} else if(data.task == "DiscordJoin") {
|
||
joinDiscord(data.cfg.account)
|
||
} if (data.task == "DiscordConnect") {
|
||
this.loginDiscord()
|
||
}
|
||
},
|
||
// 手动检查任务
|
||
async toCheck() {
|
||
await this.getProgress()
|
||
},
|
||
// 检查任务状态
|
||
async getActivitrStatue(id) {
|
||
await apiCheckActivity(id);
|
||
await this.getProgress()
|
||
},
|
||
async loginTwitter() {
|
||
// const _address = "0x8c10Ae04BF525734eaC00d5F7c062567461c207F";
|
||
const clientId = "aG1Jdm1YX0NhSU9rYU5sM0xQeVI6MTpjaQ";
|
||
// const codeChallenge = crypto.randomUUID()
|
||
const codeChallenge = Date.now();
|
||
const address = this.$store.state.user.address;
|
||
const redirectUri = "https://oauth-svr.cebggame.com/twitter/redirect_uri";
|
||
const state = btoa(`${address}|${codeChallenge}|${location.href}`);
|
||
const url = `https://twitter.com/i/oauth2/authorize?client_id=${clientId}&code_challenge=${codeChallenge}&code_challenge_method=plain&redirect_uri=${encodeURIComponent(
|
||
redirectUri
|
||
)}&response_type=code&scope=tweet.read+users.read+follows.read+offline.access+like.read&state=${encodeURIComponent(
|
||
state
|
||
)}`;
|
||
let newwin = window.open(url, "twitter connect");
|
||
var timer = setInterval(function() {
|
||
if (newwin.closed) {
|
||
clearInterval(timer);
|
||
// alert(newwin.closed, "window closed");
|
||
}
|
||
}, 10);
|
||
// location.href = url;
|
||
await this.getActivitrStatue(data.id)
|
||
},
|
||
async loginDiscord() {
|
||
const _address = this.$store.state.user.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);
|
||
var timer = setInterval(function() {
|
||
if (newwin.closed) {
|
||
clearInterval(timer);
|
||
|
||
}
|
||
}, 10);
|
||
},
|
||
// 领取任务奖励
|
||
async getTaskClaim(id) {
|
||
let address = this.$store.state.user.address;
|
||
if (!this.$store.state.wallet.connected || !address) {
|
||
this.walletDialogVisible = true
|
||
return
|
||
}
|
||
this.isLoading = true
|
||
let storeageKey
|
||
try {
|
||
storeageKey = await sendToChain('task_claim', address, id)
|
||
} catch (err) {
|
||
this.isLoading = false
|
||
this.$showErr(err)
|
||
return
|
||
}
|
||
let serTimeId = setInterval(async () => {
|
||
try {
|
||
let { errcode, errmsg, data } = await apiTaskClaim(id)
|
||
if (errcode) {
|
||
if (errcode === 12) {
|
||
// 已领取, 给个提示就可以了
|
||
this.isLoading = false
|
||
this.$message.error(errmsg)
|
||
this.getActivitrStatue(id)
|
||
clearInterval(serTimeId)
|
||
} else if (errcode !== 14) {
|
||
// 状态不是等待链上确认的, 都提示错误
|
||
this.isLoading = false
|
||
this.$message.error(errmsg)
|
||
clearInterval(serTimeId)
|
||
}
|
||
} else {
|
||
if(data?.status == 3) {
|
||
// alert(`领取成功, 获得积分: ${data.score}`)
|
||
this.isLoading = false
|
||
this.activityDialog(data)
|
||
this.getActivitrStatue(id)
|
||
this.getUserState()
|
||
localStorage.removeItem(storeageKey)
|
||
clearInterval(serTimeId)
|
||
}
|
||
}
|
||
} catch (err) {
|
||
this.isLoading = false
|
||
this.$message.error(`claim task reward error: ${err}`)
|
||
}
|
||
|
||
}, 3000)
|
||
|
||
},
|
||
|
||
// 探索状态
|
||
async getGameStat() {
|
||
let {errcode, data} = await apiGameStat()
|
||
if (!errcode) {
|
||
this.gameStateData = data;
|
||
this.todayStepTicket = data.ticket;
|
||
this.getTotalUsed = data.totalUsed
|
||
}
|
||
},
|
||
|
||
// 最大探索次数
|
||
exploreMax() {
|
||
this.stepTicket = this.todayStepTicket
|
||
},
|
||
|
||
// 探索
|
||
async exploreCli(amount) {
|
||
if(this.token) {
|
||
this.$refs.stepId.sendOneAction(this.getTotalUsed, amount)
|
||
} else {
|
||
this.walletDialogVisible = true
|
||
}
|
||
},
|
||
|
||
// errorHandleClose
|
||
errorHandleClose() {
|
||
this.errDialogVisible = false
|
||
},
|
||
ruleHandleClose() {
|
||
this.ruleDialogVisible = false
|
||
},
|
||
|
||
// 探索奖励
|
||
exploreAwardDialog(val) {
|
||
this.awardData = val
|
||
this.eventName = 'explore_event'
|
||
if(this.awardData.chests.length > 0) {
|
||
this.level1 = []
|
||
this.level2 = []
|
||
this.level3 = []
|
||
this.level4 = []
|
||
val.chests.forEach(element => {
|
||
if (element.level == "1") {
|
||
this.level1.push(element)
|
||
} else if (element.level == "2") {
|
||
this.level2.push(element)
|
||
} else if(element.level == "3"){
|
||
this.level3.unshift(element)
|
||
} else if(element.level == "4"){
|
||
this.level4.push(element)
|
||
}
|
||
});
|
||
this.dialogTitle = 'Explore successfully and get rewards'
|
||
this.$refs.boxList.rewBoxList()
|
||
} else {
|
||
this.dialogTitle = 'Congratulations'
|
||
}
|
||
this.getUserState()
|
||
this.getGameStat()
|
||
this.ExploreDialogVisible = true
|
||
},
|
||
|
||
// 宝箱助力奖励
|
||
helpAwardDialog(val) {
|
||
this.awardData = val
|
||
this.eventName = 'help_event'
|
||
this.dialogTitle = 'Got lucky and successful Boosting'
|
||
this.getUserState()
|
||
this.getGameStat();
|
||
this.ExploreDialogVisible = true
|
||
},
|
||
|
||
// 社媒任务奖励
|
||
activityDialog(val) {
|
||
this.awardData = val
|
||
this.eventName = 'help_event'
|
||
this.dialogTitle = 'Congratulations'
|
||
if(this.filteredBar == 100) {
|
||
this.getGameStat()
|
||
}
|
||
this.getUserState()
|
||
this.$refs.rankingData.renewData()
|
||
this.ExploreDialogVisible = true
|
||
},
|
||
|
||
// 签到奖励
|
||
checkAwardDialog(val) {
|
||
this.awardData = val
|
||
this.eventName = 'check_event'
|
||
this.dialogTitle = 'Congratulations'
|
||
this.ExploreDialogVisible = true
|
||
},
|
||
|
||
// 关闭奖励弹窗
|
||
ExploreHandleClose() {
|
||
this.ExploreDialogVisible = false;
|
||
},
|
||
toComplete(val) {
|
||
this.navIndex = val
|
||
this.ExploreDialogVisible = false;
|
||
},
|
||
|
||
// 签到
|
||
async walletCheck() {
|
||
let address = this.$store.state.user.address;
|
||
if (!this.$store.state.wallet.connected || !address) {
|
||
this.walletDialogVisible = true
|
||
return
|
||
}
|
||
this.isLoading = true
|
||
let storeageKey
|
||
try {
|
||
storeageKey = await sendToChain('check', address, '')
|
||
} catch (err) {
|
||
this.isLoading = false
|
||
this.$showErr(err)
|
||
return
|
||
}
|
||
let serTimeId = setInterval(async () => {
|
||
try {
|
||
let { errcode, errmsg, data } = await apiUsercheckin()
|
||
if (errcode) {
|
||
if (errcode === 12) {
|
||
// 已领取, 给个提示就可以了
|
||
this.$message.error(errmsg)
|
||
this.isLoading = false
|
||
this.getGameStat();
|
||
clearInterval(serTimeId)
|
||
} else if (errcode !== 13) {
|
||
this.isLoading = false
|
||
this.$message.error(errmsg)
|
||
clearInterval(serTimeId)
|
||
}
|
||
} else {
|
||
this.isLoading = false
|
||
this.checkAwardDialog(data)
|
||
this.$refs.renewCheck.renewCheckInit()
|
||
this.getGameStat();
|
||
localStorage.removeItem(storeageKey)
|
||
clearInterval(serTimeId)
|
||
}
|
||
} catch (err) {
|
||
this.isLoading = false
|
||
this.$message.error(`claim task reward error: ${err}`)
|
||
}
|
||
}, 3000)
|
||
},
|
||
|
||
// 领取签到奖励
|
||
async claimSeqStat(day) {
|
||
let res = await apiCheckinClaimSeq(day)
|
||
console.info(res)
|
||
this.getGameStat();
|
||
},
|
||
|
||
// 获取累计签到奖励
|
||
async getCheckClaim(days) {
|
||
let res = await apiCheckinClaim(days)
|
||
console.info(res)
|
||
this.getGameStat();
|
||
// this.$message.success('Received successfully')
|
||
// }
|
||
},
|
||
|
||
// 获取钱包地址
|
||
async getMyAddress() {
|
||
return await new Wallet().getWalletAddress();
|
||
},
|
||
|
||
// 检查签到并领取奖励
|
||
async getUsercheckin() {
|
||
// let res = await apiUsercheckin();
|
||
let res = await this.$axios.post(process.env.VUE_APP_API_URL+'/api/user/checkin',{ },
|
||
{ headers: { Authorization: `Bearer ${this.token}` } })
|
||
return res.data.data
|
||
},
|
||
// 发送宝箱助力上链请求并领取奖励
|
||
async sendEnhanceReq(boxCode) {
|
||
let address = this.$store.state.user.address;
|
||
if (!this.$store.state.wallet.connected || !address) {
|
||
this.walletDialogVisible = true
|
||
return
|
||
}
|
||
let storeageKey
|
||
try {
|
||
storeageKey = await sendToChain('chest_enhance', address, boxCode)
|
||
} catch (err) {
|
||
this.$message.error(`error send chain request`)
|
||
return
|
||
}
|
||
let serTimeId = setInterval(async () => {
|
||
try {
|
||
let { errcode, errmsg, data } = await apiEnhanceBox(boxCode)
|
||
if (!errcode) {
|
||
this.getGameStat();
|
||
localStorage.removeItem(storeageKey)
|
||
clearInterval(serTimeId)
|
||
} else if (errcode !== 14) {
|
||
// 状态不是等待链上确认的, 都提示错误
|
||
this.$message.error(errmsg)
|
||
clearInterval(serTimeId)
|
||
}
|
||
} catch (err) {
|
||
this.$message.error(`claim task reward error: ${err}`)
|
||
}
|
||
}, 3000)},
|
||
|
||
// 关闭助力弹窗
|
||
helpHandleClose() {
|
||
this.helpDialogVisible = false;
|
||
},
|
||
|
||
// 关闭我的邀请列表弹窗
|
||
logHandleClose() {
|
||
this.logDialogVisible = false;
|
||
},
|
||
|
||
// apiNftList获取nft合作列表
|
||
async getNftList() {
|
||
let res = await this.$axios.get(process.env.VUE_APP_API_URL+'/api/partner/nfts')
|
||
this.nftsList = res.data.data
|
||
},
|
||
|
||
// 复制链接
|
||
copyLinkCode() {
|
||
if(this.token) {
|
||
let text = this.userData.code
|
||
let url = `${location.protocol}//${location.host}/home/new=${text}/box=undefined/id=undefined`;
|
||
let oInput = document.createElement("input");
|
||
oInput.value = url;
|
||
document.body.appendChild(oInput);
|
||
oInput.select();
|
||
document.execCommand("Copy");
|
||
oInput.className = "oInput";
|
||
oInput.style.display = "none";
|
||
this.$message.success("Copy succeeded");
|
||
} else {
|
||
this.walletDialogVisible = true
|
||
}
|
||
|
||
},
|
||
|
||
// 领取助力奖励 || 判断是否是新用户
|
||
async helpConfirm() {
|
||
if(this.$route.params.name != undefined) {
|
||
let newInvite = this.$route.params.name.split("new=")[1];
|
||
// let rtoken = await checkReCaptcha("invite_user");
|
||
// let res = await this.$axios.get(process.env.VUE_APP_API_URL+"/api/activity/upload_invite_code", {
|
||
// params: { code: newInvite, rtoken: rtoken },
|
||
// headers: { Authorization: `Bearer ${this.token}` }
|
||
// });
|
||
let res = await apiUploadInviteCode(newInvite)
|
||
return
|
||
if (res.data.errcode == 0) {
|
||
this.isNewUser = 0
|
||
// this.getUploadInviteCode(newInvite)
|
||
} else {
|
||
this.isNewUser = 1
|
||
}
|
||
}
|
||
},
|
||
|
||
isLogin() {
|
||
if(this.token) {
|
||
this.logDialogVisible = true
|
||
this.getUserState()
|
||
} else {
|
||
this.walletDialogVisible = true
|
||
}
|
||
},
|
||
|
||
// 获取用户状态
|
||
async getUserState() {
|
||
await this.$store.dispatch('user/fetchUserState')
|
||
},
|
||
|
||
// nav 导航
|
||
navBtn(index) {
|
||
this.navIndex = index;
|
||
},
|
||
// 宝箱页面切换过来
|
||
toExplore(val) {
|
||
this.navIndex = val
|
||
},
|
||
|
||
// 登录
|
||
onWalletLogin() {
|
||
this.walletDialogVisible = true;
|
||
},
|
||
// 关闭登录弹窗
|
||
closeDialog() {
|
||
this.walletDialogVisible = false;
|
||
},
|
||
// 减探索次数
|
||
decrease() {
|
||
if(this.stepTicket == 0 ) return
|
||
this.stepTicket--
|
||
},
|
||
// 加探索次数
|
||
increase() {
|
||
if(this.stepTicket == this.todayStepTicket ) return
|
||
this.stepTicket++
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.zillionaire {
|
||
height: 100%;
|
||
.content {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 30px 50px;
|
||
box-sizing: border-box;
|
||
color: #fff;
|
||
.left {
|
||
width: 70%;
|
||
// height: 100%;
|
||
border-radius: 98px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
background: url('./../../assets/common/Left_element_bg.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
.left-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20px 40px;
|
||
position: inherit;
|
||
z-index: 9;
|
||
.left-top-logo {
|
||
width: 200px;
|
||
height: 100px;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.left-top-points {
|
||
border-radius: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
.left-top-points-left {
|
||
// width: 140px;
|
||
display: flex;
|
||
height: 50px;
|
||
padding-right: 30px;
|
||
background: url('@/assets/common/User-bar.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
li {
|
||
color: #fff;
|
||
padding: 10px 20px 5px 40px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
.hover-tips {
|
||
display: none;
|
||
position: absolute;
|
||
top: 35px;
|
||
right: 0px;
|
||
width: 240px;
|
||
height: 100px;
|
||
line-height: 90px;
|
||
background: url('@/assets/common/WL .png') no-repeat;
|
||
background-size: 100% 100%;
|
||
z-index: 1;
|
||
}
|
||
.top {
|
||
display: flex;
|
||
justify-content: end;
|
||
align-items: center;
|
||
font-weight: 600;
|
||
text-align: right;
|
||
span {
|
||
font-size: 16px;
|
||
}
|
||
.textCol1 {
|
||
color: #9950fd;
|
||
}
|
||
.textCol2 {
|
||
color: #fbc059;
|
||
}
|
||
.textCol3 {
|
||
color: #0095FF;
|
||
}
|
||
img {
|
||
width: 15px;
|
||
height: 15px;
|
||
margin-left: 5px;
|
||
}
|
||
}
|
||
.btm {
|
||
font-size: 14px;
|
||
color: #A8A5AC;
|
||
text-align: right;
|
||
}
|
||
&:hover {
|
||
.hover-tips {
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
li:nth-child(1) {
|
||
img {
|
||
width: 17px;
|
||
height: 11px;
|
||
}
|
||
}
|
||
li:nth-child(2) {
|
||
img {
|
||
width: 13px;
|
||
height: 13px;
|
||
}
|
||
&:hover {
|
||
.hover-tips {
|
||
display: block;
|
||
width: 300px;
|
||
}
|
||
}
|
||
}
|
||
li:nth-child(4) {
|
||
img {
|
||
width: 12px;
|
||
height: 16px;
|
||
}
|
||
}
|
||
.touxiang {
|
||
width: 60px;
|
||
height: 60px;
|
||
position: absolute;
|
||
top: 50%;
|
||
right: -20px;
|
||
transform: translateY(-50%);
|
||
div {
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
}
|
||
}
|
||
.left-top-points-right {
|
||
margin-left: 30px;
|
||
width: 60px;
|
||
height: 60px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.hover-tips {
|
||
display: none;
|
||
position: absolute;
|
||
top: 35px;
|
||
right: -60px;
|
||
width: 590px;
|
||
height: 120px;
|
||
line-height: 110px;
|
||
background: url('@/assets/common/WL .png') no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
&:hover {
|
||
.hover-tips {
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.left-title {
|
||
position: inherit;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
// align-items: center;
|
||
padding: 20px 40px;
|
||
color: #fff;
|
||
z-index: 1;
|
||
.left-title-left {
|
||
width: 300px;
|
||
height: 300px;
|
||
background: url('./../../assets/home/Glow.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
padding-left: 20px;
|
||
div {
|
||
width: 270px;
|
||
line-height: 1.2;
|
||
font-size: 53px;
|
||
font-weight: 700;
|
||
text-align: left;
|
||
font-family: 'Anton-Regular';
|
||
}
|
||
p {
|
||
text-align: left;
|
||
font-size: 15px;
|
||
font-family: 'Poppins-SemiBold';
|
||
margin-top: 5px;
|
||
}
|
||
}
|
||
.left-title-right {
|
||
height: 160px;
|
||
padding: 30px 20px 10px 20px;
|
||
background: #2e283a;
|
||
background: url('./../../assets/home/invite_box.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
border-radius: 20px;
|
||
p {
|
||
font-family: 'Poppins-SemiBold';
|
||
font-size: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
span {
|
||
display: inline-block;
|
||
width: 30px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
margin-left: 10px;
|
||
background: #201d27;
|
||
border-radius: 50%;
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.textCol {
|
||
font-size: 28px;
|
||
font-weight: 700;
|
||
background-image: -webkit-linear-gradient(right, #d1a158, #a154ff);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
.copy-btn {
|
||
font-size: 14px;
|
||
background: url('./../../assets/home/button_copy.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
color: #ffc35d;
|
||
padding: 20px;
|
||
margin: 0 auto;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
img {
|
||
width: 25px;
|
||
height: 25px;
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
.copy-see {
|
||
width: 164px;
|
||
margin: 0 auto;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
background: url('./../../assets/home/button_view.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
font-size: 14px;
|
||
font-family: 'Poppins-Regular';
|
||
cursor: pointer;
|
||
}
|
||
.rule {
|
||
|
||
}
|
||
}
|
||
}
|
||
.explore {
|
||
// position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
.explore-zill {
|
||
position: absolute;
|
||
top: 55%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 936px;
|
||
height: 680px;
|
||
div {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.explore-desc {
|
||
position: absolute;
|
||
left: 30px;
|
||
bottom: 90px;
|
||
padding: 45px 35px;
|
||
width: 310px;
|
||
background: url('./../../assets/home/box.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
border-radius: 20px;
|
||
color: #fff;
|
||
margin-left: 25px;
|
||
z-index: 9;
|
||
.explore-desc-logo {
|
||
position: absolute;
|
||
top: 20px;
|
||
right: 20px;
|
||
width: 30px;
|
||
height: 28px;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
h4 {
|
||
text-align: left;
|
||
font-size: 16px;
|
||
margin-bottom: 10px;
|
||
font-weight: 600;
|
||
font-family: 'Poppins-SemiBold';
|
||
}
|
||
.desc {
|
||
text-align: left;
|
||
font-size: 14px;
|
||
font-family: 'Poppins-Light';
|
||
}
|
||
}
|
||
.explore-desc-map {
|
||
position: absolute;
|
||
left: 30px;
|
||
bottom: 80px;
|
||
padding: 20px 40px;
|
||
width: 320px;
|
||
margin-left: 25px;
|
||
background: rgba(0, 0, 0, 0.2);
|
||
border-radius: 20px;
|
||
color: #fff;
|
||
z-index: 9;
|
||
li {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
h2 {
|
||
font-family: 'Anton-Regular';
|
||
font-size: 30px;
|
||
}
|
||
.logo {
|
||
width: 28px;
|
||
height: 28px;
|
||
margin-left: 10px;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
li:nth-child(2) {
|
||
justify-content: space-between;
|
||
margin: 10px auto;
|
||
padding: 10px 20px;
|
||
border-radius: 30px;
|
||
// background: #1f1c27;
|
||
|
||
.check {
|
||
width: 140px;
|
||
padding: 5px 20px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
background: url('./../../assets/home/select button.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
span {
|
||
color: #fff;
|
||
display: inline-block;
|
||
}
|
||
span:nth-child(1) {
|
||
font-size: 28px;
|
||
cursor: pointer;
|
||
}
|
||
span:nth-child(2) {
|
||
display: flex;
|
||
align-items: center;
|
||
img {
|
||
width: 15px;
|
||
height: 15px;
|
||
margin-left: 5px;
|
||
}
|
||
}
|
||
span:nth-child(3) {
|
||
font-size: 28px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.max {
|
||
padding: 5px 20px;
|
||
font-size: 12px;
|
||
color: #F2B95B;
|
||
border: 2px solid #F2B95B;
|
||
border-radius: 20px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.explore-btn {
|
||
background: #fec25d;
|
||
color: #000;
|
||
font-size: 14px;
|
||
padding: 30px 20px;
|
||
border-radius: 10px;
|
||
background: url('./../../assets/home/explore map button.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.right {
|
||
width: 28%;
|
||
padding: 20px 30px;
|
||
border-radius: 98px;
|
||
// background: #1e1c24;
|
||
box-sizing: border-box;
|
||
background: url('./../../assets/common/Right_box.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
.right-title {
|
||
color: #fff;
|
||
line-height: 1.4;
|
||
margin-bottom: 20px;
|
||
p {
|
||
font-size: 17px;
|
||
font-family: 'Poppins-Light';
|
||
}
|
||
h3 {
|
||
font-size: 26px;
|
||
font-family: 'Anton-Regular';
|
||
}
|
||
}
|
||
.content-right {
|
||
width: 100%;
|
||
z-index: 999;
|
||
padding: 10px;
|
||
box-sizing: border-box;
|
||
background: #2d2738;
|
||
background: url('./../../assets/home/quest log bg.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
border-radius: 20px;
|
||
.title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 10px 20px;
|
||
.title-left {
|
||
color: #fff;
|
||
font-size: 20px;
|
||
font-family: 'Poppins-SemiBold';
|
||
font-weight: 700;
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
.quest {
|
||
background: #1e1b26;
|
||
padding: 10px;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
border-radius: 20px;
|
||
.bar {
|
||
margin-bottom: 10px;
|
||
display: flex;
|
||
.bar-left {
|
||
padding: 0 10px;
|
||
.bar-top {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 5px;
|
||
.bar-top-left {
|
||
font-size: 14px;
|
||
}
|
||
.bar-top-right {
|
||
width: 200px;
|
||
height: 8px;
|
||
margin-left: 10px;
|
||
background: url('@/assets/common/Progress bar bg.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
.bar-top-jinDu {
|
||
width: 80%;
|
||
height: 8px;
|
||
background: url('@/assets/common/Progress bar fill.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
}
|
||
.bar-btm {
|
||
font-size: 12px;
|
||
color: #9950FD;
|
||
p {
|
||
text-align: left;
|
||
}
|
||
}
|
||
}
|
||
.bar-right {
|
||
.bar-no {
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: 700;
|
||
color: #fbc059;
|
||
}
|
||
img {
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-left: 5px;
|
||
}
|
||
}
|
||
}
|
||
.quest-list {
|
||
width: 100%;
|
||
height: 320px;
|
||
overflow-y: scroll;
|
||
overflow-x: hidden;
|
||
.partner {
|
||
display: flex;
|
||
height: 30px;
|
||
font-size: 14px;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
div:nth-child(1) {
|
||
width: 180px;
|
||
}
|
||
div:nth-child(2) {
|
||
width: 45px;
|
||
}
|
||
}
|
||
li:hover{
|
||
background-color: #27242e;
|
||
}
|
||
li .quest-item{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
min-height: 60px;
|
||
padding: 10px;
|
||
border-radius: 10px;
|
||
font-size: 14px;
|
||
margin-bottom: 10px;
|
||
box-sizing: border-box;
|
||
color: #fff;
|
||
cursor: pointer;
|
||
.content-right-left {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 240px;
|
||
.img-logo {
|
||
width: 40px;
|
||
height: 40px;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.desc {
|
||
max-width: 240px;
|
||
margin: 0 5px;
|
||
h3 {
|
||
text-align: left;
|
||
font-size: 14px;
|
||
font-family: 'Poppins-SemiBold';
|
||
}
|
||
p {
|
||
font-family: 'Poppins-Light';
|
||
font-size: 12px;
|
||
text-align: left;
|
||
}
|
||
}
|
||
}
|
||
.content-rewards-left {
|
||
display: flex;
|
||
align-items: left;
|
||
width: 180px;
|
||
.img-logo {
|
||
width: 40px;
|
||
height: 40px;
|
||
margin-right: 10px;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.desc {
|
||
max-width: 240px;
|
||
margin: 0 5px;
|
||
h3 {
|
||
text-align: left;
|
||
font-size: 14px;
|
||
font-family: 'Poppins-SemiBold';
|
||
}
|
||
p {
|
||
font-family: 'Poppins-Light';
|
||
font-size: 12px;
|
||
text-align: left;
|
||
}
|
||
}
|
||
}
|
||
.rewards {
|
||
width: 45px;
|
||
height: 40px;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.btn {
|
||
border-radius: 15px;
|
||
color: #000;
|
||
margin-right: 10px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
font-weight: normal;
|
||
.is-btn {
|
||
width: 80px;
|
||
height: 35px;
|
||
font-size: 12px;
|
||
.started {
|
||
width: 90px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50% , -50%);
|
||
background: #fec25d;
|
||
background: url('./../../assets/home/ButtonFollow.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
.claim {
|
||
width: 90px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50% , -50%);
|
||
background: url('./../../assets/home/Buttonclaim.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
.success {
|
||
width: 125px;
|
||
height: 65px;
|
||
line-height: 65px;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50% , -50%);
|
||
color: #fff;
|
||
background: #9950fd;
|
||
background: url('./../../assets/home/Button.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
img {
|
||
width: 12px;
|
||
height: 8px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.btn:hover{
|
||
color: deepskyblue;
|
||
}
|
||
}
|
||
}
|
||
.partner-list {
|
||
height: 380px;
|
||
line-height: 380px;
|
||
font-size: 54px;
|
||
font-family: "Anton-Regular";
|
||
font-weight: 700;
|
||
}
|
||
::v-deep .quest-list::-webkit-scrollbar {
|
||
width: 5px;
|
||
}
|
||
::v-deep .quest-list::-webkit-scrollbar-track{
|
||
background: #171220;
|
||
border-radius:2px;
|
||
}
|
||
::v-deep .quest-list::-webkit-scrollbar-corner{
|
||
display: block;
|
||
}
|
||
::v-deep .quest-list::-webkit-scrollbar-thumb{
|
||
height: 15px;
|
||
background: #9950fd;
|
||
border-radius:10px;
|
||
}
|
||
}
|
||
.tips {
|
||
margin-top: 10px;
|
||
font-size: 14px;
|
||
color: #fff;
|
||
}
|
||
}
|
||
.skip {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 20px;
|
||
.skip-left {
|
||
display: flex;
|
||
align-items: center;
|
||
.skip-icon {
|
||
width: 28px;
|
||
height: 28px;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.skip-desc {
|
||
margin-left: 10px;
|
||
p {
|
||
text-align: left;
|
||
font-size: 8px;
|
||
font-family: 'Poppins-Light';
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
.skip-right {
|
||
width: 100px;
|
||
height: 35px;
|
||
line-height:35px;
|
||
background: #2d2738;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
border-radius: 10px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.right-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin: 10px 50px 10px 0;
|
||
.right-header-left {
|
||
.right-header-nav {
|
||
width: 160px;
|
||
display: flex;
|
||
align-items: center;
|
||
li {
|
||
width: 40px;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
color: #fff;
|
||
background: #432967;
|
||
border-radius: 50%;
|
||
margin-right: 10px;
|
||
box-sizing: content-box;
|
||
cursor: pointer;
|
||
.nav-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
img {
|
||
width: 100px;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
.active {
|
||
background: #9950fd;
|
||
}
|
||
}
|
||
}
|
||
.right-header-right {
|
||
display: flex;
|
||
cursor: pointer;
|
||
.link {
|
||
width: 100px;
|
||
height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #2d2738;
|
||
border-radius: 20px;
|
||
margin-right: 20px;
|
||
li {
|
||
margin: 0 5px;
|
||
div {
|
||
width: 16px;
|
||
height: 15px;
|
||
text-align: center;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.wallet {
|
||
width: 120px;
|
||
height: 40px;
|
||
border-radius: 26px;
|
||
padding-left: 30px;
|
||
display: flex;
|
||
align-items: center;
|
||
background: #2d2738;
|
||
position: relative;
|
||
span {
|
||
color: #fff;
|
||
margin-right: 10px;
|
||
font-size: 16px;
|
||
}
|
||
.wallet-address {
|
||
font-size: 16px;
|
||
color: #fff;
|
||
}
|
||
.wallet-btn {
|
||
z-index: 999;
|
||
position: absolute;
|
||
top: -22px;
|
||
right: -40px;
|
||
width: 85px;
|
||
height: 85px;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.hover-show {
|
||
display: block;
|
||
}
|
||
.hover-none {
|
||
// display: none;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.nav-btm {
|
||
margin: 10px auto;
|
||
margin-bottom: 20px;
|
||
.nav {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
li {
|
||
width: 80px;
|
||
height: 80px;
|
||
line-height: 80px;
|
||
color: #fff;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
.nav-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
.active {
|
||
// background: #9950fd;
|
||
}
|
||
}
|
||
}
|
||
.sign-in-content {
|
||
height: 660px;
|
||
padding: 20px 10px;
|
||
background: url('./../../assets/home/Samengesteld.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
border-radius: 40px;
|
||
box-sizing: border-box;
|
||
.calen-content {
|
||
border-radius: 25px;
|
||
width: 360px;
|
||
padding-top: 10px;
|
||
margin: 0 auto;
|
||
.rewards {
|
||
margin-bottom: 20px;
|
||
color: #fff;
|
||
p {
|
||
font-size: 14px;
|
||
text-align: left;
|
||
margin: 20px 0;
|
||
}
|
||
.rewards-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-start;
|
||
margin: 10px auto;
|
||
li {
|
||
flex: 1;
|
||
height: 60px;
|
||
margin: 0 10px 10px 0;
|
||
width: calc((100% - 30px) /4);
|
||
min-width: calc((100% - 30px) / 4);
|
||
max-width: calc((100% - 30px) / 4);
|
||
font-size: 12px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
&:nth-child(4n) {
|
||
margin-right: 0;
|
||
}
|
||
.center {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
.top {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 22px;
|
||
img {
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
.btm {
|
||
margin-top: 5px;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
.state {
|
||
background: url('./../../assets/common/Box_achieved.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
.no-state {
|
||
background: url('./../../assets/common/Box.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
.yes-state {
|
||
background: url('./../../assets/common/Box9.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
.top {
|
||
color:#9950FD !important;
|
||
}
|
||
.btm {
|
||
color:#9950FD !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.check {
|
||
width: 360px;
|
||
margin: 20px auto;
|
||
margin-top: 40px;
|
||
background: #1e1b26;
|
||
border-radius: 25px;
|
||
padding: 10px 20px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.check-top {
|
||
|
||
// margin-bottom: 10px;
|
||
li {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 160px;
|
||
height: 35px;
|
||
// line-height: 35px;
|
||
background: #fec25d;
|
||
border-radius: 15px;
|
||
font-size: 14px;
|
||
color: #000;
|
||
cursor: pointer;
|
||
span {
|
||
display: inline-block;
|
||
margin-right: 10px;
|
||
color: #000;
|
||
}
|
||
img {
|
||
width: 15px;
|
||
height: 15px;
|
||
}
|
||
}
|
||
.check-yes {
|
||
width: 40px;
|
||
height: 40px;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
.check-btm {
|
||
width: 200px;
|
||
color: #fff;
|
||
p {
|
||
font-size: 14px;
|
||
text-align: left;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.content-box {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 30px 50px;
|
||
box-sizing: border-box;
|
||
color: #fff;
|
||
.box {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: url('./../../assets/common/bg_p3.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
border-radius: 98px;
|
||
.box-top {
|
||
width: 100%;
|
||
// height: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.left {
|
||
width: 70%;
|
||
.left-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20px 40px;
|
||
position: inherit;
|
||
z-index: 9;
|
||
.left-top-logo {
|
||
width: 200px;
|
||
height: 100px;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.left-top-points {
|
||
border-radius: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
.left-top-points-left {
|
||
// width: 140px;
|
||
display: flex;
|
||
height: 50px;
|
||
align-items: center;
|
||
background: url('@/assets/common/User-bar.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
padding-right: 30px;
|
||
li {
|
||
color: #fff;
|
||
padding: 10px 20px 5px 40px;
|
||
position: relative;
|
||
.hover-tips {
|
||
display: none;
|
||
position: absolute;
|
||
top: 35px;
|
||
right: 0px;
|
||
width: 240px;
|
||
height: 100px;
|
||
line-height: 90px;
|
||
background: url('@/assets/common/WL .png') no-repeat;
|
||
background-size: 100% 100%;
|
||
z-index: 1;
|
||
}
|
||
.top {
|
||
display: flex;
|
||
justify-content: end;
|
||
align-items: center;
|
||
font-weight: 600;
|
||
text-align: right;
|
||
span {
|
||
font-size: 16px;
|
||
}
|
||
.textCol1 {
|
||
color: #9950fd;
|
||
}
|
||
.textCol2 {
|
||
color: #fbc059;
|
||
}
|
||
.textCol3 {
|
||
color: #0095FF;
|
||
}
|
||
img {
|
||
width: 15px;
|
||
height: 15px;
|
||
margin-left: 5px;
|
||
}
|
||
}
|
||
.btm {
|
||
font-size: 14px;
|
||
color: #A8A5AC;
|
||
text-align: right;
|
||
}
|
||
&:hover {
|
||
.hover-tips {
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
li:nth-child(1) {
|
||
img {
|
||
width: 17px;
|
||
height: 11px;
|
||
}
|
||
}
|
||
li:nth-child(2) {
|
||
img {
|
||
width: 13px;
|
||
height: 13px;
|
||
}
|
||
&:hover {
|
||
.hover-tips {
|
||
display: block;
|
||
width: 300px;
|
||
}
|
||
}
|
||
}
|
||
li:nth-child(4) {
|
||
img {
|
||
width: 12px;
|
||
height: 16px;
|
||
}
|
||
}
|
||
.touxiang {
|
||
width: 60px;
|
||
height: 60px;
|
||
position: absolute;
|
||
top: 50%;
|
||
right: -20px;
|
||
transform: translateY(-50%);
|
||
div {
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
}
|
||
}
|
||
.left-top-points-right {
|
||
margin-left: 30px;
|
||
width: 60px;
|
||
height: 60px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.hover-tips {
|
||
display: none;
|
||
position: absolute;
|
||
top: 35px;
|
||
right: -60px;
|
||
width: 590px;
|
||
height: 120px;
|
||
line-height: 110px;
|
||
background: url('@/assets/common/WL .png') no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
&:hover {
|
||
.hover-tips {
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.right {
|
||
width: 28%;
|
||
padding: 20px 30px;
|
||
box-sizing: border-box;
|
||
.right-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin: 10px 50px 10px 0;
|
||
.right-header-left {
|
||
.right-header-nav {
|
||
width: 160px;
|
||
display: flex;
|
||
align-items: center;
|
||
li {
|
||
width: 40px;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
color: #fff;
|
||
background: #432967;
|
||
border-radius: 50%;
|
||
margin-right: 10px;
|
||
box-sizing: content-box;
|
||
cursor: pointer;
|
||
.nav-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
img {
|
||
width: 100px;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
.active {
|
||
background: #9950fd;
|
||
}
|
||
}
|
||
}
|
||
.right-header-right {
|
||
display: flex;
|
||
cursor: pointer;
|
||
.link {
|
||
width: 100px;
|
||
height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #2d2738;
|
||
border-radius: 20px;
|
||
margin-right: 20px;
|
||
li {
|
||
margin: 0 5px;
|
||
div {
|
||
width: 16px;
|
||
height: 15px;
|
||
text-align: center;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.wallet {
|
||
width: 120px;
|
||
height: 40px;
|
||
border-radius: 26px;
|
||
padding-left: 30px;
|
||
display: flex;
|
||
align-items: center;
|
||
background: #2d2738;
|
||
position: relative;
|
||
span {
|
||
color: #fff;
|
||
margin-right: 10px;
|
||
font-size: 16px;
|
||
}
|
||
.wallet-address {
|
||
font-size: 16px;
|
||
color: #fff;
|
||
}
|
||
.wallet-btn {
|
||
z-index: 999;
|
||
position: absolute;
|
||
top: -22px;
|
||
right: -40px;
|
||
width: 85px;
|
||
height: 85px;
|
||
.hover-show {
|
||
display: block;
|
||
}
|
||
.hover-none {
|
||
// display: none;
|
||
}
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.nav-btm {
|
||
// width: 380px;
|
||
margin: 10px auto;
|
||
margin-bottom: 0px;
|
||
.nav {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
li {
|
||
width: 80px;
|
||
height: 80px;
|
||
line-height: 80px;
|
||
color: #fff;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
.nav-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
.active {
|
||
// background: #9950fd;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.invite-dialog {
|
||
::v-deep .el-dialog {
|
||
width: 500px;
|
||
.el-dialog__header {
|
||
background: #4095e5;
|
||
}
|
||
.el-dialog__body {
|
||
background: #fff;
|
||
}
|
||
}
|
||
}
|
||
.wallet-dialog {
|
||
position: relative;
|
||
z-index: 9;
|
||
}
|
||
.help-dialog {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.light-btn{
|
||
background: #ffc35b;
|
||
color: #000;
|
||
padding: 5px 10px;
|
||
border-radius: 20px;
|
||
cursor: pointer;
|
||
}
|
||
.Explore-dialog {
|
||
|
||
}
|
||
}
|
||
</style> |