forked from cerc-io/cosmos-explorer
feat: component extraction
This commit is contained in:
parent
51f95e187f
commit
e1c62c086f
22
src/components/CardParameter.vue
Normal file
22
src/components/CardParameter.vue
Normal file
@ -0,0 +1,22 @@
|
||||
<script lang="ts" setup>
|
||||
import type { PropType } from 'vue';
|
||||
const props = defineProps({
|
||||
cardItem: {
|
||||
type: Object as PropType<{title: string;items: Array<any>;}>,
|
||||
},
|
||||
})
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="bg-card px-4 pt-3 pb-4 rounded-sm mt-6"
|
||||
v-if="props.cardItem?.items && props.cardItem?.items?.length > 0">
|
||||
<div class="text-base mb-3 text-main">{{ props.cardItem?.title }}</div>
|
||||
<div class="grid grid-cols-5 gap-4">
|
||||
<div v-for="(item,index) of props.cardItem?.items" :key="index" class="rounded-sm bg-active px-4 py-2">
|
||||
<div class="text-xs mb-2 text-secondary">{{ item?.subtitle }}</div>
|
||||
<div class="text-base text-main">{{ item?.value }}</div>
|
||||
<!-- {{ item }} -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
@ -1,14 +1,12 @@
|
||||
<script lang="ts" setup>
|
||||
import { useParamStore } from '@/stores';
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
import CardParameter from '@/components/CardParameter.vue'
|
||||
const store = useParamStore()
|
||||
const chain = ref(store.chain)
|
||||
onMounted(() => {
|
||||
// fetch the data
|
||||
// store.handleBaseBlockLatest()
|
||||
store.initial()
|
||||
console.log(4444)
|
||||
})
|
||||
|
||||
</script>
|
||||
@ -21,22 +19,22 @@ onMounted(() => {
|
||||
<div v-for="(item,index) of chain.items" :key="index" class="rounded-sm bg-active px-4 py-2">
|
||||
<div class="text-xs mb-2 text-secondary">{{ item.subtitle }}</div>
|
||||
<div class="text-base text-main">{{ item.value }}</div>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-6"></div>
|
||||
|
||||
<!-- minting Parameters -->
|
||||
<CardParameter :cardItem="store.mint"/>
|
||||
|
||||
<!-- Staking Parameters -->
|
||||
<div class="bg-card px-4 pt-3 pb-4 rounded-sm">
|
||||
<div class="text-base mb-3 text-main">{{ store.staking.title }}</div>
|
||||
<div class="grid grid-cols-5 gap-4">
|
||||
<div v-for="(item,index) of store.staking.items" :key="index" class="rounded-sm bg-active px-4 py-2">
|
||||
<div class="text-xs mb-2 text-secondary">{{ item.subtitle }}</div>
|
||||
<div class="text-base text-main">{{ item.value }}</div>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<CardParameter :cardItem="store.staking"/>
|
||||
|
||||
<!-- Governance Parameters -->
|
||||
|
||||
<!-- Distribution Parameters -->
|
||||
<!-- Slashing Parameters -->
|
||||
<!-- Application Version -->
|
||||
<!-- Node Information -->
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
Loading…
Reference in New Issue
Block a user