{"id":2090,"date":"2025-08-20T18:57:18","date_gmt":"2025-08-20T10:57:18","guid":{"rendered":"https:\/\/www.affectivechain.com\/?page_id=2090"},"modified":"2025-08-20T19:30:10","modified_gmt":"2025-08-20T11:30:10","slug":"solutions","status":"publish","type":"page","link":"https:\/\/www.affectivechain.com\/index.php\/solutions\/","title":{"rendered":"\u5c0f\u7a0b\u5e8fSolutions."},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>\u5fc3\u94fe\u79d1\u6280 &#8211; \u60c5\u611f\u667a\u80fd\u89e3\u51b3\u65b9\u6848\u9886\u5bfc\u8005<\/title>\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\">\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@300;400;500;700&#038;display=swap\" rel=\"stylesheet\">\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n    <style>\n        :root {\n            --primary: #4e54c8;\n            --primary-light: #8f94fb;\n            --primary-dark: #3a3f99;\n            --secondary: #ff6b6b;\n            --secondary-light: #ff9e9e;\n            --accent: #36d1dc;\n            --accent-light: #5ce1ec;\n            --light: #f8f9fa;\n            --dark: #343a40;\n            --dark-light: #495057;\n            --gray: #6c757d;\n            --light-gray: #e9ecef;\n            --success: #28a745;\n            --warning: #ffc107;\n            --transition: all 0.3s ease;\n            --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\n            --shadow-hover: 0 10px 30px rgba(78, 84, 200, 0.15);\n        }\n\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        body {\n            font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n            background-color: var(--light);\n            color: var(--dark);\n            line-height: 1.6;\n            overflow-x: hidden;\n        }\n\n        h1, h2, h3, h4, h5, h6 {\n            font-weight: 700;\n            margin-bottom: 1rem;\n            line-height: 1.3;\n        }\n\n        h1 {\n            font-size: 3rem;\n            margin-bottom: 1.5rem;\n            background: linear-gradient(90deg, var(--primary), var(--primary-light));\n            -webkit-background-clip: text;\n            background-clip: text;\n            color: transparent;\n        }\n\n        h2 {\n            font-size: 2.2rem;\n            margin-top: 2.5rem;\n            margin-bottom: 1.5rem;\n            color: var(--primary);\n            position: relative;\n            padding-bottom: 0.5rem;\n        }\n\n        h2:after {\n            content: '';\n            position: absolute;\n            bottom: 0;\n            left: 0;\n            width: 80px;\n            height: 4px;\n            background: linear-gradient(90deg, var(--primary), var(--primary-light));\n            border-radius: 2px;\n        }\n\n        h3 {\n            font-size: 1.6rem;\n            margin-top: 2rem;\n            color: var(--primary);\n        }\n\n        p {\n            margin-bottom: 1.5rem;\n            color: var(--dark-light);\n            font-size: 1.1rem;\n        }\n\n        .container {\n            max-width: 1200px;\n            margin: 0 auto;\n            padding: 0 1.5rem;\n        }\n\n        \/* \u82f1\u96c4\u533a\u57df\u6837\u5f0f *\/\n        .hero {\n            padding: 10rem 0 5rem;\n            background: linear-gradient(135deg, rgba(78, 84, 200, 0.05) 0%, rgba(143, 148, 251, 0.1) 100%);\n            position: relative;\n            overflow: hidden;\n        }\n\n        .hero-content {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n        }\n\n        .hero-text {\n            flex: 1;\n            padding-right: 2rem;\n        }\n\n        .hero-image {\n            flex: 1;\n            text-align: center;\n        }\n\n        .hero-image img {\n            max-width: 100%;\n            border-radius: 10px;\n            box-shadow: var(--shadow);\n        }\n\n        .hero-tagline {\n            font-size: 1.5rem;\n            color: var(--dark-light);\n            margin-bottom: 2rem;\n        }\n\n        .hero-buttons {\n            display: flex;\n            gap: 1rem;\n            margin-top: 2rem;\n        }\n\n        .hero-button {\n            padding: 1rem 2rem;\n            border-radius: 50px;\n            text-decoration: none;\n            font-weight: 500;\n            transition: var(--transition);\n        }\n\n        .hero-button.primary {\n            background: linear-gradient(90deg, var(--primary), var(--primary-light));\n            color: white;\n            box-shadow: var(--shadow);\n        }\n\n        .hero-button.secondary {\n            background: transparent;\n            color: var(--primary);\n            border: 2px solid var(--primary);\n        }\n\n        .hero-button:hover {\n            transform: translateY(-3px);\n            box-shadow: var(--shadow-hover);\n        }\n\n        \/* \u5361\u7247\u6837\u5f0f *\/\n        .card {\n            background-color: white;\n            border-radius: 12px;\n            padding: 2.5rem;\n            margin-bottom: 2rem;\n            box-shadow: var(--shadow);\n            transition: var(--transition);\n            border-top: 5px solid var(--primary);\n            height: 100%;\n        }\n\n        .card:hover {\n            transform: translateY(-5px);\n            box-shadow: var(--shadow-hover);\n        }\n\n        .card-icon {\n            font-size: 2.5rem;\n            color: var(--primary);\n            margin-bottom: 1.5rem;\n        }\n\n        \/* \u7f51\u683c\u5e03\u5c40 *\/\n        .grid {\n            display: grid;\n            gap: 2rem;\n        }\n\n        .grid-2 {\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n        }\n\n        .grid-3 {\n            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n        }\n\n        .grid-4 {\n            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n        }\n\n        \/* \u529f\u80fd\u5217\u8868\u6837\u5f0f *\/\n        .feature-list {\n            list-style: none;\n            padding-left: 0;\n        }\n\n        .feature-list li {\n            position: relative;\n            padding-left: 2.5rem;\n            margin-bottom: 1rem;\n            font-size: 1.1rem;\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            top: 0;\n            font-size: 1.5rem;\n        }\n\n        \/* \u6807\u7b7e\u6837\u5f0f *\/\n        .tag {\n            display: inline-block;\n            background-color: rgba(255, 107, 107, 0.1);\n            color: var(--secondary);\n            padding: 0.5rem 1rem;\n            border-radius: 50px;\n            font-size: 0.9rem;\n            margin-right: 0.5rem;\n            margin-bottom: 0.5rem;\n        }\n\n        \/* \u6570\u636e\u7edf\u8ba1\u6837\u5f0f *\/\n        .stats-container {\n            display: flex;\n            justify-content: space-around;\n            flex-wrap: wrap;\n            margin: 3rem 0;\n        }\n\n        .stat-item {\n            text-align: center;\n            padding: 1.5rem;\n            flex: 1;\n            min-width: 200px;\n        }\n\n        .stat-number {\n            font-size: 3rem;\n            font-weight: 700;\n            color: var(--primary);\n            margin-bottom: 0.5rem;\n        }\n\n        .stat-label {\n            color: var(--gray);\n            font-size: 1.1rem;\n        }\n\n        \/* \u622a\u56fe\u6837\u5f0f *\/\n        .screenshot {\n            border-radius: 12px;\n            overflow: hidden;\n            box-shadow: var(--shadow);\n            margin: 2rem 0;\n            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);\n            height: 400px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--gray);\n            font-weight: 500;\n            position: relative;\n        }\n\n        .screenshot-content {\n            text-align: center;\n            padding: 2rem;\n        }\n\n        .screenshot-title {\n            font-size: 1.5rem;\n            margin-bottom: 1rem;\n            color: var(--primary);\n        }\n\n        \/* \u6280\u672f\u7279\u6027\u6837\u5f0f *\/\n        .tech-feature {\n            display: flex;\n            align-items: flex-start;\n            margin-bottom: 2rem;\n        }\n\n        .tech-icon {\n            background-color: rgba(78, 84, 200, 0.1);\n            width: 60px;\n            height: 60px;\n            border-radius: 50%;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            margin-right: 1.5rem;\n            color: var(--primary);\n            font-size: 1.5rem;\n            flex-shrink: 0;\n        }\n\n        .tech-content h4 {\n            margin-top: 0;\n            margin-bottom: 0.5rem;\n            font-size: 1.3rem;\n        }\n\n        \/* \u56fe\u8868\u5bb9\u5668 *\/\n        .chart-container {\n            position: relative;\n            height: 400px;\n            margin: 2rem 0;\n            background-color: white;\n            border-radius: 8px;\n            padding: 1.5rem;\n            box-shadow: var(--shadow);\n        }\n\n        \/* \u5ba2\u6237\u8bc4\u4ef7\u6837\u5f0f *\/\n        .testimonial {\n            background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);\n            color: white;\n            padding: 3rem;\n            border-radius: 12px;\n            margin: 2rem 0;\n            position: relative;\n        }\n\n        .testimonial-text {\n            font-style: italic;\n            margin-bottom: 1.5rem;\n            font-size: 1.2rem;\n            line-height: 1.8;\n        }\n\n        .testimonial-author {\n            font-weight: 700;\n            display: flex;\n            align-items: center;\n        }\n\n        .testimonial-author img {\n            width: 50px;\n            height: 50px;\n            border-radius: 50%;\n            margin-right: 1rem;\n            border: 3px solid white;\n        }\n\n        .testimonial-quote {\n            position: absolute;\n            top: 20px;\n            right: 30px;\n            font-size: 5rem;\n            color: rgba(255, 255, 255, 0.2);\n        }\n\n        \/* \u5408\u4f5c\u4f19\u4f34\u6837\u5f0f *\/\n        .partners {\n            background-color: var(--light);\n            padding: 4rem 0;\n        }\n\n        .partners-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n            gap: 2rem;\n            align-items: center;\n        }\n\n        .partner-logo {\n            filter: grayscale(100%);\n            opacity: 0.6;\n            transition: var(--transition);\n            max-width: 100%;\n            padding: 1rem;\n        }\n\n        .partner-logo:hover {\n            filter: grayscale(0%);\n            opacity: 1;\n        }\n\n        \/* \u54cd\u5e94\u5f0f\u8bbe\u8ba1 *\/\n        @media (max-width: 992px) {\n            h1 {\n                font-size: 2.5rem;\n            }\n            \n            h2 {\n                font-size: 2rem;\n            }\n            \n            .hero-content {\n                flex-direction: column;\n                text-align: center;\n            }\n            \n            .hero-text {\n                padding-right: 0;\n                margin-bottom: 2rem;\n            }\n            \n            .hero-buttons {\n                justify-content: center;\n            }\n            \n            .navbar-menu {\n                display: none;\n            }\n        }\n\n        @media (max-width: 768px) {\n            h1 {\n                font-size: 2rem;\n            }\n            \n            h2 {\n                font-size: 1.8rem;\n            }\n            \n            .grid-3, .grid-4 {\n                grid-template-columns: 1fr;\n            }\n            \n            .screenshot {\n                height: 300px;\n            }\n            \n            .stats-container {\n                flex-direction: column;\n            }\n            \n            .stat-item {\n                margin-bottom: 1.5rem;\n            }\n            \n            .cta-buttons {\n                flex-direction: column;\n                align-items: center;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n\n    <!-- \u82f1\u96c4\u533a\u57df -->\n    <section class=\"hero\" id=\"home\">\n        <div class=\"container hero-content\">\n            <div class=\"hero-text\">\n                <h1>\u60c5\u611f\u667a\u80fd\u6280\u672f<br>\u91cd\u5851\u5bb6\u5ead\u6c9f\u901a\u65b9\u5f0f<\/h1>\n                <p class=\"hero-tagline\">\u57fa\u4e8e\u5fc3\u94fe\u79d1\u6280\u7684\u591a\u6a21\u6001\u60c5\u611f\u8bc6\u522b\u4e0e\u5fc3\u7406\u94fe\u63a5\u6a21\u578b\uff0c\u5fc3\u8c10APP\u5e2e\u52a9\u5bb6\u5ead\u5efa\u7acb\u66f4\u5065\u5eb7\u7684\u60c5\u611f\u8fde\u63a5<\/p>\n                \n                <div class=\"hero-buttons\">\n                    <a href=\"#demo\" class=\"hero-button primary\">\u514d\u8d39\u4f53\u9a8c<\/a>\n                    <a href=\"#technology\" class=\"hero-button secondary\">\u4e86\u89e3\u66f4\u591a<\/a>\n                <\/div>\n                \n                <div class=\"stats-container\">\n                    <div class=\"stat-item\">\n                        <div class=\"stat-number\">89%<\/div>\n                        <div class=\"stat-label\">\u5bb6\u5ead\u5173\u7cfb\u6539\u5584\u7387<\/div>\n                    <\/div>\n                    <div class=\"stat-item\">\n                        <div class=\"stat-number\">76%<\/div>\n                        <div class=\"stat-label\">\u51b2\u7a81\u51cf\u5c11\u7387<\/div>\n                    <\/div>\n                    <div class=\"stat-item\">\n                        <div class=\"stat-number\">94%<\/div>\n                        <div class=\"stat-label\">\u7528\u6237\u6ee1\u610f\u5ea6<\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <div class=\"hero-image\">\n                <div style=\"width: 100%; height: 400px; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--gray); box-shadow: var(--shadow);\">\n                    <div style=\"text-align: center;\">\n                        <i class=\"fas fa-mobile-alt\" style=\"font-size: 3rem; margin-bottom: 1rem; color: var(--primary);\"><\/i>\n                        <p>\u5fc3\u8c10APP\u754c\u9762\u5c55\u793a<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- \u4ea7\u54c1\u7279\u6027 -->\n    <section id=\"products\" class=\"section\">\n        <div class=\"container\">\n            <h2>\u5fc3\u8c10APP\u6838\u5fc3\u529f\u80fd<\/h2>\n            <p>\u57fa\u4e8e\u5fc3\u94fe\u79d1\u6280\u7684\u60c5\u611f\u667a\u80fd\u6280\u672f\uff0c\u5fc3\u8c10APP\u63d0\u4f9b\u5168\u65b9\u4f4d\u7684\u5bb6\u5ead\u5173\u7cfb\u4f18\u5316\u89e3\u51b3\u65b9\u6848<\/p>\n            \n            <div class=\"grid grid-3\">\n                <div class=\"card\">\n                    <div class=\"card-icon\"><i class=\"fas fa-chart-line\"><\/i><\/div>\n                    <h3>\u5bb6\u5ead\u60c5\u611f\u4eea\u8868\u76d8<\/h3>\n                    <p>\u53ef\u89c6\u5316\u5c55\u793a\u5bb6\u5ead\u6210\u5458\u7684\u60c5\u611f\u72b6\u6001\u548c\u5173\u7cfb\u5065\u5eb7\u5ea6\uff0c\u8f7b\u677e\u638c\u63e1\u5bb6\u5ead\u60c5\u611f\u52a8\u6001\u3002<\/p>\n                    <ul class=\"feature-list\">\n                        <li>\u5b9e\u65f6\u60c5\u7eea\u8ffd\u8e2a\u4e0e\u5206\u6790<\/li>\n                        <li>\u5bb6\u5ead\u5173\u7cfb\u5065\u5eb7\u8bc4\u5206<\/li>\n                        <li>\u60c5\u611f\u53d8\u5316\u8d8b\u52bf\u9884\u6d4b<\/li>\n                        <li>\u4e2a\u6027\u5316\u6539\u5584\u5efa\u8bae<\/li>\n                    <\/ul>\n                <\/div>\n                \n                <div class=\"card\">\n                    <div class=\"card-icon\"><i class=\"fas fa-comments\"><\/i><\/div>\n                    <h3>\u667a\u80fd\u6c9f\u901a\u52a9\u624b<\/h3>\n                    <p>\u57fa\u4e8e\u60c5\u611f\u8bc6\u522b\u6280\u672f\uff0c\u63d0\u4f9b\u5b9e\u65f6\u6c9f\u901a\u5efa\u8bae\uff0c\u5e2e\u52a9\u5bb6\u5ead\u6210\u5458\u66f4\u6709\u6548\u5730\u8868\u8fbe\u548c\u7406\u89e3\u5f7c\u6b64\u3002<\/p>\n                    <ul class=\"feature-list\">\n                        <li>\u5b9e\u65f6\u60c5\u611f\u63d0\u793a<\/li>\n                        <li>\u51b2\u7a81\u9884\u8b66\u4e0e\u5316\u89e3\u5efa\u8bae<\/li>\n                        <li>\u4e2a\u6027\u5316\u6c9f\u901a\u8bdd\u672f\u63a8\u8350<\/li>\n                        <li>\u60c5\u611f\u8868\u8fbe\u6307\u5bfc<\/li>\n                    <\/ul>\n                <\/div>\n                \n                <div class=\"card\">\n                    <div class=\"card-icon\"><i class=\"fas fa-heart\"><\/i><\/div>\n                    <h3>\u5bb6\u5ead\u6d3b\u52a8\u63a8\u8350<\/h3>\n                    <p>\u6839\u636e\u5bb6\u5ead\u6210\u5458\u7684\u60c5\u611f\u72b6\u6001\u548c\u5173\u7cfb\u52a8\u6001\uff0c\u667a\u80fd\u63a8\u8350\u589e\u5f3a\u5bb6\u5ead\u7ebd\u5e26\u7684\u6d3b\u52a8\u548c\u4e92\u52a8\u65b9\u5f0f\u3002<\/p>\n                    <ul class=\"feature-list\">\n                        <li>\u4e2a\u6027\u5316\u6d3b\u52a8\u5efa\u8bae<\/li>\n                        <li>\u60c5\u611f\u4fee\u590d\u6d3b\u52a8<\/li>\n                        <li>\u60c5\u611f\u5e86\u795d\u63d0\u9192<\/li>\n                        <li>\u65e5\u5e38\u8fde\u63a5\u63d0\u793a<\/li>\n                    <\/ul>\n                <\/div>\n            <\/div>\n            \n            <div class=\"screenshot\">\n                <div class=\"screenshot-content\">\n                    <div class=\"screenshot-title\">\u5bb6\u5ead\u60c5\u611f\u4eea\u8868\u76d8\u754c\u9762<\/div>\n                    <p>\u76f4\u89c2\u5c55\u793a\u6bcf\u4f4d\u5bb6\u5ead\u6210\u5458\u7684\u60c5\u611f\u72b6\u6001\u548c\u5bb6\u5ead\u5173\u7cfb\u5065\u5eb7\u5ea6<\/p>\n                    <div class=\"chart-container\" style=\"height: 250px; background: transparent; box-shadow: none;\">\n                        <canvas id=\"familyDashboardChart\"><\/canvas>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- \u6280\u672f\u4f18\u52bf -->\n    <section id=\"technology\" class=\"section\" style=\"background: linear-gradient(135deg, rgba(78, 84, 200, 0.05) 0%, rgba(143, 148, 251, 0.1) 100%); padding: 5rem 0;\">\n        <div class=\"container\">\n            <h2>\u5fc3\u94fe\u79d1\u6280\u6838\u5fc3\u6280\u672f<\/h2>\n            <p>\u57fa\u4e8e\u5fc3\u7406\u5b66\u7406\u8bba\u4e0e\u4eba\u5de5\u667a\u80fd\u7684\u6df1\u5ea6\u878d\u5408\uff0c\u6253\u9020\u884c\u4e1a\u9886\u5148\u7684\u60c5\u611f\u667a\u80fd\u5206\u6790\u5e73\u53f0<\/p>\n            \n            <div class=\"grid grid-2\">\n                <div>\n                    <div class=\"tech-feature\">\n                        <div class=\"tech-icon\"><i class=\"fas fa-brain\"><\/i><\/div>\n                        <div class=\"tech-content\">\n                            <h4>\u591a\u6a21\u6001\u60c5\u611f\u8bc6\u522b<\/h4>\n                            <p>\u901a\u8fc7\u6587\u672c\u3001\u8bed\u97f3\u548c\u89c6\u89c9\u6570\u636e\u5206\u6790\uff0c\u7cbe\u51c6\u8bc6\u522b\u5bb6\u5ead\u6210\u5458\u7684\u60c5\u611f\u72b6\u6001\uff0c\u51c6\u786e\u7387\u9ad8\u8fbe92%<\/p>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"tech-feature\">\n                        <div class=\"tech-icon\"><i class=\"fas fa-project-diagram\"><\/i><\/div>\n                        <div class=\"tech-content\">\n                            <h4>\u5fc3\u7406\u94fe\u63a5\u6a21\u578b<\/h4>\n                            <p>\u57fa\u4e8e\u5fc3\u94fe\u79d1\u6280\u72ec\u5bb6\u7b97\u6cd5\uff0c\u5efa\u7acb\u5bb6\u5ead\u6210\u5458\u5fc3\u7406\u72b6\u6001\u4e0e\u884c\u4e3a\u6a21\u5f0f\u4e4b\u95f4\u7684\u6df1\u5ea6\u5173\u8054<\/p>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"tech-feature\">\n                        <div class=\"tech-icon\"><i class=\"fas fa-lightbulb\"><\/i><\/div>\n                        <div class=\"tech-content\">\n                            <h4>\u667a\u80fd\u5e72\u9884\u7cfb\u7edf<\/h4>\n                            <p>\u57fa\u4e8e\u60c5\u611f\u6570\u636e\u5206\u6790\uff0c\u63d0\u4f9b\u4e2a\u6027\u5316\u5bb6\u5ead\u5173\u7cfb\u6539\u5584\u5efa\u8bae\u548c\u5e72\u9884\u65b9\u6848<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <div class=\"screenshot\">\n                    <div class=\"screenshot-content\">\n                        <div class=\"screenshot-title\">\u60c5\u611f\u8bc6\u522b\u6280\u672f\u5c55\u793a<\/div>\n                        <p>\u5b9e\u65f6\u5206\u6790\u5bb6\u5ead\u6210\u5458\u7684\u60c5\u611f\u72b6\u6001\u548c\u4e92\u52a8\u6a21\u5f0f<\/p>\n                        <div class=\"chart-container\" style=\"height: 250px; background: transparent; box-shadow: none;\">\n                            <canvas id=\"emotionTechChart\"><\/canvas>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- \u6548\u679c\u5c55\u793a -->\n    <section id=\"results\" class=\"section\">\n        <div class=\"container\">\n            <h2>\u5b9e\u9645\u6548\u679c\u5c55\u793a<\/h2>\n            <p>\u4f7f\u7528\u5fc3\u8c10APP3\u4e2a\u6708\u540e\uff0c\u5bb6\u5ead\u5173\u7cfb\u5404\u9879\u6307\u6807\u663e\u8457\u63d0\u5347<\/p>\n            \n            <div class=\"chart-container\">\n                <canvas id=\"resultsChart\"><\/canvas>\n            <\/div>\n            \n            <div class=\"testimonial\">\n                <div class=\"testimonial-quote\"><i class=\"fas fa-quote-right\"><\/i><\/div>\n                <p class=\"testimonial-text\">&#8220;\u5fc3\u8c10APP\u5f7b\u5e95\u6539\u53d8\u4e86\u6211\u4eec\u5bb6\u5ead\u7684\u6c9f\u901a\u65b9\u5f0f\u3002\u4ee5\u524d\u6211\u4eec\u7ecf\u5e38\u56e0\u4e3a\u5c0f\u4e8b\u4e89\u5435\uff0c\u73b0\u5728\u80fd\u66f4\u597d\u5730\u7406\u89e3\u5f7c\u6b64\u7684\u60c5\u611f\u9700\u6c42\uff0c\u5bb6\u5ead\u6c1b\u56f4\u53d8\u5f97\u6e29\u99a8\u548c\u8c10\u3002AI\u63a8\u8350\u7684\u5bb6\u5ead\u6d3b\u52a8\u4e5f\u8ba9\u6211\u4eec\u7684\u5468\u672b\u53d8\u5f97\u66f4\u52a0\u6709\u610f\u4e49\u3002&#8221;<\/p>\n                <div class=\"testimonial-author\">\n                    <div style=\"width: 50px; height: 50px; background: #ddd; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 1rem;\">\n                        <i class=\"fas fa-user\" style=\"color: #888;\"><\/i>\n                    <\/div>\n                    <div>\n                        <div>\u674e\u5973\u58eb<\/div>\n                        <div style=\"font-weight: normal; font-size: 0.9rem;\">\u4e0a\u6d77\uff0c\u4f7f\u75284\u4e2a\u6708<\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- \u5408\u4f5c\u4f19\u4f34 -->\n    <section class=\"partners\">\n        <div class=\"container\">\n            <h2>\u5408\u4f5c\u4f19\u4f34<\/h2>\n            <p>\u4e0e\u884c\u4e1a\u9886\u5148\u4f01\u4e1a\u5171\u540c\u63a8\u52a8\u60c5\u611f\u667a\u80fd\u6280\u672f\u53d1\u5c55<\/p>\n            \n            <div class=\"partners-grid\">\n                <div style=\"height: 80px; background: #f5f5f5; border-radius: 8px; display: flex; align-items: center; justify-content: center;\">\u5fc3\u94fe\u6570\u79d1<\/div>\n                <div style=\"height: 80px; background: #f5f5f5; border-radius: 8px; display: flex; align-items: center; justify-content: center;\">XinSync.com<\/div>\n                <div style=\"height: 80px; background: #f5f5f5; border-radius: 8px; display: flex; align-items: center; justify-content: center;\">HeartSync<\/div>\n                <div style=\"height: 80px; background: #f5f5f5; border-radius: 8px; display: flex; align-items: center; justify-content: center;\">\u5fc3\u94fe\u60c5\u667a<\/div>\n                <div style=\"height: 80px; background: #f5f5f5; border-radius: 8px; display: flex; align-items: center; justify-content: center;\">\u5fc3\u8c10APP<\/div>\n                <div style=\"height: 80px; background: #f5f5f5; border-radius: 8px; display: flex; align-items: center; justify-content: center;\">\u5fc3\u667a\u533b\u7597<\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <script>\n        \/\/ \u5bb6\u5ead\u4eea\u8868\u76d8\u56fe\u8868\n        const dashboardCtx = document.getElementById('familyDashboardChart').getContext('2d');\n        new Chart(dashboardCtx, {\n            type: 'radar',\n            data: {\n                labels: ['\u6c9f\u901a\u9891\u7387', '\u60c5\u611f\u8868\u8fbe', '\u51b2\u7a81\u9891\u7387', '\u652f\u6301\u7a0b\u5ea6', '\u4eb2\u5bc6\u5ea6', '\u5171\u540c\u6d3b\u52a8'],\n                datasets: [\n                    {\n                        label: '\u7236\u4eb2',\n                        data: [75, 60, 40, 80, 70, 65],\n                        backgroundColor: 'rgba(78, 84, 200, 0.2)',\n                        borderColor: 'rgba(78, 84, 200, 1)',\n                        pointBackgroundColor: 'rgba(78, 84, 200, 1)',\n                        pointBorderColor: '#fff',\n                        pointHoverBackgroundColor: '#fff',\n                        pointHoverBorderColor: 'rgba(78, 84, 200, 1)'\n                    },\n                    {\n                        label: '\u6bcd\u4eb2',\n                        data: [85, 90, 30, 90, 85, 80],\n                        backgroundColor: 'rgba(255, 107, 107, 0.2)',\n                        borderColor: 'rgba(255, 107, 107, 1)',\n                        pointBackgroundColor: 'rgba(255, 107, 107, 1)',\n                        pointBorderColor: '#fff',\n                        pointHoverBackgroundColor: '#fff',\n                        pointHoverBorderColor: 'rgba(255, 107, 107, 1)'\n                    },\n                    {\n                        label: '\u5b69\u5b50',\n                        data: [65, 70, 50, 75, 80, 85],\n                        backgroundColor: 'rgba(54, 209, 220, 0.2)',\n                        borderColor: 'rgba(54, 209, 220, 1)',\n                        pointBackgroundColor: 'rgba(54, 209, 220, 1)',\n                        pointBorderColor: '#fff',\n                        pointHoverBackgroundColor: '#fff',\n                        pointHoverBorderColor: 'rgba(54, 209, 220, 1)'\n                    }\n                ]\n            },\n            options: {\n                responsive: true,\n                maintainAspectRatio: false,\n                plugins: {\n                    legend: {\n                        position: 'top',\n                    },\n                },\n                scales: {\n                    r: {\n                        angleLines: {\n                            display: true\n                        },\n                        suggestedMin: 0,\n                        suggestedMax: 100\n                    }\n                }\n            }\n        });\n\n        \/\/ \u60c5\u611f\u6280\u672f\u56fe\u8868\n        const emotionTechCtx = document.getElementById('emotionTechChart').getContext('2d');\n        new Chart(emotionTechCtx, {\n            type: 'doughnut',\n            data: {\n                labels: ['\u79ef\u6781\u60c5\u611f', '\u4e2d\u6027\u60c5\u611f', '\u6d88\u6781\u60c5\u611f'],\n                datasets: [{\n                    data: [65, 20, 15],\n                    backgroundColor: [\n                        'rgba(54, 209, 220, 0.8)',\n                        'rgba(78, 84, 200, 0.8)',\n                        'rgba(255, 107, 107, 0.8)'\n                    ],\n                    borderColor: [\n                        'rgba(54, 209, 220, 1)',\n                        'rgba(78, 84, 200, 1)',\n                        'rgba(255, 107, 107, 1)'\n                    ],\n                    borderWidth: 1\n                }]\n            },\n            options: {\n                responsive: true,\n                maintainAspectRatio: false,\n                plugins: {\n                    legend: {\n                        position: 'top',\n                    },\n                    tooltip: {\n                        callbacks: {\n                            label: function(context) {\n                                return context.label + ': ' + context.raw + '%';\n                            }\n                        }\n                    }\n                }\n            }\n        });\n\n        \/\/ \u6548\u679c\u56fe\u8868\n        const resultsCtx = document.getElementById('resultsChart').getContext('2d');\n        new Chart(resultsCtx, {\n            type: 'bar',\n            data: {\n                labels: ['\u6c9f\u901a\u8d28\u91cf', '\u51b2\u7a81\u51cf\u5c11', '\u60c5\u611f\u8868\u8fbe', '\u4eb2\u5bc6\u5ea6', '\u5171\u540c\u6d3b\u52a8'],\n                datasets: [\n                    {\n                        label: '\u4f7f\u7528\u524d',\n                        data: [50, 40, 45, 55, 50],\n                        backgroundColor: 'rgba(255, 107, 107, 0.7)',\n                        borderColor: 'rgba(255, 107, 107, 1)',\n                        borderWidth: 1\n                    },\n                    {\n                        label: '\u4f7f\u7528\u540e(3\u4e2a\u6708)',\n                        data: [75, 70, 80, 80, 75],\n                        backgroundColor: 'rgba(78, 84, 200, 0.7)',\n                        borderColor: 'rgba(78, 84, 200, 1)',\n                        borderWidth: 1\n                    }\n                ]\n            },\n            options: {\n                responsive: true,\n                maintainAspectRatio: false,\n                plugins: {\n                    legend: {\n                        position: 'top',\n                    },\n                },\n                scales: {\n                    y: {\n                        beginAtZero: true,\n                        max: 100,\n                        title: {\n                            display: true,\n                            text: '\u5206\u6570'\n                        }\n                    }\n                }\n            }\n        });\n\n        \/\/ \u5bfc\u822a\u680f\u6eda\u52a8\u6548\u679c\n        window.addEventListener('scroll', function() {\n            const navbar = document.querySelector('.navbar');\n            if (window.scrollY > 50) {\n                navbar.style.padding = '0.5rem 0';\n                navbar.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)';\n            } else {\n                navbar.style.padding = '1rem 0';\n                navbar.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)';\n            }\n        });\n\n        \/\/ \u5e73\u6ed1\u6eda\u52a8\n        document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n            anchor.addEventListener('click', function (e) {\n                e.preventDefault();\n                \n                const targetId = this.getAttribute('href');\n                if (targetId === '#') return;\n                \n                const targetElement = document.querySelector(targetId);\n                if (targetElement) {\n                    window.scrollTo({\n                        top: targetElement.offsetTop - 80,\n                        behavior: 'smooth'\n                    });\n                }\n            });\n        });\n    <\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>\u5fc3\u94fe\u5bb6 &#8211; \u5bb6\u5ead\u5173\u7cfb\u5c0f\u7a0b\u5e8f\u89e3\u51b3\u65b9\u6848<\/title>\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\">\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n    <style>\n        :root {\n            --primary: #4e54c8;\n            --primary-light: #8f94fb;\n            --secondary: #ff6b6b;\n            --secondary-light: #ff9e9e;\n            --accent: #36d1dc;\n            --light: #f8f9fa;\n            --dark: #343a40;\n            --gray: #6c757d;\n            --light-gray: #e9ecef;\n            --success: #28a745;\n            --warning: #ffc107;\n            --transition: all 0.3s ease;\n        }\n\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        body {\n            font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n            background-color: var(--light);\n            color: var(--dark);\n            line-height: 1.6;\n            overflow-x: hidden;\n        }\n\n        h1, h2, h3, h4, h5, h6 {\n            font-weight: 700;\n            margin-bottom: 1rem;\n            line-height: 1.3;\n        }\n\n        h1 {\n            font-size: 2.5rem;\n            margin-bottom: 1.5rem;\n            background: linear-gradient(90deg, var(--primary), var(--primary-light));\n            -webkit-background-clip: text;\n            background-clip: text;\n            color: transparent;\n        }\n\n        h2 {\n            font-size: 1.8rem;\n            margin-top: 2.5rem;\n            margin-bottom: 1.5rem;\n            color: var(--primary);\n            border-bottom: 2px solid var(--primary-light);\n            padding-bottom: 0.5rem;\n        }\n\n        h3 {\n            font-size: 1.4rem;\n            margin-top: 2rem;\n            color: var(--primary);\n        }\n\n        p {\n            margin-bottom: 1.5rem;\n            color: var(--gray);\n        }\n\n        .container {\n            max-width: 1200px;\n            margin: 0 auto;\n            padding: 0 1.5rem;\n        }\n\n        .tagline {\n            font-size: 1.2rem;\n            font-weight: 300;\n            margin-bottom: 1rem;\n        }\n\n        .card {\n            background-color: white;\n            border-radius: 12px;\n            padding: 2rem;\n            margin-bottom: 2rem;\n            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\n            transition: var(--transition);\n            border-top: 5px solid var(--primary);\n        }\n\n        .card:hover {\n            transform: translateY(-5px);\n            box-shadow: 0 10px 30px rgba(78, 84, 200, 0.15);\n        }\n\n        .grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n            gap: 2rem;\n        }\n\n        .highlight {\n            background-color: rgba(78, 84, 200, 0.1);\n            padding: 0.2rem 0.4rem;\n            border-radius: 4px;\n            color: var(--primary);\n            font-weight: 500;\n        }\n\n        ul, ol {\n            margin-bottom: 1.5rem;\n            padding-left: 1.5rem;\n            color: var(--gray);\n        }\n\n        li {\n            margin-bottom: 0.5rem;\n        }\n\n        table {\n            width: 100%;\n            border-collapse: collapse;\n            margin-bottom: 2rem;\n            overflow-x: auto;\n            display: block;\n        }\n\n        th, td {\n            padding: 0.75rem 1rem;\n            text-align: left;\n            border-bottom: 1px solid var(--light-gray);\n        }\n\n        th {\n            background-color: rgba(78, 84, 200, 0.1);\n            color: var(--primary);\n            font-weight: 600;\n        }\n\n        tr:hover {\n            background-color: rgba(78, 84, 200, 0.05);\n        }\n\n        .chart-container {\n            position: relative;\n            height: 400px;\n            margin: 2rem 0;\n            background-color: white;\n            border-radius: 8px;\n            padding: 1rem;\n            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\n        }\n\n        .back-to-top {\n            position: fixed;\n            bottom: 2rem;\n            right: 2rem;\n            background-color: var(--primary);\n            color: white;\n            width: 50px;\n            height: 50px;\n            border-radius: 50%;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            text-decoration: none;\n            box-shadow: 0 4px 10px rgba(78, 84, 200, 0.3);\n            opacity: 0;\n            visibility: hidden;\n            transition: var(--transition);\n            z-index: 999;\n        }\n\n        .back-to-top.visible {\n            opacity: 1;\n            visibility: visible;\n        }\n\n        .back-to-top:hover {\n            background-color: var(--secondary);\n            transform: translateY(-3px);\n        }\n\n        .feature-list {\n            list-style: none;\n            padding-left: 0;\n        }\n\n        .feature-list li {\n            position: relative;\n            padding-left: 2rem;\n            margin-bottom: 0.75rem;\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            top: 0;\n        }\n\n        .tag {\n            display: inline-block;\n            background-color: rgba(255, 107, 107, 0.1);\n            color: var(--secondary);\n            padding: 0.25rem 0.75rem;\n            border-radius: 50px;\n            font-size: 0.85rem;\n            margin-right: 0.5rem;\n            margin-bottom: 0.5rem;\n        }\n\n        .timeline {\n            position: relative;\n            max-width: 1200px;\n            margin: 2rem auto;\n        }\n\n        .timeline::after {\n            content: '';\n            position: absolute;\n            width: 4px;\n            background-color: var(--primary);\n            top: 0;\n            bottom: 0;\n            left: 50%;\n            margin-left: -2px;\n        }\n\n        .timeline-item {\n            padding: 10px 40px;\n            position: relative;\n            width: 50%;\n            box-sizing: border-box;\n        }\n\n        .timeline-item::after {\n            content: '';\n            position: absolute;\n            width: 20px;\n            height: 20px;\n            background-color: white;\n            border: 4px solid var(--primary);\n            border-radius: 50%;\n            top: 15px;\n            z-index: 1;\n        }\n\n        .left {\n            left: 0;\n        }\n\n        .right {\n            left: 50%;\n        }\n\n        .left::after {\n            right: -14px;\n        }\n\n        .right::after {\n            left: -14px;\n        }\n\n        .timeline-content {\n            padding: 20px;\n            background-color: white;\n            border-radius: 8px;\n            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\n        }\n\n        .timeline-content h3 {\n            margin-top: 0;\n        }\n\n        .value-proposition {\n            display: flex;\n            align-items: center;\n            margin-bottom: 2rem;\n        }\n\n        .vp-icon {\n            background-color: rgba(78, 84, 200, 0.1);\n            width: 60px;\n            height: 60px;\n            border-radius: 50%;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            margin-right: 1.5rem;\n            color: var(--primary);\n            font-size: 1.5rem;\n        }\n\n        .vp-content h3 {\n            margin-top: 0;\n        }\n\n        .tech-feature {\n            display: flex;\n            align-items: flex-start;\n            margin-bottom: 1.5rem;\n        }\n\n        .tech-icon {\n            background-color: rgba(78, 84, 200, 0.1);\n            width: 50px;\n            height: 50px;\n            border-radius: 50%;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            margin-right: 1rem;\n            color: var(--primary);\n            font-size: 1.2rem;\n            flex-shrink: 0;\n        }\n\n        .tech-content h4 {\n            margin-top: 0;\n            margin-bottom: 0.5rem;\n        }\n\n        .screenshot {\n            border-radius: 8px;\n            overflow: hidden;\n            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);\n            margin: 1.5rem 0;\n            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);\n            height: 300px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--gray);\n            font-weight: 500;\n        }\n\n        .color-palette {\n            display: flex;\n            margin: 1rem 0;\n        }\n\n        .color-item {\n            width: 80px;\n            height: 80px;\n            margin-right: 1rem;\n            border-radius: 8px;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            color: white;\n            font-size: 0.8rem;\n            text-align: center;\n        }\n\n        .color-primary {\n            background-color: var(--primary);\n        }\n\n        .color-secondary {\n            background-color: var(--secondary);\n        }\n\n        .color-accent {\n            background-color: var(--accent);\n        }\n\n        .color-light {\n            background-color: var(--light);\n            color: var(--dark);\n            border: 1px solid var(--light-gray);\n        }\n\n        @media (max-width: 768px) {\n            h1 {\n                font-size: 2rem;\n            }\n            \n            h2 {\n                font-size: 1.5rem;\n            }\n            \n            .timeline::after {\n                left: 31px;\n            }\n            \n            .timeline-item {\n                width: 100%;\n                padding-left: 70px;\n                padding-right: 25px;\n            }\n            \n            .timeline-item::after {\n                left: 18px;\n            }\n            \n            .right {\n                left: 0;\n            }\n            \n            .grid {\n                grid-template-columns: 1fr;\n            }\n            \n            .chart-container {\n                height: 300px;\n            }\n            \n            .value-proposition {\n                flex-direction: column;\n                align-items: flex-start;\n            }\n            \n            .vp-icon {\n                margin-bottom: 1rem;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n    <main>\n        <section id=\"overview\">\n            <div class=\"container\">\n                <h2>\u65b9\u6848\u6982\u8ff0<\/h2>\n                <div class=\"card\">\n                    <p>\u5fc3\u94fe\u5bb6\u662f\u57fa\u4e8e\u5fc3\u94fe\u60c5\u667a\u6570\u636e\u79d1\u6280\u7684\u60c5\u611f\u667a\u80fd\u5206\u6790\u6280\u672f\uff0c\u4e13\u95e8\u4e3a\u6539\u5584\u5bb6\u5ead\u5173\u7cfb\u800c\u8bbe\u8ba1\u7684\u5c0f\u7a0b\u5e8f\u89e3\u51b3\u65b9\u6848\u3002\u901a\u8fc7\u591a\u6a21\u6001\u60c5\u611f\u8bc6\u522b\u548c\u5fc3\u7406\u94fe\u63a5\u6a21\u578b\uff0c\u5e2e\u52a9\u5bb6\u5ead\u6210\u5458\u66f4\u597d\u5730\u7406\u89e3\u5f7c\u6b64\u60c5\u611f\u72b6\u6001\uff0c\u6539\u5584\u6c9f\u901a\u65b9\u5f0f\uff0c\u589e\u5f3a\u5bb6\u5ead\u7ebd\u5e26\u3002<\/p>\n                    \n                    <div class=\"grid\">\n                        <div class=\"card\">\n                            <h3>\u8bbe\u8ba1\u7406\u5ff5<\/h3>\n                            <p>\u4ee5\u60c5\u611f\u667a\u80fd\u6280\u672f\u4e3a\u6838\u5fc3\uff0c\u6253\u9020\u6e29\u6696\u3001\u5305\u5bb9\u3001\u652f\u6301\u6027\u7684\u5bb6\u5ead\u4e92\u52a8\u73af\u5883\uff0c\u8ba9\u6280\u672f\u670d\u52a1\u4e8e\u4eba\u7c7b\u6700\u57fa\u672c\u7684\u60c5\u611f\u9700\u6c42\u3002<\/p>\n                        <\/div>\n                        <div class=\"card\">\n                            <h3>\u6838\u5fc3\u4ef7\u503c<\/h3>\n                            <p>\u901a\u8fc7AI\u6280\u672f\u964d\u4f4e\u5bb6\u5ead\u51b2\u7a81\uff0c\u63d0\u5347\u6c9f\u901a\u8d28\u91cf\uff0c\u589e\u5f3a\u5bb6\u5ead\u6210\u5458\u95f4\u7684\u60c5\u611f\u8fde\u63a5\u548c\u5e78\u798f\u611f\u3002<\/p>\n                        <\/div>\n                    <\/div>\n                    \n                    <h3>\u8bbe\u8ba1\u539f\u5219<\/h3>\n                    <ul class=\"feature-list\">\n                        <li><strong>\u60c5\u611f\u5305\u5bb9\u6027<\/strong>\uff1a\u8bc6\u522b\u5e76\u5c0a\u91cd\u6bcf\u4e2a\u5bb6\u5ead\u6210\u5458\u7684\u60c5\u611f\u8868\u8fbe\u65b9\u5f0f<\/li>\n                        <li><strong>\u9690\u79c1\u4fdd\u62a4<\/strong>\uff1a\u91c7\u7528\u6700\u9ad8\u6807\u51c6\u7684\u6570\u636e\u52a0\u5bc6\u548c\u9690\u79c1\u4fdd\u62a4\u63aa\u65bd<\/li>\n                        <li><strong>\u6613\u7528\u6027<\/strong>\uff1a\u7b80\u6d01\u76f4\u89c2\u7684\u754c\u9762\u8bbe\u8ba1\uff0c\u9002\u5408\u5404\u5e74\u9f84\u6bb5\u5bb6\u5ead\u6210\u5458\u4f7f\u7528<\/li>\n                        <li><strong>\u4e2a\u6027\u5316<\/strong>\uff1a\u57fa\u4e8e\u6bcf\u4e2a\u5bb6\u5ead\u7684\u72ec\u7279\u52a8\u6001\u63d0\u4f9b\u5b9a\u5236\u5316\u5efa\u8bae<\/li>\n                    <\/ul>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <section id=\"tech-application\">\n            <div class=\"container\">\n                <h2>\u4e8c\u3001\u5fc3\u94fe\u79d1\u6280\u6280\u672f\u5e94\u7528<\/h2>\n                \n                <h3>2.1 \u591a\u6a21\u6001\u60c5\u611f\u8bc6\u522b\u5728\u5bb6\u5ead\u573a\u666f\u7684\u5e94\u7528<\/h3>\n                <div class=\"card\">\n                    <p>\u5fc3\u94fe\u79d1\u6280\u7684\u591a\u6a21\u6001\u60c5\u611f\u611f\u77e5\u6280\u672f\u80fd\u591f\u901a\u8fc7\u6587\u672c\u3001\u8bed\u97f3\u548c\u89c6\u89c9\u6570\u636e\u7efc\u5408\u5206\u6790\u5bb6\u5ead\u6210\u5458\u7684\u60c5\u611f\u72b6\u6001\uff0c\u5728\u5bb6\u5ead\u573a\u666f\u4e2d\u5177\u4f53\u5e94\u7528\u5982\u4e0b\uff1a<\/p>\n                    \n                    <div class=\"grid\">\n                        <div class=\"card\">\n                            <h4>\u6587\u672c\u60c5\u611f\u5206\u6790<\/h4>\n                            <p>\u5206\u6790\u5bb6\u5ead\u6210\u5458\u5728\u804a\u5929\u4e2d\u7684\u6587\u5b57\u8868\u8fbe\uff0c\u8bc6\u522b\u6f5c\u5728\u7684\u60c5\u7eea\u72b6\u6001\u548c\u9700\u6c42\uff0c\u63d0\u4f9b\u6c9f\u901a\u5efa\u8bae\u3002<\/p>\n                        <\/div>\n                        \n                        <div class=\"card\">\n                            <h4>\u8bed\u97f3\u60c5\u611f\u8bc6\u522b<\/h4>\n                            <p>\u901a\u8fc7\u8bed\u97f3\u5bf9\u8bdd\u5206\u6790\u8bed\u8c03\u3001\u8bed\u901f\u548c\u97f3\u91cf\uff0c\u8bc6\u522b\u8a00\u8bed\u80cc\u540e\u7684\u771f\u5b9e\u60c5\u7eea\u72b6\u6001\u3002<\/p>\n                        <\/div>\n                        \n                        <div class=\"card\">\n                            <h4>\u9762\u90e8\u8868\u60c5\u5206\u6790<\/h4>\n                            <p>\u5728\u89c6\u9891\u4ea4\u6d41\u4e2d\u5b9e\u65f6\u5206\u6790\u9762\u90e8\u5fae\u8868\u60c5\uff0c\u5e2e\u52a9\u7406\u89e3\u975e\u8bed\u8a00\u7684\u60c5\u611f\u8868\u8fbe\u3002<\/p>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"screenshot\">\u591a\u6a21\u6001\u60c5\u611f\u8bc6\u522b\u754c\u9762\u793a\u610f\u56fe<\/div>\n                <\/div>\n                \n                <h3>2.2 \u5fc3\u7406\u94fe\u63a5\u6a21\u578b\u5728\u5bb6\u5ead\u5173\u7cfb\u4e2d\u7684\u5e94\u7528<\/h3>\n                <div class=\"card\">\n                    <p>\u57fa\u4e8e\u5fc3\u94fe\u79d1\u6280\u72ec\u7279\u7684\u5fc3\u7406\u94fe\u63a5\u6a21\u578b\uff0c\u5efa\u7acb\u5bb6\u5ead\u6210\u5458\u5fc3\u7406\u72b6\u6001\u4e0e\u884c\u4e3a\u6a21\u5f0f\u4e4b\u95f4\u7684\u5173\u8054\uff1a<\/p>\n                    \n                    <div class=\"tech-feature\">\n                        <div class=\"tech-icon\"><i class=\"fas fa-brain\"><\/i><\/div>\n                        <div class=\"tech-content\">\n                            <h4>\u60c5\u611f\u6a21\u5f0f\u8bc6\u522b<\/h4>\n                            <p>\u8bc6\u522b\u5bb6\u5ead\u6210\u5458\u95f4\u7684\u60c5\u611f\u4e92\u52a8\u6a21\u5f0f\uff0c\u9884\u6d4b\u6f5c\u5728\u51b2\u7a81\u70b9\u5e76\u63d0\u4f9b\u9884\u9632\u5efa\u8bae\u3002<\/p>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"tech-feature\">\n                        <div class=\"tech-icon\"><i class=\"fas fa-project-diagram\"><\/i><\/div>\n                        <div class=\"tech-content\">\n                            <h4>\u5173\u7cfb\u52a8\u6001\u5efa\u6a21<\/h4>\n                            <p>\u6784\u5efa\u5bb6\u5ead\u6210\u5458\u95f4\u7684\u5173\u7cfb\u52a8\u6001\u6a21\u578b\uff0c\u53ef\u89c6\u5316\u60c5\u611f\u6d41\u52a8\u548c\u8fde\u63a5\u5f3a\u5ea6\u3002<\/p>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"tech-feature\">\n                        <div class=\"tech-icon\"><i class=\"fas fa-lightbulb\"><\/i><\/div>\n                        <div class=\"tech-content\">\n                            <h4>\u4e2a\u6027\u5316\u5e72\u9884<\/h4>\n                            <p>\u57fa\u4e8e\u6a21\u578b\u5206\u6790\u7ed3\u679c\uff0c\u63d0\u4f9b\u4e2a\u6027\u5316\u7684\u5bb6\u5ead\u4e92\u52a8\u5efa\u8bae\u548c\u51b2\u7a81\u89e3\u51b3\u65b9\u6848\u3002<\/p>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"chart-container\">\n                        <canvas id=\"familyEmotionChart\"><\/canvas>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <section id=\"core-features\">\n            <div class=\"container\">\n                <h2>\u4e09\u3001\u6838\u5fc3\u529f\u80fd\u8bbe\u8ba1<\/h2>\n                \n                <h3>3.1 \u5bb6\u5ead\u60c5\u611f\u5065\u5eb7\u4eea\u8868\u76d8<\/h3>\n                <div class=\"card\">\n                    <p>\u4e3a\u6bcf\u4e2a\u5bb6\u5ead\u63d0\u4f9b\u76f4\u89c2\u7684\u60c5\u611f\u5065\u5eb7\u6982\u89c8\uff0c\u5305\u62ec\u60c5\u7eea\u8d8b\u52bf\u3001\u6c9f\u901a\u8d28\u91cf\u548c\u5173\u7cfb\u5f3a\u5ea6\u7b49\u5173\u952e\u6307\u6807\u3002<\/p>\n                    \n                    <div class=\"grid\">\n                        <div class=\"card\">\n                            <h4>\u60c5\u7eea\u65e5\u5386<\/h4>\n                            <p>\u53ef\u89c6\u5316\u8bb0\u5f55\u5bb6\u5ead\u6210\u5458\u6bcf\u65e5\u60c5\u7eea\u53d8\u5316\uff0c\u8bc6\u522b\u60c5\u7eea\u6a21\u5f0f\u548c\u89e6\u53d1\u56e0\u7d20\u3002<\/p>\n                        <\/div>\n                        \n                        <div class=\"card\">\n                            <h4>\u6c9f\u901a\u8d28\u91cf\u5206\u6790<\/h4>\n                            <p>\u8bc4\u4f30\u5bb6\u5ead\u5bf9\u8bdd\u7684\u60c5\u611f tone \u548c\u6709\u6548\u6027\uff0c\u63d0\u4f9b\u6539\u8fdb\u5efa\u8bae\u3002<\/p>\n                        <\/div>\n                        \n                        <div class=\"card\">\n                            <h4>\u5173\u7cfb\u5f3a\u5ea6\u6307\u6570<\/h4>\n                            <p>\u901a\u8fc7\u7b97\u6cd5\u8ba1\u7b97\u5bb6\u5ead\u6210\u5458\u95f4\u7684\u60c5\u611f\u8fde\u63a5\u5f3a\u5ea6\uff0c\u8ffd\u8e2a\u5173\u7cfb\u53d8\u5316\u8d8b\u52bf\u3002<\/p>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"screenshot\">\u5bb6\u5ead\u60c5\u611f\u5065\u5eb7\u4eea\u8868\u76d8\u754c\u9762\u793a\u610f\u56fe<\/div>\n                <\/div>\n                \n                <h3>3.2 \u667a\u80fd\u5bb6\u5ead\u6c9f\u901a\u52a9\u624b<\/h3>\n                <div class=\"card\">\n                    <p>\u57fa\u4e8e\u5fc3\u94fe\u79d1\u6280\u7684\u60c5\u611f\u667a\u80fd\u6280\u672f\uff0c\u63d0\u4f9b\u5b9e\u65f6\u6c9f\u901a\u8f85\u52a9\u548c\u5efa\u8bae\uff1a<\/p>\n                    \n                    <ul class=\"feature-list\">\n                        <li><strong>\u5b9e\u65f6\u60c5\u611f\u63d0\u793a<\/strong>\uff1a\u5728\u5bb6\u5ead\u804a\u5929\u4e2d\u63d0\u793a\u5bf9\u65b9\u53ef\u80fd\u7684\u60c5\u611f\u72b6\u6001<\/li>\n                        <li><strong>\u51b2\u7a81\u9884\u8b66\u7cfb\u7edf<\/strong>\uff1a\u8bc6\u522b\u6f5c\u5728\u51b2\u7a81\u5e76\u63d0\u4f9b\u5316\u89e3\u5efa\u8bae<\/li>\n                        <li><strong>\u6c9f\u901a\u5efa\u8bae\u5e93<\/strong>\uff1a\u6839\u636e\u4e0d\u540c\u60c5\u5883\u63d0\u4f9b\u79d1\u5b66\u6c9f\u901a\u8bdd\u672f\u5efa\u8bae<\/li>\n                        <li><strong>\u60c5\u611f\u8bcd\u5178<\/strong>\uff1a\u5e2e\u52a9\u5bb6\u5ead\u6210\u5458\u66f4\u51c6\u786e\u5730\u8868\u8fbe\u60c5\u611f\u9700\u6c42<\/li>\n                    <\/ul>\n                    \n                    <div class=\"screenshot\">\u667a\u80fd\u5bb6\u5ead\u6c9f\u901a\u52a9\u624b\u754c\u9762\u793a\u610f\u56fe<\/div>\n                <\/div>\n                \n                <h3>3.3 \u5bb6\u5ead\u4e92\u52a8\u6d3b\u52a8\u63a8\u8350<\/h3>\n                <div class=\"card\">\n                    <p>\u57fa\u4e8e\u5bb6\u5ead\u6210\u5458\u7684\u60c5\u611f\u72b6\u6001\u548c\u5173\u7cfb\u52a8\u6001\uff0c\u4e2a\u6027\u5316\u63a8\u8350\u589e\u5f3a\u5bb6\u5ead\u7ebd\u5e26\u7684\u6d3b\u52a8\uff1a<\/p>\n                    \n                    <div class=\"grid\">\n                        <div class=\"card\">\n                            <h4>\u60c5\u611f\u4fee\u590d\u6d3b\u52a8<\/h4>\n                            <p>\u5728\u68c0\u6d4b\u5230\u5173\u7cfb\u7d27\u5f20\u65f6\u63a8\u8350\u9002\u5f53\u7684\u548c\u89e3\u548c\u4fee\u590d\u6d3b\u52a8\u3002<\/p>\n                        <\/div>\n                        \n                        <div class=\"card\">\n                            <h4>\u60c5\u611f\u5e86\u795d\u6d3b\u52a8<\/h4>\n                            <p>\u5728\u79ef\u6781\u60c5\u611f\u65f6\u523b\u63a8\u8350\u52a0\u5f3a\u6b63\u9762\u60c5\u7eea\u7684\u5171\u540c\u6d3b\u52a8\u3002<\/p>\n                        <\/div>\n                        \n                        <div class=\"card\">\n                            <h4>\u65e5\u5e38\u8fde\u63a5\u63d0\u9192<\/h4>\n                            <p>\u63a8\u8350\u7b80\u5355\u7684\u65e5\u5e38\u4e92\u52a8\u65b9\u5f0f\uff0c\u589e\u5f3a\u5bb6\u5ead\u60c5\u611f\u8fde\u63a5\u3002<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <section id=\"implementation\">\n            <div class=\"container\">\n                <h2>\u56db\u3001\u5b9e\u65bd\u65b9\u6848<\/h2>\n                \n                <h3>4.1 \u6280\u672f\u5b9e\u65bd\u8def\u7ebf<\/h3>\n                <div class=\"timeline\">\n                    <div class=\"timeline-item left\">\n                        <div class=\"timeline-content\">\n                            <h4>\u7b2c\u4e00\u9636\u6bb5\uff1a\u57fa\u7840\u6846\u67b6\u642d\u5efa<\/h4>\n                            <p>\u5b8c\u6210\u5c0f\u7a0b\u5e8f\u57fa\u7840\u67b6\u6784\uff0c\u96c6\u6210\u5fc3\u94fe\u79d1\u6280\u60c5\u611f\u8bc6\u522bAPI\uff0c\u5b9e\u73b0\u57fa\u672c\u60c5\u611f\u5206\u6790\u529f\u80fd<\/p>\n                        <\/div>\n                    <\/div>\n                    <div class=\"timeline-item right\">\n                        <div class=\"timeline-content\">\n                            <h4>\u7b2c\u4e8c\u9636\u6bb5\uff1a\u6838\u5fc3\u529f\u80fd\u5f00\u53d1<\/h4>\n                            <p>\u5f00\u53d1\u5bb6\u5ead\u60c5\u611f\u4eea\u8868\u76d8\u3001\u6c9f\u901a\u52a9\u624b\u548c\u6d3b\u52a8\u63a8\u8350\u7cfb\u7edf\uff0c\u5b8c\u5584\u7528\u6237\u754c\u9762<\/p>\n                        <\/div>\n                    <\/div>\n                    <div class=\"timeline-item left\">\n                        <div class=\"timeline-content\">\n                            <h4>\u7b2c\u4e09\u9636\u6bb5\uff1a\u4e2a\u6027\u5316\u4f18\u5316<\/h4>\n                            <p>\u57fa\u4e8e\u7528\u6237\u53cd\u9988\u4f18\u5316\u7b97\u6cd5\uff0c\u589e\u5f3a\u4e2a\u6027\u5316\u63a8\u8350\u7cbe\u5ea6\uff0c\u63d0\u9ad8\u7528\u6237\u4f53\u9a8c<\/p>\n                        <\/div>\n                    <\/div>\n                    <div class=\"timeline-item right\">\n                        <div class=\"timeline-content\">\n                            <h4>\u7b2c\u56db\u9636\u6bb5\uff1a\u6269\u5c55\u529f\u80fd\u5f00\u53d1<\/h4>\n                            <p>\u5f00\u53d1\u9ad8\u7ea7\u529f\u80fd\u5982\u5bb6\u5ead\u4f1a\u8bae\u52a9\u624b\u3001\u60c5\u611f\u6559\u80b2\u5185\u5bb9\u7b49\uff0c\u5b8c\u5584\u4ea7\u54c1\u751f\u6001<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <h3>4.2 \u8bbe\u8ba1\u7cfb\u7edf<\/h3>\n                <div class=\"card\">\n                    <p>\u5fc3\u94fe\u5bb6\u5c0f\u7a0b\u5e8f\u91c7\u7528\u6e29\u6696\u3001\u53cb\u597d\u7684\u8bbe\u8ba1\u8bed\u8a00\uff0c\u8425\u9020\u5bb6\u5ead\u6e29\u99a8\u6c1b\u56f4\uff1a<\/p>\n                    \n                    <h4>\u8272\u5f69\u7cfb\u7edf<\/h4>\n                    <div class=\"color-palette\">\n                        <div class=\"color-item color-primary\">\u4e3b\u8272\u8c03<br>#4e54c8<\/div>\n                        <div class=\"color-item color-secondary\">\u8f85\u52a9\u8272<br>#ff6b6b<\/div>\n                        <div class=\"color-item color-accent\">\u5f3a\u8c03\u8272<br>#36d1dc<\/div>\n                        <div class=\"color-item color-light\">\u80cc\u666f\u8272<br>#f8f9fa<\/div>\n                    <\/div>\n                    \n                    <h4>\u8bbe\u8ba1\u539f\u5219<\/h4>\n                    <ul class=\"feature-list\">\n                        <li><strong>\u5305\u5bb9\u6027\u8bbe\u8ba1<\/strong>\uff1a\u786e\u4fdd\u6240\u6709\u5e74\u9f84\u6bb5\u5bb6\u5ead\u6210\u5458\u90fd\u80fd\u8f7b\u677e\u4f7f\u7528<\/li>\n                        <li><strong>\u60c5\u611f\u5316\u8bbe\u8ba1<\/strong>\uff1a\u901a\u8fc7\u5fae\u4ea4\u4e92\u548c\u89c6\u89c9\u5143\u7d20\u4f20\u9012\u6e29\u6696\u548c\u5173\u6000<\/li>\n                        <li><strong>\u7b80\u6d01\u660e\u4e86<\/strong>\uff1a\u907f\u514d\u590d\u6742\u64cd\u4f5c\u6d41\u7a0b\uff0c\u964d\u4f4e\u4f7f\u7528\u95e8\u69db<\/li>\n                        <li><strong>\u4e00\u81f4\u6027<\/strong>\uff1a\u4fdd\u6301\u6574\u4f53\u8bbe\u8ba1\u8bed\u8a00\u7684\u4e00\u81f4\u6027\uff0c\u5efa\u7acb\u54c1\u724c\u8ba4\u77e5<\/li>\n                    <\/ul>\n                    \n                    <div class=\"screenshot\">\u5c0f\u7a0b\u5e8f\u754c\u9762\u8bbe\u8ba1\u793a\u610f\u56fe<\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <section id=\"expected-impact\">\n            <div class=\"container\">\n                <h2>\u4e94\u3001\u9884\u671f\u6548\u679c\u4e0e\u8bc4\u4f30<\/h2>\n                \n                <h3>5.1 \u5173\u952e\u7ee9\u6548\u6307\u6807<\/h3>\n                <div class=\"card\">\n                    <p>\u901a\u8fc7\u4ee5\u4e0b\u6307\u6807\u8bc4\u4f30\u5fc3\u94fe\u5bb6\u5c0f\u7a0b\u5e8f\u7684\u5b9e\u9645\u6548\u679c\uff1a<\/p>\n                    \n                    <table>\n                        <thead>\n                            <tr>\n                                <th>\u6307\u6807\u7c7b\u522b<\/th>\n                                <th>\u5177\u4f53\u6307\u6807<\/th>\n                                <th>\u76ee\u6807\u503c<\/th>\n                            <\/tr>\n                        <\/thead>\n                        <tbody>\n                            <tr>\n                                <td>\u7528\u6237\u53c2\u4e0e\u5ea6<\/td>\n                                <td>\u65e5\u5747\u4f7f\u7528\u65f6\u957f<\/td>\n                                <td>\u226515\u5206\u949f<\/td>\n                            <\/tr>\n                            <tr>\n                                <td>\u7528\u6237\u6ee1\u610f\u5ea6<\/td>\n                                <td>\u51c0\u63a8\u8350\u503c(NPS)<\/td>\n                                <td>\u226540<\/td>\n                            <\/tr>\n                            <tr>\n                                <td>\u5173\u7cfb\u6539\u5584<\/td>\n                                <td>\u5bb6\u5ead\u51b2\u7a81\u51cf\u5c11\u7387<\/td>\n                                <td>\u226530%<\/td>\n                            <\/tr>\n                            <tr>\n                                <td>\u60c5\u611f\u5065\u5eb7<\/td>\n                                <td>\u5bb6\u5ead\u5e78\u798f\u611f\u63d0\u5347<\/td>\n                                <td>\u226525%<\/td>\n                            <\/tr>\n                            <tr>\n                                <td>\u529f\u80fd\u4f7f\u7528<\/td>\n                                <td>\u6838\u5fc3\u529f\u80fd\u4f7f\u7528\u7387<\/td>\n                                <td>\u226570%<\/td>\n                            <\/tr>\n                        <\/tbody>\n                    <\/table>\n                    \n                    <div class=\"chart-container\">\n                        <canvas id=\"impactChart\"><\/canvas>\n                    <\/div>\n                <\/div>\n                \n                <h3>5.2 \u957f\u671f\u4ef7\u503c<\/h3>\n                <div class=\"grid\">\n                    <div class=\"card\">\n                        <h4>\u5bb6\u5ead\u5c42\u9762<\/h4>\n                        <ul class=\"feature-list\">\n                            <li>\u5efa\u7acb\u66f4\u5065\u5eb7\u7684\u5bb6\u5ead\u6c9f\u901a\u6a21\u5f0f<\/li>\n                            <li>\u589e\u5f3a\u5bb6\u5ead\u6210\u5458\u95f4\u7684\u60c5\u611f\u8fde\u63a5<\/li>\n                            <li>\u51cf\u5c11\u957f\u671f\u5173\u7cfb\u51b2\u7a81\u548c\u77db\u76fe<\/li>\n                            <li>\u63d0\u5347\u6574\u4f53\u5bb6\u5ead\u5e78\u798f\u611f<\/li>\n                        <\/ul>\n                    <\/div>\n                    \n                    <div class=\"card\">\n                        <h4>\u793e\u4f1a\u5c42\u9762<\/h4>\n                        <ul class=\"feature-list\">\n                            <li>\u4fc3\u8fdb\u5bb6\u5ead\u548c\u8c10\uff0c\u51cf\u5c11\u793e\u4f1a\u95ee\u9898<\/li>\n                            <li>\u63d0\u5347\u516c\u4f17\u60c5\u611f\u5065\u5eb7\u610f\u8bc6<\/li>\n                            <li>\u4e3a\u60c5\u611f\u6559\u80b2\u63d0\u4f9b\u79d1\u5b66\u5de5\u5177<\/li>\n                            <li>\u63a8\u52a8\u60c5\u611f\u667a\u80fd\u6280\u672f\u666e\u53ca<\/li>\n                        <\/ul>\n                    <\/div>\n                    \n                    <div class=\"card\">\n                        <h4>\u6280\u672f\u5c42\u9762<\/h4>\n                        <ul class=\"feature-list\">\n                            <li>\u9a8c\u8bc1\u60c5\u611f\u667a\u80fd\u6280\u672f\u5728\u5bb6\u5ead\u573a\u666f\u7684\u5e94\u7528<\/li>\n                            <li>\u79ef\u7d2f\u5b9d\u8d35\u7684\u5bb6\u5ead\u60c5\u611f\u6570\u636e\u8d44\u6e90<\/li>\n                            <li>\u4f18\u5316\u5fc3\u94fe\u79d1\u6280\u6838\u5fc3\u7b97\u6cd5\u6a21\u578b<\/li>\n                            <li>\u62d3\u5c55\u60c5\u611f\u667a\u80fd\u6280\u672f\u5e94\u7528\u8fb9\u754c<\/li>\n                        <\/ul>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n    <\/main>\n    <a href=\"#\" class=\"back-to-top\" id=\"backToTop\">\u2191<\/a>\n\n    <script>\n        \/\/ Back to top button\n        const backToTopButton = document.getElementById('backToTop');\n        \n        window.addEventListener('scroll', () => {\n            if (window.pageYOffset > 300) {\n                backToTopButton.classList.add('visible');\n            } else {\n                backToTopButton.classList.remove('visible');\n            }\n        });\n        \n        backToTopButton.addEventListener('click', (e) => {\n            e.preventDefault();\n            window.scrollTo({ top: 0, behavior: 'smooth' });\n        });\n\n        \/\/ Smooth scrolling for anchor links\n        document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n            anchor.addEventListener('click', function (e) {\n                e.preventDefault();\n                \n                if (this.getAttribute('href') === '#') return;\n                \n                const targetId = this.getAttribute('href');\n                const targetElement = document.querySelector(targetId);\n                \n                if (targetElement) {\n                    window.scrollTo({\n                        top: targetElement.offsetTop - 20,\n                        behavior: 'smooth'\n                    });\n                }\n            });\n        });\n\n        \/\/ Family Emotion Chart\n        const emotionCtx = document.getElementById('familyEmotionChart').getContext('2d');\n        new Chart(emotionCtx, {\n            type: 'radar',\n            data: {\n                labels: ['\u6c9f\u901a\u9891\u7387', '\u60c5\u611f\u8868\u8fbe', '\u51b2\u7a81\u9891\u7387', '\u652f\u6301\u7a0b\u5ea6', '\u4eb2\u5bc6\u5ea6', '\u5171\u540c\u6d3b\u52a8'],\n                datasets: [\n                    {\n                        label: '\u5f53\u524d\u72b6\u6001',\n                        data: [65, 60, 70, 75, 65, 60],\n                        backgroundColor: 'rgba(78, 84, 200, 0.2)',\n                        borderColor: 'rgba(78, 84, 200, 1)',\n                        pointBackgroundColor: 'rgba(78, 84, 200, 1)',\n                        pointBorderColor: '#fff',\n                        pointHoverBackgroundColor: '#fff',\n                        pointHoverBorderColor: 'rgba(78, 84, 200, 1)'\n                    },\n                    {\n                        label: '\u76ee\u6807\u72b6\u6001',\n                        data: [85, 90, 30, 90, 85, 80],\n                        backgroundColor: 'rgba(54, 209, 220, 0.2)',\n                        borderColor: 'rgba(54, 209, 220, 1)',\n                        pointBackgroundColor: 'rgba(54, 209, 220, 1)',\n                        pointBorderColor: '#fff',\n                        pointHoverBackgroundColor: '#fff',\n                        pointHoverBorderColor: 'rgba(54, 209, 220, 1)'\n                    }\n                ]\n            },\n            options: {\n                responsive: true,\n                maintainAspectRatio: false,\n                plugins: {\n                    legend: {\n                        position: 'top',\n                    },\n                },\n                scales: {\n                    r: {\n                        angleLines: {\n                            display: true\n                        },\n                        suggestedMin: 0,\n                        suggestedMax: 100\n                    }\n                }\n            }\n        });\n\n        \/\/ Impact Chart\n        const impactCtx = document.getElementById('impactChart').getContext('2d');\n        new Chart(impactCtx, {\n            type: 'bar',\n            data: {\n                labels: ['\u6c9f\u901a\u8d28\u91cf', '\u51b2\u7a81\u51cf\u5c11', '\u60c5\u611f\u8868\u8fbe', '\u4eb2\u5bc6\u5ea6', '\u5171\u540c\u6d3b\u52a8'],\n                datasets: [\n                    {\n                        label: '\u4f7f\u7528\u524d',\n                        data: [50, 40, 45, 55, 50],\n                        backgroundColor: 'rgba(255, 107, 107, 0.7)',\n                        borderColor: 'rgba(255, 107, 107, 1)',\n                        borderWidth: 1\n                    },\n                    {\n                        label: '\u4f7f\u7528\u540e(3\u4e2a\u6708)',\n                        data: [75, 70, 80, 80, 75],\n                        backgroundColor: 'rgba(78, 84, 200, 0.7)',\n                        borderColor: 'rgba(78, 84, 200, 1)',\n                        borderWidth: 1\n                    },\n                    {\n                        label: '\u4f7f\u7528\u540e(6\u4e2a\u6708)',\n                        data: [85, 80, 90, 90, 85],\n                        backgroundColor: 'rgba(54, 209, 220, 0.7)',\n                        borderColor: 'rgba(54, 209, 220, 1)',\n                        borderWidth: 1\n                    }\n                ]\n            },\n            options: {\n                responsive: true,\n                maintainAspectRatio: false,\n                plugins: {\n                    legend: {\n                        position: 'top',\n                    },\n                },\n                scales: {\n                    y: {\n                        beginAtZero: true,\n                        max: 100,\n                        title: {\n                            display: true,\n                            text: '\u5206\u6570'\n                        }\n                    }\n                }\n            }\n        });\n    <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u5fc3\u94fe\u79d1\u6280 &#8211; \u60c5\u611f\u667a\u80fd\u89e3\u51b3\u65b9\u6848\u9886\u5bfc\u8005 \u60c5\u611f\u667a\u80fd\u6280\u672f\u91cd\u5851\u5bb6\u5ead\u6c9f\u901a\u65b9\u5f0f \u57fa\u4e8e\u5fc3\u94fe\u79d1\u6280\u7684\u591a\u6a21\u6001\u60c5\u611f\u8bc6\u522b\u4e0e [&hellip;]<\/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-2090","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/2090","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=2090"}],"version-history":[{"count":8,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/2090\/revisions"}],"predecessor-version":[{"id":2099,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/2090\/revisions\/2099"}],"wp:attachment":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/media?parent=2090"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}