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

feat: dashboard layout

Browse Source
This commit is contained in:
alisa 2023-05-04 23:46:20 +08:00
parent dbddd6beb6
commit aac687cd0d
2 changed files with 37 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/ChainSummary.vue
View File

@ -33,17 +33,9 @@ const conf = computed(()=> dashboardStore.chains[props.name] || {})
<template #append> <template #append>
<VListItemAction @click="(e: Event) => { e.stopPropagation() }"> <VListItemAction @click="(e: Event) => { e.stopPropagation() }">
<VCheckbox <VCheckbox v-model="dashboardStore.favorite" true-icon="mdi-star" false-icon="mdi-star" color="warning"
v-model="dashboardStore.favorite" :value="props.name" />
true-icon="mdi-star" <VTooltip activator="parent" location="top">
false-icon="mdi-star"
color="warning"
:value="props.name"
/>
<VTooltip
activator="parent"
location="top"
>
{{ $t('index.add_to_favorite') }} {{ $t('index.add_to_favorite') }}
</VTooltip> </VTooltip>
</VListItemAction> </VListItemAction>

18
src/pages/index.vue
View File

@ -23,13 +23,13 @@ const chain = useBlockchain()
<template> <template>
<div class=""> <div class="">
<div class="flex items-center justify-center mb-6 mt-10"> <div class="flex items-center justify-center mb-6 mt-10">
<div class="w-16 rounded-full mr-3"> <div class="w-8 md:w-16 rounded-full mr-3">
<img src="/logo.svg" /> <img src="/logo.svg" />
</div> </div>
<h1 class="text-primary text-6xl font-bold mr-2"> <h1 class="text-primary text-3xl md:text-6xl font-bold mr-2">
Ping dashboard Ping dashboard
</h1> </h1>
<div class="badge badge-info badge-outline mt-5">Beta</div> <div class="badge badge-info badge-outline mt-1 text-sm md:mt-5">Beta</div>
</div> </div>
<div class="text-center text-base"> <div class="text-center text-base">
<p class="mb-1"> <p class="mb-1">
@ -48,12 +48,10 @@ const chain = useBlockchain()
{{ chains.length }}/{{ dashboard.length }} {{ chains.length }}/{{ dashboard.length }}
</template> </template>
</VTextField> </VTextField>
<VRow class="my-auto">
<VCol v-for="k in chains" md="3"> <div class="grid grid-cols-2 gap-4 mt-6 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5">
<VLazy min-height="40" min-width="200" transition="fade-transition"> <ChainSummary v-for="(chain, index) in chains" :key="index" :name="chain.chainName" />
<ChainSummary :name="k.chainName" /> </div>
</VLazy>
</VCol>
</VRow>
</div> </div>
</template> </template>