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-02 12:13:54 +08:00
parent 88f261584f
commit 3822ab20d5
12 changed files with 52 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/browse.vue
View File

@@ -27,10 +27,10 @@ function getApiPath(paths: string[] | string) {
<template>
<div>
<div v-if="title" class="mt-3 md:flex md:items-center md:justify-between">
<div v-if="title" class="my-3 md:flex md:items-center md:justify-between">
<div class="min-w-0 flex-1 mx-0">
<h2
class="mb-4 ms-3 truncate text-2xl font-bold leading-7 text-gray-100 sm:overflow-visible sm:text-4xl sm:leading-9 md:mb-0"
class="ms-1 truncate text-2xl font-bold leading-7 text-gray-100 sm:overflow-visible sm:text-3xl sm:leading-9 md:mb-0"
data-testid="page-header"
>
<span class="text-moviepilot">{{ title }}</span>

54
src/styles/styles.scss
View File

@@ -12,22 +12,22 @@ html.v-overlay-scroll-blocked body {
--v-body-scroll-y: 0px !important;
}
@media (max-width: 768px){
@media (width <= 768px){
html.v-overlay-scroll-blocked {
position: relative;
}
}
@mixin hide-scrollbar {
scrollbar-width: none;
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
@media (max-width: 768px) {
@media (width <= 768px) {
html,body {
@include hide-scrollbar;
}
@@ -39,9 +39,9 @@ html.v-overlay-scroll-blocked body {
}
#nprogress .peg {
width: 5px;
box-shadow: 0 0 10px rgb(var(--v-theme-primary)), 0 0 5px rgb(var(--v-theme-primary)) !important;
transform: rotate(0deg) translate(0, 0px);
inline-size: 5px;
transform: rotate(0deg) translate(0, 0);
}
.v-toast--bottom {
@@ -222,28 +222,28 @@ html.v-overlay-scroll-blocked body {
padding-block-end: 1rem;
}
@media (max-width: 600px) {
@media (width <= 600px) {
.user-list-container {
padding: 12px;
}
.grid-user-card {
gap: 1rem;
grid-template-columns: 1fr;
gap: 1rem;
}
}
@media (min-width: 601px) and (max-width: 960px) {
@media (width >= 601px) and (width <= 960px) {
.grid-user-card{
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
}
@media (min-width: 961px) {
@media (width >= 961px) {
.grid-user-card {
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 1.5rem;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
}
@@ -294,35 +294,3 @@ html.v-overlay-scroll-blocked body {
content: '';
inset: 0;
}
.card-list-container {
padding: 20px;
margin: 0 auto;
}
@media (max-width: 600px) {
.card-list-container {
padding: 12px;
}
}
.page-content-header {
margin-bottom: 24px;
}
.page-content-header-title {
display: flex;
align-items: center;
}
.page-content-header-title-icon {
margin-right: 12px;
}
.page-content-header-title-text {
font-size: 1.5rem;
font-weight: 600;
color: rgba(var(--v-theme-on-surface), 0.87);
margin: 0;
}

2
src/views/discover/MediaCardListView.vue
View File

@@ -112,7 +112,7 @@ async function fetchData({ done }: { done: any }) {
<VInfiniteScroll mode="intersect" side="end" :items="dataList" class="overflow-hidden" @load="fetchData">
<template #loading />
<template #empty />
<div v-if="dataList.length > 0" class="grid gap-4 grid-media-card mx-3" tabindex="0">
<div v-if="dataList.length > 0" class="grid gap-4 grid-media-card" tabindex="0">
<MediaCard v-for="data in dataList" :key="data.tmdb_id || data.douban_id" :media="data" />
</div>
<NoDataFound

2
src/views/discover/PersonCardListView.vue
View File

@@ -113,7 +113,7 @@ async function fetchData({ done }: { done: any }) {
<VInfiniteScroll mode="intersect" side="end" :items="dataList" class="overflow-hidden" @load="fetchData">
<template #loading />
<template #empty />
<div v-if="dataList.length > 0" class="grid gap-4 grid-media-card mx-3" tabindex="0">
<div v-if="dataList.length > 0" class="grid gap-4 grid-media-card" tabindex="0">
<PersonCard v-for="data in dataList" :key="data.id" :person="data" />
</div>
<NoDataFound

2
src/views/reorganize/DownloadingListView.vue
View File

@@ -74,7 +74,7 @@ onUnmounted(() => {
<template>
<LoadingBanner v-if="!isRefreshed" class="mt-12" />
<VPullToRefresh v-model="loading" @load="onRefresh" :pull-down-threshold="64">
<div v-if="filteredDataList.length > 0" class="grid gap-3 grid-downloading-card">
<div v-if="filteredDataList.length > 0" class="grid gap-4 grid-downloading-card">
<DownloadingCard v-for="data in filteredDataList" :key="data.hash" :info="data" />
</div>
<NoDataFound

14
src/views/site/SiteCardListView.vue
View File

@@ -89,10 +89,14 @@ onActivated(() => {
<template>
<div class="card-list-container">
<!-- 页面标题 -->
<div class="page-content-header">
<div class="page-content-header-title">
<VIcon icon="mdi-web" size="large" color="primary" class="page-content-header-title-icon" />
<h1 class="page-content-header-title-text">站点管理</h1>
<div class="my-3 md:flex md:items-center md:justify-between">
<div class="min-w-0 flex-1 mx-0 flex align-middle">
<h2
class="mb-3 ms-2 truncate text-2xl font-bold leading-7 text-gray-100 sm:overflow-visible sm:text-3xl sm:leading-9 md:mb-0"
data-testid="page-header"
>
<span class="text-moviepilot">站点管理</span>
</h2>
</div>
</div>
<LoadingBanner v-if="!isRefreshed" class="mt-12" />
@@ -103,7 +107,7 @@ onActivated(() => {
handle=".cursor-move"
item-key="id"
tag="div"
:component-data="{ 'class': 'grid gap-3 grid-site-card' }"
:component-data="{ 'class': 'grid gap-4 grid-site-card' }"
>
<template #item="{ element }">
<SiteCard :site="element" :data="getUserData(element.domain)" @remove="fetchData" @update="fetchData" />

2
src/views/subscribe/SubscribeListView.vue
View File

@@ -151,7 +151,7 @@ onActivated(async () => {
handle=".cursor-move"
item-key="id"
tag="div"
:component-data="{ class: 'mx-3 grid gap-4 grid-subscribe-card p-1' }"
:component-data="{ class: 'grid gap-4 grid-subscribe-card p-1' }"
>
<template #item="{ element }">
<SubscribeCard :key="element.id" :media="element" @remove="fetchData" @save="fetchData" />

2
src/views/subscribe/SubscribePopularView.vue
View File

@@ -110,7 +110,7 @@ async function fetchData({ done }: { done: any }) {
<VInfiniteScroll mode="intersect" side="end" :items="dataList" class="overflow-hidden" @load="fetchData">
<template #loading />
<template #empty />
<div v-if="dataList.length > 0" class="grid gap-4 grid-media-card mx-3" tabindex="0">
<div v-if="dataList.length > 0" class="grid gap-4 grid-media-card" tabindex="0">
<div v-for="data in dataList" :key="data.tmdb_id || data.douban_id">
<MediaCard :media="data" />
<div v-if="data.popularity" class="mt-2 flex flex-row justify-center align-center text-subtitle-2">

2
src/views/subscribe/SubscribeShareView.vue
View File

@@ -109,7 +109,7 @@ function removeData(id: number) {
<VInfiniteScroll mode="intersect" side="end" :items="dataList" class="overflow-hidden" @load="fetchData">
<template #loading />
<template #empty />
<div v-if="dataList.length > 0" class="grid gap-4 grid-subscribe-card mx-3" tabindex="0">
<div v-if="dataList.length > 0" class="grid gap-4 grid-subscribe-card" tabindex="0">
<div v-for="data in dataList" :key="data.id">
<SubscribeShareCard :media="data" @delete="removeData(data.id || 0)" />
</div>

2
src/views/torrent/TorrentCardListView.vue
View File

@@ -609,7 +609,7 @@ function loadMore({ done }: { done: any }) {
<VInfiniteScroll mode="intersect" side="end" :items="displayDataList" class="overflow-hidden" @load="loadMore">
<template #loading />
<template #empty />
<div class="grid gap-3 grid-torrent-card items-start">
<div class="grid gap- grid-torrent-card items-start">
<TorrentCard
v-for="item in displayDataList"
:key="`${item.torrent_info.page_url}`"

24
src/views/user/UserListView.vue
View File

@@ -56,10 +56,14 @@ onActivated(() => {
<template>
<div class="card-list-container">
<!-- 页面标题 -->
<div class="page-content-header">
<div class="page-content-header-title">
<VIcon icon="mdi-account-group" size="large" color="primary" class="page-content-header-title-icon" />
<h1 class="page-content-header-title-text">用户管理</h1>
<div class="my-3 md:flex md:items-center md:justify-between">
<div class="min-w-0 flex-1 mx-0 flex align-middle">
<h2
class="mb-3 ms-2 truncate text-2xl font-bold leading-7 text-gray-100 sm:overflow-visible sm:text-3xl sm:leading-9 md:mb-0"
data-testid="page-header"
>
<span class="text-moviepilot">用户管理</span>
</h2>
</div>
</div>
@@ -67,7 +71,7 @@ onActivated(() => {
<LoadingBanner v-if="!isRefreshed" class="mt-12" />
<!-- 用户卡片网格 -->
<div v-if="allUsers.length > 0 && isRefreshed" class="grid gap-3 grid-user-card">
<div v-if="allUsers.length > 0 && isRefreshed" class="grid gap- grid-user-card">
<!-- 普通用户卡片 -->
<UserCard
v-for="user in allUsers"
@@ -108,14 +112,14 @@ onActivated(() => {
<style scoped>
.add-user-card {
height: 100%;
min-height: 160px;
background-color: rgba(var(--v-theme-surface), 1);
border: 1.5px dashed rgba(var(--v-theme-primary), 0.4);
display: flex;
align-items: center;
justify-content: center;
border: 1.5px dashed rgba(var(--v-theme-primary), 0.4);
background-color: rgba(var(--v-theme-surface), 1);
block-size: 100%;
cursor: pointer;
min-block-size: 160px;
transition: all 0.3s ease;
}
@@ -132,8 +136,8 @@ onActivated(() => {
}
.add-user-text {
font-size: 1.05rem;
color: rgba(var(--v-theme-primary), 0.8);
font-size: 1.05rem;
font-weight: 500;
}
</style>

14
src/views/workflow/WorkflowListView.vue
View File

@@ -45,12 +45,16 @@ onActivated(() => {
</script>
<template>
<div class="card-list-container">
<div>
<!-- 页面标题 -->
<div class="page-content-header">
<div class="page-content-header-title">
<VIcon icon="mdi-state-machine" size="large" color="primary" class="page-content-header-title-icon" />
<h1 class="page-content-header-title-text">工作流</h1>
<div class="my-3 md:flex md:items-center md:justify-between">
<div class="min-w-0 flex-1 mx-0 flex align-middle">
<h2
class="mb-3 ms-2 truncate text-2xl font-bold leading-7 text-gray-100 sm:overflow-visible sm:text-3xl sm:leading-9 md:mb-0"
data-testid="page-header"
>
<span class="text-moviepilot">工作流</span>
</h2>
</div>
</div>
<LoadingBanner v-if="!isRefreshed" class="mt-12" />