GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-05-12 02:21:06 +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

15
src/@core/components/ExistIcon.vue
View File

@@ -1,14 +1,13 @@
<template>
<div class="absolute top-0 right-0 flex items-center justify-between p-2">
<div class="pointer-events-none z-40 flex items-center">
<div class="relative inline-flex whitespace-nowrap rounded-full border-gray-700 font-semibold leading-5 ring-gray-700">
<div class="rounded-full bg-opacity-80 shadow-md w-5 border p-0 bg-green-500 border-green-400 ring-green-400 text-green-100">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<div
class="relative inline-flex whitespace-nowrap rounded-full border-gray-700 font-semibold leading-5 ring-gray-700"
>
<div
class="rounded-full bg-opacity-80 w-5 border p-0 bg-green-500 border-green-400 ring-green-400 text-green-100"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"

4
src/@core/components/StatIcon.vue
View File

@@ -8,9 +8,9 @@ const props = defineProps<Props>()
</script>
<template>
<div class="absolute top-2 right-2 flex items-center justify-between p-2 shadow">
<div class="absolute top-2 right-2 flex items-center justify-between p-2">
<VBadge :color="props.color" bordered>
<template #badge>
<template #badge>
<VIcon icon="mdi-pulse"></VIcon>
</template>
</VBadge>

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>

10
src/styles/styles.scss
View File

@@ -395,16 +395,22 @@ html.v-overlay-scroll-blocked {
background-color: rgba(var(--v-theme-surface), 0.3);
}
// 选中标签样式
.v-tabs.v-tabs-pill .v-slide-group-item--active.v-tab--selected.text-primary {
background-color: rgba(var(--v-theme-primary), 0.7) !important;
}
// 加载占位
.v-skeleton-loader {
background-color: rgba(var(--v-theme-surface), 0.3);
}
}
// 透明主题下的弹出窗口样式
html[data-theme="transparent"] {
.v-overlay__content {
backdrop-filter: blur(10px) !important;
.v-overlay__content {
border-radius: 12px !important;
backdrop-filter: blur(10px) !important;
.v-list {
backdrop-filter: blur(10px);

2
src/views/setting/AccountSettingAbout.vue
View File

@@ -221,7 +221,7 @@ onMounted(() => {
<div
v-for="release in allRelease"
:key="release.tag_name"
class="mb-3 flex w-full flex-col space-y-3 rounded-md px-4 py-2 shadow-md ring-1 ring-gray-400 sm:flex-row sm:space-y-0 sm:space-x-3"
class="mb-3 flex w-full flex-col space-y-3 rounded-md px-4 py-2 ring-1 ring-gray-400 sm:flex-row sm:space-y-0 sm:space-x-3"
>
<div class="flex w-full flex-grow items-center justify-start space-x-2 truncate sm:justify-start">
<span class="truncate text-lg font-bold">

4
src/views/subscribe/FullCalendarView.vue
View File

@@ -145,7 +145,7 @@ onActivated(() => {
width="50"
:src="arg.event.extendedProps.posterPath"
aspect-ratio="2/3"
class="object-cover rounded shadow ring-gray-500"
class="object-cover rounded ring-gray-500"
cover
>
<template #placeholder>
@@ -175,7 +175,7 @@ onActivated(() => {
:src="arg.event.extendedProps.posterPath"
v-bind="props"
aspect-ratio="2/3"
class="object-cover rounded shadow ring-gray-500"
class="object-cover rounded ring-gray-500"
cover
>
<template #placeholder>