From 3e3d821e7de7f3cf686535a3a35e80c7e3b6636e Mon Sep 17 00:00:00 2001
From: zihanjian <zihan.jian@outlook.com>
Date: Fri, 4 Jul 2025 17:24:56 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E9=A6=96=E9=A1=B5=E5=B9=BF?=
 =?UTF-8?q?=E5=91=8A=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 创建竖向广告弹窗组件（5:3比例，右上角可关闭）
- 创建横向Banner广告组件（7:1比例，顶部展示）
- 在首页集成两个广告组件
- 竖向广告延迟1秒后显示，避免影响首屏加载

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/page.tsx                    | 17 +++++++--
 components/HorizontalBanner.tsx | 30 ++++++++++++++++
 components/VerticalAd.tsx       | 62 +++++++++++++++++++++++++++++++++
 3 files changed, 106 insertions(+), 3 deletions(-)
 create mode 100644 components/HorizontalBanner.tsx
 create mode 100644 components/VerticalAd.tsx

diff --git a/app/page.tsx b/app/page.tsx
index f0c55e7..d7567ab 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,9 +1,20 @@
 import Calculator from '@/components/calculator';
+import VerticalAd from '@/components/VerticalAd';
+import HorizontalBanner from '@/components/HorizontalBanner';
 
 export default function Home() {
   return (
-    <main className="min-h-screen bg-gray-50 dark:bg-gray-900">
-      <Calculator />
-    </main>
+    <>
+      {/* 竖向广告弹窗 */}
+      <VerticalAd />
+      
+      <main className="min-h-screen bg-gray-50 dark:bg-gray-900">
+        {/* 顶部横向 Banner */}
+        <HorizontalBanner />
+        
+        {/* 主要内容 */}
+        <Calculator />
+      </main>
+    </>
   );
 }
\ No newline at end of file
diff --git a/components/HorizontalBanner.tsx b/components/HorizontalBanner.tsx
new file mode 100644
index 0000000..67bea49
--- /dev/null
+++ b/components/HorizontalBanner.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+export default function HorizontalBanner() {
+  return (
+    <div className="w-full bg-gray-100">
+      {/* 横向 Banner - 7:1 比例 */}
+      <div 
+        className="relative w-full bg-gray-200 overflow-hidden"
+        style={{
+          aspectRatio: '7/1'
+        }}
+      >
+        {/* 占位内容 */}
+        <div className="absolute inset-0 flex items-center justify-center">
+          <div className="text-center">
+            <div className="text-gray-500 text-base sm:text-lg">广告横幅</div>
+            <div className="text-gray-400 text-xs sm:text-sm">7:1 横向广告</div>
+          </div>
+        </div>
+        
+        {/* 实际广告图片占位 */}
+        <img 
+          src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 100'%3E%3Crect fill='%23e5e7eb' width='700' height='100'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dominant-baseline='middle' font-family='Arial' font-size='20' fill='%236b7280'%3E横幅广告占位图%3C/text%3E%3C/svg%3E"
+          alt="横幅广告"
+          className="w-full h-full object-cover"
+        />
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/components/VerticalAd.tsx b/components/VerticalAd.tsx
new file mode 100644
index 0000000..4b43ca1
--- /dev/null
+++ b/components/VerticalAd.tsx
@@ -0,0 +1,62 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { X } from 'lucide-react';
+
+export default function VerticalAd() {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    // 延迟显示广告，避免影响首屏加载
+    const timer = setTimeout(() => {
+      setIsVisible(true);
+    }, 1000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  const handleClose = () => {
+    setIsVisible(false);
+  };
+
+  if (!isVisible) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 p-4">
+      <div className="relative">
+        {/* 关闭按钮 */}
+        <button
+          onClick={handleClose}
+          className="absolute -top-2 -right-2 z-10 rounded-full bg-white p-1 shadow-lg hover:bg-gray-100 transition-colors"
+          aria-label="关闭广告"
+        >
+          <X className="h-5 w-5 text-gray-700" />
+        </button>
+
+        {/* 广告内容 - 5:3 比例 */}
+        <div 
+          className="relative bg-gray-200 rounded-lg overflow-hidden shadow-xl"
+          style={{
+            width: 'min(500px, 90vw)',
+            aspectRatio: '5/3'
+          }}
+        >
+          {/* 占位内容 */}
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div className="text-center">
+              <div className="text-gray-500 text-lg mb-2">广告位</div>
+              <div className="text-gray-400 text-sm">5:3 竖向广告</div>
+            </div>
+          </div>
+          
+          {/* 实际广告图片占位 */}
+          <img 
+            src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 300'%3E%3Crect fill='%23e5e7eb' width='500' height='300'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dominant-baseline='middle' font-family='Arial' font-size='24' fill='%236b7280'%3E广告占位图%3C/text%3E%3C/svg%3E"
+            alt="广告"
+            className="w-full h-full object-cover"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file