admin/www/app/components/section/layouts/LayoutFeatureGrid.vue

<script setup lang="ts">
import type { SectionBlock } from '~/types/site';

const props = defineProps<{ section: SectionBlock }>();

const { overline, title, subtitle, config, isEn, isDark, overlineStyle, titleStyle, bodyStyle } = useSectionContent(props.section);

const features = computed(() => config.value.features ?? []);
</script>

<template>
  <div class="section-container py-[var(--sec-py,96px)]">
    <!-- 标题区 -->
    <div class="text-center max-w-640px mx-auto mb-56px">
      <p v-if="overline" class="text-14px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'" :style="overlineStyle">
        {{ overline }}
      </p>
      <h2 class="mt-12px font-bold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">
        {{ title }}
      </h2>
      <p v-if="subtitle" class="mt-16px text-base" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'" :style="bodyStyle">
        {{ subtitle }}
      </p>
    </div>

    <!-- 特性网格 -->
    <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-24px">
      <div
        v-for="(feature, idx) in features"
        :key="idx"
        class="p-32px rounded-16px transition-all hover:-translate-y-4px"
        :class="isDark ? 'bg-white/5 border border-white/10' : 'bg-white border border-gray-100 shadow-sm hover:shadow-md dark:bg-dark-800 dark:border-dark-700'"
      >
        <span v-if="feature.icon" class="text-3xl">{{ feature.icon }}</span>
        <h3 class="mt-16px text-lg font-semibold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">
          {{ isEn ? feature.title_en : feature.title_zh }}
        </h3>
        <p class="mt-8px text-sm leading-relaxed" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'" :style="bodyStyle">
          {{ isEn ? feature.desc_en : feature.desc_zh }}
        </p>
      </div>
    </div>
  </div>
</template>