init

src/components/support/SupportSection.tsx

@@ -0,0 +1,42 @@
+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>
+);
+
+