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

重构代码, 简化显示

Browse Source
This commit is contained in:
cebgcontract 2022-04-24 08:26:15 +08:00
parent 931d5bd59b
commit 126df4d335
2 changed files with 71 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/market/NftDetail.vue
View File

@ -44,27 +44,27 @@
<div class="two-col-info">
<div class="one-info">
<div class="info-title">HP</div>
<div class="info-val">{{nftData.attrMap.get('hp')}}</div>
<div class="info-val">{{attr('hp')}}</div>
</div>
<div class="one-info">
<div class="info-title">Speed</div>
<div class="info-val">{{nftData.attrMap.get('speed')}}</div>
<div class="info-val">{{attr('speed')}}</div>
</div>
</div>
<div class="two-col-info">
<div class="one-info">
<div class="info-title">Attack</div>
<div class="info-val">{{nftData.attrMap.get('atk')}}</div>
<div class="info-val">{{attr('atk')}}</div>
</div>
<div class="one-info">
<div class="info-title">Defence</div>
<div class="info-val">{{nftData.attrMap.get('def')}}</div>
<div class="info-val">{{attr('def')}}</div>
</div>
</div>
<div class="one-col-info">
<div class="one-info">
<div class="info-title">Advanced Count</div>
<div class="info-val">{{nftData.attrMap.get('advanced_count')}}</div>
<div class="info-val">{{attr('advanced_count')}}</div>
</div>
</div>
</div>
@ -82,37 +82,37 @@
<div class="two-col-info">
<div class="one-info">
<div class="info-title">Attack</div>
<div class="info-val">{{nftData.attrMap.get('atk')}}</div>
<div class="info-val">{{attr('atk')}}</div>
</div>
<div class="one-info">
<div class="info-title">Clip</div>
<div class="info-val">{{nftData.attrMap.get('clip_volume')}}</div>
<div class="info-val">{{attr('clip_volume')}}</div>
</div>
</div>
<div class="two-col-info">
<div class="one-info">
<div class="info-title">Reload</div>
<div class="info-val">{{nftData.attrMap.get('reload_time')}}</div>
<div class="info-val">{{attr('reload_time')}}</div>
</div>
<div class="one-info">
<div class="info-title">Rate</div>
<div class="info-val">{{nftData.attrMap.get('fire_rate')}}</div>
<div class="info-val">{{attr('fire_rate')}}</div>
</div>
</div>
<div class="two-col-info">
<div class="one-info">
<div class="info-title">Speed</div>
<div class="info-val">{{nftData.attrMap.get('bullet_speed')}}</div>
<div class="info-val">{{attr('bullet_speed')}}</div>
</div>
<div class="one-info">
<div class="info-title">Range</div>
<div class="info-val">{{nftData.attrMap.get('range')}}</div>
<div class="info-val">{{attr('range')}}</div>
</div>
</div>
<div class="one-col-info" v-if="nftData.attrMap.has('advanced_count')">
<div class="one-col-info" v-if="hasAttr('advanced_count')">
<div class="one-info">
<div class="info-title">Advanced Count</div>
<div class="info-val">{{nftData.attrMap.get('advanced_count')}}</div>
<div class="info-val">{{attr('advanced_count')}}</div>
</div>
</div>
</div>
@ -121,7 +121,7 @@
<div class="top-right"></div>
</div>
<div class="card-container" v-if="nftData.type === 1">
<div class="card-container" v-if="nftData.type === 1 || nftData.type === 2 ">
<div class="card-border"></div>
<div class="border special-data">
<div class="title">
@ -131,11 +131,11 @@
<div class="two-col-info">
<div class="one-info">
<div class="info-title">Lucky</div>
<div class="info-val">{{nftData.attrMap.get('lucky')}}</div>
<div class="info-val">{{attr('lucky')}}</div>
</div>
<div class="one-info">
<div class="info-title font14">Success Rate</div>
<div class="info-val">{{nftData.attrMap.get('success_rate')}}</div>
<div class="info-val">{{attr('success_rate')}}</div>
</div>
</div>
</div>
@ -234,6 +234,14 @@ export default class extends Vue {
back() {
this.$router.go(-1)
}
attr(key: string) {
return this.nftData.attrMap.get(key)
}
hasAttr(key: string) {
return this.nftData?.attrMap?.has(key)
}
}
</script>
<style lang="scss" scoped>

82
src/components/market/NftInfo.vue
View File

