crypto/bemarket
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
huangjinming 2022-12-21 17:25:47 +08:00
parent 17a08a79f7
commit 4bf19316db
9 changed files with 288 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
src/components/market/HeroBuyTop.vue
View File

@ -1,7 +1,22 @@
<template> <template>
<div> <div>
<div class="hero-top"> <div class="hero-top">
<div class="hero-left"></div> <div :class="data.info.is_genesis ? 'piece-left' : 'piece-left-gen'">
<div>
<img
v-if="data.c_id"
width="159px"
:src="require('@/assets/market/hero/' + data.c_id + '.png')"
alt=""
/>
</div>
<div class="gen" v-if="data.info.is_genesis">
<img width="31px" src="../../assets/market/hero/gen.png" alt="" />
</div>
<div class="hero-name">
{{ data.c_name }}
</div>
</div>
<div class="hero-right"> <div class="hero-right">
<div class="userinfo"> <div class="userinfo">
<div class="srabded"> <div class="srabded">
@ -10,12 +25,14 @@
</div> </div>
<div class="token-id"> <div class="token-id">
<div>ERC721</div> <div>ERC721</div>
<div>#3006985843100103</div> <div>#{{ data.token_id }}</div>
</div> </div>
</div> </div>
<div class="priece"> <div class="priece">
<div class="priece-btn"> <div class="priece-btn">
<span class="priece-number">{{ hero.s_price ? hero.s_price : " " }}</span> <span class="priece-number">{{
data.s_price ? data.s_price : " "
}}</span>
</div> </div>
</div> </div>
</div> </div>
@ -24,10 +41,9 @@
</template> </template>
<script> <script>
export default { export default {
props:['hero'] props: ["data"],
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -92,5 +108,54 @@ export default {
} }
} }
} }
}
.piece-left {
width: 159px;
height: 177px;
position: relative;
background: url("../../assets/market/hero/type-1.png") no-repeat;
background-size: 100% 100%;
.hero-name {
// width: 46px;
height: 24px;
// max-width: 86px;
line-height: 24px;
padding-right: 14px;
padding-left: 14px;
background: url("../../assets/market/hero/name-bg.png") no-repeat;
background-size: 100% 100%;
position: absolute;
right: -1px;
text-align: center;
color: #fff;
bottom: 0px;
} }
}
.piece-left-gen {
width: 159px;
height: 177px;
background: url("../../assets/market/hero/type-0.png") no-repeat;
background-size: 100% 100%;
position: relative;
.gen {
position: absolute;
left: 3px;
top: 6px;
}
.hero-name {
// width: 46px;
height: 24px;
// max-width: 86px;
line-height: 24px;
padding-right: 14px;
padding-left: 14px;
background: url("../../assets/market/hero/name-bg.png") no-repeat;
background-size: 100% 100%;
position: absolute;
right: -1px;
text-align: center;
color: #fff;
bottom: 0px;
}
}
</style> </style>

52
src/components/market/HeroSellTop.vue
View File

