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

feat: udpate ui

Browse Source
This commit is contained in:
Rogee
2025-05-14 20:54:04 +08:00
parent 6876d8bcd7
commit fcca3fef7c
4 changed files with 36 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -30,37 +30,42 @@ const showArticle = (article) => {
</script>
<template>
<div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-200 cursor-pointer"
<div class="bg-white shadow overflow-hidden hover:shadow-md transition-shadow duration-200 cursor-pointer flex h-32"
@click="showArticle(article)">
<!-- Left side - Image -->
<div v-if="article.head_images && article.head_images.length > 0"
class="relative w-full h-24 bg-gray-100 overflow-hidden">
class="relative w-32 flex-shrink-0 bg-gray-100 overflow-hidden">
<img :src="article.head_images[0]"
class="absolute inset-0 w-full object-cover transition-transform duration-300 hover:scale-105"
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-b from-transparent to-black/30"></div>
<div class="absolute inset-0 bg-gradient-to-r from-transparent to-black/20"></div>
</div>
<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 line-clamp-2">
{{ article.description }}
</p>
<!-- Right side - Content -->
<div class="flex-1 p-4 flex flex-col justify-between min-w-0">
<div class="space-y-2">
<h3 class="text-lg font-semibold text-gray-800 line-clamp-2">
{{ article.title }}
</h3>
<div class="flex flex-wrap gap-2">
<span v-for="tag in article.tags" :key="tag"
class="px-2 py-1 text-xs bg-blue-50 text-blue-600 rounded-full">
{{ tag }}
</span>
<p v-if="article.description" class="text-gray-600 text-sm line-clamp-2">
{{ article.description }}
</p>
<div class="flex flex-wrap gap-1">
<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-2 text-sm">
<div class="flex items-center justify-between pt-1 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="text-orange-600 font-mono text-xl" v-if="!article.bought">
<div class="text-orange-600 font-mono text-lg" v-if="!article.bought">
¥{{ discountPrice }}
</div>
</div>