@ -12,65 +12,75 @@
<div class="two-col-info">
<div class="one-info">
<div class="info-title">HP</div>
<div class="info-val">{{nftData.attrMap.get('hp')}}</div>
<div class="info-val">{{attr('hp')}}</div>
</div>
<div class="one-info">
<div class="info-title">Speed</div>
<div class="info-val">{{nftData.attrMap.get('speed')}}</div>
<div class="info-val">{{attr('speed')}}</div>
</div>
</div>
<div class="two-col-info">
<div class="one-info">
<div class="info-title">Attack</div>
<div class="info-val">{{nftData.attrMap.get('atk')}}</div>
<div class="info-val">{{attr('atk')}}</div>
</div>
<div class="one-info">
<div class="info-title">Defence</div>
<div class="info-val">{{nftData.attrMap.get('def')}}</div>
<div class="info-val">{{attr('def')}}</div>
</div>
</div>
<div class="one-col-info">
<div class="one-info">
<div class="info-title">Advanced Count</div>
<div class="info-val">{{nftData.attrMap.get('advanced_count')}}</div>
<div class="info-val">{{attr('advanced_count')}}</div>
</div>
</div>
</div>
<div class="attr-div" v-if="!nftData.hideAttr && nftData.type === 2">
<div class="one-col-info">
<div class="two-col-info">
<div class="one-info">
<div class="info-title">Level</div>
<div class="info-val">{{nftData.level}}</div>
</div>
<div class="one-info">
<div class="info-title">Lucky</div>
<div class="info-val">{{attr('lucky')}}</div>
</div>
</div>
<div class="two-col-info">
<div class="one-info">
<div class="info-title">Attack</div>
<div class="info-val">{{nftData.attrMap.get('atk')}}</div>
<div class="info-val">{{attr('atk')}}</div>
</div>
<div class="one-info">
<div class="info-title">clip</div>
<div class="info-val">{{nftData.attrMap.get('clip_volume')}}</div>
<div class="info-title">Clip</div>
<div class="info-val">{{attr('clip_volume')}}</div>
</div>
</div>
<div class="two-col-info">
<div class="one-info">
<div class="info-title">reload</div>
<div class="info-val">{{nftData.attrMap.get('reload_time')}}</div>
<div class="info-title">Reload</div>
<div class="info-val">{{attr('reload_time')}}</div>
</div>
<div class="one-info">
<div class="info-title">rate</div>
<div class="info-val">{{nftData.attrMap.get('fire_rate')}}</div>
<div class="info-title">Rate</div>
<div class="info-val">{{attr('fire_rate')}}</div>
</div>
</div>
<div class="two-col-info">
<div class="one-info">
<div class="info-title">Speed</div>
<div class="info-val">{{nftData.attrMap.get('bullet_speed')}}</div>
<div class="info-val">{{attr('bullet_speed')}}</div>
</div>
<div class="one-info">
<div class="info-title">range</div>
<div class="info-val">{{nftData.attrMap.get('range')}}</div>
<div class="info-title">Range</div>
<div class="info-val">{{attr('range')}}</div>
</div>
</div>
<div class="one-col-info" v-if="hasAttr('advanced_count')">
<div class="one-info">
<div class="info-title">Advanced Count</div>
<div class="info-val">{{attr('advanced_count')}}</div>
</div>
</div>
</div>
@ -96,6 +106,14 @@ import { INftData } from '@/types/Nft'
})
export default class extends Vue {
@Prop() private nftData: INftData
attr(key: string) {
return this.nftData.attrMap.get(key)
}
hasAttr(key: string) {
return this.nftData?.attrMap?.has(key)
}
}
</script>
@ -150,6 +168,19 @@ export default class extends Vue {
width: 50%;
}
}
.one-info{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.info-title {
width: 60%;
text-transform: capitalize;
}
.info-val {
color: #3CF562;
width: 40%;
}
.one-col-info {
display: flex;
flex-direction: row;
@ -162,25 +193,12 @@ export default class extends Vue {
}
.info-val{
width: auto;
margin-left: 10px;
}
}
&.nft-id-mobile{
display: none;
}
}
.one-info{
display: flex;
flex-direction: row;
justify-content: space-between;
.info-title {
width: 60%;
}
.info-val {
color: #3CF562;
width: 40%;
}
}
.all-col-info {
display: flex;
flex-wrap: wrap;
@ -189,14 +207,8 @@ export default class extends Vue {
display: flex;
flex-direction: row;
justify-content: space-between;
.info-title{
width: 60%;
text-transform: capitalize;
}
.info-val{
width: 40%;
margin-left: 10px;
color: #3CF562;
}
}
}