0.7.0.0
This commit is contained in:
+20
-20
@@ -1103,19 +1103,19 @@ export default function TimelinePage() {
|
||||
return (
|
||||
<div className="h-screen bg-background flex flex-col font-sans overflow-hidden">
|
||||
<SiteHeader />
|
||||
<main className="container mx-auto py-8 px-4 md:px-6 flex-1 flex flex-col overflow-hidden">
|
||||
<div className="mb-8 flex-shrink-0">
|
||||
<h1 className="text-3xl font-serif font-bold mb-2">家族历史</h1>
|
||||
<p className="text-muted-foreground">纵览家族发展的时间脉络与迁徙足迹。</p>
|
||||
<main className="container mx-auto py-4 md:py-8 px-3 md:px-6 flex-1 flex flex-col overflow-y-auto overflow-x-hidden">
|
||||
<div className="mb-4 md:mb-8 flex-shrink-0">
|
||||
<h1 className="text-2xl md:text-3xl font-serif font-bold mb-1 md:mb-2">家族历史</h1>
|
||||
<p className="text-sm md:text-base text-muted-foreground">纵览家族发展的时间脉络与迁徙足迹。</p>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="timeline" className="w-full flex-1 flex flex-col overflow-hidden">
|
||||
<TabsList className="mb-6 w-full md:w-auto flex-shrink-0">
|
||||
<TabsTrigger value="timeline" className="flex items-center gap-2">
|
||||
<Clock className="h-4 w-4" /> 时间轴
|
||||
<TabsList className="mb-4 md:mb-6 w-full md:w-auto flex-shrink-0 h-8 md:h-9">
|
||||
<TabsTrigger value="timeline" className="flex items-center gap-1 md:gap-2 text-xs md:text-sm">
|
||||
<Clock className="h-3 w-3 md:h-4 md:w-4" /> 时间轴
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="migration" className="flex items-center gap-2">
|
||||
<MapIcon className="h-4 w-4" /> 迁徙图
|
||||
<TabsTrigger value="migration" className="flex items-center gap-1 md:gap-2 text-xs md:text-sm">
|
||||
<MapIcon className="h-3 w-3 md:h-4 md:w-4" /> 迁徙图
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
@@ -1237,13 +1237,13 @@ export default function TimelinePage() {
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="migration" className="flex-1 overflow-y-auto">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<ChineseCard variant="bamboo" className="shadow-sm">
|
||||
<ChineseCardHeader>
|
||||
<ChineseCardTitle className="font-serif">迁徙记录</ChineseCardTitle>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-8">
|
||||
<ChineseCard variant="bamboo" className="shadow-sm overflow-hidden">
|
||||
<ChineseCardHeader className="px-3 md:px-5">
|
||||
<ChineseCardTitle className="font-serif text-base md:text-lg">迁徙记录</ChineseCardTitle>
|
||||
</ChineseCardHeader>
|
||||
<ChineseCardContent>
|
||||
<ScrollArea className="h-[600px] pr-4">
|
||||
<ChineseCardContent className="px-2 md:px-5 pb-2 md:pb-5">
|
||||
<ScrollArea className="h-[400px] md:h-[600px] pr-2 md:pr-4">
|
||||
<div className="space-y-6">
|
||||
{migrations.map((mig, idx) => {
|
||||
const isSelfMigration = mig.father.id === mig.person.id
|
||||
@@ -1299,12 +1299,12 @@ export default function TimelinePage() {
|
||||
</ChineseCardContent>
|
||||
</ChineseCard>
|
||||
|
||||
<ChineseCard variant="default" cornerOrnament className="bg-gradient-to-br from-primary/5 via-background to-secondary/5 border-primary/20 shadow-sm">
|
||||
<ChineseCardHeader>
|
||||
<ChineseCardTitle className="font-serif">迁徙路径图</ChineseCardTitle>
|
||||
<ChineseCard variant="default" cornerOrnament className="bg-gradient-to-br from-primary/5 via-background to-secondary/5 border-primary/20 shadow-sm overflow-hidden">
|
||||
<ChineseCardHeader className="px-3 md:px-5">
|
||||
<ChineseCardTitle className="font-serif text-base md:text-lg">迁徙路径图</ChineseCardTitle>
|
||||
</ChineseCardHeader>
|
||||
<ChineseCardContent>
|
||||
<div className="relative h-[600px] overflow-hidden rounded-lg bg-background/50 backdrop-blur border border-border/50">
|
||||
<ChineseCardContent className="px-2 md:px-5 pb-2 md:pb-5">
|
||||
<div className="relative h-[400px] md:h-[600px] overflow-hidden rounded-lg bg-background/50 backdrop-blur border border-border/50">
|
||||
{!mapLoaded ? (
|
||||
<div className="flex items-center justify-center h-full text-muted-foreground">
|
||||
<div className="text-center">
|
||||
|
||||
Reference in New Issue
Block a user