nuxt初始化

nuxt-web/components/ProductCaseCards.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+const props = defineProps<{
+  heading?: string
+  summary?: string
+  items: Array<{
+    title: string
+    description: string
+    to: string
+  }>
+}>()
+
+const headerClasses = ['blue', 'cyan', 'teal', 'indigo', 'green']
+</script>
+
+<template>
+  <section class="cases-section" id="cases">
+    <div class="container">
+      <div class="row">
+        <div class="product-advantages-header">
+          <div>
+            <h1 class="product-advantages-title">{{ heading || '客户案例' }}</h1>
+            <p v-if="summary">{{ summary }}</p>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col col-xs-12">
+          <NuxtLink v-for="(item, index) in props.items" :key="item.to" :to="item.to" class="case-card-link">
+            <div class="case-card">
+              <div :class="['case-card-header', headerClasses[index % headerClasses.length]]">
+                <h3>{{ item.title }}</h3>
+              </div>
+              <div class="case-card-body">
+                <p>{{ item.description }}</p>
+              </div>
+            </div>
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>