diff options
| author | Kenimarru <[email protected]> | 2024-01-08 19:58:12 +0100 |
|---|---|---|
| committer | Kenimarru <[email protected]> | 2024-01-08 19:58:12 +0100 |
| commit | 4084445a3c1efb825c2adde086cb4d40c9ba9f7a (patch) | |
| tree | cfa45e3ef5a652a38240d44bbbc77ff46a99f508 /components/Cards.vue | |
| parent | v0.3.2 (diff) | |
| download | hiruku-4084445a3c1efb825c2adde086cb4d40c9ba9f7a.tar.xz hiruku-4084445a3c1efb825c2adde086cb4d40c9ba9f7a.zip | |
v0.4.0
Diffstat (limited to 'components/Cards.vue')
| -rw-r--r-- | components/Cards.vue | 32 |
1 files changed, 29 insertions, 3 deletions
diff --git a/components/Cards.vue b/components/Cards.vue index 1b04d16..558d23e 100644 --- a/components/Cards.vue +++ b/components/Cards.vue @@ -1,13 +1,12 @@ <template> - <section class="space-y-4"> + <section v-if="title !== 'Top 10 Anime'" class="space-y-4"> <section class="flex flex-col"> <h2 class="text-secondary text-xl font-semibold">{{ title }}</h2> <p class="text-primary text-sm">{{ description }}</p> </section> <section class="grid grid-cols-2 md:grid-cols-8 gap-2"> <NuxtLink :to="`/i/${item.id}`" class="w-full space-y-1" v-for="item in data"> - <NuxtImg :src="item.coverImage.large" :alt="item.title.romaji" :title="item.title.romaji" - class="w-full h-44 ms:h-48 mm:h-60 ml:h-64 tb:h-32 lp:h-56 ll:h-60 4k:h-96 + <NuxtImg :src="item.coverImage.large" :alt="item.title.romaji" :title="item.title.romaji" class="w-full h-44 ms:h-48 mm:h-60 ml:h-64 tb:h-32 lp:h-56 ll:h-60 4k:h-96 object-cover rounded-sm hover:scale-95" /> <h6 class="text-primary text-sm truncate">{{ item.title.romaji }}</h6> <div class="flex items-center gap-1"> @@ -17,6 +16,33 @@ </NuxtLink> </section> </section> + <section v-if="title === 'Top 10 Anime'" class="space-y-4"> + <section class="flex flex-col"> + <h2 class="text-secondary text-xl font-semibold">{{ title }}</h2> + <p class="text-primary text-sm">{{ description }}</p> + </section> + <section class="grid grid-cols-1 w-full gap-2"> + <NuxtLink :to="`/i/${item.id}`" class="relative w-full space-y-1" v-for="(item, index) in data"> + <NuxtImg :src="item.bannerImage" :alt="item.title.romaji" :title="item.title.romaji" + class="w-full h-20 object-cover rounded-sm opacity-50" /> + <div class="absolute inset-0 px-2"> + <button type="button" class="text-primary bg-secondary text-sm rounded-sm px-2"> + #{{ index + 1 }}</button> + <h6 class="text-primary text-base font-semibold truncate">{{ item.title.romaji }}</h6> + <div class="flex items-center gap-2"> + <button type="button" class="text-primary bg-secondary text-sm rounded-sm px-2"> + {{ item.averageScore }}%</button> + <button type="button" class="text-primary bg-secondary text-sm rounded-sm px-2"> + {{ item.format }}</button> + <button type="button" class="text-primary bg-secondary text-sm rounded-sm px-2"> + {{ item.season }}</button> + <button type="button" class="text-primary bg-secondary text-sm rounded-sm px-2"> + {{ item.seasonYear }}</button> + </div> + </div> + </NuxtLink> + </section> + </section> </template> <script setup> |