From 1114b8e0f426a0471396df767b27713fd8a8489e Mon Sep 17 00:00:00 2001
From: liangping <18786721@qq.com>
Date: Tue, 16 May 2023 20:13:21 +0800
Subject: [PATCH] add title

---
 src/modules/[chain]/uptime/overview.vue | 75 ++++++++++++++++---------
 1 file changed, 49 insertions(+), 26 deletions(-)

diff --git a/src/modules/[chain]/uptime/overview.vue b/src/modules/[chain]/uptime/overview.vue
index 5ab3a986..d627f458 100644
--- a/src/modules/[chain]/uptime/overview.vue
+++ b/src/modules/[chain]/uptime/overview.vue
@@ -118,33 +118,56 @@ function color(v: string) {
 
 <template>
   <div>
-    <table class="table w-full">
-      <thead>
-        <tr>
-          <th>Blockchain</th>
-          <th>Validator</th>
-          <th>Missing Blocks</th>
-          <th>Signed Blocks</th>
-          <th>Last Jailed Time</th>
-          <th>Tombstoned</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="v in list">
-          <td class=" capitalize">{{ v.chainName }}</td>
-          <td>{{ v.v.name }}</td>
-          <td><span class="badge " :class="color( v.sigingInfo?.missed_blocks_counter)">{{ v.sigingInfo?.missed_blocks_counter }}</span></td>
-          <td><span v-if="v.sigingInfo">{{ Number(v.sigingInfo.index_offset) - Number(v.sigingInfo.start_height) }}</span></td>
-          <td>
-            <div v-if="v.sigingInfo && !v.sigingInfo?.jailed_until.startsWith('1970')" class="text-xs flex flex-col">
-              <div class="badge">{{ format.toDay(v.sigingInfo.jailed_until, 'from') }}</div>
-              <div>{{v.sigingInfo?.jailed_until }}</div>
+    <div class="overflow-x-auto w-full card ">
+      <div class="lg:flex lg:items-center lg:justify-between bg-base-100 p-5">
+        <div class="min-w-0 flex-1">
+          <h2 class="text-2xl font-bold leading-7 sm:truncate sm:text-3xl sm:tracking-tight">My Validators</h2>
+          <div class="mt-1 flex flex-col sm:mt-0 sm:flex-row sm:flex-wrap sm:space-x-6">
+            <div class="mt-2 flex items-center text-sm text-gray-500">
+              <svg class="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400" viewBox="0 0 20 20" fill="currentColor"
+                aria-hidden="true">
+                <path fill-rule="evenodd"
+                  d="M6 3.75A2.75 2.75 0 018.75 1h2.5A2.75 2.75 0 0114 3.75v.443c.572.055 1.14.122 1.706.2C17.053 4.582 18 5.75 18 7.07v3.469c0 1.126-.694 2.191-1.83 2.54-1.952.599-4.024.921-6.17.921s-4.219-.322-6.17-.921C2.694 12.73 2 11.665 2 10.539V7.07c0-1.321.947-2.489 2.294-2.676A41.047 41.047 0 016 4.193V3.75zm6.5 0v.325a41.622 41.622 0 00-5 0V3.75c0-.69.56-1.25 1.25-1.25h2.5c.69 0 1.25.56 1.25 1.25zM10 10a1 1 0 00-1 1v.01a1 1 0 001 1h.01a1 1 0 001-1V11a1 1 0 00-1-1H10z"
+                  clip-rule="evenodd" />
+                <path
+                  d="M3 15.055v-.684c.126.053.255.1.39.142 2.092.642 4.313.987 6.61.987 2.297 0 4.518-.345 6.61-.987.135-.041.264-.089.39-.142v.684c0 1.347-.985 2.53-2.363 2.686a41.454 41.454 0 01-9.274 0C3.985 17.585 3 16.402 3 15.055z" />
+              </svg>
+              Add validators you want to monitor
             </div>
-          </td>
-          <td class=" capitalize">{{ v.sigingInfo?.tombstoned }}</td>
-        </tr>
-      </tbody>
-    </table>
+          </div>
+        </div>
+        <div class="mt-5 flex lg:ml-4 lg:mt-0">
+          
+        </div>
+      </div>
+      <table class="table w-full">
+        <thead>
+          <tr>
+            <th>Blockchain</th>
+            <th>Validator</th>
+            <th>Missing Blocks</th>
+            <th>Signed Blocks</th>
+            <th>Last Jailed Time</th>
+            <th>Tombstoned</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="v in list">
+            <td class=" capitalize">{{ v.chainName }}</td>
+            <td>{{ v.v.name }}</td>
+            <td><span class="badge " :class="color( v.sigingInfo?.missed_blocks_counter)">{{ v.sigingInfo?.missed_blocks_counter }}</span></td>
+            <td><span v-if="v.sigingInfo">{{ Number(v.sigingInfo.index_offset) - Number(v.sigingInfo.start_height) }}</span></td>
+            <td>
+              <div v-if="v.sigingInfo && !v.sigingInfo?.jailed_until.startsWith('1970')" class="text-xs flex flex-col">
+                <div class="badge">{{ format.toDay(v.sigingInfo.jailed_until, 'from') }}</div>
+                <div>{{v.sigingInfo?.jailed_until }}</div>
+              </div>
+            </td>
+            <td class=" capitalize">{{ v.sigingInfo?.tombstoned }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
     
     <label for="add-validator" class="btn btn-primary mt-5">Add Validators</label>