diff --git a/frontend/wechat/src/assets/backdrop.jpg b/frontend/wechat/src/assets/backdrop.jpg
new file mode 100644
index 0000000..f70306e
Binary files /dev/null and b/frontend/wechat/src/assets/backdrop.jpg differ
diff --git a/frontend/wechat/src/components/ArticleListItem.vue b/frontend/wechat/src/components/ArticleListItem.vue
index dbe9075..4e49786 100644
--- a/frontend/wechat/src/components/ArticleListItem.vue
+++ b/frontend/wechat/src/components/ArticleListItem.vue
@@ -23,41 +23,39 @@ const mediaTypes = computed(() => {
 </script>
 
 <template>
-    <div class="flex gap-4 p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow cursor-pointer">
-        <!-- 缩略图占位 -->
-        <div class="w-24 h-24 flex-shrink-0 bg-gray-100 rounded-lg"></div>
-
-        <div class="flex-1 flex flex-col">
-            <h3 class="text-lg font-medium mb-1">{{ article.title }}</h3>
-            <p class="text-gray-600 text-sm line-clamp-2 mb-2">{{ article.description }}</p>
-
-            <div class="flex flex-wrap gap-2 mb-2">
-                <span v-for="tag in article.tags" :key="tag"
-                    class="px-2 py-0.5 text-xs bg-gray-100 text-gray-600 rounded-full">
-                    {{ tag }}
-                </span>
+    <div class="p-4 bg-white rounded-lg shadow-sm hover:shadow transition-all cursor-pointer">
+        <div class="flex-1 flex flex-col min-w-0">
+            <h3 class="text-lg font-medium mb-2 truncate text-gray-800">{{ article.title }}</h3>
+            <div class="py-2">
                 <span v-for="type in mediaTypes" :key="type"
-                    class="px-2 py-0.5 text-xs bg-blue-100 text-blue-600 rounded-full">
+                    class="inline-block px-1.5 py-0.5 text-xs bg-blue-50 text-blue-600 rounded mr-1.5">
                     {{ type }}
                 </span>
             </div>
 
-            <div class="flex items-center justify-between mt-auto text-sm">
-                <div class="flex items-center gap-3 text-gray-500">
-                    <span>{{ formattedDate }}</span>
-                    <span class="flex items-center gap-1">
-                        <AiOutlineEye class="w-4 h-4" />
+            <p class="text-gray-500 text-sm line-clamp-2 mb-2">{{ article.description }}</p>
+
+            <div class="py-2 flex items-center gap-2">
+                <span v-for="tag in article.tags" :key="tag"
+                    class="px-1.5 py-0.5 text-xs bg-gray-100 text-gray-600 rounded">
+                    <span class="mr-1">#</span>{{ tag }}
+                </span>
+            </div>
+
+            <div class="flex items-center justify-between mt-auto text-sm py-2">
+                <div class="flex flex-wrap items-center gap-3">
+                    <span class="flex items-center gap-1 text-gray-700">
+                        <AiOutlineEye class="w-3.5 h-3.5" />
                         {{ article.views }}
                     </span>
-                    <span class="flex items-center gap-1">
-                        <AiOutlineLike class="w-4 h-4" />
+                    <span class="flex items-center gap-1 text-gray-700">
+                        <AiOutlineLike class="w-3.5 h-3.5" />
                         {{ article.likes }}
                     </span>
                 </div>
-
-                <div class="flex items-center gap-2">
-                    <span class="text-lg font-bold text-red-500">¥{{ discountPrice }}</span>
-                    <span class="text-sm line-through text-gray-400">¥{{ article.price }}</span>
+                <div class="flex items-center gap-2 ml-4 flex-shrink-0">
+                    <span class="text-sm font-bold text-red-600">¥{{ discountPrice }}</span>
+                    <span class="text-sm line-through text-gray-500">¥{{ article.price }}</span>
                 </div>
             </div>
         </div>