43 lines
2.1 KiB
TypeScript
43 lines
2.1 KiB
TypeScript
import { Card, CardContent, CardHeader } from '../ui';
|
||
|
||
export const SupportSection = () => (
|
||
<Card>
|
||
<CardHeader>客服咨询 · 圆圆客服台卡</CardHeader>
|
||
<CardContent>
|
||
<div className='grid grid-cols-[1.2fr_1fr] gap-6 items-center'>
|
||
<div className='space-y-3 text-sm text-gray-700'>
|
||
<p>通过「圆圆客服」二维码，客户可获得一站式健康服务：包含体检预约、报告查询、报告解读等。</p>
|
||
<ul className='list-disc ml-5 space-y-1 text-xs text-gray-600'>
|
||
<li>支持体检当天现场扫码添加，绑定客户信息</li>
|
||
<li>扫码后可在线查看体检进度、报告结果</li>
|
||
<li>提供一对一健康咨询与报告解读服务</li>
|
||
</ul>
|
||
<div className='text-xs text-gray-500'>注：实际系统中可上传设计好的「圆圆客服二维码台卡」图片，用于前台展示与打印。</div>
|
||
</div>
|
||
|
||
<div className='h-64 rounded-3xl overflow-hidden shadow-inner flex items-center justify-center bg-gradient-to-b from-[#152749] to-[#c73545]'>
|
||
<div className='flex flex-col items-center gap-3 text-white'>
|
||
<div className='text-[11px] tracking-[0.2em] opacity-80'>CIRCLE HARMONY · 圆和医疗</div>
|
||
<div className='text-sm font-medium'>圆圆客服 · 一站式健康服务</div>
|
||
<div className='w-28 h-28 rounded-full bg-white flex items-center justify-center'>
|
||
<div className='w-20 h-20 rounded-md bg-gray-200 flex items-center justify-center text-[10px] text-gray-500'>
|
||
二维码占位
|
||
</div>
|
||
</div>
|
||
<div className='text-sm font-semibold'>一对一专属服务</div>
|
||
<div className='px-4 py-1.5 rounded-full border border-white/70 text-[11px] flex gap-2'>
|
||
<span>服务预约</span>
|
||
<span>/</span>
|
||
<span>报告查询</span>
|
||
<span>/</span>
|
||
<span>报告解读</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
);
|
||
|
||
|