1162 lines
31 KiB
Vue
1162 lines
31 KiB
Vue
<template>
|
|
<div class="wmassageMask" v-show="detailVisible && hero" @touchmove.prevent>
|
|
<div class="tabs">
|
|
<div :class="isTabs ? 'chip-tab' : 'hero-tab'" @click="handHeroTab">
|
|
HERO
|
|
</div>
|
|
<div>
|
|
<div
|
|
v-if="hero.detail.chips_info.length > 0 && hero.detail.chips_info"
|
|
:class="isTabs ? 'hero-tab' : 'chip-tab'"
|
|
@click="handChipTab"
|
|
>
|
|
CHIP
|
|
</div>
|
|
<div v-else :class="isTabs ? 'hero-tab' : 'chip-tab'">
|
|
<img
|
|
width="9px"
|
|
src="../../../assets/market/lock.png"
|
|
alt="aoi-hero"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="messageMaskContent content">
|
|
<div v-if="!isTabs">
|
|
<div class="hero-details-info">
|
|
<img
|
|
v-if="hero.item_id"
|
|
:src="
|
|
require('@/assets/market/hero/details/' +
|
|
hero.item_id +
|
|
'_full.png')
|
|
"
|
|
alt="aoi-hero"
|
|
/>
|
|
</div>
|
|
<div class="hero-details">
|
|
<img
|
|
src="../../../assets/market/hero/hero-details_01.png"
|
|
alt="aoi-hero"
|
|
/>
|
|
</div>
|
|
<div class="hero-bottom">
|
|
<div class="hero-right-token">
|
|
<div class="token-name">TOKEN ID</div>
|
|
<div class="token-id">#{{ hero.detail.token_id }}</div>
|
|
<div class="hill">
|
|
<div class="hill-content">
|
|
<div class="hill-name">
|
|
{{ hero.c_name ? hero.c_name : hero.detail.hero_name
|
|
}}<span class="name">Name</span>
|
|
</div>
|
|
<div class="hill-icon">
|
|
<img
|
|
width="34px"
|
|
src="../../../assets/market/hero/hill-icon.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<LevelStar :level="hero.detail.quality"> </LevelStar>
|
|
<LevelValue
|
|
:level="hero.detail.hero_lv"
|
|
:lucky="hero.detail.lucky"
|
|
></LevelValue>
|
|
<ProgressCard
|
|
color="rgba(184, 77, 204, 0.7)"
|
|
progressImg="aggressivity"
|
|
definecolor="#ca61dc"
|
|
:max="hero.detail.pvp_ceg_uplimit"
|
|
:min="hero.detail.pvp_ceg_uplimit"
|
|
></ProgressCard>
|
|
<ProgressCard
|
|
color="rgba(193, 168, 93, 0.7)"
|
|
progressImg="defense"
|
|
definecolor="#d0bd7a"
|
|
:max="hero.detail.pve_ceg_uplimit"
|
|
:min="hero.detail.pve_ceg_uplimit"
|
|
></ProgressCard>
|
|
<ProgressCard
|
|
color="rgba(81, 194, 224, 0.7)"
|
|
progressImg="lightning"
|
|
definecolor="#7dd6ff"
|
|
:max="hero.detail.hero_tili_max"
|
|
:min="hero.detail.hero_tili"
|
|
></ProgressCard>
|
|
</div>
|
|
</div>
|
|
<div class="hero-right-hp">
|
|
<div class="hero-hp">
|
|
<div class="hero-item hero-item-hp">
|
|
<div class="item">
|
|
<div class="item-img">
|
|
<img src="../../../assets/market/hero/hp.png" alt="" />
|
|
</div>
|
|
<div>HP</div>
|
|
</div>
|
|
<div>
|
|
{{
|
|
hero.detail.rand_attr[0].val
|
|
? hero.detail.rand_attr[0].val >= 100
|
|
? parseInt(hero.detail.rand_attr[0].val * 1)
|
|
: (hero.detail.rand_attr[0].val * 1).toFixed(2)
|
|
: ""
|
|
}}
|
|
</div>
|
|
</div>
|
|
<div class="hero-item hero-item-attack">
|
|
<div class="item">
|
|
<div class="item-img">
|
|
<img src="../../../assets/market/hero/attack.png" alt="" />
|
|
</div>
|
|
<div>TTACK</div>
|
|
</div>
|
|
<div>
|
|
{{
|
|
hero.detail.rand_attr[1].val
|
|
? hero.detail.rand_attr[1].val >= 100
|
|
? parseInt(hero.detail.rand_attr[1].val * 1)
|
|
: (hero.detail.rand_attr[1].val * 1).toFixed(2)
|
|
: ""
|
|
}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-item hero-item-def">
|
|
<div class="item">
|
|
<div class="item-img">
|
|
<img src="../../../assets/market/hero/def.png" alt="" />
|
|
</div>
|
|
<div>DEFENCE</div>
|
|
</div>
|
|
<div>
|
|
{{
|
|
hero.detail.rand_attr[2].val
|
|
? hero.detail.rand_attr[2].val >= 100
|
|
? parseInt(hero.detail.rand_attr[2].val * 1)
|
|
: (hero.detail.rand_attr[2].val * 1).toFixed(2)
|
|
: ""
|
|
}}
|
|
</div>
|
|
</div>
|
|
<div class="hero-item hero-item-cri">
|
|
<div class="item">
|
|
<div class="item-img">
|
|
<img src="../../../assets/market/hero/cri.png" alt="" />
|
|
</div>
|
|
<div>CRITICAL</div>
|
|
</div>
|
|
<div>
|
|
{{
|
|
hero.detail.rand_attr[4].val
|
|
? (hero.detail.rand_attr[4].val * 1 * 100).toFixed(2)
|
|
: "0"
|
|
}}%
|
|
</div>
|
|
</div>
|
|
<div class="hero-item hero-item-criDam">
|
|
<div class="item">
|
|
<div class="item-img">
|
|
<img src="../../../assets/market/hero/criDam.png" alt="" />
|
|
</div>
|
|
<div>CRI DAMAGE</div>
|
|
</div>
|
|
<div>
|
|
{{
|
|
hero.detail.rand_attr[5].val
|
|
? (hero.detail.rand_attr[5].val * 1 * 100).toFixed(2)
|
|
: "0"
|
|
}}%
|
|
</div>
|
|
</div>
|
|
<div class="hero-item hero-item-dodge">
|
|
<div class="item">
|
|
<div class="item-img">
|
|
<img src="../../../assets/market/hero/dodge.png" alt="" />
|
|
</div>
|
|
<div>DODGE</div>
|
|
</div>
|
|
<div>
|
|
{{
|
|
hero.detail.rand_attr[6].val
|
|
? (hero.detail.rand_attr[6].val * 1 * 100).toFixed(2)
|
|
: "0"
|
|
}}%
|
|
</div>
|
|
</div>
|
|
<div class="hero-item hero-item-reduces">
|
|
<div class="item">
|
|
<div class="item-img">
|
|
<img src="../../../assets/market/hero/reduces.png" alt="" />
|
|
</div>
|
|
<div>RUDUCE</div>
|
|
</div>
|
|
<div>
|
|
{{
|
|
hero.detail.rand_attr[7].val
|
|
? (hero.detail.rand_attr[7].val * 1 * 100).toFixed(2)
|
|
: "0"
|
|
}}%
|
|
</div>
|
|
</div>
|
|
<div class="hero-item hero-item-speed">
|
|
<div class="item">
|
|
<div class="item-img">
|
|
<img src="../../../assets/market/hero/speed.png" alt="" />
|
|
</div>
|
|
<div>SPEED</div>
|
|
</div>
|
|
<div>
|
|
{{
|
|
hero.detail.rand_attr[3].val
|
|
? hero.detail.rand_attr[3].val
|
|
: ""
|
|
}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<AccountCard
|
|
:owner="
|
|
hero.owner_address
|
|
? hero.owner_address
|
|
: hero.info.owner_address
|
|
"
|
|
:time="hero.modifytime"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<MosaicChip v-if="isTabs" :data="hero"></MosaicChip>
|
|
<!-- <div class="hero-chip" v-if="isTabs">
|
|
<div class="chips">
|
|
<div class="chip-top">
|
|
<div class="chip-item-left">
|
|
<div
|
|
:class="chipsid == 1 ? 'active-bg' : 'bg'"
|
|
v-if="hero.detail.chips_info[1].item_id"
|
|
>
|
|
<img
|
|
class="hill-icon-img"
|
|
@click="handChipDetils(1)"
|
|
:src="
|
|
require('@/assets/market/chip/details/' +
|
|
hero.detail.chips_info[1].item_id +
|
|
'_full.png')
|
|
"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div v-else></div>
|
|
</div>
|
|
<div class="chip-item-right">
|
|
<div
|
|
:class="chipsid == 2 ? 'active-bg' : 'bg'"
|
|
v-if="hero.detail.chips_info[2].item_id"
|
|
>
|
|
<img
|
|
class="hill-icon-img"
|
|
@click="handChipDetils(2)"
|
|
:src="
|
|
require('@/assets/market/chip/details/' +
|
|
hero.detail.chips_info[2].item_id +
|
|
'_full.png')
|
|
"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div v-else></div>
|
|
</div>
|
|
</div>
|
|
<div class="chip-top-info"></div>
|
|
<div class="chip-bottom">
|
|
<div class="chip-item-left">
|
|
<div
|
|
:class="chipsid == 0 ? 'active-bg' : 'bg'"
|
|
v-if="hero.detail.chips_info[0].item_id"
|
|
>
|
|
<img
|
|
class="hill-icon-img"
|
|
@click="handChipDetils(0)"
|
|
:src="
|
|
require('@/assets/market/chip/details/' +
|
|
hero.detail.chips_info[0].item_id +
|
|
'_full.png')
|
|
"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div v-else></div>
|
|
</div>
|
|
<div class="chip-reactor-item">
|
|
<div class="reactor-bg">
|
|
<img
|
|
v-if="hero.detail.chip_core.length > 0"
|
|
class="hill-icon-img"
|
|
@click="handChipDetils(5)"
|
|
src="../../../assets/market/reactor-active.png"
|
|
alt=""
|
|
/>
|
|
<img
|
|
v-else
|
|
class="hill-icon-img"
|
|
src="../../../assets/market/reactor-bg.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="chip-item-right">
|
|
<div
|
|
:class="chipsid == 3 ? 'active-bg' : 'bg'"
|
|
v-if="hero.detail.chips_info[3].item_id"
|
|
>
|
|
<img
|
|
class="hill-icon-img"
|
|
@click="handChipDetils(3)"
|
|
:src="
|
|
require('@/assets/market/chip/details/' +
|
|
hero.detail.chips_info[3].item_id +
|
|
'_full.png')
|
|
"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div v-else></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="chip-info">
|
|
<div class="token-content" v-if="chipsid !== 5">
|
|
<div class="token-name">TOEKN ID</div>
|
|
<div class="token-id">
|
|
#{{
|
|
chipsid == 5 ? "" : hero.detail.chips_info[chipsid].token_id
|
|
}}
|
|
</div>
|
|
</div>
|
|
<div class="hp-bottom" v-if="chipsid !== 5">
|
|
<div class="userinfo">
|
|
<div>Owner:</div>
|
|
<div>{{ address }}</div>
|
|
</div>
|
|
<div class="userinfo">
|
|
<div>Mint Time:</div>
|
|
<div>{{ modifytime }} UTC</div>
|
|
</div>
|
|
|
|
<div class="userinfo">
|
|
<div>History:</div>
|
|
<div>#3006985843100103 (NFTLink)</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="def-content" v-if="chipsid == 5">
|
|
<div class="def-item">
|
|
<div>{{ chipArrid[hero.detail.chip_core[0].attr_id] }}</div>
|
|
<div>+{{ chipList * 100 }}%</div>
|
|
</div>
|
|
|
|
<div class="def-item">LUCKY Unlocked at Lv.5</div>
|
|
</div>
|
|
<div class="def-content" v-else>
|
|
<div class="def-item" v-for="(chip, i) in chipList" :key="i">
|
|
<div>{{ chipArrid[chip.attr_id] }}</div>
|
|
<div>+{{ (chip.val * 100).toFixed(2) }}%</div>
|
|
</div>
|
|
|
|
<div class="def-item">LUCKY Unlocked at Lv.5</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
<div class="buy-price">
|
|
<div class="price"><span class="price-number">9999.99</span></div>
|
|
<div class="buy-img">
|
|
<a href="">
|
|
<img src="../../../assets/market/hero/buy.png" alt="aoi-hero"
|
|
/></a>
|
|
</div>
|
|
</div>
|
|
<span @click="closeTip" class="close">
|
|
<img src="../../../assets/market/hero/cose.png" alt="" />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import LevelStar from "./LevelStar.vue";
|
|
import LevelValue from "./LevelValue.vue";
|
|
import AccountCard from "./AccountCard.vue";
|
|
import ProgressCard from "./ProgressCard.vue";
|
|
import MosaicChip from "./MosaicChip.vue";
|
|
import { formatAddress } from "@/utils/formatAddress";
|
|
import { formatSelect } from "@/utils/UTCTime";
|
|
export default {
|
|
components: { LevelStar, ProgressCard, LevelValue, AccountCard,MosaicChip },
|
|
name: "HeroModal",
|
|
data() {
|
|
return {
|
|
detailVisible: false,
|
|
hero: "",
|
|
isTabs: false,
|
|
chipsid: 0,
|
|
cunter: 0,
|
|
name: "",
|
|
chipArrid: {
|
|
39: "Hp Pct",
|
|
40: "Atk Pct",
|
|
41: "Def Pct",
|
|
42: "Critical",
|
|
43: "Cri Damage",
|
|
44: "Dodge",
|
|
45: "Dodge Reduce",
|
|
46: "Hp Recover Pct",
|
|
47: "Brain Life Pct",
|
|
48: "Reload Time Pct",
|
|
49: "Bullet Speed",
|
|
50: "Bullet Speed Pct",
|
|
51: "Cool Down Pct",
|
|
},
|
|
};
|
|
},
|
|
// created() {
|
|
// let list = this.hero.detail.chips_info.sort((a, b) => {
|
|
// if (a == null) return -1;
|
|
// if (b == null) return 1;
|
|
// return (b.idx || 0) - (a.idx || 0);
|
|
// });
|
|
// console.log(list);
|
|
// },
|
|
computed: {
|
|
level() {
|
|
return this.hero.info ? this.hero.info.level : false;
|
|
},
|
|
|
|
address() {
|
|
return formatAddress(
|
|
this.hero.detail.chips_info[this.chipsid].nft_address
|
|
);
|
|
},
|
|
modifytime() {
|
|
return formatSelect(this.hero.detail.chips_info[this.chipsid].modifytime);
|
|
},
|
|
chipList() {
|
|
if (this.chipsid == 5) {
|
|
let s = 0;
|
|
this.hero.detail.chip_core.forEach((item) => {
|
|
s += parseFloat(item.val);
|
|
});
|
|
return s;
|
|
} else {
|
|
return this.hero.detail.chips_info[this.chipsid].rand_attr;
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
closeTip() {
|
|
// 分发自定义事件(事件名: closeTip)
|
|
this.$emit("closeTip");
|
|
},
|
|
handHeroTab() {
|
|
// this.$emit("closeTip", false);
|
|
this.isTabs = false;
|
|
},
|
|
handChipTab() {
|
|
// this.$emit("showTip", true);
|
|
this.isTabs = true;
|
|
},
|
|
handChipDetils(i) {
|
|
this.chipsid = i;
|
|
},
|
|
init(data) {
|
|
this.detailVisible = true;
|
|
this.hero = data;
|
|
},
|
|
},
|
|
// watch: {
|
|
// isShow: {
|
|
// //弹出层禁止背景页面滑动
|
|
// watch: {
|
|
// isShow: {
|
|
// //弹出层禁止背景页面滑动
|
|
// handler(val) {
|
|
// var mo = function (e) {
|
|
// e.preventDefault();
|
|
// };
|
|
// if (val) {
|
|
// document.getElementById("container").style.overflow = "hidden";
|
|
// document.getElementById("container").style.position = "fixed";
|
|
// document.addEventListener("touchmove", mo, false); //禁止页面滑动
|
|
// } else {
|
|
// document.getElementById("container").style.overflow = ""; //出现滚动条
|
|
// document.getElementById("container").style.position = "";
|
|
// document.removeEventListener("touchmove", mo, false);
|
|
// }
|
|
// },
|
|
// },
|
|
// },
|
|
// },
|
|
// },
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.wmassageMask {
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
background-color: rgba(20, 28, 34, 0.6);
|
|
z-index: 9999;
|
|
.content {
|
|
position: relative;
|
|
.close {
|
|
width: 104px;
|
|
height: 104px;
|
|
position: absolute;
|
|
cursor: pointer;
|
|
right: 0px;
|
|
top: 31px;
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
.hero-details-info {
|
|
position: absolute;
|
|
top: 21%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 830px;
|
|
height: 830px;
|
|
display: flex;
|
|
justify-content: center;
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.hero-details {
|
|
width: 930px;
|
|
margin: 0 auto;
|
|
height: 790px;
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.tabs {
|
|
position: absolute;
|
|
top: 122px;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 504px;
|
|
height: 95px;
|
|
background: #6b95eb;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border: 4px solid rgba(222, 249, 255, 0.3);
|
|
border-radius: 46px;
|
|
.hero-tab {
|
|
width: 224px;
|
|
height: 71px;
|
|
font-size: 39px;
|
|
color: #ffffff;
|
|
line-height: 71px;
|
|
text-align: center;
|
|
background: #3a65cf;
|
|
border-radius: 36px;
|
|
}
|
|
.chip-tab {
|
|
width: 224px;
|
|
height: 71px;
|
|
color: #172e5c;
|
|
line-height: 71px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.hero-chip {
|
|
margin-top: 103px;
|
|
margin-left: 19px;
|
|
.chips {
|
|
position: relative;
|
|
}
|
|
.chip-top-info {
|
|
margin-top: 103px;
|
|
height: 300px;
|
|
}
|
|
.chip-top {
|
|
display: flex;
|
|
position: absolute;
|
|
top: 42px;
|
|
margin-left: 148px;
|
|
}
|
|
.chip-bottom {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-right: 25px;
|
|
}
|
|
.chip-reactor-item {
|
|
width: 313px;
|
|
height: 330px;
|
|
display: flex;
|
|
background: url("../../../assets/market/chip-mb-rector-bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.reactor-bg {
|
|
.hill-icon-img {
|
|
cursor: pointer;
|
|
margin-left: 35px;
|
|
margin-top: 38px;
|
|
width: 244px;
|
|
height: 240px;
|
|
}
|
|
}
|
|
.active-bg {
|
|
width: 169px;
|
|
height: 146px;
|
|
background: url("../../../assets/market/artive-bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
margin-left: 33px;
|
|
margin-top: 54px;
|
|
display: flex;
|
|
justify-content: center;
|
|
.hill-icon-img {
|
|
cursor: pointer;
|
|
margin-top: 13px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
.chip-item-right {
|
|
width: 313px;
|
|
height: 330px;
|
|
display: flex;
|
|
background: url("../../../assets/market/chip-mobile-bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
.bg {
|
|
width: 192px;
|
|
height: 214px;
|
|
background: url("../../../assets/market/chip-mb-item-bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
margin-left: 65px;
|
|
margin-top: 54px;
|
|
display: flex;
|
|
justify-content: center;
|
|
.hill-icon-img {
|
|
width: 141px;
|
|
height: 156px;
|
|
cursor: pointer;
|
|
margin-top: 23px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
.active-bg {
|
|
width: 192px;
|
|
height: 214px;
|
|
background: url("../../../assets/market/mb-artive-bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
margin-left: 65px;
|
|
margin-top: 54px;
|
|
display: flex;
|
|
justify-content: center;
|
|
.hill-icon-img {
|
|
width: 141px;
|
|
height: 156px;
|
|
cursor: pointer;
|
|
margin-top: 23px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
.chip-item-left {
|
|
width: 313px;
|
|
height: 330px;
|
|
display: flex;
|
|
background: url("../../../assets/market/chip-mb-left-bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
.bg {
|
|
width: 192px;
|
|
height: 214px;
|
|
background: url("../../../assets/market/chip-mb-item-bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
margin-left: 52px;
|
|
margin-top: 54px;
|
|
display: flex;
|
|
justify-content: center;
|
|
.hill-icon-img {
|
|
width: 141px;
|
|
height: 156px;
|
|
cursor: pointer;
|
|
margin-top: 23px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
.active-bg {
|
|
width: 192px;
|
|
height: 214px;
|
|
background: url("../../../assets/market/mb-artive-bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
margin-left: 52px;
|
|
margin-top: 54px;
|
|
display: flex;
|
|
justify-content: center;
|
|
.hill-icon-img {
|
|
width: 141px;
|
|
height: 156px;
|
|
cursor: pointer;
|
|
margin-top: 23px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.chip-info {
|
|
.token-content {
|
|
width: 487px;
|
|
margin: 0 auto;
|
|
.token-name {
|
|
text-align: center;
|
|
font-size: 56px;
|
|
// font-family: "Bahnschrift";
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
}
|
|
.token-id {
|
|
width: 487px;
|
|
height: 80px;
|
|
text-align: center;
|
|
font-size: 44px;
|
|
font-weight: bold;
|
|
line-height: 80px;
|
|
color: #ffffff;
|
|
background: #28c1ed;
|
|
border: 4px solid rgba(91, 211, 246, 0.4);
|
|
border-radius: 33px;
|
|
}
|
|
}
|
|
.hp-bottom {
|
|
width: 684px;
|
|
height: 203px;
|
|
margin: 0 auto;
|
|
font-size: 35px;
|
|
font-family: "Bahnschrift";
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
margin-top: 38px;
|
|
padding-right: 31px;
|
|
padding-left: 31px;
|
|
padding-top: 40px;
|
|
background: rgba(5, 57, 68, 0.3);
|
|
border-radius: 20px;
|
|
.userinfo {
|
|
display: flex;
|
|
margin-bottom: 20px;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
.def-content {
|
|
width: 710px;
|
|
margin: 0 auto;
|
|
// height: 322px;
|
|
padding-top: 30px;
|
|
padding-left: 18px;
|
|
padding-right: 18px;
|
|
height: 292px;
|
|
background: rgba(5, 57, 68, 0.3);
|
|
border-radius: 14px;
|
|
margin-top: 25px;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
.def-item {
|
|
width: 651px;
|
|
height: 53px;
|
|
margin: 0 auto;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-radius: 10px;
|
|
margin-bottom: 14px;
|
|
padding-right: 39px;
|
|
padding-left: 16px;
|
|
}
|
|
}
|
|
}
|
|
.messageMaskContent {
|
|
position: absolute;
|
|
top: 350px;
|
|
left: 26px;
|
|
width: 1026px;
|
|
height: 1648px;
|
|
background: url("../../../assets/mobile/market/modal-bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.hero-bottom {
|
|
display: flex;
|
|
margin-left: 39px;
|
|
.hero-right-token {
|
|
width: 402px;
|
|
|
|
color: #ffffff;
|
|
|
|
.token-name {
|
|
text-align: center;
|
|
margin-top: 25px;
|
|
font-size: 34px;
|
|
margin-bottom: 11px;
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
}
|
|
.token-id {
|
|
width: 402px;
|
|
height: 41px;
|
|
font-size: 34px;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
line-height: 49px;
|
|
text-align: center;
|
|
margin-bottom: 32px;
|
|
background: #28c1ed;
|
|
border: 4px solid rgba(91, 211, 246, 0.4);
|
|
border-radius: 24px;
|
|
}
|
|
.hill {
|
|
width: 395px;
|
|
height: 569px;
|
|
margin-top: 31px;
|
|
background: url("../../../assets/market/hero/hill-bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
.hill-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-top: 15px;
|
|
margin-left: 32px;
|
|
margin-right: 24px;
|
|
// margin-top: 30px
|
|
margin-bottom: 26px;
|
|
}
|
|
.hill-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.hill-name {
|
|
font-size: 53px;
|
|
//
|
|
position: relative;
|
|
color: #ffffff;
|
|
}
|
|
.progress {
|
|
margin-top: 19px;
|
|
}
|
|
.progress-number {
|
|
font-size: 20px;
|
|
|
|
font-style: italic;
|
|
color: #ffffff;
|
|
}
|
|
.name {
|
|
font-size: 19px;
|
|
position: absolute;
|
|
left: -27px;
|
|
bottom: -21px;
|
|
// font-family: "OPPOSans";
|
|
font-weight: normal;
|
|
color: #ffffff;
|
|
margin-left: 33px;
|
|
}
|
|
.star {
|
|
width: 344px;
|
|
height: 67px;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
// opacity: 0.2;
|
|
border-radius: 30px;
|
|
margin-left: 23px;
|
|
margin-top: 19px;
|
|
margin-bottom: 20px;
|
|
.level-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.level-levelList {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.level {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-right: 22px;
|
|
margin-left: 32px;
|
|
.level-lable {
|
|
font-size: 44px;
|
|
font-style: italic;
|
|
color: #ffffff;
|
|
margin-right: 9px;
|
|
}
|
|
.level-number {
|
|
font-size: 51px;
|
|
font-style: italic;
|
|
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
.lucky-value {
|
|
width: 174px;
|
|
height: 64px;
|
|
background: rgba(249, 140, 23, 0.7);
|
|
display: flex;
|
|
padding-left: 4px;
|
|
align-items: center;
|
|
border-radius: 29px;
|
|
}
|
|
.lucky-img {
|
|
width: 57px;
|
|
height: 57px;
|
|
background: rgba(250, 178, 100, 0.8);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
line-height: 50px;
|
|
margin-right: 5px;
|
|
border-radius: 50%;
|
|
img {
|
|
width: 45px;
|
|
height: 45px;
|
|
}
|
|
}
|
|
.lucky-text {
|
|
font-size: 4px;
|
|
white-space: nowrap;
|
|
font-style: italic;
|
|
color: #ffffff;
|
|
line-height: 23px;
|
|
}
|
|
.lucky-number {
|
|
font-size: 22px;
|
|
font-style: italic;
|
|
color: #ffffff;
|
|
line-height: 33px;
|
|
}
|
|
.numerical-value {
|
|
width: 345px;
|
|
height: 73px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
margin-top: 18px;
|
|
margin-bottom: 14px;
|
|
border-radius: 12px;
|
|
.numerical-left {
|
|
width: 61px;
|
|
height: 63px;
|
|
margin-top: 5px;
|
|
margin-left: 6px;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
img {
|
|
width: 100%;
|
|
height: 50px;
|
|
margin-top: 9px;
|
|
}
|
|
}
|
|
.numerical-right {
|
|
margin-left: 16px;
|
|
width: 242px;
|
|
}
|
|
}
|
|
.lightning {
|
|
background: rgba(81, 194, 224, 0.7);
|
|
}
|
|
.lightning-left {
|
|
background: #7dd6ff;
|
|
border-radius: 10px;
|
|
}
|
|
.aggressivity {
|
|
background: rgba(184, 77, 204, 0.7);
|
|
}
|
|
.aggressivity-left {
|
|
background: #ca61dc;
|
|
border-radius: 10px;
|
|
}
|
|
.defense {
|
|
background: rgba(193, 168, 93, 0.7);
|
|
}
|
|
.defense-left {
|
|
background: #d0bd7a;
|
|
border-radius: 10px;
|
|
}
|
|
.lucky-boder {
|
|
width: 100px;
|
|
height: 2px;
|
|
background: linear-gradient(
|
|
90deg,
|
|
#ffffff 0%,
|
|
rgba(255, 255, 255, 0.1) 90%,
|
|
rgba(255, 255, 255, 0) 100%
|
|
);
|
|
border-radius: 1px;
|
|
}
|
|
}
|
|
}
|
|
.hero-right-hp {
|
|
margin-left: 28px;
|
|
.hero-hp {
|
|
width: 464px;
|
|
height: 523px;
|
|
background: rgba(5, 57, 68, 0.3);
|
|
padding-top: 29px;
|
|
padding-left: 35px;
|
|
padding-right: 31px;
|
|
border-radius: 20px;
|
|
.hero-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 27px;
|
|
font-family: "Bahnschrift";
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
.item {
|
|
display: flex;
|
|
font-size: 27px;
|
|
font-family: "Bahnschrift";
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
.item-img {
|
|
width: 36px;
|
|
height: 36px;
|
|
|
|
margin-right: 26px;
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.hero-item-hp {
|
|
margin-bottom: 23px;
|
|
}
|
|
.hero-item-attack {
|
|
margin-bottom: 23px;
|
|
}
|
|
.hero-item-def {
|
|
margin-bottom: 23px;
|
|
}
|
|
.hero-item-cri {
|
|
margin-bottom: 23px;
|
|
}
|
|
.hero-item-criDam {
|
|
margin-bottom: 23px;
|
|
}
|
|
.hero-item-dodge {
|
|
margin-bottom: 23px;
|
|
}
|
|
.hero-item-reduces {
|
|
margin-bottom: 23px;
|
|
}
|
|
}
|
|
|
|
.hp-bottom {
|
|
width: 490px;
|
|
// height: 143px;
|
|
font-size: 25px;
|
|
padding-bottom: 3px;
|
|
font-family: "Bahnschrift";
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
margin-top: 13px;
|
|
padding-right: 20px;
|
|
padding-left: 20px;
|
|
padding-top: 18px;
|
|
background: rgba(5, 57, 68, 0.3);
|
|
border-radius: 20px;
|
|
.userinfo {
|
|
display: flex;
|
|
margin-bottom: 12px;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.buy-price {
|
|
position: absolute;
|
|
left: 96px;
|
|
bottom: -41px;
|
|
display: flex;
|
|
.price {
|
|
width: 283px;
|
|
height: 100px;
|
|
font-size: 48px;
|
|
position: relative;
|
|
color: #ffffff;
|
|
background: url("../../../assets/market/hero/price.png") no-repeat;
|
|
background-size: contain;
|
|
.price-number {
|
|
position: absolute;
|
|
right: 35px;
|
|
top: 20px;
|
|
// right: 82px;
|
|
// bottom: -41px;
|
|
}
|
|
}
|
|
.buy-img {
|
|
margin-left: 31px;
|
|
width: 523px;
|
|
height: 100px;
|
|
img {
|
|
width: 523px;
|
|
height: 100px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.star-img {
|
|
width: 47px;
|
|
height: 45px;
|
|
margin-right: 16px;
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
::v-deep {
|
|
.el-button--mini,
|
|
.el-button--small {
|
|
font-size: 0.44rem;
|
|
border-radius: 0.59rem;
|
|
width: 40%;
|
|
font-family: PingFang SC;
|
|
}
|
|
.el-button--primary {
|
|
background: #0464c6;
|
|
border-color: #0464c6;
|
|
}
|
|
.el-button--primary.is-disabled {
|
|
background: #a0cfff;
|
|
border-color: #a0cfff;
|
|
}
|
|
.el-button--default {
|
|
color: #0464c6;
|
|
border: 1px solid #0464c6;
|
|
}
|
|
}
|
|
.lucky-text {
|
|
font-size: 17px;
|
|
}
|
|
</style>
|