GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-06-06 00:01:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化多个组件的样式：移除冗余的阴影效果，调整类名以提升视觉效果，更新样式以确保一致性。

Browse Source
This commit is contained in:
jxxghp
2025-04-22 09:47:00 +08:00
parent 21871626f3
commit c43fd88c7c
21 changed files with 51 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/cards/BackdropCard.vue
View File

@@ -37,7 +37,7 @@ const getImgUrl = computed(() => {
:width="props.width"
class="ring-gray-500"
:class="{
'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering,
'transition transform-cpu duration-300 -translate-y-1': hover.isHovering,
'ring-1': imageLoaded,
}"
@click="goPlay"

2
src/components/cards/LibraryCard.vue
View File

@@ -158,7 +158,7 @@ onMounted(async () => {
:height="props.height"
:width="props.width"
:class="{
'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering,
'transition transform-cpu duration-300 -translate-y-1': hover.isHovering,
}"
@click="goPlay"
>

6
src/components/cards/MediaCard.vue
View File

@@ -429,7 +429,7 @@ function onRemoveSubscribe() {
v-bind="hover.props"
:height="props.height"
:width="props.width"
class="outline-none shadow ring-gray-500 media-card"
class="outline-none ring-gray-500 media-card"
:class="{
'transition transform-cpu duration-300 -translate-y-1': hover.isHovering,
'ring-1': isImageLoaded,
@@ -476,7 +476,7 @@ function onRemoveSubscribe() {
variant="elevated"
size="small"
:class="getChipColor(props.media?.type || '')"
class="absolute left-2 top-2 bg-opacity-80 shadow-md text-white font-bold"
class="absolute left-2 top-2 bg-opacity-80 text-white font-bold"
>
{{ props.media?.type }}
</VChip>
@@ -488,7 +488,7 @@ function onRemoveSubscribe() {
variant="elevated"
size="small"
:class="getChipColor('rating')"
class="absolute right-2 top-2 bg-opacity-80 shadow-md text-white font-bold"
class="absolute right-2 top-2 bg-opacity-80 text-white font-bold"
>
{{ formatRating(props.media?.vote_average) }}
</VChip>

1
src/components/cards/MessageCard.vue
View File

@@ -53,7 +53,6 @@ function replaceNewLine(value: string) {
aspect-ratio="3/2"
cover
position="top"
:class="{ shadow: isImageLoaded }"
@load="imageLoaded"
@error="imageLoadError = true"
/>

14
src/components/cards/PersonCard.vue
View File

@@ -83,7 +83,7 @@ function goPersonDetail() {
@click.stop="goPersonDetail"
>
<div
class="person-card relative transform-gpu cursor-pointer rounded shadow transition duration-150 ease-in-out scale-100 ring-gray-700"
class="person-card relative transform-gpu cursor-pointer rounded transition duration-150 ease-in-out scale-100 ring-gray-700"
>
<div style="padding-block-end: 150%">
<div class="absolute inset-0 flex h-full w-full flex-col items-center p-2">
@@ -117,10 +117,18 @@ function goPersonDetail() {
<style lang="scss" scoped>
.person-card {
background-image: linear-gradient(45deg, rgb(var(--v-theme-background)), rgb(var(--v-theme-surface)) 60%);
background-image: linear-gradient(
45deg,
rgb工(var(--v-theme-background), 0.3),
rgba(var(--v-theme-surface), 0.3) 60%
);
}
.person-card:hover {
background-image: linear-gradient(45deg, rgb(var(--v-theme-background)), rgb(var(--v-custom-background)) 60%);
background-image: linear-gradient(
45deg,
rgba(var(--v-theme-background), 0.3),
rgba(var(--v-custom-background), 0.3) 60%
);
}
</style>

4
src/components/cards/PluginAppCard.vue
View File

@@ -156,7 +156,7 @@ const dropdownItems = ref([
@click="detailDialog = true"
class="flex flex-col h-full"
:class="{
'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering,
'transition transform-cpu duration-300 -translate-y-1': hover.isHovering,
}"
>
<div
@@ -185,7 +185,6 @@ const dropdownItems = ref([
:src="iconPath"
aspect-ratio="4/3"
cover
:class="{ shadow: isImageLoaded }"
@load="imageLoaded"
@error="imageLoadError = true"
/>
@@ -246,7 +245,6 @@ const dropdownItems = ref([
:src="iconPath"
aspect-ratio="4/3"
cover
:class="{ shadow: isImageLoaded }"
@load="imageLoaded"
@error="imageLoadError = true"
/>

3
src/components/cards/PluginCard.vue
View File

@@ -336,7 +336,7 @@ watch(
@click="openPluginDetail"
class="flex flex-col h-full"
:class="{
'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering,
'transition transform-cpu duration-300 -translate-y-1': hover.isHovering,
}"
>
<div
@@ -364,7 +364,6 @@ watch(
:src="iconPath"
aspect-ratio="4/3"
cover
:class="{ shadow: isImageLoaded }"
@load="imageLoaded"
@error="imageLoadError = true"
/>

6
src/components/cards/PosterCard.vue
View File

@@ -43,9 +43,9 @@ function goPlay(isHovering: boolean | null = false) {
v-bind="hover.props"
:height="props.height"
:width="props.width"
class="outline-none shadow ring-gray-500"
class="outline-none ring-gray-500"
:class="{
'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering,
'transition transform-cpu duration-300 -translate-y-1': hover.isHovering,
'ring-1': isImageLoaded,
}"
>
@@ -69,7 +69,7 @@ function goPlay(isHovering: boolean | null = false) {
variant="elevated"
size="small"
:class="getChipColor(props.media?.type || '')"
class="absolute left-2 top-2 bg-opacity-80 shadow-md text-white font-bold"
class="absolute left-2 top-2 bg-opacity-80 text-white font-bold"
>
{{ props.media?.type }}
</VChip>

7
src/components/cards/SubscribeCard.vue
View File

@@ -298,7 +298,7 @@ function onSubscribeEditRemove() {
class="flex flex-col h-full"
:class="{
'outline-dashed outline-1': props.media?.best_version && imageLoaded,
'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering,
'transition transform-cpu duration-300 -translate-y-1': hover.isHovering,
'opacity-70': subscribeState === 'S',
}"
min-height="170"
@@ -335,10 +335,7 @@ function onSubscribeEditRemove() {
</template>
<div>
<VCardText class="flex items-center py-3">
<div
class="h-auto w-16 flex-shrink-0 overflow-hidden rounded-md shadow-lg cursor-move"
v-if="imageLoaded"
>
<div class="h-auto w-16 flex-shrink-0 overflow-hidden rounded-md cursor-move" v-if="imageLoaded">
<VImg :src="posterUrl" aspect-ratio="2/3" cover>
<template #placeholder>
<div class="w-full h-full">

4
src/components/cards/SubscribeShareCard.vue
View File

@@ -102,7 +102,7 @@ function doDelete() {
:key="props.media?.id"
class="flex flex-col h-full"
:class="{
'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering,
'transition transform-cpu duration-300 -translate-y-1': hover.isHovering,
}"
min-height="170"
@click="showForkSubscribe"
@@ -119,7 +119,7 @@ function doDelete() {
</template>
<div class="h-full flex flex-col">
<VCardText class="flex items-center pb-1 grow">
<div class="h-auto w-12 flex-shrink-0 overflow-hidden rounded-md shadow-lg" v-if="imageLoaded">
<div class="h-auto w-12 flex-shrink-0 overflow-hidden rounded-md" v-if="imageLoaded">
<VImg :src="posterUrl" aspect-ratio="2/3" cover @click.stop="viewMediaDetail">
<template #placeholder>
<div class="w-full h-full">

2
src/components/dialog/AliyunAuthDialog.vue
View File

@@ -88,7 +88,7 @@ onUnmounted(() => {
<VCard title="阿里云盘登录" class="rounded-t">
<VDialogCloseBtn @click="emit('close')" />
<VCardText class="pt-2 flex flex-col items-center">
<div class="my-6 shadow-lg rounded text-center p-3 border">
<div class="my-6 rounded text-center p-3 border">
<VImg class="mx-auto" :src="qrCodeUrl" width="200" height="200">
<template #placeholder>
<div class="w-full h-full">

2
src/components/dialog/SubscribeHistoryDialog.vue
View File

@@ -154,7 +154,7 @@ const dropdownItems = ref([
width="50"
:src="item.poster"
aspect-ratio="2/3"
class="object-cover rounded shadow ring-gray-500 me-3"
class="object-cover rounded ring-gray-500 me-3"
cover
>
<template #placeholder>

2
src/components/dialog/SubscribeSeasonDialog.vue
View File

@@ -212,7 +212,7 @@ onMounted(async () => {
width="60"
:src="getSeasonPoster(item.poster_path || '')"
aspect-ratio="2/3"
class="object-cover rounded shadow ring-gray-500 me-3"
class="object-cover rounded ring-gray-500 me-3"
cover
>
<template #placeholder>

2
src/components/dialog/U115AuthDialog.vue
View File

@@ -95,7 +95,7 @@ onUnmounted(() => {
<VCard title="115网盘登录" class="rounded-t">
<VDialogCloseBtn @click="emit('close')" />
<VCardText class="pt-2 flex flex-col items-center">
<div class="my-6 shadow-lg rounded text-center p-3 border">
<div class="my-6 rounded text-center p-3 border">
<QrcodeVue class="mx-auto" :value="qrCodeContent" :size="200" />
</div>
<VAlert variant="tonal" :type="alertType" class="my-4 text-center" :text="text">

2
src/components/filebrowser/FileList.vue
View File

@@ -598,7 +598,7 @@ onMounted(() => {
<!-- 文件详情 -->
<VCardText v-else-if="isFile && !isImage && items.length > 0" class="text-center break-all">
<div v-if="items[0]?.thumbnail" class="flex justify-center">
<VImg max-width="15rem" cover :src="items[0]?.thumbnail" class="rounded border shadow-lg">
<VImg max-width="15rem" cover :src="items[0]?.thumbnail" class="rounded border">
<template #placeholder>
<VSkeletonLoader class="object-cover w-full h-full" />
</template>

2
src/components/misc/MediaIdSelector.vue
View File

@@ -120,7 +120,7 @@ onMounted(() => {
width="50"
:src="item.poster"
aspect-ratio="2/3"
class="object-cover rounded shadow ring-gray-500 me-3"
class="object-cover rounded ring-gray-500 me-3"
cover
>
<template #placeholder>