Spaces:
Running
Running
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>医学发展的三个阶段</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| body { | |
| background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%); | |
| height: 100vh; | |
| overflow: hidden; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| .stage-card { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .stage-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .arrow { | |
| stroke: #9CA3AF; | |
| stroke-width: 3; | |
| marker-end: url(#arrowhead); | |
| } | |
| .icon-container { | |
| transition: all 0.3s ease; | |
| } | |
| .icon-container:hover { | |
| transform: scale(1.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="flex flex-col items-center justify-center p-8"> | |
| <!-- 标题区域 --> | |
| <div class="text-center mb-12 z-10"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">医学发展的三个阶段</h1> | |
| <div class="w-32 h-1 bg-blue-500 mx-auto rounded-full"></div> | |
| </div> | |
| <!-- 信息图容器 --> | |
| <div class="relative w-full max-w-6xl h-[70vh]"> | |
| <svg width="100%" height="100%" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid meet"> | |
| <defs> | |
| <!-- 箭头标记 --> | |
| <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto"> | |
| <polygon points="0 0, 10 3.5, 0 7" fill="#9CA3AF" /> | |
| </marker> | |
| </defs> | |
| <!-- 经验医学阶段 --> | |
| <g transform="translate(300, 300)"> | |
| <rect x="-150" y="-200" width="300" height="400" rx="20" fill="#FEF3C7" class="stage-card" /> | |
| <text x="0" y="-150" text-anchor="middle" fill="#92400E" font-size="28" font-weight="bold">经验医学</text> | |
| <!-- 图标 --> | |
| <g class="icon-container" transform="translate(-50, -80)"> | |
| <circle cx="50" cy="50" r="40" fill="#F59E0B" /> | |
| <text x="50" y="60" text-anchor="middle" fill="white" font-size="30">👨⚕️</text> | |
| </g> | |
| <!-- 描述 --> | |
| <text x="0" y="40" text-anchor="middle" fill="#92400E" font-size="20">以经验为主，依赖医生直觉</text> | |
| <!-- 装饰元素 --> | |
| <g transform="translate(-100, 100)"> | |
| <rect x="0" y="0" width="40" height="50" fill="#FBBF24" rx="5" /> | |
| <rect x="50" y="10" width="40" height="50" fill="#FBBF24" rx="5" /> | |
| <text x="20" y="30" text-anchor="middle" fill="white" font-size="20">📚</text> | |
| <text x="70" y="40" text-anchor="middle" fill="white" font-size="20">📝</text> | |
| </g> | |
| </g> | |
| <!-- 连接箭头1 --> | |
| <line x1="450" y1="540" x2="750" y2="540" class="arrow" /> | |
| <!-- 证据医学阶段 --> | |
| <g transform="translate(960, 300)"> | |
| <rect x="-150" y="-200" width="300" height="400" rx="20" fill="#DBEAFE" class="stage-card" /> | |
| <text x="0" y="-150" text-anchor="middle" fill="#1E40AF" font-size="28" font-weight="bold">证据医学</text> | |
| <!-- 图标 --> | |
| <g class="icon-container" transform="translate(-50, -80)"> | |
| <circle cx="50" cy="50" r="40" fill="#3B82F6" /> | |
| <text x="50" y="65" text-anchor="middle" fill="white" font-size="30">📊</text> | |
| </g> | |
| <!-- 描述 --> | |
| <text x="0" y="40" text-anchor="middle" fill="#1E40AF" font-size="20">以数据为据，循证与规范</text> | |
| <!-- 装饰元素 --> | |
| <g transform="translate(-100, 100)"> | |
| <rect x="0" y="0" width="50" height="30" fill="#60A5FA" rx="5" /> | |
| <rect x="60" y="0" width="50" height="40" fill="#60A5FA" rx="5" /> | |
| <rect x="120" y="0" width="50" height="20" fill="#60A5FA" rx="5" /> | |
| <text x="25" y="22" text-anchor="middle" fill="white" font-size="16">75%</text> | |
| <text x="85" y="27" text-anchor="middle" fill="white" font-size="16">82%</text> | |
| <text x="145" y="17" text-anchor="middle" fill="white" font-size="16">91%</text> | |
| </g> | |
| </g> | |
| <!-- 连接箭头2 --> | |
| <line x1="1110" y1="540" x2="1410" y2="540" class="arrow" /> | |
| <!-- 智能医学阶段 --> | |
| <g transform="translate(1620, 300)"> | |
| <rect x="-150" y="-200" width="300" height="400" rx="20" fill="#D1FAE5" class="stage-card" /> | |
| <text x="0" y="-150" text-anchor="middle" fill="#065F46" font-size="28" font-weight="bold">智能医学</text> | |
| <!-- 图标 --> | |
| <g class="icon-container" transform="translate(-50, -80)"> | |
| <circle cx="50" cy="50" r="40" fill="#10B981" /> | |
| <text x="50" y="65" text-anchor="middle" fill="white" font-size="30">🧠</text> | |
| </g> | |
| <!-- 描述 --> | |
| <text x="0" y="40" text-anchor="middle" fill="#065F46" font-size="20">以智能为核，预测与精准</text> | |
| <!-- 装饰元素 --> | |
| <g transform="translate(-100, 100)"> | |
| <circle cx="20" cy="20" r="15" fill="#34D399" /> | |
| <circle cx="60" cy="20" r="15" fill="#34D399" /> | |
| <circle cx="100" cy="20" r="15" fill="#34D399" /> | |
| <circle cx="140" cy="20" r="15" fill="#34D399" /> | |
| <text x="20" y="27" text-anchor="middle" fill="white" font-size="12">AI</text> | |
| <text x="60" y="27" text-anchor="middle" fill="white" font-size="12">ML</text> | |
| <text x="100" y="27" text-anchor="middle" fill="white" font-size="12">DL</text> | |
| <text x="140" y="27" text-anchor="middle" fill="white" font-size="12">NN</text> | |
| </g> | |
| </g> | |
| </svg> | |
| </div> | |
| <!-- 底部说明 --> | |
| <div class="mt-8 text-center text-gray-600"> | |
| <p class="text-lg">从经验到数据再到智能，医学不断演进以更好地服务人类健康</p> | |
| </div> | |
| <script> | |
| // 初始化Feather图标 | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |