feat: 锦泽官网

.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

README.md

@@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app/app.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <NuxtLayout>
+        <NuxtPage />
+    </NuxtLayout>
+</template>
+
+<style lang="scss" scoped>
+.page-enter-active,
+.page-leave-active {
+  transition: all 0.4s;
+}
+.page-enter-from,
+.page-leave-to {
+  opacity: 0;
+  filter: blur(1rem);
+}
+</style>

app/layouts/default.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import { Phone } from 'lucide-vue-next';
+
+const submenus = [
+    { name: '首页', href: '/' },
+    { name: '行业痛点', href: '#pain' },
+    { name: '解决方案', href: '#solution' },
+    { name: '核心产品', href: '#product' },
+    { name: '精准养老', href: '#elderly' },
+    { name: "合作伙伴", href: '#partner' },
+    { name: '关于锦泽', href: '#about' },
+]
+
+// 获取当前 hash 值
+const route = useRoute()
+const currentHash = ref('')
+
+// 监听 hash 变化
+watch(() => route.hash, (newHash) => {
+    currentHash.value = newHash
+}, { immediate: true })
+
+// 检查链接是否激活
+const isActive = (href: string) => {
+    return currentHash.value === href
+}
+
+const footerSections = [
+    {
+        title: '关于锦泽',
+        links: [
+            { text: '关于我们', href: '/about' },
+            { text: '企业文化', href: '/culture' },
+            { text: '发展历程', href: '/history' },
+            { text: '核心优势', href: '/advantage' },
+        ],
+    },
+    {
+        title: '核心产品',
+        links: [
+            { text: '智慧康养床', href: '/product/bed' },
+            { text: '管家机器人', href: '/product/robot' },
+            { text: '运营管理系统', href: '/product/system' },
+            { text: '智慧监控平台', href: '/product/monitor' },
+        ],
+    },
+    {
+        title: '硬件设施',
+        links: [
+            { text: '康复设备', href: '/facility/rehab' },
+            { text: '服务机器人', href: '/facility/robot' },
+            { text: '采集传感器', href: '/facility/sensor' },
+        ],
+    },
+    {
+        title: '市场应用',
+        links: [
+            { text: '医疗机构合作', href: '/market/hospital' },
+            { text: '科研机构合作', href: '/market/research' },
+            { text: '企业合作伙伴', href: '/market/enterprise' },
+        ],
+    },
+]
+</script>
+
+<template>
+    <div class="w-screen h-screen overflow-x-hidden">
+        <header class="sticky top-0 z-99 md:block hidden">
+            <nav class="flex items-center justify-center bg-white py-[1rem]">
+                <NuxtLink to="/" class="flex items-center h-[2.25rem]">
+                    <img src="/images/logoL.png" alt="logo" class="h-[2.25rem] object-cover" />
+                </NuxtLink>
+                <div class="flex items-center justify-center gap-6 text-[#9c9d9d] gap-[3.75rem] mx-[1.875rem]">
+                    <NuxtLink 
+                        :to="item.href" 
+                        :class="[
+                            'hover:text-black',
+                            isActive(item.href) ? 'text-[#18bbb8] font-medium border-b border-[#18bbb8] border-solid' : ''
+                        ]"
+                        :external="true"
+                        v-for="item in submenus" 
+                        :key="item.href">
+                        {{ item.name }}
+                    </NuxtLink>
+                </div>
+                <div
+                    class="rounded-full w-[10rem] h-[2.25rem] border border-[#18bbb8] border-solid flex items-center justify-center">
+                    <Phone :size="20" color="#18bbb8" class="mr-2" />
+                    <a href="tel:400-621-1003">400-621-1003</a>
+                </div>
+            </nav>
+        </header>
+        <slot />
+        <footer class="grid grid-cols-1 md:flex justify-items-center md:justify-items-start bg-[#1a222a] px-[2.5%] pt-[70px] pb-[20px] justify-between" id="about">
+            <img src="/images/logo.png" alt="logo" srcset="" class="h-[49px]">
+            <div class="max-w-6xl grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-4 flex flex-col items-start">
+                <section v-for="section in footerSections" :key="section.title" class="space-y-3 flex flex-col items-center">
+                    <h2 class="text-lg font-semibold text-[#18bbb8]">{{ section.title }}</h2>
+                    <ul class="space-y-2 text-[#9c9d9d] flex flex-col justify-center">
+                        <li v-for="link in section.links" :key="link.href">
+                            <a class="hover:text-blue-600">{{ link.text }}</a>
+                        </li>
+                    </ul>
+                </section>
+            </div>
+
+            <section class="max-w-6xl flex flex-col items-center justify-center">
+                <h2 class="text-2xl font-semibold text-[#18bbb8]">联系我们</h2>
+                <div class="space-y-4 mt-4 flex flex-col items-center justify-center">
+                    <!-- 二维码部分 -->
+                    <div class="flex space-x-4">
+                        <div class="w-24 h-24">
+                            <img src="/images/qrcode1.png" alt="二维码 1" class="w-full h-full object-contain">
+                        </div>
+                        <div class="w-24 h-24">
+                            <img src="/images/qecode2.png" alt="二维码 2" class="w-full h-full object-contain">
+                        </div>
+                    </div>
+                    <!-- 联系信息 -->
+                    <div class="text-[#9c9d9d] space-y-2">
+                        <p><strong>电话：</strong>400-621-1003</p>
+                        <p><strong>邮箱：</strong><a href="mailto:1534747238@QQ.COM"
+                                class="hover:underline">1534747238@QQ.COM</a></p>
+                        <p><strong>地址：</strong>上海杨浦区政学路88号5号楼1003室</p>
+                    </div>
+                </div>
+            </section>
+
+        </footer>
+    </div>
+</template>
+
+<style lang="scss" scoped></style>

