cerc-io/cosmos-explorer
10
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Parameters Mobile

Browse Source
This commit is contained in:
alisa 2023-04-27 19:00:44 +08:00
parent 881e64b3ff
commit a0104d5fee
3 changed files with 87 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/CardParameter.vue
View File

@ -1,22 +1,29 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { PropType } from 'vue'; import type { PropType } from 'vue';
const props = defineProps({ const props = defineProps({
cardItem: { cardItem: {
type: Object as PropType<{title: string;items: Array<any>;}>, type: Object as PropType<{ title: string; items: Array<any> }>,
}, },
}) });
</script> </script>
<template> <template>
<div class="bg-card px-4 pt-3 pb-4 rounded mt-6" <div
v-if="props.cardItem?.items && props.cardItem?.items?.length > 0"> class="bg-card px-4 pt-3 pb-4 rounded mt-6"
<div class="text-base mb-3 text-main">{{ props.cardItem?.title }}</div> v-if="props.cardItem?.items && props.cardItem?.items?.length > 0"
<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-base mb-3 text-main">{{ props.cardItem?.title }}</div>
<div class="text-xs mb-2 text-secondary">{{ item?.subtitle }}</div> <div
<div class="text-base text-main">{{ item?.value }}</div> class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 2xl:grid-cols-6 gap-4"
<!-- {{ item }} --> >
</div> <div
</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>
</div>
</template> </template>

37
src/components/TableParameter.vue
View File

@ -1,26 +1,29 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { PropType } from 'vue'; import type { PropType } from 'vue';
const props = defineProps({ const props = defineProps({
tableItem: { tableItem: {
type: Object as PropType<{title: string;items: Object;}>, type: Object as PropType<{ title: string; items: Object }>,
}, },
}) });
function formatTitle (name: string){ function formatTitle(name: string) {
return String(name).replaceAll('_', ' ') return String(name).replaceAll('_', ' ');
} }
</script> </script>
<template> <template>
<div class="bg-card px-4 pt-3 pb-4 rounded mt-6"> <div class="bg-card px-4 pt-3 pb-4 rounded mt-6">
<div class="text-base mb-3 text-main">{{ props.tableItem?.title }}</div> <div class="text-base mb-3 text-main">{{ props.tableItem?.title }}</div>
<div class=""> <div class="">
<div class="d-flex flex-nowrap" v-for="(item,index ) of props.tableItem?.items" :key="index"> <div
<div class="mr-6">{{ formatTitle(item?.subtitle) }}</div> class="flex flex-nowrap"
<div class="flex-1" >{{ item?.value }}</div> v-for="(item, index) of props.tableItem?.items"
<div>{{typeof(item?.value )}}</div> :key="index"
<!-- {{ item }} --> >
</div> <div class="mr-6">{{ formatTitle(item?.subtitle) }}</div>
</div> <div class="flex-1">{{ item?.value }}</div>
<div>{{ typeof item?.value }}</div>
<!-- {{ item }} -->
</div>
</div> </div>
</div>
</template> </template>

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

@ -1,50 +1,55 @@
<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' import CardParameter from '@/components/CardParameter.vue';
import TableParameter from '@/components/TableParameter.vue' import TableParameter from '@/components/TableParameter.vue';
import { sort } from 'semver';
const store = useParamStore()
const chain = ref(store.chain)
onMounted(() => {
// fetch the data
store.initial()
})
const store = useParamStore();
const chain = ref(store.chain);
onMounted(() => {
// fetch the data
store.initial();
});
</script> </script>
<template> <template>
<div> <div>
<!-- Chain ID --> <!-- Chain ID -->
<div class="bg-card px-4 pt-3 pb-4 rounded"> <div class="bg-card px-4 pt-3 pb-4 rounded">
<div class="text-base mb-3 text-main">{{ chain.title }}</div> <div class="text-base mb-3 text-main">{{ chain.title }}</div>
<div class="grid grid-cols-5 gap-4"> <div
<div v-for="(item,index) of chain.items" :key="index" class="rounded-sm bg-active px-4 py-2"> class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 2xl:grid-cols-6 gap-4"
<div class="text-xs mb-2 text-secondary">{{ item.subtitle }}</div> >
<div class="text-base text-main">{{ item.value }}</div> <div
</div> v-for="(item, index) of chain.items"
</div> :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>
</div> </div>
<!-- minting Parameters --> </div>
<CardParameter :cardItem="store.mint"/>
<!-- Staking Parameters -->
<CardParameter :cardItem="store.staking"/>
<!-- Governance Parameters -->
<CardParameter :cardItem="store.gov"/>
<!-- Distribution Parameters -->
<CardParameter :cardItem="store.distribution"/>
<!-- Slashing Parameters -->
<CardParameter :cardItem="store.slashing"/>
<!-- Application Version -->
<TableParameter :tableItem="store.appVersion"/>
<!-- Node Information -->
<TableParameter :tableItem="store.nodeVersion"/>
</div> </div>
<!-- minting Parameters -->
<CardParameter :cardItem="store.mint" />
<!-- Staking Parameters -->
<CardParameter :cardItem="store.staking" />
<!-- Governance Parameters -->
<CardParameter :cardItem="store.gov" />
<!-- Distribution Parameters -->
<CardParameter :cardItem="store.distribution" />
<!-- Slashing Parameters -->
<CardParameter :cardItem="store.slashing" />
<!-- Application Version -->
<TableParameter :tableItem="store.appVersion" />
<!-- Node Information -->
<TableParameter :tableItem="store.nodeVersion" />
</div>
</template> </template>
<route> <route>
{ {
meta: { meta: {
i18n: 'parameters' i18n: 'parameters'
} }
} }
</route> </route>