nkkj
/
yss-project


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FAQ & 问题解答 - 映三色项目报告</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #00d4ff;
            --secondary-color: #0099cc;
            --dark-bg: #0a0a0a;
            --card-bg: #1a1a1a;
            --text-primary: #ffffff;
            --text-secondary: #cccccc;
            --success-color: #28a745;
            --warning-color: #ffc107;
            --danger-color: #dc3545;
            --info-color: #17a2b8;
        }

        body {
            background: var(--dark-bg);
            color: var(--text-primary);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .header {
            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
            padding: 20px 0;
            border-bottom: 2px solid var(--primary-color);
        }

        .faq-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px;
        }

        .faq-category {
            background: rgba(26, 26, 26, 0.9);
            border-radius: 15px;
            margin-bottom: 30px;
            overflow: hidden;
            border: 1px solid rgba(0, 212, 255, 0.2);
            transition: all 0.3s ease;
        }

        .faq-category:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 212, 255, 0.1);
        }

        .category-header {
            background: linear-gradient(135deg, var(--primary-color) 0%, #667eea 100%);
            color: white;
            padding: 20px 30px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .category-content {
            padding: 0;
            max-height: 0;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .category-content.active {
            max-height: none;
            padding: 30px;
        }

        .faq-item {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 10px;
            margin-bottom: 20px;
            overflow: hidden;
            border: 1px solid rgba(0, 212, 255, 0.2);
        }

        .faq-question {
            padding: 20px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.3s ease;
            background: rgba(0, 212, 255, 0.05);
        }

        .faq-question:hover {
            background: rgba(0, 212, 255, 0.1);
        }

        .faq-question h5 {
            margin: 0;
            color: var(--primary-color);
            font-weight: 600;
        }

        .faq-answer {
            padding: 0 20px;
            max-height: 0;
            overflow: hidden;
            transition: all 0.3s ease;
            background: rgba(0, 0, 0, 0.2);
        }

        .faq-answer.active {
            padding: 20px;
            max-height: none;
        }

        .faq-answer p {
            color: var(--text-secondary);
            line-height: 1.6;
            margin-bottom: 15px;
        }

        .faq-answer ul {
            color: var(--text-secondary);
            padding-left: 20px;
        }

        .faq-answer li {
            margin-bottom: 8px;
        }

        .highlight-box {
            background: rgba(255, 193, 7, 0.1);
            border-left: 4px solid var(--warning-color);
            padding: 15px;
            margin: 15px 0;
            border-radius: 0 8px 8px 0;
        }

        .solution-box {
            background: rgba(40, 167, 69, 0.1);
            border-left: 4px solid var(--success-color);
            padding: 15px;
            margin: 15px 0;
            border-radius: 0 8px 8px 0;
        }

        .warning-box {
            background: rgba(220, 53, 69, 0.1);
            border-left: 4px solid var(--danger-color);
            padding: 15px;
            margin: 15px 0;
            border-radius: 0 8px 8px 0;
        }

        .toggle-icon {
            transition: transform 0.3s ease;
            color: white;
        }

        .toggle-icon.rotated {
            transform: rotate(180deg);
        }

        .back-btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            color: white;
            padding: 10px 20px;
            border-radius: 25px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            transition: all 0.3s ease;
        }

        .back-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
            color: white;
        }

        .stats-overview {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }

        .stat-card {
            background: rgba(26, 26, 26, 0.8);
            border-radius: 10px;
            padding: 25px;
            text-align: center;
            border: 1px solid rgba(0, 212, 255, 0.3);
            transition: all 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 212, 255, 0.2);
        }

        .stat-number {
            font-size: 2.5rem;
            font-weight: bold;
            background: linear-gradient(45deg, var(--primary-color), #667eea);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            display: block;
            margin-bottom: 10px;
        }

        .stat-label {
            color: var(--text-secondary);
            font-size: 0.9rem;
        }

        .search-box {
            background: rgba(26, 26, 26, 0.8);
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 30px;
            border: 1px solid rgba(0, 212, 255, 0.3);
        }

        .search-input {
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(0, 212, 255, 0.3);
            border-radius: 25px;
            color: var(--text-primary);
            padding: 12px 20px;
            width: 100%;
        }

        .search-input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.2rem rgba(0, 212, 255, 0.25);
            background: rgba(0, 0, 0, 0.7);
            color: var(--text-primary);
        }

        .search-input::placeholder {
            color: var(--text-secondary);
        }

        @media (max-width: 768px) {
            .faq-container {
                padding: 20px 10px;
            }
            
            .category-header {
                padding: 15px 20px;
            }
            
            .category-content.active {
                padding: 20px;
            }
            
            .stats-overview {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    </style>
</head>
<body>
    <header class="header">
        <div class="container">
            <nav class="breadcrumb">
                <a class="breadcrumb-item" href="index.html" style="color: var(--primary-color); text-decoration: none;">
                    <i class="fas fa-home me-2"></i>首页
                </a>
                <span class="breadcrumb-item active" style="color: var(--text-secondary);">FAQ & 问题解答</span>
            </nav>
            <div class="d-flex justify-content-between align-items-center mt-3">
                <h1 class="mb-0">
                    <i class="fas fa-question-circle me-2"></i>FAQ & 问题解答
                </h1>
                <a href="index.html" class="back-btn">
                    <i class="fas fa-arrow-left me-2"></i>返回首页
                </a>
            </div>
        </div>
    </header>

    <div class="faq-container">
        <!-- 统计概览 -->
        <div class="stats-overview animate__animated animate__fadeIn">
            <div class="stat-card">
                <span class="stat-number">5</span>
                <div class="stat-label">主要问题类别</div>
            </div>
            <div class="stat-card">
                <span class="stat-number">25+</span>
                <div class="stat-label">常见问题</div>
            </div>
            <div class="stat-card">
                <span class="stat-number">95%</span>
                <div class="stat-label">问题覆盖率</div>
            </div>
            <div class="stat-card">
                <span class="stat-number">3分钟</span>
                <div class="stat-label">平均解答时间</div>
            </div>
        </div>

        <!-- 搜索框 -->
        <div class="search-box animate__animated animate__fadeIn animate__delay-1s">
            <div class="d-flex align-items-center">
                <i class="fas fa-search me-3" style="color: var(--primary-color);"></i>
                <input type="text" class="search-input" placeholder="搜索问题关键词..." id="searchInput">
            </div>
        </div>

        <!-- 项目流程悖论 -->
        <div class="faq-category animate__animated animate__fadeInUp">
            <div class="category-header" onclick="toggleCategory(this)">
                <h3><i class="fas fa-exclamation-triangle me-2"></i>项目流程的悖论与矛盾</h3>
                <i class="fas fa-chevron-down toggle-icon"></i>
            </div>
            <div class="category-content">
                <div class="faq-item">
                    <div class="faq-question" onclick="toggleFAQ(this)">
                        <h5>为什么内部SOP很复杂，但客户只是想看效果图？</h5>
                        <i class="fas fa-chevron-down toggle-icon"></i>
                    </div>
                    <div class="faq-answer">
                        <div class="highlight-box">
                            <strong>核心矛盾：</strong>内部质量控制需求 vs 客户简单需求
                        </div>
                        <p>这是映三色面临的主要业务悖论。内部建立了复杂的SOP流程来确保设计质量和项目管控，但大部分客户购买效果图的目的相对简单。</p>
                        
                        <div class="solution-box">
                            <strong>解决方案：</strong>
                            <ul>
                                <li><strong>双轨制服务：</strong>为不同类型客户提供差异化服务</li>
                                <li><strong>简化客户体验：</strong>复杂流程在后台执行，客户界面保持简洁</li>
                                <li><strong>透明度选择：</strong>让客户选择参与流程的深度</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="faq-item">
                    <div class="faq-question" onclick="toggleFAQ(this)">
                        <h5>客户拿效果图主要用来做什么？</h5>
                        <i class="fas fa-chevron-down toggle-icon"></i>
                    </div>
                    <div class="faq-answer">
                        <p>根据会议分析，客户使用效果图的主要场景包括：</p>
                        <ul>
                            <li><strong>谈单签约（占更多比例）：</strong>用于展示设计效果，帮助签署装修合同</li>
                            <li><strong>施工执行：</strong>作为施工指导，确保实际效果与设计一致</li>
                        </ul>
                        
                        <div class="highlight-box">
                            <strong>业务启示：</strong>大部分客户更关注视觉效果和营销价值，而非技术细节
                        </div>
                    </div>
                </div>

                <div class="faq-item">
                    <div class="faq-question" onclick="toggleFAQ(this)">
                        <h5>未来趋势如何影响业务模式？</h5>
                        <i class="fas fa-chevron-down toggle-icon"></i>
                    </div>
                    <div class="faq-answer">
                        <div class="solution-box">
                            <strong>未来业务趋势：</strong>
                            <ul>
                                <li><strong>中低价格市场：</strong>AI出效果图，注重速度和成本效益</li>
                                <li><strong>高端项目市场：</strong>精准控制，完整建模项目流程</li>
                            </ul>
                        </div>
                        <p>这要求映三色建立差异化的服务体系，既能满足快速出图需求，又能保持高端定制服务的竞争优势。</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 系统功能相关 -->
        <div class="faq-category animate__animated animate__fadeInUp animate__delay-1s">
            <div class="category-header" onclick="toggleCategory(this)">
                <h3><i class="fas fa-cogs me-2"></i>系统功能相关</h3>
                <i class="fas fa-chevron-down toggle-icon"></i>
            </div>
            <div class="category-content">
                <div class="faq-item">
                    <div class="faq-question" onclick="toggleFAQ(this)">
                        <h5>为什么要移除项目详情的单独导航？</h5>
                        <i class="fas fa-chevron-down toggle-icon"></i>
                    </div>
                    <div class="faq-answer">
                        <p>会议决定采用全局统一的项目详情页面设计，主要原因：</p>
                        <ul>
                            <li><strong>简化导航结构：</strong>减少菜单复杂度，提升用户体验</li>
                            <li><strong>统一用户体验：</strong>所有端口使用相同的项目详情页面</li>
                            <li><strong>便于维护：</strong>一套代码多端复用，降低开发成本</li>
                            <li><strong>信息一致性：</strong>确保不同端口看到的项目信息完全一致</li>
                        </ul>
                        
                        <div class="solution-box">
                            <strong>实现方式：</strong>通过项目列表点击进入详情页，而不是独立的导航入口
                        </div>
                    </div>
                </div>

                <div class="faq-item">
                    <div class="faq-question" onclick="toggleFAQ(this)">
                        <h5>企业微信集成需要实现哪些功能？</h5>
                        <i class="fas fa-chevron-down toggle-icon"></i>
                    </div>
                    <div class="faq-answer">
                        <p>企业微信集成是提升工作效率的关键技术点：</p>
                        <ul>
                            <li><strong>信息同步：</strong>同步企业微信中的客户和项目信息</li>
                            <li><strong>快速跳转：</strong>点击客户名称直接跳转到对应聊天窗口</li>
                            <li><strong>状态管理：</strong>在系统中直接设置休息状态，同步到企业微信</li>
                            <li><strong>消息提醒：</strong>重要项目状态变更自动推送企业微信消息</li>
                        </ul>
                        
                        <div class="highlight-box">
                            <strong>技术要求：</strong>需要调用企业微信API，确保数据安全和实时同步
                        </div>
                    </div>
                </div>

                <div class="faq-item">
                    <div class="faq-question" onclick="toggleFAQ(this)">
                        <h5>小程序创建订单与人工创建有什么区别？</h5>
                        <i class="fas fa-chevron-down toggle-icon"></i>
                    </div>
                    <div class="faq-answer">
                        <div class="solution-box">
                            <strong>小程序创建订单：</strong>
                            <ul>
                                <li>自动同步项目信息和客户信息</li>
                                <li>减少人工录入错误</li>
                                <li>提高订单分配效率</li>
                                <li>客户信息已预填充</li>
                            </ul>
                        </div>
                        
                        <div class="highlight-box">
                            <strong>人工手动创建：</strong>
                            <ul>
                                <li>适用于特殊情况和定制需求</li>
                                <li>需要手动填写项目信息（风格、小组、首付款、首稿时间）</li>
                                <li>客户信息：姓名、手机号必填，新客户需要填写详细信息</li>
                                <li>灵活性更高，可处理复杂订单</li>
                            </ul>
                        </div>
                        
                        <p><strong>建议：</strong>优先使用小程序创建，特殊情况才使用人工创建。</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 人员管理相关 -->
        <div class="faq-category animate__animated animate__fadeInUp animate__delay-2s">
            <div class="category-header" onclick="toggleCategory(this)">
                <h3><i class="fas fa-users me-2"></i>人员管理相关</h3>
                <i class="fas fa-chevron-down toggle-icon"></i>
            </div>
            <div class="category-content">
                <div class="faq-item">
                    <div class="faq-question" onclick="toggleFAQ(this)">
                        <h5>设计师休息管理如何优化？</h5>
                        <i class="fas fa-chevron-down toggle-icon"></i>
                    </div>
                    <div class="faq-answer">
                        <p>当前存在的问题：70-80%的设计师不主动报备休息状态，影响项目安排。</p>
                        
                        <div class="solution-box">
                            <strong>优化方案：</strong>
                            <ul>
                                <li><strong>简化操作：</strong>组员工作台直接点击休息，选择时间即可</li>
                                <li><strong>移动支持：</strong>支持企业微信手机端操作，随时随地设置</li>
                                <li><strong>智能提醒：</strong>项目积压过多时，系统提示联系组长协调</li>
                                <li><strong>审核机制：</strong>有紧急项目时需要组长审核才能休息</li>
                            </ul>
                        </div>
                        
                        <div class="warning-box">
                            <strong>特殊情况：</strong>客服人员休息需要设置代班客服，确保客户服务不中断
                        </div>
                    </div>
                </div>

                <div class="faq-item">
                    <div class="faq-question" onclick="toggleFAQ(this)">
                        <h5>如何区分劳动关系和劳务关系员工管理？</h5>
                        <i class="fas fa-chevron-down toggle-icon"></i>
                    </div>
                    <div class="faq-answer">
                        <div class="solution-box">
                            <strong>劳动关系（全职员工）：</strong>
                            <ul>
                                <li>每日上班严格管理</li>
                                <li>标准考勤制度</li>
                                <li>固定工作时间和地点</li>
                                <li>完整的社保福利</li>
                            </ul>
                        </div>
                        
                        <div class="highlight-box">
                            <strong>劳务关系（外包人员）：</strong>
                            <ul>
                                <li>标记是否可以接单状态（开放中/暂停接单）</li>
                                <li>工作状态评定（能力技能、项目质量）</li>
                                <li>灵活的工作安排</li>
                                <li>按项目结算报酬</li>
                            </ul>
                        </div>
                        
                        <p><strong>管理要点：</strong>系统需要支持不同类型员工的差异化管理模式。</p>
                    </div>
                </div>

                <div class="faq-item">
                    <div class="faq-question" onclick="toggleFAQ(this)">
                        <h5>721绩效考核体系如何实施？</h5>
                        <i class="fas fa-chevron-down toggle-icon"></i>
                    </div>
                    <div class="faq-answer">
                        <p>721绩效考核是组长端的重要功能，支持多维度、多周期的绩效评估：</p>
                        
                        <div class="solution-box">
                            <strong>考核维度分配：</strong>
                            <ul>
                                <li><strong>70% - 业绩表现：</strong>项目完成质量、客户满意度、交付及时性</li>
                                <li><strong>20% - 能力发展：</strong>技能提升、学习成长、创新表现</li>
                                <li><strong>10% - 团队协作：</strong>沟通配合、知识分享、团队贡献</li>
                            </ul>
                        </div>
                        
                        <div class="highlight-box">
                            <strong>考核周期：</strong>
                            <ul>
                                <li>月度考核：及时反馈和调整</li>
                                <li>季度考核：阶段性总结和规划</li>
                                <li>年度考核：综合评价和晋升决策</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 项目流程相关 -->
        <div class="faq-category animate__animated animate__fadeInUp animate__delay-3s">
            <div class="category-header" onclick="toggleCategory(this)">
                <h3><i class="fas fa-project-diagram me-2"></i>项目流程相关</h3>
                <i class="fas fa-chevron-down toggle-icon"></i>
            </div>
            <div class="category-content">
                <div class="faq-item">
                    <div class="faq-question" onclick="toggleFAQ(this)">
                        <h5>哪些信息是项目必备的基础信息？</h5>
                        <i class="fas fa-chevron-down toggle-icon"></i>
                    </div>
                    <div class="faq-answer">
                        <div class="warning-box">
                            <strong>必备基础信息（没有不能开始项目）：</strong>
                            <ul>
                                <li>平面图</li>
                                <li>立面/天花图</li>
                                <li>参考图</li>
                                <li>作图标准</li>
                                <li>高端图/中端图规格</li>
                                <li>小图时间（效果图交付时间）</li>
                                <li>风格要求</li>
                            </ul>
                        </div>
                        
                        <div class="solution-box">
                            <strong>扩展需求补充（影响交付质量）：</strong>
                            <ul>
                                <li>大图时间</li>
                                <li>软装色彩参考图</li>
                                <li>CAD立面/天花（一个月只有一两个没有CAD的）</li>
                                <li>细节的形状与结构</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="faq-item">
                    <div class="faq-question" onclick="toggleFAQ(this)">
                        <h5>什么情况下需要拉群确认方案？</h5>
                        <i class="fas fa-chevron-down toggle-icon"></i>
                    </div>
                    <div class="faq-answer">
                        <p>拉群进行派单和方案细节确认的判断标准：</p>
                        <ul>
                            <li><strong>不需要拉群：</strong>CAD、参考图完整，信息清晰明确</li>
                            <li><strong>需要拉群：</strong>立面做法不明确、天花设计复杂、整体氛围需求模糊</li>
                        </ul>
                        
                        <div class="highlight-box">
                            <strong>拉群讨论内容：</strong>
                            <ul>
                                <li>立面具体做法</li>
                                <li>天花设计方案</li>
                                <li>整体氛围需求确认</li>
                                <li>特殊材质和工艺要求</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="faq-item">
                    <div class="faq-question" onclick="toggleFAQ(this)">
                        <h5>客户确认环节如何优化？</h5>
                        <i class="fas fa-chevron-down toggle-icon"></i>
                    </div>
                    <div class="faq-answer">
                        <p>根据客户类型采用不同的确认策略：</p>
                        
                        <div class="solution-box">
                            <strong>专业客户：</strong>
                            <ul>
                                <li>建模阶段：发送截图确认空间、结构、形状</li>
                                <li>软装阶段：确认家具摆放和选品方向</li>
                                <li>渲染阶段：小图确认氛围、细节、软装效果</li>
                            </ul>
                        </div>
                        
                        <div class="warning-box">
                            <strong>非专业客户：</strong>
                            <ul>
                                <li>建模阶段：建议不要确认，避免增加麻烦</li>
                                <li>重点在小图阶段确认最终效果</li>
                                <li>减少中间环节，提高效率</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 技术实现相关 -->
        <div class="faq-category animate__animated animate__fadeInUp animate__delay-4s">
            <div class="category-header" onclick="toggleCategory(this)">
                <h3><i class="fas fa-code me-2"></i>技术实现相关</h3>
                <i class="fas fa-chevron-down toggle-icon"></i>
            </div>
            <div class="category-content">
                <div class="faq-item">
                    <div class="faq-question" onclick="toggleFAQ(this)">
                        <h5>敏感词识别如何提升响应速度？</h5>
                        <i class="fas fa-chevron-down toggle-icon"></i>
                    </div>
                    <div class="faq-answer">
                        <p>当前问题：敏感词（发手机、发邮箱、找不到人、群里没有回复）识别不够及时。</p>
                        
                        <div class="solution-box">
                            <strong>优化方案：</strong>
                            <ul>
                                <li><strong>实时监控：</strong>企业微信消息实时扫描敏感词</li>
                                <li><strong>智能提醒：</strong>昨天十点客户发消息，今天十二点没回复就提示</li>
                                <li><strong>时间阈值：</strong>设置1小时未回复的自动提醒</li>
                                <li><strong>分级处理：</strong>不同敏感词采用不同的处理优先级</li>
                            </ul>
                        </div>
                        
                        <div class="highlight-box">
                            <strong>技术实现：</strong>需要集成自然语言处理和实时消息监控功能
                        </div>
                    </div>
                </div>

                <div class="faq-item">
                    <div class="faq-question" onclick="toggleFAQ(this)">
                        <h5>案例库的分享统计功能如何实现？</h5>
                        <i class="fas fa-chevron-down toggle-icon"></i>
                    </div>
                    <div class="faq-answer">
                        <p>案例库需要支持多维度的分享和统计功能：</p>
                        
                        <div class="solution-box">
                            <strong>分享功能：</strong>
                            <ul>
                                <li>弹出二维码分享</li>
                                <li>复制链接分享</li>
                                <li>社交媒体分享</li>
                                <li>微信小程序分享</li>
                            </ul>
                        </div>
                        
                        <div class="highlight-box">
                            <strong>统计维度：</strong>
                            <ul>
                                <li>转发次数统计</li>
                                <li>客户点赞收藏</li>
                                <li>浏览时长分析</li>
                                <li>客户关注行为跟踪</li>
                            </ul>
                        </div>
                        
                        <div class="warning-box">
                            <strong>隐私保护：</strong>设计师信息对外部不显示，避免档期问题
                        </div>
                    </div>
                </div>

                <div class="faq-item">
                    <div class="faq-question" onclick="toggleFAQ(this)">
                        <h5>大图渲染的4K标准如何确保？</h5>
                        <i class="fas fa-chevron-down toggle-icon"></i>
                    </div>
                    <div class="faq-answer">
                        <p>大图渲染是项目交付的关键环节，需要严格的质量标准：</p>
                        
                        <div class="solution-box">
                            <strong>技术标准：</strong>
                            <ul>
                                <li><strong>分辨率：</strong>最长边像素达到4000以上</li>
                                <li><strong>清晰度：</strong>相当于4K清晰度，支持打印到工地</li>
                                <li><strong>细节：</strong>放大后能清楚看到细节</li>
                                <li><strong>时间：</strong>每张渲染6-8小时</li>
                            </ul>
                        </div>
                        
                        <div class="highlight-box">
                            <strong>质量控制：</strong>
                            <ul>
                                <li>自动检测图片分辨率</li>
                                <li>色彩准确性验证</li>
                                <li>文件格式标准化</li>
                                <li>渲染时间监控</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script>
        // 切换类别显示/隐藏
        function toggleCategory(header) {
            const content = header.nextElementSibling;
            const icon = header.querySelector('.toggle-icon');
            
            content.classList.toggle('active');
            icon.classList.toggle('rotated');
        }

        // 切换FAQ项显示/隐藏
        function toggleFAQ(question) {
            const answer = question.nextElementSibling;
            const icon = question.querySelector('.toggle-icon');
            
            answer.classList.toggle('active');
            icon.classList.toggle('rotated');
        }

        // 搜索功能
        document.getElementById('searchInput').addEventListener('input', function(e) {
            const searchTerm = e.target.value.toLowerCase();
            const faqItems = document.querySelectorAll('.faq-item');
            
            faqItems.forEach(item => {
                const question = item.querySelector('.faq-question h5').textContent.toLowerCase();
                const answer = item.querySelector('.faq-answer').textContent.toLowerCase();
                
                if (question.includes(searchTerm) || answer.includes(searchTerm)) {
                    item.style.display = 'block';
                    // 高亮搜索结果
                    if (searchTerm) {
                        item.style.background = 'rgba(0, 212, 255, 0.1)';
                        item.style.border = '1px solid var(--primary-color)';
                    } else {
                        item.style.background = '';
                        item.style.border = '';
                    }
                } else {
                    item.style.display = searchTerm ? 'none' : 'block';
                    item.style.background = '';
                    item.style.border = '';
                }
            });
            
            // 显示/隐藏类别
            const categories = document.querySelectorAll('.faq-category');
            categories.forEach(category => {
                const visibleItems = category.querySelectorAll('.faq-item[style*="display: block"], .faq-item:not([style*="display: none"])');
                if (searchTerm && visibleItems.length === 0) {
                    category.style.display = 'none';
                } else {
                    category.style.display = 'block';
                }
            });
        });

        // 初始化第一个类别展开
        document.addEventListener('DOMContentLoaded', function() {
            const firstCategory = document.querySelector('.faq-category .category-content');
            const firstIcon = document.querySelector('.faq-category .toggle-icon');
            
            if (firstCategory && firstIcon) {
                firstCategory.classList.add('active');
                firstIcon.classList.add('rotated');
            }

            // 统计数字动画
            animateNumbers();
        });

        function animateNumbers() {
            const numbers = document.querySelectorAll('.stat-number');
            numbers.forEach(num => {
                const text = num.textContent;
                const hasPercent = text.includes('%');
                const hasPlus = text.includes('+');
                const finalNumber = parseInt(text);
                
                if (!isNaN(finalNumber)) {
                    let current = 0;
                    const increment = finalNumber / 30;
                    
                    const timer = setInterval(() => {
                        current += increment;
                        if (current >= finalNumber) {
                            num.textContent = finalNumber + (hasPercent ? '%' : '') + (hasPlus ? '+' : '') + (text.includes('分钟') ? '分钟' : '');
                            clearInterval(timer);
                        } else {
                            num.textContent = Math.floor(current) + (hasPercent ? '%' : '') + (hasPlus ? '+' : '');
                        }
                    }, 50);
                }
            });
        }

        // 滚动到搜索结果
        function scrollToFirstResult() {
            const visibleItem = document.querySelector('.faq-item[style*="background"]');
            if (visibleItem) {
                visibleItem.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }
        }

        // 回车键搜索
        document.getElementById('searchInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                scrollToFirstResult();
            }
        });
    </script>
</body>
</html>