327 lines
13 KiB
Vue
327 lines
13 KiB
Vue
<script setup>
|
||
import { ref } from 'vue'
|
||
import { ArrowRight, BadgeCheck, Check, CircleDollarSign, ClipboardCheck, Headphones, MessageCircle, Play, ShieldCheck, Star, Video } from 'lucide-vue-next'
|
||
import { caseStudies, faqs, pricingPlans, productFeatures, siteConfig } from '@/site.config'
|
||
import AnimatedContent from '@/components/vue-bits/AnimatedContent.vue'
|
||
import DecryptedText from '@/components/vue-bits/DecryptedText.vue'
|
||
import Magnet from '@/components/vue-bits/Magnet.vue'
|
||
|
||
const openFaq = ref(0)
|
||
|
||
const users = [
|
||
'医疗集团信息化负责人',
|
||
'医共体运营管理者',
|
||
'慢病中心与专科门诊',
|
||
'互联网医院项目团队'
|
||
]
|
||
|
||
const reviews = [
|
||
{
|
||
name: '林主任',
|
||
role: '县域医共体信息中心',
|
||
text: '上线后跨院区协作终于有了统一任务流，基层医生和总院专家都能在同一视图处理患者。'
|
||
},
|
||
{
|
||
name: '周女士',
|
||
role: '连锁诊所运营负责人',
|
||
text: '随访、复诊和宣教不再分散在不同工具里，护士团队的工作量和服务质量都更可控。'
|
||
},
|
||
{
|
||
name: '赵医生',
|
||
role: '慢病中心负责人',
|
||
text: '风险预警和患者画像帮助我们更早发现异常，医生不再只靠经验筛选重点患者。'
|
||
}
|
||
]
|
||
</script>
|
||
|
||
<template>
|
||
<main class="product-page">
|
||
<section class="product-hero section-pad">
|
||
<div class="mx-auto grid max-w-7xl items-center gap-12 px-5 pt-24 md:grid-cols-[0.95fr_1.05fr] md:px-8">
|
||
<AnimatedContent :distance="64" :duration="0.95" class-name="product-hero-copy">
|
||
<div class="eyebrow">
|
||
<BadgeCheck :size="16" aria-hidden="true" />
|
||
企业级医疗 SaaS 产品
|
||
</div>
|
||
<h1 class="product-hero-title">
|
||
<span>{{ siteConfig.brand.name }}</span>
|
||
<span>云协同平台</span>
|
||
</h1>
|
||
<p class="product-hero-copytext">
|
||
<DecryptedText
|
||
text="一套连接患者、医生、机构和运营管理的智慧医疗工作台。"
|
||
animate-on="view"
|
||
reveal-direction="center"
|
||
:speed="32"
|
||
:max-iterations="10"
|
||
encrypted-class-name="decrypted-ghost"
|
||
class-name="decrypted-final"
|
||
/>
|
||
<span> 让医疗组织拥有更稳定、更高效、更合规的数字化服务能力。</span>
|
||
</p>
|
||
<div class="mt-8 flex flex-col gap-3 sm:flex-row">
|
||
<Magnet :padding="72" :magnet-strength="5.5">
|
||
<a href="#contact" class="btn-primary">
|
||
免费试用
|
||
<ArrowRight :size="18" aria-hidden="true" />
|
||
</a>
|
||
</Magnet>
|
||
<Magnet :padding="72" :magnet-strength="5.5">
|
||
<a href="#demo" class="btn-secondary">查看演示视频</a>
|
||
</Magnet>
|
||
</div>
|
||
</AnimatedContent>
|
||
|
||
<AnimatedContent :distance="72" direction="horizontal" :reverse="true" :duration="0.95" class-name="product-snapshot-shell">
|
||
<div class="product-snapshot">
|
||
<div class="snapshot-header">
|
||
<span>萧康云医工作台</span>
|
||
<strong>实时运行</strong>
|
||
</div>
|
||
<div class="snapshot-main">
|
||
<aside>
|
||
<span v-for="item in ['患者画像', '协同任务', '风险预警', '运营分析']" :key="item">{{ item }}</span>
|
||
</aside>
|
||
<div class="snapshot-content">
|
||
<div class="snapshot-alert">
|
||
<ShieldCheck :size="20" aria-hidden="true" />
|
||
<span>慢病高风险患者已自动分派给责任医生</span>
|
||
</div>
|
||
<div class="snapshot-cards">
|
||
<div>
|
||
<small>待处理随访</small>
|
||
<strong>246</strong>
|
||
</div>
|
||
<div>
|
||
<small>会诊申请</small>
|
||
<strong>38</strong>
|
||
</div>
|
||
<div>
|
||
<small>质控通过率</small>
|
||
<strong>97.8%</strong>
|
||
</div>
|
||
</div>
|
||
<div class="snapshot-bars" aria-hidden="true">
|
||
<span style="width: 76%"></span>
|
||
<span style="width: 92%"></span>
|
||
<span style="width: 58%"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</AnimatedContent>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="features" class="section-pad pt-8">
|
||
<div class="mx-auto max-w-7xl px-5 md:px-8">
|
||
<AnimatedContent :distance="48" :duration="0.9" class-name="section-heading">
|
||
<span>功能说明</span>
|
||
<h2>从诊疗协同到经营分析，覆盖医疗服务闭环。</h2>
|
||
</AnimatedContent>
|
||
|
||
<div class="mt-10 grid gap-5 md:grid-cols-2">
|
||
<AnimatedContent v-for="(feature, index) in productFeatures" :key="feature.title" :delay="index * 0.08" :distance="52" class-name="feature-reveal">
|
||
<article class="soft-card feature-row">
|
||
<ClipboardCheck :size="26" aria-hidden="true" />
|
||
<div>
|
||
<h3>{{ feature.title }}</h3>
|
||
<p>{{ feature.body }}</p>
|
||
</div>
|
||
</article>
|
||
</AnimatedContent>
|
||
</div>
|
||
|
||
<AnimatedContent class-name="target-users mt-8" :distance="38" :duration="0.75">
|
||
<span>目标用户</span>
|
||
<div>
|
||
<span v-for="user in users" :key="user">{{ user }}</span>
|
||
</div>
|
||
</AnimatedContent>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="demo" class="section-band">
|
||
<div class="mx-auto grid max-w-7xl items-center gap-10 px-5 md:grid-cols-[1.08fr_0.92fr] md:px-8">
|
||
<AnimatedContent :distance="62" :duration="1" class-name="demo-frame-shell">
|
||
<div class="demo-frame">
|
||
<video
|
||
class="demo-video"
|
||
controls
|
||
:poster="siteConfig.hero.video.poster"
|
||
>
|
||
<source :src="siteConfig.hero.video.src" type="video/mp4">
|
||
</video>
|
||
<div class="demo-play" aria-hidden="true">
|
||
<Play :size="28" fill="currentColor" />
|
||
</div>
|
||
</div>
|
||
</AnimatedContent>
|
||
|
||
<AnimatedContent :distance="56" direction="horizontal" :reverse="true" :duration="0.95" class-name="demo-copy-shell">
|
||
<div>
|
||
<div class="section-heading align-left">
|
||
<span>演示视频</span>
|
||
<h2>用 90 秒看清医生、护士和管理者如何协同。</h2>
|
||
</div>
|
||
<p class="mt-5 text-lg leading-8 text-muted">
|
||
演示覆盖患者建档、风险预警、复诊任务、随访触达和运营看板。视频源可在配置文件中替换为企业真实素材。
|
||
</p>
|
||
<div class="mt-6 grid gap-3">
|
||
<div class="check-line">
|
||
<Video :size="18" aria-hidden="true" />
|
||
支持产品界面录屏、品牌宣传片或客户案例视频
|
||
</div>
|
||
<div class="check-line">
|
||
<Check :size="18" aria-hidden="true" />
|
||
首页同样支持动效背景与视频背景两种配置
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</AnimatedContent>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section-pad">
|
||
<div class="mx-auto max-w-7xl px-5 md:px-8">
|
||
<AnimatedContent :distance="48" :duration="0.9" class-name="section-heading">
|
||
<span>客户案例</span>
|
||
<h2>已经在多机构协同、慢病管理和互联网医院场景中验证。</h2>
|
||
</AnimatedContent>
|
||
|
||
<div class="mt-10 grid gap-5 lg:grid-cols-3">
|
||
<AnimatedContent v-for="(item, index) in caseStudies" :key="item.client" :delay="index * 0.08" :distance="52" class-name="case-reveal">
|
||
<article class="case-card">
|
||
<span>{{ item.client }}</span>
|
||
<h3>{{ item.result }}</h3>
|
||
<p>{{ item.quote }}</p>
|
||
</article>
|
||
</AnimatedContent>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="pricing" class="section-band">
|
||
<div class="mx-auto max-w-7xl px-5 md:px-8">
|
||
<AnimatedContent :distance="48" :duration="0.9" class-name="section-heading">
|
||
<span>定价计划</span>
|
||
<h2>按机构规模和部署要求选择服务方案。</h2>
|
||
</AnimatedContent>
|
||
|
||
<div class="mt-10 grid gap-5 lg:grid-cols-3">
|
||
<AnimatedContent v-for="(plan, index) in pricingPlans" :key="plan.name" :delay="index * 0.08" :distance="52" class-name="pricing-reveal">
|
||
<article
|
||
class="pricing-card"
|
||
:class="{ 'pricing-featured': plan.highlighted }"
|
||
>
|
||
<div class="pricing-head">
|
||
<span>{{ plan.name }}</span>
|
||
<CircleDollarSign :size="24" aria-hidden="true" />
|
||
</div>
|
||
<div class="mt-5">
|
||
<strong>{{ plan.price }}</strong>
|
||
<small>{{ plan.unit }}</small>
|
||
</div>
|
||
<p>{{ plan.description }}</p>
|
||
<ul>
|
||
<li v-for="feature in plan.features" :key="feature">
|
||
<Check :size="17" aria-hidden="true" />
|
||
{{ feature }}
|
||
</li>
|
||
</ul>
|
||
<a href="#contact" class="pricing-button">{{ plan.highlighted ? '预约方案顾问' : '开始咨询' }}</a>
|
||
</article>
|
||
</AnimatedContent>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section-pad">
|
||
<div class="mx-auto max-w-7xl px-5 md:px-8">
|
||
<AnimatedContent :distance="48" :duration="0.9" class-name="section-heading">
|
||
<span>用户评论与社会证明</span>
|
||
<h2>来自真实医疗场景的反馈。</h2>
|
||
</AnimatedContent>
|
||
|
||
<div class="mt-10 grid gap-5 md:grid-cols-3">
|
||
<AnimatedContent v-for="(review, index) in reviews" :key="review.name" :delay="index * 0.08" :distance="52" class-name="review-reveal">
|
||
<article class="review-card">
|
||
<div class="stars" aria-label="五星评价">
|
||
<Star v-for="star in 5" :key="star" :size="16" fill="currentColor" aria-hidden="true" />
|
||
</div>
|
||
<p>{{ review.text }}</p>
|
||
<div>
|
||
<strong>{{ review.name }}</strong>
|
||
<span>{{ review.role }}</span>
|
||
</div>
|
||
</article>
|
||
</AnimatedContent>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="faq" class="section-band">
|
||
<div class="mx-auto grid max-w-7xl gap-10 px-5 md:grid-cols-[0.85fr_1.15fr] md:px-8">
|
||
<AnimatedContent :distance="48" :duration="0.9" class-name="section-heading align-left">
|
||
<span>FAQ</span>
|
||
<h2>常见问题</h2>
|
||
</AnimatedContent>
|
||
|
||
<AnimatedContent class-name="faq-list" :distance="54" direction="horizontal" :reverse="true" :duration="0.9">
|
||
<button
|
||
v-for="(item, index) in faqs"
|
||
:key="item.q"
|
||
type="button"
|
||
class="faq-item"
|
||
:aria-expanded="openFaq === index"
|
||
@click="openFaq = openFaq === index ? -1 : index"
|
||
>
|
||
<span>{{ item.q }}</span>
|
||
<p v-if="openFaq === index">{{ item.a }}</p>
|
||
</button>
|
||
</AnimatedContent>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="contact" class="section-pad">
|
||
<div class="mx-auto grid max-w-7xl gap-8 px-5 md:grid-cols-[0.9fr_1.1fr] md:px-8">
|
||
<AnimatedContent :distance="56" :duration="0.95" class-name="contact-panel">
|
||
<Headphones :size="30" aria-hidden="true" />
|
||
<h2>联系萧康云医</h2>
|
||
<p>留下需求后，产品顾问会在 1 个工作日内联系你，也可以直接通过电话或邮件咨询。</p>
|
||
<div class="contact-lines">
|
||
<span>{{ siteConfig.contact.phone }}</span>
|
||
<span>{{ siteConfig.contact.email }}</span>
|
||
<span>{{ siteConfig.contact.address }}</span>
|
||
</div>
|
||
</AnimatedContent>
|
||
|
||
<AnimatedContent :distance="56" direction="horizontal" :reverse="true" :duration="0.95" class-name="contact-form-shell">
|
||
<form class="contact-form" aria-label="预约演示表单">
|
||
<label>
|
||
姓名
|
||
<input type="text" placeholder="请输入姓名">
|
||
</label>
|
||
<label>
|
||
机构名称
|
||
<input type="text" placeholder="医院、集团或诊所名称">
|
||
</label>
|
||
<label>
|
||
联系方式
|
||
<input type="tel" placeholder="手机号或邮箱">
|
||
</label>
|
||
<label>
|
||
关注场景
|
||
<textarea rows="4" placeholder="例如医共体协同、慢病随访、互联网医院建设"></textarea>
|
||
</label>
|
||
<button type="button" class="btn-primary justify-center">
|
||
提交预约
|
||
<MessageCircle :size="18" aria-hidden="true" />
|
||
</button>
|
||
</form>
|
||
</AnimatedContent>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</template>
|