1155 lines
33 KiB
Vue
1155 lines
33 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">
|
|
Boosting Records
|
|
</div>
|
|
<div class="line"></div>
|
|
</div>
|
|
<div class="box-boosting-no" v-if="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 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>History Records</div>
|
|
</div>
|
|
<div class="btn" @click="boostingDialogVisible = true">
|
|
<div class="icon">
|
|
<img src="./../../assets/box/Icon_boost.png" alt="">
|
|
</div>
|
|
<div>Boosting Records</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="box-btm-con">
|
|
<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>Explore to get more </p>
|
|
<p>treasure chests</p>
|
|
<div class="to-explore-btn" @click="toExplore">
|
|
To explore
|
|
</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>BONUS!</div>
|
|
<div class="icon">
|
|
<img src="./../../assets/box/Icon_Star_01.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="box-btm-con-title-btm">LEGENDARY</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 friends to Boost,</p>
|
|
<p>Earn more rewards</p>
|
|
<div class="copy-btn" @click="copyLink(boxData)">
|
|
<div class="icon">
|
|
<img src="@/assets/box/Invite_icon.png" alt="">
|
|
</div>
|
|
<div>Invite friends to Boost</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" 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 treasure
|
|
</div>
|
|
<div class="box-title-btm">
|
|
</div>
|
|
</div>
|
|
<div class="box-list-no" v-if="!currentPageItems">
|
|
<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" :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 !== undefined && row.items.length > 0">{{ row.items[0].name }}</span>
|
|
<img src="./../../assets/common/whitelist01.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="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">
|
|
<template
|
|
slot-scope="scope"
|
|
>
|
|
<div class="touxiang">
|
|
<UserImg :imgSrc="scope.row.avatar" />
|
|
{{ scope.row.nickname }}
|
|
</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 :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 } from '@/utils/webapi.js'
|
|
import PaginationDialog from '@/components/paginationDialog.vue'
|
|
import Loading from '@/components/loading.vue'
|
|
import UserImg from "@/components/userImg.vue"
|
|
|
|
export default {
|
|
components: {
|
|
Pagination,
|
|
PaginationDialog,
|
|
Loading,
|
|
UserImg,
|
|
},
|
|
data() {
|
|
return {
|
|
token: null,
|
|
boxList: [],
|
|
pageBoxList: [],
|
|
boxData: {},
|
|
userData: {},
|
|
boostingList: [
|
|
|
|
],
|
|
pageSize: 6,
|
|
currentPage: 1,
|
|
recordsDialogVisible: false,
|
|
recordsList: [],
|
|
recordsPageSize: 8,
|
|
recordsCurrentPage: 1,
|
|
boostingDialogVisible: false,
|
|
|
|
// myRecordsList: [
|
|
// {
|
|
// username: 'username',
|
|
// name: 'username',
|
|
// points: '12',
|
|
// address: 'addressaddress',
|
|
// post: '0000',
|
|
// },
|
|
// {
|
|
// username: 'username',
|
|
// name: 'username',
|
|
// points: '12',
|
|
// address: 'addressaddress',
|
|
// post: '0000',
|
|
// },
|
|
// {
|
|
// username: 'username',
|
|
// name: 'username',
|
|
// points: '12',
|
|
// address: 'addressaddress',
|
|
// post: '0000',
|
|
// },
|
|
// {
|
|
// username: 'username',
|
|
// name: 'username',
|
|
// points: '12',
|
|
// address: 'addressaddress',
|
|
// post: '0000',
|
|
// },
|
|
// {
|
|
// username: 'username',
|
|
// name: 'username',
|
|
// points: '12',
|
|
// address: 'addressaddress',
|
|
// post: '0000',
|
|
// },
|
|
// {
|
|
// username: 'username',
|
|
// name: 'username',
|
|
// points: '12',
|
|
// address: 'addressaddress',
|
|
// post: '0000',
|
|
// },
|
|
// {
|
|
// username: 'username',
|
|
// name: 'username',
|
|
// points: '12',
|
|
// address: 'addressaddress',
|
|
// post: '0000',
|
|
// },
|
|
// {
|
|
// username: 'username',
|
|
// name: 'username',
|
|
// points: '12',
|
|
// address: 'addressaddress',
|
|
// post: '0000',
|
|
// },
|
|
// {
|
|
// username: 'username',
|
|
// name: 'username',
|
|
// points: '12',
|
|
// address: 'addressaddress',
|
|
// post: '0000',
|
|
// },
|
|
// {
|
|
// username: 'username',
|
|
// name: 'username',
|
|
// points: '12',
|
|
// address: 'addressaddress',
|
|
// post: '0000',
|
|
// },
|
|
// {
|
|
// username: 'username',
|
|
// name: 'username',
|
|
// points: '12',
|
|
// address: 'addressaddress',
|
|
// post: '0000',
|
|
// }
|
|
// ],
|
|
|
|
myRecordsList: [],
|
|
boostingPageSize: 6,
|
|
boostingCurrentPage: 1,
|
|
isLoading: false
|
|
}
|
|
},
|
|
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)
|
|
},
|
|
},
|
|
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 = res.data.data[0]
|
|
if(this.boxList.length > 0) {
|
|
await this.getHistorical(this.boxData.id)
|
|
if(this.boxData.bounsCount == 0) {
|
|
this.$refs.pendingBg.style.width = '0%'
|
|
} else {
|
|
let pending = (Number(this.boxData.maxBounsCount) / Number(this.boxData.bounsCount))
|
|
this.$refs.pendingBg.style.width = `${pending}%`
|
|
}
|
|
}
|
|
},
|
|
|
|
// 分页
|
|
onChangePage(val) {
|
|
this.currentPage = val
|
|
},
|
|
|
|
// 修改中间宝箱数据
|
|
async getBoxData(data) {
|
|
this.boxData = data
|
|
await this.getHistorical(data.id)
|
|
if(this.boxData.bounsCount == 0) {
|
|
this.$refs.pendingBg.style.width = '0%'
|
|
} else {
|
|
let pending = (Number(this.boxData.bounsCount) / Number(this.boxData.maxBounsCount)) *100
|
|
this.$refs.pendingBg.style.width = `${pending}%`
|
|
}
|
|
},
|
|
// 助力记录
|
|
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}` }
|
|
}
|
|
)
|
|
if(res.data.errcode == 0) {
|
|
this.boostingList = res.data.data
|
|
console.log('助力记录', this.boostingList)
|
|
}
|
|
},
|
|
|
|
// 开宝箱
|
|
async openBoxToChain(id) {
|
|
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)}`)
|
|
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.log('[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) {
|
|
this.userData = JSON.parse(localStorage.getItem("userData"))
|
|
let url = `${location.protocol}//${location.host}/home/new=${this.userData.code}/box=${data.shareCode}/id=${data.id}`
|
|
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");
|
|
},
|
|
|
|
// 关闭弹窗
|
|
recordsHandleClose() {
|
|
this.recordsDialogVisible = false
|
|
},
|
|
boostingHandleClose() {
|
|
this.boostingDialogVisible = false
|
|
},
|
|
|
|
// 去探索页面
|
|
toExplore() {
|
|
this.$emit('toExplore', 1)
|
|
},
|
|
},
|
|
};
|
|
</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: url('./../../assets/box/Bg_chest.png') no-repeat;
|
|
background-size: 100% 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 {
|
|
.box-btm-con-title {
|
|
width: 400px;
|
|
// height: 100px;
|
|
margin: 0 auto;
|
|
font-family: 'Anton-Regular';
|
|
.box-btm-con-title-top {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
color: #FFC35B;
|
|
font-size: 58px;
|
|
.icon {
|
|
width: 25px;
|
|
height: 25px;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 0 20px;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
.box-btm-con-title-btm {
|
|
font-size: 32px;
|
|
}
|
|
}
|
|
.box-btm-con-img {
|
|
width: 400px;
|
|
height: 220px;
|
|
margin: 0 auto;
|
|
div {
|
|
width: 260px;
|
|
height: 200px;
|
|
margin: 0 auto;
|
|
margin-top: 20px;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
.box-btm-con-boost {
|
|
width: 240px;
|
|
// height: 100px;
|
|
padding-top: 20px;
|
|
box-sizing: border-box;
|
|
margin: 0 auto;
|
|
p {
|
|
font-size: 14px;
|
|
line-height: 1.2;
|
|
}
|
|
.copy-btn {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 20px 0px;
|
|
font-size: 12px;
|
|
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: 200px;
|
|
margin: 0 auto;
|
|
.box-btn-content {
|
|
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: 10px;
|
|
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: 20%;
|
|
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: 10px;
|
|
margin-top: 2px;
|
|
}
|
|
div {
|
|
width: 55px;
|
|
margin-left: 5px;
|
|
text-align: right;
|
|
}
|
|
div:nth-child(2) {
|
|
width: 105px;
|
|
margin-left: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
img {
|
|
width: 20px;
|
|
height: 15px;
|
|
}
|
|
}
|
|
}
|
|
.touxiang {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |