poptong
83b162d2bd
Some checks failed
🚀 Deploy - Demo / deployment (push) Has been cancelled
- 웹훅 URL을 https://admin.youtooplay.com/webhook로 변경 - Nginx 리버스 프록시 설정 파일 추가 - 배포 가이드 업데이트
57 lines
1.2 KiB
Vue
57 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
title: string
|
|
image: string
|
|
stats: string
|
|
change: number
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const isPositive = controlledComputed(() => props.change, () => Math.sign(props.change) === 1)
|
|
|
|
const moreList = [
|
|
{ title: 'Yesterday', value: 'Yesterday' },
|
|
{ title: 'Last Week', value: 'Last Week' },
|
|
{ title: 'Last Month', value: 'Last Month' },
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<VCard>
|
|
<VCardText class="d-flex align-center pb-4">
|
|
<img
|
|
width="42"
|
|
:src="props.image"
|
|
alt="image"
|
|
>
|
|
|
|
<VSpacer />
|
|
|
|
<MoreBtn
|
|
class="me-n3 mt-n4"
|
|
:menu-list="moreList"
|
|
/>
|
|
</VCardText>
|
|
|
|
<VCardText>
|
|
<p class="mb-1">
|
|
{{ props.title }}
|
|
</p>
|
|
<h5 class="text-h5 text-no-wrap mb-3">
|
|
{{ props.stats }}
|
|
</h5>
|
|
<span
|
|
:class="isPositive ? 'text-success' : 'text-error'"
|
|
class="d-flex align-center gap-1 text-sm"
|
|
>
|
|
<VIcon
|
|
size="18"
|
|
:icon="isPositive ? 'bx-up-arrow-alt' : 'bx-down-arrow-alt'"
|
|
/>
|
|
{{ isPositive ? Math.abs(props.change) : props.change }}%
|
|
</span>
|
|
</VCardText>
|
|
</VCard>
|
|
</template>
|