BGSS网页调整01

第一步：注入可视化组件专属 CSS

请将以下 CSS 代码添加到您页面的 <style> 标签中（可以紧跟在之前加的 #bgss-solutions-liquid-glass 样式后面）：

/* ========================================== */
/* BGSS HTML可视化图表 - 冰晶玻璃风格组件 */
/* ========================================== */

/* 通用玻璃模块基础 */
.bgss-glass-module {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.2) 100%);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(10, 26, 56, 0.08);
    padding: 30px;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s ease;
}
.bgss-glass-module:hover {
    transform: translateY(-5px);
}

/* 1. 顶部 Hero 区块：AI 智能处理引擎图 */
.bgss-hero-diagram {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 40px 20px;
}
.hero-node {
    flex: 1;
    text-align: center;
    padding: 25px;
}
.hero-center-engine {
    flex: 1.5;
    background: linear-gradient(135deg, rgba(29, 78, 216, 0.1), rgba(255, 124, 60, 0.1));
    border: 2px solid rgba(29, 78, 216, 0.3);
    box-shadow: 0 0 40px rgba(29, 78, 216, 0.15), inset 0 0 20px rgba(255, 255, 255, 0.5);
}
.hero-icon {
    font-size: 40px;
    color: #1d4ed8;
    margin-bottom: 15px;
    filter: drop-shadow(0 4px 6px rgba(29, 78, 216, 0.3));
}
.hero-title {
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 10px;
}
.hero-desc { font-size: 14px; color: #5c6b7a; line-height: 1.6; }
.hero-arrow {
    font-size: 30px;
    color: #ff7c3c;
    animation: pulseArrow 2s infinite;
}
@keyframes pulseArrow {
    0% { transform: translateX(-5px); opacity: 0.5; }
    50% { transform: translateX(5px); opacity: 1; }
    100% { transform: translateX(-5px); opacity: 0.5; }
}

/* 2. 独立站生态系统图 */
.bgss-eco-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    padding: 20px;
}
.eco-card {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.9);
}
.eco-card .hero-icon { color: #ff7c3c; font-size: 32px; }

/* 3. SaaS 应用架构图 (左右同步) */
.bgss-arch-diagram {
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 30px 10px;
    gap: 15px;
}
.arch-block {
    flex: 2;
    padding: 30px;
}
.arch-block.blue-glow { border-left: 4px solid #1d4ed8; }
.arch-block.orange-glow { border-right: 4px solid #ff7c3c; }
.arch-list {
    list-style: none; padding: 0; margin: 20px 0 0 0; text-align: left;
}
.arch-list li {
    padding: 8px 15px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    font-size: 14px;
    color: #2c3e50;
    font-weight: 500;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}
.arch-list li i { color: #1d4ed8; margin-right: 10px; }

.arch-sync-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}
.sync-badge {
    background: linear-gradient(135deg, #ff9b6d, #ff7c3c);
    color: #fff;
    padding: 12px 20px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 15px;
    box-shadow: 0 8px 20px rgba(255, 124, 60, 0.3);
    z-index: 2;
    white-space: nowrap;
}
.sync-line {
    position: absolute;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #1d4ed8, #ff7c3c);
    opacity: 0.5;
    z-index: 1;
}

/* 响应式适配 */
@media (max-width: 768px) {
    .bgss-hero-diagram, .bgss-arch-diagram { flex-direction: column; }
    .bgss-eco-grid { grid-template-columns: 1fr; }
    .hero-arrow { transform: rotate(90deg); margin: 10px 0; }
    .sync-line { width: 4px; height: 100%; }
}

第二步：替换 HTML 中的图片标签

请在您的 HTML 代码中，找到对应位置的 <div class="elementor-widget-container"> 内的 <img ...> 标签，将其整段替换为我提供的 HTML。

替换图 1：微信图片 (20260123171854-1-scaled.png)

定位方式： 搜索 微信图片_20260123171854-1
替换为：

<div class="bgss-hero-diagram">
    <div class="bgss-glass-module hero-node">
        <i class="fas fa-database hero-icon"></i>
        <div class="hero-title">多源数据接入</div>
        <div class="hero-desc">海关数据 / 领英社交 / 广告线索<br>全渠道流量汇聚</div>
    </div>
    
    <div class="hero-arrow"><i class="fas fa-angle-double-right"></i></div>
    
    <div class="bgss-glass-module hero-center-engine">
        <i class="fas fa-brain hero-icon" style="font-size: 50px; color: #ff7c3c;"></i>
        <div class="hero-title" style="font-size: 22px;">AI 智能分析引擎</div>
        <div class="hero-desc">数据清洗处理 / 客户画像构建<br>无效线索智能过滤 / 购买意向评分</div>
    </div>
    
    <div class="hero-arrow"><i class="fas fa-angle-double-right"></i></div>
    
    <div class="bgss-glass-module hero-node">
        <i class="fas fa-chart-line hero-icon"></i>
        <div class="hero-title">高价值转化</div>
        <div class="hero-desc">精准营销触达 / 客户CRM管理<br>显著提升海外盈利潜力</div>
    </div>
</div>

替换图 2：独立站2.png

定位方式： 搜索 独立站2.png
替换为：

<div class="bgss-eco-grid">
    <div class="bgss-glass-module eco-card">
        <i class="fas fa-globe-americas hero-icon"></i>
        <div class="hero-title">品牌独立站基座</div>
        <div class="hero-desc">高性能响应式框架<br>多语言本地化适配<br>极致的用户浏览体验</div>
    </div>
    <div class="bgss-glass-module eco-card">
        <i class="fas fa-bullhorn hero-icon"></i>
        <div class="hero-title">全域流量聚合</div>
        <div class="hero-desc">Google SEO/SEM 融合<br>Facebook/TikTok 社交引流<br>KOL 矩阵流量分发</div>
    </div>
    <div class="bgss-glass-module eco-card">
        <i class="fas fa-handshake hero-icon"></i>
        <div class="hero-title">沉淀与转化</div>
        <div class="hero-desc">精细化埋点追踪<br>私域流量池构建<br>长效的品牌信任关系</div>
    </div>
</div>

替换图 3：网站插件-2.png

定位方式： 搜索 网站插件-2.png
替换为：

<div class="bgss-arch-diagram">
    <div class="bgss-glass-module arch-block blue-glow">
        <div class="hero-title" style="font-size: 24px; color: #1d4ed8;">B2B 品牌独立站</div>
        <div class="hero-desc">前端交互与获客触点</div>
        <ul class="arch-list">
            <li><i class="fas fa-check-circle"></i> 产品与服务展示矩阵</li>
            <li><i class="fas fa-check-circle"></i> 多语言询盘表单收集</li>
            <li><i class="fas fa-check-circle"></i> 客户浏览轨迹实时追踪</li>
            <li><i class="fas fa-check-circle"></i> AI 智能在线客服接待</li>
        </ul>
    </div>
    
    <div class="arch-sync-center">
        <div class="sync-line"></div>
        <div class="sync-badge">
            <i class="fas fa-sync-alt fa-spin" style="margin-right: 8px;"></i>数据同步插件
        </div>
    </div>
    
    <div class="bgss-glass-module arch-block orange-glow">
        <div class="hero-title" style="font-size: 24px; color: #ff7c3c;">智能营销 SaaS 平台</div>
        <div class="hero-desc">后端管理与数据大脑</div>
        <ul class="arch-list">
            <li><i class="fas fa-brain"></i> AI 询盘意向深度分析</li>
            <li><i class="fas fa-users-cog"></i> 全生命周期 CRM 客户管理</li>
            <li><i class="fas fa-envelope-open-text"></i> 多渠道(Email/WA)聚合沟通</li>
            <li><i class="fas fa-chart-pie"></i> 营销投放数据全景看板</li>
        </ul>
    </div>
</div>

将繁重的位图替换为上述代码后，您的解决方案页面不仅体积大幅缩小、加载如飞，而且在鼠标悬停时会有极具现代感的互动微光反馈。这正是“液态玻璃”美学与技术结合的巅峰展现！