renun/BewlyBewly
1
0
Fork 0
mirror of https://github.com/BewlyBewly/BewlyBewly.git synced 2025-04-14 13:15:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: implement all features for ranking page

Browse Source
This commit is contained in:
Hakadao
2023-10-20 00:20:43 +08:00
parent ef55debeb8
commit d595f04555
8 changed files with 113 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/LongCoverCard/LongCoverCard.vue
View File

@@ -1,5 +1,6 @@
<script setup lang="ts">
import { removeHttpFromUrl } from '~/utils/main'
import { numFormatter } from '~/utils/dataFormatter'
defineProps<{
url: string
@@ -10,6 +11,8 @@ defineProps<{
desc: string
capsuleText?: string
rank?: number
view?: number
follow?: number
horizontal?: boolean
}>()
</script>
@@ -18,24 +21,23 @@ defineProps<{
<div
:style="{
display: horizontal ? 'flex' : 'block',
}" gap-4
}"
gap-4
class="group"
>
<!-- Cover -->
<a
:style="{ width: horizontal ? '250px' : '100%' }"
rounded="$bew-radius" w-full aspect="12/16" overflow-hidden mb-4 bg="$bew-fill-4" relative
class="group" shrink-0
:style="{ width: horizontal ? '170px' : '100%' }"
:href="url" target="_blank" tabindex="-1"
rounded="$bew-radius" w-full bg="$bew-fill-4" relative shrink-0
group-hover:shadow group-hover:transform="translate--4px"
transition="all ease-in-out 300"
style="--un-shadow:
0 0 0 4px var(--bew-theme-color),
8px 8px 0 2px var(--bew-theme-color-60),
14px 14px 0 2px var(--bew-theme-color-40)"
>
<div
group-hover:shadow group-hover:transform="translate--4px"
transition="all ease-in-out 300" rounded="$bew-radius"
style="--un-shadow:
0 0 0 4px var(--bew-theme-color),
8px 8px 0 2px var(--bew-theme-color-60),
14px 14px 0 2px var(--bew-theme-color-40)"
>
<div aspect="12/16" overflow-hidden rounded="$bew-radius">
<div
v-if="rank"
w-full
@@ -55,7 +57,6 @@ defineProps<{
overflow-hidden
rounded="$bew-radius"
aspect="12/16"
mb-4
pos="relative"
bg="$bew-fill-3"
>
@@ -121,8 +122,13 @@ defineProps<{
</div>
</div>
</a>
<div flex-1>
<p un-text="lg" my-4>
<div
flex-1
:style="{
marginTop: horizontal ? '0' : '1rem',
}"
>
<p un-text="lg" mb-4>
<a
:href="url"
target="_blank"
@@ -132,6 +138,10 @@ defineProps<{
{{ title }}
</a>
</p>
<p v-if="view || follow" text="$bew-text-2" mb-2>
<span v-if="view" mr-4>{{ $t('common.view', { count: numFormatter(view) }, view) }}</span>
<span v-if="follow">{{ $t('common.anime_follow_count', { count: numFormatter(follow) }, follow) }}</span>
</p>
<div text="$bew-text-2" flex flex-wrap gap-2 items-center>
<div
v-if="capsuleText"

31
src/components/LongCoverCard/LongCoverCardSkeleton.vue
View File

@@ -1,16 +1,31 @@
<script setup lang="ts">
defineProps<{
horizontal?: boolean
}>()
</script>
<template>
<div>
<div
:style="{
display: horizontal ? 'flex' : 'block',
}"
gap-4
>
<div
rounded="$bew-radius" aspect="12/16" overflow-hidden mb-4 bg="$bew-fill-4"
shrink-0
:style="{ width: horizontal ? '170px' : '100%' }"
/>
<p w-full h-5 my-2 my-4 bg="$bew-fill-3" />
<div text="$bew-fill-2" mb-10 flex items-center>
<div
text="transparent" bg="$bew-fill-2" p="x-3 y-1" mr-2 h-27px rounded-4
>
0.0
<div w-full>
<p w-full h-5 my-2 my-4 bg="$bew-fill-3" />
<div text="$bew-fill-2" mb-10 flex items-center>
<div
text="transparent" bg="$bew-fill-2" p="x-3 y-1" mr-2 h-27px rounded-4
>
0.0
</div>
<div w="60%" h-4 bg="$bew-fill-2" />
</div>
<div w="60%" h-4 bg="$bew-fill-2" />
</div>
</div>
</template>