72 lines
1.8 KiB
TypeScript
72 lines
1.8 KiB
TypeScript
interface ExperimentTitleProps {
|
|
title: string;
|
|
description: string;
|
|
}
|
|
|
|
export default function ExperimentTitle({
|
|
title,
|
|
description,
|
|
}: ExperimentTitleProps) {
|
|
return (
|
|
<>
|
|
{/* 标题 */}
|
|
<div className="w-full relative pb-20">
|
|
{/* 主标题容器 */}
|
|
<div className="flex items-start gap-6">
|
|
{/* 主标题 */}
|
|
<div className="bg-white border-4 border-blue-500 rounded-2xl px-10 py-3 shadow-md">
|
|
<h1 className="text-3xl font-bold text-blue-400 italic tracking-wide">
|
|
{title}
|
|
</h1>
|
|
</div>
|
|
|
|
{/* 副标题 */}
|
|
<div className="flex-1 relative pt-6">
|
|
<p className="text-gray-600 text-3xl relative z-10">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 使用 SVG 绘制更精确的装饰线 */}
|
|
<svg
|
|
className="absolute top-14 w-full h-20"
|
|
viewBox="0 0 1400 60"
|
|
preserveAspectRatio="none"
|
|
>
|
|
{/* 左侧水平线 */}
|
|
<line
|
|
x1="10"
|
|
y1="30"
|
|
x2="150"
|
|
y2="30"
|
|
stroke="#3b82f6"
|
|
strokeWidth="3"
|
|
strokeLinecap="round"
|
|
/>
|
|
{/* 斜线（从左到右，向下倾斜）*/}
|
|
<line
|
|
x1="150"
|
|
y1="30"
|
|
x2="200"
|
|
y2="60"
|
|
stroke="#3b82f6"
|
|
strokeWidth="3"
|
|
strokeLinecap="round"
|
|
/>
|
|
{/* 右侧水平线（与左侧在同一高度）*/}
|
|
<line
|
|
x1="250"
|
|
y1="30"
|
|
x2="1800"
|
|
y2="30"
|
|
stroke="#3b82f6"
|
|
strokeWidth="3"
|
|
strokeLinecap="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|