nkkj
/
yss-project


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>各端模块详情 - 映三色项目报告</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;
        }

        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);
        }

        .breadcrumb {
            background: transparent;
            margin-bottom: 0;
        }

        .breadcrumb-item a {
            color: var(--primary-color);
            text-decoration: none;
        }

        .breadcrumb-item.active {
            color: var(--text-secondary);
        }

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

        .module-card {
            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;
        }

        .module-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 212, 255, 0.1);
            border-color: var(--primary-color);
        }

        .module-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;
        }

        .module-header h3 {
            margin: 0;
            font-size: 1.5rem;
            display: flex;
            align-items: center;
        }

        .module-header i {
            margin-right: 10px;
        }

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

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

        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }

        .feature-item {
            background: rgba(0, 212, 255, 0.1);
            border-radius: 10px;
            padding: 20px;
            border-left: 4px solid var(--primary-color);
            transition: all 0.3s ease;
        }

        .feature-item:hover {
            background: rgba(0, 212, 255, 0.2);
            transform: translateX(5px);
        }

        .feature-title {
            font-weight: bold;
            color: var(--primary-color);
            margin-bottom: 10px;
        }

        .feature-desc {
            color: var(--text-secondary);
            line-height: 1.6;
        }

        .sub-section {
            margin: 20px 0;
            padding: 20px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 10px;
            border-left: 3px solid var(--secondary-color);
        }

        .sub-section h5 {
            color: var(--secondary-color);
            margin-bottom: 15px;
        }

        .tech-detail {
            background: rgba(255, 193, 7, 0.1);
            border-left: 3px solid var(--warning-color);
            padding: 15px;
            margin: 10px 0;
            border-radius: 5px;
        }

        .tech-detail .badge {
            background: var(--warning-color);
            color: #000;
        }

        .priority-high {
            border-left-color: var(--danger-color);
            background: rgba(220, 53, 69, 0.1);
        }

        .priority-medium {
            border-left-color: var(--warning-color);
            background: rgba(255, 193, 7, 0.1);
        }

        .priority-low {
            border-left-color: var(--success-color);
            background: rgba(40, 167, 69, 0.1);
        }

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

        .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-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 15px;
            margin: 20px 0;
        }

        .stat-item {
            text-align: center;
            padding: 15px;
            background: rgba(0, 212, 255, 0.1);
            border-radius: 10px;
        }

        .stat-number {
            font-size: 1.8rem;
            font-weight: bold;
            color: var(--primary-color);
            display: block;
        }

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

        @media (max-width: 768px) {
            .module-container {
                padding: 20px 10px;
            }
            
            .module-header {
                padding: 15px 20px;
            }
            
            .module-content.active {
                padding: 20px;
            }
            
            .feature-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <header class="header">
        <div class="container">
            <nav class="breadcrumb">
                <a class="breadcrumb-item" href="index.html">
                    <i class="fas fa-home me-2"></i>首页
                </a>
                <span class="breadcrumb-item active">各端模块详情</span>
            </nav>
            <div class="d-flex justify-content-between align-items-center mt-3">
                <h1 class="mb-0">
                    <i class="fas fa-desktop me-2"></i>各端模块详情
                </h1>
                <a href="index.html" class="back-btn">
                    <i class="fas fa-arrow-left me-2"></i>返回首页
                </a>
            </div>
        </div>
    </header>

    <div class="module-container">
        <!-- 统计概览 -->
        <div class="stats-row animate__animated animate__fadeIn">
            <div class="stat-item">
                <span class="stat-number">6</span>
                <div class="stat-label">系统端口</div>
            </div>
            <div class="stat-item">
                <span class="stat-number">25+</span>
                <div class="stat-label">核心功能</div>
            </div>
            <div class="stat-item">
                <span class="stat-number">15+</span>
                <div class="stat-label">技术要点</div>
            </div>
            <div class="stat-item">
                <span class="stat-number">10+</span>
                <div class="stat-label">优化建议</div>
            </div>
        </div>

        <!-- 客服端 -->
        <div class="module-card animate__animated animate__fadeInUp">
            <div class="module-header" onclick="toggleModule(this)">
                <h3><i class="fas fa-headset"></i>客服端</h3>
                <i class="fas fa-chevron-down toggle-icon"></i>
            </div>
            <div class="module-content">
                <div class="feature-grid">
                    <div class="feature-item priority-high">
                        <div class="feature-title">
                            <i class="fas fa-desktop me-2"></i>工作台
                        </div>
                        <div class="feature-desc">
                            客服人员的核心工作区域，提供整体业务概览和快速操作入口
                        </div>
                    </div>
                    
                    <div class="feature-item priority-high">
                        <div class="feature-title">
                            <i class="fas fa-comments me-2"></i>客户咨询
                        </div>
                        <div class="feature-desc">
                            处理新客户触达和老客户回访，支持价值导向和价格敏感客户的差异化沟通
                        </div>
                    </div>
                </div>

                <div class="sub-section">
                    <h5><i class="fas fa-cog me-2"></i>核心功能</h5>
                    <div class="feature-grid">
                        <div class="feature-item">
                            <div class="feature-title">新客户触达</div>
                            <div class="feature-desc">通过多渠道获取新客户信息，建立初次联系</div>
                        </div>
                        <div class="feature-item">
                            <div class="feature-title">老客户回访</div>
                            <div class="feature-desc">定期回访老客户，维护客户关系，挖掘二次需求</div>
                        </div>
                        <div class="feature-item">
                            <div class="feature-title">价值敏感客户</div>
                            <div class="feature-desc">推荐优质方案和作品案例，突出价值优势</div>
                        </div>
                        <div class="feature-item">
                            <div class="feature-title">价格敏感客户</div>
                            <div class="feature-desc">强调差异化服务和高端定位，合理引导期望</div>
                        </div>
                    </div>
                </div>

                <div class="tech-detail">
                    <span class="badge me-2">技术细节</span>
                    <strong>企业微信集成：</strong>需要同步企业微信信息，支持点击跳转到对应聊天窗口
                </div>

                <div class="sub-section">
                    <h5><i class="fas fa-plus-circle me-2"></i>创建订单功能</h5>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="feature-item">
                                <div class="feature-title">小程序创建</div>
                                <div class="feature-desc">
                                    • 自动同步项目信息<br>
                                    • 自动同步客户信息<br>
                                    • 减少人工录入错误
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="feature-item">
                                <div class="feature-title">人工手动创建</div>
                                <div class="feature-desc">
                                    • 项目信息：风格、小组匹配、首付款、首稿时间<br>
                                    • 客户信息：姓名、手机号（必填）<br>
                                    • 新客户需手动填写详细信息
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="feature-grid mt-3">
                    <div class="feature-item priority-medium">
                        <div class="feature-title">
                            <i class="fas fa-list me-2"></i>项目列表
                        </div>
                        <div class="feature-desc">
                            显示所有项目的列表视图，支持筛选和排序功能
                        </div>
                    </div>
                    
                    <div class="feature-item priority-low">
                        <div class="feature-title">
                            <i class="fas fa-folder-open me-2"></i>案例库
                        </div>
                        <div class="feature-desc">
                            参考小程序内容细节，支持案例分享、统计和关键词搜索
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 设计师（组员）端 -->
        <div class="module-card animate__animated animate__fadeInUp animate__delay-1s">
            <div class="module-header" onclick="toggleModule(this)">
                <h3><i class="fas fa-paint-brush"></i>设计师（组员）端</h3>
                <i class="fas fa-chevron-down toggle-icon"></i>
            </div>
            <div class="module-content">
                <div class="feature-grid">
                    <div class="feature-item priority-high">
                        <div class="feature-title">
                            <i class="fas fa-tachometer-alt me-2"></i>工作台
                        </div>
                        <div class="feature-desc">
                            显示个人项目概览、代办事项和重要提醒
                        </div>
                    </div>
                    
                    <div class="feature-item priority-medium">
                        <div class="feature-title">
                            <i class="fas fa-chart-radar me-2"></i>能力雷达
                        </div>
                        <div class="feature-desc">
                            展示个人技能水平和知识工具掌握情况
                        </div>
                    </div>
                    
                    <div class="feature-item priority-medium">
                        <div class="feature-title">
                            <i class="fas fa-user-chart me-2"></i>个人看板
                        </div>
                        <div class="feature-desc">
                            显示项目经验和历史完成项目统计
                        </div>
                    </div>
                </div>

                <div class="sub-section">
                    <h5><i class="fas fa-exclamation-triangle me-2"></i>代办反馈系统</h5>
                    <div class="feature-grid">
                        <div class="feature-item">
                            <div class="feature-title">客服反馈</div>
                            <div class="feature-desc">接收来自客服的项目要求和客户反馈</div>
                        </div>
                        <div class="feature-item">
                            <div class="feature-title">组长要求</div>
                            <div class="feature-desc">组长分配的任务，包含时间节点和具体要求</div>
                        </div>
                        <div class="feature-item">
                            <div class="feature-title">客户需求</div>
                            <div class="feature-desc">直接来自客户的反馈和投诉处理</div>
                        </div>
                        <div class="feature-item">
                            <div class="feature-title">财务要求</div>
                            <div class="feature-desc">补充财务核算所需的项目信息</div>
                        </div>
                    </div>
                </div>

                <div class="tech-detail">
                    <span class="badge me-2">重要功能</span>
                    <strong>休息状态管理：</strong>组员可直接点击休息，选择时间。支持企业微信手机端操作。项目积压过多时需组长审核。
                </div>
            </div>
        </div>

        <!-- 组长端 -->
        <div class="module-card animate__animated animate__fadeInUp animate__delay-2s">
            <div class="module-header" onclick="toggleModule(this)">
                <h3><i class="fas fa-users-cog"></i>组长端</h3>
                <i class="fas fa-chevron-down toggle-icon"></i>
            </div>
            <div class="module-content">
                <div class="feature-grid">
                    <div class="feature-item priority-high">
                        <div class="feature-title">
                            <i class="fas fa-exclamation-circle me-2"></i>异常监控
                        </div>
                        <div class="feature-desc">
                            监控项目和人员异常情况，如休息申请冲突、项目延期等
                        </div>
                    </div>
                    
                    <div class="feature-item priority-high">
                        <div class="feature-title">
                            <i class="fas fa-project-diagram me-2"></i>项目总览
                        </div>
                        <div class="feature-desc">
                            通过色块分析展示项目状态，包括紧急项目和问题项目
                        </div>
                    </div>
                </div>

                <div class="sub-section">
                    <h5><i class="fas fa-traffic-light me-2"></i>项目状态管理</h5>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="feature-item priority-high">
                                <div class="feature-title">🔴 紧急项目</div>
                                <div class="feature-desc">
                                    • 今天要看小图的项目<br>
                                    • 明天要对图的项目
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="feature-item priority-high">
                                <div class="feature-title">🔴 问题项目</div>
                                <div class="feature-desc">
                                    • 客户投诉项目<br>
                                    • 敏感词提醒项目
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="feature-item priority-medium">
                                <div class="feature-title">👥 设计师管理</div>
                                <div class="feature-desc">
                                    • 设计师卡片展示<br>
                                    • 项目筛选功能<br>
                                    • 添加组员功能
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="feature-grid">
                    <div class="feature-item priority-medium">
                        <div class="feature-title">
                            <i class="fas fa-chart-line me-2"></i>绩效考核
                        </div>
                        <div class="feature-desc">
                            721比例考核体系，支持月度、季度、年度绩效评估
                        </div>
                    </div>
                    
                    <div class="feature-item priority-medium">
                        <div class="feature-title">
                            <i class="fas fa-quality-control me-2"></i>质量管理
                        </div>
                        <div class="feature-desc">
                            整体SOP数据统计，所有任务都集成在项目详情中
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 财务端 -->
        <div class="module-card animate__animated animate__fadeInUp animate__delay-3s">
            <div class="module-header" onclick="toggleModule(this)">
                <h3><i class="fas fa-calculator"></i>财务端</h3>
                <i class="fas fa-chevron-down toggle-icon"></i>
            </div>
            <div class="module-content">
                <div class="feature-grid">
                    <div class="feature-item priority-medium">
                        <div class="feature-title">
                            <i class="fas fa-chart-bar me-2"></i>统计报表
                        </div>
                        <div class="feature-desc">
                            查看报价相关统计，财务只负责查看，配置由客服端操作
                        </div>
                    </div>
                    
                    <div class="feature-item priority-high">
                        <div class="feature-title">
                            <i class="fas fa-file-invoice me-2"></i>付款对账
                        </div>
                        <div class="feature-desc">
                            优化项目财务管理信息上传，参考之前提供的财务相关表格
                        </div>
                    </div>
                    
                    <div class="feature-item priority-medium">
                        <div class="feature-title">
                            <i class="fas fa-money-bill-wave me-2"></i>收入分配
                        </div>
                        <div class="feature-desc">
                            项目收入的具体分配标准管理
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 人事端 -->
        <div class="module-card animate__animated animate__fadeInUp animate__delay-4s">
            <div class="module-header" onclick="toggleModule(this)">
                <h3><i class="fas fa-user-friends"></i>人事端</h3>
                <i class="fas fa-chevron-down toggle-icon"></i>
            </div>
            <div class="module-content">
                <div class="feature-grid">
                    <div class="feature-item priority-high">
                        <div class="feature-title">
                            <i class="fas fa-tachometer-alt me-2"></i>人事看板
                        </div>
                        <div class="feature-desc">
                            人事工作的中心控制面板
                        </div>
                    </div>
                    
                    <div class="feature-item priority-high">
                        <div class="feature-title">
                            <i class="fas fa-users me-2"></i>员工信息管理
                        </div>
                        <div class="feature-desc">
                            包含身份证号、银行卡号、联系电话等详细信息
                        </div>
                    </div>
                    
                    <div class="feature-item priority-medium">
                        <div class="feature-title">
                            <i class="fas fa-clock me-2"></i>考勤统计
                        </div>
                        <div class="feature-desc">
                            区分劳动关系和劳务关系的不同考勤管理模式
                        </div>
                    </div>
                    
                    <div class="feature-item priority-low">
                        <div class="feature-title">
                            <i class="fas fa-laptop me-2"></i>资产管理
                        </div>
                        <div class="feature-desc">
                            公司设备和资产的管理系统
                        </div>
                    </div>
                </div>

                <div class="sub-section">
                    <h5><i class="fas fa-briefcase me-2"></i>不同员工类型管理</h5>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="feature-item">
                                <div class="feature-title">劳动关系（全职）</div>
                                <div class="feature-desc">
                                    每日上班严格管理，标准考勤制度
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="feature-item">
                                <div class="feature-title">劳务关系（外包）</div>
                                <div class="feature-desc">
                                    • 标记是否可以接单<br>
                                    • 工作状态评定<br>
                                    • 能力技能评估<br>
                                    • 项目质量评价
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 系统管理员 -->
        <div class="module-card animate__animated animate__fadeInUp animate__delay-5s">
            <div class="module-header" onclick="toggleModule(this)">
                <h3><i class="fas fa-cogs"></i>系统管理员</h3>
                <i class="fas fa-chevron-down toggle-icon"></i>
            </div>
            <div class="module-content">
                <div class="feature-grid">
                    <div class="feature-item priority-high">
                        <div class="feature-title">
                            <i class="fas fa-chart-pie me-2"></i>总览看板
                        </div>
                        <div class="feature-desc">
                            整体项目、员工、客户统计和收入增长趋势
                        </div>
                    </div>
                    
                    <div class="feature-item priority-medium">
                        <div class="feature-title">
                            <i class="fas fa-tasks me-2"></i>项目管理
                        </div>
                        <div class="feature-desc">
                            列表形式，可复用在各端
                        </div>
                    </div>
                    
                    <div class="feature-item priority-medium">
                        <div class="feature-title">
                            <i class="fas fa-user-cog me-2"></i>设计师管理
                        </div>
                        <div class="feature-desc">
                            身份管理、所属组长、项目组管理
                        </div>
                    </div>
                    
                    <div class="feature-item priority-medium">
                        <div class="feature-title">
                            <i class="fas fa-user-tag me-2"></i>客户管理
                        </div>
                        <div class="feature-desc">
                            复用客服端详细的客户详情页面
                        </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 toggleModule(header) {
            const content = header.nextElementSibling;
            const icon = header.querySelector('.toggle-icon');
            
            content.classList.toggle('active');
            icon.classList.toggle('rotated');
        }

        // 初始化第一个模块展开
        document.addEventListener('DOMContentLoaded', function() {
            const firstModule = document.querySelector('.module-card .module-content');
            const firstIcon = document.querySelector('.module-card .toggle-icon');
            
            if (firstModule && firstIcon) {
                firstModule.classList.add('active');
                firstIcon.classList.add('rotated');
            }

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

        function animateNumbers() {
            const numbers = document.querySelectorAll('.stat-number');
            numbers.forEach(num => {
                const finalNumber = parseInt(num.textContent);
                let currentNumber = 0;
                const increment = finalNumber / 50;
                
                const timer = setInterval(() => {
                    currentNumber += increment;
                    if (currentNumber >= finalNumber) {
                        num.textContent = finalNumber + (num.textContent.includes('+') ? '+' : '');
                        clearInterval(timer);
                    } else {
                        num.textContent = Math.floor(currentNumber);
                    }
                }, 40);
            });
        }
    </script>
</body>
</html>