feat: staking table

This commit is contained in:
Alisa | Side.one 2023-05-12 13:32:56 +08:00
parent 4ebc325b88
commit ae2a16a42b

View File

@ -194,7 +194,7 @@ const rank = function (position: number) {
<div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow"> <div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<table class="table w-full"> <table class="table staking-table w-full">
<thead> <thead>
<tr> <tr>
<th scope="col" style="width: 3rem; position: relative">#</th> <th scope="col" style="width: 3rem; position: relative">#</th>
@ -206,11 +206,15 @@ const rank = function (position: number) {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr v-for="(v, i) in list" :key="v.operator_address"> <tr
v-for="(v, i) in list"
:key="v.operator_address"
class="hover:bg-gray-100 dark:bg-[#384059]"
>
<!-- 👉 rank --> <!-- 👉 rank -->
<td> <td>
<div <div
class="text-xs truncate relative py-2 px-4 rounded-full w-fit" class="text-xs truncate relative px-2 py-1 rounded-full w-fit"
:class="`text-${rank(i)}`" :class="`text-${rank(i)}`"
> >
<span <span
@ -359,3 +363,10 @@ const rank = function (position: number) {
} }
} }
</route> </route>
<style>
.staking-table.table :where(th, td) {
padding: 6px 5px;
background: transparent;
}
</style>