Update card cover size and alignment in PluginAppCard and PluginCard components

This commit is contained in:
jxxghp
2024-05-06 16:14:44 +08:00
parent 7f05932fb9
commit ec9a989214
3 changed files with 14 additions and 12 deletions
+2 -2
View File
@@ -149,7 +149,7 @@ const dropdownItems = ref([
</script> </script>
<template> <template>
<VCard :width="props.width" :height="props.height" @click="installPlugin"> <VCard :width="props.width" :height="props.height" @click="installPlugin" class="flex flex-col">
<div class="relative pa-3 text-center card-cover-blurred" :style="{ background: `${backgroundColor}` }"> <div class="relative pa-3 text-center card-cover-blurred" :style="{ background: `${backgroundColor}` }">
<div class="me-n3 absolute top-0 right-3"> <div class="me-n3 absolute top-0 right-3">
<IconBtn> <IconBtn>
@@ -196,7 +196,7 @@ const dropdownItems = ref([
</VChip> </VChip>
</div> </div>
</VCardText> </VCardText>
<VCardText class="flex items-center justify-start pb-2"> <VCardText class="flex align-self-baseline pb-2 w-full align-end">
<span> <span>
<VIcon icon="mdi-account" class="me-1" /> <VIcon icon="mdi-account" class="me-1" />
<a :href="props.plugin?.author_url" target="_blank" @click.stop> <a :href="props.plugin?.author_url" target="_blank" @click.stop>
+10 -8
View File
@@ -390,7 +390,7 @@ watch(
<template> <template>
<!-- 插件卡片 --> <!-- 插件卡片 -->
<VCard v-if="isVisible" :width="props.width" :height="props.height" @click="openPluginDetail"> <VCard v-if="isVisible" :width="props.width" :height="props.height" @click="openPluginDetail" class="flex flex-col">
<div class="relative pa-3 text-center card-cover-blurred" :style="{ background: `${backgroundColor}` }"> <div class="relative pa-3 text-center card-cover-blurred" :style="{ background: `${backgroundColor}` }">
<div v-if="props.plugin?.has_update" class="me-n3 absolute top-0 left-1"> <div v-if="props.plugin?.has_update" class="me-n3 absolute top-0 left-1">
<VIcon icon="mdi-new-box" class="text-white" /> <VIcon icon="mdi-new-box" class="text-white" />
@@ -429,20 +429,22 @@ watch(
/> />
</VAvatar> </VAvatar>
</div> </div>
<span v-if="props.count" class="absolute bottom-1 right-2 flex items-center">
<VIcon icon="mdi-fire" />
<span class="text-sm ms-1">{{ props.count?.toLocaleString() }}</span>
</span>
<VCardItem class="py-2"> <VCardItem class="py-2">
<VCardTitle class="flex items-center flex-row"> <VCardTitle class="flex items-center flex-row">
<VBadge v-if="props.plugin?.state" dot inline color="success" class="me-1 mb-1" /> <VBadge v-if="props.plugin?.state" dot inline color="success" class="me-1 mb-1" />
{{ props.plugin?.plugin_name {{ props.plugin?.plugin_name }}
}}<span class="text-sm ms-2 mt-1 text-gray-500">v{{ props.plugin?.plugin_version }}</span> <span class="text-sm ms-2 mt-1 text-gray-500">v{{ props.plugin?.plugin_version }}</span>
</VCardTitle> </VCardTitle>
</VCardItem> </VCardItem>
<VCardText> <VCardText class="pb-1">
{{ props.plugin?.plugin_desc }} {{ props.plugin?.plugin_desc }}
</VCardText> </VCardText>
<VCardText class="flex justify-end align-self-baseline p-1 w-full align-end">
<span v-if="props.count" class="ms-3">
<VIcon icon="mdi-fire" />
<span class="text-sm ms-1">{{ props.count?.toLocaleString() }}</span>
</span>
</VCardText>
</VCard> </VCard>
<!-- 插件配置页面 --> <!-- 插件配置页面 -->
+2 -2
View File
@@ -341,7 +341,7 @@ onBeforeMount(async () => {
<transition name="fade-slide" appear> <transition name="fade-slide" appear>
<div> <div>
<LoadingBanner v-if="!isRefreshed" class="mt-12" /> <LoadingBanner v-if="!isRefreshed" class="mt-12" />
<div v-if="dataList.length > 0" class="grid gap-4 grid-plugin-card"> <div v-if="dataList.length > 0" class="grid gap-4 grid-plugin-card items-start">
<template v-for="(data, index) in dataList" :key="`${data.id}_v${data.plugin_version}`"> <template v-for="(data, index) in dataList" :key="`${data.id}_v${data.plugin_version}`">
<PluginCard <PluginCard
:count="PluginStatistics[data.id || '0']" :count="PluginStatistics[data.id || '0']"
@@ -411,7 +411,7 @@ onBeforeMount(async () => {
</VCol> </VCol>
</VRow> </VRow>
</div> </div>
<div v-if="isAppMarketLoaded" class="grid gap-4 grid-plugin-card"> <div v-if="isAppMarketLoaded" class="grid gap-4 grid-plugin-card items-start">
<template v-for="(data, index) in sortedUninstalledList" :key="`${data.id}_v${data.plugin_version}`"> <template v-for="(data, index) in sortedUninstalledList" :key="`${data.id}_v${data.plugin_version}`">
<PluginAppCard <PluginAppCard
v-if="deferApp(index)" v-if="deferApp(index)"