forked from cerc-io/cosmos-explorer
feat: proposal item
This commit is contained in:
Alisa | Side.one
@@ -26,64 +26,82 @@ const statusMap: Record<string, string> = {
|
||||
</script>
|
||||
<template>
|
||||
<div class="bg-white dark:bg-[#28334e] rounded text-sm">
|
||||
<RouterLink
|
||||
:to="`/${chain.chainName}/gov/${item?.proposal_id}`"
|
||||
v-for="(item, index) in proposals?.proposals"
|
||||
:key="index"
|
||||
class="py-4 px-4 hover:bg-gray-100 dark:hover:bg-[#353f5a] block rounded cursor-pointer"
|
||||
>
|
||||
<div class="grid grid-cols-6 md:grid-cols-11 flex-1">
|
||||
<div class="text-main dark:text-white mb-3">
|
||||
#{{ item?.proposal_id }}
|
||||
</div>
|
||||
<table class="table w-full">
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in proposals?.proposals" :key="index">
|
||||
<td class="px-4 w-10">
|
||||
<RouterLink
|
||||
class="text-main text-base hover:text-indigo-400"
|
||||
:to="`/${chain.chainName}/gov/${item?.proposal_id}`"
|
||||
>
|
||||
#{{ item?.proposal_id }}
|
||||
</RouterLink>
|
||||
</td>
|
||||
<td class="w-[40%]">
|
||||
<div>
|
||||
<RouterLink
|
||||
:to="`/${chain.chainName}/gov/${item?.proposal_id}`"
|
||||
class="text-main text-base mb-1 block hover:text-indigo-400"
|
||||
>
|
||||
{{ item?.content?.title }}
|
||||
</RouterLink>
|
||||
<div
|
||||
class="bg-[#f6f2ff] text-[#9c6cff] dark:bg-gray-600 dark:text-gray-300 inline-block rounded-full px-2 py-[1px] text-xs"
|
||||
>
|
||||
{{ showType(item.content['@type']) }}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="w-[30%]">
|
||||
<ProposalProcess
|
||||
:pool="staking.pool"
|
||||
:tally="item.final_tally_result"
|
||||
></ProposalProcess>
|
||||
</td>
|
||||
<td>
|
||||
<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">
|
||||
{{ statusMap?.[item?.status] || item?.status }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="truncate col-span-2 md:col-span-1 text-xs text-gray-500 dark:text-gray-400 text-right md:flex md:justify-start"
|
||||
>
|
||||
{{ format.toDay(item.voting_end_time, 'from') }}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<div class="col-span-5 md:pr-10 text-main dark:text-white truncate">
|
||||
{{ item?.content?.title }}
|
||||
</div>
|
||||
|
||||
<div class="col-span-3 mb-3 truncate">
|
||||
<div
|
||||
class="bg-[#f6f2ff] text-[#9c6cff] dark:bg-gray-600 dark:text-gray-300 inline-block rounded-full px-2 py-[1px] text-xs"
|
||||
>
|
||||
{{ showType(item.content['@type']) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex items-center mb-3"
|
||||
: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">
|
||||
{{ statusMap?.[item?.status] || item?.status }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="truncate mb-3 col-span-2 md:col-span-1 text-xs text-gray-500 dark:text-gray-400 text-right md:flex md:justify-start"
|
||||
>
|
||||
{{ format.toDay(item.voting_end_time, 'from') }}
|
||||
</div>
|
||||
</div>
|
||||
<ProposalProcess
|
||||
:pool="staking.pool"
|
||||
:tally="item.final_tally_result"
|
||||
></ProposalProcess>
|
||||
</RouterLink>
|
||||
<td>
|
||||
<div>
|
||||
<button class="btn btn-xs btn-primary rounded-sm mr-3">
|
||||
Detail
|
||||
</button>
|
||||
<button class="btn btn-xs btn-primary rounded-sm">Vote</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -30,14 +30,35 @@ const veto = computed(() =>
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="progress rounded-full h-1 text-xs flex items-center">
|
||||
<div class="h-1 bg-yes" :style="`width: ${yes}`"></div>
|
||||
<div class="h-1 bg-no" :style="`width: ${no}`"></div>
|
||||
<div class="progress rounded-[3px] h-7 text-xs flex items-center">
|
||||
<div
|
||||
class="h-1"
|
||||
:style="`width: ${veto}; background-color: #B71C1C;`"
|
||||
></div>
|
||||
<div class="h-1 bg-secondary" :style="`width: ${abstain}`"></div>
|
||||
class="h-7 bg-yes flex items-center pl-2 text-white overflow-hidden"
|
||||
:style="`width: ${yes}`"
|
||||
:title="yes"
|
||||
>
|
||||
{{ yes }}
|
||||
</div>
|
||||
<div
|
||||
class="h-7 bg-no flex items-center overflow-hidden"
|
||||
:style="`width: ${no}`"
|
||||
:title="no"
|
||||
>
|
||||
{{ no }}
|
||||
</div>
|
||||
<div
|
||||
class="h-7 bg-[#B71C1C] flex items-center overflow-hidden"
|
||||
:style="`width: ${veto};`"
|
||||
:title="veto"
|
||||
>
|
||||
{{ veto }}
|
||||
</div>
|
||||
<div
|
||||
class="h-7 bg-secondary flex items-center overflow-hidden"
|
||||
:style="`width: ${abstain}`"
|
||||
:title="abstain"
|
||||
>
|
||||
{{ abstain }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
|
||||
Reference in New Issue
Block a user