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,
"target": "",
"scripts": {
"dev": "vite",
"serve": "vite",
"build": "run-p type-check build-only",
"preview": "vite preview",

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

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