100 lines
2.5 KiB
Vue
100 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import type { CaseItem } from '@/types/case-library'
|
|
|
|
defineProps<{
|
|
item: CaseItem
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
toggleFavorite: [id: string]
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<view class="case-card">
|
|
<view class="case-card__cover-wrap">
|
|
<image
|
|
class="case-card__cover"
|
|
:src="item.cover"
|
|
mode="aspectFill"
|
|
/>
|
|
<text class="case-card__tag">
|
|
{{ item.category }}
|
|
</text>
|
|
<view
|
|
class="case-card__favorite"
|
|
@tap.stop="emit('toggleFavorite', item.id)"
|
|
>
|
|
<image
|
|
class="case-card__favorite-icon"
|
|
:src="item.favorite ? '/static/icons/icon-heart-filled.svg' : '/static/icons/icon-heart.svg'"
|
|
mode="aspectFit"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<text class="case-card__title">
|
|
{{ item.title }}
|
|
</text>
|
|
|
|
<view class="case-card__meta">
|
|
<view class="case-card__meta-row">
|
|
<view class="case-card__meta-item">
|
|
<text class="case-card__meta-label">
|
|
客户类型
|
|
</text>
|
|
<text class="case-card__meta-value">
|
|
{{ item.clientType }}
|
|
</text>
|
|
</view>
|
|
<view class="case-card__meta-item">
|
|
<text class="case-card__meta-label">
|
|
所属行业
|
|
</text>
|
|
<text class="case-card__meta-value">
|
|
{{ item.industry }}
|
|
</text>
|
|
</view>
|
|
<view class="case-card__meta-item">
|
|
<text class="case-card__meta-label">
|
|
规模
|
|
</text>
|
|
<text class="case-card__meta-value">
|
|
{{ item.scale }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<view class="case-card__meta-row">
|
|
<view class="case-card__meta-item">
|
|
<text class="case-card__meta-label">
|
|
项目周期
|
|
</text>
|
|
<text class="case-card__meta-value">
|
|
{{ item.cycle }}
|
|
</text>
|
|
</view>
|
|
<view class="case-card__meta-item">
|
|
<text class="case-card__meta-label">
|
|
服务团队
|
|
</text>
|
|
<text class="case-card__meta-value">
|
|
{{ item.teamSize }}
|
|
</text>
|
|
</view>
|
|
<view class="case-card__meta-item">
|
|
<text class="case-card__meta-label">
|
|
完成时间
|
|
</text>
|
|
<text class="case-card__meta-value">
|
|
{{ item.completedAt }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
@import './CaseCard.scss';
|
|
</style>
|