zramsay/cosmos-explorer
1
0
Fork 0
forked from cerc-io/cosmos-explorer
Code Pull Requests Actions Activity

feat: component extraction

Browse Source
This commit is contained in:
alisa 2023-04-27 00:18:13 +08:00
parent 51f95e187f
commit e1c62c086f
2 changed files with 35 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/CardParameter.vue Normal file
View 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>

28
src/modules/[chain]/params/index.vue
View File

@ -1,14 +1,12 @@
<script lang="ts" setup> <script lang="ts" setup>
import { useParamStore } from '@/stores'; import { useParamStore } from '@/stores';
import { ref, onMounted } from 'vue' import { ref, onMounted } from 'vue'
import CardParameter from '@/components/CardParameter.vue'
const store = useParamStore() const store = useParamStore()
const chain = ref(store.chain) const chain = ref(store.chain)
onMounted(() => { onMounted(() => {
// fetch the data // fetch the data
// store.handleBaseBlockLatest()
store.initial() store.initial()
console.log(4444)
}) })
</script> </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 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-xs mb-2 text-secondary">{{ item.subtitle }}</div>
<div class="text-base text-main">{{ item.value }}</div> <div class="text-base text-main">{{ item.value }}</div>
{{ item }}
</div> </div>
</div> </div>
</div> </div>
<div class="h-6"></div>
<!-- minting Parameters -->
<CardParameter :cardItem="store.mint"/>
<!-- Staking Parameters --> <!-- Staking Parameters -->
<div class="bg-card px-4 pt-3 pb-4 rounded-sm"> <CardParameter :cardItem="store.staking"/>
<div class="text-base mb-3 text-main">{{ store.staking.title }}</div>
<div class="grid grid-cols-5 gap-4"> <!-- Governance Parameters -->
<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> <!-- Distribution Parameters -->
<div class="text-base text-main">{{ item.value }}</div> <!-- Slashing Parameters -->
{{ item }} <!-- Application Version -->
</div> <!-- Node Information -->
</div>
</div>
</div> </div>
</template> </template>