From 9039952fea85e9da16dfffca2b11fd2ba1ece476 Mon Sep 17 00:00:00 2001
From: liangping <18786721@qq.com>
Date: Thu, 8 Jun 2023 14:16:50 +0800
Subject: [PATCH] imp: improve layout on small screen

---
 src/modules/[chain]/index.vue |  2 +-
 src/pages/index.vue           | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/modules/[chain]/index.vue b/src/modules/[chain]/index.vue
index 0bade821..7c64b479 100644
--- a/src/modules/[chain]/index.vue
+++ b/src/modules/[chain]/index.vue
@@ -201,7 +201,7 @@ function updateState() {
       </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">
         <CardStatisticsVertical v-bind="item" />
       </div>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 3b9aa206..2f43700d 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -26,11 +26,11 @@ const chains = computed(() => {
 </script>
 <template>
   <div class="">
-    <div class="flex items-center justify-center mb-6 mt-14">
-      <div class="w-8 md:!w-16 rounded-full mr-3">
+    <div class="flex flex-col md:flex-row items-center justify-center mb-6 mt-14 gap-3">
+      <div class="w-16 rounded-full">
         <img src="/logo.svg" />
       </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
       </h1>
       <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>
     </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"/>
       <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
-      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
         v-for="(chain, index) in chains"