feat 搭建架构骨架

src/components/CaseCard.vue

@@ -0,0 +1,125 @@
+<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>