75 lines
2.1 KiB
TypeScript
75 lines
2.1 KiB
TypeScript
export function Header() {
|
||
return (
|
||
<header className="bg-gradient-to-r from-primary to-primary-400 p-6 rounded-t-xl">
|
||
<div className="flex flex-col space-y-6">
|
||
{/* 主标题区域 */}
|
||
<div>
|
||
<h1 className="text-3xl font-bold tracking-wider text-white">
|
||
我发出的信件
|
||
</h1>
|
||
<p className="mt-2 text-blue-100 text-lg">
|
||
清晰记录 • 实时跟踪 • 高效沟通
|
||
</p>
|
||
</div>
|
||
|
||
{/* 服务特点说明 */}
|
||
<div className="flex flex-wrap gap-6 text-sm text-white">
|
||
<div className="flex items-center gap-2">
|
||
<svg
|
||
className="w-5 h-5"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24">
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth="2"
|
||
d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
|
||
/>
|
||
</svg>
|
||
<span>清晰记录发出的信件</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<svg
|
||
className="w-5 h-5"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24">
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth="2"
|
||
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
|
||
/>
|
||
</svg>
|
||
<span>实时跟踪信件状态</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<svg
|
||
className="w-5 h-5"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24">
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth="2"
|
||
d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"
|
||
/>
|
||
</svg>
|
||
<span>高效沟通信件进展</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 服务宗旨说明 */}
|
||
<div className="text-sm text-blue-100 border-t border-blue-400/30 pt-4">
|
||
<p className="leading-relaxed">
|
||
我们确保您能够清晰记录发出的信件，
|
||
实时跟踪信件状态，并通过高效沟通机制，确保信件处理顺利进行。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
);
|
||
}
|