You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
3.0 KiB
94 lines
3.0 KiB
<template>
|
|
<div
|
|
class="tableBlock-tabs desktop:mt-[-435.5px] mobile:mt-[-51px] desktop:px-[120px] mobile:px-[20px]"
|
|
>
|
|
<Cards
|
|
:title="'VNFT'"
|
|
:value="'Token ID:' + value"
|
|
:options="options"
|
|
:url="'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fphoto%2F2012-3-2%2Fenterdesk.com-B526ECADD33DBD367676A93E051BA1EC.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664699626&t=88f6e0508707a9ea0bec9c5a9f7c9d67'"
|
|
/>
|
|
<div
|
|
class="flex flex-1 w-full bg-black-19191A mt-[56px] pb-[28px] rounded-[10px] overflow-hidden"
|
|
>
|
|
<div class="details-tabs w-full">
|
|
<el-tabs v-model="active" class="w-full">
|
|
<el-tab-pane label="Token Transfers" name="tokenTransfers">
|
|
<div class="flex flex-1 flex-col pt-[36px] px-[34px]">
|
|
<p class="text-white text-[22px] font-semibold">
|
|
Token Transfers
|
|
</p>
|
|
<div
|
|
class="mt-[10px] bg-black-2B2B2C rounded-[10px] px-[34px] py-[30px]"
|
|
>
|
|
<transfers-row
|
|
v-for="(item, index) in tokenTransfers"
|
|
:key="index + item.title"
|
|
:title="item.title"
|
|
:value1="item.value1"
|
|
:value2="item.value2"
|
|
:value3="item.value3"
|
|
:state="item.state"
|
|
/>
|
|
</div>
|
|
<upper-lower-switch :current="'page1'" />
|
|
</div>
|
|
</el-tab-pane>
|
|
<!-- Token Holders -->
|
|
<!-- <el-tab-pane label="Token Holders" name="tokenHolders">
|
|
<div class="flex flex-1 justify-center items-center h-[210px]">
|
|
<p class="text-white text-[14px] font-normal opacity-80">
|
|
There are no transactions for this Token Holders.
|
|
</p>
|
|
</div>
|
|
</el-tab-pane> -->
|
|
</el-tabs>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import Cards from '../BitcNFt/cards.vue'
|
|
import transfersRow from './transfersRow.vue'
|
|
import UpperLowerSwitch from '@src/components/base/UpperLowerSwitch.vue'
|
|
const active = ref('tokenTransfers')
|
|
const value = '4'
|
|
const options = [
|
|
{
|
|
key: 'ERC721',
|
|
value: '',
|
|
},
|
|
{
|
|
key: 'Transfers',
|
|
value: '324',
|
|
},
|
|
]
|
|
// 底部渲染的数据
|
|
const tokenTransfers = [
|
|
{
|
|
title: 'Block #815128',
|
|
value1: '0x559f0e102863ef1b9798e1d4497a0f4214f05fbf7fbce549a',
|
|
value2: '0x970d473486cg4f9dfe6b2',
|
|
value3: '0x970d473486cg4f9dfe6b2',
|
|
state: 'Success',
|
|
},
|
|
{
|
|
title: 'Block #815128',
|
|
value1: '0x559f0e102863ef1b9798e1d4497a0f4214f05fbf7fbce549a',
|
|
value2: '0x970d473486cg4f9dfe6b2',
|
|
value3: '0x970d473486cg4f9dfe6b2',
|
|
state: 'Faild',
|
|
},
|
|
{
|
|
title: 'Block #815128',
|
|
value1: '0x559f0e102863ef1b9798e1d4497a0f4214f05fbf7fbce549a',
|
|
value2: '0x970d473486cg4f9dfe6b2',
|
|
value3: '0x970d473486cg4f9dfe6b2',
|
|
state: 'Success',
|
|
},
|
|
]
|
|
</script>
|
|
|
|
<style scoped></style>
|
|
|