\u5fc3\u8c10APP – \u5bb6\u5ead\u60c5\u611f\u5065\u5eb7\u7ba1\u7406\u7cfb\u7edf<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Quicksand:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <style>\n :root {\n --primary: #6c5ce7;\n --primary-light: #a29bfe;\n --secondary: #00cec9;\n --accent: #fd79a8;\n --dark: #2d3436;\n --light: #f7f9fc;\n --success: #00b894;\n --warning: #fdcb6e;\n --card-bg: rgba(255, 255, 255, 0.85);\n --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n --app-bg: #f8f9ff;\n }\n \n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n \n body {\n font-family: 'Noto Sans SC', sans-serif;\n background: var(--app-bg);\n color: var(--dark);\n line-height: 1.6;\n overflow-x: hidden;\n min-height: 100vh;\n padding: px;\n }\n \n .container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 20px;\n }\n \n \/* \u4ea7\u54c1\u6982\u8ff0 *\/\n .product-overview {\n padding: 60px 0 40px;\n text-align: center;\n }\n \n .product-title {\n font-size: 2.8rem;\n font-weight: 700;\n margin-bottom: 20px;\n color: var(--dark);\n font-family: 'Quicksand', sans-serif;\n line-height: 1.2;\n }\n \n .product-title span {\n background: linear-gradient(120deg, var(--primary), var(--secondary));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n }\n \n .product-subtitle {\n font-size: 1.3rem;\n max-width: 800px;\n margin: 0 auto 40px;\n color: #555;\n }\n \n \/* \u95ee\u9898\u5c55\u793a\u533a *\/\n .problems-section {\n padding: 60px 0;\n background: white;\n border-radius: 20px;\n margin-bottom: 40px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);\n }\n \n .section-title {\n text-align: center;\n margin-bottom: 50px;\n }\n \n .section-title h2 {\n font-size: 2.5rem;\n color: var(--dark);\n margin-bottom: 15px;\n font-family: 'Quicksand', sans-serif;\n }\n \n .section-title p {\n font-size: 1.2rem;\n color: #666;\n max-width: 700px;\n margin: 0 auto;\n }\n \n .problems-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 30px;\n }\n \n .problem-card {\n background: var(--light);\n border-radius: 15px;\n padding: 30px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);\n transition: var(--transition);\n text-align: center;\n border-top: 5px solid var(--accent);\n }\n \n .problem-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);\n }\n \n .problem-icon {\n width: 70px;\n height: 70px;\n background: linear-gradient(120deg, var(--accent), #ff9dbb);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 20px;\n color: white;\n font-size: 1.8rem;\n }\n \n \/* \u529f\u80fd\u6a21\u5757 *\/\n .features-section {\n padding: 60px 0;\n background: var(--app-bg);\n border-radius: 20px;\n margin-bottom: 40px;\n }\n \n .features-tabs {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 15px;\n margin-bottom: 50px;\n }\n \n .tab-btn {\n background: white;\n padding: 15px 30px;\n border-radius: 30px;\n border: 2px solid var(--primary-light);\n cursor: pointer;\n transition: var(--transition);\n font-weight: 500;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n \n .tab-btn.active {\n background: var(--primary);\n color: white;\n border-color: var(--primary);\n box-shadow: 0 5px 15px rgba(108, 92, 231, 0.3);\n }\n \n .tab-content {\n display: none;\n }\n \n .tab-content.active {\n display: block;\n animation: fadeIn 0.5s ease;\n }\n \n .feature-detail {\n background: white;\n border-radius: 20px;\n padding: 40px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);\n }\n \n .feature-header {\n display: flex;\n align-items: center;\n gap: 20px;\n margin-bottom: 30px;\n }\n \n .feature-icon-large {\n width: 80px;\n height: 80px;\n background: linear-gradient(120deg, var(--primary), var(--primary-light));\n border-radius: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 2rem;\n }\n \n .feature-content {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 30px;\n }\n \n .feature-text h3 {\n font-size: 1.8rem;\n margin-bottom: 20px;\n color: var(--primary);\n }\n \n .feature-list {\n list-style: none;\n }\n \n .feature-list li {\n margin-bottom: 15px;\n padding-left: 30px;\n position: relative;\n }\n \n .feature-list li:before {\n content: \"\u2713\";\n color: var(--success);\n font-weight: bold;\n position: absolute;\n left: 0;\n }\n \n .feature-visual {\n background: var(--light);\n border-radius: 15px;\n padding: 20px;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n \n \/* \u6570\u636e\u53ef\u89c6\u5316 *\/\n .data-viz-section {\n padding: 60px 0;\n background: white;\n border-radius: 20px;\n margin-bottom: 40px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);\n }\n \n .viz-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));\n gap: 30px;\n }\n \n .viz-card {\n background: var(--light);\n border-radius: 15px;\n padding: 30px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);\n }\n \n .viz-header {\n display: flex;\n align-items: center;\n gap: 15px;\n margin-bottom: 20px;\n }\n \n .viz-icon {\n width: 50px;\n height: 50px;\n background: linear-gradient(120deg, var(--secondary), #81ecec);\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 1.5rem;\n }\n \n .chart-container {\n height: 300px;\n position: relative;\n }\n \n \/* APP\u6a21\u578b *\/\n .app-model-section {\n padding: 60px 0;\n background: var(--app-bg);\n border-radius: 20px;\n margin-bottom: 40px;\n }\n \n .app-showcase {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 40px;\n flex-wrap: wrap;\n }\n \n .phone-mockup {\n width: 300px;\n height: 600px;\n background: white;\n border-radius: 40px;\n padding: 15px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);\n position: relative;\n overflow: hidden;\n }\n \n .phone-screen {\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);\n border-radius: 30px;\n overflow: hidden;\n position: relative;\n }\n \n .app-screen {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n \n .app-feature-points {\n flex: 1;\n min-width: 300px;\n }\n \n .feature-point {\n background: white;\n padding: 20px;\n border-radius: 15px;\n margin-bottom: 20px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);\n display: flex;\n align-items: center;\n gap: 15px;\n }\n \n .point-icon {\n width: 40px;\n height: 40px;\n background: var(--primary-light);\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 1.2rem;\n }\n \n \/* \u52a8\u753b *\/\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n \n @keyframes float {\n 0% { transform: translateY(0px); }\n 50% { transform: translateY(-10px); }\n 100% { transform: translateY(0px); }\n }\n \n \/* \u54cd\u5e94\u5f0f\u8bbe\u8ba1 *\/\n @media (max-width: 768px) {\n .product-title {\n font-size: 2.2rem;\n }\n \n .section-title h2 {\n font-size: 2rem;\n }\n \n .feature-content {\n grid-template-columns: 1fr;\n }\n \n .viz-container {\n grid-template-columns: 1fr;\n }\n \n .phone-mockup {\n width: 250px;\n height: 500px;\n }\n }\n \n @media (max-width: 480px) {\n .product-title {\n font-size: 1.8rem;\n }\n \n .tab-btn {\n width: 100%;\n justify-content: center;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n \n <section class=\"product-overview\">\n <h1 class=\"product-title\">\u5fc3\u8c10APP\uff1a\u91cd\u65b0\u5b9a\u4e49<span>\u5bb6\u5ead\u60c5\u611f\u5065\u5eb7\u7ba1\u7406<\/span><\/h1>\n <p class=\"product-subtitle\">\u56fd\u5185\u9996\u6b3e\u57fa\u4e8e\u591a\u6a21\u6001\u60c5\u611fAI\u7684\u5bb6\u5ead\u60c5\u611f\u5065\u5eb7\u5e73\u53f0\uff0c\u91cf\u5316\u60c5\u611f\u4ef7\u503c\uff0c\u5b88\u62a4\u5bb6\u5ead\u5e78\u798f\uff0c\u8ba9\u79d1\u6280\u6e29\u6696\u6bcf\u4e00\u4e2a\u5bb6\u5ead\u5173\u7cfb<\/p>\n <\/section>\n\n \n <section class=\"problems-section\">\n <div class=\"section-title\">\n <h2>\u6211\u4eec\u89e3\u51b3\u7684\u6838\u5fc3\u95ee\u9898<\/h2>\n <p>\u73b0\u4ee3\u5bb6\u5ead\u9762\u4e34\u7684\u60c5\u611f\u5065\u5eb7\u6311\u6218\u4e0e\u75db\u70b9<\/p>\n <\/div>\n <div class=\"problems-grid\">\n <div class=\"problem-card\">\n <div class=\"problem-icon\">\n <i class=\"fas fa-heart\"><\/i>\n <\/div>\n <h3>\u5a5a\u59fb\u5173\u7cfb\u7d27\u5f20<\/h3>\n <p>\u6c9f\u901a\u969c\u788d\u3001\u60c5\u611f\u758f\u79bb\u3001\u4fe1\u4efb\u5371\u673a\u3001\u51b2\u7a81\u4e0d\u65ad\uff0c\u7f3a\u4e4f\u79d1\u5b66\u89e3\u51b3\u65b9\u6cd5<\/p>\n <\/div>\n <div class=\"problem-card\">\n <div class=\"problem-icon\">\n <i class=\"fas fa-child\"><\/i>\n <\/div>\n <h3>\u4eb2\u5b50\u6559\u80b2\u56f0\u5883<\/h3>\n <p>\u4ee3\u9645\u6559\u80b2\u51b2\u7a81\u3001\u6559\u80b2\u7406\u5ff5\u5206\u6b67\u3001\u6eba\u7231\u4e0e\u7126\u8651\u5e76\u5b58\uff0c\u7f3a\u4e4f\u79d1\u5b66\u6307\u5bfc<\/p>\n <\/div>\n <div class=\"problem-card\">\n <div class=\"problem-icon\">\n <i class=\"fas fa-users\"><\/i>\n <\/div>\n <h3>\u4ee3\u9645\u6c9f\u901a\u969c\u788d<\/h3>\n <p>\u4f20\u7edf\u4e0e\u73b0\u4ee3\u89c2\u5ff5\u51b2\u7a81\u3001\u6c9f\u901a\u65b9\u5f0f\u4e0d\u5f53\uff0c\u7f3a\u4e4f\u76f8\u4e92\u7406\u89e3\u4e0e\u5c0a\u91cd<\/p>\n <\/div>\n <div class=\"problem-card\">\n <div class=\"problem-icon\">\n <i class=\"fas fa-brain\"><\/i>\n <\/div>\n <h3>\u5fc3\u7406\u5065\u5eb7\u95ee\u9898<\/h3>\n <p>\u538b\u529b\u65e0\u6cd5\u91ca\u653e\u3001\u5fc3\u7406\u95ee\u9898\u6c61\u540d\u5316\u3001\u4e13\u4e1a\u5e2e\u52a9\u83b7\u53d6\u96be\uff0c\u7f3a\u4e4f\u6709\u6548\u652f\u6301<\/p>\n <\/div>\n <div class=\"problem-card\">\n <div class=\"problem-icon\">\n <i class=\"fas fa-briefcase\"><\/i>\n <\/div>\n <h3>\u5de5\u4f5c\u5bb6\u5ead\u5931\u8861<\/h3>\n <p>\u5de5\u4f5c\u538b\u529b\u5f71\u54cd\u5bb6\u5ead\u5173\u7cfb\u3001\u7f3a\u4e4f\u5e73\u8861\u6280\u5de7\uff0c\u4f01\u4e1a\u7f3a\u4e4f\u6709\u6548EAP\u652f\u6301<\/p>\n <\/div>\n <div class=\"problem-card\">\n <div class=\"problem-icon\">\n <i class=\"fas fa-house-user\"><\/i>\n <\/div>\n <h3>\u5bb6\u5ead\u7cfb\u7edf\u5931\u8c03<\/h3>\n <p>\u89d2\u8272\u6df7\u4e71\u3001\u8fb9\u754c\u6a21\u7cca\u3001\u89c4\u5219\u7f3a\u5931\uff0c\u7f3a\u4e4f\u79d1\u5b66\u5bb6\u5ead\u7ba1\u7406\u7cfb\u7edf<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"features-section\">\n <div class=\"section-title\">\n <h2>\u6838\u5fc3\u529f\u80fd\u6a21\u5757<\/h2>\n <p>\u5168\u65b9\u4f4d\u89e3\u51b3\u5bb6\u5ead\u60c5\u611f\u5065\u5eb7\u95ee\u9898<\/p>\n <\/div>\n \n <div class=\"features-tabs\">\n <div class=\"tab-btn active\" data-tab=\"tab1\">\n <i class=\"fas fa-chart-line\"><\/i>\n <span>\u60c5\u611f\u8d26\u6237\u7cfb\u7edf<\/span>\n <\/div>\n <div class=\"tab-btn\" data-tab=\"tab2\">\n <i class=\"fas fa-brain\"><\/i>\n <span>\u591a\u6a21\u6001\u60c5\u611f\u8bc6\u522b<\/span>\n <\/div>\n <div class=\"tab-btn\" data-tab=\"tab3\">\n <i class=\"fas fa-hands-helping\"><\/i>\n <span>\u667a\u80fd\u5e72\u9884\u7cfb\u7edf<\/span>\n <\/div>\n <div class=\"tab-btn\" data-tab=\"tab4\">\n <i class=\"fas fa-graduation-cap\"><\/i>\n <span>\u4e13\u4e1a\u5185\u5bb9\u4f53\u7cfb<\/span>\n <\/div>\n <div class=\"tab-btn\" data-tab=\"tab5\">\n <i class=\"fas fa-building\"><\/i>\n <span>\u4f01\u4e1aEAP\u6574\u5408<\/span>\n <\/div>\n <\/div>\n \n <div class=\"tab-content active\" id=\"tab1\">\n <div class=\"feature-detail\">\n <div class=\"feature-header\">\n <div class=\"feature-icon-large\">\n <i class=\"fas fa-chart-line\"><\/i>\n <\/div>\n <div>\n <h2>\u60c5\u611f\u8d26\u6237\u7cfb\u7edf<\/h2>\n <p>\u91cf\u5316\u5bb6\u5ead\u60c5\u611f\u4ef7\u503c\uff0c\u53ef\u89c6\u5316\u60c5\u611f\u5065\u5eb7\u8d8b\u52bf<\/p>\n <\/div>\n <\/div>\n <div class=\"feature-content\">\n <div class=\"feature-text\">\n <h3>\u5bb6\u5ead\u60c5\u611fCRM<\/h3>\n <ul class=\"feature-list\">\n <li>\u4e3a\u6bcf\u4e2a\u5bb6\u5ead\u6210\u5458\u5efa\u7acb\u60c5\u611f\u6570\u636e\u5e93\u4e0e\u4e2a\u6027\u5316\u6863\u6848<\/li>\n <li>\u8bb0\u5f55\u65e5\u5e38\u4e92\u52a8\u9891\u7387\u4e0e\u8d28\u91cf\uff0c\u751f\u6210\u60c5\u611f\u4e92\u52a8\u62a5\u544a<\/li>\n <li>\u53ef\u89c6\u5316\u60c5\u611f\u8d44\u4ea7\u53d8\u5316\u8d8b\u52bf\uff0c\u8bc6\u522b\u5173\u7cfb\u6ce2\u52a8\u6a21\u5f0f<\/li>\n <li>\u60c5\u611f\u79ef\u5206\u4f53\u7cfb\uff0c\u6b63\u5411\u884c\u4e3a\u5956\u52b1\u4fc3\u8fdb\u79ef\u6781\u4e92\u52a8<\/li>\n <li>\u60c5\u611f\u8d44\u4ea7\u8d1f\u503a\u8868\uff0c\u5168\u9762\u8bc4\u4f30\u5bb6\u5ead\u60c5\u611f\u5065\u5eb7\u5ea6<\/li>\n <\/ul>\n <\/div>\n <div class=\"feature-visual\">\n <canvas id=\"emotionChart\" width=\"400\" height=\"300\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"tab-content\" id=\"tab2\">\n <div class=\"feature-detail\">\n <div class=\"feature-header\">\n <div class=\"feature-icon-large\">\n <i class=\"fas fa-brain\"><\/i>\n <\/div>\n <div>\n <h2>\u591a\u6a21\u6001\u60c5\u611f\u8bc6\u522b<\/h2>\n <p>AI\u9a71\u52a8\u7684\u7cbe\u51c6\u60c5\u611f\u72b6\u6001\u5206\u6790\u4e0e\u9884\u6d4b<\/p>\n <\/div>\n <\/div>\n <div class=\"feature-content\">\n <div class=\"feature-text\">\n <h3>\u60c5\u611fAI\u5f15\u64ce<\/h3>\n <ul class=\"feature-list\">\n <li>\u8bed\u97f3\u60c5\u611f\u5206\u6790\uff1a\u8bc6\u522b\u5bf9\u8bdd\u4e2d\u7684\u60c5\u7eea\u6ce2\u52a8\u4e0e\u6f5c\u5728\u51b2\u7a81<\/li>\n <li>\u6587\u5b57\u8bed\u4e49\u89e3\u6790\uff1a\u5206\u6790\u804a\u5929\u5185\u5bb9\u4e2d\u7684\u60c5\u611f\u503e\u5411\u4e0e\u9700\u6c42<\/li>\n <li>\u9762\u90e8\u5fae\u8868\u60c5\u6355\u6349\uff1a\u901a\u8fc7\u89c6\u9891\u4e92\u52a8\u8bc6\u522b\u60c5\u7eea\u72b6\u6001<\/li>\n <li>\u884c\u4e3a\u6a21\u5f0f\u5206\u6790\uff1a\u57fa\u4e8e\u65e5\u5e38\u884c\u4e3a\u6570\u636e\u9884\u6d4b\u60c5\u611f\u5371\u673a<\/li>\n <li>\u591a\u6a21\u6001\u878d\u5408\u7b97\u6cd5\uff1a\u7efc\u5408\u5224\u65ad\u60c5\u611f\u72b6\u6001\uff0c\u51c6\u786e\u738792.3%<\/li>\n <\/ul>\n <\/div>\n <div class=\"feature-visual\">\n <canvas id=\"modalityChart\" width=\"400\" height=\"300\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"tab-content\" id=\"tab3\">\n <div class=\"feature-detail\">\n <div class=\"feature-header\">\n <div class=\"feature-icon-large\">\n <i class=\"fas fa-hands-helping\"><\/i>\n <\/div>\n <div>\n <h2>\u667a\u80fd\u5e72\u9884\u7cfb\u7edf<\/h2>\n <p>\u7cbe\u51c6\u3001\u53ca\u65f6\u7684\u5bb6\u5ead\u60c5\u611f\u5371\u673a\u9884\u9632\u4e0e\u89e3\u51b3\u65b9\u6848<\/p>\n <\/div>\n <\/div>\n <div class=\"feature-content\">\n <div class=\"feature-text\">\n <h3>AI\u60c5\u611f\u6559\u7ec3<\/h3>\n <ul class=\"feature-list\">\n <li>\u5b9e\u65f6\u6c9f\u901a\u6559\u7ec3\uff1a\u5728\u5bb6\u5ead\u5bf9\u8bdd\u4e2d\u63d0\u4f9b\u667a\u80fd\u6307\u5bfc<\/li>\n <li>\u51b2\u7a81\u8c03\u89e3\u5de5\u5177\uff1a\u7ed3\u6784\u5316\u51b2\u7a81\u89e3\u51b3\u6d41\u7a0b\u5f15\u5bfc<\/li>\n <li>\u60c5\u5883\u6f14\u7ec3\u6a21\u5757\uff1a\u6a21\u62df\u9ad8\u96be\u5ea6\u5bf9\u8bdd\u573a\u666f\u8fdb\u884c\u7ec3\u4e60<\/li>\n <li>\u4e2a\u6027\u5316\u65b9\u6848\u63a8\u8350\uff1a\u57fa\u4e8e\u5bb6\u5ead\u7279\u70b9\u5b9a\u5236\u6539\u5584\u8ba1\u5212<\/li>\n <li>\u5371\u673a\u9884\u8b66\u7cfb\u7edf\uff1a\u63d0\u524d14\u5929\u9884\u6d4b\u6f5c\u5728\u5bb6\u5ead\u51b2\u7a81<\/li>\n <\/ul>\n <\/div>\n <div class=\"feature-visual\">\n <canvas id=\"interventionChart\" width=\"400\" height=\"300\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"tab-content\" id=\"tab4\">\n <div class=\"feature-detail\">\n <div class=\"feature-header\">\n <div class=\"feature-icon-large\">\n <i class=\"fas fa-graduation-cap\"><\/i>\n <\/div>\n <div>\n <h2>\u4e13\u4e1a\u5185\u5bb9\u4f53\u7cfb<\/h2>\n <p>\u79d1\u5b66\u3001\u7cfb\u7edf\u7684\u5bb6\u5ead\u6559\u80b2\u4e0e\u60c5\u611f\u5065\u5eb7\u8bfe\u7a0b<\/p>\n <\/div>\n <\/div>\n <div class=\"feature-content\">\n <div class=\"feature-text\">\n <h3>\u5bb6\u5ead\u60c5\u611f\u6559\u80b2\u77e9\u9635<\/h3>\n <ul class=\"feature-list\">\n <li>\u5a5a\u59fb\u4fee\u590d\u8bfe\u7a0b\uff1a7\u963621\u8bfe\u7cfb\u7edf\u4fee\u590d\u592b\u59bb\u5173\u7cfb<\/li>\n <li>\u4eb2\u5b50\u6559\u80b2\u6307\u5357\uff1a\u5206\u9f84\u6559\u80b2\u7b56\u7565\u4e0e\u60c5\u7eea\u7ba1\u7406\u8bad\u7ec3<\/li>\n <li>\u4ee3\u9645\u6c9f\u901a\u5de5\u4f5c\u574a\uff1a\u4f20\u7edf\u4e0e\u73b0\u4ee3\u878d\u5408\u7684\u6c9f\u901a\u6280\u5de7<\/li>\n <li>\u5fc3\u7406\u81ea\u52a9\u8d44\u6e90\uff1a\u538b\u529b\u7ba1\u7406\u3001\u7126\u8651\u7f13\u89e3\u5b9e\u7528\u5de5\u5177<\/li>\n <li>\u5bb6\u5ead\u6d3b\u52a8\u5e93\uff1a500+\u4eb2\u5b50\u6d3b\u52a8\u4e0e\u5bb6\u5ead\u4e92\u52a8\u6e38\u620f<\/li>\n <\/ul>\n <\/div>\n <div class=\"feature-visual\">\n <canvas id=\"contentChart\" width=\"400\" height=\"300\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"tab-content\" id=\"tab5\">\n <div class=\"feature-detail\">\n <div class=\"feature-header\">\n <div class=\"feature-icon-large\">\n <i class=\"fas fa-building\"><\/i>\n <\/div>\n <div>\n <h2>\u4f01\u4e1aEAP\u6574\u5408<\/h2>\n <p>\u5458\u5de5\u5bb6\u5ead\u5065\u5eb7\u7ba1\u7406\uff0c\u63d0\u5347\u7ec4\u7ec7\u6548\u80fd<\/p>\n <\/div>\n <\/div>\n <div class=\"feature-content\">\n <div class=\"feature-text\">\n <h3>\u4f01\u4e1a\u5bb6\u5ead\u652f\u6301\u7cfb\u7edf<\/h3>\n <ul class=\"feature-list\">\n <li>\u5458\u5de5\u5bb6\u5ead\u5065\u5eb7\u76d1\u6d4b\uff1a\u533f\u540d\u805a\u5408\u6570\u636e\u5206\u6790\u5bb6\u5ead\u72b6\u6001<\/li>\n <li>\u7ba1\u7406\u8005\u9884\u8b66\u7cfb\u7edf\uff1a\u63d0\u793a\u53ef\u80fd\u9700\u8981\u652f\u6301\u7684\u5458\u5de5\u5bb6\u5ead<\/li>\n <li>\u4e13\u5c5e\u652f\u6301\u901a\u9053\uff1a\u4f01\u4e1a\u4ed8\u8d39\u7684\u4e13\u4e1a\u54a8\u8be2\u4e0e\u5e72\u9884\u670d\u52a1<\/li>\n <li>\u5bb6\u5ead\u53cb\u597d\u6587\u5316\u6784\u5efa\uff1a\u5e2e\u52a9\u4f01\u4e1a\u521b\u5efa\u652f\u6301\u6027\u73af\u5883<\/li>\n <li>\u6570\u636e\u5206\u6790\u62a5\u544a\uff1a\u4f01\u4e1a\u5458\u5de5\u5bb6\u5ead\u5065\u5eb7\u5e74\u5ea6\u5206\u6790<\/li>\n <\/ul>\n <\/div>\n <div class=\"feature-visual\">\n <canvas id=\"eapChart\" width=\"400\" height=\"300\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"data-viz-section\">\n <div class=\"section-title\">\n <h2>\u6570\u636e\u53ef\u89c6\u5316\u5c55\u793a<\/h2>\n <p>\u57fa\u4e8e10,000+\u5bb6\u5ead\u6570\u636e\u7684\u5206\u6790\u4e0e\u6d1e\u5bdf<\/p>\n <\/div>\n <div class=\"viz-container\">\n <div class=\"viz-card\">\n <div class=\"viz-header\">\n <div class=\"viz-icon\">\n <i class=\"fas fa-heart\"><\/i>\n <\/div>\n <h3>\u5bb6\u5ead\u60c5\u611f\u5065\u5eb7\u8d8b\u52bf<\/h3>\n <\/div>\n <div class=\"chart-container\">\n <canvas id=\"healthTrendChart\"><\/canvas>\n <\/div>\n <\/div>\n <div class=\"viz-card\">\n <div class=\"viz-header\">\n <div class=\"viz-icon\">\n <i class=\"fas fa-chart-pie\"><\/i>\n <\/div>\n <h3>\u5bb6\u5ead\u95ee\u9898\u5206\u5e03<\/h3>\n <\/div>\n <div class=\"chart-container\">\n <canvas id=\"problemDistributionChart\"><\/canvas>\n <\/div>\n <\/div>\n <div class=\"viz-card\">\n <div class=\"viz-header\">\n <div class=\"viz-icon\">\n <i class=\"fas fa-tachometer-alt\"><\/i>\n <\/div>\n <h3>\u5e72\u9884\u6548\u679c\u8bc4\u4f30<\/h3>\n <\/div>\n <div class=\"chart-container\">\n <canvas id=\"interventionEffectChart\"><\/canvas>\n <\/div>\n <\/div>\n <div class=\"viz-card\">\n <div class=\"viz-header\">\n <div class=\"viz-icon\">\n <i class=\"fas fa-clock\"><\/i>\n <\/div>\n <h3>\u4f7f\u7528\u65f6\u95f4\u4e0e\u6548\u679c\u5173\u7cfb<\/h3>\n <\/div>\n <div class=\"chart-container\">\n <canvas id=\"usageEffectChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"app-model-section\">\n <div class=\"section-title\">\n <h2>APP\u754c\u9762\u5c55\u793a<\/h2>\n <p>\u76f4\u89c2\u3001\u6613\u7528\u7684\u5bb6\u5ead\u60c5\u611f\u5065\u5eb7\u7ba1\u7406\u5e73\u53f0<\/p>\n <\/div>\n \n <div class=\"app-showcase\">\n <div class=\"phone-mockup\">\n <div class=\"phone-screen\">\n <img decoding=\"async\" src=\"https:\/\/www.affectivechain.com\/wp-content\/uploads\/2025\/07\/12111-1-e1755690186278.png\" alt=\"APP\u754c\u9762\" class=\"app-screen\">\n <\/div>\n <\/div>\n \n <div class=\"app-feature-points\">\n <div class=\"feature-point\">\n <div class=\"point-icon\">\n <i class=\"fas fa-tachometer-alt\"><\/i>\n <\/div>\n <div>\n <h4>\u60c5\u611f\u5065\u5eb7\u4eea\u8868\u76d8<\/h4>\n <p>\u5b9e\u65f6\u663e\u793a\u5bb6\u5ead\u6210\u5458\u60c5\u611f\u72b6\u6001\u548c\u5065\u5eb7\u6307\u6570<\/p>\n <\/div>\n <\/div>\n <div class=\"feature-point\">\n <div class=\"point-icon\">\n <i class=\"fas fa-comments\"><\/i>\n <\/div>\n <div>\n <h4>\u667a\u80fd\u6c9f\u901a\u52a9\u624b<\/h4>\n <p>\u5728\u5bf9\u8bdd\u4e2d\u63d0\u4f9b\u5b9e\u65f6\u6307\u5bfc\u548c\u5efa\u8bae<\/p>\n <\/div>\n <\/div>\n <div class=\"feature-point\">\n <div class=\"point-icon\">\n <i class=\"fas fa-calendar-check\"><\/i>\n <\/div>\n <div>\n <h4>\u5bb6\u5ead\u6d3b\u52a8\u8ba1\u5212<\/h4>\n <p>\u4e2a\u6027\u5316\u63a8\u8350\u5bb6\u5ead\u4e92\u52a8\u6d3b\u52a8\u4e0e\u8ba1\u5212<\/p>\n <\/div>\n <\/div>\n <div class=\"feature-point\">\n <div class=\"point-icon\">\n <i class=\"fas fa-chart-line\"><\/i>\n <\/div>\n <div>\n <h4>\u6210\u957f\u8f68\u8ff9\u8ffd\u8e2a<\/h4>\n <p>\u8bb0\u5f55\u60c5\u611f\u6210\u957f\u5386\u7a0b\u548c\u6539\u5584\u8d8b\u52bf<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n\n <script>\n \/\/ \u6807\u7b7e\u5207\u6362\u529f\u80fd\n document.querySelectorAll('.tab-btn').forEach(button => {\n button.addEventListener('click', () => {\n \/\/ \u79fb\u9664\u6240\u6709\u6fc0\u6d3b\u72b6\u6001\n document.querySelectorAll('.tab-btn').forEach(btn => {\n btn.classList.remove('active');\n });\n document.querySelectorAll('.tab-content').forEach(content => {\n content.classList.remove('active');\n });\n \n \/\/ \u6dfb\u52a0\u5f53\u524d\u6fc0\u6d3b\u72b6\u6001\n button.classList.add('active');\n document.getElementById(button.dataset.tab).classList.add('active');\n });\n });\n \n \/\/ \u60c5\u611f\u8d26\u6237\u56fe\u8868\n const emotionCtx = document.getElementById('emotionChart').getContext('2d');\n const emotionChart = new Chart(emotionCtx, {\n type: 'line',\n data: {\n labels: ['1\u6708', '2\u6708', '3\u6708', '4\u6708', '5\u6708', '6\u6708'],\n datasets: [{\n label: '\u60c5\u611f\u5065\u5eb7\u6307\u6570',\n data: [65, 70, 72, 80, 85, 88],\n borderColor: '#6c5ce7',\n backgroundColor: 'rgba(108, 92, 231, 0.1)',\n tension: 0.3,\n fill: true\n }]\n },\n options: {\n responsive: true,\n plugins: {\n title: {\n display: true,\n text: '\u5bb6\u5ead\u60c5\u611f\u5065\u5eb7\u8d8b\u52bf'\n }\n }\n }\n });\n \n \/\/ \u591a\u6a21\u6001\u60c5\u611f\u8bc6\u522b\u56fe\u8868\n const modalityCtx = document.getElementById('modalityChart').getContext('2d');\n const modalityChart = new Chart(modalityCtx, {\n type: 'radar',\n data: {\n labels: ['\u8bed\u97f3\u5206\u6790', '\u6587\u672c\u5206\u6790', '\u9762\u90e8\u8bc6\u522b', '\u884c\u4e3a\u5206\u6790', '\u751f\u7406\u4fe1\u53f7'],\n datasets: [{\n label: '\u51c6\u786e\u7387(%)',\n data: [92, 88, 95, 85, 78],\n backgroundColor: 'rgba(0, 206, 201, 0.2)',\n borderColor: '#00cec9',\n pointBackgroundColor: '#00cec9'\n }]\n },\n options: {\n responsive: true,\n scales: {\n r: {\n angleLines: {\n display: true\n },\n suggestedMin: 50,\n suggestedMax: 100\n }\n }\n }\n });\n \n \/\/ \u5065\u5eb7\u8d8b\u52bf\u56fe\u8868\n const healthTrendCtx = document.getElementById('healthTrendChart').getContext('2d');\n const healthTrendChart = new Chart(healthTrendCtx, {\n type: 'line',\n data: {\n labels: ['1\u6708', '2\u6708', '3\u6708', '4\u6708', '5\u6708', '6\u6708', '7\u6708', '8\u6708'],\n datasets: [{\n label: '\u4f7f\u7528\u5fc3\u8c10\u524d',\n data: [58, 62, 59, 55, 60, 57, 61, 59],\n borderColor: '#fd79a8',\n backgroundColor: 'transparent',\n borderDash: [5, 5],\n tension: 0.2\n }, {\n label: '\u4f7f\u7528\u5fc3\u8c10\u540e',\n data: [59, 65, 70, 75, 78, 82, 85, 88],\n borderColor: '#00b894',\n backgroundColor: 'transparent',\n tension: 0.2\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n title: {\n display: true,\n text: '\u5bb6\u5ead\u60c5\u611f\u5065\u5eb7\u6307\u6570\u53d8\u5316'\n }\n },\n scales: {\n y: {\n min: 50,\n max: 100\n }\n }\n }\n });\n \n \/\/ \u95ee\u9898\u5206\u5e03\u56fe\u8868\n const problemDistributionCtx = document.getElementById('problemDistributionChart').getContext('2d');\n const problemDistributionChart = new Chart(problemDistributionCtx, {\n type: 'doughnut',\n data: {\n labels: ['\u6c9f\u901a\u95ee\u9898', '\u6559\u80b2\u5206\u6b67', '\u60c5\u611f\u758f\u79bb', '\u5de5\u4f5c\u538b\u529b', '\u5176\u4ed6'],\n datasets: [{\n data: [35, 25, 20, 15, 5],\n backgroundColor: [\n '#6c5ce7',\n '#a29bfe',\n '#00cec9',\n '#fd79a8',\n '#fdcb6e'\n ]\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n position: 'right'\n }\n }\n }\n });\n \n \/\/ \u521d\u59cb\u5316\u5176\u4ed6\u56fe\u8868\n const initCharts = () => {\n \/\/ \u5e72\u9884\u6548\u679c\u56fe\u8868\n const interventionEffectCtx = document.getElementById('interventionEffectChart').getContext('2d');\n new Chart(interventionEffectCtx, {\n type: 'bar',\n data: {\n labels: ['\u6c9f\u901a\u6539\u5584', '\u51b2\u7a81\u51cf\u5c11', '\u4eb2\u5bc6\u5ea6\u63d0\u5347', '\u538b\u529b\u964d\u4f4e', '\u6ee1\u610f\u5ea6\u63d0\u5347'],\n datasets: [{\n label: '\u6539\u5584\u7387(%)',\n data: [72, 68, 75, 65, 80],\n backgroundColor: '#6c5ce7'\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n indexAxis: 'y'\n }\n });\n \n \/\/ \u4f7f\u7528\u65f6\u95f4\u4e0e\u6548\u679c\u5173\u7cfb\u56fe\u8868\n const usageEffectCtx = document.getElementById('usageEffectChart').getContext('2d');\n new Chart(usageEffectCtx, {\n type: 'scatter',\n data: {\n datasets: [{\n label: '\u4f7f\u7528\u65f6\u95f4 vs \u6548\u679c',\n data: [\n {x: 5, y: 15}, {x: 10, y: 25}, {x: 15, y: 35},\n {x: 20, y: 45}, {x: 25, y: 55}, {x: 30, y: 65},\n {x: 35, y: 70}, {x: 40, y: 75}, {x: 45, y: 80},\n {x: 50, y: 82}, {x: 55, y: 84}, {x: 60, y: 86}\n ],\n backgroundColor: '#00cec9'\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n title: {\n display: true,\n text: '\u6bcf\u5468\u4f7f\u7528\u65f6\u95f4(\u5206\u949f)\u4e0e\u6539\u5584\u6548\u679c\u5173\u7cfb'\n }\n },\n scales: {\n x: {\n title: {\n display: true,\n text: '\u6bcf\u5468\u4f7f\u7528\u65f6\u95f4(\u5206\u949f)'\n }\n },\n y: {\n title: {\n display: true,\n text: '\u60c5\u611f\u5065\u5eb7\u6539\u5584\u6307\u6570'\n }\n }\n }\n }\n });\n \n \/\/ \u5176\u4ed6\u529f\u80fd\u6807\u7b7e\u7684\u56fe\u8868\n const interventionCtx = document.getElementById('interventionChart').getContext('2d');\n new Chart(interventionCtx, {\n type: 'bar',\n data: {\n labels: ['\u6c9f\u901a\u6307\u5bfc', '\u51b2\u7a81\u8c03\u89e3', '\u6d3b\u52a8\u63a8\u8350', '\u5371\u673a\u9884\u8b66', '\u8fdb\u5ea6\u8ddf\u8e2a'],\n datasets: [{\n label: '\u7528\u6237\u6ee1\u610f\u5ea6(%)',\n data: [88, 85, 90, 92, 87],\n backgroundColor: '#fd79a8'\n }]\n },\n options: {\n responsive: true\n }\n });\n \n const contentCtx = document.getElementById('contentChart').getContext('2d');\n new Chart(contentCtx, {\n type: 'pie',\n data: {\n labels: ['\u5a5a\u59fb\u5173\u7cfb', '\u4eb2\u5b50\u6559\u80b2', '\u4ee3\u9645\u6c9f\u901a', '\u5fc3\u7406\u81ea\u52a9', '\u5bb6\u5ead\u6d3b\u52a8'],\n datasets: [{\n data: [30, 25, 20, 15, 10],\n backgroundColor: [\n '#6c5ce7', '#a29bfe', '#00cec9', '#fd79a8', '#fdcb6e'\n ]\n }]\n },\n options: {\n responsive: true\n }\n });\n \n const eapCtx = document.getElementById('eapChart').getContext('2d');\n new Chart(eapCtx, {\n type: 'line',\n data: {\n labels: ['Q1', 'Q2', 'Q3', 'Q4'],\n datasets: [{\n label: '\u5458\u5de5\u6ee1\u610f\u5ea6',\n data: [65, 72, 78, 82],\n borderColor: '#00b894',\n tension: 0.3\n }, {\n label: '\u5de5\u4f5c\u6548\u7387',\n data: [68, 74, 77, 83],\n borderColor: '#fdcb6e',\n tension: 0.3\n }]\n },\n options: {\n responsive: true\n }\n });\n };\n \n \/\/ \u9875\u9762\u52a0\u8f7d\u540e\u521d\u59cb\u5316\u6240\u6709\u56fe\u8868\n window.addEventListener('load', initCharts);\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u5fc3\u8c10APP – \u5bb6\u5ead\u60c5\u611f\u5065\u5eb7\u7ba1\u7406\u7cfb\u7edf \u5fc3\u8c10APP\uff1a\u91cd\u65b0\u5b9a\u4e49\u5bb6\u5ead\u60c5\u611f\u5065\u5eb7\u7ba1\u7406 \u56fd\u5185\u9996\u6b3e\u57fa\u4e8e\u591a\u6a21\u6001\u60c5\u611f […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2100","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/2100","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/comments?post=2100"}],"version-history":[{"count":7,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/2100\/revisions"}],"predecessor-version":[{"id":2110,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/2100\/revisions\/2110"}],"wp:attachment":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/media?parent=2100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":2100,"date":"2025-08-20T19:31:24","date_gmt":"2025-08-20T11:31:24","guid":{"rendered":"https:\/\/www.affectivechain.com\/?page_id=2100"},"modified":"2025-08-20T19:51:44","modified_gmt":"2025-08-20T11:51:44","slug":"xinchain","status":"publish","type":"page","link":"https:\/\/www.affectivechain.com\/index.php\/xinchain\/","title":{"rendered":"\u5fc3\u94fe\u60c5\u667a"},"content":{"rendered":"\n\n\n\n \n \n \u5fc3\u8c10APP – \u5bb6\u5ead\u60c5\u611f\u5065\u5eb7\u7ba1\u7406\u7cfb\u7edf<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Quicksand:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <style>\n :root {\n --primary: #6c5ce7;\n --primary-light: #a29bfe;\n --secondary: #00cec9;\n --accent: #fd79a8;\n --dark: #2d3436;\n --light: #f7f9fc;\n --success: #00b894;\n --warning: #fdcb6e;\n --card-bg: rgba(255, 255, 255, 0.85);\n --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n --app-bg: #f8f9ff;\n }\n \n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n \n body {\n font-family: 'Noto Sans SC', sans-serif;\n background: var(--app-bg);\n color: var(--dark);\n line-height: 1.6;\n overflow-x: hidden;\n min-height: 100vh;\n padding: px;\n }\n \n .container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 20px;\n }\n \n \/* \u4ea7\u54c1\u6982\u8ff0 *\/\n .product-overview {\n padding: 60px 0 40px;\n text-align: center;\n }\n \n .product-title {\n font-size: 2.8rem;\n font-weight: 700;\n margin-bottom: 20px;\n color: var(--dark);\n font-family: 'Quicksand', sans-serif;\n line-height: 1.2;\n }\n \n .product-title span {\n background: linear-gradient(120deg, var(--primary), var(--secondary));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n }\n \n .product-subtitle {\n font-size: 1.3rem;\n max-width: 800px;\n margin: 0 auto 40px;\n color: #555;\n }\n \n \/* \u95ee\u9898\u5c55\u793a\u533a *\/\n .problems-section {\n padding: 60px 0;\n background: white;\n border-radius: 20px;\n margin-bottom: 40px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);\n }\n \n .section-title {\n text-align: center;\n margin-bottom: 50px;\n }\n \n .section-title h2 {\n font-size: 2.5rem;\n color: var(--dark);\n margin-bottom: 15px;\n font-family: 'Quicksand', sans-serif;\n }\n \n .section-title p {\n font-size: 1.2rem;\n color: #666;\n max-width: 700px;\n margin: 0 auto;\n }\n \n .problems-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 30px;\n }\n \n .problem-card {\n background: var(--light);\n border-radius: 15px;\n padding: 30px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);\n transition: var(--transition);\n text-align: center;\n border-top: 5px solid var(--accent);\n }\n \n .problem-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);\n }\n \n .problem-icon {\n width: 70px;\n height: 70px;\n background: linear-gradient(120deg, var(--accent), #ff9dbb);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 20px;\n color: white;\n font-size: 1.8rem;\n }\n \n \/* \u529f\u80fd\u6a21\u5757 *\/\n .features-section {\n padding: 60px 0;\n background: var(--app-bg);\n border-radius: 20px;\n margin-bottom: 40px;\n }\n \n .features-tabs {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 15px;\n margin-bottom: 50px;\n }\n \n .tab-btn {\n background: white;\n padding: 15px 30px;\n border-radius: 30px;\n border: 2px solid var(--primary-light);\n cursor: pointer;\n transition: var(--transition);\n font-weight: 500;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n \n .tab-btn.active {\n background: var(--primary);\n color: white;\n border-color: var(--primary);\n box-shadow: 0 5px 15px rgba(108, 92, 231, 0.3);\n }\n \n .tab-content {\n display: none;\n }\n \n .tab-content.active {\n display: block;\n animation: fadeIn 0.5s ease;\n }\n \n .feature-detail {\n background: white;\n border-radius: 20px;\n padding: 40px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);\n }\n \n .feature-header {\n display: flex;\n align-items: center;\n gap: 20px;\n margin-bottom: 30px;\n }\n \n .feature-icon-large {\n width: 80px;\n height: 80px;\n background: linear-gradient(120deg, var(--primary), var(--primary-light));\n border-radius: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 2rem;\n }\n \n .feature-content {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 30px;\n }\n \n .feature-text h3 {\n font-size: 1.8rem;\n margin-bottom: 20px;\n color: var(--primary);\n }\n \n .feature-list {\n list-style: none;\n }\n \n .feature-list li {\n margin-bottom: 15px;\n padding-left: 30px;\n position: relative;\n }\n \n .feature-list li:before {\n content: \"\u2713\";\n color: var(--success);\n font-weight: bold;\n position: absolute;\n left: 0;\n }\n \n .feature-visual {\n background: var(--light);\n border-radius: 15px;\n padding: 20px;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n \n \/* \u6570\u636e\u53ef\u89c6\u5316 *\/\n .data-viz-section {\n padding: 60px 0;\n background: white;\n border-radius: 20px;\n margin-bottom: 40px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);\n }\n \n .viz-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));\n gap: 30px;\n }\n \n .viz-card {\n background: var(--light);\n border-radius: 15px;\n padding: 30px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);\n }\n \n .viz-header {\n display: flex;\n align-items: center;\n gap: 15px;\n margin-bottom: 20px;\n }\n \n .viz-icon {\n width: 50px;\n height: 50px;\n background: linear-gradient(120deg, var(--secondary), #81ecec);\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 1.5rem;\n }\n \n .chart-container {\n height: 300px;\n position: relative;\n }\n \n \/* APP\u6a21\u578b *\/\n .app-model-section {\n padding: 60px 0;\n background: var(--app-bg);\n border-radius: 20px;\n margin-bottom: 40px;\n }\n \n .app-showcase {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 40px;\n flex-wrap: wrap;\n }\n \n .phone-mockup {\n width: 300px;\n height: 600px;\n background: white;\n border-radius: 40px;\n padding: 15px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);\n position: relative;\n overflow: hidden;\n }\n \n .phone-screen {\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);\n border-radius: 30px;\n overflow: hidden;\n position: relative;\n }\n \n .app-screen {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n \n .app-feature-points {\n flex: 1;\n min-width: 300px;\n }\n \n .feature-point {\n background: white;\n padding: 20px;\n border-radius: 15px;\n margin-bottom: 20px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);\n display: flex;\n align-items: center;\n gap: 15px;\n }\n \n .point-icon {\n width: 40px;\n height: 40px;\n background: var(--primary-light);\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 1.2rem;\n }\n \n \/* \u52a8\u753b *\/\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n \n @keyframes float {\n 0% { transform: translateY(0px); }\n 50% { transform: translateY(-10px); }\n 100% { transform: translateY(0px); }\n }\n \n \/* \u54cd\u5e94\u5f0f\u8bbe\u8ba1 *\/\n @media (max-width: 768px) {\n .product-title {\n font-size: 2.2rem;\n }\n \n .section-title h2 {\n font-size: 2rem;\n }\n \n .feature-content {\n grid-template-columns: 1fr;\n }\n \n .viz-container {\n grid-template-columns: 1fr;\n }\n \n .phone-mockup {\n width: 250px;\n height: 500px;\n }\n }\n \n @media (max-width: 480px) {\n .product-title {\n font-size: 1.8rem;\n }\n \n .tab-btn {\n width: 100%;\n justify-content: center;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n \n <section class=\"product-overview\">\n <h1 class=\"product-title\">\u5fc3\u8c10APP\uff1a\u91cd\u65b0\u5b9a\u4e49<span>\u5bb6\u5ead\u60c5\u611f\u5065\u5eb7\u7ba1\u7406<\/span><\/h1>\n <p class=\"product-subtitle\">\u56fd\u5185\u9996\u6b3e\u57fa\u4e8e\u591a\u6a21\u6001\u60c5\u611fAI\u7684\u5bb6\u5ead\u60c5\u611f\u5065\u5eb7\u5e73\u53f0\uff0c\u91cf\u5316\u60c5\u611f\u4ef7\u503c\uff0c\u5b88\u62a4\u5bb6\u5ead\u5e78\u798f\uff0c\u8ba9\u79d1\u6280\u6e29\u6696\u6bcf\u4e00\u4e2a\u5bb6\u5ead\u5173\u7cfb<\/p>\n <\/section>\n\n \n <section class=\"problems-section\">\n <div class=\"section-title\">\n <h2>\u6211\u4eec\u89e3\u51b3\u7684\u6838\u5fc3\u95ee\u9898<\/h2>\n <p>\u73b0\u4ee3\u5bb6\u5ead\u9762\u4e34\u7684\u60c5\u611f\u5065\u5eb7\u6311\u6218\u4e0e\u75db\u70b9<\/p>\n <\/div>\n <div class=\"problems-grid\">\n <div class=\"problem-card\">\n <div class=\"problem-icon\">\n <i class=\"fas fa-heart\"><\/i>\n <\/div>\n <h3>\u5a5a\u59fb\u5173\u7cfb\u7d27\u5f20<\/h3>\n <p>\u6c9f\u901a\u969c\u788d\u3001\u60c5\u611f\u758f\u79bb\u3001\u4fe1\u4efb\u5371\u673a\u3001\u51b2\u7a81\u4e0d\u65ad\uff0c\u7f3a\u4e4f\u79d1\u5b66\u89e3\u51b3\u65b9\u6cd5<\/p>\n <\/div>\n <div class=\"problem-card\">\n <div class=\"problem-icon\">\n <i class=\"fas fa-child\"><\/i>\n <\/div>\n <h3>\u4eb2\u5b50\u6559\u80b2\u56f0\u5883<\/h3>\n <p>\u4ee3\u9645\u6559\u80b2\u51b2\u7a81\u3001\u6559\u80b2\u7406\u5ff5\u5206\u6b67\u3001\u6eba\u7231\u4e0e\u7126\u8651\u5e76\u5b58\uff0c\u7f3a\u4e4f\u79d1\u5b66\u6307\u5bfc<\/p>\n <\/div>\n <div class=\"problem-card\">\n <div class=\"problem-icon\">\n <i class=\"fas fa-users\"><\/i>\n <\/div>\n <h3>\u4ee3\u9645\u6c9f\u901a\u969c\u788d<\/h3>\n <p>\u4f20\u7edf\u4e0e\u73b0\u4ee3\u89c2\u5ff5\u51b2\u7a81\u3001\u6c9f\u901a\u65b9\u5f0f\u4e0d\u5f53\uff0c\u7f3a\u4e4f\u76f8\u4e92\u7406\u89e3\u4e0e\u5c0a\u91cd<\/p>\n <\/div>\n <div class=\"problem-card\">\n <div class=\"problem-icon\">\n <i class=\"fas fa-brain\"><\/i>\n <\/div>\n <h3>\u5fc3\u7406\u5065\u5eb7\u95ee\u9898<\/h3>\n <p>\u538b\u529b\u65e0\u6cd5\u91ca\u653e\u3001\u5fc3\u7406\u95ee\u9898\u6c61\u540d\u5316\u3001\u4e13\u4e1a\u5e2e\u52a9\u83b7\u53d6\u96be\uff0c\u7f3a\u4e4f\u6709\u6548\u652f\u6301<\/p>\n <\/div>\n <div class=\"problem-card\">\n <div class=\"problem-icon\">\n <i class=\"fas fa-briefcase\"><\/i>\n <\/div>\n <h3>\u5de5\u4f5c\u5bb6\u5ead\u5931\u8861<\/h3>\n <p>\u5de5\u4f5c\u538b\u529b\u5f71\u54cd\u5bb6\u5ead\u5173\u7cfb\u3001\u7f3a\u4e4f\u5e73\u8861\u6280\u5de7\uff0c\u4f01\u4e1a\u7f3a\u4e4f\u6709\u6548EAP\u652f\u6301<\/p>\n <\/div>\n <div class=\"problem-card\">\n <div class=\"problem-icon\">\n <i class=\"fas fa-house-user\"><\/i>\n <\/div>\n <h3>\u5bb6\u5ead\u7cfb\u7edf\u5931\u8c03<\/h3>\n <p>\u89d2\u8272\u6df7\u4e71\u3001\u8fb9\u754c\u6a21\u7cca\u3001\u89c4\u5219\u7f3a\u5931\uff0c\u7f3a\u4e4f\u79d1\u5b66\u5bb6\u5ead\u7ba1\u7406\u7cfb\u7edf<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"features-section\">\n <div class=\"section-title\">\n <h2>\u6838\u5fc3\u529f\u80fd\u6a21\u5757<\/h2>\n <p>\u5168\u65b9\u4f4d\u89e3\u51b3\u5bb6\u5ead\u60c5\u611f\u5065\u5eb7\u95ee\u9898<\/p>\n <\/div>\n \n <div class=\"features-tabs\">\n <div class=\"tab-btn active\" data-tab=\"tab1\">\n <i class=\"fas fa-chart-line\"><\/i>\n <span>\u60c5\u611f\u8d26\u6237\u7cfb\u7edf<\/span>\n <\/div>\n <div class=\"tab-btn\" data-tab=\"tab2\">\n <i class=\"fas fa-brain\"><\/i>\n <span>\u591a\u6a21\u6001\u60c5\u611f\u8bc6\u522b<\/span>\n <\/div>\n <div class=\"tab-btn\" data-tab=\"tab3\">\n <i class=\"fas fa-hands-helping\"><\/i>\n <span>\u667a\u80fd\u5e72\u9884\u7cfb\u7edf<\/span>\n <\/div>\n <div class=\"tab-btn\" data-tab=\"tab4\">\n <i class=\"fas fa-graduation-cap\"><\/i>\n <span>\u4e13\u4e1a\u5185\u5bb9\u4f53\u7cfb<\/span>\n <\/div>\n <div class=\"tab-btn\" data-tab=\"tab5\">\n <i class=\"fas fa-building\"><\/i>\n <span>\u4f01\u4e1aEAP\u6574\u5408<\/span>\n <\/div>\n <\/div>\n \n <div class=\"tab-content active\" id=\"tab1\">\n <div class=\"feature-detail\">\n <div class=\"feature-header\">\n <div class=\"feature-icon-large\">\n <i class=\"fas fa-chart-line\"><\/i>\n <\/div>\n <div>\n <h2>\u60c5\u611f\u8d26\u6237\u7cfb\u7edf<\/h2>\n <p>\u91cf\u5316\u5bb6\u5ead\u60c5\u611f\u4ef7\u503c\uff0c\u53ef\u89c6\u5316\u60c5\u611f\u5065\u5eb7\u8d8b\u52bf<\/p>\n <\/div>\n <\/div>\n <div class=\"feature-content\">\n <div class=\"feature-text\">\n <h3>\u5bb6\u5ead\u60c5\u611fCRM<\/h3>\n <ul class=\"feature-list\">\n <li>\u4e3a\u6bcf\u4e2a\u5bb6\u5ead\u6210\u5458\u5efa\u7acb\u60c5\u611f\u6570\u636e\u5e93\u4e0e\u4e2a\u6027\u5316\u6863\u6848<\/li>\n <li>\u8bb0\u5f55\u65e5\u5e38\u4e92\u52a8\u9891\u7387\u4e0e\u8d28\u91cf\uff0c\u751f\u6210\u60c5\u611f\u4e92\u52a8\u62a5\u544a<\/li>\n <li>\u53ef\u89c6\u5316\u60c5\u611f\u8d44\u4ea7\u53d8\u5316\u8d8b\u52bf\uff0c\u8bc6\u522b\u5173\u7cfb\u6ce2\u52a8\u6a21\u5f0f<\/li>\n <li>\u60c5\u611f\u79ef\u5206\u4f53\u7cfb\uff0c\u6b63\u5411\u884c\u4e3a\u5956\u52b1\u4fc3\u8fdb\u79ef\u6781\u4e92\u52a8<\/li>\n <li>\u60c5\u611f\u8d44\u4ea7\u8d1f\u503a\u8868\uff0c\u5168\u9762\u8bc4\u4f30\u5bb6\u5ead\u60c5\u611f\u5065\u5eb7\u5ea6<\/li>\n <\/ul>\n <\/div>\n <div class=\"feature-visual\">\n <canvas id=\"emotionChart\" width=\"400\" height=\"300\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"tab-content\" id=\"tab2\">\n <div class=\"feature-detail\">\n <div class=\"feature-header\">\n <div class=\"feature-icon-large\">\n <i class=\"fas fa-brain\"><\/i>\n <\/div>\n <div>\n <h2>\u591a\u6a21\u6001\u60c5\u611f\u8bc6\u522b<\/h2>\n <p>AI\u9a71\u52a8\u7684\u7cbe\u51c6\u60c5\u611f\u72b6\u6001\u5206\u6790\u4e0e\u9884\u6d4b<\/p>\n <\/div>\n <\/div>\n <div class=\"feature-content\">\n <div class=\"feature-text\">\n <h3>\u60c5\u611fAI\u5f15\u64ce<\/h3>\n <ul class=\"feature-list\">\n <li>\u8bed\u97f3\u60c5\u611f\u5206\u6790\uff1a\u8bc6\u522b\u5bf9\u8bdd\u4e2d\u7684\u60c5\u7eea\u6ce2\u52a8\u4e0e\u6f5c\u5728\u51b2\u7a81<\/li>\n <li>\u6587\u5b57\u8bed\u4e49\u89e3\u6790\uff1a\u5206\u6790\u804a\u5929\u5185\u5bb9\u4e2d\u7684\u60c5\u611f\u503e\u5411\u4e0e\u9700\u6c42<\/li>\n <li>\u9762\u90e8\u5fae\u8868\u60c5\u6355\u6349\uff1a\u901a\u8fc7\u89c6\u9891\u4e92\u52a8\u8bc6\u522b\u60c5\u7eea\u72b6\u6001<\/li>\n <li>\u884c\u4e3a\u6a21\u5f0f\u5206\u6790\uff1a\u57fa\u4e8e\u65e5\u5e38\u884c\u4e3a\u6570\u636e\u9884\u6d4b\u60c5\u611f\u5371\u673a<\/li>\n <li>\u591a\u6a21\u6001\u878d\u5408\u7b97\u6cd5\uff1a\u7efc\u5408\u5224\u65ad\u60c5\u611f\u72b6\u6001\uff0c\u51c6\u786e\u738792.3%<\/li>\n <\/ul>\n <\/div>\n <div class=\"feature-visual\">\n <canvas id=\"modalityChart\" width=\"400\" height=\"300\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"tab-content\" id=\"tab3\">\n <div class=\"feature-detail\">\n <div class=\"feature-header\">\n <div class=\"feature-icon-large\">\n <i class=\"fas fa-hands-helping\"><\/i>\n <\/div>\n <div>\n <h2>\u667a\u80fd\u5e72\u9884\u7cfb\u7edf<\/h2>\n <p>\u7cbe\u51c6\u3001\u53ca\u65f6\u7684\u5bb6\u5ead\u60c5\u611f\u5371\u673a\u9884\u9632\u4e0e\u89e3\u51b3\u65b9\u6848<\/p>\n <\/div>\n <\/div>\n <div class=\"feature-content\">\n <div class=\"feature-text\">\n <h3>AI\u60c5\u611f\u6559\u7ec3<\/h3>\n <ul class=\"feature-list\">\n <li>\u5b9e\u65f6\u6c9f\u901a\u6559\u7ec3\uff1a\u5728\u5bb6\u5ead\u5bf9\u8bdd\u4e2d\u63d0\u4f9b\u667a\u80fd\u6307\u5bfc<\/li>\n <li>\u51b2\u7a81\u8c03\u89e3\u5de5\u5177\uff1a\u7ed3\u6784\u5316\u51b2\u7a81\u89e3\u51b3\u6d41\u7a0b\u5f15\u5bfc<\/li>\n <li>\u60c5\u5883\u6f14\u7ec3\u6a21\u5757\uff1a\u6a21\u62df\u9ad8\u96be\u5ea6\u5bf9\u8bdd\u573a\u666f\u8fdb\u884c\u7ec3\u4e60<\/li>\n <li>\u4e2a\u6027\u5316\u65b9\u6848\u63a8\u8350\uff1a\u57fa\u4e8e\u5bb6\u5ead\u7279\u70b9\u5b9a\u5236\u6539\u5584\u8ba1\u5212<\/li>\n <li>\u5371\u673a\u9884\u8b66\u7cfb\u7edf\uff1a\u63d0\u524d14\u5929\u9884\u6d4b\u6f5c\u5728\u5bb6\u5ead\u51b2\u7a81<\/li>\n <\/ul>\n <\/div>\n <div class=\"feature-visual\">\n <canvas id=\"interventionChart\" width=\"400\" height=\"300\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"tab-content\" id=\"tab4\">\n <div class=\"feature-detail\">\n <div class=\"feature-header\">\n <div class=\"feature-icon-large\">\n <i class=\"fas fa-graduation-cap\"><\/i>\n <\/div>\n <div>\n <h2>\u4e13\u4e1a\u5185\u5bb9\u4f53\u7cfb<\/h2>\n <p>\u79d1\u5b66\u3001\u7cfb\u7edf\u7684\u5bb6\u5ead\u6559\u80b2\u4e0e\u60c5\u611f\u5065\u5eb7\u8bfe\u7a0b<\/p>\n <\/div>\n <\/div>\n <div class=\"feature-content\">\n <div class=\"feature-text\">\n <h3>\u5bb6\u5ead\u60c5\u611f\u6559\u80b2\u77e9\u9635<\/h3>\n <ul class=\"feature-list\">\n <li>\u5a5a\u59fb\u4fee\u590d\u8bfe\u7a0b\uff1a7\u963621\u8bfe\u7cfb\u7edf\u4fee\u590d\u592b\u59bb\u5173\u7cfb<\/li>\n <li>\u4eb2\u5b50\u6559\u80b2\u6307\u5357\uff1a\u5206\u9f84\u6559\u80b2\u7b56\u7565\u4e0e\u60c5\u7eea\u7ba1\u7406\u8bad\u7ec3<\/li>\n <li>\u4ee3\u9645\u6c9f\u901a\u5de5\u4f5c\u574a\uff1a\u4f20\u7edf\u4e0e\u73b0\u4ee3\u878d\u5408\u7684\u6c9f\u901a\u6280\u5de7<\/li>\n <li>\u5fc3\u7406\u81ea\u52a9\u8d44\u6e90\uff1a\u538b\u529b\u7ba1\u7406\u3001\u7126\u8651\u7f13\u89e3\u5b9e\u7528\u5de5\u5177<\/li>\n <li>\u5bb6\u5ead\u6d3b\u52a8\u5e93\uff1a500+\u4eb2\u5b50\u6d3b\u52a8\u4e0e\u5bb6\u5ead\u4e92\u52a8\u6e38\u620f<\/li>\n <\/ul>\n <\/div>\n <div class=\"feature-visual\">\n <canvas id=\"contentChart\" width=\"400\" height=\"300\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"tab-content\" id=\"tab5\">\n <div class=\"feature-detail\">\n <div class=\"feature-header\">\n <div class=\"feature-icon-large\">\n <i class=\"fas fa-building\"><\/i>\n <\/div>\n <div>\n <h2>\u4f01\u4e1aEAP\u6574\u5408<\/h2>\n <p>\u5458\u5de5\u5bb6\u5ead\u5065\u5eb7\u7ba1\u7406\uff0c\u63d0\u5347\u7ec4\u7ec7\u6548\u80fd<\/p>\n <\/div>\n <\/div>\n <div class=\"feature-content\">\n <div class=\"feature-text\">\n <h3>\u4f01\u4e1a\u5bb6\u5ead\u652f\u6301\u7cfb\u7edf<\/h3>\n <ul class=\"feature-list\">\n <li>\u5458\u5de5\u5bb6\u5ead\u5065\u5eb7\u76d1\u6d4b\uff1a\u533f\u540d\u805a\u5408\u6570\u636e\u5206\u6790\u5bb6\u5ead\u72b6\u6001<\/li>\n <li>\u7ba1\u7406\u8005\u9884\u8b66\u7cfb\u7edf\uff1a\u63d0\u793a\u53ef\u80fd\u9700\u8981\u652f\u6301\u7684\u5458\u5de5\u5bb6\u5ead<\/li>\n <li>\u4e13\u5c5e\u652f\u6301\u901a\u9053\uff1a\u4f01\u4e1a\u4ed8\u8d39\u7684\u4e13\u4e1a\u54a8\u8be2\u4e0e\u5e72\u9884\u670d\u52a1<\/li>\n <li>\u5bb6\u5ead\u53cb\u597d\u6587\u5316\u6784\u5efa\uff1a\u5e2e\u52a9\u4f01\u4e1a\u521b\u5efa\u652f\u6301\u6027\u73af\u5883<\/li>\n <li>\u6570\u636e\u5206\u6790\u62a5\u544a\uff1a\u4f01\u4e1a\u5458\u5de5\u5bb6\u5ead\u5065\u5eb7\u5e74\u5ea6\u5206\u6790<\/li>\n <\/ul>\n <\/div>\n <div class=\"feature-visual\">\n <canvas id=\"eapChart\" width=\"400\" height=\"300\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"data-viz-section\">\n <div class=\"section-title\">\n <h2>\u6570\u636e\u53ef\u89c6\u5316\u5c55\u793a<\/h2>\n <p>\u57fa\u4e8e10,000+\u5bb6\u5ead\u6570\u636e\u7684\u5206\u6790\u4e0e\u6d1e\u5bdf<\/p>\n <\/div>\n <div class=\"viz-container\">\n <div class=\"viz-card\">\n <div class=\"viz-header\">\n <div class=\"viz-icon\">\n <i class=\"fas fa-heart\"><\/i>\n <\/div>\n <h3>\u5bb6\u5ead\u60c5\u611f\u5065\u5eb7\u8d8b\u52bf<\/h3>\n <\/div>\n <div class=\"chart-container\">\n <canvas id=\"healthTrendChart\"><\/canvas>\n <\/div>\n <\/div>\n <div class=\"viz-card\">\n <div class=\"viz-header\">\n <div class=\"viz-icon\">\n <i class=\"fas fa-chart-pie\"><\/i>\n <\/div>\n <h3>\u5bb6\u5ead\u95ee\u9898\u5206\u5e03<\/h3>\n <\/div>\n <div class=\"chart-container\">\n <canvas id=\"problemDistributionChart\"><\/canvas>\n <\/div>\n <\/div>\n <div class=\"viz-card\">\n <div class=\"viz-header\">\n <div class=\"viz-icon\">\n <i class=\"fas fa-tachometer-alt\"><\/i>\n <\/div>\n <h3>\u5e72\u9884\u6548\u679c\u8bc4\u4f30<\/h3>\n <\/div>\n <div class=\"chart-container\">\n <canvas id=\"interventionEffectChart\"><\/canvas>\n <\/div>\n <\/div>\n <div class=\"viz-card\">\n <div class=\"viz-header\">\n <div class=\"viz-icon\">\n <i class=\"fas fa-clock\"><\/i>\n <\/div>\n <h3>\u4f7f\u7528\u65f6\u95f4\u4e0e\u6548\u679c\u5173\u7cfb<\/h3>\n <\/div>\n <div class=\"chart-container\">\n <canvas id=\"usageEffectChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"app-model-section\">\n <div class=\"section-title\">\n <h2>APP\u754c\u9762\u5c55\u793a<\/h2>\n <p>\u76f4\u89c2\u3001\u6613\u7528\u7684\u5bb6\u5ead\u60c5\u611f\u5065\u5eb7\u7ba1\u7406\u5e73\u53f0<\/p>\n <\/div>\n \n <div class=\"app-showcase\">\n <div class=\"phone-mockup\">\n <div class=\"phone-screen\">\n <img decoding=\"async\" src=\"https:\/\/www.affectivechain.com\/wp-content\/uploads\/2025\/07\/12111-1-e1755690186278.png\" alt=\"APP\u754c\u9762\" class=\"app-screen\">\n <\/div>\n <\/div>\n \n <div class=\"app-feature-points\">\n <div class=\"feature-point\">\n <div class=\"point-icon\">\n <i class=\"fas fa-tachometer-alt\"><\/i>\n <\/div>\n <div>\n <h4>\u60c5\u611f\u5065\u5eb7\u4eea\u8868\u76d8<\/h4>\n <p>\u5b9e\u65f6\u663e\u793a\u5bb6\u5ead\u6210\u5458\u60c5\u611f\u72b6\u6001\u548c\u5065\u5eb7\u6307\u6570<\/p>\n <\/div>\n <\/div>\n <div class=\"feature-point\">\n <div class=\"point-icon\">\n <i class=\"fas fa-comments\"><\/i>\n <\/div>\n <div>\n <h4>\u667a\u80fd\u6c9f\u901a\u52a9\u624b<\/h4>\n <p>\u5728\u5bf9\u8bdd\u4e2d\u63d0\u4f9b\u5b9e\u65f6\u6307\u5bfc\u548c\u5efa\u8bae<\/p>\n <\/div>\n <\/div>\n <div class=\"feature-point\">\n <div class=\"point-icon\">\n <i class=\"fas fa-calendar-check\"><\/i>\n <\/div>\n <div>\n <h4>\u5bb6\u5ead\u6d3b\u52a8\u8ba1\u5212<\/h4>\n <p>\u4e2a\u6027\u5316\u63a8\u8350\u5bb6\u5ead\u4e92\u52a8\u6d3b\u52a8\u4e0e\u8ba1\u5212<\/p>\n <\/div>\n <\/div>\n <div class=\"feature-point\">\n <div class=\"point-icon\">\n <i class=\"fas fa-chart-line\"><\/i>\n <\/div>\n <div>\n <h4>\u6210\u957f\u8f68\u8ff9\u8ffd\u8e2a<\/h4>\n <p>\u8bb0\u5f55\u60c5\u611f\u6210\u957f\u5386\u7a0b\u548c\u6539\u5584\u8d8b\u52bf<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n\n <script>\n \/\/ \u6807\u7b7e\u5207\u6362\u529f\u80fd\n document.querySelectorAll('.tab-btn').forEach(button => {\n button.addEventListener('click', () => {\n \/\/ \u79fb\u9664\u6240\u6709\u6fc0\u6d3b\u72b6\u6001\n document.querySelectorAll('.tab-btn').forEach(btn => {\n btn.classList.remove('active');\n });\n document.querySelectorAll('.tab-content').forEach(content => {\n content.classList.remove('active');\n });\n \n \/\/ \u6dfb\u52a0\u5f53\u524d\u6fc0\u6d3b\u72b6\u6001\n button.classList.add('active');\n document.getElementById(button.dataset.tab).classList.add('active');\n });\n });\n \n \/\/ \u60c5\u611f\u8d26\u6237\u56fe\u8868\n const emotionCtx = document.getElementById('emotionChart').getContext('2d');\n const emotionChart = new Chart(emotionCtx, {\n type: 'line',\n data: {\n labels: ['1\u6708', '2\u6708', '3\u6708', '4\u6708', '5\u6708', '6\u6708'],\n datasets: [{\n label: '\u60c5\u611f\u5065\u5eb7\u6307\u6570',\n data: [65, 70, 72, 80, 85, 88],\n borderColor: '#6c5ce7',\n backgroundColor: 'rgba(108, 92, 231, 0.1)',\n tension: 0.3,\n fill: true\n }]\n },\n options: {\n responsive: true,\n plugins: {\n title: {\n display: true,\n text: '\u5bb6\u5ead\u60c5\u611f\u5065\u5eb7\u8d8b\u52bf'\n }\n }\n }\n });\n \n \/\/ \u591a\u6a21\u6001\u60c5\u611f\u8bc6\u522b\u56fe\u8868\n const modalityCtx = document.getElementById('modalityChart').getContext('2d');\n const modalityChart = new Chart(modalityCtx, {\n type: 'radar',\n data: {\n labels: ['\u8bed\u97f3\u5206\u6790', '\u6587\u672c\u5206\u6790', '\u9762\u90e8\u8bc6\u522b', '\u884c\u4e3a\u5206\u6790', '\u751f\u7406\u4fe1\u53f7'],\n datasets: [{\n label: '\u51c6\u786e\u7387(%)',\n data: [92, 88, 95, 85, 78],\n backgroundColor: 'rgba(0, 206, 201, 0.2)',\n borderColor: '#00cec9',\n pointBackgroundColor: '#00cec9'\n }]\n },\n options: {\n responsive: true,\n scales: {\n r: {\n angleLines: {\n display: true\n },\n suggestedMin: 50,\n suggestedMax: 100\n }\n }\n }\n });\n \n \/\/ \u5065\u5eb7\u8d8b\u52bf\u56fe\u8868\n const healthTrendCtx = document.getElementById('healthTrendChart').getContext('2d');\n const healthTrendChart = new Chart(healthTrendCtx, {\n type: 'line',\n data: {\n labels: ['1\u6708', '2\u6708', '3\u6708', '4\u6708', '5\u6708', '6\u6708', '7\u6708', '8\u6708'],\n datasets: [{\n label: '\u4f7f\u7528\u5fc3\u8c10\u524d',\n data: [58, 62, 59, 55, 60, 57, 61, 59],\n borderColor: '#fd79a8',\n backgroundColor: 'transparent',\n borderDash: [5, 5],\n tension: 0.2\n }, {\n label: '\u4f7f\u7528\u5fc3\u8c10\u540e',\n data: [59, 65, 70, 75, 78, 82, 85, 88],\n borderColor: '#00b894',\n backgroundColor: 'transparent',\n tension: 0.2\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n title: {\n display: true,\n text: '\u5bb6\u5ead\u60c5\u611f\u5065\u5eb7\u6307\u6570\u53d8\u5316'\n }\n },\n scales: {\n y: {\n min: 50,\n max: 100\n }\n }\n }\n });\n \n \/\/ \u95ee\u9898\u5206\u5e03\u56fe\u8868\n const problemDistributionCtx = document.getElementById('problemDistributionChart').getContext('2d');\n const problemDistributionChart = new Chart(problemDistributionCtx, {\n type: 'doughnut',\n data: {\n labels: ['\u6c9f\u901a\u95ee\u9898', '\u6559\u80b2\u5206\u6b67', '\u60c5\u611f\u758f\u79bb', '\u5de5\u4f5c\u538b\u529b', '\u5176\u4ed6'],\n datasets: [{\n data: [35, 25, 20, 15, 5],\n backgroundColor: [\n '#6c5ce7',\n '#a29bfe',\n '#00cec9',\n '#fd79a8',\n '#fdcb6e'\n ]\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n position: 'right'\n }\n }\n }\n });\n \n \/\/ \u521d\u59cb\u5316\u5176\u4ed6\u56fe\u8868\n const initCharts = () => {\n \/\/ \u5e72\u9884\u6548\u679c\u56fe\u8868\n const interventionEffectCtx = document.getElementById('interventionEffectChart').getContext('2d');\n new Chart(interventionEffectCtx, {\n type: 'bar',\n data: {\n labels: ['\u6c9f\u901a\u6539\u5584', '\u51b2\u7a81\u51cf\u5c11', '\u4eb2\u5bc6\u5ea6\u63d0\u5347', '\u538b\u529b\u964d\u4f4e', '\u6ee1\u610f\u5ea6\u63d0\u5347'],\n datasets: [{\n label: '\u6539\u5584\u7387(%)',\n data: [72, 68, 75, 65, 80],\n backgroundColor: '#6c5ce7'\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n indexAxis: 'y'\n }\n });\n \n \/\/ \u4f7f\u7528\u65f6\u95f4\u4e0e\u6548\u679c\u5173\u7cfb\u56fe\u8868\n const usageEffectCtx = document.getElementById('usageEffectChart').getContext('2d');\n new Chart(usageEffectCtx, {\n type: 'scatter',\n data: {\n datasets: [{\n label: '\u4f7f\u7528\u65f6\u95f4 vs \u6548\u679c',\n data: [\n {x: 5, y: 15}, {x: 10, y: 25}, {x: 15, y: 35},\n {x: 20, y: 45}, {x: 25, y: 55}, {x: 30, y: 65},\n {x: 35, y: 70}, {x: 40, y: 75}, {x: 45, y: 80},\n {x: 50, y: 82}, {x: 55, y: 84}, {x: 60, y: 86}\n ],\n backgroundColor: '#00cec9'\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n title: {\n display: true,\n text: '\u6bcf\u5468\u4f7f\u7528\u65f6\u95f4(\u5206\u949f)\u4e0e\u6539\u5584\u6548\u679c\u5173\u7cfb'\n }\n },\n scales: {\n x: {\n title: {\n display: true,\n text: '\u6bcf\u5468\u4f7f\u7528\u65f6\u95f4(\u5206\u949f)'\n }\n },\n y: {\n title: {\n display: true,\n text: '\u60c5\u611f\u5065\u5eb7\u6539\u5584\u6307\u6570'\n }\n }\n }\n }\n });\n \n \/\/ \u5176\u4ed6\u529f\u80fd\u6807\u7b7e\u7684\u56fe\u8868\n const interventionCtx = document.getElementById('interventionChart').getContext('2d');\n new Chart(interventionCtx, {\n type: 'bar',\n data: {\n labels: ['\u6c9f\u901a\u6307\u5bfc', '\u51b2\u7a81\u8c03\u89e3', '\u6d3b\u52a8\u63a8\u8350', '\u5371\u673a\u9884\u8b66', '\u8fdb\u5ea6\u8ddf\u8e2a'],\n datasets: [{\n label: '\u7528\u6237\u6ee1\u610f\u5ea6(%)',\n data: [88, 85, 90, 92, 87],\n backgroundColor: '#fd79a8'\n }]\n },\n options: {\n responsive: true\n }\n });\n \n const contentCtx = document.getElementById('contentChart').getContext('2d');\n new Chart(contentCtx, {\n type: 'pie',\n data: {\n labels: ['\u5a5a\u59fb\u5173\u7cfb', '\u4eb2\u5b50\u6559\u80b2', '\u4ee3\u9645\u6c9f\u901a', '\u5fc3\u7406\u81ea\u52a9', '\u5bb6\u5ead\u6d3b\u52a8'],\n datasets: [{\n data: [30, 25, 20, 15, 10],\n backgroundColor: [\n '#6c5ce7', '#a29bfe', '#00cec9', '#fd79a8', '#fdcb6e'\n ]\n }]\n },\n options: {\n responsive: true\n }\n });\n \n const eapCtx = document.getElementById('eapChart').getContext('2d');\n new Chart(eapCtx, {\n type: 'line',\n data: {\n labels: ['Q1', 'Q2', 'Q3', 'Q4'],\n datasets: [{\n label: '\u5458\u5de5\u6ee1\u610f\u5ea6',\n data: [65, 72, 78, 82],\n borderColor: '#00b894',\n tension: 0.3\n }, {\n label: '\u5de5\u4f5c\u6548\u7387',\n data: [68, 74, 77, 83],\n borderColor: '#fdcb6e',\n tension: 0.3\n }]\n },\n options: {\n responsive: true\n }\n });\n };\n \n \/\/ \u9875\u9762\u52a0\u8f7d\u540e\u521d\u59cb\u5316\u6240\u6709\u56fe\u8868\n window.addEventListener('load', initCharts);\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u5fc3\u8c10APP – \u5bb6\u5ead\u60c5\u611f\u5065\u5eb7\u7ba1\u7406\u7cfb\u7edf \u5fc3\u8c10APP\uff1a\u91cd\u65b0\u5b9a\u4e49\u5bb6\u5ead\u60c5\u611f\u5065\u5eb7\u7ba1\u7406 \u56fd\u5185\u9996\u6b3e\u57fa\u4e8e\u591a\u6a21\u6001\u60c5\u611f […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2100","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/2100","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/comments?post=2100"}],"version-history":[{"count":7,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/2100\/revisions"}],"predecessor-version":[{"id":2110,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/2100\/revisions\/2110"}],"wp:attachment":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/media?parent=2100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}