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

refactor(LongCoverCard): update props && update styles

Browse Source
This commit is contained in:
hakadao
2024-06-02 17:47:36 +08:00
parent 08b9205e1e
commit a43c223785
4 changed files with 226 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/contentScripts/views/Anime/Anime.vue
View File

@@ -132,10 +132,6 @@ function getPopularAnimeList() {
<template>
<div>
<div>
<!-- <section mb-8>
<PopularAnimeCarousel />
</section> -->
<!-- Your Watchlist -->
<section v-if="getUserID()" class="anime-section">
<div flex justify-between items-center mb-6>
@@ -161,26 +157,36 @@ function getPopularAnimeList() {
w="2xl:[calc(100%/6-1.5rem)] xl:[calc(100%/5-1.5rem)] lg:[calc(100%/4-1.5rem)] md:[calc(100%/3-1.5rem)] sm:[calc(100%/2-1.5rem)] [calc(100%-1.5rem)]"
last:w="2xl:1/6 xl:1/5 lg:1/4 md:1/3 sm:1/2 full"
shrink-0
m="r-6"
mr-6 important-mb-0
last:pr-6
/>
</template>
<LongCoverCard
v-for="item in animeWatchList"
:key="item.short_url"
:url="item.url"
:cover="item.cover"
:title="item.title"
:capsule-text="item.is_finish
? $t('anime.total_episodes', { ep: item.total_count })
: $t('anime.update_to_n_episodes', {
ep: item.formal_ep_count,
})"
:desc="item.progress !== '' ? item.progress : $t('anime.havent_seen')"
:bangumi="{
url: item.url,
cover: item.cover,
coverHover: item?.horizontal_cover_16_9,
title: item.title,
desc: item.progress !== '' ? item.progress : $t('anime.havent_seen'),
evaluate: item.evaluate,
tags: item.styles,
capsuleText: item.is_finish
? $t('anime.total_episodes', { ep: item.total_count })
: $t('anime.update_to_n_episodes', {
ep: item.formal_ep_count,
}),
badge: {
text: item.badge_info.text || '',
bgColor: item.badge_info.bg_color || '',
bgColorDark: item.badge_info.bg_color_night || '',
},
}"
w="2xl:[calc(100%/6-1.5rem)] xl:[calc(100%/5-1.5rem)] lg:[calc(100%/4-1.5rem)] md:[calc(100%/3-1.5rem)] sm:[calc(100%/2-1.5rem)] [calc(100%-1.5rem)]"
last:w="2xl:1/6 xl:1/5 lg:1/4 md:1/3 sm:1/2 full"
shrink-0
m="r-6"
mr-6 important-mb-0
last:pr-6
/>
</div>
@@ -212,7 +218,7 @@ function getPopularAnimeList() {
w="2xl:[calc(100%/6-1.5rem)] xl:[calc(100%/5-1.5rem)] lg:[calc(100%/4-1.5rem)] md:[calc(100%/3-1.5rem)] sm:[calc(100%/2-1.5rem)] [calc(100%-1.5rem)]"
last:w="2xl:1/6 xl:1/5 lg:1/4 md:1/3 sm:1/2 full"
shrink-0
m="r-6"
mr-6 important-mb-0
last:pr-6
/>
</template>
@@ -222,14 +228,21 @@ function getPopularAnimeList() {
w="2xl:[calc(100%/6-1.5rem)] xl:[calc(100%/5-1.5rem)] lg:[calc(100%/4-1.5rem)] md:[calc(100%/3-1.5rem)] sm:[calc(100%/2-1.5rem)] [calc(100%-1.5rem)]"
last:w="2xl:1/6 xl:1/5 lg:1/4 md:1/3 sm:1/2 full"
shrink-0
m="r-6"
mr-6 important-mb-0
last:pr-6
:url="item.url"
:cover="item.cover"
:title="item.title"
:desc="$t('anime.follow', { num: numFormatter(item.stat.series_follow) })"
:capsule-text="item.rating.replace('分', '')"
:rank="item.rank"
:bangumi="{
url: item.url,
cover: item.cover,
title: item.title,
desc: $t('anime.follow', { num: numFormatter(item.stat.series_follow) }),
capsuleText: item.rating.replace('分', ''),
rank: item.rank,
badge: {
text: item.badge_info.text || '',
bgColor: item.badge_info.bg_color || '',
bgColorDark: item.badge_info.bg_color_night || '',
},
}"
/>
</div>
</HorizontalScrollView>
@@ -255,14 +268,16 @@ function getPopularAnimeList() {
<LongCoverCard
v-for="item in recommendAnimeList"
:key="item.episode_id"
:url="item.link ?? ''"
:cover="item.cover"
:cover-hover="item?.hover?.img"
:tags="item?.hover?.text"
:title="item.title"
:desc="item.sub_title"
:capsule-text="item.rating"
mb-10
:bangumi="{
url: item.link ?? '',
cover: item.cover,
coverHover: item?.hover?.img,
tags: item?.hover?.text,
title: item.title,
desc: item.sub_title,
evaluate: item.evaluate,
capsuleText: item.rating,
}"
@mouseenter="activatedSeasonId = item.season_id"
@mouseleave="activatedSeasonId = 0"
/>
@@ -270,7 +285,6 @@ function getPopularAnimeList() {
<template v-if="isLoadingRecommendAnime">
<LongCoverCardSkeleton
v-for="item in 30" :key="item"
mb-10
/>
</template>
</div>

24
src/contentScripts/views/Home/components/Ranking.vue
View File

@@ -224,16 +224,22 @@ defineExpose({ initData })
<LongCoverCard
v-for="pgc in PgcList"
:key="pgc.url"
:url="pgc.url"
:cover="pgc.cover"
:title="pgc.title"
:desc="pgc.new_ep.index_show"
:view="pgc.stat.view"
:follow="pgc.stat.follow"
:rank="pgc.rank"
:capsule-text="pgc.rating.replace('分', '')"
:bangumi="{
url: pgc.url,
cover: pgc.cover,
title: pgc.title,
desc: pgc.new_ep.index_show,
view: pgc.stat.view,
follow: pgc.stat.follow,
rank: pgc.rank,
capsuleText: pgc.rating.replace('分', ''),
badge: {
text: pgc.badge_info.text || '',
bgColor: pgc.badge_info.bg_color || '',
bgColorDark: pgc.badge_info.bg_color_night || '',
},
}"
:horizontal="gridLayout !== 'adaptive'"
mb-8
/>
</template>