2154 lines
66 KiB
Vue
2154 lines
66 KiB
Vue
<template>
|
||
<div class="zillionaire">
|
||
<div class="content" v-show="navIndex == 0 || navIndex == 1">
|
||
<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>
|
||
</li>
|
||
<li>
|
||
<div class="top">
|
||
<span class="textCol3">{{ myEnhanceCount }}</span>
|
||
<img src="./../../assets/common/Icon_Boosting.png" alt="">
|
||
</div>
|
||
<div class="btm">Boosting</div>
|
||
</li>
|
||
<!-- <li v-if="navIndex == 1"> -->
|
||
<li>
|
||
<div class="top">
|
||
<span class="textCol2">{{ todayStepTicket }}</span>
|
||
<img src="./../../assets/common/Icon_Explore.png" alt="">
|
||
</div>
|
||
<div class="btm">Exploration</div>
|
||
</li>
|
||
<li>
|
||
<div class="top">
|
||
<span class="textCol1">{{ myScoreTotal }}.000</span>
|
||
<img src="./../../assets/common/Icon_Points.png" alt="">
|
||
</div>
|
||
<div class="btm">Points</div>
|
||
</li>
|
||
</div>
|
||
<div class="left-top-points-right">
|
||
<img src="./../../assets/home/Nav bar_character.png" alt />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="left-title">
|
||
<div class="left-title-left" v-if="navIndex == 0">
|
||
<div>LOOMING FOG OF THE <img src="./../../assets/home/Icon_star.png" alt=""> UNKNOWN</div>
|
||
<p>Phase 1 Quest Log</p>
|
||
</div>
|
||
<div class="left-title-left" v-if="navIndex == 1">
|
||
<div>EXPLORE <img src="./../../assets/home/Icon_star.png" alt=""> AND EARN</div>
|
||
<p>
|
||
Phase 2 Exploration Missions
|
||
</p>
|
||
</div>
|
||
<div class="left-title-right">
|
||
<p>Invite friends to earn</p>
|
||
<p>more rewards</p>
|
||
<div class="copy-btn" @click="copyLink(userData.code)"><img src="./../../assets/common/Icon_Explore.png" alt=""> Copy referral code</div>
|
||
<div class="copy-see" @click="logDialogVisible = true">
|
||
See invites
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="explore">
|
||
<div class="explore-zill">
|
||
<gameView ref="stepId" :stepAmount="stepAmount" :getTotalUsed="getTotalUsed" @awardDialog="awardDialog1" />
|
||
</div>
|
||
<div class="explore-desc" v-if="navIndex == 0">
|
||
<div class="explore-desc-logo">
|
||
<img src="./../../assets/home/Icon_smile.png" alt="">
|
||
</div>
|
||
<h4>How it works</h4>
|
||
<div
|
||
class="desc"
|
||
>Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</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>
|
||
<span @click="decrease">-</span>
|
||
<span>{{ stepTicket }} Exploration</span>
|
||
<span @click="increase">+</span>
|
||
</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>
|
||
<div>
|
||
<img src="./../../assets/common/Icon_Disc.png" alt />
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div>
|
||
<img src="./../../assets/common/Icon_X.png" alt />
|
||
</div>
|
||
</li>
|
||
</div>
|
||
<div class="wallet" @click="onWalletLogin">
|
||
<span v-if="!token">X Connected</span>
|
||
<div
|
||
class="wallet-address"
|
||
v-else
|
||
>{{ showAddress }}</div>
|
||
<div class="wallet-btn">
|
||
<img class="hover-show" src="./../../assets/home/Connect Menu1.png" alt />
|
||
<img class="hover-none" src="./../../assets/home/Connect Menu2.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="content-right" v-if="navIndex == 0">
|
||
<div class="title">
|
||
<div class="title-left">
|
||
<div>My Quest Logbook</div>
|
||
</div>
|
||
</div>
|
||
<div class="quest">
|
||
<li v-for="(item, index) in activeList" :key="index">
|
||
<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="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>
|
||
</li>
|
||
</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 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="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>
|
||
<div class="rewards">
|
||
<p>Bonus Rewards</p>
|
||
<div 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="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>
|
||
</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>
|
||
<li v-if="gameStateData.todayStat == 9">
|
||
<span>Daily Check-in </span>+{{ gameStateData.todayTickets }}
|
||
<img src="./../../assets/home/check-yes.png" alt="">
|
||
</li>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content-box" v-show="navIndex == 2">
|
||
<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>
|
||
</li>
|
||
<li>
|
||
<div class="top">
|
||
<span class="textCol3">{{ myEnhanceCount }}</span>
|
||
<img src="./../../assets/common/Icon_Boosting.png" alt="">
|
||
</div>
|
||
<div class="btm">Boosting</div>
|
||
</li>
|
||
<!-- <li v-if="navIndex == 1"> -->
|
||
<li>
|
||
<div class="top">
|
||
<span class="textCol2">{{ todayStepTicket }}</span>
|
||
<img src="./../../assets/common/Icon_Explore.png" alt="">
|
||
</div>
|
||
<div class="btm">Exploration</div>
|
||
</li>
|
||
<li>
|
||
<div class="top">
|
||
<span class="textCol1">{{ myScoreTotal }}.000</span>
|
||
<img src="./../../assets/common/Icon_Points.png" alt="">
|
||
</div>
|
||
<div class="btm">Points</div>
|
||
</li>
|
||
</div>
|
||
<div class="left-top-points-right">
|
||
<img src="./../../assets/home/Nav bar_character.png" alt />
|
||
</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>
|
||
<div>
|
||
<img src="./../../assets/common/Icon_Disc.png" alt />
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div>
|
||
<img src="./../../assets/common/Icon_X.png" alt />
|
||
</div>
|
||
</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 class="hover-show" src="./../../assets/home/Connect Menu1.png" alt />
|
||
<img class="hover-none" src="./../../assets/home/Connect Menu2.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">
|
||
<BoxBtm @toExplore="toExplore" />
|
||
</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" />
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Calen from "./calenView.vue";
|
||
import BoxBtm from './boxBtm.vue'
|
||
// import ImgView from './../../components/imgView.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 { getToken } from '@/utils/cookies.js'
|
||
// import { getWalletAddress, isWalletConnected, linkWallet } from "@/wallet/index.js";
|
||
import {
|
||
apiBeginActivity,
|
||
apiCheckActivity,
|
||
apiTaskClaim,
|
||
apiCheckinClaim,
|
||
apiCheckinClaimSeq,
|
||
retweetTwitter,
|
||
<<<<<<< HEAD
|
||
=======
|
||
followTwitter,
|
||
joinDiscord,
|
||
apiProgress,
|
||
apiGameStat,
|
||
apiUsercheckin,
|
||
apiEnhanceBox,
|
||
>>>>>>> 3aa761d3efe489838fd7b40789aa211cffabad8a
|
||
} 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: {
|
||
Calen,
|
||
gameView,
|
||
WalletDialog,
|
||
BoxBtm,
|
||
CheckBtn,
|
||
AwardDialog,
|
||
HelpDialog,
|
||
LogDialog,
|
||
// ImgView,
|
||
},
|
||
computed: {
|
||
showAddress () {
|
||
let address = this.$store.state.user.address
|
||
return formatShowAddress(address)
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
activityData: {},
|
||
myScoreTotal: 0,
|
||
myInviteCount: 0,
|
||
myEnhanceCount: 0,
|
||
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/P3-up.png"),
|
||
imgSrc1: require("./../../assets/common/P3.png"),
|
||
},
|
||
{
|
||
id: 4,
|
||
name: 4,
|
||
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: 0, // 探索次数
|
||
inviteTableData: [],
|
||
ExploreDialogVisible: false,
|
||
awardData: {},
|
||
level1: [],
|
||
level2: [],
|
||
level3: [],
|
||
level4: [],
|
||
dialogTitle: '',
|
||
eventName: '',
|
||
logDialogVisible: false,
|
||
};
|
||
},
|
||
watch: {
|
||
activeList: {
|
||
handler(newVal) {
|
||
console.log(newVal, "监听");
|
||
},
|
||
deep: true
|
||
}
|
||
},
|
||
created() {
|
||
this.userData = JSON.parse(localStorage.getItem("userData"));
|
||
this.token = getToken();
|
||
this.$nextTick(() => {
|
||
if (this.$route.params.box) {
|
||
this.helpDialogVisible = true
|
||
console.log('this.$route.params.box+++++++++++++++++++++++++++++++++', this.$route.params.box)
|
||
}
|
||
console.log('this.$route.params.box----------------------------------', this.$route.params.box)
|
||
});
|
||
},
|
||
mounted() {
|
||
// this.userData = JSON.parse(localStorage.getItem("userData"));
|
||
// this.token = localStorage.getItem("token");
|
||
// this.$nextTick(() => {
|
||
this.getActivity();
|
||
// this.getUsercheckin()
|
||
// this.getCheckInit()
|
||
if(this.token) {
|
||
this.getActivity();
|
||
this.getProgress();
|
||
this.getGameStat();
|
||
this.myScoreTotal = this.userData.scoreTotal
|
||
this.myInviteCount = this.userData.inviteCount
|
||
this.myEnhanceCount = this.userData.enhanceCount
|
||
this.myAddress = localStorage.getItem("myAddress")
|
||
let walletName = localStorage.getItem("walletName")
|
||
if (walletName) {
|
||
linkWallet(walletName)
|
||
}
|
||
} else {
|
||
this.walletDialogVisible = true
|
||
}
|
||
},
|
||
methods: {
|
||
<<<<<<< HEAD
|
||
=======
|
||
async initData() {
|
||
await this.getActivity();
|
||
this.$store.dispatch('wallet/restore')
|
||
this.$store.dispatch('user/restore')
|
||
console.log(this.$store.state.wallet.walletName)
|
||
console.log(this.$store.state.user.token)
|
||
console.log(this.$store.state.user.address)
|
||
if (this.token) {
|
||
this.getProgress();
|
||
this.getGameStat();
|
||
this.getInvitesList()
|
||
this.myScoreTotal = this.userData.scoreTotal
|
||
this.myInviteCount = this.userData.inviteCount
|
||
this.myEnhanceCount = this.userData.enhanceCount
|
||
}
|
||
},
|
||
>>>>>>> 3aa761d3efe489838fd7b40789aa211cffabad8a
|
||
// 获取活动信息
|
||
async getActivity() {
|
||
await this.$axios
|
||
.get(`/api/activity/${this.activityId}`)
|
||
.then(res => {
|
||
// if (res.data.errcode == 0) {
|
||
this.activityName = res.data.data.name;
|
||
const actionTitles = {
|
||
TwitterConnect: "Connect",
|
||
TwitterFollow: "Follow",
|
||
TwitterRetweet: "Retweet",
|
||
<<<<<<< HEAD
|
||
=======
|
||
DiscordJoin: 'Join',
|
||
DiscordConnect: "Connect"
|
||
>>>>>>> 3aa761d3efe489838fd7b40789aa211cffabad8a
|
||
};
|
||
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
|
||
// }
|
||
})
|
||
.catch(err => {
|
||
console.info(err);
|
||
});
|
||
},
|
||
|
||
// 查看社交任务进度
|
||
async getProgress() {
|
||
await this.getActivity()
|
||
await this.$axios
|
||
.post(
|
||
"/api/tasks/progress",
|
||
{},
|
||
{ headers: { Authorization: `Bearer ${this.token}` } }
|
||
)
|
||
.then(res => {
|
||
for (let i = 0; i < res.data.data.length; i++) {
|
||
if (res.data.data[i].id == this.activeList[i].id)
|
||
this.$set(this.activeList[i], "status", res.data.data[i].status);
|
||
}
|
||
});
|
||
},
|
||
|
||
// 开始任务
|
||
async toPost(data) {
|
||
let res = await apiBeginActivity(data.id);
|
||
if(res.errcode == 0) {
|
||
this.getProgress()
|
||
// console.log("开始任务", res, data);
|
||
}
|
||
if (data.task == "TwitterConnect") {
|
||
this.loginTwitter(data.id);
|
||
} else if(data.task == "TwitterFollow") {
|
||
<<<<<<< HEAD
|
||
retweetTwitter(data.desc)
|
||
} else if(data.task == "TwitterRetweet") {
|
||
retweetTwitter(data.desc)
|
||
=======
|
||
followTwitter(data.cfg.account)
|
||
} else if(data.task == "TwitterRetweet") {
|
||
retweetTwitter(data.desc)
|
||
} else if(data.task == "DiscordJoin") {
|
||
joinDiscord(data.cfg.account)
|
||
} if (data.task == "DiscordConnect") {
|
||
this.loginDiscord()
|
||
>>>>>>> 3aa761d3efe489838fd7b40789aa211cffabad8a
|
||
}
|
||
},
|
||
// 手动检查任务
|
||
async toCheck() {
|
||
await this.getProgress()
|
||
},
|
||
// 检查任务状态
|
||
async getActivitrStatue(id) {
|
||
await apiCheckActivity(id);
|
||
await this.getProgress()
|
||
// console.log(res, "检查任务状态------------------");
|
||
},
|
||
loginTwitter() {
|
||
// const _address = "0x8c10Ae04BF525734eaC00d5F7c062567461c207F";
|
||
const clientId = "aG1Jdm1YX0NhSU9rYU5sM0xQeVI6MTpjaQ";
|
||
// const codeChallenge = crypto.randomUUID()
|
||
const codeChallenge = Date.now();
|
||
const address = this.$store.state.user.address;
|
||
// console.log('codeChallenge: ' + codeChallenge)
|
||
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
|
||
)}`;
|
||
location.href = url;
|
||
this.getActivitrStatue(data.id)
|
||
},
|
||
async loginDiscord() {
|
||
const _address = this.$store.state.user.address;
|
||
const codeChallenge = Date.now();
|
||
console.log(location.href);
|
||
const state = btoa(`${_address}|${codeChallenge}|${location.href}`);
|
||
console.log(state);
|
||
// 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}`;
|
||
console.log(url);
|
||
// 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.closed);
|
||
var timer = setInterval(function() {
|
||
if (newwin.closed) {
|
||
clearInterval(timer);
|
||
alert(newwin.closed, "window closed");
|
||
}
|
||
}, 10);
|
||
},
|
||
<<<<<<< HEAD
|
||
|
||
=======
|
||
>>>>>>> 3aa761d3efe489838fd7b40789aa211cffabad8a
|
||
// 领取任务奖励
|
||
async getTaskClaim(id) {
|
||
let address = this.$store.state.user.address;
|
||
if (!this.$store.state.wallet.connected || !address) {
|
||
this.walletDialogVisible = true
|
||
return
|
||
}
|
||
let storeageKey
|
||
try {
|
||
storeageKey = await sendToChain('task_claim', address, id)
|
||
} catch (err) {
|
||
this.$message.error(`error send chain request`)
|
||
return
|
||
}
|
||
let serTimeId = setInterval(async () => {
|
||
try {
|
||
let { errcode, errmsg, data } = await apiTaskClaim(id)
|
||
if (errcode) {
|
||
if (errcode === 12) {
|
||
// 已领取, 给个提示就可以了
|
||
this.$message.error(errmsg)
|
||
this.getActivitrStatue(id)
|
||
clearInterval(serTimeId)
|
||
} else if (errcode !== 14) {
|
||
// 状态不是等待链上确认的, 都提示错误
|
||
this.$message.error(errmsg)
|
||
clearInterval(serTimeId)
|
||
}
|
||
} else {
|
||
if(data?.status == 3) {
|
||
alert(`领取成功, 获得积分: ${data.score}`)
|
||
this.getActivitrStatue(id)
|
||
localStorage.removeItem(storeageKey)
|
||
clearInterval(serTimeId)
|
||
}
|
||
}
|
||
<<<<<<< HEAD
|
||
let serTimeId = setInterval(async () => {
|
||
try {
|
||
let { errcode, errmsg, data } = await apiTaskClaim(id)
|
||
if (errcode) {
|
||
if (errcode === 12) {
|
||
// 已领取, 给个提示就可以了
|
||
this.$message.error(errmsg)
|
||
this.getActivitrStatue(id)
|
||
clearInterval(serTimeId)
|
||
}
|
||
} else {
|
||
if(data?.status == 3) {
|
||
alert(`领取成功, 获得积分: ${data.score}`)
|
||
this.getActivitrStatue(id)
|
||
clearInterval(serTimeId)
|
||
}
|
||
}
|
||
} catch (err) {
|
||
this.$message.error(`claim task reward error: ${err}`)
|
||
}
|
||
|
||
}, 3000)
|
||
|
||
} else {
|
||
this.walletDialogVisible = true
|
||
=======
|
||
} catch (err) {
|
||
this.$message.error(`claim task reward error: ${err}`)
|
||
>>>>>>> 3aa761d3efe489838fd7b40789aa211cffabad8a
|
||
}
|
||
|
||
}, 3000)
|
||
|
||
},
|
||
|
||
// 探索状态
|
||
async getGameStat() {
|
||
let {errcode, data} = await apiGameStat()
|
||
if (!errcode) {
|
||
this.gameStateData = data;
|
||
this.todayStepTicket = data.ticket;
|
||
this.getTotalUsed = data.totalUsed
|
||
}
|
||
},
|
||
|
||
// 探索
|
||
async exploreCli(amount) {
|
||
this.$refs.stepId.stepBtn(this.getTotalUsed, amount)
|
||
},
|
||
|
||
// 探索奖励
|
||
awardDialog1(val) {
|
||
this.awardData = val
|
||
this.eventName = 'explore_event'
|
||
if(this.awardData.chest.length > 0) {
|
||
this.level1 = []
|
||
this.level2 = []
|
||
this.level3 = []
|
||
this.level4 = []
|
||
val.chest.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'
|
||
} else {
|
||
this.dialogTitle = 'Congratulations'
|
||
}
|
||
|
||
this.ExploreDialogVisible = true
|
||
},
|
||
|
||
// 宝箱助力奖励
|
||
helpAwardDialog(val) {
|
||
this.awardData = val
|
||
this.eventName = 'help_event'
|
||
this.dialogTitle = 'Got lucky and success full Boosting'
|
||
this.ExploreDialogVisible = true
|
||
},
|
||
|
||
// 关闭奖励弹窗
|
||
ExploreHandleClose() {
|
||
this.ExploreDialogVisible = false;
|
||
},
|
||
toComplete(val) {
|
||
this.navIndex = val
|
||
this.ExploreDialogVisible = false;
|
||
},
|
||
|
||
// 签到
|
||
async walletCheck() {
|
||
<<<<<<< HEAD
|
||
let address = localStorage.getItem("myAddress")
|
||
if(await isWalletConnected()) {
|
||
if(address) {
|
||
try{
|
||
let resChain = await sendDailyCheckIn(address);
|
||
if (resChain) {
|
||
let serTimeId = setInterval(async () => {
|
||
if(await this.getUsercheckin()) {
|
||
// ToDo
|
||
this.$message.success('success')
|
||
this.$refs.renewCheck.renewCheckInit()
|
||
this.getGameStat();
|
||
clearInterval(serTimeId)
|
||
}
|
||
}, 2000)
|
||
}
|
||
} catch(e) {
|
||
console.log(e)
|
||
this.$message.error(e.message)
|
||
}
|
||
} else {
|
||
this.walletDialogVisible = true
|
||
}
|
||
} else {
|
||
=======
|
||
let address = this.$store.state.user.address;
|
||
if (!this.$store.state.wallet.connected || !address) {
|
||
>>>>>>> 3aa761d3efe489838fd7b40789aa211cffabad8a
|
||
this.walletDialogVisible = true
|
||
return
|
||
}
|
||
let storeageKey
|
||
try {
|
||
storeageKey = await sendToChain('check', address, '')
|
||
} catch (err) {
|
||
this.$message.error(`error send chain request`)
|
||
return
|
||
}
|
||
let serTimeId = setInterval(async () => {
|
||
try {
|
||
let { errcode, errmsg, data } = await apiUsercheckin()
|
||
if (errcode) {
|
||
if (errcode === 12) {
|
||
// 已领取, 给个提示就可以了
|
||
this.$message.error(errmsg)
|
||
this.getGameStat();
|
||
clearInterval(serTimeId)
|
||
} else if (errcode !== 13) {
|
||
this.$message.error(errmsg)
|
||
clearInterval(serTimeId)
|
||
}
|
||
} else {
|
||
alert(`领取成功, 获得积分: ${data.score}`)
|
||
this.getGameStat();
|
||
localStorage.removeItem(storeageKey)
|
||
clearInterval(serTimeId)
|
||
}
|
||
} catch (err) {
|
||
this.$message.error(`claim task reward error: ${err}`)
|
||
}
|
||
}, 3000)
|
||
},
|
||
|
||
// 领取签到奖励
|
||
async claimSeqStat(day) {
|
||
// console.log(day)
|
||
// return
|
||
// ToDo
|
||
let res = await apiCheckinClaimSeq(day)
|
||
console.log(res)
|
||
this.getGameStat();
|
||
},
|
||
|
||
// 获取累计签到奖励
|
||
async getCheckClaim(days) {
|
||
let res = await apiCheckinClaim(days);
|
||
if (res.ticket) {
|
||
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('/api/user/checkin',{ },
|
||
{ headers: { Authorization: `Bearer ${this.token}` } })
|
||
// console.log(res.data.data,'检查签到并领取奖励')
|
||
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) {
|
||
alert(`助力成功, 获得积分: ${data.score}`)
|
||
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)
|
||
|
||
<<<<<<< HEAD
|
||
=======
|
||
},
|
||
// 获取路由宝箱助力
|
||
async helpBtn() {
|
||
if (this.$route.params.box != undefined) {
|
||
let boxCode = this.$route.params.box.split("box=");
|
||
let boxId = this.$route.params.boxId.split("id=");
|
||
if (boxCode[1] != "undefined") {
|
||
// 查询宝箱助力记录
|
||
this.getHelpBoxLog();
|
||
let boxState = await this.initBoxState(boxCode[1], boxId[1])
|
||
console.log('助力状态', boxState)
|
||
// 1、助力次数是否用完
|
||
if(bosState.userCurrent < bosState.userMax) {
|
||
// 2、宝箱助力次数是否上限
|
||
if(chestCurrent < chestMax) {
|
||
// 3、是否已经助力此宝箱
|
||
if(enhanced == 0) {
|
||
// 是否链接钱包
|
||
if(await isWalletConnected()) {
|
||
// 助力上链签名
|
||
let address = this.$store.state.wallet.address
|
||
let helpRes = await sendHelp(address, boxCode[1])
|
||
// 轮询是否助力成功
|
||
if(helpRes) {
|
||
let serTimeId = setInterval(async () => {
|
||
let res = await this.$axios.post(
|
||
"/api/chest/enhance",
|
||
{ code: boxCode[1] },
|
||
{ headers: { Authorization: `Bearer ${this.token}` } }
|
||
);
|
||
if (res.data.errcode == 0) {
|
||
this.helpAmount = res.data.data.score;
|
||
this.isHelpSuccess = true;
|
||
clearInterval(serTimeId)
|
||
}
|
||
}, 2000)
|
||
}
|
||
} else {
|
||
this.walletDialogVisible = true
|
||
}
|
||
} else {
|
||
this.$message.error('Already helped this treasure chest')
|
||
}
|
||
} else {
|
||
this.$message.error('The number of treasure chest boosts has been capped')
|
||
}
|
||
} else {
|
||
this.$message.error('The number of assists for the day has been capped')
|
||
}
|
||
|
||
|
||
|
||
return
|
||
if(await isWalletConnected()) {
|
||
// let address = localStorage.getItem('myAddress')
|
||
// let helpRes = await sendHelp(address, boxCode[1])
|
||
|
||
this.helpDialogVisible = true;
|
||
this.getHelpBoxLog();
|
||
let res = await this.$axios.post(
|
||
"/api/chest/enhance",
|
||
{ code: boxCode[1] },
|
||
{ headers: { Authorization: `Bearer ${this.token}` } }
|
||
);
|
||
if (res.data.errcode == 0) {
|
||
this.helpAmount = res.data.data.score;
|
||
// this.helpAmount = 10
|
||
this.isHelpSuccess = true;
|
||
} else {
|
||
this.$message.error(res.data.errmsg, "--");
|
||
}
|
||
} else {
|
||
this.walletDialogVisible = true
|
||
}
|
||
}
|
||
}
|
||
},
|
||
|
||
// 助力状态查询
|
||
async initBoxState(code,chestId) {
|
||
let res = await this.$axios.post('/api/chest/enhance/state',{code: code, chestId: chestId, },{headers: { Authorization: `Bearer ${this.token}` }})
|
||
return res.data.data
|
||
},
|
||
|
||
// 领取助力奖励 || 判断是否是新用户
|
||
async helpConfirm() {
|
||
if(this.$route.params.name != undefined) {
|
||
let newInvite = this.$route.params.name.split("new=");
|
||
let rtoken = await checkReCaptcha("invite_user");
|
||
let res = await this.$axios.get("/api/activity/upload_invite_code", {
|
||
params: { code: newInvite[1], rtoken: rtoken },
|
||
headers: { Authorization: `Bearer ${this.token}` }
|
||
});
|
||
if (res.data.errcode == 0) {
|
||
this.isHelpSuccess = false;
|
||
this.isHelpBox = true;
|
||
} else {
|
||
this.helpDialogVisible = false;
|
||
this.isHelpSuccess = false;
|
||
}
|
||
}
|
||
},
|
||
|
||
// 获取帮助的宝箱助力记录
|
||
async getHelpBoxLog() {
|
||
if (this.$route.params.boxId != undefined) {
|
||
let rtoken = await checkReCaptcha("chest_share");
|
||
console.log(this.$route.params.boxId, "this.$route.params.boxId");
|
||
let boxId = this.$route.params.boxId.split("id=");
|
||
let res = await this.$axios.post(
|
||
"/api/chest/enhance/list",
|
||
{ chestid: boxId[1], rtoken: rtoken },
|
||
{
|
||
headers: { Authorization: `Bearer ${this.token}` }
|
||
}
|
||
);
|
||
if (res.data.errcode == 0) {
|
||
this.helpLogList = res.data.data;
|
||
}
|
||
} else {
|
||
return;
|
||
}
|
||
},
|
||
|
||
>>>>>>> 3aa761d3efe489838fd7b40789aa211cffabad8a
|
||
// 关闭助力弹窗
|
||
helpHandleClose() {
|
||
this.helpDialogVisible = false;
|
||
},
|
||
|
||
// 关闭我的邀请列表弹窗
|
||
logHandleClose() {
|
||
this.logDialogVisible = false;
|
||
},
|
||
|
||
// 复制链接
|
||
copyLink(text) {
|
||
let url = `http://192.168.100.216:8030/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");
|
||
},
|
||
|
||
// nav 导航
|
||
navBtn(index) {
|
||
if(index == 3) {
|
||
this.navIndex = 2
|
||
} else {
|
||
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: 68%;
|
||
// height: 100%;
|
||
border-radius: 50px;
|
||
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 {
|
||
background: #2d2738;
|
||
border-radius: 15px;
|
||
position: relative;
|
||
.left-top-points-left {
|
||
// width: 140px;
|
||
display: flex;
|
||
padding-right: 30px;
|
||
li {
|
||
color: #fff;
|
||
padding: 5px 20px 5px 40px;
|
||
.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;
|
||
}
|
||
}
|
||
li:nth-child(1) {
|
||
img {
|
||
width: 17px;
|
||
height: 11px;
|
||
}
|
||
}
|
||
li:nth-child(2) {
|
||
img {
|
||
width: 13px;
|
||
height: 13px;
|
||
}
|
||
}
|
||
li:nth-child(4) {
|
||
img {
|
||
width: 10px;
|
||
height: 12px;
|
||
}
|
||
}
|
||
}
|
||
.left-top-points-right {
|
||
position: absolute;
|
||
top: 50%;
|
||
right: -20px;
|
||
transform: translateY(-50%);
|
||
width: 60px;
|
||
height: 60px;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.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%;
|
||
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;
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
.explore {
|
||
// position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
.explore-zill {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 820px;
|
||
height: 850px;
|
||
div {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.explore-desc {
|
||
position: absolute;
|
||
left: 30px;
|
||
bottom: 80px;
|
||
padding: 45px 40px;
|
||
width: 310px;
|
||
background: url('./../../assets/home/box.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
border-radius: 20px;
|
||
color: #fff;
|
||
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;
|
||
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-evenly;
|
||
margin: 10px auto;
|
||
padding: 10px 20px;
|
||
border-radius: 30px;
|
||
// background: #1f1c27;
|
||
background: url('./../../assets/home/select button.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
span {
|
||
color: #fff;
|
||
}
|
||
span:nth-child(1) {
|
||
font-size: 30px;
|
||
cursor: pointer;
|
||
}
|
||
span:nth-child(3) {
|
||
font-size: 30px;
|
||
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: 50px;
|
||
// 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;
|
||
li {
|
||
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;
|
||
.content-right-left {
|
||
display: flex;
|
||
align-items: center;
|
||
.img-logo {
|
||
width: 40px;
|
||
height: 40px;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.score {
|
||
margin-left: 10px;
|
||
}
|
||
.desc {
|
||
max-width: 260px;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
.btn {
|
||
border-radius: 15px;
|
||
color: #000;
|
||
cursor: pointer;
|
||
position: relative;
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.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-bottom: 10px;
|
||
margin-top: 10px;
|
||
.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 {
|
||
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;
|
||
cursor: pointer;
|
||
span {
|
||
display: inline-block;
|
||
margin-right: 10px;
|
||
}
|
||
img {
|
||
width: 15px;
|
||
height: 15px;
|
||
}
|
||
}
|
||
}
|
||
.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/Right_box.png') no-repeat;
|
||
background-size: 100%;
|
||
.box-top {
|
||
width: 100%;
|
||
// height: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.left {
|
||
.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 {
|
||
background: #2d2738;
|
||
border-radius: 15px;
|
||
position: relative;
|
||
.left-top-points-left {
|
||
// width: 140px;
|
||
display: flex;
|
||
padding-right: 30px;
|
||
li {
|
||
color: #fff;
|
||
padding: 5px 20px 5px 40px;
|
||
.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;
|
||
}
|
||
}
|
||
li:nth-child(1) {
|
||
img {
|
||
width: 17px;
|
||
height: 11px;
|
||
}
|
||
}
|
||
li:nth-child(2) {
|
||
img {
|
||
width: 13px;
|
||
height: 13px;
|
||
}
|
||
}
|
||
li:nth-child(4) {
|
||
img {
|
||
width: 10px;
|
||
height: 12px;
|
||
}
|
||
}
|
||
}
|
||
.left-top-points-right {
|
||
position: absolute;
|
||
top: 50%;
|
||
right: -20px;
|
||
transform: translateY(-50%);
|
||
width: 60px;
|
||
height: 60px;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.right {
|
||
padding: 20px 30px;
|
||
.right-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 10px;
|
||
margin-top: 10px;
|
||
.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 {
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.box-btm {
|
||
}
|
||
}
|
||
}
|
||
.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{
|
||
cursor: pointer;
|
||
}
|
||
.Explore-dialog {
|
||
|
||
}
|
||
}
|
||
</style> |