mirror of
https://github.com/Zippland/worth-calculator.git
synced 2026-01-19 01:21:03 +08:00
c5d9ffff2b
- 创建环境变量配置示例文件 .env.example - 添加广告配置工具函数，支持时间控制和链接配置 - 修改广告组件，根据环境变量控制显示 - 支持以下环境变量： - NEXT_PUBLIC_AD_END_TIME: 广告结束时间 - NEXT_PUBLIC_AD_ENABLED: 是否启用广告 - NEXT_PUBLIC_AD_LINK: 广告跳转链接 使用方法： 1. 复制 .env.example 为 .env.local 2. 设置广告结束时间，超过该时间广告自动下线 3. 可通过 NEXT_PUBLIC_AD_ENABLED=false 立即关闭广告 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
40 lines
1.4 KiB
TypeScript
40 lines
1.4 KiB
TypeScript
'use client';
|
|
|
|
import { isAdEnabled, getAdLink } from '@/utils/adConfig';
|
|
|
|
export default function HorizontalBanner() {
|
|
// 如果广告未启用或已过期，不显示
|
|
if (!isAdEnabled()) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="w-full bg-gray-100">
|
|
{/* 横向 Banner - 7:1 比例 */}
|
|
<a
|
|
href={getAdLink()}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="block relative w-full bg-gray-200 overflow-hidden hover:opacity-90 transition-opacity duration-300 cursor-pointer"
|
|
style={{
|
|
aspectRatio: '7/1'
|
|
}}
|
|
>
|
|
{/* 占位内容 */}
|
|
<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
|
|
<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"
|
|
/>
|
|
</a>
|
|
</div>
|
|
);
|
|
} |