app/pages/index.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+
+const carouselImgs = ["/images/main/container1.png", "/images/main/container2.png"]
+
+const painPoints = [
+    {
+        id: 1,
+        image: "/images/main/td1.png",
+        title: "医养结合不完善",
+        description: "医养结合存在行业壁垒、职责交叉等情况难以实施"
+    },
+    {
+        id: 2,
+        image: "/images/main/td2.png",
+        title: "需求服务不匹配",
+        description: "面对多样化的养老服务需求，无法做到精准匹配"
+    },
+    {
+        id: 3,
+        image: "/images/main/td3.png",
+        title: "失能失智护理难",
+        description: "失能失智的老人需要长期照料，看护任务重"
+    },
+    {
+        id: 4,
+        image: "/images/main/td4.png",
+        title: "专业护工缺口大",
+        description: "行业迫切需要专业医养结合的复合型人才"
+    }
+]
+
+const resolveImgs = [
+    { img: '/images/main/fa1.png' },
+    { img: '/images/main/fa2.png' },
+    { img: '/images/main/fa3.png' },
+]
+
+const coreProducts = [
+    { img: '/images/main/cp1.png' },
+    { img: '/images/main/cp2.png' },
+    { img: '/images/main/cp3.png' },
+    { img: '/images/main/cp4.png' },
+]
+
+const services = [
+    { id: 1, title: '需求多元化', content: '涵盖健康管理、日间照料、康复护理、文娱活动，为老年人提供全面而安心的生活保障', img: '/images/main/yl1.png' },
+    { id: 2, title: '服务差异化', content: '提供个性化健康管理、定制化护理方案和多样化活动选择，满足不同老年人的独特需求', img: '/images/main/yl2.png' },
+    { id: 3, title: '供给精准化', content: '通过数据分析提供个性化健康管理、精准护理和专业支持，更好地满足老年人的具体需求', img: '/images/main/yl3.png' },
+]
+
+const schools = [
+    { img: '/images/main/xx1.png' },
+    { img: '/images/main/xx2.png' },
+    { img: '/images/main/xx3.png' },
+    { img: '/images/main/xx4.png' },
+    { img: '/images/main/xx5.png' },
+    { img: '/images/main/xx6.png' },
+    { img: '/images/main/xx7.png' },
+    { img: '/images/main/xx8.png' },
+]
+</script>
+
+<template>
+    <div class="w-full bg-[#f6fafd]">
+        <el-carousel height="auto" autoplay motion-blur arrow="never" class="w-full aspect-[571/171]">
+            <el-carousel-item v-for="item in carouselImgs" :key="item" class="min-h-max">
+                <NuxtImg width="1713" height="513" :src="item" alt="cover" class="object-cover" preload loading="eager"
+                    format="webp" quality="80" fetchpriority="high" />
+            </el-carousel-item>
+        </el-carousel>
+        <h1 class="hidden">锦泽健康</h1>
+        <section class="events p-6" id="pain">
+            <header class="mb-8 flex flex-col items-center">
+                <h2 class="text-3xl font-semibold text-gray-900 pt-16">行业痛点</h2>
+                <div class="h-1 w-16 bg-blue-500 mt-2"></div>
+            </header>
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
+                <article v-for="point in painPoints" :key="point.id" class="text-center bg-white pb-4 rounded-2">
+                    <figure class="mb-4">
+                        <NuxtImg width="302" height="302" :src="point.image" :alt="point.title" loading="lazy"
+                            format="webp" quality="80"
+                            class="mx-auto max-w-full h-auto object-contain hover:scale-[1.05] hover:transform-gpu transition duration-300 ease-in-out" />
+                    </figure>
+                    <h3 class="text-xl font-semibold text-gray-800">{{ point.title }}</h3>
+                    <p class="text-gray-700">{{ point.description }}</p>
+                </article>
+            </div>
+        </section>
+
+        <section class="events p-6" id="solution">
+            <header class="mb-8 flex flex-col items-center">
+                <h2 class="text-3xl font-semibold text-gray-900 pt-16">解决方案</h2>
+                <div class="h-1 w-16 bg-blue-500 mt-2"></div>
+            </header>
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                <NuxtImg width="533" height="406" :src="value.img" alt="" v-for="(value, index) in resolveImgs"
+                    :key="index" loading="lazy" format="webp" quality="80"
+                    class="hover:scale-[1.05] hover:transform-gpu transition duration-300 ease-in-out" />
+            </div>
+        </section>
+
+        <section class="events p-6" id="product">
+            <header class="mb-8 flex flex-col items-center">
+                <h2 class="text-3xl font-semibold text-gray-900 pt-16">核心产品</h2>
+                <div class="h-1 w-16 bg-blue-500 mt-2"></div>
+            </header>
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                <NuxtImg :src="value.img" alt="" v-for="(value, index) in coreProducts" width="816" height="512"
+                    :key="index" loading="lazy" format="webp" quality="80"
+                    class="hover:scale-[1.05] hover:transform-gpu transition duration-300 ease-in-out" />
+            </div>
+        </section>
+        <NuxtImg src="/images/main/bac2.png" :placeholder="[30, 20]" width="1920" height="444" loading="lazy"
+            alt="background-2" class="w-full object-cover" />
+
+        <section class="events p-6" id="elderly">
+            <header class="mb-8 flex flex-col items-center">
+                <h2 class="text-3xl font-semibold text-gray-900 pt-16">精准养老</h2>
+                <div class="h-1 w-16 bg-blue-500 mt-2"></div>
+            </header>
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                <div v-for="(value, index) in services" :key="index" class="rounded-t-2 bg-white">
+                    <NuxtImg :src="value.img" alt="cover" width="534" height="306" format="webp" quality="80"
+                        class="w-full rounded-t-2 hover:scale-[1.05] hover:transform-gpu transition duration-300 ease-in-out"
+                        loading="lazy" />
+                    <div class="p-5">
+                        <h2 class="text-5 mb-2">{{ value.title }}</h2>
+                        <p class="text-[#666] mb-5">{{ value.content }}</p>
+                        <NuxtLink
+                            class="rounded-full border-1 border-solid border-[#18bbb8] py-1 px-2 text-[#18bbb8] cursor-pointer"
+                            to="/">了解更多</NuxtLink>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section class="events p-6" id="partner">
+            <header class="mb-8 flex flex-col items-center">
+                <h2 class="text-3xl font-semibold text-gray-900 pt-16">合作伙伴</h2>
+                <div class="h-1 w-16 bg-blue-500 mt-2"></div>
+            </header>
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
+                <NuxtImg :src="value.img" width="392" height="107" alt="" v-for="(value, index) in schools" :key="index"
+                    format="webp" quality="80" loading="lazy"
+                    class="hover:scale-[1.05] hover:transform-gpu transition duration-300 ease-in-out" />
+            </div>
+        </section>
+    </div>
+</template>
+
+<style lang="scss" scoped></style>

