zramsay/cosmos-explorer
1
0
Fork 0
forked from cerc-io/cosmos-explorer
Code Pull Requests Actions Activity

feat: add npm run dev

Browse Source
This commit is contained in:
alisa 2023-04-25 01:05:00 +08:00
parent ab0fb2252e
commit 0618897761
2 changed files with 50 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -4,6 +4,7 @@
"private": true, "private": true,
"target": "", "target": "",
"scripts": { "scripts": {
"dev": "vite",
"serve": "vite", "serve": "vite",
"build": "run-p type-check build-only", "build": "run-p type-check build-only",
"preview": "vite preview", "preview": "vite preview",

89
packages/dashboard/src/components/ProposalProcess.vue
View File

@ -1,58 +1,67 @@
<script lang="ts" setup> <script lang="ts" setup>
import { useFormatter } from '@/stores'; import { useFormatter } from "@/stores";
import { computed } from '@vue/reactivity'; import { computed } from "@vue/reactivity";
import { ref, type PropType } from 'vue'; import { ref, type PropType } from "vue";
const props = defineProps({ const props = defineProps({
tally: { type: Object as PropType<{ tally: {
yes: string,
no: string,
noWithVeto: string,
abstain: string
}>},
pool: {
type: Object as PropType<{ type: Object as PropType<{
notBondedTokens: string; yes: string;
bondedTokens: string; no: string;
noWithVeto: string;
abstain: string;
}>, }>,
}, },
}) pool: {
const format = useFormatter() type: Object as PropType<{
const yes = computed(() => (format.calculatePercent(props.tally?.yes, props.pool?.bondedTokens))) notBondedTokens: string;
const no = computed(() => ref(format.calculatePercent(props.tally?.no, props.pool?.bondedTokens))) bondedTokens: string;
const abstain = computed(() => (format.calculatePercent(props.tally?.abstain, props.pool?.bondedTokens))) }>,
const veto = computed(() => (format.calculatePercent(props.tally?.noWithVeto, props.pool?.bondedTokens))) },
});
const format = useFormatter();
console.log(yes.value, no.value, abstain.value, veto.value) const yes = computed(() =>
format.calculatePercent(props.tally?.yes, props.pool?.bondedTokens)
);
const no = computed(() =>
ref(format.calculatePercent(props.tally?.no, props.pool?.bondedTokens))
);
const abstain = computed(() =>
format.calculatePercent(props.tally?.abstain, props.pool?.bondedTokens)
);
const veto = computed(() =>
format.calculatePercent(props.tally?.noWithVeto, props.pool?.bondedTokens)
);
</script> </script>
<template> <template>
<div class="progress"> <div class="progress">
<div class="progress-bar bg-success" :style="`width: ${yes}`"></div> <div class="progress-bar bg-success" :style="`width: ${yes}`"></div>
<div class="progress-bar bg-error" :style="`width: ${no}`"></div> <div class="progress-bar bg-error" :style="`width: ${no}`"></div>
<div class="progress-bar " :style="`width: ${veto}; background-color: #B71C1C;`"></div> <div
<div class="progress-bar bg-secondary" :style="`width: ${abstain}`"></div> class="progress-bar"
</div> :style="`width: ${veto}; background-color: #B71C1C;`"
></div>
<div class="progress-bar bg-secondary" :style="`width: ${abstain}`"></div>
</div>
</template> </template>
<style scoped> <style scoped>
.progress { .progress {
height: 0.8rem; height: 0.8rem;
overflow: hidden; overflow: hidden;
background-color: rgba(128, 128, 128, 0.178); background-color: rgba(128, 128, 128, 0.178);
} }
.progress-bar { .progress-bar {
display: inline-block; display: inline-block;
height: 100%; height: 100%;
} }
.progress :first-child { .progress :first-child {
border-radius: 0px !important; border-radius: 0px !important;
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
border-top-left-radius: 0; border-top-left-radius: 0;
} }
.progress :last-child { .progress :last-child {
border-radius: 0px !important; border-radius: 0px !important;
} }
</style> </style>