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