展览AI画布 - 双模式展台设计AI | 展品�?/title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary: #8b5cf6; --secondary: #ec4899; --accent: #06b6d4; --gold: #f59e0b; --green: #10b981; --bg-dark: #0a0a1a; --bg-card: rgba(255, 255, 255, 0.04); --bg-card-hover: rgba(139, 92, 246, 0.06); --border: rgba(255, 255, 255, 0.08); --border-hover: rgba(139, 92, 246, 0.3); --text-primary: #f1f5f9; --text-secondary: #94a3b8; --text-muted: #64748b; --gradient: linear-gradient(135deg, #8b5cf6 0%, #ec4899 50%, #06b6d4 100%); --gradient-purple: linear-gradient(135deg, #8b5cf6, #6366f1); --gradient-pink: linear-gradient(135deg, #ec4899, #f43f5e); --gradient-cyan: linear-gradient(135deg, #06b6d4, #0ea5e9); } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif; background: var(--bg-dark); color: var(--text-primary); line-height: 1.6; overflow-x: hidden; } .bg-grid { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(rgba(139, 92, 246, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(139, 92, 246, 0.025) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; z-index: 0; } .bg-glow-1 { position: fixed; top: -200px; right: -100px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(139, 92, 246, 0.12) 0%, transparent 70%); border-radius: 50%; pointer-events: none; z-index: 0; } .bg-glow-2 { position: fixed; bottom: -300px; left: -200px; width: 700px; height: 700px; background: radial-gradient(circle, rgba(6, 182, 212, 0.08) 0%, transparent 70%); border-radius: 50%; pointer-events: none; z-index: 0; } .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; } /* 导航 */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; backdrop-filter: blur(20px); background: rgba(10, 10, 26, 0.75); border-bottom: 1px solid var(--border); transition: background 0.3s; } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; } .logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; } .logo-icon { width: 34px; height: 34px; background: var(--gradient); border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 18px; } .nav-links { display: flex; gap: 32px; list-style: none; align-items: center; } .nav-links a { color: var(--text-secondary); text-decoration: none; font-size: 14px; transition: color 0.2s; } .nav-links a:hover, .nav-links a.active { color: var(--text-primary); } .nav-cta { display: flex; gap: 12px; align-items: center; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 10px; font-size: 14px; font-weight: 600; text-decoration: none; transition: all 0.3s; cursor: pointer; border: none; } .btn-primary { background: var(--gradient); color: white; box-shadow: 0 4px 20px rgba(139, 92, 246, 0.25); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(139, 92, 246, 0.35); } .btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid transparent; } .btn-ghost:hover { color: var(--text-primary); } .btn-outline { background: transparent; color: var(--text-primary); border: 1px solid var(--border); } .btn-outline:hover { border-color: var(--border-hover); background: var(--bg-card-hover); } .btn-lg { padding: 14px 32px; font-size: 15px; border-radius: 12px; } /* Hero */ .hero { padding: 140px 0 60px; text-align: center; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 20px; background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(139, 92, 246, 0.3); border-radius: 999px; font-size: 13px; color: #a78bfa; margin-bottom: 24px; } .hero h1 { font-size: 52px; font-weight: 800; line-height: 1.15; margin-bottom: 16px; letter-spacing: -0.02em; } .hero h1 .gradient-text { background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-desc { font-size: 17px; color: var(--text-secondary); max-width: 680px; margin: 0 auto 36px; line-height: 1.7; } /* 模式切换标签 */ .mode-tabs { display: inline-flex; padding: 5px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 40px; } .mode-tab { padding: 10px 28px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s; color: var(--text-secondary); } .mode-tab.active { background: var(--gradient-purple); color: white; box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3); } /* 预览画布 */ .canvas-preview { max-width: 900px; margin: 0 auto 40px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; backdrop-filter: blur(10px); } .canvas-toolbar { padding: 12px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--text-muted); } .canvas-dots { display: flex; gap: 6px; } .canvas-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--border); } .canvas-body { height: 380px; background: linear-gradient(rgba(139, 92, 246, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(139, 92, 246, 0.03) 1px, transparent 1px); background-size: 30px 30px; display: flex; align-items: center; justify-content: center; position: relative; } .booth-mockup { width: 320px; height: 240px; background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(236, 72, 153, 0.15)); background-image: url('https://aka.doubaocdn.com/s/pacM1wwbq8'); background-size: cover; background-position: center; border: 2px solid rgba(139, 92, 246, 0.3); border-radius: 8px; position: relative; box-shadow: 0 20px 60px rgba(139, 92, 246, 0.15); } .booth-mockup::before { content: ''; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 120px; height: 40px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; } .booth-mockup::after { content: ''; position: absolute; bottom: 30px; left: 30px; right: 30px; height: 60px; background: rgba(255, 255, 255, 0.06); border-radius: 4px; } .canvas-sidebar { position: absolute; right: 20px; top: 20px; width: 160px; display: flex; flex-direction: column; gap: 8px; } .sidebar-item { padding: 8px 12px; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--border); border-radius: 8px; font-size: 11px; color: var(--text-secondary); } /* Section 通用 */ section { padding: 80px 0; position: relative; z-index: 1; } .section-head { text-align: center; margin-bottom: 48px; } .section-tag { display: inline-block; padding: 5px 14px; background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(139, 92, 246, 0.25); border-radius: 999px; font-size: 12px; color: #a78bfa; margin-bottom: 14px; letter-spacing: 0.05em; } .section-head h2 { font-size: 36px; font-weight: 700; margin-bottom: 12px; letter-spacing: -0.01em; } .section-head p { color: var(--text-secondary); font-size: 16px; max-width: 600px; margin: 0 auto; } /* 模式详情卡片 */ .mode-detail { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: center; margin-bottom: 60px; } .mode-detail.reverse { direction: rtl; } .mode-detail.reverse > * { direction: ltr; } .mode-icon { width: 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 30px; background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.1)); border: 1px solid rgba(139, 92, 246, 0.25); margin-bottom: 18px; } .mode-text h3 { font-size: 28px; font-weight: 700; margin-bottom: 8px; } .mode-text .mode-tag { display: inline-block; padding: 3px 12px; background: rgba(139, 92, 246, 0.15); color: #a78bfa; font-size: 12px; border-radius: 999px; margin-bottom: 16px; } .mode-text .lead { color: var(--text-secondary); font-size: 15px; line-height: 1.7; margin-bottom: 22px; } .mode-features { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .mode-features li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; } .mode-features li::before { content: '�?; color: #10b981; font-weight: bold; font-size: 12px; flex-shrink: 0; margin-top: 2px; } .mode-visual { background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 24px; aspect-ratio: 4/3; backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; } /* 适用人群 */ .audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .audience-card { padding: 24px 22px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; transition: all 0.3s; } .audience-card:hover { border-color: var(--border-hover); transform: translateY(-2px); } .audience-icon { font-size: 28px; margin-bottom: 12px; } .audience-card h4 { font-size: 16px; font-weight: 600; margin-bottom: 6px; } .audience-card p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; } /* 联动区域 */ .integration-section { background: linear-gradient(180deg, transparent, rgba(236, 72, 153, 0.02), transparent); } .integration-box { padding: 48px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 22px; text-align: center; } .integration-box h3 { font-size: 28px; font-weight: 700; margin-bottom: 12px; } .integration-box .lead { color: var(--text-secondary); font-size: 15px; max-width: 600px; margin: 0 auto 32px; } .integration-flow { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; } .flow-step { padding: 16px 24px; background: rgba(139, 92, 246, 0.06); border: 1px solid rgba(139, 92, 246, 0.2); border-radius: 12px; font-size: 14px; font-weight: 500; } .flow-arrow { color: var(--text-muted); font-size: 20px; } /* CTA */ .cta-section { text-align: center; padding: 60px 0 80px; } .cta-box { max-width: 700px; margin: 0 auto; padding: 52px 40px; background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(6, 182, 212, 0.06)); border: 1px solid rgba(139, 92, 246, 0.25); border-radius: 22px; backdrop-filter: blur(10px); } .cta-box h2 { font-size: 30px; font-weight: 700; margin-bottom: 12px; } .cta-box p { color: var(--text-secondary); font-size: 15px; margin-bottom: 26px; } .cta-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* 页脚 */ footer { border-top: 1px solid var(--border); padding: 48px 0 24px; position: relative; z-index: 1; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 32px; } .footer-brand .logo { margin-bottom: 14px; } .footer-brand p { font-size: 13px; color: var(--text-secondary); line-height: 1.7; max-width: 280px; } .footer-col h5 { font-size: 14px; font-weight: 600; margin-bottom: 14px; } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; } .footer-col a { font-size: 13px; color: var(--text-secondary); text-decoration: none; transition: color 0.2s; } .footer-col a:hover { color: var(--text-primary); } .footer-bottom { padding-top: 20px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text-muted); } /* 响应�?*/ /* 回到顶部 */ .back-to-top { position: fixed; right: 30px; bottom: 30px; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #8b5cf6, #ec4899); color: #fff; border: none; font-size: 20px; cursor: pointer; box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4); opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.3s; z-index: 150; display: flex; align-items: center; justify-content: center; } .back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(139, 92, 246, 0.5); } @media (max-width: 960px) { .hero h1 { font-size: 38px; } .mode-detail { grid-template-columns: 1fr; gap: 30px; } .mode-detail.reverse { direction: ltr; } .audience-grid { grid-template-columns: 1fr 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } .nav-links { display: none; } .integration-flow { flex-direction: column; } .flow-arrow { transform: rotate(90deg); } } @media (max-width: 540px) { .hero h1 { font-size: 28px; } .section-head h2 { font-size: 24px; } .audience-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .mode-features { grid-template-columns: 1fr; } .cta-box { padding: 36px 24px; } section { padding: 56px 0; } .mode-tabs { flex-direction: column; width: 100%; } .mode-tab { text-align: center; } .canvas-body { height: 260px; } .booth-mockup { width: 220px; height: 160px; } } </style> </head> <body> <style> .nav-dropdown { position: relative; } .nav-dropdown:hover .dropdown-menu { display: block; } .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 160px; background: rgba(18,18,40,0.95); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 8px 0; list-style: none; z-index: 100; box-shadow: 0 10px 40px rgba(0,0,0,0.3); } .dropdown-menu li { display: block; } .dropdown-menu li a { display: block; padding: 10px 16px; color: rgba(255,255,255,0.7); font-size: 14px; text-decoration: none; transition: all 0.2s; } .dropdown-menu li a:hover { background: rgba(139,92,246,0.1); color: #a78bfa; } .user-menu { position: relative; display: inline-block; } .user-name-display { color: rgba(255,255,255,0.9); font-size: 14px; padding: 8px 12px; cursor: pointer; } .user-menu:hover .user-dropdown { display: block; } .user-dropdown { right: 0; left: auto; min-width: 140px; } .user-dropdown a { display: block; padding: 10px 16px; color: rgba(255,255,255,0.7); font-size: 14px; text-decoration: none; } .user-dropdown a:hover { background: rgba(139,92,246,0.1); color: #a78bfa; } </style> <div class="bg-grid"></div> <div class="bg-glow-1"></div> <div class="bg-glow-2"></div>  <nav> <div class="container nav-inner"> <a href="/" style="text-decoration:none;color:inherit;"> <div class="logo"> <div class="logo-icon">☁️</div> <span>展品云</span> </div> </a> <ul class="nav-links"> <li><a href="/" >首页</a></li> <li class="nav-dropdown"> <a href="javascript:;">平台 ▾</a> <ul class="dropdown-menu"> <li><a href="/serve/">🛒 服务市场</a></li> <li><a href="/shop/">🏪 商家展示</a></li> <li><a href="/task/">📝 托管发单</a></li> <li><a href="/news/">📰 资讯中心</a></li> <li><a href="/community/">💬 行业社区</a></li> </ul> </li> <li><a href="aicanvas.php" class="active">展览AI画布</a></li> <li><a href="ai-secretary.php" >展会AI秘书</a></li> <li><a href="pricing.php" >会员价格</a></li> <li><a href="download.php" >下载</a></li> <li><a href="about.php" >关于</a></li> </ul> <div class="nav-cta"> <a href="/reg/" class="btn btn-ghost">登录</a> <a href="download.php" class="btn btn-primary">免费下载</a> </div> </div> </nav>  <section class="hero"> <div class="container"> <div class="hero-badge"> <span>🎨</span> <span>展览行业垂直图像大模�?· 双模式设�?/span> </div> <h1>展览AI画布<br><span class="gradient-text">让展台设计效率提�?0�?/span></h1> <p class="hero-desc"> 基于会展行业专属训练的图像大模型，文生图快速预�?+ AI画布专业创作双模式切换�? 参展商、设计师、策划师各取所需，一站式满足展台设计全流程需求�? </p>  <div class="mode-tabs"> <div class="mode-tab active">�?文生�?· 常规�?/div> <div class="mode-tab">🎨 AI画布 · 专业�?/div> </div>  <div class="canvas-preview"> <div class="canvas-toolbar"> <div class="canvas-dots"> <span></span><span></span><span></span> </div> <span>展览AI画布 · 特装展台设计</span> </div> <div class="canvas-body"> <div class="booth-mockup"></div> <div class="canvas-sidebar"> <div class="sidebar-item">风格：现代科技</div> <div class="sidebar-item">尺寸�?m×6m</div> <div class="sidebar-item">主色：蓝紫渐�?/div> <div class="sidebar-item">元素：发光灯�?/div> </div> </div> </div> </div> </section>  <section> <div class="container"> <div class="mode-detail"> <div class="mode-text"> <div class="mode-icon">�?/div> <h3>文生�?· 常规�?/h3> <span class="mode-tag">简单快�?· 参展商首�?/span> <p class="lead"> 无需任何设计基础，输入文字描述即可生成专业展台效果图�? 参展企业快速预览方案、对比多种风格，大幅降低沟通成本�? </p> <ul class="mode-features"> <li>文字描述一键生�?/li> <li>多种风格快速切�?/li> <li>尺寸规格自定�?/li> <li>多图批量生成</li> <li>会展专用风格模型</li> <li>高清图导�?/li> <li>历史作品保存</li> <li>一键分享方�?/li> </ul> </div> <div class="mode-visual"> <div style="text-align:center;color:var(--text-secondary);"> <div style="font-size:48px;margin-bottom:16px;">📝</div> <div style="font-size:14px;">输入描述 �?自动生成</div> <div style="font-size:12px;color:var(--text-muted);margin-top:8px;">（功能演示占位，模型上线后替换）</div> </div> </div> </div> </div> </section>  <section style="background: linear-gradient(180deg, transparent, rgba(139, 92, 246, 0.02), transparent);"> <div class="container"> <div class="mode-detail reverse"> <div class="mode-text"> <div class="mode-icon">🎨</div> <h3>AI画布 · 专业�?/h3> <span class="mode-tag">完整工作�?· 设计师专�?/span> <p class="lead"> 面向专业设计师的完整设计工作流。图生图迭代优化、多版本方案对比�? 图层精细化编辑，AI辅助提效但保留设计师完全掌控权�? </p> <ul class="mode-features"> <li>图生图迭代优�?/li> <li>多版本方案对�?/li> <li>局部重绘功�?/li> <li>图层编辑管理</li> <li>平面简图生�?/li> <li>提案PPT自动生成</li> <li>作品集管�?/li> <li>团队协作共享</li> </ul> </div> <div class="mode-visual"> <div style="text-align:center;color:var(--text-secondary);"> <div style="font-size:48px;margin-bottom:16px;">🖌</div> <div style="font-size:14px;">专业画布 · 精细编辑</div> <div style="font-size:12px;color:var(--text-muted);margin-top:8px;">（功能演示占位，模型上线后替换）</div> </div> </div> </div> </div> </section>  <section> <div class="container"> <div class="section-head"> <span class="section-tag">适用场景</span> <h2>谁在使用展览AI画布</h2> <p>从参展企业到设计公司，不同角色各取所需</p> </div> <div class="audience-grid"> <div class="audience-card"> <div class="audience-icon">🏢</div> <h4>参展企业</h4> <p>快速预览展台效果，对比多家设计方案，降低沟通成本，加速决策�?/p> </div> <div class="audience-card"> <div class="audience-icon">🎯</div> <h4>会展策划�?/h4> <p>快速产出多套概念方案，向客户提案展示，提升成单率与专业度�?/p> </div> <div class="audience-card"> <div class="audience-icon">🎨</div> <h4>展台设计�?/h4> <p>AI辅助快速出图，专注创意与细节打磨，产出效率提升数倍�?/p> </div> <div class="audience-card"> <div class="audience-icon">🏭</div> <h4>展览工厂</h4> <p>快速理解设计意图，平面简图辅助报价核算，减少反复沟通�?/p> </div> <div class="audience-card"> <div class="audience-icon">📋</div> <h4>项目管理�?/h4> <p>方案版本统一管理，进度追踪，团队协作高效同步�?/p> </div> <div class="audience-card"> <div class="audience-icon">💼</div> <h4>业务销售人�?/h4> <p>现场快速生成效果图给客户看，直观展示，提升谈单成功率�?/p> </div> </div> </div> </section>  <section class="integration-section"> <div class="container"> <div class="integration-box"> <h3>🔗 与展会AI秘书深度联动</h3> <p class="lead">展览AI画布不是孤立工具，与展会智能AI秘书数据互通，形成完整的会展数字化工作�?/p> <div class="integration-flow"> <div class="flow-step">💬 AI对话描述需�?/div> <div class="flow-arrow">�?/div> <div class="flow-step">🎨 AI画布生成效果�?/div> <div class="flow-arrow">�?/div> <div class="flow-step">📊 自动创建项目台账</div> <div class="flow-arrow">�?/div> <div class="flow-step">📅 日历自动排期</div> </div> </div> </div> </section>  <section class="cta-section"> <div class="container"> <div class="cta-box"> <h2>体验AI驱动的展台设�?/h2> <p>文生图免费体验，专业版会员解锁全部功�?/p> <div class="cta-buttons"> <a href="#" class="btn btn-primary btn-lg"> 免费体验文生�? </a> <a href="index.html#pricing" class="btn btn-outline btn-lg"> 查看会员价格 �? </a> </div> </div> </div> </section>   <footer> <div class="container"> <div class="footer-grid"> <div class="footer-brand"> <div class="logo"> <div class="logo-icon">☁️</div> <span>展品云</span> </div> <p>会展行业一体化双AI平台<br>让每一家会展公司都拥有自己的AI团队</p> </div> <div class="footer-col"> <h5>产品</h5> <ul> <li><a href="aicanvas.php">展览AI画布</a></li> <li><a href="ai-secretary.php">展会AI秘书</a></li> <li><a href="download.php">下载中心</a></li> <li><a href="pricing.php">价格方案</a></li> </ul> </div> <div class="footer-col"> <h5>平台</h5> <ul> <li><a href="serve.php">服务市场</a></li> <li><a href="shop.php">商家展示</a></li> <li><a href="demand.php">托管发单</a></li> <li><a href="community.php">行业社区</a></li> </ul> </div> <div class="footer-col"> <h5>资源</h5> <ul> <li><a href="#">帮助中心</a></li> <li><a href="#">开发文档</a></li> <li><a href="download.php">更新日志</a></li> <li><a href="#">常见问题</a></li> </ul> </div> <div class="footer-col"> <h5>关于</h5> <ul> <li><a href="about.php">公司介绍</a></li> <li><a href="about.php">联系我们</a></li> <li><a href="#">隐私政策</a></li> <li><a href="#">用户协议</a></li> </ul> </div> </div> <div class="footer-bottom"> © 2026 展品云 ZhanPinYun. All rights reserved. 粤ICP备14065977号 </div> </div> </footer> </body> </html>