11<template >
2- <div >
3- <div v-if =" detailVisible" >
4- <p
5- class =" title"
6- :class =" [ detailVisible ? 'is-size-1' : 'is-size-3' ]"
7- >
8- <span v-if =" !isLoading" >
9- <span v-if =" nft.burned" >「🔥」</span > {{ nft.name }} <span v-if =" carbonlessBadge" >「🌱」</span >
10- </span >
11- <b-skeleton height =" 100px" size =" is-large" :active =" isLoading" ></b-skeleton >
12- </p >
13- <p v-if =" nft.burned" class =" title is-size-4 has-text-danger" >
14- {{ $t('nft.burned') }} 「🔥」
15- <b-skeleton :count =" 1" size =" is-large" :active =" isLoading" ></b-skeleton >
16- </p >
17- <p v-if =" carbonlessBadge" class =" title is-size-4 has-text-success" >
18- {{ $t('nft.carbonless') }} 「🌱」
19- <b-skeleton :count =" 1" size =" is-large" :active =" isLoading" ></b-skeleton >
20- </p >
21- <p class =" label" >
22- {{ $t('collection') }}
23- </p >
24- <p class =" subtitle is-size-6" >
25- <router-link :to =" { name: 'collectionDetail', params: { id: nft.collectionId } }" >
26- {{ nft.collectionId }}
27- </router-link >
28- <b-skeleton :count =" 1" size =" is-large" :active =" isLoading" ></b-skeleton >
29- </p >
30- <p class =" label" >
31- {{ $t('creator') }}
32- </p >
33- <p class =" subtitle is-size-6" >
34- <ProfileLink :address =" nft.issuer" :showTwitter =" true" />
35- <b-skeleton :count =" 1" size =" is-large" :active =" isLoading" ></b-skeleton >
36- <!-- <a :href="`https://kusama.subscan.io/account/${nft.currentOwner}`" target="_blank"><Identity :address="nft.currentOwner" /></a> -->
37- </p >
38- <template v-if =" nft .issuer !== nft .currentOwner " >
39- <p class =" label" >
40- {{ $t('owner') }}
41- </p >
42- <p class =" subtitle is-size-6" >
43- <ProfileLink :address =" nft.currentOwner" :showTwitter =" true" />
44- <b-skeleton :count =" 1" size =" is-large" :active =" isLoading" ></b-skeleton >
45- <!-- <a :href="`https://kusama.subscan.io/account/${nft.currentOwner}`" target="_blank"><Identity :address="nft.currentOwner" /></a> -->
46- </p >
47- </template >
48- </div >
2+ <div v-if =" detailVisible" >
3+ <p
4+ class =" title"
5+ :class =" [ detailVisible ? 'is-size-1' : 'is-size-3' ]"
6+ >
7+ <span v-if =" !isLoading" >
8+ <span v-if =" nft.burned" >「🔥」</span > {{ nft.name }} <span v-if =" carbonlessBadge" >「🌱」</span >
9+ </span >
10+ <b-skeleton height =" 100px" size =" is-large" :active =" isLoading" ></b-skeleton >
11+ </p >
12+ <p v-if =" nft.burned" class =" title is-size-4 has-text-danger" >
13+ {{ $t('nft.burned') }} 「🔥」
14+ <b-skeleton :count =" 1" size =" is-large" :active =" isLoading" ></b-skeleton >
15+ </p >
16+ <p v-if =" carbonlessBadge" class =" title is-size-4 has-text-success" >
17+ {{ $t('nft.carbonless') }} 「🌱」
18+ <b-skeleton :count =" 1" size =" is-large" :active =" isLoading" ></b-skeleton >
19+ </p >
20+ <p class =" label" >
21+ {{ $t('collection') }}
22+ </p >
23+ <p class =" subtitle is-size-6" >
24+ <router-link :to =" { name: 'collectionDetail', params: { id: nft.collectionId } }" >
25+ {{ nft.collectionId }}
26+ </router-link >
27+ <b-skeleton :count =" 1" size =" is-large" :active =" isLoading" ></b-skeleton >
28+ </p >
29+ <p class =" label" >
30+ {{ $t('creator') }}
31+ </p >
32+ <p class =" subtitle is-size-6" >
33+ <ProfileLink :address =" nft.issuer" :showTwitter =" true" />
34+ <b-skeleton :count =" 1" size =" is-large" :active =" isLoading" ></b-skeleton >
35+ <!-- <a :href="`https://kusama.subscan.io/account/${nft.currentOwner}`" target="_blank"><Identity :address="nft.currentOwner" /></a> -->
36+ </p >
37+ <template v-if =" nft .issuer !== nft .currentOwner " >
38+ <p class =" label" >
39+ {{ $t('owner') }}
40+ </p >
41+ <p class =" subtitle is-size-6" >
42+ <ProfileLink :address =" nft.currentOwner" :showTwitter =" true" />
43+ <b-skeleton :count =" 1" size =" is-large" :active =" isLoading" ></b-skeleton >
44+ <!-- <a :href="`https://kusama.subscan.io/account/${nft.currentOwner}`" target="_blank"><Identity :address="nft.currentOwner" /></a> -->
45+ </p >
46+ </template >
4947 </div >
5048</template >
5149
@@ -58,19 +56,19 @@ import { emptyObject } from '@/utils/empty';
5856
5957const components = {
6058 ProfileLink : () => import (' @/components/rmrk/Profile/ProfileLink.vue' )
61- }
59+ };
6260
6361@Component ({ components })
6462export default class Name extends Vue {
6563 @Prop ({ default : () => emptyObject <NFTWithMeta >() }) public nft! : NFTWithMeta ;
6664 @Prop () public isLoading! : boolean ;
6765
6866 get detailVisible() {
69- return ! isShareMode
67+ return ! isShareMode ;
7068 }
7169
7270 get carbonlessBadge() {
73- return this .nft .attributes ?.some (({trait_type , value }) => trait_type === ' carbonless' && value )
71+ return this .nft .attributes ?.some (({trait_type , value }) => trait_type === ' carbonless' && value );
7472 }
7573}
7674 </script >
0 commit comments