18879694722
/
ai-salesperson-assistant


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333
							<!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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #4285f4;
            --primary-light: #8ab4f8;
            --primary-dark: #0a192f;
            --text-dark: #333333;
            --text-light: #f8f9fa;
            --card-bg: #ffffff;
            --border-color: #eaeaea;
            --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            --success: #34a853;
            --warning: #f9ab00;
            --danger: #ea4335;
            --info: #4285f4;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: #f8fafc;
            color: var(--text-dark);
            line-height: 1.6;
            padding-bottom: 40px;
        }
        
        .container {
            max-width: 480px;
            margin: 0 auto;
            padding: 0 16px;
        }
        
        /* 头部导航 */
        .header {
            position: sticky;
            top: 0;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            z-index: 100;
            padding: 16px 0;
            border-bottom: 1px solid var(--border-color);
        }
        
        .nav-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .back-btn {
            background: none;
            border: none;
            font-size: 20px;
            color: var(--text-dark);
            cursor: pointer;
        }
        
        .page-title {
            font-size: 18px;
            font-weight: 700;
            color: var(--primary-dark);
        }
        
        /* 场景选择卡 */
        .section-title {
            font-size: 16px;
            font-weight: 600;
            margin: 24px 0 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .section-title i {
            margin-right: 8px;
            color: var(--primary);
        }
        
        .section-title .edit-btn {
            background: none;
            border: none;
            color: var(--primary-dark);
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .difficulty-tabs {
            display: flex;
            gap: 12px;
            overflow-x: auto;
            padding: 8px 0 16px;
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        
        .difficulty-tabs::-webkit-scrollbar {
            display: none;
        }
        
        .tab {
            flex: 0 0 auto;
            padding: 8px 16px;
            border-radius: 20px;
            background-color: var(--card-bg);
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow);
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .tab.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
            font-weight: 600;
        }
        
        .customer-bubbles {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 8px;
        }
        
        .bubble {
            padding: 10px 16px;
            border-radius: 20px;
            background-color: var(--card-bg);
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow);
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s ease;
            position: relative;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .bubble.active {
            background-color: var(--primary-dark);
            color: white;
            border-color: var(--primary-dark);
        }
        
        .bubble .delete-btn {
            display: none;
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.7);
            font-size: 12px;
            cursor: pointer;
        }
        
        .bubble.active .delete-btn {
            display: block;
        }
        
        .add-bubble {
            padding: 10px 16px;
            border-radius: 20px;
            background-color: var(--card-bg);
            border: 1px dashed var(--border-color);
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            color: #94a3b8;
        }
        
        /* 对话主界面 - 修改部分 */
        .avatar-container {
            display: flex;
            justify-content: center;
            margin: 20px 0;
        }
        
        /* 客户头像缩小到100px */
        .customer-avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: all 0.3s ease;
        }
        
        .customer-avatar::before {
            content: "";
            position: absolute;
            width: 140px;
            height: 140px;
            background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%);
            border-radius: 50%;
        }
        
        /* 头像图标缩小到36px */
        .customer-avatar i {
            font-size: 36px;
            color: white;
        }
        
        /* 聊天框高度增加到320px */
        .conversation-container {
            background-color: var(--card-bg);
            border-radius: 20px;
            box-shadow: var(--shadow);
            padding: 16px;
            margin: 16px 0;
            height: 320px; /* 修改此处 */
            overflow-y: auto;
        }
        
        .message {
            max-width: 80%;
            padding: 12px;
            margin-bottom: 16px;
            border-radius: 18px;
            position: relative;
            animation: fadeIn 0.3s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .customer-message {
            background-color: #f1f5f9;
            border-bottom-left-radius: 4px;
            align-self: flex-start;
        }
        
        .user-message {
            background-color: var(--primary);
            color: white;
            border-bottom-right-radius: 4px;
            margin-left: auto;
        }
        
        .input-area {
            display: flex;
            gap: 12px;
            align-items: center;
            background-color: var(--card-bg);
            border-radius: 30px;
            padding: 12px 20px;
            box-shadow: var(--shadow);
            margin-top: 16px;
        }
        
        .voice-btn {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background-color: var(--primary);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border: none;
            font-size: 20px;
            transition: all 0.3s ease;
        }
        
        .voice-btn.active {
            background-color: var(--danger);
            color: white;
            animation: pulse 1.5s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        .text-input {
            flex: 1;
            padding: 12px 16px;
            border: 1px solid var(--border-color);
            border-radius: 24px;
            font-size: 16px;
            outline: none;
            transition: border-color 0.3s;
        }
        
        .text-input:focus {
            border-color: var(--primary);
        }
        
        .send-btn {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background-color: var(--primary-dark);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border: none;
            font-size: 20px;
        }
        
        /* 能力仪表盘 */
        .dashboard {
            background-color: var(--card-bg);
            border-radius: 20px;
            box-shadow: var(--shadow);
            padding: 24px;
            margin: 24px 0;
            text-align: center;
        }
        
        .progress-container {
            position: relative;
            width: 180px;
            height: 180px;
            margin: 0 auto 20px;
        }
        
        .progress-circle {
            width: 100%;
            height: 100%;
        }
        
        .progress-value {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 32px;
            font-weight: 700;
            color: var(--primary-dark);
        }
        
        .skills-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 16px;
            margin-top: 20px;
        }
        
        .skill {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .skill-progress {
            width: 80px;
            height: 6px;
            background-color: #e2e8f0;
            border-radius: 3px;
            margin-top: 8px;
            overflow: hidden;
        }
        
        .skill-progress-fill {
            height: 100%;
            background-color: var(--primary);
            border-radius: 3px;
        }
        
        .skill-name {
            font-size: 12px;
            color: var(--text-dark);
            margin-top: 4px;
        }
        
        /* 存档面板 */
        .report-card {
            background-color: var(--card-bg);
            border-radius: 20px;
            box-shadow: var(--shadow);
            padding: 20px;
            margin-top: 24px;
        }
        
        .report-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        
        .report-title {
            font-size: 18px;
            font-weight: 700;
            color: var(--primary-dark);
        }
        
        .comparison {
            display: flex;
            align-items: center;
            font-size: 14px;
            color: var(--success);
        }
        
        .comparison.down {
            color: var(--danger);
        }
        
        .comparison i {
            margin-right: 4px;
        }
        
        .report-summary {
            font-size: 14px;
            line-height: 1.7;
            margin-bottom: 20px;
        }
        
        .tags-container {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 20px;
        }
        
        .tag {
            padding: 6px 12px;
            background-color: #e2e8f0;
            border-radius: 16px;
            font-size: 12px;
        }
        
        .actions {
            display: flex;
            gap: 12px;
        }
        
        .action-btn {
            flex: 1;
            padding: 12px;
            border-radius: 12px;
            border: none;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.3s ease;
        }
        
        .view-btn {
            background-color: var(--primary);
            color: white;
        }
        
        .history-btn {
            background-color: var(--primary-dark);
            color: white;
        }
        
        /* 弹窗样式 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
        
        .modal-overlay.active {
            opacity: 1;
            pointer-events: all;
        }
        
        .modal {
            background-color: white;
            border-radius: 16px;
            width: 90%;
            max-width: 500px;
            max-height: 90vh;
            overflow-y: auto;
            padding: 24px;
            box-shadow: var(--shadow);
            transform: translateY(20px);
            transition: transform 0.3s ease;
        }
        
        .modal-overlay.active .modal {
            transform: translateY(0);
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .modal-title {
            font-size: 18px;
            font-weight: 700;
            color: var(--primary-dark);
        }
        
        .close-modal {
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
            color: #94a3b8;
        }
        
        .modal-content {
            margin-bottom: 24px;
        }
        
        .report-detail {
            background-color: white;
            padding: 20px;
            border-radius: 16px;
        }
        
        .report-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .info-item {
            display: flex;
            flex-direction: column;
        }
        
        .info-label {
            font-size: 12px;
            color: #64748b;
            margin-bottom: 4px;
        }
        
        .info-value {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-dark);
        }
        
        .section {
            margin-bottom: 24px;
        }
        
        .section-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 12px;
            color: var(--primary-dark);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .section-title i {
            color: var(--primary);
        }
        
        .conversation-history {
            background-color: #f8fafc;
            border-radius: 12px;
            padding: 16px;
            max-height: 300px;
            overflow-y: auto;
        }
        
        .message-history {
            padding: 10px 12px;
            margin-bottom: 12px;
            border-radius: 12px;
            font-size: 14px;
        }
        
        .customer-message-history {
            background-color: #e2e8f0;
            align-self: flex-start;
            max-width: 80%;
        }
        
        .user-message-history {
            background-color: var(--primary-light);
            color: var(--text-dark);
            margin-left: auto;
            max-width: 80%;
        }
        
        .evaluation-content {
            background-color: #f8fafc;
            border-radius: 12px;
            padding: 16px;
            font-size: 14px;
            line-height: 1.6;
        }
        
        .summary-content {
            background-color: #f8fafc;
            border-radius: 12px;
            padding: 16px;
            font-size: 14px;
            line-height: 1.6;
        }
        
        .tag-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 12px;
        }
        
        .history-list {
            background-color: #f8fafc;
            border-radius: 12px;
            padding: 16px;
            max-height: 400px;
            overflow-y: auto;
        }
        
        .history-item {
            padding: 12px;
            background-color: white;
            border-radius: 12px;
            margin-bottom: 12px;
            box-shadow: var(--shadow);
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .history-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
        }
        
        .history-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
        }
        
        .history-date {
            font-weight: 600;
            color: var(--primary-dark);
        }
        
        .history-type {
            background-color: var(--primary);
            color: white;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 12px;
        }
        
        .history-summary {
            font-size: 14px;
            color: #64748b;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .no-history {
            text-align: center;
            padding: 20px;
            color: #94a3b8;
        }
        
        /* 评分标签 */
        .score-tag {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
            margin-top: 8px;
        }
        
        .high-score {
            background-color: #d1fae5;
            color: #065f46;
        }
        
        .medium-score {
            background-color: #fef3c7;
            color: #92400e;
        }
        
        .low-score {
            background-color: #fee2e2;
            color: #b91c1c;
        }
        
        /* 新增：修改说明 */
        .modification-notice {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: var(--primary);
            color: white;
            padding: 10px 20px;
            border-radius: 30px;
            font-size: 14px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            z-index: 1000;
            animation: slideIn 0.5s ease-out;
        }
        
        @keyframes slideIn {
            from { transform: translateY(100px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 头部导航 -->
        <header class="header">
            <div class="nav-top">
                <button class="back-btn">
                    <i class="fas fa-arrow-left"></i>
                </button>
                <h1 class="page-title">虚拟陪练舱</h1>
                <div></div> <!-- 占位元素 -->
            </div>
        </header>
        
        <!-- 场景选择卡 -->
        <section>
            <div class="section-title">
                <div>
                    <i class="fas fa-layer-group"></i>
                    选择陪练场景
                </div>
                <button class="edit-btn" id="editCustomerBtn">
                    <i class="fas fa-edit"></i>
                    编辑分类
                </button>
            </div>
            <div class="difficulty-tabs">
                <div class="tab active">⭐ 初级</div>
                <div class="tab">⭐⭐ 中级</div>
                <div class="tab">⭐⭐⭐ 高级</div>
                <div class="tab">专家挑战</div>
            </div>
            
            <div class="customer-bubbles" id="customerBubbles">
                <div class="bubble active">
                    商务客户
                    <button class="delete-btn">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="bubble">
                    家庭客户
                    <button class="delete-btn">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="bubble">
                    VIP客户
                    <button class="delete-btn">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="bubble">
                    投诉客户
                    <button class="delete-btn">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="bubble">
                    团体客户
                    <button class="delete-btn">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="add-bubble" id="addCustomerBtn">
                    <i class="fas fa-plus"></i>
                    添加类型
                </div>
            </div>
        </section>
        
        <!-- 对话主界面 -->
        <section>
            <div class="avatar-container">
                <div class="customer-avatar">
                    <i class="fas fa-user-tie"></i>
                </div>
            </div>
            
            <div class="conversation-container" id="conversation">
                <div class="message customer-message">
                    您好，我想预订下周五的商务套房，你们有什么优惠吗？
                </div>
                <div class="message user-message">
                    感谢您的咨询！我们目前有商务套餐优惠，包含早餐和会议室使用，您需要了解详情吗？
                </div>
                <div class="message customer-message">
                    会议室可以容纳多少人？另外我需要延迟退房到下午4点。
                </div>
                <div class="message user-message">
                    我们的商务套房会议室最多可容纳20人，延迟退房到下午4点需要额外支付50%的房费。
                </div>
                <div class="message customer-message">
                    50%的费用太高了，我是贵酒店的黄金会员，能否提供免费延迟退房？
                </div>
                <div class="message user-message">
                    感谢您的会员支持！根据黄金会员权益，我们可以提供免费延迟退房到下午2点，或者您可以选择支付额外费用延长到4点。
                </div>
                <div class="message customer-message">
                    下午2点可能不太够，我下午3点有个重要会议。有没有折中方案？
                </div>
                <div class="message user-message">
                    我理解您的情况。我们可以为您提供下午3点的延迟退房，只需额外支付25%的房费，这样您看可以接受吗？
                </div>
            </div>
            
            <div class="input-area">
                <button class="voice-btn" id="voiceBtn">
                    <i class="fas fa-microphone"></i>
                </button>
                <input type="text" class="text-input" placeholder="输入回复内容...">
                <button class="send-btn">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </div>
        </section>
        
        <!-- 能力仪表盘 -->
        <section class="dashboard">
            <h2 class="section-title">
                <i class="fas fa-chart-line"></i>
                能力评估
            </h2>
            
            <div class="progress-container">
                <svg class="progress-circle" viewBox="0 0 180 180">
                    <circle cx="90" cy="90" r="80" stroke="#e2e8f0" stroke-width="10" fill="none" />
                    <circle cx="90" cy="90" r="80" stroke="#4285f4" stroke-width="10" fill="none" 
                            stroke-dasharray="502" stroke-dashoffset="150" stroke-linecap="round" />
                </svg>
                <div class="progress-value">86</div>
            </div>
            
            <div class="skills-container">
                <div class="skill">
                    <div class="skill-name">反应力</div>
                    <div class="skill-progress">
                        <div class="skill-progress-fill" style="width: 90%"></div>
                    </div>
                </div>
                <div class="skill">
                    <div class="skill-name">话术</div>
                    <div class="skill-progress">
                        <div class="skill-progress-fill" style="width: 85%"></div>
                    </div>
                </div>
                <div class="skill">
                    <div class="skill-name">说服力</div>
                    <div class="skill-progress">
                        <div class="skill-progress-fill" style="width: 75%"></div>
                    </div>
                </div>
                <div class="skill">
                    <div class="skill-name">专业度</div>
                    <div class="skill-progress">
                        <div class="skill-progress-fill" style="width: 92%"></div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 存档面板 -->
        <section class="report-card">
            <div class="report-header">
                <h3 class="report-title">本次陪练报告</h3>
                <div class="comparison">
                    <i class="fas fa-arrow-up"></i>
                    <span>12%</span>
                </div>
            </div>
            
            <p class="report-summary">
                本次与商务客户的对话中，您展现了优秀的专业知识和反应能力。建议在价格谈判环节采用更积极的策略，成功率可提升15%。
            </p>
            
            <div class="tags-container">
                <div class="tag">商务场景</div>
                <div class="tag">价格谈判</div>
                <div class="tag">提升空间</div>
            </div>
            
            <div class="actions">
                <button class="action-btn view-btn" id="viewReportBtn">
                    <i class="fas fa-file-alt"></i>
                    查看完整报告
                </button>
                <button class="action-btn history-btn" id="historyReportBtn">
                    <i class="fas fa-history"></i>
                    历史报告
                </button>
            </div>
        </section>
    </div>
    
    <!-- 添加客户类型弹窗 -->
    <div class="modal-overlay" id="addCustomerModal">
        <div class="modal">
            <div class="modal-header">
                <h3 class="modal-title">添加客户类型</h3>
                <button class="close-modal">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-content">
                <div class="form-group">
                    <label for="customerType">客户类型名称</label>
                    <input type="text" id="customerType" placeholder="例如：新婚客户">
                </div>
            </div>
            <div class="modal-actions">
                <button class="modal-btn cancel-btn">取消</button>
                <button class="modal-btn save-btn">保存</button>
            </div>
        </div>
    </div>
    
    <!-- 完整报告弹窗 -->
    <div class="modal-overlay" id="fullReportModal">
        <div class="modal">
            <div class="modal-header">
                <h3 class="modal-title">陪练报告详情</h3>
                <button class="close-modal">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-content">
                <div class="report-detail">
                    <div class="report-info">
                        <div class="info-item">
                            <span class="info-label">日期</span>
                            <span class="info-value">2023年10月15日</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">客户类型</span>
                            <span class="info-value">商务客户</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">难度</span>
                            <span class="info-value">⭐⭐ 中级</span>
                        </div>
                    </div>
                    
                    <div class="section">
                        <div class="section-title">
                            <i class="fas fa-comments"></i>
                            对话内容
                        </div>
                        <div class="conversation-history">
                            <div class="message-history customer-message-history">
                                您好，我想预订下周五的商务套房，你们有什么优惠吗？
                            </div>
                            <div class="message-history user-message-history">
                                感谢您的咨询！我们目前有商务套餐优惠，包含早餐和会议室使用，您需要了解详情吗？
                            </div>
                            <div class="message-history customer-message-history">
                                会议室可以容纳多少人？另外我需要延迟退房到下午4点。
                            </div>
                            <div class="message-history user-message-history">
                                我们的商务套房会议室最多可容纳20人，延迟退房到下午4点需要额外支付50%的房费。
                            </div>
                            <div class="message-history customer-message-history">
                                50%的费用太高了，我是贵酒店的黄金会员，能否提供免费延迟退房？
                            </div>
                        </div>
                    </div>
                    
                    <div class="section">
                        <div class="section-title">
                            <i class="fas fa-star"></i>
                            能力评价
                        </div>
                        <div class="evaluation-content">
                            <p>您在本轮陪练中展现了出色的专业素养和服务意识：</p>
                            <ul style="margin-top: 12px; padding-left: 20px;">
                                <li>反应速度优秀，对客户需求理解准确</li>
                                <li>专业知识扎实，准确提供了会议室容量信息</li>
                                <li>会员政策运用得当，但未能灵活处理客户特殊需求</li>
                                <li>建议提升价格谈判技巧，提供更多替代方案</li>
                            </ul>
                            <div class="score-tag high-score">综合评分: 86/100</div>
                        </div>
                    </div>
                    
                    <div class="section">
                        <div class="section-title">
                            <i class="fas fa-lightbulb"></i>
                            总结方法
                        </div>
                        <div class="summary-content">
                            <p>针对商务客户的价格敏感需求，建议采用以下策略：</p>
                            <ol style="margin-top: 12px; padding-left: 20px;">
                                <li>强调会员权益价值，提供阶梯式延迟退房方案</li>
                                <li>捆绑销售会议室与客房服务，提高整体收益</li>
                                <li>准备2-3个替代方案，满足不同预算需求</li>
                                <li>主动提供增值服务（如免费打印、咖啡服务）提升客户体验</li>
                            </ol>
                            <div class="tag-list">
                                <div class="tag">商务谈判</div>
                                <div class="tag">会员权益</div>
                                <div class="tag">价格策略</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 历史报告弹窗 -->
    <div class="modal-overlay" id="historyReportModal">
        <div class="modal">
            <div class="modal-header">
                <h3 class="modal-title">历史陪练报告</h3>
                <button class="close-modal">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-content">
                <div class="history-list">
                    <div class="history-item" data-id="1">
                        <div class="history-header">
                            <span class="history-date">2023年10月15日 14:30</span>
                            <span class="history-type">商务客户</span>
                        </div>
                        <div class="history-summary">
                            本次与商务客户的对话中，您展现了优秀的专业知识和反应能力。建议在价格谈判环节采用更积极的策略。
                        </div>
                    </div>
                    <div class="history-item" data-id="2">
                        <div class="history-header">
                            <span class="history-date">2023年10月12日 10:15</span>
                            <span class="history-type">投诉客户</span>
                        </div>
                        <div class="history-summary">
                            处理客户投诉时展现了良好的同理心，但解决方案不够全面，建议加强问题解决能力训练。
                        </div>
                    </div>
                    <div class="history-item" data-id="3">
                        <div class="history-header">
                            <span class="history-date">2023年10月10日 16:45</span>
                            <span class="history-type">VIP客户</span>
                        </div>
                        <div class="history-summary">
                            为VIP客户提供了个性化服务方案，展现了出色的服务意识，但在附加服务推荐上略显保守。
                        </div>
                    </div>
                    <div class="history-item" data-id="4">
                        <div class="history-header">
                            <span class="history-date">2023年10月8日 09:30</span>
                            <span class="history-type">家庭客户</span>
                        </div>
                        <div class="history-summary">
                            为家庭客户推荐了亲子套餐，但未能有效突出套餐价值，建议加强销售话术训练。
                        </div>
                    </div>
                    <div class="history-item" data-id="5">
                        <div class="history-header">
                            <span class="history-date">2023年10月5日 11:20</span>
                            <span class="history-type">团体客户</span>
                        </div>
                        <div class="history-summary">
                            处理团体预订时展现了良好的组织能力，但在协调不同需求方面还有提升空间。
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 修改说明 -->
    <div class="modification-notice" id="modNotice">
        已优化：聊天框高度增加，客户头像缩小
    </div>
    
    <script>
        // 语音按钮交互
        const voiceBtn = document.getElementById('voiceBtn');
        voiceBtn.addEventListener('click', function() {
            this.classList.toggle('active');
            
            if (this.classList.contains('active')) {
                this.innerHTML = '<i class="fas fa-square"></i>';
            } else {
                this.innerHTML = '<i class="fas fa-microphone"></i>';
            }
        });
        
        // 模拟对话
        const conversation = document.getElementById('conversation');
        
        // 添加新消息的函数
        function addMessage(text, isCustomer = false) {
            const message = document.createElement('div');
            message.classList.add('message');
            message.classList.add(isCustomer ? 'customer-message' : 'user-message');
            message.textContent = text;
            
            conversation.appendChild(message);
            conversation.scrollTop = conversation.scrollHeight;
        }
        
        // 模拟回复
        document.querySelector('.send-btn').addEventListener('click', function() {
            const input = document.querySelector('.text-input');
            if (input.value.trim() !== '') {
                addMessage(input.value);
                input.value = '';
                
                // 模拟AI回复
                setTimeout(() => {
                    addMessage("听起来不错，我会考虑这个方案。能提供一份详细报价吗？", true);
                }, 1000);
            }
        });
        
        // 按Enter键发送消息
        document.querySelector('.text-input').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                document.querySelector('.send-btn').click();
            }
        });
        
        // 气泡选择效果
        document.querySelectorAll('.bubble').forEach(bubble => {
            bubble.addEventListener('click', function(e) {
                if (e.target.classList.contains('delete-btn')) return;
                
                document.querySelectorAll('.bubble').forEach(b => b.classList.remove('active'));
                this.classList.add('active');
            });
        });
        
        // 难度标签选择效果
        document.querySelectorAll('.tab').forEach(tab => {
            tab.addEventListener('click', function() {
                document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
                this.classList.add('active');
            });
        });
        
        // 客户类型编辑功能
        const editBtn = document.getElementById('editCustomerBtn');
        const addBtn = document.getElementById('addCustomerBtn');
        const modal = document.getElementById('addCustomerModal');
        const closeModal = document.querySelector('.close-modal');
        const cancelBtn = document.querySelector('.cancel-btn');
        const saveBtn = document.querySelector('.save-btn');
        const bubblesContainer = document.getElementById('customerBubbles');
        
        // 显示编辑模式
        editBtn.addEventListener('click', function() {
            const isEditing = this.classList.toggle('editing');
            
            if (isEditing) {
                this.innerHTML = '<i class="fas fa-check"></i> 完成编辑';
                document.querySelectorAll('.delete-btn').forEach(btn => {
                    btn.style.display = 'block';
                });
            } else {
                this.innerHTML = '<i class="fas fa-edit"></i> 编辑分类';
                document.querySelectorAll('.delete-btn').forEach(btn => {
                    btn.style.display = 'none';
                });
            }
        });
        
        // 删除客户类型
        document.querySelectorAll('.delete-btn').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
                const bubble = this.parentElement;
                if (document.querySelectorAll('.bubble').length > 1) {
                    bubble.remove();
                } else {
                    alert('至少需要保留一个客户类型');
                }
            });
        });
        
        // 打开添加客户类型弹窗
        addBtn.addEventListener('click', function() {
            modal.classList.add('active');
        });
        
        // 关闭弹窗
        function closeModalFunc() {
            modal.classList.remove('active');
            document.getElementById('customerType').value = '';
        }
        
        closeModal.addEventListener('click', closeModalFunc);
        cancelBtn.addEventListener('click', closeModalFunc);
        
        // 保存新客户类型
        saveBtn.addEventListener('click', function() {
            const typeName = document.getElementById('customerType').value.trim();
            if (typeName) {
                const newBubble = document.createElement('div');
                newBubble.className = 'bubble';
                newBubble.innerHTML = `
                    ${typeName}
                    <button class="delete-btn">
                        <i class="fas fa-times"></i>
                    </button>
                `;
                
                bubblesContainer.insertBefore(newBubble, addBtn);
                
                // 为新气泡添加事件
                newBubble.addEventListener('click', function(e) {
                    if (e.target.classList.contains('delete-btn')) return;
                    
                    document.querySelectorAll('.bubble').forEach(b => b.classList.remove('active'));
                    this.classList.add('active');
                });
                
                // 为新删除按钮添加事件
                newBubble.querySelector('.delete-btn').addEventListener('click', function(e) {
                    e.stopPropagation();
                    const bubble = this.parentElement;
                    if (document.querySelectorAll('.bubble').length > 1) {
                        bubble.remove();
                    } else {
                        alert('至少需要保留一个客户类型');
                    }
                });
                
                closeModalFunc();
            } else {
                alert('请输入客户类型名称');
            }
        });
        
        // 报告弹窗功能
        const viewReportBtn = document.getElementById('viewReportBtn');
        const historyReportBtn = document.getElementById('historyReportBtn');
        const fullReportModal = document.getElementById('fullReportModal');
        const historyReportModal = document.getElementById('historyReportModal');
        
        // 打开完整报告
        viewReportBtn.addEventListener('click', function() {
            fullReportModal.classList.add('active');
        });
        
        // 打开历史报告
        historyReportBtn.addEventListener('click', function() {
            historyReportModal.classList.add('active');
        });
        
        // 关闭报告弹窗
        document.querySelectorAll('.close-modal').forEach(btn => {
            btn.addEventListener('click', function() {
                this.closest('.modal-overlay').classList.remove('active');
            });
        });
        
        // 点击历史报告项显示详情
        document.querySelectorAll('.history-item').forEach(item => {
            item.addEventListener('click', function() {
                const reportId = this.getAttribute('data-id');
                historyReportModal.classList.remove('active');
                
                // 模拟加载报告详情
                setTimeout(() => {
                    fullReportModal.classList.add('active');
                }, 300);
            });
        });
        
        // 点击模态框外部关闭弹窗
        document.querySelectorAll('.modal-overlay').forEach(overlay => {
            overlay.addEventListener('click', function(e) {
                if (e.target === this) {
                    this.classList.remove('active');
                }
            });
        });
        
        // 显示修改通知
        setTimeout(() => {
            document.getElementById('modNotice').style.display = 'none';
        }, 3000);
    </script>
</body>
</html>