126 lines
2.7 KiB
Vue
126 lines
2.7 KiB
Vue
<script setup lang="ts">
|
||
import { formatBusinessType } from '@/utils/format'
|
||
import type { Case } from '@/types/business/cases'
|
||
|
||
interface Props {
|
||
item: Case
|
||
}
|
||
|
||
defineProps<Props>()
|
||
|
||
const emit = defineEmits<{ view: [id: string] }>()
|
||
|
||
function onView(id: string): void {
|
||
emit('view', id)
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<article class="case-card" @click="onView(item.id)">
|
||
<div class="case-card__cover">
|
||
<!-- TODO(蓝湖): 替换案例封面切图，接入 v-lazy -->
|
||
<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>
|
||
</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>
|
||
</ul>
|
||
</div>
|
||
</article>
|
||
</template>
|
||
|
||
<style lang="less" scoped>
|
||
.case-card {
|
||
overflow: hidden;
|
||
border-radius: @radius-lg;
|
||
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;
|
||
overflow: hidden;
|
||
}
|
||
|
||
&__img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
|
||
&--placeholder {
|
||
background: linear-gradient(135deg, @primary-light, @bg-color);
|
||
}
|
||
}
|
||
|
||
&__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;
|
||
border-radius: @radius-round;
|
||
background: @primary-color;
|
||
color: @white;
|
||
font-size: @font-size-sm;
|
||
opacity: 0;
|
||
transition: opacity 0.2s;
|
||
}
|
||
|
||
&__body {
|
||
padding: @spacing-base;
|
||
}
|
||
|
||
&__title {
|
||
margin-bottom: @spacing-sm;
|
||
font-size: @font-size-lg;
|
||
font-weight: 600;
|
||
color: @heading-color;
|
||
.multi-ellipsis(1);
|
||
}
|
||
|
||
&__meta {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 4px @spacing-sm;
|
||
font-size: @font-size-sm;
|
||
color: @text-color-secondary;
|
||
|
||
li {
|
||
.ellipsis();
|
||
}
|
||
}
|
||
}
|
||
</style>
|