nuxt.config.ts

@@ -0,0 +1,50 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  app: {
+    head: {
+      title: '锦泽健康',
+      htmlAttrs: {
+        lang: 'zh',
+      },
+      charset: 'utf-8',
+      viewport: 'width=device-width, initial-scale=1, maximum-scale=5',
+      meta: [
+        { name: 'description', content: '锦泽健康是一家提供多元化养老服务的机构' }
+      ],
+    },
+  },
+  ssr: false,
+  
+  compatibilityDate: '2025-07-15',
+  devtools: { enabled: true },
+  modules:['@unocss/nuxt', '@nuxt/image', '@element-plus/nuxt'],
+  image: {
+    quality: 80,
+    // CSR/静态站点：关闭转换，直接输出原始链接，避免依赖 /_ipx
+    provider: 'none',
+    format: ['webp']
+  },
+  nitro: {
+    compressPublicAssets: {
+      gzip: true,
+      brotli: true,
+    },
+  },
+  elementPlus: {},
+  build: {
+    transpile: ['sharp'],
+  },
+  experimental: {
+    // 禁用 _payload.json 提取，避免 CSR 下额外请求
+    payloadExtraction: false,
+  },
+  // ssr 中启用
+  // routeRules:{
+  //   '/': { prerender: true },
+  // },
+  // hooks: {
+  //   'prerender:routes' ({ routes }) {
+  //     routes.clear()
+  //   }
+  // },
+})

