GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-09-06 08:06:43 +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
src/components/cards/PluginAppCard.vue
+20 -12
View File
@@ -167,6 +167,7 @@ const dropdownItems = ref([
}" }"
> >
<div <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%)`" :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"> <VCardText class="px-2 pt-2 pb-0">
@@ -197,20 +198,27 @@ const dropdownItems = ref([
</div> </div>
</div> </div>
</div> </div>
<VCardText class="flex flex-none align-self-baseline py-2 w-full align-end"> <VCardText class="flex flex-col align-self-baseline px-2 py-2 w-full overflow-hidden">
<span> <div class="flex flex-nowrap items-center w-full pe-7">
<VIcon icon="mdi-github" class="me-1" /> <span>
<a :href="props.plugin?.author_url" target="_blank" @click.stop> <VIcon icon="mdi-github" class="me-1" />
{{ props.plugin?.plugin_author }} <a
</a> class="overflow-hidden text-ellipsis whitespace-nowrap"
</span> :href="props.plugin?.author_url"
<span v-if="props.count" class="ms-3"> target="_blank"
<VIcon icon="mdi-download" /> @click.stop
<span class="text-sm ms-1 mt-1">{{ props.count?.toLocaleString() }}</span> >
</span> {{ 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"> <div class="me-n3 absolute bottom-0 right-3">
<IconBtn> <IconBtn>
<VIcon icon="mdi-dots-vertical" /> <VIcon size="small" icon="mdi-dots-vertical" />
<VMenu activator="parent" close-on-content-click> <VMenu activator="parent" close-on-content-click>
<VList> <VList>
<VListItem v-for="(item, i) in dropdownItems" v-show="item.show" :key="i" @click="item.props.click"> <VListItem v-for="(item, i) in dropdownItems" v-show="item.show" :key="i" @click="item.props.click">
src/components/cards/PluginCard.vue
+22 -14
View File
@@ -344,6 +344,7 @@ watch(
}" }"
> >
<div <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%)`" :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"> <VCardText class="px-2 pt-2 pb-0">
@@ -375,22 +376,29 @@ watch(
</div> </div>
</div> </div>
</div> </div>
<VCardText class="flex flex-none align-self-baseline py-2 w-full align-end"> <VCardText class="flex flex-col align-self-baseline px-2 py-2 w-full overflow-hidden">
<span class="author-info"> <div class="flex flex-nowrap items-center w-full pe-7">
<VImg :src="authorPath" class="author-avatar" @load="isAvatarLoaded = true"> <span class="author-info flex-shrink-1 overflow-hidden text-ellipsis whitespace-nowrap">
<VIcon v-if="!isAvatarLoaded" icon="mdi-github" class="me-1" /> <VImg :src="authorPath" class="author-avatar" @load="isAvatarLoaded = true">
</VImg> <VIcon v-if="!isAvatarLoaded" size="small" icon="mdi-github" class="me-1" />
<a :href="props.plugin?.author_url" target="_blank" @click.stop> </VImg>
{{ props.plugin?.plugin_author }} <a
</a> :href="props.plugin?.author_url"
</span> target="_blank"
<span v-if="props.count" class="ms-3"> @click.stop
<VIcon icon="mdi-download" /> class="overflow-hidden text-ellipsis whitespace-nowrap"
<span class="text-sm ms-1 mt-1">{{ props.count?.toLocaleString() }}</span> >
</span> {{ 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"> <div class="me-n3 absolute bottom-0 right-3">
<IconBtn> <IconBtn>
<VIcon icon="mdi-dots-vertical" /> <VIcon size="small" icon="mdi-dots-vertical" />
<VMenu v-model="menuVisible" activator="parent" close-on-content-click> <VMenu v-model="menuVisible" activator="parent" close-on-content-click>
<VList> <VList>
<VListItem <VListItem
src/components/cards/SubscribeCard.vue
+4 -5
View File
@@ -365,21 +365,20 @@ function onSubscribeEditRemove() {
</div> </div>
</div> </div>
</VCardText> </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"> <div class="flex align-center">
<IconBtn <IconBtn
v-if="props.media?.total_episode" v-if="props.media?.total_episode"
v-bind="props" v-bind="props"
icon="mdi-progress-download" icon="mdi-progress-download"
color="white" 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 || 0) - (props.media?.lack_episode || 0) }} /
{{ props.media?.total_episode }} {{ props.media?.total_episode }}
</div> </div>
<IconBtn v-if="props.media?.username" icon="mdi-account" color="white" class="me-1" /> <IconBtn v-if="props.media?.username" icon="mdi-account" color="white" />
<span v-if="props.media?.username" class="text-xs text-white"> <span v-if="props.media?.username" class="text-sm text-white">
{{ props.media?.username }} {{ props.media?.username }}
</span> </span>
</div> </div>