在[自媒体维基] - 广告投放，精准触达您的目标用户
+本页面价格为实时价格，根据访问量实时计算，请截图预定图片后发送给客服
+为维护网站质量和用户体验，以下类型广告拒绝投放：
+如有疑问，请联系客服咨询。
+3.5%
+1,200,000+
+98%
+
+ 扫描上方微信号：zx0899999 添加时请务必备注“自媒体导航广告”
+月付价格：计算中... 元/月
`; + } + if (adConfig.prices.yearly) { + priceHtml += `年付价格：计算中... 元/年
`; + } + + let bookingButtons = ''; + if (!isBooked) { + if (adConfig.prices.monthly && adConfig.prices.yearly) { + bookingButtons = ` + + `; + } else if (adConfig.prices.monthly) { + bookingButtons = ``; + } else if (adConfig.prices.yearly) { + bookingButtons = ``; + } + } + + return ` + + `; +} + +// 初始化广告位 +function initAdPositions() { + const adPositionsContainer = document.querySelector('.ad-positions'); + if (!adPositionsContainer) return; + + let html = ''; + Object.entries(AD_POSITIONS).forEach(([adId, adConfig]) => { + html += generateAdCardHtml(adId, adConfig); + }); + + adPositionsContainer.innerHTML = html; +} + +// 获取访问量数据 +async function fetchVisitData() { + try { + const response = await fetch('info.php'); + if (!response.ok) { + throw new Error('获取访问量数据失败'); + } + visitData = await response.json(); + console.log('访问量数据已更新:', visitData); + } catch (error) { + console.error('获取访问量数据时出错:', error); + } +} + +// 根据访问量获取价格系数 +function getPriceCoefficient(monthlyPV) { + for (const [key, range] of Object.entries(VISIT_COEFFICIENTS)) { + if (monthlyPV >= range.min && monthlyPV <= range.max) { + return range.coefficient; + } + } + return 1; // 默认系数 +} + +// 计算实际价格 +function calculateActualPrice(basePrice, monthlyPV) { + const coefficient = getPriceCoefficient(monthlyPV); + return Math.round(basePrice * coefficient); +} + +// 更新所有广告位的价格显示 +function updateAllAdPrices() { + console.log('开始更新价格...'); + try { + Object.entries(AD_POSITIONS).forEach(([adId, adConfig]) => { + const prices = adConfig.prices; + + // 更新月付价格显示 + if (prices.monthly) { + const monthlyElement = document.getElementById(`${adId}-monthly`); + if (monthlyElement) { + const actualPrice = calculateActualPrice(prices.monthly, visitData.last_month_pv); + monthlyElement.textContent = actualPrice.toLocaleString(); + } + } + + // 更新年付价格显示 + if (prices.yearly) { + const yearlyElement = document.getElementById(`${adId}-yearly`); + if (yearlyElement) { + const actualPrice = calculateActualPrice(prices.yearly, visitData.last_month_pv); + yearlyElement.textContent = actualPrice.toLocaleString(); + } + } + }); + } catch (error) { + console.error('更新价格时出错:', error); + } +} + +// 处理广告预订 +function bookAd(adPosition, paymentType) { + const status = BOOKED_STATUS[adPosition]; + if (status.isBooked) { + alert('该广告位已被预订，请选择其他广告位或等待到期后再预订。'); + return; + } + + const adConfig = AD_POSITIONS[adPosition]; + const basePrice = adConfig.prices[paymentType]; + + if (!basePrice) { + alert('该广告位不支持此支付方式'); + return; + } + + const actualPrice = calculateActualPrice(basePrice, visitData.last_month_pv); + const duration = paymentType === 'yearly' ? 365 : 30; + const confirmMessage = `您选择的广告位：${adConfig.title}\n支付方式：${paymentType === 'yearly' ? '年付' : '月付'}\n总价格：${actualPrice}元\n\n是否确认预订？`; + + if (confirm(confirmMessage)) { + // 计算到期时间 + const endDate = new Date(); + endDate.setDate(endDate.getDate() + duration); + + // 更新预订状态 + BOOKED_STATUS[adPosition] = { + isBooked: true, + endDate: endDate.toISOString() + }; + + // 重新生成广告位卡片 + const adCard = document.getElementById(adPosition); + if (adCard) { + adCard.outerHTML = generateAdCardHtml(adPosition, adConfig); + } + + alert('预订成功！我们的客服人员将尽快与您联系。'); + } +} + +// 图片预览功能 +function initImagePreview() { + const modal = document.getElementById('previewModal'); + const modalImg = modal.querySelector('.preview-modal-img'); + const modalTitle = modal.querySelector('.preview-modal-title'); + const modalDimensions = modal.querySelector('.preview-modal-dimensions'); + const closeBtn = modal.querySelector('.preview-close'); + + // 确保模态框初始状态正确 + modal.style.display = 'none'; + + // 点击预览图打开模态框 + document.querySelectorAll('.preview-img').forEach(img => { + img.addEventListener('click', function() { + const card = this.closest('.ad-card'); + const title = card.querySelector('h2').textContent; + const dimensions = card.querySelector('.ad-dimensions').textContent; + + modalImg.src = this.src; + modalTitle.textContent = title; + modalDimensions.textContent = dimensions; + + // 显示模态框 + modal.style.display = 'flex'; + setTimeout(() => { + modal.classList.add('show'); + }, 10); + + // 禁用滚动 + document.body.style.overflow = 'hidden'; + }); + }); + + // 点击关闭按钮 + closeBtn.addEventListener('click', function() { + modal.classList.remove('show'); + setTimeout(() => { + modal.style.display = 'none'; + document.body.style.overflow = ''; + }, 300); + }); + + // 点击模态框背景关闭 + modal.addEventListener('click', function(e) { + if (e.target === modal) { + modal.classList.remove('show'); + setTimeout(() => { + modal.style.display = 'none'; + document.body.style.overflow = ''; + }, 300); + } + }); + + // 按ESC键关闭 + document.addEventListener('keydown', function(e) { + if (e.key === 'Escape' && modal.classList.contains('show')) { + modal.classList.remove('show'); + setTimeout(() => { + modal.style.display = 'none'; + document.body.style.overflow = ''; + }, 300); + } + }); +} + +// 处理联系表单提交 +document.querySelector('.contact-form').addEventListener('submit', function(e) { + e.preventDefault(); + + const formData = new FormData(this); + const data = Object.fromEntries(formData.entries()); + + // 这里可以添加表单验证逻辑 + + // 模拟表单提交 + alert('感谢您的咨询！我们的客服人员将尽快与您联系。'); + this.reset(); +}); + +// 确保页面完全加载后再执行 +window.onload = async function() { + console.log('页面加载完成，开始初始化...'); + initAdPositions(); + await fetchVisitData(); + updateAllAdPrices(); + + // 每5分钟更新一次访问量数据 + setInterval(async () => { + await fetchVisitData(); + updateAllAdPrices(); + }, 5 * 60 * 1000); +}; \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..dacf657 --- /dev/null +++ b/styles.css @@ -0,0 +1,468 @@ +/* 全局样式 */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; + line-height: 1.6; + color: #333; + background-color: #f5f5f5; +} + +/* 头部样式 */ +header { + background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); + color: white; + padding: 2rem; + text-align: center; +} + +.logo { + font-size: 2rem; + font-weight: bold; + margin-bottom: 1rem; +} + +h1 { + font-size: 2.5rem; + margin-bottom: 0.5rem; +} + +.subtitle { + font-size: 1.2rem; + opacity: 0.9; +} + +/* 主要内容区域 */ +main { + max-width: 1200px; + margin: 0 auto; + padding: 2rem; +} + +/* 广告位卡片样式 */ +.ad-positions { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 2rem; + margin-bottom: 3rem; +} + +.ad-card { + background: white; + border-radius: 10px; + padding: 1.5rem; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease; +} + +.ad-card:hover { + transform: translateY(-5px); +} + +/* 广告预览图片样式 */ +.ad-preview { + position: relative; + margin: 1rem 0; + background: #f0f0f0; + height: 150px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 5px; + overflow: hidden; + cursor: pointer; + transition: transform 0.3s ease; +} + +.ad-preview:hover { + transform: scale(1.02); +} + +.ad-preview a { + display: block; + width: 100%; + height: 100%; + text-decoration: none; +} + +.ad-preview img { + max-width: 100%; + max-height: 100%; + object-fit: contain; +} + +.preview-overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s ease; +} + +.ad-preview:hover .preview-overlay { + opacity: 1; +} + +.preview-hint { + color: white; + font-size: 1.2em; + margin-bottom: 10px; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); +} + +.ad-dimensions { + color: white; + font-size: 0.9em; + background: rgba(0, 0, 0, 0.6); + padding: 4px 8px; + border-radius: 4px; +} + +/* 预览模态框样式 */ +.preview-modal { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.9); + z-index: 1000; + opacity: 0; + transition: opacity 0.3s ease; + display: none; + align-items: center; + justify-content: center; +} + +.preview-modal.show { + opacity: 1; +} + +.preview-modal-content { + position: relative; + max-width: 90%; + max-height: 90vh; + display: flex; + flex-direction: column; + align-items: center; + background: #fff; + padding: 20px; + border-radius: 8px; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); +} + +.preview-modal-img { + max-width: 100%; + max-height: 80vh; + object-fit: contain; + border-radius: 8px; +} + +.preview-modal-info { + margin-top: 20px; + color: #333; + text-align: center; +} + +.preview-modal-title { + font-size: 1.2em; + font-weight: bold; + margin-bottom: 8px; +} + +.preview-modal-dimensions { + font-size: 0.9em; + color: #666; +} + +.preview-close { + position: absolute; + top: -40px; + right: 0; + color: white; + font-size: 35px; + font-weight: bold; + cursor: pointer; + transition: color 0.3s ease; +} + +.preview-close:hover { + color: #ff4444; +} + +/* 响应式调整 */ +@media (max-width: 768px) { + .preview-modal-content { + max-width: 95%; + padding: 10px; + } + + .preview-modal-img { + max-height: 70vh; + } + + .preview-hint { + font-size: 1em; + } + + .ad-dimensions { + font-size: 0.8em; + } +} + +.ad-stats { + margin: 1rem 0; +} + +.ad-stats p { + margin: 0.5rem 0; + font-size: 1.1rem; +} + +.note { + color: #666; + font-size: 0.9rem; + font-style: italic; +} + +.booking-options { + display: flex; + gap: 1rem; + margin-top: 1rem; +} + +.booking-options .book-btn { + flex: 1; +} + +.book-btn { + background: #1e3c72; + color: white; + border: none; + padding: 0.8rem 1.5rem; + border-radius: 5px; + cursor: pointer; + font-size: 1.1rem; + transition: background 0.3s ease; +} + +.book-btn:hover { + background: #2a5298; +} + +/* 广告效果数据区域 */ +.ad-stats { + background: white; + padding: 2rem; + border-radius: 10px; + margin-bottom: 3rem; +} + +.stats-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 2rem; + margin-top: 1.5rem; +} + +.stat-item { + text-align: center; + padding: 1.5rem; + background: #f8f9fa; + border-radius: 8px; +} + +.stat-item h3 { + color: #666; + margin-bottom: 0.5rem; +} + +.stat-item p { + font-size: 1.5rem; + font-weight: bold; + color: #1e3c72; +} + +/* 联系方式区域 */ +.contact { + background: white; + padding: 2rem; + border-radius: 10px; + text-align: center; +} + +.contact-info { + margin: 1.5rem 0; + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; +} + +.wechat-contact { + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; + padding: 1.5rem; + background: #f8f9fa; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); + transition: transform 0.3s ease; +} + +.wechat-contact:hover { + transform: translateY(-2px); +} + +.wechat-qrcode { + width: 100px; + height: 100px; + border-radius: 8px; + overflow: hidden; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} + +.wechat-qrcode img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.wechat-id { + font-size: 1.1rem; + color: #333; + font-weight: 500; + margin: 0; + padding: 0.5rem 1rem; + background: #fff; + border-radius: 4px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); +} + +/* 响应式设计 */ +@media (max-width: 768px) { + .contact { + padding: 1.5rem; + } + + .wechat-contact { + padding: 1rem; + } + + .wechat-qrcode { + width: 90px; + height: 90px; + } + + .wechat-id { + font-size: 1rem; + } +} + +/* 页脚样式 */ +footer { + text-align: center; + padding: 2rem; + background: #1e3c72; + color: white; + margin-top: 3rem; +} + +/* 响应式设计 */ +@media (max-width: 768px) { + .ad-positions { + grid-template-columns: 1fr; + } + + .stats-grid { + grid-template-columns: 1fr; + } + + .contact-info { + grid-template-columns: 1fr; + } + + .booking-options { + flex-direction: column; + } +} + +/* 广告限制说明样式 */ +.ad-restrictions { + background-color: #fff8f8; + border: 1px solid #ffd6d6; + border-radius: 8px; + padding: 20px; + margin: 20px auto; + max-width: 800px; +} + +.ad-restrictions h2 { + color: #d32f2f; + margin-top: 0; + font-size: 1.5em; +} + +.ad-restrictions ul { + list-style-type: none; + padding-left: 20px; +} + +.ad-restrictions li { + position: relative; + padding-left: 25px; + margin-bottom: 8px; +} + +.ad-restrictions li:before { + content: "×"; + color: #d32f2f; + position: absolute; + left: 0; + font-weight: bold; +} + +.restriction-note { + color: #666; + font-style: italic; + margin-top: 15px; + font-size: 0.9em; +} + +/* 广告位状态样式 */ +.ad-status { + margin: 10px 0; + padding: 8px 12px; + border-radius: 4px; + text-align: center; + font-weight: bold; +} + +.status-available { + color: #4caf50; + background-color: #e8f5e9; +} + +.status-booked { + color: #f44336; + background-color: #ffebee; +} + +.status-booked .end-date { + display: block; + font-size: 0.9em; + font-weight: normal; + margin-top: 4px; +} \ No newline at end of file diff --git a/设计方案.md b/设计方案.md new file mode 100644 index 0000000..87a8543 --- /dev/null +++ b/设计方案.md @@ -0,0 +1,129 @@ +# 广告商投放页面设计方案 + + + +## 页面结构 + +### 1. 头部区域 + +- 网站Logo +- "广告投放"标题 +- 简短说明："在[网站名称] - 广告投放，精准触达您的目标用户" + +### 2. 广告位展示区 + +#### 首页顶部Banner广告位 + +- 位置示意图 +- 实时访问量显示：[从统计页面API获取数据] +- 价格计算公式：`费用 = 统计页面API日均访问量 × 投放时间 × 系数` +- 实时计算价格展示 +- "立即预订"按钮 + +#### 首页侧边栏广告位 + +- 位置示意图 +- 实时访问量显示 +- 价格计算公式：`费用 = 统计页面API日均访问量 × 投放时间 × 系数` +- 实时计算价格展示 +- "立即预订"按钮 + +#### 分类页顶部广告位 + +- 位置示意图 +- 实时访问量显示 +- 价格计算公式：`费用 = 统计页面API日均访问量 × 投放时间 × 系数` +- 实时计算价格展示 +- "立即预订"按钮 + +#### 文末广告位 + +- 位置示意图 +- 实时访问量显示 +- 价格计算公式：`费用 = 统计页面API日均访问量 × 投放时间 × 系数` +- 实时计算价格展示 +- "立即预订"按钮 + +### 3. 广告效果数据展示 + +- "我们的广告位平均点击率：X%" +- "上月广告位平均曝光量：X次" +- "典型客户案例展示" + +### 4. 联系方式 + +- 客服QQ/微信 +- 联系电话 +- 联系邮箱 +- 在线咨询表单 + +## 技术实现方案 + +### 访问量获取 + +```javascript +// 从统计API获取访问量数据 +async function getVisitStats() { + try { + const response = await fetch('tongji.com'); + const data = await response.json(); + return data.visits; // 假设返回的JSON中有visits字段 + } catch (error) { + console.error('获取访问量失败:', error); + return 0; + } +} +``` + +### 价格计算公式实现 + +```javascript +// 广告位系数 +const COEFFICIENTS = { + 'home-banner': 0.0, + 'home-sidebar': 0.0, + 'category-top': 0.0, + 'article-end': 0.0 +}; + +// 计算广告价格 +function calculateAdPrice(dailyVisits, coefficient) { + return Math.round(dailyVisits * 365 * coefficient); +} + +// 更新所有广告位的价格显示 +async function updateAllAdPrices() { + const dailyVisits = await getVisitStats(); + + Object.keys(COEFFICIENTS).forEach(adPosition => { + const price = calculateAdPrice(dailyVisits, COEFFICIENTS[adPosition]); + document.getElementById(`${adPosition}-price`).textContent = price; + }); +} + +// 页面加载时更新价格 +window.addEventListener('load', updateAllAdPrices); +``` + +## 定价策略说明 + +我们采用透明、公平的定价策略，基于以下原则： + +1. **位置价值**：首页等核心位置系数较高，次要位置系数较低 +2. **访问量基础**：价格随网站流量增长而自然调整 +3. **长期合作优惠**：年付模式比月付模式优惠20% + +## 广告位系数建议表 + +| 广告位类型 | 建议系数范围 | 说明 | +| -------------- | ------------ | ---------------------- | +| 首页顶部Banner | 0 | 最显眼位置，品牌曝光强 | +| 首页侧边栏 | 0 | 次重要位置 | +| 分类页顶部 | 0 | 精准分类流量 | +| 文末/页脚位置 | 0 | 补充曝光，价格亲民 | + +## 说明 + +1. 投放时长选项（最低30天，分别是月付，季付，年付，也可以自定义时长）； +2. 广告位预定日历，显示已被占用的时间段； +3. 为长期客户提供梯度折扣（如2年9折，3年8折等）。 \ No newline at end of file