feat(template-07): 案例列表改三栏卡片,带封面图与客户名
原为单列图文列表(日期 + 标题 + 摘要 + 客户名)。现改为 sm:2 列 / lg:3 列 的卡片网格:封面图(aspect-[4/3],无图时显示「暂无图片」占位)、标题、 摘要(line-clamp-2)、客户名,与首页 RecommendCasesSection 的视觉一致。 封面走已有的 useFileUrl()(app/composables/useFileUrl.ts)拼接, CaseItem.cover / CaseItem.clientName 在 app/types/index.ts 中已定义。 这是独立的 UI 调整,与同批次的域名迁移无关,故拆为单独提交。 eslint 通过(本次改动未新增 warning)。
This commit is contained in:
@@ -11,29 +11,33 @@
|
||||
</div>
|
||||
<SiteError v-else-if="error" message="获取案例列表失败" />
|
||||
|
||||
<div v-else-if="cases.length > 0" class="max-w-[1200px] mx-auto bg-white rounded-xl shadow-sm px-6 py-2">
|
||||
<ul class="divide-y divide-gray-100">
|
||||
<li v-for="item in cases" :key="item.id">
|
||||
<NuxtLink :to="`/case/${item.id}`" class="block py-4 group">
|
||||
<div class="flex items-baseline gap-4">
|
||||
<span class="shrink-0 text-xs text-gray-400 tabular-nums">
|
||||
{{ formatDate(item.publishTime) }}
|
||||
</span>
|
||||
<h2 class="flex-1 min-w-0 text-base text-gray-900 truncate group-hover:text-blue-600 transition-colors">
|
||||
{{ item.title }}
|
||||
</h2>
|
||||
<div v-else-if="cases.length > 0" class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<article
|
||||
v-for="item in cases"
|
||||
:key="item.id"
|
||||
class="group bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow"
|
||||
>
|
||||
<NuxtLink :to="`/case/${item.id}`" class="block">
|
||||
<div class="aspect-[4/3] bg-gray-100 overflow-hidden">
|
||||
<img
|
||||
v-if="item.cover"
|
||||
:src="fileUrl(item.cover)"
|
||||
:alt="item.title"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
||||
>
|
||||
<span v-else class="flex items-center justify-center h-full text-gray-400">暂无图片</span>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors">
|
||||
{{ item.title }}
|
||||
</h2>
|
||||
<p class="text-sm text-gray-600 line-clamp-2">{{ stripHtml(item.summary) }}</p>
|
||||
<div v-if="item.clientName" class="mt-3 text-xs text-gray-500">
|
||||
客户:{{ item.clientName }}
|
||||
</div>
|
||||
<div class="mt-1 pl-[5.5rem]">
|
||||
<p v-if="stripHtml(item.summary)" class="text-sm text-gray-500 line-clamp-1">
|
||||
{{ stripHtml(item.summary) }}
|
||||
</p>
|
||||
<div v-if="item.clientName" class="mt-1 text-xs text-gray-400">
|
||||
客户:{{ item.clientName }}
|
||||
</div>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
@@ -60,13 +64,13 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import dayjs from 'dayjs'
|
||||
import type { CaseItem, PageResult } from '~/types'
|
||||
import { collectDescendantNavIds } from '~/utils/nav-tree'
|
||||
|
||||
/**
|
||||
* 模板 1 - 案例列表页
|
||||
*/
|
||||
const { fileUrl } = useFileUrl()
|
||||
const route = useRoute()
|
||||
const { allNavigations, fetchSiteInfo } = useSite()
|
||||
|
||||
@@ -127,9 +131,4 @@ const pageTitle = computed(() => {
|
||||
}
|
||||
return find(navs)?.title || '案例展示'
|
||||
})
|
||||
|
||||
function formatDate(date?: string) {
|
||||
if (!date) return ''
|
||||
return dayjs(date).format('YYYY-MM-DD')
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user