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

feat:首页完成

Browse Source
This commit is contained in:
李伊帆
2026-09-11 08:02:01 +08:00
parent 5b31eac508
commit 173cd6b975
68 changed files with 3181 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
src/pages/case-library/components/CaseCard.vue Normal file
View File

@@ -0,0 +1,185 @@
<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 '@/styles/variables.scss';
.case-card {
padding: 0 0 28rpx;
margin-bottom: 24rpx;
background: $color-bg-page;
border-radius: 20rpx;
overflow: hidden;
}
.case-card__cover-wrap {
position: relative;
height: 320rpx;
overflow: hidden;
}
.case-card__cover {
width: 100%;
height: 100%;
}
.case-card__tag {
position: absolute;
top: 20rpx;
left: 20rpx;
padding: 6rpx 16rpx;
font-size: 22rpx;
color: #ffffff;
background: $color-primary;
border-radius: 8rpx;
}
.case-card__favorite {
position: absolute;
top: 20rpx;
right: 20rpx;
display: flex;
align-items: center;
justify-content: center;
width: 56rpx;
height: 56rpx;
background: rgba(255, 255, 255, 0.92);
border-radius: 50%;
}
.case-card__favorite-icon {
width: 32rpx;
height: 32rpx;
}
.case-card__title {
display: block;
padding: 24rpx 24rpx 0;
font-size: 32rpx;
font-weight: 600;
color: $color-text-primary;
}
.case-card__meta {
padding: 20rpx 24rpx 0;
}
.case-card__meta-row {
display: flex;
margin-bottom: 16rpx;
&:last-child {
margin-bottom: 0;
}
}
.case-card__meta-item {
display: flex;
flex: 1;
flex-direction: column;
}
.case-card__meta-label {
font-size: 22rpx;
color: $color-text-secondary;
}
.case-card__meta-value {
margin-top: 8rpx;
font-size: 24rpx;
color: $color-text-primary;
}
</style>