feat: governance tabs

This commit is contained in:
Alisa | Side.one 2023-05-05 08:49:33 +08:00
parent 51c173e82d
commit 45eb49175c
2 changed files with 33 additions and 25 deletions

View File

@ -2,39 +2,45 @@
import { useGovStore } from '@/stores'; import { useGovStore } from '@/stores';
import ProposalListItem from '@/components/ProposalListItem.vue'; import ProposalListItem from '@/components/ProposalListItem.vue';
import { ref, onMounted } from 'vue'; import { ref, onMounted } from 'vue';
const tab = ref(''); const tab = ref('2');
const store = useGovStore(); const store = useGovStore();
onMounted(() => { onMounted(() => {
store.fetchProposals('2'); store.fetchProposals('2');
}); });
const changeTab = (val: '2' | '3' | '4') => {
tab.value = val;
store.fetchProposals(val);
};
</script> </script>
<template> <template>
<div> <div class="tabs tabs-boxed bg-transparent mb-4">
<VTabs v-model="tab" class="v-tabs-pill"> <a
<VTab value="2">Voting</VTab> class="tab text-gray-400 uppercase"
<VTab value="3" @click="store.fetchProposals('3')">Passed</VTab> :class="{ 'tab-active': tab === '2' }"
<VTab value="4" @click="store.fetchProposals('4')">Rejected</VTab> @click="changeTab('2')"
</VTabs> >Voting</a
<VWindow v-model="tab" class="mt-5"> >
<VWindowItem value="2"> <a
<ProposalListItem :proposals="store?.proposals['2']" /> class="tab text-gray-400 uppercase"
</VWindowItem> :class="{ 'tab-active': tab === '3' }"
@click="changeTab('3')"
<VWindowItem value="3"> >Passed</a
<ProposalListItem :proposals="store?.proposals['3']" /> >
</VWindowItem> <a
class="tab text-gray-400 uppercase"
<VWindowItem value="4"> :class="{ 'tab-active': tab === '4' }"
<ProposalListItem :proposals="store?.proposals['4']" /> @click="changeTab('4')"
</VWindowItem> >Rejected</a
</VWindow> >
</div> </div>
<ProposalListItem :proposals="store?.proposals[tab]" />
</template> </template>
<route> <route>
{ {
meta: { meta: {
i18n: 'governance' i18n: 'governance'
}
} }
</route> }
</route>

View File

@ -21,6 +21,7 @@ module.exports = {
{ {
light: { light: {
...require('daisyui/src/colors/themes')['[data-theme=light]'], ...require('daisyui/src/colors/themes')['[data-theme=light]'],
primary: '#666cff',
info: '#666CFF', info: '#666CFF',
'base-content': '#e9eaeb' 'base-content': '#e9eaeb'
}, },
@ -28,6 +29,7 @@ module.exports = {
{ {
dark: { dark: {
...require('daisyui/src/colors/themes')['[data-theme=dark]'], ...require('daisyui/src/colors/themes')['[data-theme=dark]'],
primary: '#666cff',
info: '#666CFF', info: '#666CFF',
'base-100': '#2a334c', 'base-100': '#2a334c',
'base-content': '#373f57' 'base-content': '#373f57'