39 lines
1.3 KiB
Vue
39 lines
1.3 KiB
Vue
<script setup>
|
|
defineProps({
|
|
capabilities: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<section class="bg-[#f7f8f7] py-20">
|
|
<div class="container-gm">
|
|
<div class="text-center" data-reveal>
|
|
<p class="text-sm uppercase tracking-[0.3em] text-[#a1a1a1]">Capability</p>
|
|
<h2 class="section-title mt-4">从项目交付到增长资产</h2>
|
|
</div>
|
|
|
|
<div class="mt-12 overflow-x-auto rounded-[28px] border border-gm-border bg-white" data-reveal>
|
|
<div class="min-w-[720px]">
|
|
<div class="grid grid-cols-[0.8fr_1fr_1fr] border-b border-gm-border bg-gm-dark text-sm font-medium text-white">
|
|
<div class="p-5">能力维度</div>
|
|
<div class="p-5">基础交付</div>
|
|
<div class="p-5">增长超人升级</div>
|
|
</div>
|
|
<div
|
|
v-for="item in capabilities"
|
|
:key="item.label"
|
|
class="grid grid-cols-[0.8fr_1fr_1fr] border-b border-gm-border last:border-b-0"
|
|
>
|
|
<div class="p-5 font-medium text-[#262626]">{{ item.label }}</div>
|
|
<div class="p-5 text-sm leading-7 text-[#777]">{{ item.basic }}</div>
|
|
<div class="p-5 text-sm font-medium leading-7 text-gm-green">{{ item.advanced }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|