97 lines
2.2 KiB
Vue
97 lines
2.2 KiB
Vue
<script lang="ts" setup>
|
|
definePageMeta({
|
|
layout: "dashboard"
|
|
});
|
|
const color = useColorMode();
|
|
color.preference = "dark";
|
|
|
|
const cards: any[] = [
|
|
{
|
|
title: "1",
|
|
icon: "meteor-icons:chevron-up",
|
|
desc: "epah ya bro"
|
|
},
|
|
{
|
|
title: "2",
|
|
icon: "majesticons:award",
|
|
desc: "bolinhas de natal ou whatever"
|
|
},
|
|
{
|
|
title: "3",
|
|
icon: "svg-spinners:clock",
|
|
desc: "espera aí um becs bro"
|
|
},
|
|
|
|
];
|
|
const table_demo = ref([
|
|
{
|
|
id: '4600',
|
|
date: '2024-03-11T15:30:00',
|
|
status: 'paid',
|
|
email: 'james.anderson@example.com',
|
|
amount: 594
|
|
},
|
|
{
|
|
id: '4599',
|
|
date: '2024-03-11T10:10:00',
|
|
status: 'failed',
|
|
email: 'mia.white@example.com',
|
|
amount: 276
|
|
},
|
|
{
|
|
id: '4598',
|
|
date: '2024-03-11T08:50:00',
|
|
status: 'refunded',
|
|
email: 'william.brown@example.com',
|
|
amount: 315
|
|
},
|
|
{
|
|
id: '4597',
|
|
date: '2024-03-10T19:45:00',
|
|
status: 'paid',
|
|
email: 'emma.davis@example.com',
|
|
amount: 529
|
|
},
|
|
{
|
|
id: '4596',
|
|
date: '2024-03-10T15:55:00',
|
|
status: 'paid',
|
|
email: 'ethan.harris@example.com',
|
|
amount: 639
|
|
}
|
|
])
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<UContainer>
|
|
|
|
<UDashboardSidebarToggle variant="subtle" class="absolute z-20 top-3 left-2.5"/>
|
|
|
|
<div class="mt-1 mb-3 flex flex-col w-full relative z-0">
|
|
<ProseH2 class="text-center m-0.5 w-full">Hey there, user!</ProseH2>
|
|
<ProseP class="text-center text-muted m-0.5">Welcome to the UI!</ProseP>
|
|
<UBadge variant="subtle" class="inline mx-auto">It's cool, isn't it ?</UBadge>
|
|
</div>
|
|
|
|
<!--<div class="mx-auto max-w-220">-->
|
|
<UPageGrid class="lg:grid-cols-3 lg:gap-0 not-lg:gap-3">
|
|
<UPageCard
|
|
v-for="card in cards"
|
|
:title="card.title"
|
|
:description="card.desc"
|
|
:icon="card.icon"
|
|
variant="subtle"
|
|
class="dark-widget-bg col-lg lg:rounded-none first:lg:rounded-l-2xl last:lg:rounded-r-2xl sm:rounded-2xl"
|
|
/>
|
|
</UPageGrid>
|
|
|
|
|
|
<UTable :data="table_demo"/>
|
|
</UContainer>
|
|
</template>
|
|
|
|
<style scoped>
|
|
@import "bootstrap/dist/css/bootstrap-grid.css";
|
|
|
|
</style> |