ag-index/nuxt-web/components/SolutionPageLayout.vue

<script setup lang="ts">
type ContentCard = {
  title: string
  description: string
}

type ProductLink = {
  title: string
  description: string
  to?: string
}

defineProps<{
  title: string
  description: string
  badge: string
  heroStats?: Array<{ value: string; label: string }>
  painPoints: ContentCard[]
  architectureTitle: string
  architectureSteps: ContentCard[]
  architectureImage: string
  architectureImageAlt: string
  productLinks: ProductLink[]
  valueItems: ContentCard[]
}>()

const statIconClasses = ['blue ti-stats-up', 'cyan ti-layers', 'indigo ti-shield', 'green ti-money']
const painPointIconClasses = ['red ti-server', 'orange ti-time', 'yellow ti-settings', 'purple ti-lock']
const productBarClasses = ['blue', 'cyan', 'indigo', 'slate', 'green']
</script>

<template>
  <div>
    <section class="solution-hero">
      <div class="container">
        <div class="row">
          <div class="col-md-6 hero-content">
            <div class="reveal active">
              <div class="hero-badge">
                <span class="pulse-dot" />
                {{ badge }}
              </div>
              <h1 class="hero-title">{{ title }}</h1>
              <p class="hero-desc">{{ description }}</p>
            </div>
          </div>

          <div v-if="heroStats?.length" class="col-md-6 hero-stats hidden-sm hidden-xs">
            <div class="reveal active">
              <div class="stats-card-container">
                <div class="stats-grid">
                  <div v-for="(item, index) in heroStats" :key="`${item.value}-${item.label}`" class="stat-item">
                    <i :class="['stat-icon', ...statIconClasses[index % statIconClasses.length].split(' ')]" />
                    <div class="stat-number">{{ item.value }}</div>
                    <div class="stat-label">{{ item.label }}</div>
                  </div>
                  <div class="stats-center-icon">
                    <i class="ti-server" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="pain-points-section" id="solution">
      <div class="container">
        <div class="section-header reveal active">
          <h2>直击行业核心痛点</h2>
          <p>行业困境亟待破局，数智升级势在必行</p>
        </div>

        <div class="row">
          <div v-for="(item, index) in painPoints" :key="item.title" class="col-md-3 col-sm-6">
            <div class="pain-point-card reveal active">
              <div :class="['pain-point-icon', painPointIconClasses[index % painPointIconClasses.length].split(' ')[0]]">
                <i :class="painPointIconClasses[index % painPointIconClasses.length].split(' ')[1]" />
              </div>
              <h3>{{ item.title }}</h3>
              <p>{{ item.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="architecture-section">
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <div class="reveal active">
              <h2 style="font-size: 32px; font-weight: 700; margin-bottom: 40px; color: #fff;">{{ architectureTitle }}</h2>

              <div v-for="(item, index) in architectureSteps" :key="item.title" class="arch-step">
                <div :class="['arch-step-number', productBarClasses[index % 3]]">{{ `0${index + 1}` }}</div>
                <div class="arch-step-content">
                  <h4 :class="productBarClasses[index % 3]">{{ item.title }}</h4>
                  <p>{{ item.description }}</p>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md-8">
            <div class="reveal active">
              <div class="arch-visual-container">
                <img :src="architectureImage" :alt="architectureImageAlt">
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="products-section" id="products">
      <div class="container">
        <div class="section-header-flex reveal active">
          <div class="section-header-left">
            <div class="section-label">Product Matrix</div>
            <h2>部分产品与服务</h2>
            <p>从智能生产到供应链协同，全方位覆盖港航集团业务场景。</p>
          </div>
          <NuxtLink to="/products/logistics" class="view-all-link hidden-xs">
            查看所有产品 <i class="ti-arrow-right" />
          </NuxtLink>
        </div>

        <div class="row">
          <div v-for="(item, index) in productLinks" :key="item.title" class="col-md-4">
            <div class="product-card reveal active">
              <div :class="['product-card-bar', productBarClasses[index % productBarClasses.length]]" />
              <div class="product-card-body">
                <h3>{{ item.title }}</h3>
                <p>{{ item.description }}</p>
                <component :is="item.to ? 'NuxtLink' : 'div'" :to="item.to" class="product-card-footer">
                  <span>了解详情</span>
                  <div class="product-card-arrow">
                    <i class="ti-arrow-right" />
                  </div>
                </component>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="advantages-section">
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <div class="section-header reveal active" style="text-align: left; margin-bottom: 40px;">
              <h2>数字化转型价值</h2>
              <p>把行业经验沉淀为可复制、可运营、可持续放大的数智能力。</p>
            </div>
            <div v-for="item in valueItems" :key="item.title" class="advantage-item">
              <div class="advantage-check">
                <i class="ti-check-box" />
              </div>
              <div>
                <h4>{{ item.title }}</h4>
                <p>{{ item.description }}</p>
              </div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="stats-boxes">
              <div v-for="item in heroStats" :key="`${item.value}-${item.label}-box`" class="stat-box">
                <div class="stat-number">{{ item.value }}</div>
                <div class="stat-label">{{ item.label }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>