package.json

@@ -0,0 +1,35 @@
+{
+  "name": "nuxt-app",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@element-plus/icons-vue": "^2.3.2",
+    "@element-plus/nuxt": "1.1.4",
+    "@nuxt/image": "^1.11.0",
+    "element-plus": "^2.11.2",
+    "lucide-vue-next": "^0.542.0",
+    "nuxt": "^4.1.0",
+    "vue": "^3.5.20",
+    "vue-router": "^4.5.1"
+  },
+  "packageManager": "pnpm@10.15.1+sha512.34e538c329b5553014ca8e8f4535997f96180a1d0f614339357449935350d924e22f8614682191264ec33d1462ac21561aff97f6bb18065351c162c7e8f6de67",
+  "devDependencies": {
+    "@unocss/nuxt": "^66.5.0",
+    "@unocss/preset-rem-to-px": "^66.5.0",
+    "@unocss/preset-wind4": "^66.5.0",
+    "sass-embedded": "^1.92.1",
+    "unocss": "^66.5.0"
+  },
+  "pnpm": {
+    "overrides": {
+      "ipx": "^3.0.0"
+    }
+  }
+}

pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+ignoredBuiltDependencies:
+  - sharp

public/robots.txt

@@ -0,0 +1,2 @@
+User-Agent: *
+Disallow:

tsconfig.json

@@ -0,0 +1,18 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "files": [],
+  "references": [
+    {
+      "path": "./.nuxt/tsconfig.app.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.server.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.shared.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.node.json"
+    }
+  ]
+}

uno.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig, presetWind4 } from 'unocss'
+import presetRemToPx from '@unocss/preset-rem-to-px'
+
+export default defineConfig({
+    presets: [
+        presetRemToPx({
+            baseFontSize: 16
+        }),
+        presetWind4({
+            preflights: { 
+              theme: 'on-demand', 
+            }, 
+          }),
+      ],
+})