feat: proposal item
This commit is contained in:
parent
a478949bdd
commit
8be8ee5746
@ -26,10 +26,10 @@ const statusMap: Record<string, string> = {
|
|||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="bg-white dark:bg-[#28334e] rounded text-sm">
|
<div class="bg-white dark:bg-[#28334e] rounded text-sm">
|
||||||
<table class="table w-full">
|
<table class="table-compact w-full table-fixed hidden lg:table">
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr v-for="(item, index) in proposals?.proposals" :key="index">
|
<tr v-for="(item, index) in proposals?.proposals" :key="index">
|
||||||
<td class="px-4 w-10">
|
<td class="px-4 w-20">
|
||||||
<RouterLink
|
<RouterLink
|
||||||
class="text-main text-base hover:text-indigo-400"
|
class="text-main text-base hover:text-indigo-400"
|
||||||
:to="`/${chain.chainName}/gov/${item?.proposal_id}`"
|
:to="`/${chain.chainName}/gov/${item?.proposal_id}`"
|
||||||
@ -37,29 +37,29 @@ const statusMap: Record<string, string> = {
|
|||||||
#{{ item?.proposal_id }}
|
#{{ item?.proposal_id }}
|
||||||
</RouterLink>
|
</RouterLink>
|
||||||
</td>
|
</td>
|
||||||
<td class="w-[40%]">
|
<td class="w-[35%]">
|
||||||
<div>
|
<div>
|
||||||
<RouterLink
|
<RouterLink
|
||||||
:to="`/${chain.chainName}/gov/${item?.proposal_id}`"
|
:to="`/${chain.chainName}/gov/${item?.proposal_id}`"
|
||||||
class="text-main text-base mb-1 block hover:text-indigo-400"
|
class="text-main text-base mb-1 block hover:text-indigo-400 truncate"
|
||||||
>
|
>
|
||||||
{{ item?.content?.title }}
|
{{ item?.content?.title }}
|
||||||
</RouterLink>
|
</RouterLink>
|
||||||
<div
|
<div
|
||||||
class="bg-[#f6f2ff] text-[#9c6cff] dark:bg-gray-600 dark:text-gray-300 inline-block rounded-full px-2 py-[1px] text-xs"
|
class="bg-[#f6f2ff] text-[#9c6cff] dark:bg-gray-600 dark:text-gray-300 inline-block rounded-full px-2 py-[1px] text-xs mb-1"
|
||||||
>
|
>
|
||||||
{{ showType(item.content['@type']) }}
|
{{ showType(item.content['@type']) }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td class="w-[30%]">
|
<td class="w-[25%]">
|
||||||
<ProposalProcess
|
<ProposalProcess
|
||||||
:pool="staking.pool"
|
:pool="staking.pool"
|
||||||
:tally="item.final_tally_result"
|
:tally="item.final_tally_result"
|
||||||
></ProposalProcess>
|
></ProposalProcess>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div>
|
<div class="pl-4">
|
||||||
<div
|
<div
|
||||||
class="flex items-center"
|
class="flex items-center"
|
||||||
:class="
|
:class="
|
||||||
@ -103,5 +103,75 @@ const statusMap: Record<string, string> = {
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
<div class="lg:hidden">
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in proposals?.proposals"
|
||||||
|
:key="index"
|
||||||
|
class="px-4 py-4"
|
||||||
|
>
|
||||||
|
<RouterLink
|
||||||
|
:to="`/${chain.chainName}/gov/${item?.proposal_id}`"
|
||||||
|
class="text-main text-base mb-1 flex justify-between hover:text-indigo-400 truncate"
|
||||||
|
>
|
||||||
|
<div>{{ item?.content?.title }}</div>
|
||||||
|
|
||||||
|
<div>#{{ item?.proposal_id }}</div>
|
||||||
|
</RouterLink>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-4 mt-2 mb-2">
|
||||||
|
<div class="col-span-2">
|
||||||
|
<div
|
||||||
|
class="bg-[#f6f2ff] text-[#9c6cff] dark:bg-gray-600 dark:text-gray-300 inline-block rounded-full px-2 py-[1px] text-xs mb-1"
|
||||||
|
>
|
||||||
|
{{ showType(item.content['@type']) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="flex items-center"
|
||||||
|
:class="
|
||||||
|
statusMap?.[item?.status] === 'PASSED'
|
||||||
|
? 'text-yes'
|
||||||
|
: statusMap?.[item?.status] === 'REJECTED'
|
||||||
|
? 'text-no'
|
||||||
|
: 'text-info'
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="w-1 h-1 rounded-full mr-2"
|
||||||
|
:class="
|
||||||
|
statusMap?.[item?.status] === 'PASSED'
|
||||||
|
? 'bg-yes'
|
||||||
|
: statusMap?.[item?.status] === 'REJECTED'
|
||||||
|
? 'bg-no'
|
||||||
|
: 'bg-info'
|
||||||
|
"
|
||||||
|
></div>
|
||||||
|
<div class="text-xs flex items-center">
|
||||||
|
{{ statusMap?.[item?.status] || item?.status }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="truncate text-xs text-gray-500 dark:text-gray-400 flex items-center justify-end"
|
||||||
|
>
|
||||||
|
{{ format.toDay(item.voting_end_time, 'from') }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<ProposalProcess
|
||||||
|
:pool="staking.pool"
|
||||||
|
:tally="item.final_tally_result"
|
||||||
|
></ProposalProcess>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-4">
|
||||||
|
<button class="btn btn-xs btn-primary rounded-sm mr-3 px-4">
|
||||||
|
Detail
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-xs btn-primary rounded-sm px-4">Vote</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -39,21 +39,21 @@ const veto = computed(() =>
|
|||||||
{{ yes }}
|
{{ yes }}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="h-7 bg-no flex items-center overflow-hidden"
|
class="h-7 bg-no flex items-center text-white overflow-hidden"
|
||||||
:style="`width: ${no}`"
|
:style="`width: ${no}`"
|
||||||
:title="no"
|
:title="no"
|
||||||
>
|
>
|
||||||
{{ no }}
|
{{ no }}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="h-7 bg-[#B71C1C] flex items-center overflow-hidden"
|
class="h-7 bg-[#B71C1C] flex items-center text-white overflow-hidden"
|
||||||
:style="`width: ${veto};`"
|
:style="`width: ${veto};`"
|
||||||
:title="veto"
|
:title="veto"
|
||||||
>
|
>
|
||||||
{{ veto }}
|
{{ veto }}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="h-7 bg-secondary flex items-center overflow-hidden"
|
class="h-7 bg-secondary flex items-center text-white overflow-hidden"
|
||||||
:style="`width: ${abstain}`"
|
:style="`width: ${abstain}`"
|
||||||
:title="abstain"
|
:title="abstain"
|
||||||
>
|
>
|
||||||
|
Loading…
Reference in New Issue
Block a user