增加测试第三阶段宝箱开启页面
This commit is contained in:
cebgcontract
parent
41ca281b72
commit
254bc28db7
@ -75,3 +75,24 @@ export const queryActivateNFTState = (data: any) =>
|
|||||||
method: 'get',
|
method: 'get',
|
||||||
params: data
|
params: data
|
||||||
})
|
})
|
||||||
|
|
||||||
|
export const getPhase3Box = (data: any) =>
|
||||||
|
request({
|
||||||
|
url: '/webapp/index.php?c=Market&a=getPhase3box',
|
||||||
|
method: 'get',
|
||||||
|
params: data
|
||||||
|
})
|
||||||
|
|
||||||
|
export const openPhase3Box = (data: any) =>
|
||||||
|
request({
|
||||||
|
url: '/webapp/index.php?c=Market&a=openPhase3Box',
|
||||||
|
method: 'get',
|
||||||
|
params: data
|
||||||
|
})
|
||||||
|
|
||||||
|
export const queryPhase3Box = (data: any) =>
|
||||||
|
request({
|
||||||
|
url: '/webapp/index.php?c=Market&a=queryPhase3Box',
|
||||||
|
method: 'get',
|
||||||
|
params: data
|
||||||
|
})
|
||||||
|
|||||||
@ -31,6 +31,12 @@
|
|||||||
<div class="active-bottom" v-if="currentTab==='mystery'"></div>
|
<div class="active-bottom" v-if="currentTab==='mystery'"></div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
<a class="menu-item" href="/eventreward" >
|
||||||
|
<div class="item " :class="{'active': currentTab==='reward'}">
|
||||||
|
EventReward
|
||||||
|
<div class="active-bottom" v-if="currentTab==='reward'"></div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
<a class="menu-item" href="/mynft" v-if="logined" >
|
<a class="menu-item" href="/mynft" v-if="logined" >
|
||||||
<div class="item " :class="{'active': currentTab==='mynft'}">
|
<div class="item " :class="{'active': currentTab==='mynft'}">
|
||||||
MyNFT
|
MyNFT
|
||||||
|
|||||||
73
src/components/market/mystery/OneRewardBox.vue
Normal file
73
src/components/market/mystery/OneRewardBox.vue
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="one-box"
|
||||||
|
@mouseover="boxOver"
|
||||||
|
@mouseout="boxNormal"
|
||||||
|
@click="onOpenBox"
|
||||||
|
>
|
||||||
|
<div class="nft-id">#{{tokenId}}</div>
|
||||||
|
<img class="box-img" :src="currentImg" alt="mystery boxes">
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import { Component, Prop, Vue } from 'vue-property-decorator'
|
||||||
|
import { UserModule } from '@/store/modules/user'
|
||||||
|
import { AppModule } from '@/store/modules/app'
|
||||||
|
|
||||||
|
export const REWARD_BOX_CLICKED = 'reward-box-clicked'
|
||||||
|
@Component({
|
||||||
|
name: 'OneRewardBox',
|
||||||
|
components: {
|
||||||
|
}
|
||||||
|
})
|
||||||
|
export default class OneRewardBox extends Vue {
|
||||||
|
@Prop() tokenId: string | number
|
||||||
|
@Prop() normalImg: string
|
||||||
|
@Prop() highImg: string
|
||||||
|
boxState = 'n'
|
||||||
|
|
||||||
|
boxOver() {
|
||||||
|
if (this.boxState !== 'o') {
|
||||||
|
this.boxState = 'h'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
boxNormal() {
|
||||||
|
if (this.boxState !== 'o') {
|
||||||
|
this.boxState = 'n'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onOpenBox() {
|
||||||
|
this.$emit(REWARD_BOX_CLICKED, this.tokenId)
|
||||||
|
}
|
||||||
|
|
||||||
|
get isLogin() {
|
||||||
|
return !!UserModule.token && !!AppModule.step
|
||||||
|
}
|
||||||
|
|
||||||
|
get currentImg() {
|
||||||
|
return this.boxState === 'n'
|
||||||
|
? this.normalImg : this.highImg
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.one-box{
|
||||||
|
width: 14em;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
.nft-id {
|
||||||
|
color: #46E0F4;
|
||||||
|
display: unset;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.box-img{
|
||||||
|
width: 14em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -58,6 +58,14 @@ const routes: Array<RouteConfig> = [
|
|||||||
title: 'Mystery Boxes | CEBG: CRYPTO ELITE‘S BATTLEGROUNDS'
|
title: 'Mystery Boxes | CEBG: CRYPTO ELITE‘S BATTLEGROUNDS'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/eventreward',
|
||||||
|
name: 'EventReward',
|
||||||
|
component: resolve => require(['@/views/desktop/EventReward.vue'], resolve),
|
||||||
|
meta: {
|
||||||
|
title: 'Event Reward | CEBG: CRYPTO ELITE‘S BATTLEGROUNDS'
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/presale',
|
path: '/presale',
|
||||||
name: 'Presale',
|
name: 'Presale',
|
||||||
|
|||||||
635
src/views/desktop/EventReward.vue
Normal file
635
src/views/desktop/EventReward.vue
Normal file
@ -0,0 +1,635 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<top-menu class="desk-top" :current-tab="currentTab"></top-menu>
|
||||||
|
<section class="root">
|
||||||
|
<div class="container">
|
||||||
|
<div class="box-info">
|
||||||
|
<div class="info-title">{{presaleTitle}}</div>
|
||||||
|
<div class="info-desc" v-html="hint">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="detail-info-bar" v-if="false">
|
||||||
|
<div class="detailBox">
|
||||||
|
<div class="circle">
|
||||||
|
<img src="@/assets/market/key_120.png" alt="key">
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<span class="info">Mystery Key</span>
|
||||||
|
<span class="title">{{countShow}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-list" v-if="nftList.length > 0">
|
||||||
|
<one-reward-box
|
||||||
|
v-for="nft in nftList"
|
||||||
|
:token-id="nft.id"
|
||||||
|
:normal-img = "nft.normalImg"
|
||||||
|
:high-img = "nft.highImg"
|
||||||
|
:key="nft.id"
|
||||||
|
@reward-box-clicked = "onClickBox"
|
||||||
|
></one-reward-box>
|
||||||
|
</div>
|
||||||
|
<result-no
|
||||||
|
v-if="nftList.length === 0"
|
||||||
|
title="You have no Event Reward."
|
||||||
|
desc=""
|
||||||
|
></result-no>
|
||||||
|
<pagination
|
||||||
|
v-if="totalPage>1"
|
||||||
|
:total="totalPage"
|
||||||
|
:current="currentPage"
|
||||||
|
@to-page="toPage"
|
||||||
|
class="page-comp"
|
||||||
|
></pagination>
|
||||||
|
</div>
|
||||||
|
<div class="order-status" v-show="showOrderStatus">
|
||||||
|
<el-tooltip class="item" effect="light" content="Transaction in progress" placement="right">
|
||||||
|
<time-loader></time-loader>
|
||||||
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<base-footer :auto-size="true">></base-footer>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { Component, Vue, Watch } from 'vue-property-decorator'
|
||||||
|
import TopMenu from '@/components/market/TopMenu.vue'
|
||||||
|
import BaseFooter from '@/components/layout/BaseFooter.vue'
|
||||||
|
import OneBox from '@/components/market/mall/OneBox.vue'
|
||||||
|
import { UserModule } from '@/store/modules/user'
|
||||||
|
import { AppModule } from '@/store/modules/app'
|
||||||
|
import ChainManager from '@/chain/ChainManager'
|
||||||
|
import { secs2str } from '@/utils/time.util'
|
||||||
|
import { ElLoadingComponent } from 'element-ui/types/loading'
|
||||||
|
import TimeLoader from '@/components/main/TimeLoader.vue'
|
||||||
|
import Pagination from '@/components/market/Pagination.vue'
|
||||||
|
import ResultNo from '@/components/market/ResultNo.vue'
|
||||||
|
import { CONTRACT_ADDRESS } from '@/configs/config_chain'
|
||||||
|
import OneLuckyBox from '@/components/market/mystery/OneLuckyBox.vue'
|
||||||
|
import { getPhase3Box, openPhase3Box, queryPhase3Box } from '@/api/Market'
|
||||||
|
import RewardModal from '@/components/core/RewardModal.vue'
|
||||||
|
import { INftData, parseNftData } from '@/types/Nft'
|
||||||
|
import { createModal, ZModal } from '@/utils/modal.util'
|
||||||
|
import OneRewardBox from '@/components/market/mystery/OneRewardBox.vue'
|
||||||
|
|
||||||
|
const PAGE_SIZE = 8
|
||||||
|
const MYSTERY_BOX_CACHE = 'reward_box_cache'
|
||||||
|
@Component({
|
||||||
|
components: {
|
||||||
|
OneRewardBox,
|
||||||
|
RewardModal,
|
||||||
|
OneLuckyBox,
|
||||||
|
ResultNo,
|
||||||
|
Pagination,
|
||||||
|
TimeLoader,
|
||||||
|
OneBox,
|
||||||
|
BaseFooter,
|
||||||
|
TopMenu
|
||||||
|
}
|
||||||
|
})
|
||||||
|
export default class EventReward extends Vue {
|
||||||
|
currentTab = 'reward';
|
||||||
|
hint = 'The box can only draw one of the following rewards.<br/>' +
|
||||||
|
'- 1 Hero, 3% chance<br/>' +
|
||||||
|
'- 1 Weapon, 5% chance<br/>' +
|
||||||
|
'- 1 Chip, 7% chance<br/>' +
|
||||||
|
'- 25 GCEC, 20% chance<br/>' +
|
||||||
|
'- 20 GCEC, 30% chance<br/>' +
|
||||||
|
'- 15 GCEC, 35% chance<br/>' +
|
||||||
|
'Validity period 2023/6/30';
|
||||||
|
|
||||||
|
presaleTitle = 'Phase 3 Rewards During the Test'
|
||||||
|
presaleStatus = 0
|
||||||
|
timeStr = 'UNLIMITED'
|
||||||
|
countdown = 0
|
||||||
|
orderTimer: any = null
|
||||||
|
loadingInstance: ElLoadingComponent
|
||||||
|
showOrderStatus = false
|
||||||
|
historyOrderId: string | null = ''
|
||||||
|
chainManager = new ChainManager()
|
||||||
|
totalCount = 0
|
||||||
|
private totalPage = 1
|
||||||
|
private currentPage = 1
|
||||||
|
private nftList: {id: string, normalImg: string, highImg: string}[] = []
|
||||||
|
private isProcess = false
|
||||||
|
private rewardModal: ZModal
|
||||||
|
|
||||||
|
created() {
|
||||||
|
if (!process.env.VUE_APP_PART_CLOSE) {
|
||||||
|
this.fetchData()
|
||||||
|
}
|
||||||
|
this.chainManager.init()
|
||||||
|
}
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.checkOrderHistory()
|
||||||
|
// this.showTestModal()
|
||||||
|
// if (process.env.NODE_ENV === 'development') {
|
||||||
|
// window.showModal = this.showTestModal
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
unmounted() {
|
||||||
|
this.rewardModal?.destroy()
|
||||||
|
}
|
||||||
|
|
||||||
|
private resetData() {
|
||||||
|
this.totalPage = 1
|
||||||
|
this.currentPage = 1
|
||||||
|
this.nftList.length = 0
|
||||||
|
this.$forceUpdate()
|
||||||
|
}
|
||||||
|
|
||||||
|
@Watch('isLogin')
|
||||||
|
private async accountChange() {
|
||||||
|
if (this.isLogin) {
|
||||||
|
this.checkOrderHistory()
|
||||||
|
await this.getNftList()
|
||||||
|
} else {
|
||||||
|
this.resetData()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@Watch('countdown')
|
||||||
|
private countDownChange() {
|
||||||
|
this.timeStr = secs2str(this.countdown)
|
||||||
|
}
|
||||||
|
|
||||||
|
get countShow() {
|
||||||
|
if (!this.isLogin) {
|
||||||
|
return 'UNAVAILABLE'
|
||||||
|
}
|
||||||
|
return 'x 0'
|
||||||
|
}
|
||||||
|
|
||||||
|
get accountId() {
|
||||||
|
return AppModule.accountId
|
||||||
|
}
|
||||||
|
|
||||||
|
get isLogin() {
|
||||||
|
return !!UserModule.token && !!AppModule.step && AppModule.accountId
|
||||||
|
}
|
||||||
|
|
||||||
|
get boxAddress() {
|
||||||
|
return CONTRACT_ADDRESS[AppModule.chainId].mystery
|
||||||
|
}
|
||||||
|
|
||||||
|
get boxProxyAddress() {
|
||||||
|
return CONTRACT_ADDRESS[AppModule.chainId].mysteryProxy
|
||||||
|
}
|
||||||
|
|
||||||
|
async fetchData() {
|
||||||
|
console.log('Mystery fetchData')
|
||||||
|
}
|
||||||
|
|
||||||
|
showLoading() {
|
||||||
|
this.loadingInstance = this.$loading({ background: 'rgba(0, 0, 0, 0.8)' })
|
||||||
|
}
|
||||||
|
|
||||||
|
hideLoading() {
|
||||||
|
this.loadingInstance?.close()
|
||||||
|
}
|
||||||
|
|
||||||
|
async getNftList() {
|
||||||
|
this.showLoading()
|
||||||
|
this.nftList.length = 0
|
||||||
|
try {
|
||||||
|
const records: any = await getPhase3Box({
|
||||||
|
account: this.accountId
|
||||||
|
})
|
||||||
|
console.log(records)
|
||||||
|
if (records.rows.length > 0) {
|
||||||
|
records.rows.forEach((o: any) => {
|
||||||
|
this.nftList.push({
|
||||||
|
id: o.box_id,
|
||||||
|
normalImg: o.image_box_1,
|
||||||
|
highImg: o.image_box_2
|
||||||
|
})
|
||||||
|
})
|
||||||
|
// for (let i = 0; i < 10; i++) {
|
||||||
|
// this.nftList.push({
|
||||||
|
// id: '22' + i,
|
||||||
|
// normalImg: this.nftList[0].normalImg,
|
||||||
|
// highImg: this.nftList[0].highImg
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.log(err)
|
||||||
|
}
|
||||||
|
|
||||||
|
this.hideLoading()
|
||||||
|
}
|
||||||
|
|
||||||
|
checkOrderHistory() {
|
||||||
|
const historyOrderId = localStorage.getItem(MYSTERY_BOX_CACHE)
|
||||||
|
if (historyOrderId && this.accountId) {
|
||||||
|
try {
|
||||||
|
const data = JSON.parse(historyOrderId)
|
||||||
|
this.beginTraceOrderStatus(data)
|
||||||
|
} catch (err) {
|
||||||
|
localStorage.removeItem(MYSTERY_BOX_CACHE)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
beginTraceOrderStatus(cacheData: any) {
|
||||||
|
this.showOrderStatus = true
|
||||||
|
this.isProcess = true
|
||||||
|
this.loadingInstance?.close()
|
||||||
|
this.orderTimer = setInterval(() => {
|
||||||
|
this.getOrderStatus(cacheData)
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
|
||||||
|
resetTmpOrderId() {
|
||||||
|
if (this.orderTimer !== null) {
|
||||||
|
clearInterval(this.orderTimer)
|
||||||
|
this.orderTimer = null
|
||||||
|
}
|
||||||
|
this.isProcess = false
|
||||||
|
localStorage.removeItem(MYSTERY_BOX_CACHE)
|
||||||
|
this.loadingInstance?.close()
|
||||||
|
}
|
||||||
|
|
||||||
|
async onClickBox(tokenId: string) {
|
||||||
|
if (!this.isLogin) {
|
||||||
|
this.$message({
|
||||||
|
message: 'You should login first',
|
||||||
|
type: 'warning',
|
||||||
|
duration: 5 * 1000
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (this.isProcess) {
|
||||||
|
this.$message({
|
||||||
|
message: 'Box open in process',
|
||||||
|
type: 'warning',
|
||||||
|
duration: 5 * 1000
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.isProcess = true
|
||||||
|
this.showLoading()
|
||||||
|
try {
|
||||||
|
const res : any = await openPhase3Box({
|
||||||
|
account: this.accountId,
|
||||||
|
box_id: tokenId
|
||||||
|
})
|
||||||
|
|
||||||
|
const stateData = { token_id: tokenId }
|
||||||
|
localStorage.setItem(MYSTERY_BOX_CACHE, JSON.stringify(stateData))
|
||||||
|
this.hideLoading()
|
||||||
|
this.beginTraceOrderStatus(stateData)
|
||||||
|
} catch (err) {
|
||||||
|
console.log('pre open box err', err)
|
||||||
|
this.$message.error('open reward box with pre open error')
|
||||||
|
this.hideLoading()
|
||||||
|
this.isProcess = false
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async getOrderStatus(data: any) {
|
||||||
|
console.log('getOrderStatus: ', data)
|
||||||
|
try {
|
||||||
|
const res: any = await queryPhase3Box(data)
|
||||||
|
if (res.state === 1) {
|
||||||
|
// success
|
||||||
|
const nfts: any = res.nfts || []
|
||||||
|
if (res.cec) {
|
||||||
|
nfts.unshift(this.generateCECData('GCEC', res.cec, ''))
|
||||||
|
}
|
||||||
|
this.onOpenSuccess(nfts)
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.log('query order status error', err)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async onOpenSuccess(nfts: any) {
|
||||||
|
console.log('open success')
|
||||||
|
this.resetTmpOrderId()
|
||||||
|
this.showOrderStatus = false
|
||||||
|
const cardList: INftData[] = []
|
||||||
|
for (const data of nfts) {
|
||||||
|
const nftData = parseNftData(data)
|
||||||
|
cardList.push(nftData)
|
||||||
|
}
|
||||||
|
this.showRewardModal({
|
||||||
|
title: 'Open Mystery Box Success',
|
||||||
|
cec: '',
|
||||||
|
cardList
|
||||||
|
})
|
||||||
|
this.getNftList()
|
||||||
|
// this.$alert('Congratulations', 'Open Success', { type: 'success', confirmButtonText: 'OK' })
|
||||||
|
}
|
||||||
|
|
||||||
|
showRewardModal(data: any) {
|
||||||
|
console.log('show reward modal with data: ', data)
|
||||||
|
this.rewardModal = createModal(RewardModal, data)
|
||||||
|
this.rewardModal.show()
|
||||||
|
}
|
||||||
|
|
||||||
|
toPage(pageNo: number) {
|
||||||
|
console.log('to page: ', pageNo)
|
||||||
|
this.currentPage = pageNo
|
||||||
|
this.getNftList()
|
||||||
|
}
|
||||||
|
|
||||||
|
generateCECData(name: string, amount: number, image: string) {
|
||||||
|
return {
|
||||||
|
token_id: name,
|
||||||
|
owner_address: '0x42448c6a38c08637218d8327b748f213fc2c0231',
|
||||||
|
owner_name: '',
|
||||||
|
item_id: '30600',
|
||||||
|
type: '2',
|
||||||
|
state: '0',
|
||||||
|
hide_attr: 1,
|
||||||
|
is_genesis: false,
|
||||||
|
image: image,
|
||||||
|
currency_list: [],
|
||||||
|
transaction_recrod: [],
|
||||||
|
info:
|
||||||
|
{
|
||||||
|
name: `${name} X ${amount}`,
|
||||||
|
attr: [],
|
||||||
|
job: 1,
|
||||||
|
level: 1,
|
||||||
|
quality: 1,
|
||||||
|
hp: 200,
|
||||||
|
speed: 6,
|
||||||
|
atk: 32,
|
||||||
|
def: 7,
|
||||||
|
advanced_count: 0,
|
||||||
|
lucky: 0,
|
||||||
|
success_rate: 0
|
||||||
|
},
|
||||||
|
mint_time: '1650529475'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// showTestModal() {
|
||||||
|
// const nftList = [
|
||||||
|
// {
|
||||||
|
// token_id: '501007316776010040',
|
||||||
|
// owner_address: '0x42448c6a38c08637218d8327b748f213fc2c0231',
|
||||||
|
// owner_name: '',
|
||||||
|
// item_id: '30100',
|
||||||
|
// type: '1',
|
||||||
|
// state: '0',
|
||||||
|
// hide_attr: 1,
|
||||||
|
// is_genesis: false,
|
||||||
|
// image: 'https://www.cebg.games/res/avatars/30100.png',
|
||||||
|
// currency_list: [],
|
||||||
|
// transaction_recrod: [],
|
||||||
|
// info:
|
||||||
|
// {
|
||||||
|
// name: 'Hill',
|
||||||
|
// attr: [],
|
||||||
|
// job: 1,
|
||||||
|
// level: 1,
|
||||||
|
// quality: 1,
|
||||||
|
// hp: 195,
|
||||||
|
// speed: 6,
|
||||||
|
// atk: 35,
|
||||||
|
// def: 6,
|
||||||
|
// advanced_count: 0,
|
||||||
|
// lucky: 0,
|
||||||
|
// success_rate: 0
|
||||||
|
// },
|
||||||
|
// mint_time: '1650529592'
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// token_id: '501007319181010046',
|
||||||
|
// owner_address: '0x42448c6a38c08637218d8327b748f213fc2c0231',
|
||||||
|
// owner_name: '',
|
||||||
|
// item_id: '30300',
|
||||||
|
// type: '1',
|
||||||
|
// state: '0',
|
||||||
|
// hide_attr: 1,
|
||||||
|
// is_genesis: true,
|
||||||
|
// image: 'https://www.cebg.games/res/avatars/30300_1.png',
|
||||||
|
// currency_list: [],
|
||||||
|
// transaction_recrod: [],
|
||||||
|
// info:
|
||||||
|
// {
|
||||||
|
// name: 'Aoi',
|
||||||
|
// attr: [],
|
||||||
|
// job: 3,
|
||||||
|
// level: 1,
|
||||||
|
// quality: 1,
|
||||||
|
// hp: 120,
|
||||||
|
// speed: 5,
|
||||||
|
// atk: 20,
|
||||||
|
// def: 10,
|
||||||
|
// advanced_count: 0,
|
||||||
|
// lucky: 0,
|
||||||
|
// success_rate: 0
|
||||||
|
// },
|
||||||
|
// mint_time: '1650531993'
|
||||||
|
// }]
|
||||||
|
// nftList.unshift(this.generateCECData('GCEC', 20, 'https://www.cebg.games/img/cec.e9eb8837.png'))
|
||||||
|
// const cardList: INftData[] = []
|
||||||
|
// nftList.forEach(o => cardList.push(parseNftData(o)))
|
||||||
|
// const data = {
|
||||||
|
// title: 'Test data',
|
||||||
|
// cardList
|
||||||
|
// }
|
||||||
|
// this.showRewardModal(data)
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import '../../scss/breakpoints.scss';
|
||||||
|
|
||||||
|
.root {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 1440px;
|
||||||
|
max-width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.box-info {
|
||||||
|
width: 100%;
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.info-title {
|
||||||
|
font-size: 50px;
|
||||||
|
padding: 60px 20px 20px 20px;
|
||||||
|
color: #FFA81E;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-list {
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
display: flex;
|
||||||
|
column-gap: 1.875em;
|
||||||
|
row-gap: 1.3125em;
|
||||||
|
margin: 50px 10vw;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-info-bar {
|
||||||
|
width: toEm(969px);
|
||||||
|
max-width: 100%;
|
||||||
|
height: toEm(93px);
|
||||||
|
margin-top: toEm(32px);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 50px;
|
||||||
|
.detailBox {
|
||||||
|
width: toEm(302px);
|
||||||
|
border-radius: toEm(8px);
|
||||||
|
padding: 0 toEm(36px);
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: rgba(4, 4, 34, 0.56);
|
||||||
|
transform: matrix(0.98, 0, -0.19, 1, 0, 0);
|
||||||
|
.circle {
|
||||||
|
width: toEm(57px);
|
||||||
|
height: toEm(57px);
|
||||||
|
margin-right: toEm(24px);
|
||||||
|
transform: skewX(11deg);
|
||||||
|
background-color: #FFA81E;
|
||||||
|
border-radius: 10px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
img{
|
||||||
|
width: 80%;
|
||||||
|
height: 80%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
transform: skewX(11deg);
|
||||||
|
.title {
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: toEm(14px);
|
||||||
|
line-height: 1.57;
|
||||||
|
color: #c9c5db;
|
||||||
|
}
|
||||||
|
.info {
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: toEm(24px);
|
||||||
|
line-height: 1.25;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-bottom: toEm(8px);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.total {
|
||||||
|
color: #8a8ab2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.timeUp {
|
||||||
|
color: #ff5c5c;
|
||||||
|
}
|
||||||
|
.unavailableTime {
|
||||||
|
font-size: 1.125em;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.order-status {
|
||||||
|
transform: scale(0.3);
|
||||||
|
width: 220px;
|
||||||
|
height: 220px;
|
||||||
|
border-radius: 110px;
|
||||||
|
background: white;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
transform-origin: top;
|
||||||
|
position: fixed;
|
||||||
|
left: 100px;
|
||||||
|
top: 100px;
|
||||||
|
}
|
||||||
|
@include media('<wide') {
|
||||||
|
.root {
|
||||||
|
font-size: 11px;
|
||||||
|
.container {
|
||||||
|
width: 1024px;
|
||||||
|
max-width: 100%;
|
||||||
|
.card-list{
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media('<desktop') {
|
||||||
|
.root {
|
||||||
|
font-size: 20px;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 768px;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.card-list {
|
||||||
|
-ms-grid-columns: (1fr)[2];
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media('<tablet') {
|
||||||
|
.root {
|
||||||
|
font-size: 11px;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 375px;
|
||||||
|
padding-top: 80px;
|
||||||
|
.card-list{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media('<phone') {
|
||||||
|
.root {
|
||||||
|
font-size: 9px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<style lang="scss">
|
||||||
|
.circle {
|
||||||
|
rect {
|
||||||
|
fill: #FFA81E;
|
||||||
|
}
|
||||||
|
path {
|
||||||
|
fill: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user