1226 lines
35 KiB
Vue
1226 lines
35 KiB
Vue
<template>
|
|
<div class="box-content">
|
|
<div class="box-btm-left">
|
|
<div class="box-page">
|
|
<div class="box-title">
|
|
<div class="box-title-top">Boost Records</div>
|
|
<div class="line"></div>
|
|
</div>
|
|
<div
|
|
class="box-boosting-no"
|
|
v-if="boostingList.length == undefined || boostingList.length <= 0"
|
|
>
|
|
<div>
|
|
<p>None</p>
|
|
</div>
|
|
</div>
|
|
<div class="box-boosting" v-else>
|
|
<li v-for="(item, index) in boostingList" :key="index">
|
|
<div class="left">
|
|
<div class="user-img" v-if="index == 0">
|
|
<img class="one-bg" src="./../../assets/common/Picture frame.png" alt />
|
|
<img class="one-img" v-if="item.avatar != ''" :src="item.avatar" alt />
|
|
<img class="one-img" v-else src="./../../assets/common/head_default.jpg" alt />
|
|
</div>
|
|
<div class="user-img" v-else>
|
|
<img v-if="item.avatar != ''" :src="item.avatar" alt />
|
|
<img v-else src="./../../assets/common/head_default.jpg" alt />
|
|
</div>
|
|
<div class="user-name">{{ item.nickname }}</div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="records">{{ item.score }}</div>
|
|
<div class="icon">
|
|
<img src="./../../assets/common/Icon_Points.png" alt />
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</div>
|
|
</div>
|
|
<div class="box-log">
|
|
<div class="btn" @click="recordsDialogVisible = true">
|
|
<div class="icon">
|
|
<img src="./../../assets/box/Icon_history.png" alt />
|
|
</div>
|
|
<div>Historical Records</div>
|
|
</div>
|
|
<div class="btn" @click="boostingDialogVisible = true">
|
|
<div class="icon">
|
|
<img src="./../../assets/box/Icon_boost.png" alt />
|
|
</div>
|
|
<div>Boost Records</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="box-btm-con">
|
|
<div class="videoContainer" v-if="boxData">
|
|
<video class="fullscreenVideo" id="bgVid" playsinline autoplay muted loop :src="require(`@/assets/video/chest_bg_${videoKey}.mp4`)">
|
|
</video>
|
|
</div>
|
|
<div class="content-no" v-if="!boxData">
|
|
<div class="box-img-no">
|
|
<img src="./../../assets/box/Unlock .png" alt />
|
|
</div>
|
|
<div class="box-to-explore">
|
|
<p>Earn Chests by Exploring</p>
|
|
<div class="to-explore-btn" @click="toExplore">Explore Now</div>
|
|
</div>
|
|
</div>
|
|
<div class="content" v-else>
|
|
<div class="box-btm-con-title">
|
|
<div class="box-btm-con-title-top">
|
|
<div class="icon">
|
|
<img src="./../../assets/box/Icon_Star_01.png" alt />
|
|
</div>
|
|
<div class="bonus">
|
|
<div>BONUS</div>
|
|
<div>
|
|
<span>+{{boxData.scoreBonus}}</span>
|
|
<img src="@/assets/common/Point_icon_b.png" alt />
|
|
</div>
|
|
</div>
|
|
<div class="icon">
|
|
<img src="./../../assets/box/Icon_Star_01.png" alt />
|
|
</div>
|
|
</div>
|
|
<div class="box-btm-con-title-btm">
|
|
<span v-if="boxData.level == 1">COMMON</span>
|
|
<span v-else-if="boxData.level == 2">RARE</span>
|
|
<span v-else-if="boxData.level == 3">MYTHICAL</span>
|
|
<span v-else-if="boxData.level == 4">LEGENDARY</span>
|
|
</div>
|
|
</div>
|
|
<div class="box-btm-con-img">
|
|
<div>
|
|
<img v-if="!boxData.level" src="./../../assets/box/Unlock .png" alt />
|
|
<img v-else :src="require(`./../../assets/box/box0${boxData.level}.png`)" alt />
|
|
</div>
|
|
</div>
|
|
<div class="box-btm-con-boost">
|
|
<div class="boost">
|
|
<p>Invite others to boost your chest for better rewards.</p>
|
|
<div class="copy-btn" @click="antiShake(boxData)">
|
|
<div class="icon">
|
|
<img src="@/assets/box/Invite_icon.png" alt />
|
|
</div>
|
|
<div class="copy-text">Copy Chest Link</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="box-btm-con-btn">
|
|
<div class="box-btn-content">
|
|
<div class="box-btm-con-btn-bar">
|
|
<div class="bar" :style="{width: filteredBoxBar+'%'}" ref="pendingBg"></div>
|
|
<div
|
|
class="amount"
|
|
v-if="(boxData.bounsCount < boxData.maxBounsCount)"
|
|
>{{ boxData.bounsCount }}/{{ boxData.maxBounsCount }}</div>
|
|
<div class="max" v-else>MAX</div>
|
|
</div>
|
|
<div class="box-btm-con-btn-tips">* Opening treasure will consume a small amount of gas</div>
|
|
<div class="box-btn" @click="openBoxToChain(boxData.id)">Open</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="box-btm-right">
|
|
<div class="box-page">
|
|
<div class="box-title">
|
|
<div class="box-title-top">My Inventory</div>
|
|
<div class="box-title-btm"></div>
|
|
</div>
|
|
<div
|
|
class="box-list-no"
|
|
v-if="currentPageItems.length == undefined || currentPageItems.length <= 0"
|
|
>
|
|
<div>
|
|
<p>None</p>
|
|
</div>
|
|
</div>
|
|
<div class="box-list" v-else>
|
|
<li v-for="(item, index) in currentPageItems" :key="index" @click="getBoxData(item)">
|
|
<div class="box-img" v-if="item.id == boxData.id">
|
|
<img :src="require(`./../../assets/box/box${item.level}.png`)" alt />
|
|
</div>
|
|
<div class="box-img" v-else>
|
|
<img
|
|
class="box-hover-no"
|
|
:src="require(`./../../assets/box/box0${item.level}.png`)"
|
|
alt
|
|
/>
|
|
<img
|
|
class="box-hover-yes"
|
|
:src="require(`./../../assets/box/box${item.level}.png`)"
|
|
alt
|
|
/>
|
|
</div>
|
|
<div class="box-bg"></div>
|
|
<div class="box-name">
|
|
Boosting
|
|
<span
|
|
v-if="item.bounsCount == item.maxBounsCount"
|
|
class="success"
|
|
>({{ item.bounsCount }}/{{ item.maxBounsCount }})</span>
|
|
<span v-else>({{ item.bounsCount }}/{{ item.maxBounsCount }})</span>
|
|
</div>
|
|
</li>
|
|
</div>
|
|
<div class="box-pagination" v-if="boxList.length > 6">
|
|
<Pagination @onChangePage="onChangePage" :currentPage="currentPage" :total="boxList.length" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 开箱子记录 -->
|
|
<el-dialog
|
|
class="records-dialog"
|
|
:visible="recordsDialogVisible"
|
|
:modal="false"
|
|
:before-close="recordsHandleClose"
|
|
:show-close="false"
|
|
>
|
|
<div class="top">
|
|
<div class="top-title">Historical Records</div>
|
|
<div class="top-close" @click="recordsDialogVisible = false">
|
|
<img src="./../../assets/common/CloseButton.png" alt />
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<el-table :data="recordsCurrentPageItems">
|
|
<template slot="empty">
|
|
<div>No Data</div>
|
|
</template>
|
|
<el-table-column prop="rank" label="Action">Open the Treasure</el-table-column>
|
|
<el-table-column label="Time">
|
|
<template slot-scope="scope">{{ scope.row.time | formatDate }}</template>
|
|
</el-table-column>
|
|
<!-- <el-table-column label="Username" :width="180">
|
|
<template
|
|
slot-scope="scope"
|
|
>{{ scope.row.address.slice(0,4) }}{{ '……'+scope.row.username }}</template>
|
|
</el-table-column>-->
|
|
<el-table-column label="Rewards">
|
|
<template slot-scope="{ row }">
|
|
<div v-if="row.score" class="points">
|
|
<div>
|
|
<span>{{ row.score }}</span>
|
|
<img src="./../../assets/common/Icon_Points.png" alt />
|
|
</div>
|
|
<div v-if="row.items !== undefined && row.items.length > 0">
|
|
<span v-if="row.items[0].name == 'NFT'">Founder's Tag</span>
|
|
<span v-else>{{ row.items[0].name }}</span>
|
|
<img v-if="row.items[0].name == 'NFT'" src="./../../assets/common/common_icon_NFT.png" alt />
|
|
<img v-else src="./../../assets/common/wallet-yes.png" alt />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="btm">
|
|
<PaginationDialog
|
|
@onChangePage="onRecordsChangePage"
|
|
:pageSize="recordsPageSize"
|
|
:total="recordsList.length"
|
|
/>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
<!-- 我的助力记录 -->
|
|
<el-dialog
|
|
class="boosting-dialog"
|
|
:visible="boostingDialogVisible"
|
|
:modal="false"
|
|
:before-close="boostingHandleClose"
|
|
:show-close="false"
|
|
>
|
|
<div class="top">
|
|
<div class="top-title">Boosting Records</div>
|
|
<div class="top-close" @click="boostingDialogVisible = false">
|
|
<img src="./../../assets/common/CloseButton.png" alt />
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<el-table :data="boostingCurrentPageItems">
|
|
<template slot="empty">
|
|
<div>No Data</div>
|
|
</template>
|
|
<el-table-column label="Time">
|
|
<template slot-scope="scope">{{ scope.row.time | formatDate }}</template>
|
|
</el-table-column>
|
|
<el-table-column label="Username">
|
|
<template slot-scope="scope">
|
|
<div class="touxiang">
|
|
<UserImg class="userImg" :imgSrc="scope.row.avatar" />
|
|
<span>{{ scope.row.nickname }}</span>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="Points">
|
|
<template slot-scope="scope">
|
|
<div class="points">
|
|
<span>{{ scope.row.score }}</span>
|
|
<img src="./../../assets/common/Icon_Points.png" alt />
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="btm">
|
|
<PaginationDialog
|
|
@onChangePage="onBoostingChangePage"
|
|
:pageSize="boostingPageSize"
|
|
:total="myRecordsList.length"
|
|
/>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
<Loading v-if="isLoading" :Loading="isLoading" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getToken } from "./../../utils/cookies.js";
|
|
import Pagination from "./../../components/pagination.vue";
|
|
import { sendOpenChest, sendToChain } from "./../../utils/chainapi.js";
|
|
import { apiBoxOpen, endActivity } from "@/utils/webapi.js";
|
|
import PaginationDialog from "@/components/paginationDialog.vue";
|
|
import Loading from "@/components/loading.vue";
|
|
import UserImg from "@/components/userImg.vue";
|
|
import { debounce, throttle } from "@/utils/debounce.js";
|
|
|
|
export default {
|
|
components: {
|
|
Pagination,
|
|
PaginationDialog,
|
|
Loading,
|
|
UserImg
|
|
},
|
|
props: {
|
|
activityData: Object,
|
|
},
|
|
data() {
|
|
return {
|
|
token: null,
|
|
boxList: [],
|
|
pageBoxList: [],
|
|
boxData: {},
|
|
userData: {},
|
|
boostingList: [],
|
|
pageSize: 6,
|
|
currentPage: 1,
|
|
recordsDialogVisible: false,
|
|
recordsList: [],
|
|
recordsPageSize: 8,
|
|
recordsCurrentPage: 1,
|
|
boostingDialogVisible: false,
|
|
myRecordsList: [],
|
|
boostingPageSize: 6,
|
|
boostingCurrentPage: 1,
|
|
isLoading: false,
|
|
originalNumber: 5,
|
|
divisor: 1,
|
|
};
|
|
},
|
|
computed: {
|
|
// 计算当前页应该显示的数据
|
|
currentPageItems() {
|
|
// if(this.pageBoxList.length == 0){
|
|
// return this.pageBoxList
|
|
// }
|
|
let start = (this.currentPage - 1) * this.pageSize;
|
|
let end = start + this.pageSize;
|
|
this.pageBoxList = this.boxList.slice(start, end);
|
|
this.boxData = this.pageBoxList[0];
|
|
return this.pageBoxList;
|
|
},
|
|
|
|
// 计算开箱子分页
|
|
recordsCurrentPageItems() {
|
|
// if(this.recordsList.length == 0){
|
|
// return this.recordsList
|
|
// }
|
|
let start = (this.recordsCurrentPage - 1) * this.recordsPageSize;
|
|
let end = start + this.recordsPageSize;
|
|
return this.recordsList.slice(start, end);
|
|
},
|
|
|
|
// 计算我的助力分页
|
|
boostingCurrentPageItems() {
|
|
if (this.myRecordsList.length == 0) {
|
|
return this.myRecordsList;
|
|
}
|
|
let start = (this.boostingCurrentPage - 1) * this.boostingPageSize;
|
|
let end = start + this.boostingPageSize;
|
|
return this.myRecordsList.slice(start, end);
|
|
},
|
|
|
|
// 助力进度条
|
|
filteredBoxBar() {
|
|
if (this.boxData.bounsCount) {
|
|
return Math.floor(
|
|
(Number(this.boxData.bounsCount) /
|
|
Number(this.boxData.maxBounsCount)) *
|
|
100
|
|
);
|
|
} else {
|
|
return 0;
|
|
}
|
|
},
|
|
videoKey() {
|
|
if(this.filteredBoxBar <= 20) {
|
|
return 1
|
|
} else if(this.filteredBoxBar <= 40) {
|
|
return 2
|
|
} else if(this.filteredBoxBar <= 60) {
|
|
return 3
|
|
} else if(this.filteredBoxBar <= 80) {
|
|
return 4
|
|
} else {
|
|
return 5
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
this.token = getToken();
|
|
if (this.token) {
|
|
this.$nextTick(() => {
|
|
this.getMyBoxList();
|
|
this.openBoxLog();
|
|
this.getMyHistoricalLog();
|
|
});
|
|
}
|
|
},
|
|
methods: {
|
|
// 我的宝箱
|
|
async getMyBoxList() {
|
|
let res = await this.$axios.get(
|
|
process.env.VUE_APP_API_URL + "/api/chest/list",
|
|
{
|
|
params: {},
|
|
headers: { Authorization: `Bearer ${this.token}` }
|
|
}
|
|
);
|
|
this.boxList = res.data.data;
|
|
this.boxData = this.currentPageItems[0];
|
|
if (this.boxList !== undefined && this.boxList.length > 0) {
|
|
await this.getHistorical(this.boxData.id);
|
|
}
|
|
},
|
|
|
|
// 分页
|
|
onChangePage(val) {
|
|
this.currentPage = val;
|
|
this.getMyBoxList()
|
|
},
|
|
|
|
// 修改中间宝箱数据
|
|
async getBoxData(data) {
|
|
this.boxData = data;
|
|
await this.getHistorical(data.id);
|
|
this.filteredBoxBar;
|
|
},
|
|
// 助力记录
|
|
async getHistorical(id) {
|
|
let res = await this.$axios.post(
|
|
process.env.VUE_APP_API_URL + "/api/chest/enhance/list",
|
|
{ chestid: id },
|
|
{
|
|
headers: { Authorization: `Bearer ${this.token}` }
|
|
}
|
|
);
|
|
// this.boostingList = []
|
|
if (res.data.errcode == 0) {
|
|
this.boostingList = res.data.data;
|
|
}
|
|
},
|
|
|
|
// 开宝箱
|
|
async openBoxToChain(id) {
|
|
if(endActivity(this.activityData.endTime)) {
|
|
this.$showErr('activity is end')
|
|
} else {
|
|
let address = this.$store.state.user.address;
|
|
if (!this.$store.state.wallet.connected || !address) {
|
|
throw new Error("wallet not connected");
|
|
}
|
|
let storeageKey;
|
|
this.isLoading = true;
|
|
try {
|
|
storeageKey = await sendToChain("chest_open", address, id);
|
|
} catch (err) {
|
|
this.$showErr(err);
|
|
this.isLoading = false;
|
|
return;
|
|
}
|
|
|
|
let serTimeId = setInterval(async () => {
|
|
try {
|
|
let { errcode, errmsg, data } = await apiBoxOpen(id);
|
|
if (errcode) {
|
|
if (errcode !== 12) {
|
|
// 状态不是等待链上确认的, 都提示错误
|
|
// this.$message.error(errmsg)'
|
|
this.isLoading = false;
|
|
clearInterval(serTimeId);
|
|
}
|
|
} else {
|
|
// alert(`领取成功,显示奖励: ${JSON.stringify(data)}`)
|
|
if(this.currentPageItems.length == 1) {
|
|
if(this.currentPage > 1) {
|
|
this.onChangePage(this.currentPage-1)
|
|
}
|
|
}
|
|
this.boostingList = [];
|
|
this.getMyBoxList()
|
|
this.openBoxLog();
|
|
this.isLoading = false;
|
|
this.$emit("awardDialog", data);
|
|
localStorage.removeItem(storeageKey);
|
|
clearInterval(serTimeId);
|
|
}
|
|
} catch (err) {
|
|
this.isLoading = false;
|
|
// this.$message.error(`claim task reward error: ${err}`)
|
|
}
|
|
}, 3000);
|
|
}
|
|
},
|
|
|
|
// 开箱子记录
|
|
async openBoxLog() {
|
|
let res = await this.$axios.get(
|
|
process.env.VUE_APP_API_URL + "/api/chest/open/history",
|
|
{
|
|
params: {},
|
|
headers: { Authorization: `Bearer ${this.token}` }
|
|
}
|
|
);
|
|
this.recordsList = res.data.data;
|
|
},
|
|
rewBoxList() {
|
|
this.getMyBoxList();
|
|
},
|
|
|
|
// 开箱记录分页
|
|
onRecordsChangePage(val) {
|
|
this.recordsCurrentPage = val;
|
|
},
|
|
|
|
// 我的助力记录
|
|
async getMyHistoricalLog() {
|
|
let res = await this.$axios.post(
|
|
process.env.VUE_APP_API_URL + "/api/user/enhance/list",
|
|
{},
|
|
{ headers: { Authorization: `Bearer ${this.token}` } }
|
|
);
|
|
if (res.data.errcode == 0) {
|
|
this.myRecordsList = res.data.data;
|
|
} else {
|
|
// console.info('[getMyHistoricalLog error]',res)
|
|
}
|
|
},
|
|
// 我的助力记录分页
|
|
onBoostingChangePage(val) {
|
|
this.boostingCurrentPage = val;
|
|
},
|
|
|
|
// 获取用户状态
|
|
getUserState() {
|
|
this.$axios
|
|
.get(process.env.VUE_APP_API_URL + "/api/user/state", {
|
|
params: "",
|
|
headers: { Authorization: `Bearer ${this.token}` }
|
|
})
|
|
.then(res => {
|
|
localStorage.setItem("userData", JSON.stringify(res.data.data));
|
|
});
|
|
},
|
|
|
|
// 复制助力链接
|
|
copyLink(data) {
|
|
if(endActivity(this.activityData.endTime)) {
|
|
this.$showErr('activity is end')
|
|
} else {
|
|
this.userData = JSON.parse(localStorage.getItem("userData"));
|
|
let url = `${location.protocol}//${location.host}/home/box=${data.shareCode}`;
|
|
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");
|
|
let address_type = localStorage.getItem("myAddress");
|
|
this.$gtag.event("invite_new", {
|
|
address_type: address_type
|
|
});
|
|
}
|
|
},
|
|
|
|
antiShake: throttle(function(data) {
|
|
this.copyLink(data);
|
|
}, 5000),
|
|
|
|
// 关闭弹窗
|
|
recordsHandleClose() {
|
|
this.recordsDialogVisible = false;
|
|
},
|
|
boostingHandleClose() {
|
|
this.boostingDialogVisible = false;
|
|
},
|
|
|
|
// 去探索页面
|
|
toExplore() {
|
|
this.$emit("toExplore", 2);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.box-content {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 50px;
|
|
.box-btm-left {
|
|
background: url("./../../assets/box/Bg(1).png") no-repeat;
|
|
background-size: 100% 100%;
|
|
.box-page {
|
|
// background: #3c2363;
|
|
.box-title {
|
|
.box-title-top {
|
|
margin-bottom: 10px;
|
|
}
|
|
.line {
|
|
width: 100%;
|
|
height: 2px;
|
|
background: #3c2363;
|
|
}
|
|
}
|
|
.box-boosting {
|
|
height: 530px;
|
|
overflow-y: scroll;
|
|
margin-top: 20px;
|
|
li {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 20px;
|
|
margin-top: 20px;
|
|
.left {
|
|
display: flex;
|
|
align-items: center;
|
|
.user-img {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: url("@/assets/common/Picture frame .png") no-repeat;
|
|
background-size: 100% 100%;
|
|
padding: 3px;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
.user-name {
|
|
font-size: 16px;
|
|
margin-left: 20px;
|
|
}
|
|
}
|
|
.right {
|
|
display: flex;
|
|
align-items: center;
|
|
.records {
|
|
font-size: 12px;
|
|
color: #9950fd;
|
|
}
|
|
.icon {
|
|
width: 10px;
|
|
height: 12px;
|
|
margin-left: 5px;
|
|
display: flex;
|
|
align-items: center;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
&:nth-child(1) {
|
|
.left {
|
|
.user-img {
|
|
width: 40px;
|
|
height: 40px;
|
|
position: relative;
|
|
.one-bg {
|
|
width: 60px;
|
|
height: 60px;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.one-img {
|
|
width: 40px;
|
|
height: 40px;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.box-boosting-no {
|
|
height: 530px;
|
|
margin-top: 20px;
|
|
position: relative;
|
|
div {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 200px;
|
|
height: 140px;
|
|
background: url("./../../assets/box/none01.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
p {
|
|
position: absolute;
|
|
bottom: 8%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
::v-deep .box-boosting::-webkit-scrollbar {
|
|
width: 5px;
|
|
}
|
|
::v-deep .box-boosting::-webkit-scrollbar-track {
|
|
background: #171220;
|
|
border-radius: 2px;
|
|
}
|
|
::v-deep .box-boosting::-webkit-scrollbar-corner {
|
|
display: block;
|
|
}
|
|
::v-deep .box-boosting::-webkit-scrollbar-thumb {
|
|
height: 15px;
|
|
background: #9950fd;
|
|
border-radius: 10px;
|
|
}
|
|
}
|
|
.box-log {
|
|
display: flex;
|
|
margin: 20px 0;
|
|
margin-top: 40px;
|
|
.btn {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 20px;
|
|
background: #3d3646;
|
|
padding: 5px 20px 5px 10px;
|
|
font-size: 12px;
|
|
border-radius: 15px;
|
|
cursor: pointer;
|
|
.icon {
|
|
margin-right: 8px;
|
|
width: 12px;
|
|
height: 12px;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.box-btm-con {
|
|
width: 720px;
|
|
height: 700px;
|
|
background: #fff;
|
|
background: #1a1821;
|
|
position: relative;
|
|
top: -20px;
|
|
.videoContainer {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
// width: 720px;
|
|
// height: 700px;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 0;
|
|
video {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.content-no {
|
|
position: relative;
|
|
height: 100%;
|
|
.box-img-no {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.box-to-explore {
|
|
position: absolute;
|
|
top: 70%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
.to-explore-btn {
|
|
padding: 5px 0;
|
|
border-radius: 20px;
|
|
margin-top: 15px;
|
|
background: #fec25d;
|
|
color: #000;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
.content {
|
|
position: inherit;
|
|
.box-btm-con-title {
|
|
width: 400px;
|
|
// height: 100px;
|
|
margin: 0 auto;
|
|
margin-top: 20px;
|
|
font-family: "Anton-Regular";
|
|
.box-btm-con-title-top {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
font-size: 58px;
|
|
.icon {
|
|
width: 25px;
|
|
height: 25px;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 0 20px;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.bonus {
|
|
display: flex;
|
|
height: 100px;
|
|
color: #ffc35b;
|
|
div {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 20px;
|
|
span {
|
|
font-size: 40px;
|
|
color: #fff;
|
|
}
|
|
img {
|
|
width: 30px;
|
|
height: 40px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.box-btm-con-title-btm {
|
|
font-size: 32px;
|
|
}
|
|
}
|
|
.box-btm-con-img {
|
|
width: 400px;
|
|
height: 240px;
|
|
margin: 0 auto;
|
|
div {
|
|
width: 260px;
|
|
height: 200px;
|
|
margin: 0 auto;
|
|
margin-top: 20px;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
.box-btm-con-boost {
|
|
position: inherit;
|
|
width: 240px;
|
|
// height: 100px;
|
|
padding-top: 20px;
|
|
box-sizing: border-box;
|
|
margin: 0 auto;
|
|
z-index: 99;
|
|
p {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
}
|
|
.copy-btn {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 20px 0px;
|
|
font-size: 14px;
|
|
background: url("@/assets/box/button_copy.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
border-radius: 20px;
|
|
cursor: pointer;
|
|
.icon {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
.box-btm-con-btn {
|
|
width: 700px;
|
|
height: 170px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
.box-btn-content {
|
|
position: absolute;
|
|
top: -60px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
height: 100%;
|
|
position: relative;
|
|
.box-btm-con-btn-bar {
|
|
width: 400px;
|
|
height: 40px;
|
|
position: absolute;
|
|
top: 70%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
line-height: 40px;
|
|
padding: 3px 8px;
|
|
display: flex;
|
|
// justify-content: center;
|
|
align-items: center;
|
|
margin: 0 auto;
|
|
background: url("@/assets/box/Progress bar_MAX bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
.bar {
|
|
// width: 400px;
|
|
height: 36px;
|
|
border-radius: 20px;
|
|
background: url("@/assets/box/Progress bar_MAX.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.amount {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.max {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
.box-btm-con-btn-tips {
|
|
width: 400px;
|
|
margin: 0 auto;
|
|
margin-top: 10px;
|
|
font-size: 12px;
|
|
text-align: left;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 82%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.box-btn {
|
|
width: 200px;
|
|
height: 200px;
|
|
line-height: 200px;
|
|
position: absolute;
|
|
top: 15%;
|
|
right: 5%;
|
|
background: url("@/assets/box/Button_Ceiling.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.box-btm-right {
|
|
background: url("./../../assets/box/chest bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.box-btm-left,
|
|
.box-btm-right {
|
|
width: 380px;
|
|
height: 600px;
|
|
padding: 30px;
|
|
.box-page {
|
|
.box-title {
|
|
.box-title-top {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
text-align: left;
|
|
}
|
|
.box-title-btm {
|
|
text-align: right;
|
|
font-size: 12px;
|
|
border-bottom: 2px solid #3b334a;
|
|
margin: 10px 0;
|
|
padding-bottom: 10px;
|
|
}
|
|
}
|
|
.box-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
height: 500px;
|
|
li {
|
|
height: 140px;
|
|
flex: 1;
|
|
margin: 10px 10px 10px 0;
|
|
width: calc((100% - 10px) / 2);
|
|
min-width: calc((100% - 10px) / 2);
|
|
max-width: calc((100% - 10px) / 2);
|
|
position: relative;
|
|
cursor: pointer;
|
|
.box-img {
|
|
width: 160px;
|
|
height: 100px;
|
|
margin: 0 auto;
|
|
margin-bottom: 10px;
|
|
position: relative;
|
|
z-index: 9;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.box-hover-yes {
|
|
display: none;
|
|
}
|
|
}
|
|
.box-bg {
|
|
width: 160px;
|
|
height: 120px;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 30%;
|
|
transform: translateX(-50%);
|
|
background: url("@/assets/box/Treasure Chest_bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
z-index: 0;
|
|
}
|
|
.box-name {
|
|
position: relative;
|
|
z-index: 9;
|
|
}
|
|
.success {
|
|
color: #31a21d;
|
|
}
|
|
&:nth-child(2n) {
|
|
margin-right: 0;
|
|
}
|
|
&:hover {
|
|
.box-img {
|
|
.box-hover-no {
|
|
display: none;
|
|
}
|
|
.box-hover-yes {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.box-list-no {
|
|
height: 500px;
|
|
position: relative;
|
|
div {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 200px;
|
|
height: 140px;
|
|
background: url("./../../assets/box/none01.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
p {
|
|
position: absolute;
|
|
bottom: 8%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.box-pagination {
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
.records-dialog,
|
|
.boosting-dialog {
|
|
::v-deep .el-dialog {
|
|
border: 1px solid #924df2;
|
|
// box-shadow: 0px 0px 20px #924df2;
|
|
background: #1a1821;
|
|
border-radius: 80px;
|
|
padding: 0px 50px;
|
|
.el-dialog__header {
|
|
padding: 0;
|
|
}
|
|
.el-dialog__body {
|
|
position: relative;
|
|
.top {
|
|
display: flex;
|
|
|
|
.top-title {
|
|
color: #fff;
|
|
font-size: 28px;
|
|
font-family: "Anton-Regular";
|
|
}
|
|
.top-close {
|
|
position: absolute;
|
|
top: -8%;
|
|
right: -9%;
|
|
width: 100px;
|
|
height: 100px;
|
|
cursor: pointer;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
.content {
|
|
margin: 20px 0;
|
|
height: 450px;
|
|
.el-table {
|
|
background: #1a1821;
|
|
.el-table__header-wrapper {
|
|
border-radius: 20px;
|
|
.el-table__header {
|
|
tr {
|
|
background: #1a1821;
|
|
|
|
overflow: hidden;
|
|
.el-table__cell {
|
|
border: 0px;
|
|
background: #2d2738;
|
|
color: #fff;
|
|
}
|
|
.el-table__cell:last-child {
|
|
border-radius: 0 20px 20px 0 !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.el-table__body-wrapper {
|
|
.el-table__body {
|
|
.el-table__row {
|
|
background: #1a1821;
|
|
.el-table__cell {
|
|
color: #fff;
|
|
border: 0px;
|
|
.points {
|
|
color: #9950fa;
|
|
font-family: "Poppins";
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
img {
|
|
width: 10px;
|
|
height: 14px;
|
|
margin-left: 5px;
|
|
margin-top: 2px;
|
|
}
|
|
div {
|
|
width: 55px;
|
|
margin-left: 5px;
|
|
text-align: right;
|
|
}
|
|
div:nth-child(2) {
|
|
width: 140px;
|
|
margin-left: 10px;
|
|
font-size: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
img {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
}
|
|
.touxiang {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.userImg {
|
|
margin-right: 20px;
|
|
}
|
|
span {
|
|
display: inline-block;
|
|
width: 140px;
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
tr:hover {
|
|
background: none !important;
|
|
td {
|
|
background: none;
|
|
}
|
|
}
|
|
}
|
|
&::before {
|
|
background: #1a1821;
|
|
}
|
|
}
|
|
}
|
|
.btm {
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.records-dialog {
|
|
::v-deep .el-dialog {
|
|
.el-dialog__body {
|
|
.content {
|
|
.el-table {
|
|
.el-table__body-wrapper {
|
|
.el-table__body {
|
|
.el-table__row {
|
|
.el-table__cell {
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.box-loading {
|
|
// position: absolute;
|
|
// top: -200%;
|
|
// left: -200%;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
}
|
|
</style> |