Home-Care/hss-home-service/website/IMPLEMENTATION.md

智慧医养居家上门服务平台 — 官网前端实现方案

基于：官网设计方案Prompt.txt（7轮需求采集产物） 仓库：hss-home-service/website/（独立 Nuxt3 项目） 后端：已有 Spring Boot 后端，运行在 18080 端口，/api/hss/* 84 个接口

---

1. 需求与约束摘要

项	内容
任务类型	新功能开发（新建项目）
目标	实现完整产品官网：9 页面 + 公共组件，品牌展示 + 获客转化
技术栈	Vue3 + Nuxt3 + Tailwind CSS（严格）
UI 库	不引入 UI 组件库，仅 Tailwind 自定义组件
渲染	SSG / 静态预渲染优先
暗色/i18n	不做
动效	CSS transition/animation + IntersectionObserver，禁用 GSAP/3D
表单	开发期 mock，正式通过 /api 对接已有后端
SEO	每页 useSeoMeta，百度优先，兼顾 Google
可访问性	WCAG 2.2 AA：label、focus、错误提示、键盘可达、对比度
性能	Lighthouse 四项 ≥90，首屏 <2s
图片	loremflickr 占位，标注"示意素材，待替换"

---

2. 代码依据

文件	职责
src/main/java/.../common/ApiResponse.java	后端统一响应格式 {code, message, data, requestId, timestamp}，code=200 成功
docker-compose.yml	后端运行在 18080 端口，官网通过 Nginx 反代 /api
delivery-miniapp/common/api.js	现有前端请求封装风格参考（BASE_URL, getHeaders, apiGet/apiPost）
官网设计方案Prompt.txt	7 轮需求采集产物：商业目标、用户、内容、结构、功能、视觉、技术

---

3. 改动范围清单

全部新建，website/ 目录与现有后端 src/ 同级。

路径	增/删/改	摘要
website/package.json	增	Nuxt3 项目依赖
website/nuxt.config.ts	增	SSG、SEO、Tailwind、API 代理
website/tailwind.config.ts	增	医疗蓝/健康绿/暖橙 色彩体系
website/app.vue	增	根布局
website/pages/index.vue	增	首页（12 段模块）
website/pages/solution.vue	增	解决方案页
website/pages/capabilities.vue	增	核心能力页
website/pages/scenarios.vue	增	应用场景页
website/pages/service-loop.vue	增	服务闭环流程图页
website/pages/security.vue	增	安全合规页
website/pages/resources.vue	增	资源中心页
website/pages/about.vue	增	关于我们页
website/pages/contact.vue	增	联系我们页
website/components/AppHeader.vue	增	顶部导航（Logo + 9 栏目 + 登录入口）
website/components/AppFooter.vue	增	页脚（栏目链接 + 版权 + ICP 备案）
website/components/HeroSection.vue	增	Hero 首屏区块
website/components/ServiceLoopFlow.vue	增	8 阶段交互式流程图
website/components/CapabilityCard.vue	增	核心能力卡片
website/components/TriEndDisplay.vue	增	三端协同展示
website/components/ScenarioCard.vue	增	应用场景卡片
website/components/DataDashboard.vue	增	数据看板动效
website/components/SecurityGrid.vue	增	安全合规网格
website/components/ValueMetrics.vue	增	建设价值指标
website/components/DemoForm.vue	增	预约演示表单
website/components/DownloadForm.vue	增	获取方案/白皮书表单
website/components/ContactForm.vue	增	联系我们表单
website/components/CtaSection.vue	增	底部 CTA 区块
website/composables/useLeadForm.ts	增	表单提交封装（mock/API 切换）
website/composables/useScrollAnim.ts	增	滚动动效 composable
website/composables/useSeo.ts	增	SEO meta 配置
website/data/siteContent.ts	增	站点内容数据（文案/栏目/菜单）
website/data/solutions.ts	增	解决方案数据
website/data/scenarios.ts	增	应用场景数据
website/assets/css/main.css	增	全局样式 + CSS 变量
website/public/robots.txt	增	爬虫配置
website/server/api/lead.post.ts	增	Nuxt server route（开发期 mock，生产反代）

---

4. 方案概述

4.1 架构

website/                          # 独立 Nuxt3 项目
├── pages/                        # 9 个页面（基于文件路由）
│   ├── index.vue                 # 首页（SSG）
│   ├── solution.vue              # 解决方案
│   ├── capabilities.vue          # 核心能力
│   ├── scenarios.vue             # 应用场景
│   ├── service-loop.vue          # 服务闭环
│   ├── security.vue              # 安全合规
│   ├── resources.vue             # 资源中心
│   ├── about.vue                 # 关于我们
│   └── contact.vue               # 联系我们
├── components/                   # 16 个公共组件
├── composables/                  # 3 个 composables
├── data/                         # 站点内容数据
├── server/api/                   # 开发期 mock（生产反代）
├── nuxt.config.ts                # SSG + SEO + Tailwind
└── tailwind.config.ts            # 医疗蓝/健康绿/暖橙

4.2 API 对接

开发期：
  表单提交 → /api/lead → server/api/lead.post.ts (mock 返回 200)

生产期（Nginx）：
  /api/* → proxy_pass http://hss-app:8080/api/hss/*
  表单提交到新后端端点 POST /api/hss/leads（待后端新增）
  或复用现有 POST /api/hss/applications 作为线索入口（字段映射）

4.3 数据流

siteContent.ts (静态数据)
  → pages/*.vue (渲染)
  → components/*.vue (模块展示)

用户交互（表单提交）
  → composables/useLeadForm.ts (封装)
  → server/api/lead.post.ts (mock) | /api/hss/leads (生产)

---

5. 代码级修改说明

5.1 项目初始化

文件：website/package.json（新增）

{
  "name": "hss-website",
  "type": "module",
  "scripts": {
    "dev": "nuxt dev",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "preview": "nuxt preview"
  },
  "devDependencies": {
    "@nuxtjs/tailwindcss": "^6.12.0",
    "nuxt": "^3.13.0",
    "vue": "^3.5.0"
  }
}

文件：website/nuxt.config.ts（新增）

export default defineNuxtConfig({
  ssr: false, // SSG only
  app: {
    head: {
      titleTemplate: '%s | 智慧医养居家上门服务平台',
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { name: 'description', content: '面向政府、医院与养老机构的智慧医养居家上门服务闭环管理平台' }
      ],
      link: [
        { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' }
      ]
    }
  },
  nitro: {
    prerender: {
      routes: ['/'],
      crawlLinks: true
    }
  },
  modules: ['@nuxtjs/tailwindcss'],
  runtimeConfig: {
    public: {
      apiBase: process.env.API_BASE || 'http://localhost:18080/api/hss'
    }
  }
})

5.2 Tailwind 配置

文件：website/tailwind.config.ts（新增）

export default {
  theme: {
    extend: {
      colors: {
        primary: { DEFAULT: '#155EEF', 50: '#EBF0FF', 100: '#D6E0FF', 500: '#155EEF', 700: '#0B4C8C', 900: '#062D5E' },
        accent: { DEFAULT: '#20C997', 50: '#E6F9F5', 500: '#20C997', 700: '#18A999' },
        cta: { DEFAULT: '#FF8A3D', 500: '#FF8A3D', 700: '#FF7A1A' },
        surface: { DEFAULT: '#F5F9FF', white: '#FFFFFF' },
        text: { primary: '#1F2937', secondary: '#6B7280' }
      },
      fontFamily: {
        sans: ['"Noto Sans SC"', '"Source Han Sans"', '"Alibaba PuHuiTi"', 'system-ui', 'sans-serif'],
        mono: ['Inter', 'system-ui', 'sans-serif']
      }
    }
  }
}

5.3 全局样式

文件：website/assets/css/main.css（新增）

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --color-primary: #155EEF;
    --color-accent: #20C997;
    --color-cta: #FF8A3D;
    --color-surface: #F5F9FF;
    --color-text: #1F2937;
    --color-text-secondary: #6B7280;
  }

  html { scroll-behavior: smooth; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }

  :focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }
}

@layer components {
  .section-container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }
  .section-title {
    @apply text-3xl md:text-4xl font-bold text-text-primary text-center;
  }
  .section-subtitle {
    @apply text-lg text-text-secondary text-center mt-4 max-w-2xl mx-auto;
  }
}

5.4 根布局

文件：website/app.vue（新增）

<template>
  <div class="min-h-screen bg-surface-white">
    <AppHeader />
    <main>
      <NuxtPage />
    </main>
    <AppFooter />
    <CtaSection />
  </div>
</template>

5.5 导航栏组件

文件：website/components/AppHeader.vue（新增）

<script setup lang="ts">
import { ref } from 'vue';
const mobileOpen = ref(false);
const menus = [
  { label: '首页', to: '/' },
  { label: '解决方案', to: '/solution' },
  { label: '核心能力', to: '/capabilities' },
  { label: '应用场景', to: '/scenarios' },
  { label: '服务闭环', to: '/service-loop' },
  { label: '安全合规', to: '/security' },
  { label: '资源中心', to: '/resources' },
  { label: '关于我们', to: '/about' },
  { label: '联系我们', to: '/contact' },
];
</script>

<template>
  <header class="sticky top-0 z-50 bg-white/95 backdrop-blur border-b border-gray-100">
    <div class="section-container flex items-center justify-between h-16">
      <!-- Logo: 临时文字 Logo -->
      <NuxtLink to="/" class="flex items-center gap-2 text-primary-700 font-bold text-lg">
        <span class="w-8 h-8 rounded-lg bg-primary flex items-center justify-center text-white text-sm">H</span>
        智慧医养平台
      </NuxtLink>

      <!-- Desktop Nav -->
      <nav class="hidden lg:flex items-center gap-1">
        <NuxtLink v-for="m in menus" :key="m.to" :to="m.to"
          class="px-3 py-2 rounded-lg text-sm text-text-secondary hover:text-primary hover:bg-primary-50 transition-colors">
          {{ m.label }}
        </NuxtLink>
      </nav>

      <!-- Right: Login + CTA -->
      <div class="hidden lg:flex items-center gap-3">
        <a href="/platform" class="text-sm text-text-secondary hover:text-primary transition-colors">平台登录</a>
        <NuxtLink to="/contact"
          class="px-4 py-2 bg-cta text-white rounded-lg text-sm font-medium hover:bg-cta-700 transition-colors">
          预约演示
        </NuxtLink>
      </div>

      <!-- Mobile toggle -->
      <button @click="mobileOpen = !mobileOpen" class="lg:hidden p-2" aria-label="菜单">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            :d="mobileOpen ? 'M6 18L18 6M6 6l12 12' : 'M4 6h16M4 12h16M4 18h16'" />
        </svg>
      </button>
    </div>

    <!-- Mobile menu -->
    <div v-if="mobileOpen" class="lg:hidden border-t bg-white">
      <div class="section-container py-4 space-y-1">
        <NuxtLink v-for="m in menus" :key="m.to" :to="m.to"
          @click="mobileOpen = false"
          class="block px-3 py-2 rounded-lg text-text-secondary hover:text-primary hover:bg-primary-50">
          {{ m.label }}
        </NuxtLink>
        <div class="pt-3 border-t">
          <NuxtLink to="/contact"
            class="block w-full text-center px-4 py-3 bg-cta text-white rounded-lg font-medium">
            预约演示
          </NuxtLink>
        </div>
      </div>
    </div>
  </header>
</template>

5.6 首页

文件：website/pages/index.vue（新增）

当前逻辑：不存在。 拟议改动：按 Prompt 第 12 段顺序实现首页模块。

<script setup lang="ts">
import { useSeo } from '~/composables/useSeo';
useSeo({
  title: '首页',
  description: '智慧医养居家上门服务闭环管理平台，覆盖申请、评估、方案、派单、执行、监管、验收、结算全流程'
});
</script>

<template>
  <!-- 1. Hero -->
  <HeroSection />

  <!-- 2. 行业痛点 -->
  <section class="py-20 bg-surface">
    <div class="section-container">
      <h2 class="section-title">居家上门服务，为什么这么难管？</h2>
      <p class="section-subtitle">申请流程乱、评估标准不一、派单靠经验、上门难监管、质量难追溯、结算不规范</p>
      <div class="grid md:grid-cols-3 gap-8 mt-12">
        <div v-for="p in painPoints" :key="p.title" class="bg-white rounded-2xl p-8 shadow-sm">
          <h3 class="font-bold text-lg mb-3">{{ p.title }}</h3>
          <p class="text-text-secondary text-sm">{{ p.desc }}</p>
        </div>
      </div>
    </div>
  </section>

  <!-- 3. 解决方案概述 -->
  <section class="py-20 bg-white">
    <div class="section-container">
      <h2 class="section-title">一套平台，打通居家服务全流程</h2>
      <p class="section-subtitle">从服务申请到结算归档，每个环节都可监管、可追溯、可评价</p>
      <img src="https://loremflickr.com/1024/400/technology" alt="平台概览示意图（示意素材，待替换）"
        class="mt-12 rounded-2xl shadow-lg w-full" loading="lazy" />
    </div>
  </section>

  <!-- 4. 服务闭环流程 -->
  <section class="py-20 bg-surface">
    <div class="section-container">
      <h2 class="section-title">完整服务闭环</h2>
      <ServiceLoopFlow />
    </div>
  </section>

  <!-- 5. 核心能力 -->
  <section class="py-20 bg-white">
    <div class="section-container">
      <h2 class="section-title">八大核心能力</h2>
      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mt-12">
        <CapabilityCard v-for="c in capabilities" :key="c.title" v-bind="c" />
      </div>
    </div>
  </section>

  <!-- 6. 三端协同 -->
  <section class="py-20 bg-surface">
    <div class="section-container">
      <h2 class="section-title">三端协同，角色分明</h2>
      <TriEndDisplay />
    </div>
  </section>

  <!-- 7. 应用场景 -->
  <section class="py-20 bg-white">
    <div class="section-container">
      <h2 class="section-title">覆盖五大应用场景</h2>
      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mt-12">
        <ScenarioCard v-for="s in scenarios" :key="s.title" v-bind="s" />
      </div>
    </div>
  </section>

  <!-- 8. 数据监管 -->
  <section class="py-20 bg-surface">
    <div class="section-container">
      <h2 class="section-title">实时监管，数据驱动</h2>
      <DataDashboard />
    </div>
  </section>

  <!-- 9. 安全合规 -->
  <section class="py-20 bg-white">
    <div class="section-container">
      <h2 class="section-title">医疗级安全合规</h2>
      <SecurityGrid />
    </div>
  </section>

  <!-- 10. 建设价值 -->
  <section class="py-20 bg-surface">
    <div class="section-container">
      <h2 class="section-title">平台建设价值</h2>
      <ValueMetrics />
    </div>
  </section>

  <!-- 11. 资源下载 -->
  <section class="py-20 bg-white">
    <div class="section-container text-center">
      <h2 class="section-title">获取完整方案</h2>
      <p class="section-subtitle">下载解决方案 PDF、白皮书和产品介绍资料</p>
      <DownloadForm />
    </div>
  </section>

  <!-- 12. 底部 CTA 由 app.vue 中的 CtaSection 统一提供 -->
</template>

<script lang="ts">
const painPoints = [
  { title: '申请受理难', desc: '多渠道申请分散，材料收集靠纸质，资格校验靠人工，效率低且容易遗漏。' },
  { title: '派单调度难', desc: '依赖人工经验派单，不考虑资质、区域、负载匹配，冲突和超时频发。' },
  { title: '过程监管难', desc: '服务过程不可见，GPS签到、执行记录、证据链缺失，质量无法保证。' },
];
const capabilities = [
  { icon: '📋', title: '需求受理', desc: '多渠道统一接入，自动校验材料/资格/重复申请' },
  { icon: '🩺', title: '能力评估', desc: '上门评估、GPS签到、护理等级与风险评估' },
  { icon: '📝', title: '方案制定', desc: '评估驱动、费用透明、签署版本化管理' },
  { icon: '🚀', title: '智能派单', desc: '硬约束过滤+软约束评分，推荐Top5并解释' },
  { icon: '✅', title: '上门执行', desc: 'GPS签到、项目级执行记录、证据链留存' },
  { icon: '👁️', title: '过程监管', desc: '抽查、违规、整改、审计全流程可追溯' },
  { icon: '⭐', title: '验收评价', desc: '星级评分、标签评价、验收拒绝可重服' },
  { icon: '💰', title: '结算归档', desc: '方案价→执行→验收→支付→归档全链路' },
];
const scenarios = [
  { title: '政府监管', desc: '为民政/卫健部门提供居家养老服务全流程监管能力', icon: '🏛️' },
  { title: '医院延续护理', desc: '院后居家照护服务延伸，提升连续照护能力', icon: '🏥' },
  { title: '养老机构', desc: '规范化派单、服务执行、质量评价和人员管理', icon: '🏠' },
  { title: '社区服务中心', desc: '社区居家照护派单、上门服务和数据上报', icon: '🏘️' },
  { title: '长护险管理', desc: '长护险服务过程监管、费用结算和合规审计', icon: '🛡️' },
];
</script>

5.7 服务闭环流程图

文件：website/components/ServiceLoopFlow.vue（新增）

<script setup lang="ts">
import { useScrollAnim } from '~/composables/useScrollAnim';
const steps = [
  { num: '01', title: '需求受理', desc: '多渠道统一接入\n自动校验与审核', color: 'bg-primary' },
  { num: '02', title: '能力评估', desc: '上门评估定级\nGPS签到+拍照', color: 'bg-blue-400' },
  { num: '03', title: '方案制定', desc: '个性化服务方案\n费用透明计算', color: 'bg-accent' },
  { num: '04', title: '智能派单', desc: '算法匹配推荐\n人工确认兜底', color: 'bg-teal-400' },
  { num: '05', title: '上门执行', desc: 'GPS签到校验\n项目级执行记录', color: 'bg-orange-400' },
  { num: '06', title: '过程监管', desc: '抽查违规整改\n审计日志追溯', color: 'bg-purple-400' },
  { num: '07', title: '验收评价', desc: '星级+标签评价\n评分影响后续派单', color: 'bg-pink-400' },
  { num: '08', title: '结算归档', desc: '自动汇总结算\n电子台账归档', color: 'bg-cta' },
];

const { observe } = useScrollAnim();
onMounted(() => {
  document.querySelectorAll('.flow-step').forEach((el, i) => {
    observe(el, { delay: i * 100, class: 'flow-visible' });
  });
});
</script>

<template>
  <div class="relative">
    <!-- 连线 -->
    <div class="hidden lg:block absolute top-1/2 left-0 right-0 h-0.5 bg-gray-200 -translate-y-1/2 z-0" />
    <!-- 步骤节点 -->
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 relative z-10">
      <div v-for="(s, i) in steps" :key="i"
        class="flow-step bg-white rounded-2xl p-6 text-center shadow-sm opacity-0 translate-y-8 transition-all duration-500"
        :class="s.color.replace('bg-', 'hover:shadow-')">
        <span :class="[s.color, 'text-white w-10 h-10 rounded-full inline-flex items-center justify-center font-bold text-sm mb-3']">
          {{ s.num }}
        </span>
        <h4 class="font-bold text-sm mb-1">{{ s.title }}</h4>
        <p class="text-xs text-text-secondary whitespace-pre-line">{{ s.desc }}</p>
      </div>
    </div>
  </div>
</template>

<style scoped>
.flow-visible { opacity: 1; transform: translateY(0); }
</style>

5.8 公共组件速览

HeroSection.vue（新增）— 首屏：左文右图，一句话定位 + 价值说明 + 双 CTA + 组合视觉 CapabilityCard.vue（新增）— 图标 + 标题 + 描述，hover 上浮阴影 TriEndDisplay.vue（新增）— 三列卡片联动：家属端 / delivery 端 / 管理监管端 ScenarioCard.vue（新增）— 场景图标 + 标题 + 描述，可点击跳转 DataDashboard.vue（新增）— 数字跳动 (countUp) + 图表渐入 mock SecurityGrid.vue（新增）— 权限/审计/隐私/授权/追溯 网格展示 ValueMetrics.vue（新增）— 效率/质量/监管/结算 四指标 + 数据 AppFooter.vue（新增）— 四列链接 + Logo + ICP 备案号 CtaSection.vue（新增）— 全宽蓝底 + "立即预约演示" 主按钮 + "获取方案" 副按钮

5.9 表单 Composable

文件：website/composables/useLeadForm.ts（新增）

import { ref } from 'vue';

interface LeadForm {
  name: string;
  orgName: string;
  phone: string;
  type: 'demo' | 'download' | 'contact';
  extra?: Record<string, string>;
}

export function useLeadForm(type: LeadForm['type']) {
  const loading = ref(false);
  const success = ref(false);
  const error = ref('');
  const form = ref<LeadForm>({ name: '', orgName: '', phone: '', type });

  async function submit() {
    loading.value = true; error.value = '';
    try {
      const config = useRuntimeConfig();
      const res = await $fetch<{ code: number; message: string }>('/api/lead', {
        method: 'POST',
        body: { ...form.value, timestamp: Date.now() }
      });
      if (res.code === 200) {
        success.value = true;
      } else {
        error.value = res.message || '提交失败，请稍后重试';
      }
    } catch (e: any) {
      error.value = e?.message || '网络错误，请稍后重试';
    } finally {
      loading.value = false;
    }
  }

  function reset() { success.value = false; error.value = ''; }

  return { form, loading, success, error, submit, reset };
}

5.10 Mock API（开发期）

文件：website/server/api/lead.post.ts（新增）

export default defineEventHandler(async (event) => {
  const body = await readBody(event);
  // 开发期 mock：直接返回成功
  console.log('[mock] lead received:', body);
  return { code: 200, message: 'success', data: { id: Date.now() }, requestId: 'mock-' + Date.now(), timestamp: Date.now() };
});

---

6. 截图与代码对照

本需求无用户提供的界面截图。以下为设计方案 Prompt 中定义的模块与代码映射：

设计 Prompt 模块	对应组件	关键交互
Hero 首屏（一句话定位+CTA+视觉）	HeroSection.vue	静态展示，CTA 跳转 /contact
服务闭环流程图（8 阶段）	ServiceLoopFlow.vue	IntersectionObserver 逐步点亮
核心能力卡片（8 张）	CapabilityCard.vue	hover 上浮 + 阴影
三端协同展示	TriEndDisplay.vue	三列卡片联动
应用场景卡片	ScenarioCard.vue	可点击跳转场景详情
数据看板	DataDashboard.vue	数字跳动(countUp) + 渐入
安全合规网格	SecurityGrid.vue	图标+说明网格
预约演示表单	DemoForm.vue	useLeadForm('demo')，6 字段
获取方案表单	DownloadForm.vue	useLeadForm('download')，4 字段
联系我们表单	ContactForm.vue	useLeadForm('contact')，5 字段

---

7. 类型、接口与 Mock

7.1 后端需新增接口

当前后端 84 个接口中无表单/线索相关端点。需新增：

// POST /api/hss/leads — 接收官网表单提交
@PostMapping("/leads")
@Idempotent(prefix = "lead:submit")
public ApiResponse<Map<String, Object>> submitLead(@RequestBody LeadRequest req) {
    // 存储表单提交记录到 hss_leads 表（或复用现有通知/审计表记录）
}

若第一版不新增后端端点，官网表单可：

• 开发期：用 server/api/lead.post.ts mock
• 过渡期：复用 POST /api/hss/applications 作为线索入口（字段映射）
• 正式期：新增 POST /api/hss/leads

7.2 响应格式对齐

后端 ApiResponse：{code, message, data, requestId, timestamp} 前端 useLeadForm 已对齐此格式，检查 res.code === 200。

---

8. 自测与回归

8.1 页面可达性验证

• 首页 / — 12 段模块完整渲染
• 解决方案 /solution — 内容卡片 + CTA
• 核心能力 /capabilities — 8 张卡片 + 详情
• 应用场景 /scenarios — 5 场景
• 服务闭环 /service-loop — 8 节点流程图
• 安全合规 /security — 网格展示
• 资源中心 /resources — 下载卡片 + 表单
• 关于我们 /about — 团队/愿景
• 联系我们 /contact — 完整表单

8.2 响应式验证

• 桌面 1440px+：全模块正常
• 平板 768px：网格变 2 列，流程图竖排
• 手机 375px：流程变纵向步骤条，CTA 固定底部

8.3 性能验证

• npm run generate 成功产出静态文件
• 首屏 < 2s（空缓存）
• Lighthouse ≥ 90（Performance/Accessibility/SEO/Best Practices）

8.4 可访问性验证

• Tab 键可遍历导航和表单
• 表单字段有 label + 错误提示
• 颜色对比度满足 AA
• prefers-reduced-motion 关闭动效

8.5 SEO 验证

• 每页有独立 title / description
• 生成 sitemap.xml / robots.txt
• 百度搜索关键词可检索到页面

---

9. 短 Prompt

在 hss-home-service/website/ 下新建 Nuxt3 项目。
技术栈：Vue3 + Nuxt3 + Tailwind CSS。不引入 UI 组件库。
渲染模式：SSG/静态预渲染。不做 SSR、暗色模式、i18n。
动效：CSS transition/animation + IntersectionObserver，禁用 GSAP/3D。
表单：用 composables/useLeadForm.ts 封装，开发期 mock (/api/lead)，正式切 /api/hss/leads。
设计 Token：主色 #155EEF、辅助 #20C997、CTA #FF8A3D、背景 #F5F9FF。
需交付 9 个页面 + 16 个公共组件，响应式，Lighthouse ≥90，WCAG 2.2 AA。
具体方案见 IMPLEMENTATION.md，严格按此执行。