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

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

@ -1,96 +1,161 @@
<template>
<div>
<div class="hero-top">
<div class="hero-left"></div>
<div class="hero-right">
<div class="userinfo">
<div class="srabded">
<div>Srabded</div>
<div>ERC721</div>
</div>
<div class="token-id">
<div>ERC721</div>
<div>#3006985843100103</div>
</div>
<div class="hero-top">
<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="userinfo">
<div class="srabded">
<div>Srabded</div>
<div>ERC721</div>
</div>
<div class="priece">
<div class="priece-btn">
<span class="priece-number">{{ hero.s_price ? hero.s_price : " " }}</span>
</div>
<div class="token-id">
<div>ERC721</div>
<div>#{{ data.token_id }}</div>
</div>
</div>
<div class="priece">
<div class="priece-btn">
<span class="priece-number">{{
data.s_price ? data.s_price : " "
}}</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props:['hero']
}
props: ["data"],
};
</script>
<style lang="scss" scoped>
.hero-top {
display: flex;
justify-content: space-between;
.hero-left {
width: 173px;
height: 192px;
background: url("../../assets/market/chip/bg-there.png") no-repeat;
background-size: 100% 100%;
}
.hero-right {
display: flex;
justify-content: space-between;
.hero-left {
width: 173px;
height: 192px;
background: url("../../assets/market/chip/bg-there.png") no-repeat;
background-size: 100% 100%;
}
.hero-right {
font-size: 25px;
font-weight: bold;
color: #ffffff;
.userinfo {
width: 371px;
height: 87px;
font-size: 25px;
font-weight: bold;
color: #ffffff;
.userinfo {
width: 371px;
height: 87px;
background: #28c1ed;
border: 4px solid rgba(91, 211, 246, 0.4);
border-radius: 18px;
.srabded {
display: flex;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 18px;
margin-left: 19px;
justify-content: space-between;
}
.token-id {
display: flex;
margin-left: 19px;
margin-right: 18px;
justify-content: space-between;
}
}
.priece {
width: 100%;
display: flex;
justify-content: flex-end;
.priece-btn {
width: 158px;
height: 63px;
font-size: 25px;
font-weight: bold;
color: #ffffff;
background: #28c1ed;
border: 4px solid rgba(91, 211, 246, 0.4);
border-radius: 18px;
.srabded {
display: flex;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 18px;
margin-left: 19px;
justify-content: space-between;
}
.token-id {
display: flex;
margin-left: 19px;
margin-right: 18px;
justify-content: space-between;
}
}
.priece {
width: 100%;
display: flex;
justify-content: flex-end;
.priece-btn {
width: 158px;
height: 63px;
font-size: 25px;
font-weight: bold;
margin-top: 22px;
position: relative;
line-height: 63px;
// text-align: center;
background: url("../../assets/market/hero/price.png") no-repeat;
background-size: 100% 100%;
.priece-number {
position: absolute;
left: 55px;
top: 2px;
}
margin-top: 22px;
position: relative;
line-height: 63px;
// text-align: center;
background: url("../../assets/market/hero/price.png") no-repeat;
background-size: 100% 100%;
.priece-number {
position: absolute;
left: 55px;
top: 2px;
}
}
}
}
</style>
}
.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>

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

@ -5,13 +5,22 @@
<div>
<img
v-if="data.item_id"
width="214px"
width="159px"
:src="require('@/assets/market/hero/' + data.item_id + '.png')"
alt=""
/>
</div>
<div></div>
<div class="name"></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.detail.hero_name }}
</div>
</div>
<div class="piece-right">
<div class="userinfo">
@ -120,13 +129,50 @@ 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>

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

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

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

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

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

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

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

@ -3,7 +3,19 @@
<div class="bg"></div>
<div class="container">
<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="userinfo">
<div class="srabded">
@ -12,7 +24,7 @@
</div>
<div class="token-id">
<div>ERC721</div>
<div>#3006985843100103</div>
<div>#{{data.token_id}}</div>
</div>
</div>
<div class="priece">
@ -71,7 +83,7 @@
<script>
export default {
props: ["isBuy"],
props: ["isBuy",'data'],
data() {
return {
piece: "",
@ -130,11 +142,31 @@ export default {
.hero-top {
display: flex;
justify-content: space-between;
.hero-left {
width: 217px;
height: 101px;
background: url("../../assets/market/chip/bg-there.png") no-repeat;
.piece-weapon-left {
width: 200px;
height: 93px;
position: relative;
background: url("../../assets/market/weapon/gun-bg.png") no-repeat;
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 {
font-size: 25px;

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

@ -2,7 +2,19 @@
<div>
<div class="weapon-piece-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="weapon-userinfo">
<div class="srabded">
@ -56,8 +68,28 @@ export default {
.piece-weapon-left {
width: 200px;
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%;
.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 {
.weapon-userinfo {

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

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

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

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