@ -5,13 +5,22 @@
<div> <div>
<img <img
v-if="data.item_id" v-if="data.item_id"
width="214px" width="159px"
:src="require('@/assets/market/hero/' + data.item_id + '.png')" :src="require('@/assets/market/hero/' + data.item_id + '.png')"
alt="" alt=""
/> />
</div> </div>
<div></div> <div class="gen" v-if="data.info.is_genesis">
<div class="name"></div> <img
width="31px"
src="../../assets/market/hero/gen.png"
alt=""
/>
</div>
<div class="hero-name">
{{ data.detail.hero_name }}
</div>
</div> </div>
<div class="piece-right"> <div class="piece-right">
<div class="userinfo"> <div class="userinfo">
@ -120,13 +129,50 @@ export default {
.piece-left { .piece-left {
width: 159px; width: 159px;
height: 177px; height: 177px;
position: relative;
background: url("../../assets/market/hero/type-1.png") no-repeat; background: url("../../assets/market/hero/type-1.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
.hero-name {
// width: 46px;
height: 24px;
// max-width: 86px;
line-height: 24px;
padding-right: 14px;
padding-left: 14px;
background: url("../../assets/market/hero/name-bg.png") no-repeat;
background-size: 100% 100%;
position: absolute;
right: -1px;
text-align: center;
color: #fff;
bottom: 0px;
}
} }
.piece-left-gen { .piece-left-gen {
width: 159px; width: 159px;
height: 177px; height: 177px;
background: url("../../assets/market/hero/type-0.png") no-repeat; background: url("../../assets/market/hero/type-0.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
position: relative;
.gen {
position: absolute;
left: 3px;
top: 6px;
}
.hero-name {
// width: 46px;
height: 24px;
// max-width: 86px;
line-height: 24px;
padding-right: 14px;
padding-left: 14px;
background: url("../../assets/market/hero/name-bg.png") no-repeat;
background-size: 100% 100%;
position: absolute;
right: -1px;
text-align: center;
color: #fff;
bottom: 0px;
}
} }
</style> </style>

28
src/components/market/PieceSellTop.vue
View File

@ -1,7 +1,19 @@
<template> <template>
<div> <div>
<div class="piece-top"> <div class="piece-top">
<div class="piece-left"></div> <div class="piece-left">
<div class="piece-img">
<img
v-if="data.detail.item_id"
width="97px"
:src="
require('@/assets/market/piece/' + data.detail.item_id + '.png')
"
alt=""
/>
</div>
<div class="name">{{ data.detail.name }}</div>
</div>
<div class="piece-right"> <div class="piece-right">
<div class="userinfo"> <div class="userinfo">
<div class="srabded"> <div class="srabded">
@ -49,11 +61,9 @@
<script> <script>
export default { export default {
props: ["data",'cunout'], props: ["data", "cunout"],
data() { data() {
return { return {};
};
}, },
methods: { methods: {
handReduce() { handReduce() {
@ -181,5 +191,13 @@ export default {
height: 150px; height: 150px;
background: url("../../assets/market/chip/bg-there.png") no-repeat; background: url("../../assets/market/chip/bg-there.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
.piece-img {
margin-top: 20px;
margin-left: 21px;
}
.name {
width: 100%;
text-align: center;
}
} }
</style> </style>

6
src/components/market/TheBuyDialog.vue
View File

@ -2,7 +2,7 @@
<el-dialog :show-close="false" :visible.sync="isBuy"> <el-dialog :show-close="false" :visible.sync="isBuy">
<div class="bg"></div> <div class="bg"></div>
<div class="container"> <div class="container">
<HeroBuyTop :hero="hero"></HeroBuyTop> <HeroBuyTop :data="data"></HeroBuyTop>
<div class="priece-bottom"> <div class="priece-bottom">
<div class="token-usid"> <div class="token-usid">
<div class="token-item-top"> <div class="token-item-top">
@ -11,7 +11,7 @@
</div> </div>
<div class="token-item"> <div class="token-item">
<div>Price</div> <div>Price</div>
<div>{{ hero.s_price ? hero.s_price : " " }}</div> <div>{{ data.s_price ? data.s_price : " " }}</div>
</div> </div>
<div class="token-item-balance"> <div class="token-item-balance">
<div>Balance</div> <div>Balance</div>
@ -53,7 +53,7 @@
<script> <script>
import HeroBuyTop from "./HeroBuyTop.vue"; import HeroBuyTop from "./HeroBuyTop.vue";
export default { export default {
props: ["isBuy", "hero"], props: ["isBuy", "data"],
components: { HeroBuyTop }, components: { HeroBuyTop },
data() { data() {
return { return {

2
src/components/market/TheSellDialog.vue
View File

@ -92,7 +92,7 @@ export default {
data() { data() {
return { return {
piece: "", piece: "",
price:0, price:'',
cunout: 1, cunout: 1,
dialogVisible: false, dialogVisible: false,
isWeapon: false, isWeapon: false,

46
src/components/market/WeaponBuyDialog.vue
View File

@ -3,7 +3,19 @@
<div class="bg"></div> <div class="bg"></div>
<div class="container"> <div class="container">
<div class="hero-top"> <div class="hero-top">
<div class="hero-left"></div> <div class="piece-weapon-left">
<div class="weapon">
<img
v-if="data.c_id"
width="168px"
:src="require('@/assets/market/weapon/' + data.c_id + '.png')"
alt=""
/>
</div>
<div class="weapon-name">
{{ data.detail.gun_name }}
</div>
</div>
<div class="hero-right"> <div class="hero-right">
<div class="userinfo"> <div class="userinfo">
<div class="srabded"> <div class="srabded">
@ -12,7 +24,7 @@
</div> </div>
<div class="token-id"> <div class="token-id">
<div>ERC721</div> <div>ERC721</div>
<div>#3006985843100103</div> <div>#{{data.token_id}}</div>
</div> </div>
</div> </div>
<div class="priece"> <div class="priece">
@ -71,7 +83,7 @@
<script> <script>
export default { export default {
props: ["isBuy"], props: ["isBuy",'data'],
data() { data() {
return { return {
piece: "", piece: "",
@ -130,11 +142,31 @@ export default {
.hero-top { .hero-top {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.hero-left { .piece-weapon-left {
width: 217px; width: 200px;
height: 101px; height: 93px;
background: url("../../assets/market/chip/bg-there.png") no-repeat; position: relative;
background: url("../../assets/market/weapon/gun-bg.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
.weapon {
margin-top: 16px;
margin-left: 17px;
}
.weapon-name {
// width: 46px;
height: 15px;
// max-width: 86px;
line-height: 15px;
padding-right: 10px;
padding-left: 10px;
background: url("../../assets/market/hero/name-bg.png") no-repeat;
background-size: 100% 100%;
position: absolute;
right: 0px;
text-align: center;
color: #fff;
bottom: 0px;
}
} }
.hero-right { .hero-right {
font-size: 25px; font-size: 25px;

36
src/components/market/WeaponSellTop.vue
View File

@ -2,7 +2,19 @@
<div> <div>
<div class="weapon-piece-top"> <div class="weapon-piece-top">
<div class="item-top"> <div class="item-top">
<div class="piece-weapon-left"></div> <div class="piece-weapon-left">
<div class="weapon">
<img
v-if="data.item_id"
width="168px"
:src="require('@/assets/market/weapon/' + data.item_id + '.png')"
alt=""
/>
</div>
<div class="weapon-name">
{{ data.detail.gun_name }}
</div>
</div>
<div class="piece-weapon-right"> <div class="piece-weapon-right">
<div class="weapon-userinfo"> <div class="weapon-userinfo">
<div class="srabded"> <div class="srabded">
@ -56,8 +68,28 @@ export default {
.piece-weapon-left { .piece-weapon-left {
width: 200px; width: 200px;
height: 93px; height: 93px;
background: url("../../assets/market/chip/bg-there.png") no-repeat; position: relative;
background: url("../../assets/market/weapon/gun-bg.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
.weapon {
margin-top: 16px;
margin-left: 17px;
}
.weapon-name {
// width: 46px;
height: 15px;
// max-width: 86px;
line-height: 15px;
padding-right: 10px;
padding-left: 10px;
background: url("../../assets/market/hero/name-bg.png") no-repeat;
background-size: 100% 100%;
position: absolute;
right: 0px;
text-align: center;
color: #fff;
bottom: 0px;
}
} }
.piece-weapon-right { .piece-weapon-right {
.weapon-userinfo { .weapon-userinfo {

2
src/components/market/nft/HeroNft.vue
View File

@ -140,7 +140,7 @@
<TheBuyDialog <TheBuyDialog
:type="type" :type="type"
:isBuy="isBuy" :isBuy="isBuy"
:hero="data" :data="data"
@handBuyShow="handBuyShow" @handBuyShow="handBuyShow"
@handBuyHide="handBuyHide" @handBuyHide="handBuyHide"
></TheBuyDialog> ></TheBuyDialog>

1
src/components/market/nft/WeaponList.vue
View File

@ -113,6 +113,7 @@
<TheBuyDialog <TheBuyDialog
:type="type" :type="type"
:isBuy="isBuy" :isBuy="isBuy"
:data="weapon"
@handBuyShow="handBuyShow" @handBuyShow="handBuyShow"
@handBuyHide="handBuyHide" @handBuyHide="handBuyHide"
></TheBuyDialog> ></TheBuyDialog>