zhangchao/cz-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

恢复修改的数据

Browse Source
This commit is contained in:
wangzzpeng
2026-09-28 10:47:49 +08:00
parent f1e64ef864
commit 43c2dc0d8d
57 changed files with 4557 additions and 1642 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
src/components/CaseCard.vue
View File

@@ -1,4 +1,5 @@
<script setup lang="ts">
import { computed } from 'vue'
import { formatBusinessType } from '@/utils/format'
import type { Case } from '@/types/business/cases'
@@ -6,36 +7,60 @@ interface Props {
item: Case
}
defineProps<Props>()
const props = defineProps<Props>()
const emit = defineEmits<{ view: [id: string] }>()
const emit = defineEmits<{
view: [id: string]
favorite: [id: string]
}>()
function onView(id: string): void {
emit('view', id)
}
/** 卡片元信息：设计稿为「标签：值」三列两行 */
const meta = computed<Array<{ label: string; value: string }>>(() => [
{ label: '客户类型', value: props.item.clientType || '--' },
{ label: '所属行业', value: props.item.industry || '--' },
{ label: '规模', value: props.item.scale || '--' },
{ label: '项目周期', value: props.item.duration || '--' },
{ label: '服务团队', value: props.item.teamSize ? `${props.item.teamSize}人` : '--' },
// 设计稿完成时间为 2026/8/10 形式，后端 completedAt 下发 2026-08-10
{ label: '完成时间', value: props.item.finishDate ? props.item.finishDate.replace(/-/g, '/') : '--' },
])
</script>
<template>
<article class="case-card" @click="onView(item.id)">
<article class="case-card" @click="emit('view', item.id)">
<div class="case-card__cover">
<!-- TODO(蓝湖): 替换案例封面切图，接入 v-lazy -->
<!-- TODO(蓝湖): 替换案例封面切图 -->
<img v-if="item.cover" v-lazy="item.cover" class="case-card__img" :alt="item.title">
<div v-else class="case-card__img case-card__img--placeholder" />
<span class="case-card__tag">{{ formatBusinessType(item.category) }}</span>
<span class="case-card__more">查看详情 ></span>
<span class="case-card__tag" :class="`case-card__tag--${item.category}`">
{{ formatBusinessType(item.category) }}
</span>
<button
class="case-card__fav"
:class="{ 'is-active': item.isFavorite }"
:aria-label="item.isFavorite ? '取消收藏' : '收藏案例'"
@click.stop="emit('favorite', item.id)"
>
<svg class="case-card__fav-icon" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 20.5s-7.2-4.6-8.4-9A5.1 5.1 0 0 1 12 5.6a5.1 5.1 0 0 1 8.4 5.9c-1.2 4.4-8.4 9-8.4 9Z" />
</svg>
</button>
</div>
<div class="case-card__body">
<h3 class="case-card__title">
{{ item.title }}
</h3>
<ul class="case-card__meta">
<li>完成时间：{{ item.finishDate }}</li>
<li>服务团队：{{ item.teamSize }}人</li>
<li>规模：{{ item.scale }}</li>
<li>所属行业：{{ item.industry }}</li>
<li>项目周期：{{ item.duration }}</li>
<li>客户类型：{{ item.clientType }}</li>
<li v-for="row in meta" :key="row.label">
<span class="case-card__label">{{ row.label }}：</span>{{ row.value }}
</li>
</ul>
<span class="case-card__more">查看详情 ></span>
</div>
</article>
</template>
@@ -43,25 +68,22 @@ function onView(id: string): void {
<style lang="less" scoped>
.case-card {
overflow: hidden;
border-radius: @radius-lg;
border-radius: @radius-base;
background: @white;
box-shadow: @shadow-base;
cursor: pointer;
transition: box-shadow 0.2s, transform 0.2s;
&:hover {
box-shadow: @shadow-lg;
transform: translateY(-2px);
.case-card__more {
opacity: 1;
}
}
&__cover {
position: relative;
height: 160px;
margin: @spacing-sm @spacing-sm 0;
border-radius: @radius-base;
overflow: hidden;
aspect-ratio: 16 / 5;
}
&__img {
@@ -76,50 +98,104 @@ function onView(id: string): void {
&__tag {
position: absolute;
top: @spacing-sm;
left: @spacing-sm;
padding: 2px @spacing-sm;
border-radius: @radius-round;
background: rgba(0, 0, 0, 0.55);
color: @white;
font-size: @font-size-sm;
}
&__more {
position: absolute;
right: @spacing-sm;
bottom: @spacing-sm;
padding: 2px @spacing-sm;
top: 10px;
left: 10px;
height: 24px;
padding: 0 10px;
border-radius: @radius-round;
background: @primary-color;
color: @white;
font-size: @font-size-sm;
opacity: 0;
transition: opacity 0.2s;
line-height: 24px;
&--hardware {
background: @tag-hardware;
}
&--iot {
background: @tag-iot;
}
&--manufacturing {
background: @tag-manufacturing;
}
&--other {
background: @tag-other;
}
}
&__fav {
position: absolute;
top: 10px;
right: 10px;
.flex(row, center);
width: 28px;
height: 28px;
border-radius: @radius-round;
background: rgba(255, 255, 255, 0.85);
transition: background 0.2s;
&:hover {
background: @white;
}
&-icon {
width: 15px;
height: 15px;
fill: none;
stroke: @text-color-secondary;
stroke-width: 1.8;
transition: all 0.2s;
}
&.is-active {
background: @white;
.case-card__fav-icon {
fill: @danger-color;
stroke: @danger-color;
}
}
}
&__body {
padding: @spacing-base;
padding: @spacing-sm @spacing-base @spacing-base;
}
&__title {
margin-bottom: @spacing-sm;
font-size: @font-size-lg;
font-weight: 600;
color: @heading-color;
.multi-ellipsis(1);
.ellipsis();
}
&__meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px @spacing-sm;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px @spacing-sm;
margin-top: @spacing-sm;
font-size: @font-size-sm;
color: @text-color-secondary;
line-height: 1.5;
color: @heading-color;
li {
.ellipsis();
/* 值可能较长（如「完成时间：2026/11/30」），换行而非截断，避免丢信息 */
overflow-wrap: anywhere;
}
}
&__label {
color: @text-color-secondary;
}
&__more {
display: block;
width: fit-content;
margin: @spacing-base 0 0 auto;
color: @primary-color;
font-size: @font-size-base;
font-weight: 500;
}
}
</style>