rogee/quyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: complete list

Browse Source
This commit is contained in:
yanghao05
2025-04-16 22:18:50 +08:00
parent 682a2397d2
commit ef9505f7c3
2 changed files with 23 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
frontend/wechat/src/assets/backdrop.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

48
frontend/wechat/src/components/ArticleListItem.vue
View File

@@ -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>