From 77ab0ccae28554e5fe372b3461668d90fb8fbc35 Mon Sep 17 00:00:00 2001 From: jxxghp Date: Wed, 10 Apr 2024 14:46:36 +0800 Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=90=9C=E7=B4=A2=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E6=8C=87=E5=AE=9A=E5=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/cards/MediaCard.vue | 1 + src/pages/resource.vue | 4 + src/views/discover/MediaDetailView.vue | 119 +++++++++++++------------ 3 files changed, 68 insertions(+), 56 deletions(-) diff --git a/src/components/cards/MediaCard.vue b/src/components/cards/MediaCard.vue index 09be7af0..a3b599db 100644 --- a/src/components/cards/MediaCard.vue +++ b/src/components/cards/MediaCard.vue @@ -381,6 +381,7 @@ function handleSearch() { keyword: getMediaId(), type: props.media?.type, area: 'title', + season: props.media?.season, }, }) } diff --git a/src/pages/resource.vue b/src/pages/resource.vue index c8b384f8..264fc39b 100644 --- a/src/pages/resource.vue +++ b/src/pages/resource.vue @@ -18,6 +18,9 @@ const type = route.query?.type?.toString() ?? '' // 搜索字段 const area = route.query?.area?.toString() ?? '' +// 搜索季 +const season = route.query?.season?.toString() ?? '' + // 视图类型，从localStorage中读取 const viewType = ref(localStorage.getItem('MPTorrentsViewType') ?? 'card') @@ -86,6 +89,7 @@ async function fetchData() { params: { mtype: type, area, + season, }, }) if (result.success){ diff --git a/src/views/discover/MediaDetailView.vue b/src/views/discover/MediaDetailView.vue index c09a6c55..556e0a31 100644 --- a/src/views/discover/MediaDetailView.vue +++ b/src/views/discover/MediaDetailView.vue @@ -425,6 +425,7 @@ function handleSearch(area: string) { keyword, type: mediaDetail.value.type, area, + season: mediaDetail.value.season, }, }) } @@ -890,7 +891,7 @@ onBeforeMount(() => { padding-block-start: 1rem; } -@media (min-width: 1280px) { +@media (width >= 1280px) { .media-header { flex-direction: row; align-items: flex-end; @@ -900,65 +901,66 @@ onBeforeMount(() => { .media-overview { display: flex; flex-direction: column; - padding-top: 2rem; - padding-bottom: 1rem; + padding-block: 2rem 1rem; } -@media (min-width: 1024px) { +@media (width >= 1024px) { .media-overview { flex-direction: row; } } .media-poster { - width: 8rem; overflow: hidden; border-radius: .25rem; - --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1); - --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + inline-size: 8rem; + + --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 10%), 0 1px 2px -1px rgba(0, 0, 0, 10%); + --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); } -@media (min-width: 1280px) { +@media (width >= 1280px) { .media-poster { - margin-right: 1rem; - width: 13rem; + inline-size: 13rem; + margin-inline-end: 1rem; } } -@media (min-width: 768px) { +@media (width >= 768px) { .media-poster { - width: 11rem; border-radius: .5rem; - --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); - --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + inline-size: 11rem; + + --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 25%); + --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); } } .media-title { - margin-top: 1rem; display: flex; flex: 1 1 0%; flex-direction: column; + margin-block-start: 1rem; text-align: center; } -@media (min-width: 1280px) { +@media (width >= 1280px) { .media-title { - margin-right: 1rem; - margin-top: 0; - text-align: left; + margin-block-start: 0; + margin-inline-end: 1rem; + text-align: start; } } .media-title>h1 { font-size: 1.5rem; - line-height: 2rem; font-weight: 700; + line-height: 2rem; } -@media (min-width: 1280px) { +@media (width >= 1280px) { .media-title>h1 { font-size: 2.25rem; line-height: 2.5rem; @@ -966,23 +968,23 @@ onBeforeMount(() => { } ul.media-crew { - margin-top: 1.5rem; display: grid; - grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem; + grid-template-columns: repeat(2,minmax(0,1fr)); + margin-block-start: 1.5rem; } -@media (min-width: 640px) { +@media (width >= 640px) { ul.media-crew { grid-template-columns: repeat(3,minmax(0,1fr)); } } ul.media-crew>li { - grid-column: span 1/span 1; display: flex; flex-direction: column; font-weight: 700; + grid-column: span 1/span 1; } a.crew-name { @@ -990,27 +992,27 @@ a.crew-name { } .media-status { - margin-bottom: .5rem; + margin-block-end: .5rem; } .media-attributes { - margin-top: .25rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; + margin-block-start: .25rem; } -@media (min-width: 1280px) { +@media (width >= 1280px) { .media-attributes { - margin-top: 0; justify-content: flex-start; font-size: 1rem; line-height: 1.5rem; + margin-block-start: 0; } } -@media (min-width: 640px) { +@media (width >= 640px) { .media-attributes { font-size: .875rem; line-height: 1.25rem; @@ -1019,21 +1021,21 @@ a.crew-name { .media-actions { position: relative; - margin-top: 1rem; display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; justify-content: center; + margin-block-start: 1rem; } -@media (min-width: 1280px) { +@media (width >= 1280px) { .media-actions { - margin-top: 0; + margin-block-start: 0; } } -@media (min-width: 640px) { +@media (width >= 640px) { .media-actions { flex-wrap: nowrap; justify-content: flex-end; @@ -1044,42 +1046,45 @@ a.crew-name { flex: 1 1 0%; } -@media (min-width: 1024px) { +@media (width >= 1024px) { .media-overview-left { - margin-right: 2rem; + margin-inline-end: 2rem; } } .media-overview-right { - margin-top: 2rem; - width: 100%; + inline-size: 100%; + margin-block-start: 2rem; } -@media (min-width: 1024px) { +@media (width >= 1024px) { .media-overview-right { - margin-top: 0; - width: 20rem; + inline-size: 20rem; + margin-block-start: 0; } } .media-facts { - border-radius: 0.5rem; border-width: 1px; - --tw-border-opacity: 1; border-color: rgb(55 65 81/var(--tw-border-opacity)); - --tw-bg-opacity: 1; + border-radius: 0.5rem; font-size: .875rem; - line-height: 1.25rem; font-weight: 700; + line-height: 1.25rem; + + --tw-border-opacity: 1; + --tw-bg-opacity: 1; --tw-text-opacity: 1; } .media-ratings { - border-bottom-width: 1px; - --tw-border-opacity: 1; border-color: rgb(55 65 81/var(--tw-border-opacity)); - padding: 0.5rem 1rem; + border-block-end-width: 1px; font-weight: 500; + padding-block: 0.5rem; + padding-inline: 1rem; + + --tw-border-opacity: 1; } .media-ratings { @@ -1091,19 +1096,21 @@ a.crew-name { .media-fact { display: flex; justify-content: space-between; - border-bottom-width: 1px; - --tw-border-opacity: 1; border-color: rgb(55 65 81/var(--tw-border-opacity)); - padding: 0.5rem 1rem; + border-block-end-width: 1px; + padding-block: 0.5rem; + padding-inline: 1rem; + + --tw-border-opacity: 1; } .media-overview h2 { font-size: 1.25rem; - line-height: 1.75rem; font-weight: 700; + line-height: 1.75rem; } -@media (min-width: 640px) { +@media (width >= 640px) { .media-overview h2 { font-size: 1.5rem; line-height: 2rem; @@ -1111,13 +1118,13 @@ a.crew-name { } .tagline { - margin-bottom: 1rem; font-size: 1.25rem; - line-height: 1.75rem; font-style: italic; + line-height: 1.75rem; + margin-block-end: 1rem; } -@media (min-width: 1024px) { +@media (width >= 1024px) { .tagline { font-size: 1.5rem; line-height: 2rem;