diff --git a/src/assets/images/plugin/statistic.png b/src/assets/images/plugin/statistic.png
new file mode 100644
index 00000000..01daf9b2
Binary files /dev/null and b/src/assets/images/plugin/statistic.png differ
diff --git a/src/components/cards/PluginCard.vue b/src/components/cards/PluginCard.vue
index 9efc04ac..cef6bdf6 100644
--- a/src/components/cards/PluginCard.vue
+++ b/src/components/cards/PluginCard.vue
@@ -7,17 +7,39 @@ const props = defineProps({
   width: String,
   height: String,
 });
+
+// 显示插件详情
+const showPluginInfo = () => {};
 </script>
 <template>
-  <VCard :width="props.width" :height="props.height">
-    <VImg :src="props.plugin?.plugin_icon" aspect-ratio="4/3" cover />
-
-    <VCardItem>
-      <VCardTitle>{{ props.plugin?.plugin_name }}</VCardTitle>
-    </VCardItem>
+  <VCard :width="props.width" :height="props.height" @click="showPluginInfo">
+    <div
+      :class="`relative pa-4 text-center card-cover-blurred`"
+      :style="{ background: `${props.plugin?.plugin_color}` }"
+    >
+      <VAvatar size="128" class="shadow">
+        <VImg
+          :src="`/src/assets/images/plugin/${props.plugin?.plugin_icon}`"
+          aspect-ratio="4/3"
+          cover
+        />
+      </VAvatar>
+    </div>
+    <VCardTitle>{{ props.plugin?.plugin_name }}</VCardTitle>
 
     <VCardText>
       {{ props.plugin?.plugin_desc }}
     </VCardText>
   </VCard>
 </template>
+<style type="scss" scoped>
+.card-cover-blurred::before {
+  position: absolute;
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-backdrop-filter: blur(2px);
+  backdrop-filter: blur(2px);
+  background: rgba(29, 39, 59, 48%);
+  content: "";
+  inset: 0;
+}
+</style>