GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-05-11 18:10:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化 PluginAppCard、PluginCard 和 SubscribeCard 组件的样式，调整布局和间距，增强响应式设计

Browse Source
This commit is contained in:
jxxghp
2025-05-22 15:21:25 +08:00
parent bc705f2560
commit 5312b82ba7
3 changed files with 46 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -167,6 +167,7 @@ const dropdownItems = ref([
}"
>
<div
class="flex-grow"
:style="`background: linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(${backgroundColor} 0%, ${backgroundColor} 100%)`"
>
<VCardText class="px-2 pt-2 pb-0">
@@ -197,20 +198,27 @@ const dropdownItems = ref([
</div>
</div>
</div>
<VCardText class="flex flex-none align-self-baseline py-2 w-full align-end">
<span>
<VIcon icon="mdi-github" class="me-1" />
<a :href="props.plugin?.author_url" target="_blank" @click.stop>
{{ props.plugin?.plugin_author }}
</a>
</span>
<span v-if="props.count" class="ms-3">
<VIcon icon="mdi-download" />
<span class="text-sm ms-1 mt-1">{{ props.count?.toLocaleString() }}</span>
</span>
<VCardText class="flex flex-col align-self-baseline px-2 py-2 w-full overflow-hidden">
<div class="flex flex-nowrap items-center w-full pe-7">
<span>
<VIcon icon="mdi-github" class="me-1" />
<a
class="overflow-hidden text-ellipsis whitespace-nowrap"
:href="props.plugin?.author_url"
target="_blank"
@click.stop
>
{{ props.plugin?.plugin_author }}
</a>
</span>
<span v-if="props.count" class="ms-2 flex-shrink-0 download-count">
<VIcon icon="mdi-download" />
<span class="text-sm ms-1 mt-1">{{ props.count?.toLocaleString() }}</span>
</span>
</div>
<div class="me-n3 absolute bottom-0 right-3">
<IconBtn>
<VIcon icon="mdi-dots-vertical" />
<VIcon size="small" icon="mdi-dots-vertical" />
<VMenu activator="parent" close-on-content-click>
<VList>
<VListItem v-for="(item, i) in dropdownItems" v-show="item.show" :key="i" @click="item.props.click">

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

@@ -344,6 +344,7 @@ watch(
}"
>
<div
class="flex-grow"
:style="`background: linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(${backgroundColor} 0%, ${backgroundColor} 100%)`"
>
<VCardText class="px-2 pt-2 pb-0">
@@ -375,22 +376,29 @@ watch(
</div>
</div>
</div>
<VCardText class="flex flex-none align-self-baseline py-2 w-full align-end">
<span class="author-info">
<VImg :src="authorPath" class="author-avatar" @load="isAvatarLoaded = true">
<VIcon v-if="!isAvatarLoaded" icon="mdi-github" class="me-1" />
</VImg>
<a :href="props.plugin?.author_url" target="_blank" @click.stop>
{{ props.plugin?.plugin_author }}
</a>
</span>
<span v-if="props.count" class="ms-3">
<VIcon icon="mdi-download" />
<span class="text-sm ms-1 mt-1">{{ props.count?.toLocaleString() }}</span>
</span>
<VCardText class="flex flex-col align-self-baseline px-2 py-2 w-full overflow-hidden">
<div class="flex flex-nowrap items-center w-full pe-7">
<span class="author-info flex-shrink-1 overflow-hidden text-ellipsis whitespace-nowrap">
<VImg :src="authorPath" class="author-avatar" @load="isAvatarLoaded = true">
<VIcon v-if="!isAvatarLoaded" size="small" icon="mdi-github" class="me-1" />
</VImg>
<a
:href="props.plugin?.author_url"
target="_blank"
@click.stop
class="overflow-hidden text-ellipsis whitespace-nowrap"
>
{{ props.plugin?.plugin_author }}
</a>
</span>
<span v-if="props.count" class="ms-2 flex-shrink-0 download-count">
<VIcon size="small" icon="mdi-download" />
<span class="text-sm ms-1 mt-1">{{ props.count?.toLocaleString() }}</span>
</span>
</div>
<div class="me-n3 absolute bottom-0 right-3">
<IconBtn>
<VIcon icon="mdi-dots-vertical" />
<VIcon size="small" icon="mdi-dots-vertical" />
<VMenu v-model="menuVisible" activator="parent" close-on-content-click>
<VList>
<VListItem

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

@@ -365,21 +365,20 @@ function onSubscribeEditRemove() {
</div>
</div>
</VCardText>
<VCardText class="flex justify-space-between align-center flex-wrap">
<VCardText class="flex justify-space-between align-center flex-wrap px-2">
<div class="flex align-center">
<IconBtn
v-if="props.media?.total_episode"
v-bind="props"
icon="mdi-progress-download"
color="white"
class="me-1"
/>
<div v-if="props.media?.season" class="text-xs me-2 text-white">
<div v-if="props.media?.season" class="text-sm me-2 text-white">
{{ (props.media?.total_episode || 0) - (props.media?.lack_episode || 0) }} /
{{ props.media?.total_episode }}
</div>
<IconBtn v-if="props.media?.username" icon="mdi-account" color="white" class="me-1" />
<span v-if="props.media?.username" class="text-xs text-white">
<IconBtn v-if="props.media?.username" icon="mdi-account" color="white" />
<span v-if="props.media?.username" class="text-sm text-white">
{{ props.media?.username }}
</span>
</div>