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

feat: CardStatics

Browse Source
This commit is contained in:
Alisa | Side.one 2023-05-12 21:42:22 +08:00
parent 53481bad37
commit 19fbeb8ffd
2 changed files with 26 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/CardStatisticsVertical.vue
View File

@ -1,4 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { Icon } from '@iconify/vue';
interface Props { interface Props {
title: string; title: string;
color?: string; color?: string;
@ -19,40 +21,40 @@ const isPositive = controlledComputed(
</script> </script>
<template> <template>
<VCard class="h-full flex-col content-between"> <div class="bg-base-100 shadow rounded p-4">
<VCardText class="d-flex align-center justify-between"> <div class="flex items-center justify-between">
<VAvatar <div
v-if="props.icon" v-if="props.icon"
rounded class="relative w-9 h-9 rounded overflow-hidden flex items-center justify-center"
size="38"
variant="tonal"
:color="props.color"
> >
<VIcon :icon="props.icon" size="24" /> <Icon :class="[`text-${props?.color}`]" :icon="props.icon" size="32" />
</VAvatar> <div
class="absolute top-0 left-0 bottom-0 right-0 opacity-20"
:class="[`bg-${props?.color}`]"
></div>
</div>
<div <div
v-if="props.change" v-if="props.change"
:class="isPositive ? 'text-success' : 'text-error'" :class="isPositive ? 'text-success' : 'text-error'"
class="d-flex align-center text-sm font-weight-medium mt-n4" class="flex items-center text-sm font-semibold"
> >
<span>{{ isPositive ? `+${props.change}` : props.change }}%</span> <span>{{ isPositive ? `+${props.change}` : props.change }}%</span>
<Icon :icon="isPositive ? 'mdi-chevron-up' : 'mdi-chevron-down'" />
<VIcon :icon="isPositive ? 'mdi-chevron-up' : 'mdi-chevron-down'" />
</div> </div>
</VCardText> </div>
<VCardText class="d-flex flex-col"> <div class="">
<h6 class="text-h6 me-2 mt-2 mb-1"> <h6 class="text-lg font-semibold mt-2 mb-1">
{{ props.stats }} {{ props.stats }}
</h6> </h6>
<p class="text-sm"> <p class="text-sm">
{{ props.title }} {{ props.title }}
</p> </p>
<VChip v-if="props.subtitle" size="x-small" class="font-weight-medium"> <div v-if="props.subtitle" size="x-small" class="font-semibold">
<span class="text-truncate">{{ props.subtitle }}</span> <span class="text-truncate">{{ props.subtitle }}</span>
</VChip> </div>
</VCardText> </div>
</VCard> </div>
</template> </template>

10
src/modules/[chain]/staking/index.vue
View File

@ -231,14 +231,14 @@ const rank = function (position: number) {
style="max-width: 400px" style="max-width: 400px"
> >
<div <div
class="avatar mr-4 relative w-9 rounded-full overflow-hidden" class="avatar mr-4 relative w-8 h-8 rounded-full overflow-hidden"
> >
<div <div
class="w-9 rounded-full bg-gray-400 absolute opacity-10" class="w-8 h-8 rounded-full bg-gray-400 absolute opacity-10"
></div> ></div>
<div class="w-9 rounded-full"> <div class="w-8 h-8 rounded-full">
<img <img
v-if="logo(v.description?.identity) !== ''" v-if="v.description?.identity"
v-lazy="logo(v.description?.identity)" v-lazy="logo(v.description?.identity)"
class="object-contain" class="object-contain"
/> />
@ -366,7 +366,7 @@ const rank = function (position: number) {
<style> <style>
.staking-table.table :where(th, td) { .staking-table.table :where(th, td) {
padding: 6px 5px; padding: 8px 5px;
background: transparent; background: transparent;
} }
</style> </style>