fix
This commit is contained in:
huangjinming
parent
b8b6ad4d13
commit
f57d284240
BIN
src/assets/market/lock.png
Normal file
BIN
src/assets/market/lock.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 568 B |
@ -189,7 +189,7 @@
|
||||
</Transition>
|
||||
<Transition v-else>
|
||||
<div>
|
||||
<MosaicChipDialog /></div
|
||||
<WeaponMosaicChip :data="data" /></div
|
||||
></Transition>
|
||||
<div class="buy-price">
|
||||
<div class="mynft" v-if="isType === 'mynft'">
|
||||
@ -217,8 +217,17 @@
|
||||
<div :class="isTabs ? 'chip-tab' : 'hero-tab'" @click="handHeroTab">
|
||||
WEAPON
|
||||
</div>
|
||||
<div :class="isTabs ? 'hero-tab' : 'chip-tab'" @click="handChipTab">
|
||||
CHIP
|
||||
<div>
|
||||
<div
|
||||
v-if="data.detail.chip_core.length > 0"
|
||||
:class="isTabs ? 'hero-tab' : 'chip-tab'"
|
||||
@click="handChipTab"
|
||||
>
|
||||
CHIP
|
||||
</div>
|
||||
<div v-else :class="isTabs ? 'hero-tab' : 'chip-tab'">
|
||||
<img width="46px" src="../../assets/market/lock.png" alt="aoi-hero" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Close @closeMyself="closeMyself" />
|
||||
@ -228,7 +237,7 @@
|
||||
<script>
|
||||
import LeveStars from "./LeveStars.vue";
|
||||
import Close from "./Close.vue";
|
||||
import MosaicChipDialog from "./MosaicChipDialog.vue";
|
||||
import WeaponMosaicChip from "./WeaponMosaicChip.vue";
|
||||
import AccountCard from "./AccountCard.vue";
|
||||
import ProgressCard from "./ProgressCard.vue";
|
||||
import LuckyValue from "./LuckyValue.vue";
|
||||
@ -238,7 +247,7 @@ export default {
|
||||
Close,
|
||||
AccountCard,
|
||||
ProgressCard,
|
||||
MosaicChipDialog,
|
||||
WeaponMosaicChip,
|
||||
LuckyValue,
|
||||
},
|
||||
props: ["dialogVisible", "data", "isType"],
|
||||
|
||||
@ -9,12 +9,44 @@
|
||||
<div class="bg"></div>
|
||||
<div class="contaier">
|
||||
<div class="hero-left">
|
||||
<img v-if="hero.c_id" :src="require('@/assets/market/hero/details/' + hero.c_id + '_full.png')" alt="aoi-hero" />
|
||||
<img v-if="hero.item_id" :src="require('@/assets/market/hero/details/' + hero.item_id + '_full.png')" alt="aoi-hero" />
|
||||
<img
|
||||
v-if="hero.c_id"
|
||||
:src="
|
||||
require('@/assets/market/hero/details/' +
|
||||
hero.c_id +
|
||||
'_full.png')
|
||||
"
|
||||
alt="aoi-hero"
|
||||
/>
|
||||
<img
|
||||
v-if="hero.item_id"
|
||||
:src="
|
||||
require('@/assets/market/hero/details/' +
|
||||
hero.item_id +
|
||||
'_full.png')
|
||||
"
|
||||
alt="aoi-hero"
|
||||
/>
|
||||
</div>
|
||||
<div class="hero-left-info">
|
||||
<img v-if="hero.c_id" :src="require('@/assets/market/hero/details/' + hero.c_id + '_full.png')" alt="aoi-hero" />
|
||||
<img v-if="hero.item_id" :src="require('@/assets/market/hero/details/' + hero.item_id + '_full.png')" alt="aoi-hero" />
|
||||
<img
|
||||
v-if="hero.c_id"
|
||||
:src="
|
||||
require('@/assets/market/hero/details/' +
|
||||
hero.c_id +
|
||||
'_full.png')
|
||||
"
|
||||
alt="aoi-hero"
|
||||
/>
|
||||
<img
|
||||
v-if="hero.item_id"
|
||||
:src="
|
||||
require('@/assets/market/hero/details/' +
|
||||
hero.item_id +
|
||||
'_full.png')
|
||||
"
|
||||
alt="aoi-hero"
|
||||
/>
|
||||
</div>
|
||||
<div class="hero-right-token">
|
||||
<div class="token-name">TOKEN ID</div>
|
||||
@ -230,7 +262,7 @@
|
||||
</Transition>
|
||||
<Transition v-else>
|
||||
<div>
|
||||
<MosaicChipDialog /></div
|
||||
<MosaicChipDialog :type="type" :hero="hero" /></div
|
||||
></Transition>
|
||||
<div class="buy-price">
|
||||
<div class="mynft" v-if="isType === 'mynft'">
|
||||
@ -258,8 +290,17 @@
|
||||
<div :class="isTabs ? 'chip-tab' : 'hero-tab'" @click="handHeroTab">
|
||||
HERO
|
||||
</div>
|
||||
<div :class="isTabs ? 'hero-tab' : 'chip-tab'" @click="handChipTab">
|
||||
CHIP
|
||||
<div>
|
||||
<div
|
||||
v-if="hero.detail.chip_core.length > 0"
|
||||
:class="isTabs ? 'hero-tab' : 'chip-tab'"
|
||||
@click="handChipTab"
|
||||
>
|
||||
CHIP
|
||||
</div>
|
||||
<div v-else :class="isTabs ? 'hero-tab' : 'chip-tab'">
|
||||
<img width="46px" src="../../assets/market/lock.png" alt="aoi-hero" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Close @closeMyself="closeMyself" />
|
||||
@ -272,7 +313,7 @@ import Close from "./Close.vue";
|
||||
import AccountCard from "./AccountCard.vue";
|
||||
import ProgressCard from "./ProgressCard.vue";
|
||||
import LuckyValue from "./LuckyValue.vue";
|
||||
import MosaicChipDialog from "./MosaicChipDialog.vue";
|
||||
import MosaicChipDialog from "./MosaicChip.vue";
|
||||
|
||||
export default {
|
||||
props: ["dialogVisible", "hero", "isType"],
|
||||
@ -595,7 +636,8 @@ export default {
|
||||
.hero-tab {
|
||||
width: 306px;
|
||||
height: 80px;
|
||||
font-size: 46px;
|
||||
// font-size: 46px;
|
||||
font-size: 63px;
|
||||
font-family: "SairaStencilOne";
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
@ -608,7 +650,7 @@ export default {
|
||||
.chip-tab {
|
||||
width: 290px;
|
||||
height: 70px;
|
||||
font-size: 63px;
|
||||
font-size: 46px;
|
||||
line-height: 70px;
|
||||
margin-right: 10px;
|
||||
text-align: center;
|
||||
|
||||
445
src/components/market/MosaicChip.vue
Normal file
445
src/components/market/MosaicChip.vue
Normal file
@ -0,0 +1,445 @@
|
||||
<template>
|
||||
<div class="hero-right">
|
||||
<div class="bg"></div>
|
||||
<div class="container">
|
||||
<div class="left-img" v-show="type == 'hero'">
|
||||
<img
|
||||
v-if="hero.c_id"
|
||||
:src="
|
||||
require('@/assets/market/hero/details/' + hero.c_id + '_full.png')
|
||||
"
|
||||
alt="aoi-hero"
|
||||
/>
|
||||
<img
|
||||
v-if="hero.item_id"
|
||||
:src="
|
||||
require('@/assets/market/hero/details/' +
|
||||
hero.item_id +
|
||||
'_full.png')
|
||||
"
|
||||
alt="aoi-hero"
|
||||
/>
|
||||
</div>
|
||||
<div class="img-details" v-show="type == 'hero'">
|
||||
<img
|
||||
v-if="hero.c_id"
|
||||
:src="
|
||||
require('@/assets/market/hero/details/' + hero.c_id + '_full.png')
|
||||
"
|
||||
alt="aoi-hero"
|
||||
/>
|
||||
<img
|
||||
v-if="hero.item_id"
|
||||
:src="
|
||||
require('@/assets/market/hero/details/' +
|
||||
hero.item_id +
|
||||
'_full.png')
|
||||
"
|
||||
alt="aoi-hero"
|
||||
/>
|
||||
</div>
|
||||
<div class="chip-left">
|
||||
<div class="chip-tab-left">
|
||||
<div class="chip-item">
|
||||
<div class="bg">
|
||||
<img
|
||||
class="hill-icon-img"
|
||||
width="169px"
|
||||
src="../../assets/market/chip-item-bg.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chip-item">
|
||||
<div class="bg">
|
||||
<img
|
||||
class="hill-icon-img"
|
||||
width="169px"
|
||||
src="../../assets/market/chip-item-bg.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="left-content"></div> -->
|
||||
<div class="chip-tab-right">
|
||||
<div class="chip-item">
|
||||
<div class="bg">
|
||||
<img
|
||||
class="hill-icon-img"
|
||||
width="169px"
|
||||
src="../../assets/market/chip-item-bg.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chip-item">
|
||||
<div class="bg">
|
||||
<img
|
||||
class="hill-icon-img"
|
||||
width="169px"
|
||||
src="../../assets/market/chip-item-bg.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chip-item">
|
||||
<div class="bg">
|
||||
<img
|
||||
class="hill-icon-img"
|
||||
width="169px"
|
||||
src="../../assets/market/chip-item-bg.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chip-right">
|
||||
<div class="chip-right-top">
|
||||
<div class="token-lable">TOKEN ID</div>
|
||||
<div class="token-id">#3006985843100103</div>
|
||||
</div>
|
||||
<div class="chip-right-bottom">
|
||||
<div class="chip-assult">
|
||||
<div class="owner">
|
||||
<div class="owner-content">
|
||||
<div>Owner :</div>
|
||||
<div>0x21cE………e1a4</div>
|
||||
</div>
|
||||
<div class="owner-mint">
|
||||
<div>Mint Time :</div>
|
||||
<div>2022-12-31 23:59:59 UTC</div>
|
||||
</div>
|
||||
<div class="owner-history">
|
||||
<div>History :</div>
|
||||
<div>#3006985843100103 (NFTLink)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="def-content">
|
||||
<div class="def-item">
|
||||
<div>DEF PCT</div>
|
||||
<div>+8%</div>
|
||||
</div>
|
||||
<div class="def-item">
|
||||
<div>DEF PCT</div>
|
||||
<div>+7.2%</div>
|
||||
</div>
|
||||
<div class="def-item" style="justify-content: center">
|
||||
Unlocked at Lv.5
|
||||
</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>
|
||||
<a href="javascript:void(0)">
|
||||
<img
|
||||
width="263px"
|
||||
height="71px"
|
||||
src="../../assets/market/hero/buy.png"
|
||||
alt="aoi-hero"
|
||||
/></a>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<!-- <span @click="closeTip" class="close">
|
||||
<img
|
||||
src="../../assets/market/hero/cose.png"
|
||||
width="56px"
|
||||
height="56px"
|
||||
alt=""
|
||||
/></span> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["hero", "isTab", "type"],
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
piece: "",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
closeTip() {
|
||||
// 分发自定义事件(事件名: closeTip)
|
||||
this.$emit("closeTip", false);
|
||||
},
|
||||
showTip() {
|
||||
this.$emit("showTip", true);
|
||||
},
|
||||
closeMyself() {},
|
||||
init(data) {
|
||||
this.dialogVisible = true;
|
||||
this.piece = data;
|
||||
console.log(data, "dfgdg");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-dialog,
|
||||
.el-pager li {
|
||||
position: relative;
|
||||
width: 1354px !important;
|
||||
height: 775px !important;
|
||||
background: url("../../assets/market/piece/details/bg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
box-shadow: none;
|
||||
}
|
||||
::v-deep .el-dialog__body {
|
||||
padding: 0px 0px !important;
|
||||
}
|
||||
::v-deep .el-dialog__header {
|
||||
padding: 0px 0px 0px;
|
||||
}
|
||||
|
||||
.contaier {
|
||||
display: flex;
|
||||
}
|
||||
.close {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
right: -46px;
|
||||
top: -31px;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
|
||||
.chip-left {
|
||||
position: relative;
|
||||
margin-left: 128px;
|
||||
// margin-top: 137px;
|
||||
display: flex;
|
||||
margin-right: 51px;
|
||||
.left-content {
|
||||
width: 232px;
|
||||
}
|
||||
.chip-tab-left {
|
||||
position: absolute;
|
||||
right: 198px;
|
||||
margin-left: 96px;
|
||||
margin-top: 129px;
|
||||
.chip-item {
|
||||
width: 252px;
|
||||
display: flex;
|
||||
height: 238px;
|
||||
background: url("../../assets/market/chip-bg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.bg {
|
||||
margin-left: 33px;
|
||||
margin-top: 54px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.chip-item {
|
||||
width: 252px;
|
||||
height: 238px;
|
||||
display: flex;
|
||||
background: url("../../assets/market/chip-bg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.bg {
|
||||
margin-left: 33px;
|
||||
margin-top: 53px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.chip-right {
|
||||
width: 431px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
.chip-right-top {
|
||||
color: #ffffff;
|
||||
// margin-left: 137px;
|
||||
width: 431px;
|
||||
margin: 0 auto;
|
||||
.token-lable {
|
||||
text-align: center;
|
||||
font-size: 46px;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
}
|
||||
.token-id {
|
||||
font-size: 36px;
|
||||
font-family: "Bahnschrift";
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
width: 398px;
|
||||
height: 66px;
|
||||
margin: 0 auto;
|
||||
line-height: 66px;
|
||||
text-align: center;
|
||||
margin-bottom: 26px;
|
||||
background: #28c1ed;
|
||||
border: 4px solid rgba(91, 211, 246, 0.4);
|
||||
border-radius: 24px;
|
||||
}
|
||||
}
|
||||
.chip-right-bottom {
|
||||
display: flex;
|
||||
}
|
||||
.chip-assult {
|
||||
}
|
||||
.owner {
|
||||
width: 428px;
|
||||
height: 147px;
|
||||
background: rgba(5, 57, 68, 0.3);
|
||||
border-radius: 14px;
|
||||
padding-top: 30px;
|
||||
padding-left: 25px;
|
||||
font-size: 21px;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
}
|
||||
.assult-rifle {
|
||||
width: 431px;
|
||||
height: 263px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// justify-content: space-between;
|
||||
background: rgba(5, 57, 68, 0.3);
|
||||
border-radius: 20px;
|
||||
}
|
||||
.assult-rifle-name {
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
height: 26px;
|
||||
font-size: 37px;
|
||||
// font-family: "SairaStencilOne";
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.hill-icon {
|
||||
margin-top: 14px;
|
||||
margin-right: 14px;
|
||||
.hill-icon-img {
|
||||
}
|
||||
}
|
||||
.assult-rifle-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.level {
|
||||
margin-top: 23px;
|
||||
margin-left: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.level-number {
|
||||
font-size: 41px;
|
||||
font-style: italic;
|
||||
margin-left: 4px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.piece-number {
|
||||
font-size: 29px;
|
||||
margin-right: 24px;
|
||||
font-family: "Bahnschrift";
|
||||
font-weight: bold;
|
||||
line-height: 52px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.level-name {
|
||||
font-size: 31px;
|
||||
font-family: "Bahnschrift";
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.owner-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-right: 25px;
|
||||
}
|
||||
.owner-mint {
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
margin-right: 25px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.owner-history {
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
margin-right: 25px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
// .buy-price {
|
||||
// position: absolute;
|
||||
// right: 44px;
|
||||
// bottom: -33px;
|
||||
// display: flex;
|
||||
// .price {
|
||||
// width: 201px;
|
||||
// height: 71px;
|
||||
// font-size: 32px;
|
||||
// position: relative;
|
||||
// font-family: "Arciform";
|
||||
// margin-right: 20px;
|
||||
// color: #ffffff;
|
||||
// background: url("../../assets/market/hero/price.png") no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// .price-number {
|
||||
// position: absolute;
|
||||
// right: 19px;
|
||||
// top: 13px;
|
||||
// font-size: 34px;
|
||||
// // right: 82px;
|
||||
// // bottom: -41px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
.left-img {
|
||||
width: 802px;
|
||||
img {
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.img-details {
|
||||
width: 802px;
|
||||
height: 651px;
|
||||
position: absolute;
|
||||
top: -41px;
|
||||
left: -40px;
|
||||
// opacity: 0;
|
||||
img {
|
||||
width: 100%;
|
||||
// opacity: 0;
|
||||
}
|
||||
}
|
||||
.def-content {
|
||||
width: 428px;
|
||||
padding-top: 25px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
height: 265px;
|
||||
background: rgba(5, 57, 68, 0.3);
|
||||
border-radius: 14px;
|
||||
margin-top: 25px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
.def-item {
|
||||
width: 369px;
|
||||
height: 48px;
|
||||
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: 18px;
|
||||
padding-left: 19px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -2,9 +2,21 @@
|
||||
<div class="hero-right">
|
||||
<div class="bg"></div>
|
||||
<div class="container">
|
||||
<div class="left-img">
|
||||
<img src="" alt="" />
|
||||
<div class="hero-left-info">
|
||||
<div class="hero-left-info-img">
|
||||
<img
|
||||
v-if="data.item_id"
|
||||
:src="require('@/assets/market/weapon/' + data.item_id + '.png')"
|
||||
alt="aoi-hero"
|
||||
/>
|
||||
<img
|
||||
v-if="data.c_id"
|
||||
:src="require('@/assets/market/weapon/' + data.c_id + '.png')"
|
||||
alt="aoi-hero"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chip-left">
|
||||
<div class="chip-tab-left">
|
||||
<div class="chip-item">
|
||||
@ -126,7 +138,7 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["hero", "isTab"],
|
||||
props: ["data", "isTab", "type"],
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
@ -177,12 +189,35 @@ export default {
|
||||
right: -46px;
|
||||
top: -31px;
|
||||
}
|
||||
.hero-left-info {
|
||||
width: 702px;
|
||||
height: 702px;
|
||||
margin-top: 32px;
|
||||
margin-left: 38px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: url("../../assets/market/weapon/elliptical-bg.png") no-repeat;
|
||||
background-size: cover;
|
||||
.hero-left-info-img {
|
||||
width: 605px;
|
||||
height: 274px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 100%;
|
||||
// opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
|
||||
.chip-left {
|
||||
position: relative;
|
||||
margin-left: 88px;
|
||||
margin-left: 190px;
|
||||
// margin-top: 137px;
|
||||
display: flex;
|
||||
margin-right: 51px;
|
||||
@ -366,6 +401,21 @@ export default {
|
||||
// }
|
||||
.left-img {
|
||||
width: 802px;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.img-details {
|
||||
width: 802px;
|
||||
height: 651px;
|
||||
position: absolute;
|
||||
top: -41px;
|
||||
left: -40px;
|
||||
// opacity: 0;
|
||||
img {
|
||||
width: 100%;
|
||||
// opacity: 0;
|
||||
}
|
||||
}
|
||||
.def-content {
|
||||
width: 428px;
|
||||
@ -61,7 +61,7 @@
|
||||
desc=""
|
||||
></result-no>
|
||||
<pagination
|
||||
v-if="totalPage > 1"
|
||||
v-if="totalPage > 10"
|
||||
:total="totalPage"
|
||||
:current="currentPage"
|
||||
@to-page="toPage"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user