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

modify ui

Browse Source
This commit is contained in:
Rogee
2025-05-14 17:42:44 +08:00
parent 2f8f7c6072
commit a8a41b8382
9 changed files with 352 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -30,49 +30,39 @@ const showArticle = (article) => {
</script>
<template>
<div class="bg-white rounded-lg shadow overflow-hidden hover:shadow transition-all cursor-pointer"
<div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-200 cursor-pointer"
@click="showArticle(article)">
<div v-if="article.head_images && article.head_images.length > 0" class="w-full h-32 bg-gray-200">
<img :src="article.head_images[0]" class="mask-b-from-50% w-full h-full object-cover brightness-50"
<div v-if="article.head_images && article.head_images.length > 0"
class="relative w-full aspect-video bg-gray-100 overflow-hidden">
<img :src="article.head_images[0]"
class="w-full h-full object-cover transition-transform duration-300 hover:scale-105"
:alt="article.title" />
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/30"></div>
</div>
<div class="p-4">
<h3 class="text-lg break-all font-medium text-gray-800 line-clamp-2">
<div class="p-4 space-y-3">
<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 mb-2 line-clamp-2">
<p v-if="article.description"
class="text-gray-600 text-sm line-clamp-2">
{{ article.description }}
</p>
<div class="py-2 flex items-center gap-2">
<div class="flex flex-wrap 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 }}
class="px-2 py-1 text-xs bg-blue-50 text-blue-600 rounded-full">
{{ tag }}
</span>
</div>
<div class="flex items-center justify-between mt-auto text-sm">
<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 text-gray-700">
<AiOutlineLike class="w-3.5 h-3.5" />
{{ article.likes }}
</span> -->
<div class="flex items-center justify-between pt-2 text-sm">
<div class="flex items-center gap-2 text-gray-500">
<AiOutlineEye class="w-4 h-4" />
<span>{{ article.view_count || 0 }}</span>
</div>
<div class="flex items-center gap-2 ml-4 flex-shrink-0 font-mono">
<span v-if="article.bought" class="px-2 py-0.5 text-xs bg-green-50 text-green-600 rounded">
已购买
</span>
<template v-else>
<span v-if="article.discount < 100" class="text-xs line-through text-gray-500">
¥{{ (article.price / 100).toFixed(2) }}
</span>
<span class="text-xl text-orange-600">&yen;{{ discountPrice }}</span>
</template>
<div class="text-primary-600 font-medium">
¥{{ discountPrice }}
</div>
</div>
</div>