為了讓你的工程師可以直接預覽和測試，或者直接將代碼粘貼到 Elementor 的“自定義 HTML”小部件中，我將你提供的官網(wǎng)源碼與我們剛剛設計的 GEO 優(yōu)化工具（已完美適配你們的流體玻璃和品牌色）合并成了一個完整的單文件 HTML。
你可以直接復制以下完整代碼，保存為 geo-tool.html，在瀏覽器中雙擊打開即可查看最終效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GEO智能檢測系統(tǒng) – BGSS 出海智能營銷解決方案</title>
<meta name="robots" content="max-image-preview:large">
<link rel="stylesheet" id="font-awesome-5-all-css" media="all">
<link rel="stylesheet" id="bdt-uikit-css" media="all">
<link rel="stylesheet" id="hello-elementor-theme-style-css" media="all">
<link rel="stylesheet" id="elementor-frontend-css" media="all">
<style>
/* -----------------------------------------------------------
BGSS 全局流體玻璃背景 (繼承自原站設定)
----------------------------------------------------------- */
body, .elementor-page, .site-main {
background: linear-gradient(-45deg, #ffffff 0%, #f0f7fe 30%, #ffead8 55%, #ffffff 100%) !important;
background-size: 300% 300% !important;
animation: fluidBgLightBrand 20s ease infinite !important;
background-attachment: fixed !important;
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
@keyframes fluidBgLightBrand {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
body::before, body::after {
content: "" !important;
position: fixed !important;
border-radius: 50% !important;
filter: blur(80px) !important;
opacity: 0.15 !important;
z-index: 0 !important;
pointer-events: none !important;
}
body::before {
width: 600px !important; height: 600px !important;
background: #1d4ed8 !important; /* 科技藍 */
top: -100px !important; left: -150px !important;
}
body::after {
width: 450px !important; height: 450px !important;
background: #ff7c3c !important; /* 活力橙 */
bottom: 100px !important; right: 0 !important;
}
/* -----------------------------------------------------------
GEO 工具獨立樣式
----------------------------------------------------------- */
.bgss-geo-wrapper {
position: relative;
padding: 80px 20px 100px 20px; /* 留出頂部導航欄空間 */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
box-sizing: border-box;
z-index: 1;
flex: 1; /* 占據(jù)主體空間 */
}
.bgss-geo-content {
max-width: 900px;
margin: 0 auto;
}
.bgss-geo-wrapper .glass-card {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.1) 100%);
backdrop-filter: blur(25px) saturate(150%);
-webkit-backdrop-filter: blur(25px) saturate(150%);
border: 1px solid rgba(29, 78, 216, 0.15);
border-top: 1px solid rgba(255, 255, 255, 0.9);
border-left: 1px solid rgba(255, 255, 255, 0.9);
border-radius: 20px;
box-shadow: 0 10px 40px 0 rgba(10, 26, 56, 0.12);
padding: 40px;
margin-bottom: 30px;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.bgss-geo-wrapper .glass-card:hover {
box-shadow: 0 15px 55px 0 rgba(10, 26, 56, 0.22);
}
.glass-input {
background: rgba(255, 255, 255, 0.6) !important;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.8) !important;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
width: 100%;
padding: 14px 18px;
border-radius: 12px;
font-size: 14px;
color: #1f2937;
transition: all 0.3s ease;
box-sizing: border-box;
}
.glass-input:focus {
background: rgba(255, 255, 255, 0.9) !important;
border-color: #1d4ed8 !important;
outline: none;
box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.02);
}
.input-group, .input-sub { margin-bottom: 24px; }
.flex-row { display: flex; gap: 24px; }
@media (max-width: 600px) { .flex-row { flex-direction: column; gap: 10px; } }
.flex-row .input-sub { flex: 1; }
.bgss-geo-wrapper label {
display: block; font-size: 14px; font-weight: 600;
color: #32373c; margin-bottom: 10px;
}
.platform-selector {
display: flex; align-items: center; gap: 16px; margin-bottom: 30px; flex-wrap: wrap;
}
.platform-selector > span { font-size: 14px; font-weight: 600; color: #32373c; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.glass-chip {
padding: 8px 18px; border-radius: 20px;
background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.7);
color: #4b5563; font-size: 13px; font-weight: 500;
cursor: pointer; backdrop-filter: blur(4px);
transition: all 0.3s ease;
}
.glass-chip:hover { background: rgba(255, 255, 255, 0.8); transform: translateY(-2px); }
.glass-chip.active {
background: #1d4ed8; border-color: transparent; color: white;
box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3);
}
.glass-btn {
width: 100%; max-width: 250px; padding: 16px 32px;
background: linear-gradient(135deg, #ff9b6d, #ff7c3c) !important;
color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.7) !important;
border-top: 1px solid rgba(255, 255, 255, 0.9) !important;
border-radius: 50px !important; font-size: 16px; font-weight: 600;
cursor: pointer; box-shadow: 0 4px 15px rgba(255, 124, 60, 0.3) !important;
transition: all 0.3s ease !important; display: block; margin: 0 auto; text-align: center;
}
.glass-btn:hover {
background: rgba(255, 255, 255, 0.6) !important; color: #ff7c3c !important;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important; transform: scale(1.02);
}
.glass-btn:disabled {
background: #9ca3af !important; box-shadow: none !important; color: white !important;
cursor: not-allowed; border: none !important; transform: none !important;
}
.chart-container h3 {
margin-top: 0; margin-bottom: 24px; font-size: 18px; font-weight: 700; color: #32373c;
text-align: center;
}
.chart-row { display: flex; align-items: center; margin-bottom: 18px; }
.chart-label { width: 120px; font-size: 13px; font-weight: 500; color: #374151; text-align: right; padding-right: 16px; }
.chart-track { flex: 1; height: 16px; background: rgba(255, 255, 255, 0.4); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 8px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); }
.chart-fill { height: 100%; background: linear-gradient(90deg, #1d4ed8 0%, #ff7c3c 100%); border-radius: 8px; width: 0%; transition: width 1.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
.chart-value { width: 50px; font-size: 13px; font-weight: 600; color: #4b5563; text-align: left; padding-left: 14px; }
/* 導航欄置頂樣式修復 */
header.elementor-location-header {
background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(255,255,255,0.4)) !important;
backdrop-filter: blur(30px) saturate(150%) !important;
-webkit-backdrop-filter: blur(30px) saturate(150%) !important;
border-bottom: 1px solid rgba(255,255,255,0.5) !important;
box-shadow: 0 4px 30px rgba(0,0,0,0.03) !important;
position: sticky; top: 0; z-index: 9999;
}
</style>
</head>
<body>
<header class="elementor-location-header">
<div style="max-width: 1200px; margin: 0 auto; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center;">
<a >
<img width="200" src="https://www.bgssai.com/wp-content/uploads/2024/01/容器-4-1.png" alt="BGSS Logo">
</a>
<nav style="display: flex; gap: 20px;">
<a style="text-decoration: none; color: #333; font-weight: 500;">首頁</a>
<a style="text-decoration: none; color: #333; font-weight: 500;">解決方案</a>
<a href="javascript:void(0);" style="text-decoration: none; color: #1d4ed8; font-weight: bold;">GEO優(yōu)化(AI SEO)</a>
<a style="text-decoration: none; color: #333; font-weight: 500;">聯(lián)系我們</a>
</nav>
</div>
</header>
<main id="content" class="site-main">
<div id="bgss-geo-app" class="bgss-geo-wrapper">
<div class="bgss-geo-content">
<div style="text-align: center; margin-bottom: 40px;">
<h1 style="font-size: 2.5rem; color: #1f2937; margin-bottom: 10px;">品牌生成式引擎優(yōu)化 (GEO) 檢測</h1>
<p style="color: #6b7280; font-size: 1.1rem;">洞察您的品牌在各大 AI 核心推薦位的曝光表現(xiàn)</p>
</div>
<div class="search-card glass-card">
<div class="input-group">
<label>搜索用戶可能提問的問題</label>
<input type="text" id="geo-query" placeholder="例如：昆山出海營銷服務商哪家好？" class="glass-input">
</div>
<div class="flex-row">
<div class="input-sub">
<label>您的品牌名稱</label>
<input type="text" id="geo-brand" placeholder="昆山兵貴神速智能科技有限公司" class="glass-input" value="兵貴神速">
</div>
<div class="input-sub">
<label>競品名稱（選填）</label>
<input type="text" id="geo-competitor" placeholder="競品品牌" class="glass-input">
</div>
</div>
<div class="platform-selector">
<span>檢測目標 AI 平臺：</span>
<div class="chips">
<button class="chip glass-chip active" data-id="doubao">豆包</button>
<button class="chip glass-chip active" data-id="yuanbao">騰訊元寶</button>
<button class="chip glass-chip active" data-id="deepseek">DeepSeek</button>
<button class="chip glass-chip active" data-id="qianwen">通義千問</button>
<button class="chip glass-chip active" data-id="wenxin">文心一言</button>
<button class="chip glass-chip active" data-id="kimi">Kimi</button>
</div>
</div>
<button id="start-detect" class="primary-btn glass-btn">開始智能檢測 →</button>
</div>
<div id="geo-results" style="display:none;">
<div class="chart-container glass-card">
<h3>AI 引擎引用數(shù)據(jù)源 Top 占比</h3>
<p style="text-align: center; color: #6b7280; font-size: 13px; margin-top: -15px; margin-bottom: 30px;">分析各大 AI 傾向于從哪些媒體提取并推薦您的品牌信息</p>
<div id="source-chart" style="height: auto; min-height: 200px; width: 100%;"></div>
</div>
</div>
</div>
</div>
</main>
<script>
document.addEventListener('DOMContentLoaded', function() {
const startBtn = document.getElementById('start-detect');
const chips = document.querySelectorAll('.chip');
const resultsArea = document.getElementById('geo-results');
const chartArea = document.getElementById('source-chart');
// AI 平臺多選交互
chips.forEach(chip => {
chip.addEventListener('click', function() {
this.classList.toggle('active');
});
});
// 提交請求
startBtn.addEventListener('click', function() {
const query = document.getElementById('geo-query').value.trim();
const brand = document.getElementById('geo-brand').value.trim();
const selectedPlatforms = Array.from(document.querySelectorAll('.chip.active')).map(c => c.dataset.id);
if (!query || !brand) {
alert('請?zhí)顚懰阉鲉栴}和品牌名稱！');
return;
}
if (selectedPlatforms.length === 0) {
alert('請至少選擇一個 AI 平臺！');
return;
}
const originalText = startBtn.innerHTML;
startBtn.innerHTML = 'AI 引擎深度檢測中...';
startBtn.disabled = true;
// 請求后端正式 API (admin.bgssai.com)
const apiUrl = 'https://admin.bgssai.com/api/v1/geo/detect';
fetch(apiUrl, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ query, brand, platforms: selectedPlatforms })
})
.then(response => {
if (!response.ok) throw new Error('API 尚未就緒');
return response.json();
})
.then(data => {
renderChart(data.results);
finishLoading();
})
.catch(error => {
console.warn('請求真實 API 失敗，啟用本地演示數(shù)據(jù)...', error);
// 本地演示降級數(shù)據(jù)，確保前端效果展示
setTimeout(() => {
renderChart([
{ source: '搜狐科技', percentage: 88 },
{ source: '今日頭條', percentage: 75 },
{ source: '知乎', percentage: 62 },
{ source: '微信公眾號', percentage: 48 },
{ source: 'CSDN博客', percentage: 35 },
{ source: '百度百科', percentage: 22 },
{ source: '出海網(wǎng)', percentage: 15 }
]);
finishLoading();
}, 1500);
});
function finishLoading() {
resultsArea.style.display = 'block';
startBtn.innerHTML = originalText;
startBtn.disabled = false;
// 自動向下滾動以展示圖表
resultsArea.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
});
// 渲染橫向流體柱狀圖
function renderChart(data) {
chartArea.innerHTML = '';
data.forEach((item, index) => {
const barRow = document.createElement('div');
barRow.className = 'chart-row';
const label = document.createElement('div');
label.className = 'chart-label';
label.innerText = item.source;
const barTrack = document.createElement('div');
barTrack.className = 'chart-track';
const barFill = document.createElement('div');
barFill.className = 'chart-fill';
const value = document.createElement('div');
value.className = 'chart-value';
value.innerText = item.percentage + '%';
barTrack.appendChild(barFill);
barRow.appendChild(label);
barRow.appendChild(barTrack);
barRow.appendChild(value);
chartArea.appendChild(barRow);
// 依次觸發(fā)動畫伸長
setTimeout(() => {
barFill.style.width = item.percentage + '%';
}, 100 + (index * 150));
});
}
});
</script>
</body>
</html>
工程師使用說明：
這份代碼是一份不依賴 WordPress 插件機制的 純靜態(tài)頁面。
如果你們更傾向于直接通過 Elementor 積木來搭建，工程師只需要：
- 在 Elementor 頁面中拖入一個 “HTML / 自定義HTML” 小組件。
- 復制上述代碼中
<div id="bgss-geo-app" class="bgss-geo-wrapper">到</div>結束的部分（即工具的 HTML 主體）。 - 將
<style>塊和<script>塊分別放在頁面的對應位置即可。
