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

imp: improve layout on small screen

Browse Source
This commit is contained in:
liangping 2023-06-08 14:16:50 +08:00
parent 760596e02f
commit 9039952fea
2 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/modules/[chain]/index.vue
View File

@ -201,7 +201,7 @@ function updateState() {
</div> </div>
</div> </div>
<div class="grid grid-cols-2 gap-4 md:!grid-cols-3 lg:!grid-cols-6"> <div class="grid grid-cols-1 gap-4 md:!grid-cols-3 lg:!grid-cols-6">
<div v-for="(item, key) in store.stats" :key="key"> <div v-for="(item, key) in store.stats" :key="key">
<CardStatisticsVertical v-bind="item" /> <CardStatisticsVertical v-bind="item" />
</div> </div>

12
src/pages/index.vue
View File

@ -26,11 +26,11 @@ const chains = computed(() => {
</script> </script>
<template> <template>
<div class=""> <div class="">
<div class="flex items-center justify-center mb-6 mt-14"> <div class="flex flex-col md:flex-row items-center justify-center mb-6 mt-14 gap-3">
<div class="w-8 md:!w-16 rounded-full mr-3"> <div class="w-16 rounded-full">
<img src="/logo.svg" /> <img src="/logo.svg" />
</div> </div>
<h1 class="text-primary text-3xl md:!text-6xl font-bold mr-2"> <h1 class="text-primary text-3xl md:!text-6xl font-bold">
Ping dashboard Ping dashboard
</h1> </h1>
<div class="badge badge-primary badge-outline mt-1 text-sm md:!mt-8"> <div class="badge badge-primary badge-outline mt-1 text-sm md:!mt-8">
@ -50,14 +50,14 @@ const chains = computed(() => {
<progress class="progress progress-info w-80 h-1"></progress> <progress class="progress progress-info w-80 h-1"></progress>
</div> </div>
<div class="flex items-center rounded-full bg-base-100 border border-gray-200 dark:border-gray-700 mt-10"> <div class="flex items-center rounded-lg bg-base-100 border border-gray-200 dark:border-gray-700 mt-10">
<Icon icon="mdi:magnify" class="text-2xl text-gray-400 ml-3"/> <Icon icon="mdi:magnify" class="text-2xl text-gray-400 ml-3"/>
<input :placeholder="$t('index.search_placeholder')" class="px-4 h-10 bg-transparent flex-1 outline-none text-base" v-model="keywords" /> <input :placeholder="$t('index.search_placeholder')" class="px-4 h-10 bg-transparent flex-1 outline-none text-base" v-model="keywords" />
<div class="px-4 text-base">{{ chains.length }}/{{ dashboard.length }}</div> <div class="px-4 text-base hidden md:block">{{ chains.length }}/{{ dashboard.length }}</div>
</div> </div>
<div <div
class="grid grid-cols-2 gap-4 mt-6 md:!grid-cols-3 lg:!grid-cols-4 2xl:!grid-cols-5" class="grid grid-cols-1 gap-4 mt-6 md:!grid-cols-3 lg:!grid-cols-4 2xl:!grid-cols-5"
> >
<ChainSummary <ChainSummary
v-for="(chain, index) in chains" v-for="(chain, index) in chains"