feat 搭建架构骨架

src/views/home/cpns/HomeBusinessCards.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import type { BusinessLine } from '@/types/business/home'
+
+interface Props {
+  lines: BusinessLine[]
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <section class="home-business">
+    <div class="home-business__head">
+      <h3 class="home-business__title">
+        业务服务
+      </h3>
+      <span class="home-business__slogan text-secondary">研发智造一体化自营平台，全链路质量兜底</span>
+    </div>
+    <div class="home-business__grid">
+      <RouterLink
+        v-for="line in lines"
+        :key="line.id"
+        :to="`/business/${line.id}`"
+        class="home-business__card"
+      >
+        <div class="home-business__icon">
+          <!-- TODO(蓝湖): 替换业务图标切图 -->
+          <span>{{ line.name.slice(0, 2) }}</span>
+        </div>
+        <h4 class="home-business__name">
+          {{ line.name }}
+        </h4>
+        <p class="home-business__desc text-secondary">
+          {{ line.desc }}
+        </p>
+        <span class="home-business__more">了解详细 ></span>
+      </RouterLink>
+    </div>
+  </section>
+</template>
+
+<style lang="less" scoped>
+.home-business {
+  &__head {
+    .flex(row, space-between);
+    margin-bottom: @spacing-base;
+  }
+
+  &__title {
+    font-size: @font-size-xl;
+    font-weight: 600;
+    color: @heading-color;
+  }
+
+  &__slogan {
+    font-size: @font-size-sm;
+  }
+
+  &__grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: @spacing-base;
+  }
+
+  &__card {
+    .flex(column, flex-start);
+    gap: @spacing-sm;
+    padding: @spacing-lg;
+    border-radius: @radius-lg;
+    background: @white;
+    box-shadow: @shadow-base;
+    transition: transform 0.2s, box-shadow 0.2s;
+
+    &:hover {
+      box-shadow: @shadow-lg;
+      transform: translateY(-2px);
+
+      .home-business__more {
+        color: @primary-color;
+      }
+    }
+  }
+
+  &__icon {
+    .flex(row, center);
+    width: 48px;
+    height: 48px;
+    border-radius: @radius-base;
+    background: @primary-light;
+    color: @primary-color;
+    font-size: @font-size-base;
+    font-weight: 600;
+  }
+
+  &__name {
+    font-size: @font-size-lg;
+    font-weight: 600;
+    color: @heading-color;
+  }
+
+  &__desc {
+    min-height: 40px;
+    font-size: @font-size-sm;
+    .multi-ellipsis(2);
+  }
+
+  &__more {
+    font-size: @font-size-sm;
+    color: @text-color-secondary;
+    transition: color 0.2s;
+  }
+}
+</style>