feat: update article list

frontend/wechat/src/components/ArticleListItem.vue

@@ -27,45 +27,35 @@ const showArticle = (article) => {
     router.push(`/posts/${article.id}`)
 }
 
+const getBgImage = (id) => {
+    const idx = id % 79
+    return `background-image: url(/avatar/${idx}.jpeg); background-size: 100% 100%`
+}
 </script>
 
 <template>
-    <div class="bg-white rounded shadow-lg overflow-hidden transition-shadow duration-200 cursor-pointer flex flex-col"
+    <div :style="getBgImage(article.id)"
+        class="flex flex-col rounded-md overflow-hidden bg-gray-500 bg-no-repeat shadow-lg shadow-gray-500"
         @click="showArticle(article)">
-        <!-- Top - Image -->
+        <div class="flex-1 p-4 backdrop-blur-xl w-full h-full  backdrop-brightness-50">
-        <div v-if="article.head_images && article.head_images.length > 0"
+            <h3 class="text-xl font-semibold text-gray-200 drop-shadow-md drop-shadow-white-100">
-            class="relative h-32 w-full bg-gray-100 overflow-hidden">
+                {{ article.title }}
-            <img :src="article.head_images[0]"
+            </h3>
-                class="absolute inset-0 h-full w-full object-cover transition-transform duration-300 hover:scale-105"
-                :alt="article.title" />
-            <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
-        </div>
 
-        <!-- Bottom - Content -->
-        <div class="p-4 flex flex-col justify-between flex-1 min-w-0">
-            <div class="space-y-2">
-                <h3 class="text-lg font-semibold text-gray-800 line-clamp-2">
-                    {{ article.title }}
-                </h3>
 
-                <p v-if="article.description" class="text-gray-600 text-sm line-clamp-2">
+            <div class="flex flex-wrap gap-1">
-                    {{ article.description }}
+                <span v-for="tag in article.tags" :key="tag"
-                </p>
+                    class="px-2 py-0.5 text-xs bg-blue-50 text-blue-600 rounded-full">
-
+                    {{ tag }}
-                <div class="flex flex-wrap gap-1">
+                </span>
-                    <span v-for="tag in article.tags" :key="tag"
-                        class="px-2 py-0.5 text-xs bg-blue-50 text-blue-600 rounded-full">
-                        {{ tag }}
-                    </span>
-                </div>
             </div>
 
-            <div class="flex items-center justify-between pt-1 text-sm">
+            <div class="flex items-center justify-between pt-4 text-sm">
-                <div class="flex items-center gap-2 text-gray-500">
+                <div class="flex items-center gap-2 text-gray-100">
                     <AiOutlineEye class="w-4 h-4" />
                     <span>{{ article.view_count || 0 }}</span>
                 </div>
-                <div class="text-orange-600 font-mono text-lg" v-if="!article.bought">
+                <div class="text-gray-100 font-mono text-lg" v-if="!article.bought">
                     ¥{{ discountPrice }}
                 </div>
             </div>

frontend/wechat/src/views/ArticleList.vue

@@ -88,7 +88,7 @@ onMounted(() => {
 
         <div class="flex-1 overflow-y-auto">
             <div class="container max-w-2xl mx-auto p-4">
-                <div class="grid gap-4">
+                <div class="grid gap-6">
                     <ArticleListItem v-for="article in articles" :key="article.id" :article="article" />
                 </div>