cerc-io/cosmos-explorer
16
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki 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">
import { Icon } from '@iconify/vue';
interface Props {
title: string;
color?: string;
@ -19,40 +21,40 @@ const isPositive = controlledComputed(
</script>
<template>
<VCard class="h-full flex-col content-between">
<VCardText class="d-flex align-center justify-between">
<VAvatar
<div class="bg-base-100 shadow rounded p-4">
<div class="flex items-center justify-between">
<div
v-if="props.icon"
rounded
size="38"
variant="tonal"
:color="props.color"
class="relative w-9 h-9 rounded overflow-hidden flex items-center justify-center"
>
<VIcon :icon="props.icon" size="24" />
</VAvatar>
<Icon :class="[`text-${props?.color}`]" :icon="props.icon" size="32" />
<div
class="absolute top-0 left-0 bottom-0 right-0 opacity-20"
:class="[`bg-${props?.color}`]"
></div>
</div>
<div
v-if="props.change"
: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>
<VIcon :icon="isPositive ? 'mdi-chevron-up' : 'mdi-chevron-down'" />
<Icon :icon="isPositive ? 'mdi-chevron-up' : 'mdi-chevron-down'" />
</div>
</VCardText>
</div>
<VCardText class="d-flex flex-col">
<h6 class="text-h6 me-2 mt-2 mb-1">
<div class="">
<h6 class="text-lg font-semibold mt-2 mb-1">
{{ props.stats }}
</h6>
<p class="text-sm">
{{ props.title }}
</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>
</VChip>
</VCardText>
</VCard>
</div>
</div>
</div>
</template>

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

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