generated from rwerplus/nuxt3-app
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.vue
42 lines (39 loc) · 1.42 KB
/
index.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<template>
<div class="max-w-sm mx-auto mt-4">
<div class="flex items-center">
<img class="w-40 h-40 mb-4 rounded-full" height="160" width="160"
src="https://avatars.githubusercontent.com/u/48611415?s=400&u=6dd61ccd864754c7d60f4d02e9f9cbe0befcdf61&v=4"
alt="productfrontenddeveloper" />
<a target="blank" class="ml-4 font-bold text-red-600 dark:text-green-400"
href="https://github.com/rwerplus">阴阳师</a>
</div>
<DBInput/>
<ul role="list" class="mt-10 space-y-4">
<li v-for="item in lists" :key="item.id">
<NuxtLink class="py-4 hover:shadow-xl global-text sans-appfont-en" :to="item.url">
<div class="flex items-center justify-between p-4 space-x-3 bg-gray-300 rounded-lg dark:bg-gray-700">
{{ item.title }}
<ArrowNarrowRightIcon class="w-6 h-6 global-text" aria-hidden="true" />
</div>
</NuxtLink>
</li>
</ul>
</div>
</template>
<script lang="ts" setup>
import { ArrowNarrowRightIcon } from '@heroicons/vue/outline'
interface links {
id: number
title: string
url: any
}
const router = useRouter();
console.log(router);
const lists = ref<links[]>([
{ id: 1, title: 'Pinia Store', url: 'pinia' },
{ id: 1, title: 'Modal', url: 'modal' },
{ id: 1, title: 'Menu', url: 'menu' },
{ id: 1, title: 'New soon...', url: '' },
])
const { data } = await useAsyncData('auth', () => $fetch('/count'))
</script>