43 lines
1.2 KiB
Vue
43 lines
1.2 KiB
Vue
<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>
|