feat: 调整连接
parent
f125663d4e
commit
a9e4bef63b
|
|
@ -1,71 +1,67 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
const carouselImgs = [
|
||||||
const carouselImgs = ["/images/main/container1.png", "/images/main/container2.png"]
|
{ img: "/images/main/container1.png", url: "https://largescreen.jinzejk.com/#/index" },
|
||||||
|
{ img: "/images/main/container2.png", url: "https://personscreen.jinzejk.com/#/index" },
|
||||||
|
];
|
||||||
|
|
||||||
const painPoints = [
|
const painPoints = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
image: "/images/main/td1.png",
|
image: "/images/main/td1.png",
|
||||||
title: "医养结合不完善",
|
title: "医养结合不完善",
|
||||||
description: "医养结合存在行业壁垒、职责交叉等情况难以实施"
|
description: "医养结合存在行业壁垒、职责交叉等情况难以实施",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
image: "/images/main/td2.png",
|
image: "/images/main/td2.png",
|
||||||
title: "需求服务不匹配",
|
title: "需求服务不匹配",
|
||||||
description: "面对多样化的养老服务需求,无法做到精准匹配"
|
description: "面对多样化的养老服务需求,无法做到精准匹配",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 3,
|
id: 3,
|
||||||
image: "/images/main/td3.png",
|
image: "/images/main/td3.png",
|
||||||
title: "失能失智护理难",
|
title: "失能失智护理难",
|
||||||
description: "失能失智的老人需要长期照料,看护任务重"
|
description: "失能失智的老人需要长期照料,看护任务重",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 4,
|
id: 4,
|
||||||
image: "/images/main/td4.png",
|
image: "/images/main/td4.png",
|
||||||
title: "专业护工缺口大",
|
title: "专业护工缺口大",
|
||||||
description: "行业迫切需要专业医养结合的复合型人才"
|
description: "行业迫切需要专业医养结合的复合型人才",
|
||||||
}
|
},
|
||||||
]
|
];
|
||||||
|
|
||||||
const resolveImgs = [
|
const resolveImgs = [{ img: "/images/main/fa1.png" }, { img: "/images/main/fa2.png" }, { img: "/images/main/fa3.png" }];
|
||||||
{ img: '/images/main/fa1.png' },
|
|
||||||
{ img: '/images/main/fa2.png' },
|
|
||||||
{ img: '/images/main/fa3.png' },
|
|
||||||
]
|
|
||||||
|
|
||||||
const coreProducts = [
|
const coreProducts = [{ img: "/images/main/cp1.png" }, { img: "/images/main/cp2.png" }, { img: "/images/main/cp3.png" }, { img: "/images/main/cp4.png" }];
|
||||||
{ img: '/images/main/cp1.png' },
|
|
||||||
{ img: '/images/main/cp2.png' },
|
|
||||||
{ img: '/images/main/cp3.png' },
|
|
||||||
{ img: '/images/main/cp4.png' },
|
|
||||||
]
|
|
||||||
|
|
||||||
const services = [
|
const services = [
|
||||||
{ id: 1, title: '需求多元化', content: '涵盖健康管理、日间照料、康复护理、文娱活动,为老年人提供全面而安心的生活保障', img: '/images/main/yl1.png' },
|
{ id: 1, title: "需求多元化", content: "涵盖健康管理、日间照料、康复护理、文娱活动,为老年人提供全面而安心的生活保障", img: "/images/main/yl1.png" },
|
||||||
{ id: 2, title: '服务差异化', content: '提供个性化健康管理、定制化护理方案和多样化活动选择,满足不同老年人的独特需求', img: '/images/main/yl2.png' },
|
{ id: 2, title: "服务差异化", content: "提供个性化健康管理、定制化护理方案和多样化活动选择,满足不同老年人的独特需求", img: "/images/main/yl2.png" },
|
||||||
{ id: 3, title: '供给精准化', content: '通过数据分析提供个性化健康管理、精准护理和专业支持,更好地满足老年人的具体需求', img: '/images/main/yl3.png' },
|
{ id: 3, title: "供给精准化", content: "通过数据分析提供个性化健康管理、精准护理和专业支持,更好地满足老年人的具体需求", img: "/images/main/yl3.png" },
|
||||||
]
|
];
|
||||||
|
|
||||||
const schools = [
|
const schools = [
|
||||||
{ img: '/images/main/xx1.png' },
|
{ img: "/images/main/xx1.png" },
|
||||||
{ img: '/images/main/xx2.png' },
|
{ img: "/images/main/xx2.png" },
|
||||||
{ img: '/images/main/xx3.png' },
|
{ img: "/images/main/xx3.png" },
|
||||||
{ img: '/images/main/xx4.png' },
|
{ img: "/images/main/xx4.png" },
|
||||||
{ img: '/images/main/xx5.png' },
|
{ img: "/images/main/xx5.png" },
|
||||||
{ img: '/images/main/xx6.png' },
|
{ img: "/images/main/xx6.png" },
|
||||||
{ img: '/images/main/xx7.png' },
|
{ img: "/images/main/xx7.png" },
|
||||||
{ img: '/images/main/xx8.png' },
|
{ img: "/images/main/xx8.png" },
|
||||||
]
|
];
|
||||||
|
|
||||||
|
const toPage = (url: string) => {
|
||||||
|
window.open(url, "_blank");
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="w-full bg-[#f6fafd]">
|
<div class="w-full bg-[#f6fafd]">
|
||||||
<el-carousel height="auto" autoplay motion-blur arrow="never" class="w-full aspect-[571/171]">
|
<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">
|
<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"
|
<NuxtImg width="100%" height="513" :src="item.img" alt="cover" class="object-cover w-full" preload loading="eager" format="webp" quality="80" fetchpriority="high" @click="toPage(item.url)" />
|
||||||
format="webp" quality="80" fetchpriority="high" />
|
|
||||||
</el-carousel-item>
|
</el-carousel-item>
|
||||||
</el-carousel>
|
</el-carousel>
|
||||||
<h1 class="hidden">锦泽健康</h1>
|
<h1 class="hidden">锦泽健康</h1>
|
||||||
|
|
@ -77,8 +73,14 @@ const schools = [
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
<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">
|
<article v-for="point in painPoints" :key="point.id" class="text-center bg-white pb-4 rounded-2">
|
||||||
<figure class="mb-4">
|
<figure class="mb-4">
|
||||||
<NuxtImg width="302" height="302" :src="point.image" :alt="point.title" loading="lazy"
|
<NuxtImg
|
||||||
format="webp" quality="80"
|
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" />
|
class="mx-auto max-w-full h-auto object-contain hover:scale-[1.05] hover:transform-gpu transition duration-300 ease-in-out" />
|
||||||
</figure>
|
</figure>
|
||||||
<h3 class="text-xl font-semibold text-gray-800">{{ point.title }}</h3>
|
<h3 class="text-xl font-semibold text-gray-800">{{ point.title }}</h3>
|
||||||
|
|
@ -93,8 +95,16 @@ const schools = [
|
||||||
<div class="h-1 w-16 bg-blue-500 mt-2"></div>
|
<div class="h-1 w-16 bg-blue-500 mt-2"></div>
|
||||||
</header>
|
</header>
|
||||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
<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"
|
<NuxtImg
|
||||||
:key="index" loading="lazy" format="webp" quality="80"
|
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" />
|
class="hover:scale-[1.05] hover:transform-gpu transition duration-300 ease-in-out" />
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
@ -105,13 +115,20 @@ const schools = [
|
||||||
<div class="h-1 w-16 bg-blue-500 mt-2"></div>
|
<div class="h-1 w-16 bg-blue-500 mt-2"></div>
|
||||||
</header>
|
</header>
|
||||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
<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"
|
<NuxtImg
|
||||||
:key="index" loading="lazy" format="webp" quality="80"
|
:src="value.img"
|
||||||
|
alt=""
|
||||||
|
v-for="(value, index) in coreProducts"
|
||||||
|
width="100%"
|
||||||
|
height="512"
|
||||||
|
:key="index"
|
||||||
|
loading="lazy"
|
||||||
|
format="webp"
|
||||||
|
quality="80"
|
||||||
class="hover:scale-[1.05] hover:transform-gpu transition duration-300 ease-in-out" />
|
class="hover:scale-[1.05] hover:transform-gpu transition duration-300 ease-in-out" />
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<NuxtImg src="/images/main/bac2.png" :placeholder="[30, 20]" width="1920" height="444" loading="lazy"
|
<NuxtImg src="/images/main/bac2.png" :placeholder="[30, 20]" width="1920" height="444" loading="lazy" alt="background-2" class="w-full object-cover" />
|
||||||
alt="background-2" class="w-full object-cover" />
|
|
||||||
|
|
||||||
<section class="events p-6" id="elderly">
|
<section class="events p-6" id="elderly">
|
||||||
<header class="mb-8 flex flex-col items-center">
|
<header class="mb-8 flex flex-col items-center">
|
||||||
|
|
@ -120,15 +137,11 @@ const schools = [
|
||||||
</header>
|
</header>
|
||||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
<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">
|
<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"
|
<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" />
|
||||||
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">
|
<div class="p-5">
|
||||||
<h2 class="text-5 mb-2">{{ value.title }}</h2>
|
<h2 class="text-5 mb-2">{{ value.title }}</h2>
|
||||||
<p class="text-[#666] mb-5">{{ value.content }}</p>
|
<p class="text-[#666] mb-5">{{ value.content }}</p>
|
||||||
<NuxtLink
|
<NuxtLink class="rounded-full border-1 border-solid border-[#18bbb8] py-1 px-2 text-[#18bbb8] cursor-pointer" to="/">了解更多</NuxtLink>
|
||||||
class="rounded-full border-1 border-solid border-[#18bbb8] py-1 px-2 text-[#18bbb8] cursor-pointer"
|
|
||||||
to="/">了解更多</NuxtLink>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -140,9 +153,7 @@ const schools = [
|
||||||
<div class="h-1 w-16 bg-blue-500 mt-2"></div>
|
<div class="h-1 w-16 bg-blue-500 mt-2"></div>
|
||||||
</header>
|
</header>
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
<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"
|
<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" />
|
||||||
format="webp" quality="80" loading="lazy"
|
|
||||||
class="hover:scale-[1.05] hover:transform-gpu transition duration-300 ease-in-out" />
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue