680 lines
16 KiB
Vue
680 lines
16 KiB
Vue
<template>
|
|
<div class="container">
|
|
<div class="content">
|
|
<div class="top">
|
|
<div class="account-btn">
|
|
<div class="icon-content">
|
|
<img
|
|
class="icon-img"
|
|
src="../../assets/mobile/portrait.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div class="text">{{ address }}</div>
|
|
</div>
|
|
<div class="twitter-btn">
|
|
<div class="icon-content">
|
|
<img
|
|
class="icon-img"
|
|
src="../../assets/mobile/twitter.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div class="text">@{{ twitter }}</div>
|
|
</div>
|
|
<div class="discard-btn">
|
|
<div class="icon-content">
|
|
<img
|
|
class="icon-img"
|
|
src="../../assets/mobile/discard.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div class="text">{{ discord }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="switch">
|
|
<div
|
|
v-for="(item, i) in tabbar"
|
|
:key="i"
|
|
@click="change(i)"
|
|
:class="currentIndex == i ? 'prebeta' : 'prebeta-default'"
|
|
>
|
|
{{ item.title }}
|
|
</div>
|
|
</div>
|
|
<div v-show="currentIndex == 0" class="list">
|
|
<div class="invititaion-code-title">
|
|
INVITATION CODE
|
|
<el-tooltip class="item" effect="dark" placement="bottom-start">
|
|
<div slot="content">
|
|
Invite other player<br />
|
|
to register by exlusive <br />code/link and <br />get Rally points
|
|
</div>
|
|
<img class="icon-img" src="../../assets/mobile/i-icon.png" alt="" />
|
|
</el-tooltip>
|
|
</div>
|
|
<div
|
|
class="invititaion-code tag-read"
|
|
v-clipboard:copy="cp_url"
|
|
v-clipboard:success="onCopy"
|
|
v-clipboard:error="onCopyError"
|
|
>
|
|
{{ userinfo.invite_code }}
|
|
<img class="icon-img" src="../../assets/mobile/copy.png" alt="" />
|
|
</div>
|
|
<div class="time-content">
|
|
<div class="date-time-title">BETA TEST COUNTDOWN</div>
|
|
<div class="date-time">
|
|
<div>
|
|
<div class="time-circular">{{ time.day || "" }}</div>
|
|
<div class="time-text">DAY(S)</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="time-circular">{{ time.hours }}</div>
|
|
<div class="time-text">HOUR</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="time-circular">{{ time.minutes }}</div>
|
|
<div class="time-text">MINUTE</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="time-circular">{{ time.seconds }}</div>
|
|
<div class="time-text">SECOND</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="points-list">
|
|
<div class="list-header">
|
|
<div class="rank">
|
|
<div class="clan-member-text">Rank</div>
|
|
<div class="rank-number">{{ userinfo.rank }}</div>
|
|
</div>
|
|
<div class="points">
|
|
<div class="clan-member-text">Rally Points</div>
|
|
<div class="rank-number">
|
|
{{ userinfo.point }}
|
|
<span class="number-img">
|
|
<el-tooltip
|
|
class="item"
|
|
effect="dark"
|
|
content="Earning Rally Points by:- Registration Success: 200 points- Direct Invitation: 200 points- Second Lv Invitation: 40 points"
|
|
placement="bottom-start"
|
|
><div slot="content">
|
|
Earning Rally Points <br />
|
|
by:- Registration Success: <br />200 points- Direct
|
|
<br />Invitation: 200 <br />
|
|
points- Second<br />
|
|
Lv Invitation: 40 points
|
|
</div>
|
|
<img
|
|
class="icon-img"
|
|
src="../../assets/mobile/i-icon.png"
|
|
alt=""
|
|
/> </el-tooltip
|
|
></span>
|
|
</div>
|
|
</div>
|
|
<div class="clan-member">
|
|
<div class="clan-member-text">CLAN MEMBER</div>
|
|
<div class="rank-number">
|
|
{{ userinfo.clan_member }}
|
|
<span class="number-img">
|
|
<el-tooltip
|
|
class="item"
|
|
effect="dark"
|
|
content=""
|
|
placement="bottom-start"
|
|
>
|
|
<div slot="content">
|
|
Total clan member <br />from direct invitation<br />
|
|
& second LV invitation
|
|
</div>
|
|
<img
|
|
class="icon-img"
|
|
src="../../assets/mobile/i-icon.png"
|
|
alt=""
|
|
/> </el-tooltip
|
|
></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="points-option">
|
|
<div class="date">Date</div>
|
|
<div class="operators">Operator</div>
|
|
<div class="event">Event</div>
|
|
<div class="points-text">Points</div>
|
|
</div>
|
|
<div class="data-list">
|
|
<div class="list-item" v-for="(item, i) in listevent" :key="i">
|
|
<div class="date">{{ item.create_time.slice(0, 10) }}</div>
|
|
<div class="operators">@{{ item.operator }}</div>
|
|
<div class="event">{{ list[item.event] }}</div>
|
|
<div class="points-text">{{ "+" + item.point }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="leaderboard-btn" @click="navigator">Leaderboard</div>
|
|
</div>
|
|
<div v-show="currentIndex == 1" class="info">Coming Soon</div>
|
|
</div>
|
|
<!-- <Footer class="footer"></Footer> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Footer from "../layout/Footer.vue";
|
|
import { AppModule } from "@/store/modules/app";
|
|
const CP_URL_BASE = "https://activity.cebg.games/?code=";
|
|
export default {
|
|
components: {
|
|
Footer,
|
|
},
|
|
data() {
|
|
return {
|
|
userinfo: {},
|
|
listevent: null,
|
|
currentIndex: 0,
|
|
list: [ "Registration", "Lv1 Invitation", "Lv2 Invitation" ],
|
|
account: "",
|
|
discord: "",
|
|
twitter: "",
|
|
cp_url: CP_URL_BASE,
|
|
address: "",
|
|
time: {},
|
|
endTime: 1668938400000,
|
|
flag: false,
|
|
tabbar: [
|
|
{
|
|
id: 0,
|
|
title: "CEBG PreBeta Points",
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "CEBG Beta info",
|
|
},
|
|
],
|
|
};
|
|
},
|
|
created() {
|
|
this.address = this.formatAddress(AppModule.account);
|
|
this.$axios
|
|
.post(process.env.VUE_APP_API_HOST + "/aa1/user_info", {
|
|
account: AppModule.account,
|
|
})
|
|
.then((res) => {
|
|
console.log("success", res.data);
|
|
this.userinfo = res.data;
|
|
this.discord = res.data.discord;
|
|
this.twitter = res.data.twitter;
|
|
this.cp_url = `${CP_URL_BASE}${this.userinfo.invite_code}`;
|
|
})
|
|
.catch((err) => {
|
|
console.error(err);
|
|
Message.error(err.response.data.msg);
|
|
});
|
|
this.$axios
|
|
.post(process.env.VUE_APP_API_HOST + "/aa1/list_event_log", {
|
|
account: AppModule.account,
|
|
})
|
|
.then((res) => {
|
|
console.log("success", res.data);
|
|
this.listevent = res.data.data;
|
|
})
|
|
.catch((err) => {
|
|
console.error(err);
|
|
Message.error(err.response.data.msg);
|
|
});
|
|
},
|
|
mounted() {
|
|
let time = setInterval(() => {
|
|
if (this.flag == true) {
|
|
clearInterval(time);
|
|
}
|
|
this.timeDown();
|
|
}, 500);
|
|
},
|
|
methods: {
|
|
formatAddress(address) {
|
|
console.log(address);
|
|
if (address.length >= 10) {
|
|
return (
|
|
address.substring(0, 6) +
|
|
"......" +
|
|
address.substring(address.length - 4)
|
|
);
|
|
} else if (address.length > 0 && address.length < 10) {
|
|
return address;
|
|
} else {
|
|
return "-";
|
|
}
|
|
},
|
|
|
|
navigator() {
|
|
this.$router.push("listdetails");
|
|
},
|
|
onCopy(e) {
|
|
this.$message({
|
|
message: "You just copied accountId",
|
|
type: "success",
|
|
duration: 5 * 1000,
|
|
});
|
|
},
|
|
|
|
onCopyError(e) {
|
|
this.$message({
|
|
message: "Failed to copy texts",
|
|
type: "error",
|
|
duration: 5 * 1000,
|
|
});
|
|
},
|
|
copy() {
|
|
document.execCommand("Copy"); // 执行浏览器复制命令
|
|
},
|
|
change(i) {
|
|
this.currentIndex = i;
|
|
},
|
|
timeDown() {
|
|
const endTime = this.endTime;
|
|
const nowTime = new Date();
|
|
let leftTime = parseInt((endTime - nowTime.getTime()) / 1000);
|
|
let d = parseInt(leftTime / (24 * 60 * 60));
|
|
let h = this.formate(parseInt((leftTime / (60 * 60)) % 24));
|
|
let m = this.formate(parseInt((leftTime / 60) % 60));
|
|
let s = this.formate(parseInt(leftTime % 60));
|
|
if (leftTime <= 0) {
|
|
this.flag = true;
|
|
this.$emit("time-end");
|
|
}
|
|
this.time = { day: d, hours: h, minutes: m, seconds: s };
|
|
},
|
|
formate(time) {
|
|
if (time >= 10) {
|
|
return time;
|
|
} else {
|
|
return `0${time}`;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.container {
|
|
position: relative;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: url(../../assets/mobile/bg-content.png);
|
|
background-size: 100% 100%;
|
|
margin-top: 4vh;
|
|
// padding-left: 3vw;
|
|
// padding-right: 3vw;
|
|
}
|
|
.content {
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
.top {
|
|
display: flex;
|
|
width: 92%;
|
|
margin: 0 auto;
|
|
margin-bottom: 3vh;
|
|
}
|
|
.account-btn,
|
|
.twitter-btn,
|
|
.discard-btn {
|
|
width: 28.5vw;
|
|
height: 3.88vh;
|
|
margin-right: 2.4vw;
|
|
background: #0d0d0d;
|
|
border: 1px solid rgba(208, 163, 110, 0.79);
|
|
border-radius: 42px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.text {
|
|
width: 60%;
|
|
font-size: 0.66rem;
|
|
font-family: "OPPOSans";
|
|
font-weight: normal;
|
|
color: #d7a972;
|
|
overflow: hidden !important;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.icon-content {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 12%;
|
|
// line-height: 1vh;
|
|
margin-right: 0.3rem;
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.icon-img {
|
|
width: 4vw;
|
|
}
|
|
.invititaion-code {
|
|
text-align: center;
|
|
font-size: 1.6rem;
|
|
font-family: "OPPOSans";
|
|
}
|
|
|
|
.switch {
|
|
width: 90vw;
|
|
display: flex;
|
|
margin-top: 5vh;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
background: #0d0d0d;
|
|
border-radius: 46px;
|
|
padding: 1.2vh 1.2vh 1.2vh 1.2vh;
|
|
.prebeta {
|
|
width: 50%;
|
|
height: 4.2vh;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
line-height: 4.2vh;
|
|
font-size: 0.85rem;
|
|
font-family: "OPPOSans";
|
|
font-weight: normal;
|
|
color: #ffffff;
|
|
background: linear-gradient(171deg, #775437, #f2c082);
|
|
border-radius: 33px;
|
|
}
|
|
.prebeta-default {
|
|
width: 50%;
|
|
height: 4.2vh;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
line-height: 4.2vh;
|
|
font-size: 0.85rem;
|
|
font-family: "OPPOSans";
|
|
font-weight: normal;
|
|
color: #cfa16c;
|
|
border-radius: 33px;
|
|
}
|
|
}
|
|
.date-time {
|
|
display: flex;
|
|
width: 92%;
|
|
margin: 0 auto;
|
|
justify-content: space-between;
|
|
background: #0c0c0c;
|
|
opacity: 0.6;
|
|
}
|
|
.time-circular {
|
|
width: 18vw;
|
|
height: 18vw;
|
|
font-size: 2.5rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #353535;
|
|
border-radius: 50%;
|
|
font-family: "OPPOSans";
|
|
font-weight: normal;
|
|
}
|
|
.invititaion-code-title {
|
|
font-size: 1.2rem;
|
|
font-family: "BigJohn";
|
|
font-weight: 400;
|
|
color: #cfa16c;
|
|
background: linear-gradient(171deg, #775437 0.1220703125%, #f2c082 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
margin-top: 3vh;
|
|
text-align: center;
|
|
}
|
|
.date-time-title {
|
|
font-size: 0.99rem;
|
|
font-family: "BigJohn";
|
|
font-weight: 400;
|
|
text-align: center;
|
|
color: #cfa16c;
|
|
margin-bottom: 1.2vh;
|
|
background: linear-gradient(171deg, #775437 0.1220703125%, #f2c082 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
.invititaion-code {
|
|
text-align: center;
|
|
margin-bottom: 3vh;
|
|
font-family: "OPPOSans";
|
|
font-weight: normal;
|
|
}
|
|
.time-content {
|
|
width: 85vw;
|
|
padding-top: 1.2vh;
|
|
padding-left: 3vw;
|
|
padding-right: 3vw;
|
|
padding-bottom: 2.2vh;
|
|
background: rgba(12, 12, 12, 1);
|
|
margin: 0 auto;
|
|
}
|
|
.time-text {
|
|
text-align: center;
|
|
margin-top: 2vw;
|
|
font-size: 0.85rem;
|
|
font-family: "OPPOSans";
|
|
font-weight: normal;
|
|
color: #fffefe;
|
|
}
|
|
|
|
.points-list {
|
|
width: 94%;
|
|
margin: 0 auto;
|
|
// height: 40vh;
|
|
margin-top: 2vh;
|
|
margin-bottom: 4vh;
|
|
border: 1px solid rgba(208, 163, 110, 0.79);
|
|
background: #0f0f0f;
|
|
.list-header {
|
|
display: flex;
|
|
margin-top: 1vh;
|
|
padding-left: 1.6vw;
|
|
padding-right: 1.6vw;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
.rank,
|
|
.points,
|
|
.clan-member {
|
|
border: 1px solid rgba(208, 163, 110, 0.79);
|
|
opacity: 0.6;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
.points-option {
|
|
display: flex;
|
|
margin-top: 2.6vw;
|
|
margin-bottom: 1.42vh;
|
|
padding-right: 1vw;
|
|
padding-left: 2vw;
|
|
}
|
|
.number-img {
|
|
position: absolute;
|
|
right: 0.8vw;
|
|
bottom: 0;
|
|
}
|
|
.operators {
|
|
font-size: 0.7rem;
|
|
font-family: "OPPOSans";
|
|
font-weight: normal;
|
|
color: #d7a972;
|
|
font-size: 0.7rem;
|
|
width: 47vw;
|
|
}
|
|
.date {
|
|
width: 30vw;
|
|
font-size: 0.7rem;
|
|
font-family: "OPPOSans";
|
|
font-weight: normal;
|
|
color: #d7a972;
|
|
}
|
|
.points-text {
|
|
font-size: 0.7rem;
|
|
font-family: "OPPOSans";
|
|
font-weight: normal;
|
|
text-align: right;
|
|
margin-right: 1vw;
|
|
color: #d7a972;
|
|
width: 9vw;
|
|
}
|
|
|
|
.event {
|
|
font-size: 0.7rem;
|
|
width: 38vw;
|
|
margin-left: 1vw;
|
|
font-size: 0.7rem;
|
|
font-family: "OPPOSans";
|
|
font-weight: normal;
|
|
color: #d7a972;
|
|
}
|
|
.rank {
|
|
width: 15%;
|
|
padding-right: 1vw;
|
|
padding-left: 1vw;
|
|
}
|
|
.points {
|
|
width: 45%;
|
|
}
|
|
.clan-member {
|
|
width: 32%;
|
|
}
|
|
.rank-number {
|
|
font-size: 1rem;
|
|
margin-bottom: 1vh;
|
|
}
|
|
.clan-member-text {
|
|
margin-top: 0.55vh;
|
|
font-size: 0.9rem;
|
|
padding-left: 0.1vw;
|
|
padding-right: 0.1vw;
|
|
font-family: "OPPOSans";
|
|
font-weight: normal;
|
|
color: #d7a972;
|
|
}
|
|
.list-item {
|
|
display: flex;
|
|
width: 97%;
|
|
margin: 0 auto;
|
|
padding-top: 0.7vh;
|
|
padding-bottom: 0.7vh;
|
|
border-bottom: 1px solid rgba(208, 163, 110, 0.79);
|
|
.date {
|
|
width: 21vw;
|
|
font-size: 0.46rem;
|
|
font-family: "OPPOSans";
|
|
font-weight: normal;
|
|
color: #ffffff;
|
|
}
|
|
.points-text {
|
|
font-size: 0.46rem;
|
|
font-family: "OPPOSans";
|
|
font-weight: normal;
|
|
text-align: right;
|
|
color: #ffffff;
|
|
width: 12vw;
|
|
}
|
|
|
|
.event {
|
|
width: 23vw;
|
|
font-size: 0.46rem;
|
|
font-family: "OPPOSans";
|
|
font-weight: normal;
|
|
color: #ffffff;
|
|
}
|
|
.operators {
|
|
font-size: 0.46rem;
|
|
font-family: "OPPOSans";
|
|
font-weight: normal;
|
|
color: #ffffff;
|
|
width: 34vw;
|
|
}
|
|
}
|
|
.leaderboard-btn {
|
|
width: 50vw;
|
|
margin: 0 auto;
|
|
height: 4.8vh;
|
|
text-align: center;
|
|
line-height: 4.8vh;
|
|
background: linear-gradient(165deg, #775437, #f2c082);
|
|
border-radius: 59px;
|
|
font-family: "BigJohn";
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
color: #fffefe;
|
|
}
|
|
.info {
|
|
height: calc(100vh - 4.8vh - 25vh);
|
|
font-size: 2rem;
|
|
text-align: center;
|
|
font-family: "BigJohn";
|
|
line-height: 35vh;
|
|
font-weight: 400;
|
|
color: #fffefe;
|
|
}
|
|
@media screen and (min-width: 992px) {
|
|
.icon-img {
|
|
width: 20px;
|
|
}
|
|
.icon-content img {
|
|
width: 70%;
|
|
}
|
|
}
|
|
.footer {
|
|
position: absolute;
|
|
bottom: 0;
|
|
}
|
|
@media (min-width: 1024px) {
|
|
.container {
|
|
height: auto;
|
|
}
|
|
.text {
|
|
font-size: 18px;
|
|
// text-align: center;
|
|
}
|
|
.account-btn,
|
|
.twitter-btn,
|
|
.discard-btn {
|
|
height: 3.88vw;
|
|
}
|
|
.switch .prebeta {
|
|
height: 4.2vw;
|
|
font-size: 18px;
|
|
line-height: 4.2vw;
|
|
}
|
|
.switch .prebeta-default {
|
|
height: 4.2vw;
|
|
font-size: 18px;
|
|
line-height: 4.2vw;
|
|
}
|
|
.time-circular {
|
|
font-size: 81px;
|
|
}
|
|
.invititaion-code-title {
|
|
font-size: 36px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.date-time-title {
|
|
font-size: 30px;
|
|
}
|
|
.invititaion-code {
|
|
font-size: 40px;
|
|
.icon-img {
|
|
width: 36px;
|
|
}
|
|
}
|
|
.leaderboard-btn {
|
|
height: 4.8vw;
|
|
line-height: 4.8vw;
|
|
font-size: 40px;
|
|
}
|
|
}
|
|
</style> |