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

feat: dashboard title

Browse Source
This commit is contained in:
alisa 2023-05-04 23:25:35 +08:00
parent cb0f841152
commit b6a4b9e362
1 changed files with 20 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/pages/index.vue
View File

@ -10,10 +10,10 @@ dashboard.$subscribe((mutation, state) => {
localStorage.setItem('favorite', JSON.stringify(state.favorite)) localStorage.setItem('favorite', JSON.stringify(state.favorite))
}) })
const keywords = ref('') const keywords = ref('')
const chains = computed(()=> { const chains = computed(() => {
if(keywords.value) { if (keywords.value) {
return Object.values(dashboard.chains).filter( (x: ChainConfig)=>x.chainName.indexOf(keywords.value) > -1) return Object.values(dashboard.chains).filter((x: ChainConfig) => x.chainName.indexOf(keywords.value) > -1)
}else{ } else {
return Object.values(dashboard.chains) return Object.values(dashboard.chains)
} }
}) })
@ -21,23 +21,29 @@ const chain = useBlockchain()
</script> </script>
<template> <template>
<div class="d-flex flex-column justify-center"> <div class="">
<div class="d-flex justify-center align-center align-self-center p-1 b1"> <div class="flex items-center justify-center mb-6 mt-10">
<VImg src="/logo.svg" width="85" height="85"/> <div class="w-16 rounded-full mr-3">
<h1 class="text-primary text-h3 font-weight-bold d-none d-md-block ml-1"> <img src="/logo.svg" />
Ping Dashboard<VChip>Beta</VChip> </div>
<h1 class="text-primary text-6xl font-bold mr-2">
Ping dashboard
</h1> </h1>
<div class="badge badge-info badge-outline mt-5">Beta</div>
</div> </div>
<div class="d-flex flex-column align-center"> <div class="text-center text-base">
<p class="mb-1"> <p class="mb-1">
{{ $t('index.slogan') }} {{ $t('index.slogan') }}
</p> </p>
<h2 class="mb-9"> <h2 class="mb-6">
Cosmos Ecosystem Blockchains 🚀 Cosmos Ecosystem Blockchains 🚀
</h2> </h2>
</div> </div>
<VProgressLinear v-if="dashboard.status !== LoadingStatus.Loaded " indeterminate color="primary darken-2"/> <div v-if="dashboard.status !== LoadingStatus.Loaded" class="flex justify-center"><progress
<VTextField v-model="keywords" variant="underlined" :placeholder="$t('index.search_placeholder')" style="max-width: 300px;" app> class="progress progress-info w-80 h-1"></progress></div>
<VTextField v-model="keywords" variant="underlined" :placeholder="$t('index.search_placeholder')"
style="max-width: 300px;" app>
<template #append-inner> <template #append-inner>
{{ chains.length }}/{{ dashboard.length }} {{ chains.length }}/{{ dashboard.length }}
</template> </template>
@ -47,7 +53,7 @@ const chain = useBlockchain()
<VLazy min-height="40" min-width="200" transition="fade-transition"> <VLazy min-height="40" min-width="200" transition="fade-transition">
<ChainSummary :name="k.chainName" /> <ChainSummary :name="k.chainName" />
</VLazy> </VLazy>
</VCol> </VCol>
</VRow> </VRow>
</div> </div>
</template> </template>