516 lines
15 KiB
Vue
516 lines
15 KiB
Vue
<template>
|
|
<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">{{ usesInviteCount }}</span>
|
|
<div>
|
|
<img src="./../../assets/common/Invites.png" alt />
|
|
</div>
|
|
</div>
|
|
<div class="btm">Invites</div>
|
|
<div class="hover-tips">Successful invitations</div>
|
|
</li>
|
|
<li>
|
|
<div class="top">
|
|
<span class="textCol3">{{ usesEnhanceCount }}</span>
|
|
<div>
|
|
<img src="./../../assets/common/Icon_Boosting.png" alt />
|
|
</div>
|
|
</div>
|
|
<div class="btm">Boosts</div>
|
|
<div class="hover-tips">Remaining Daily Boosts</div>
|
|
</li>
|
|
<li>
|
|
<div class="top">
|
|
<span class="textCol2">{{ todayStepTicket }}</span>
|
|
<div>
|
|
<img src="./../../assets/common/Icon_Explore.png" alt />
|
|
</div>
|
|
</div>
|
|
<div class="btm">Exploration</div>
|
|
<!-- <div class="hover-tips">Explorations Earned</div> -->
|
|
</li>
|
|
<li>
|
|
<div class="top">
|
|
<span class="textCol1">{{ usesPoints }}</span>
|
|
<div>
|
|
<img src="./../../assets/common/Icon_Points.png" alt />
|
|
</div>
|
|
</div>
|
|
<div class="btm">Points</div>
|
|
<!-- <div class="hover-tips">Explorations Earned</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">Partner NFT collection holders get extra 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="walletLogin">
|
|
<span v-if="!showAddress">Connect Wallet</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>
|
|
</template>
|
|
|
|
<script>
|
|
import { getToken } from "@/utils/cookies.js"
|
|
import { formatShowAddress } from "@/utils/utils.js";
|
|
import UserImg from "@/components/userImg.vue";
|
|
export default {
|
|
components: {
|
|
UserImg
|
|
},
|
|
props: {
|
|
todayStepTicket: Number,
|
|
myTwitterAvatar: String,
|
|
},
|
|
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"
|
|
}
|
|
],
|
|
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: 4,
|
|
name: 4,
|
|
imgSrc: require("./../../assets/common/P3-up.png"),
|
|
imgSrc1: require("./../../assets/common/P3.png")
|
|
},
|
|
{
|
|
id: 3,
|
|
name: 3,
|
|
imgSrc: require("./../../assets/common/P5-up.png"),
|
|
imgSrc1: require("./../../assets/common/P5.png"),
|
|
},
|
|
{
|
|
id: 5,
|
|
name: 5,
|
|
imgSrc: require("./../../assets/common/P4-up.png"),
|
|
imgSrc1: require("./../../assets/common/P4.png")
|
|
}
|
|
],
|
|
navIndex: 0,
|
|
token: "",
|
|
}
|
|
},
|
|
computed:{
|
|
showAddress() {
|
|
let address = this.$store.state.user.address;
|
|
return formatShowAddress(address);
|
|
},
|
|
usesPoints() {
|
|
return this.$store.state.user.userData?.scoreTotal || 0
|
|
},
|
|
usesEnhanceCount() {
|
|
return this.$store.state.user.userData?.enhanceCount || 0
|
|
},
|
|
usesInviteCount() {
|
|
return this.$store.state.user.userData?.inviteCount || 0
|
|
},
|
|
},
|
|
mounted() {
|
|
this.token = getToken()
|
|
},
|
|
methods: {
|
|
// nav 导航
|
|
navBtn(index) {
|
|
this.navIndex = index;
|
|
this.$emit('toNavBtn',index)
|
|
},
|
|
walletLogin() {
|
|
this.$emit('onWalletLogin')
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.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 {
|
|
display: flex;
|
|
height: 50px;
|
|
background: url('@/assets/common/User-bar.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
padding-right: 30px;
|
|
margin-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;
|
|
font-size: 14px;
|
|
background: url('@/assets/common/WL .png') no-repeat;
|
|
background-size: 100% 100%;
|
|
z-index: 1;
|
|
}
|
|
.top {
|
|
display: flex;
|
|
justify-content: end;
|
|
align-items: center;
|
|
height: 16px;
|
|
font-weight: 600;
|
|
text-align: right;
|
|
span {
|
|
font-size: 16px;
|
|
}
|
|
.textCol1 {
|
|
color: #9950fd;
|
|
}
|
|
.textCol2 {
|
|
color: #fbc059;
|
|
}
|
|
.textCol3 {
|
|
color: #0095ff;
|
|
}
|
|
div {
|
|
width: 17px;
|
|
height: 16px;
|
|
margin-left: 5px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
// img {
|
|
// width: 100%;
|
|
// height: 100%;
|
|
// }
|
|
}
|
|
}
|
|
.btm {
|
|
font-size: 16px;
|
|
color: #A8A5AC;
|
|
text-align: right;
|
|
}
|
|
}
|
|
li:nth-child(1) {
|
|
cursor: pointer;
|
|
img {
|
|
width: 17px;
|
|
height: 11px;
|
|
}
|
|
&:hover {
|
|
.hover-tips {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
li:nth-child(2) {
|
|
cursor: pointer;
|
|
img {
|
|
width: 13px;
|
|
height: 13px;
|
|
}
|
|
&:hover {
|
|
.hover-tips {
|
|
display: block;
|
|
width: 300px;
|
|
}
|
|
}
|
|
}
|
|
li:nth-child(3) {
|
|
.top {
|
|
div {
|
|
img {
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
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: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
.left-top-points-right {
|
|
margin-left: 40px;
|
|
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;
|
|
font-size: 14px;
|
|
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 {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 0 10px;
|
|
height: 40px;
|
|
a {
|
|
display: flex;
|
|
align-items: center;
|
|
div {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 16px;
|
|
height: 15px;
|
|
text-align: center;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.wallet {
|
|
width: 140px;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |