PET\u5e72\u71e5\u673a\u6280\u672f\u4ea4\u4e92\u5f0f\u6307\u5357<\/title><br \/>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script><br \/>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap\" rel=\"stylesheet\">\n <br \/>\n <br \/>\n <br \/>\n <\/p>\n<style>\n body {\n font-family: 'Noto Sans SC', sans-serif;\n background-color: #F8F5F2;\n color: #4A4A4A;\n }\n .chart-container {\n position: relative;\n width: 100%;\n max-width: 600px;\n margin-left: auto;\n margin-right: auto;\n height: 40vh;\n max-height: 450px;\n }\n @media (max-width: 768px) {\n .chart-container {\n height: 50vh;\n max-height: 350px;\n }\n }\n .tower-pipe { transition: background-color 0.5s ease-in-out; }\n .air-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n position: absolute;\n animation: move-air 4s linear infinite;\n }\n .rotor-animation {\n animation: rotate-rotor 25s linear infinite;\n }\n @keyframes rotate-rotor {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n @keyframes move-air {\n from { offset-distance: 0%; }\n to { offset-distance: 100%; }\n }\n .nav-link {\n transition: color 0.3s, border-bottom-color 0.3s;\n }\n .nav-link:hover {\n color: #C3B091;\n }\n .active-nav {\n color: #C3B091;\n border-bottom: 2px solid #C3B091;\n }\n .card-active {\n transform: translateY(-5px);\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n border-color: #C3B091;\n }\n <\/style>\n<p><\/head><br \/>\n<body class=\"antialiased\"><\/p>\n<header class=\"bg-white\/80 backdrop-blur-md sticky top-0 z-50 shadow-sm\">\n<nav class=\"container mx-auto px-6 py-3 flex justify-between items-center\">\n<div class=\"text-xl font-bold text-gray-800\">PET\u5e72\u71e5\u6280\u672f\u6307\u5357<\/div>\n<div class=\"hidden md:flex space-x-8\">\n <a href=\"#comparison\" class=\"nav-link pb-1\">\u6280\u672f\u5bf9\u6bd4<\/a><br \/>\n <a href=\"#how-it-works\" class=\"nav-link pb-1\">\u5de5\u4f5c\u539f\u7406<\/a><br \/>\n <a href=\"#parameters\" class=\"nav-link pb-1\">\u5173\u952e\u53c2\u6570<\/a><br \/>\n <a href=\"#selection\" class=\"nav-link pb-1\">\u9009\u578b\u6307\u5357<\/a>\n <\/div>\n<div class=\"md:hidden\">\n <button id=\"menu-btn\" class=\"text-gray-800 focus:outline-none\"><br \/>\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16m-7 6h7\"><\/path><\/svg><br \/>\n <\/button>\n <\/div>\n<\/nav>\n<div id=\"mobile-menu\" class=\"hidden md:hidden\">\n <a href=\"#comparison\" class=\"block py-2 px-6 text-sm hover:bg-gray-100\">\u6280\u672f\u5bf9\u6bd4<\/a><br \/>\n <a href=\"#how-it-works\" class=\"block py-2 px-6 text-sm hover:bg-gray-100\">\u5de5\u4f5c\u539f\u7406<\/a><br \/>\n <a href=\"#parameters\" class=\"block py-2 px-6 text-sm hover:bg-gray-100\">\u5173\u952e\u53c2\u6570<\/a><br \/>\n <a href=\"#selection\" class=\"block py-2 px-6 text-sm hover:bg-gray-100\">\u9009\u578b\u6307\u5357<\/a>\n <\/div>\n<\/header>\n<p> <main class=\"container mx-auto px-6 py-12\"><\/p>\n<section id=\"intro\" class=\"text-center mb-24\">\n<h1 class=\"text-4xl md:text-5xl font-bold mb-4\">\u63a2\u7a76PET\u5e72\u71e5\u7684\u6838\u5fc3\u5965\u79d8<\/h1>\n<p class=\"text-lg text-gray-600 max-w-3xl mx-auto\">\n PET\u6811\u8102\u5177\u6709\u5f88\u5f3a\u7684\u5438\u6e7f\u6027\u3002\u5982\u679c\u5728\u6ce8\u5851\u524d\u672a\u5145\u5206\u5e72\u71e5\uff0c\u5fae\u91cf\u7684\u6c34\u5206\u4f1a\u5728\u9ad8\u6e29\u4e0b\u5f15\u53d1\u6c34\u89e3\u53cd\u5e94\uff0c\u5bfc\u81f4\u6750\u6599\u6027\u80fd\u4e25\u91cd\u4e0b\u964d\uff0c\u4ea7\u751f\u6b21\u54c1\u3002\u672c\u6307\u5357\u5c06\u5e26\u60a8\u6df1\u5165\u4e86\u89e3\u884c\u4e1a\u9886\u5148\u7684\u5e72\u71e5\u6280\u672f\uff0c\u52a9\u60a8\u505a\u51fa\u660e\u667a\u51b3\u7b56\u3002\n <\/p>\n<\/section>\n<section id=\"comparison\" class=\"mb-24 scroll-mt-20\">\n<div class=\"text-center mb-12\">\n<h2 class=\"text-3xl font-bold\">\u6280\u672f\u5bf9\u6bd4\u4eea\u8868\u76d8<\/h2>\n<p class=\"text-gray-600 mt-2\">\u76f4\u89c2\u6bd4\u8f83\u53cc\u5854\u5f0f\u4e0e\u8f6c\u8f6e\u5f0f\u5e72\u71e5\u673a\u7684\u5173\u952e\u6027\u80fd\u6307\u6807\u3002<\/p>\n<\/p><\/div>\n<div class=\"bg-white p-4 sm:p-8 rounded-xl shadow-lg\">\n<div class=\"chart-container\">\n <canvas id=\"techComparisonChart\"><\/canvas>\n <\/div>\n<div id=\"comparison-details\" class=\"mt-8 grid grid-cols-1 md:grid-cols-3 gap-4 text-center\">\n <\/div>\n<\/p><\/div>\n<\/section>\n<section id=\"how-it-works\" class=\"mb-24 scroll-mt-20\">\n<div class=\"text-center mb-12\">\n<h2 class=\"text-3xl font-bold\">\u5de5\u4f5c\u539f\u7406\u89e3\u6790<\/h2>\n<p class=\"text-gray-600 mt-2\">\u901a\u8fc7\u4ea4\u4e92\u5f0f\u52a8\u753b\uff0c\u63a2\u7d22\u4e24\u79cd\u5e72\u71e5\u673a\u5185\u90e8\u7684\u52a8\u6001\u5de5\u4f5c\u6d41\u7a0b\u3002<\/p>\n<\/p><\/div>\n<div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12\">\n<article class=\"bg-white p-6 rounded-xl shadow-lg\">\n<h3 class=\"text-2xl font-semibold mb-4 text-center text-[#5F9EA0]\">\u53cc\u5854\u5f0f\u5e72\u71e5\u673a\uff1a\u4ea4\u66ff\u5faa\u73af<\/h3>\n<p class=\"text-gray-600 mb-6 text-sm\">\n \u53cc\u5854\u5f0f\u5e72\u71e5\u673a\u901a\u8fc7\u4e24\u4e2a\u88c5\u6ee1\u5206\u5b50\u7b5b\u7684\u5438\u9644\u5854\u4ea4\u66ff\u5de5\u4f5c\uff0c\u4e00\u4e2a\u8fdb\u884c\u5438\u9644\u9664\u6e7f\uff0c\u53e6\u4e00\u4e2a\u5219\u8fdb\u884c\u52a0\u70ed\u518d\u751f\uff0c\u4ece\u800c\u5b9e\u73b0\u4e0d\u95f4\u65ad\u7684\u5e72\u71e5\u7a7a\u6c14\u4f9b\u5e94\u3002\u5176\u6838\u5fc3\u5728\u4e8e\u9600\u95e8\u7684\u7cbe\u786e\u5207\u6362\uff0c\u4f46\u5207\u6362\u77ac\u95f4\u53ef\u80fd\u5e26\u6765\u5fae\u5c0f\u7684\u9732\u70b9\u6ce2\u52a8\u3002\n <\/p>\n<div class=\"relative h-96 bg-gray-50 rounded-lg p-4 flex justify-around items-center\">\n<div id=\"towerA\" class=\"text-center\">\n<div class=\"w-20 h-48 bg-[#5F9EA0] tower-pipe rounded-lg mx-auto flex items-center justify-center text-white font-bold\">\u5854 A<\/div>\n<div id=\"statusA\" class=\"mt-2 text-sm font-medium text-[#5F9EA0]\">\u5438\u9644\u4e2d<\/div>\n<\/p><\/div>\n<div id=\"towerB\" class=\"text-center\">\n<div class=\"w-20 h-48 bg-[#E27D60] tower-pipe rounded-lg mx-auto flex items-center justify-center text-white font-bold\">\u5854 B<\/div>\n<div id=\"statusB\" class=\"mt-2 text-sm font-medium text-[#E27D60]\">\u518d\u751f\u4e2d<\/div>\n<\/p><\/div>\n<div class=\"absolute top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2\">\n <button id=\"switch-towers-btn\" class=\"px-4 py-2 bg-[#C3B091] text-white rounded-lg shadow-md hover:bg-opacity-90 transition\"><br \/>\n \u6a21\u62df\u5207\u6362<br \/>\n <\/button>\n <\/div>\n<\/p><\/div>\n<\/article>\n<article class=\"bg-white p-6 rounded-xl shadow-lg\">\n<h3 class=\"text-2xl font-semibold mb-4 text-center text-[#E27D60]\">\u8f6c\u8f6e\u5f0f\u5e72\u71e5\u673a\uff1a\u8fde\u7eed\u7a33\u5b9a<\/h3>\n<p class=\"text-gray-600 mb-6 text-sm\">\n \u8f6c\u8f6e\u5f0f\u5e72\u71e5\u673a\u7684\u6838\u5fc3\u662f\u4e00\u4e2a\u7f13\u6162\u65cb\u8f6c\u7684\u8702\u7a9d\u72b6\u5206\u5b50\u7b5b\u8f6c\u8f6e\u3002\u8f6c\u8f6e\u88ab\u5212\u5206\u4e3a\u5438\u9644\u533a\u548c\u518d\u751f\u533a\uff0c\u901a\u8fc7\u8fde\u7eed\u65cb\u8f6c\uff0c\u540c\u6b65\u5b8c\u6210\u5438\u9644\u548c\u518d\u751f\u8fc7\u7a0b\u3002\u8fd9\u79cd\u8bbe\u8ba1\u4ece\u6839\u672c\u4e0a\u6d88\u9664\u4e86\u5207\u6362\u52a8\u4f5c\uff0c\u786e\u4fdd\u4e86\u6781\u4e3a\u7a33\u5b9a\u7684\u9732\u70b9\u8f93\u51fa\u3002\n <\/p>\n<div class=\"relative h-96 bg-gray-50 rounded-lg p-4 flex justify-center items-center\">\n<div class=\"w-64 h-64 relative\">\n<div class=\"w-full h-full border-8 border-gray-300 rounded-full flex items-center justify-center rotor-animation\">\n<div class=\"w-full h-px bg-gray-300\"><\/div>\n<div class=\"w-px h-full bg-gray-300 absolute\"><\/div>\n<div class=\"w-full h-px bg-gray-300 absolute transform rotate-45\"><\/div>\n<div class=\"w-px h-full bg-gray-300 absolute transform rotate-45\"><\/div>\n<\/p><\/div>\n<div class=\"absolute top-0 left-0 w-full h-full\">\n<div class=\"absolute w-full h-full clip-path-adsorption\">\n<div class=\"w-full h-full bg-[#5F9EA0] bg-opacity-30 rounded-full\"><\/div>\n<\/p><\/div>\n<div class=\"absolute w-full h-full clip-path-regeneration\">\n<div class=\"w-full h-full bg-[#E27D60] bg-opacity-40 rounded-full\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"absolute top-1\/4 -left-8 text-sm text-center text-[#5F9EA0]\">\n<p class=\"font-semibold\">\u5438\u9644\u533a<\/p>\n<p>(~75%)<\/p>\n<\/p><\/div>\n<div class=\"absolute bottom-1\/4 -right-8 text-sm text-center text-[#E27D60]\">\n<p class=\"font-semibold\">\u518d\u751f\u533a<\/p>\n<p>(~25%)<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/article><\/div>\n<\/section>\n<section id=\"parameters\" class=\"mb-24 scroll-mt-20\">\n<div class=\"text-center mb-12\">\n<h2 class=\"text-3xl font-bold\">\u5173\u952e\u5de5\u827a\u53c2\u6570\u7684\u5f71\u54cd<\/h2>\n<p class=\"text-gray-600 mt-2\">\u4e86\u89e3\u5e72\u71e5\u6e29\u5ea6\u3001\u9732\u70b9\u548c\u98ce\u91cf\u5982\u4f55\u5171\u540c\u51b3\u5b9a\u6700\u7ec8\u4ea7\u54c1\u8d28\u91cf\u3002<\/p>\n<\/p><\/div>\n<div class=\"bg-white p-8 rounded-xl shadow-lg\">\n<div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n<div class=\"md:col-span-1\">\n<h4 class=\"font-semibold text-lg mb-2\">\u9009\u62e9\u53c2\u6570\u8fdb\u884c\u63a2\u7d22:<\/h4>\n<div id=\"param-selector\" class=\"flex flex-col space-y-2\">\n <button data-param=\"temp\" class=\"param-btn text-left p-3 rounded-lg transition bg-gray-100\">\u5e72\u71e5\u6e29\u5ea6<\/button><br \/>\n <button data-param=\"dew\" class=\"param-btn text-left p-3 rounded-lg transition hover:bg-gray-100\">\u9732\u70b9<\/button><br \/>\n <button data-param=\"air\" class=\"param-btn text-left p-3 rounded-lg transition hover:bg-gray-100\">\u98ce\u91cf<\/button>\n <\/div>\n<\/p><\/div>\n<div class=\"md:col-span-2\">\n<h4 id=\"param-title\" class=\"font-semibold text-lg mb-2\">\u5e72\u71e5\u6e29\u5ea6<\/h4>\n<p id=\"param-desc\" class=\"text-gray-600 text-sm mb-4\">\u6e29\u5ea6\u662f\u5f71\u54cd\u5e72\u71e5\u6548\u7387\u7684\u9996\u8981\u56e0\u7d20\u3002\u5fc5\u987b\u5728\u5e72\u71e5\u6548\u7387\u548c\u6750\u6599\u5b8c\u6574\u6027\u4e4b\u95f4\u627e\u5230\u6700\u4f73\u5e73\u8861\u70b9\u3002<\/p>\n<div class=\"flex items-center space-x-4 mb-4\">\n<div id=\"quality-bar-container\" class=\"w-full bg-gray-200 rounded-full h-6\">\n<div id=\"quality-bar\" class=\"h-6 rounded-full transition-all duration-500 flex items-center justify-center text-white text-xs font-bold\" style=\"width: 90%; background-color: #4CAF50;\">\u4f18\u826f<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"flex justify-around\">\n <button data-level=\"low\" class=\"param-level-btn px-4 py-1 text-sm bg-blue-100 text-blue-800 rounded-full\">\u8bbe\u7f6e\u8fc7\u4f4e<\/button><br \/>\n <button data-level=\"optimal\" class=\"param-level-btn px-4 py-1 text-sm bg-green-100 text-green-800 rounded-full ring-2 ring-green-400\">\u8bbe\u4e3a\u6700\u4f73<\/button><br \/>\n <button data-level=\"high\" class=\"param-level-btn px-4 py-1 text-sm bg-red-100 text-red-800 rounded-full\">\u8bbe\u7f6e\u8fc7\u9ad8<\/button>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<section id=\"selection\" class=\"scroll-mt-20\">\n<div class=\"text-center mb-12\">\n<h2 class=\"text-3xl font-bold\">\u6280\u672f\u9009\u578b\u6307\u5357<\/h2>\n<p class=\"text-gray-600 mt-2\">\u6839\u636e\u60a8\u7684\u5177\u4f53\u5e94\u7528\u573a\u666f\uff0c\u9009\u62e9\u6700\u5408\u9002\u7684\u5e72\u71e5\u6280\u672f\u3002<\/p>\n<\/p><\/div>\n<div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\n<div class=\"bg-white p-8 rounded-xl shadow-lg border-l-4 border-[#5F9EA0]\">\n<h4 class=\"text-xl font-semibold mb-3\">\u4f55\u65f6\u9009\u62e9\u53cc\u5854\u5f0f\uff1f<\/h4>\n<ul class=\"space-y-3 text-gray-700 list-disc list-inside\">\n<li><strong>\u901a\u7528\u6ce8\u5851\u573a\u666f\uff1a<\/strong> \u5bf9\u4e8e\u975e\u8fde\u7eed\u751f\u4ea7\u6216\u5bf9\u9732\u70b9\u7a33\u5b9a\u6027\u8981\u6c42\u5e76\u975e\u6781\u81f4\u7684\u5e94\u7528\uff0c\u53cc\u5854\u5f0f\u6280\u672f\u6210\u719f\u53ef\u9760\uff0c\u6027\u4ef7\u6bd4\u9ad8\u3002<\/li>\n<li><strong>\u9884\u7b97\u6709\u9650\uff1a<\/strong> \u521d\u59cb\u6295\u8d44\u6210\u672c\u76f8\u5bf9\u8f83\u4f4e\uff0c\u4e3a\u9884\u7b97\u654f\u611f\u578b\u9879\u76ee\u63d0\u4f9b\u4e86\u7ecf\u6d4e\u7684\u89e3\u51b3\u65b9\u6848\u3002<\/li>\n<li><strong>\u7075\u6d3b\u7684\u80fd\u8017\u9009\u62e9\uff1a<\/strong> \u63d0\u4f9b\u4ece\u65e0\u70ed\u5230\u70ed\u56de\u6536\u7b49\u591a\u79cd\u518d\u751f\u65b9\u5f0f\uff0c\u53ef\u6839\u636e\u5de5\u5382\u7684\u80fd\u6e90\u914d\u7f6e\u7075\u6d3b\u9009\u62e9\u3002<\/li>\n<\/ul><\/div>\n<div class=\"bg-white p-8 rounded-xl shadow-lg border-l-4 border-[#E27D60]\">\n<h4 class=\"text-xl font-semibold mb-3\">\u4f55\u65f6\u9009\u62e9\u8f6c\u8f6e\u5f0f\uff1f<\/h4>\n<ul class=\"space-y-3 text-gray-700 list-disc list-inside\">\n<li><strong>\u9ad8\u7cbe\u5ea6\/\u9ad8\u8d28\u91cf\u5e94\u7528\uff1a<\/strong> \u5bf9\u4e8e\u5149\u5b66\u7ea7\u3001\u533b\u7597\u7ea7\u4ea7\u54c1\uff0c\u5176\u6301\u7eed\u7a33\u5b9a\u7684\u4f4e\u9732\u70b9\u8f93\u51fa\u662f\u8d28\u91cf\u7684\u6839\u672c\u4fdd\u969c\u3002<\/li>\n<li><strong>\u5927\u89c4\u6a21\u8fde\u7eed\u751f\u4ea7\uff1a<\/strong> \u57287×24\u5c0f\u65f6\u4e0d\u95f4\u65ad\u7684\u751f\u4ea7\u7ebf\u4e0a\uff0c\u5176\u65e0\u5207\u6362\u7684\u7a33\u5b9a\u6027\u4f18\u52bf\u66f4\u4e3a\u7a81\u51fa\u3002<\/li>\n<li><strong>\u5173\u6ce8\u957f\u671f\u8fd0\u8425\u6210\u672c\uff1a<\/strong> \u867d\u7136\u521d\u6295\u8f83\u9ad8\uff0c\u4f46\u5176\u4f4e\u80fd\u8017\u3001\u957f\u5bff\u547d\u3001\u65e0\u7c89\u5c18\u548c\u4f4e\u7ef4\u62a4\u7684\u7279\u70b9\uff0c\u4f7f\u5176\u957f\u671f\u603b\u62e5\u6709\u6210\u672c\u66f4\u4f4e\u3002<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<p> <\/main><\/p>\n<footer class=\"bg-white mt-24\">\n<div class=\"container mx-auto px-6 py-6 text-center text-gray-500 text-sm\">\n<p>© 2025 PET\u5e72\u71e5\u673a\u6280\u672f\u4ea4\u4e92\u5f0f\u6307\u5357\u3002\u5185\u5bb9\u4ec5\u4f9b\u53c2\u8003\u5b66\u4e60\u3002<\/p>\n<\/p><\/div>\n<\/footer>\n<p> <script>\n document.addEventListener('DOMContentLoaded', () => {\n const data = {\n comparison: {\n labels: ['\u9732\u70b9\u7a33\u5b9a\u6027', '\u80fd\u8017\u6548\u7387', '\u7ef4\u62a4\u7b80\u6613\u5ea6', '\u521d\u59cb\u6295\u8d44', '\u5360\u5730\u9762\u79ef', '\u65e0\u5c18\u6027'],\n twinTower: {\n name: '\u53cc\u5854\u5f0f',\n values: [3, 3, 4, 5, 3, 3],\n color: 'rgba(95, 158, 160, 0.5)',\n borderColor: 'rgb(95, 158, 160)',\n },\n rotor: {\n name: '\u8f6c\u8f6e\u5f0f',\n values: [5, 4, 5, 3, 4, 5],\n color: 'rgba(226, 125, 96, 0.5)',\n borderColor: 'rgb(226, 125, 96)',\n },\n details: [\n { title: '\u9732\u70b9\u7a33\u5b9a\u6027', icon: '\ud83c\udf21\ufe0f', text: '\u8f6c\u8f6e\u5f0f\u56e0\u8fde\u7eed\u5de5\u4f5c\u65e0\u5207\u6362\uff0c\u9732\u70b9\u6781\u4e3a\u7a33\u5b9a\u3002\u53cc\u5854\u5f0f\u5728\u5207\u6362\u65f6\u6709\u5fae\u5c0f\u6ce2\u52a8\u3002' },\n { title: '\u80fd\u8017\u6548\u7387', icon: '\u26a1', text: '\u8f6c\u8f6e\u5f0f\u901a\u5e38\u80fd\u6548\u66f4\u9ad8\u3002\u53cc\u5854\u5f0f\u80fd\u8017\u53d6\u51b3\u4e8e\u518d\u751f\u65b9\u5f0f\uff0c\u70ed\u56de\u6536\u5f0f\u80fd\u6548\u4e5f\u5f88\u9ad8\u3002' },\n { title: '\u7ef4\u62a4\u7b80\u6613\u5ea6', icon: '\ud83d\udee0\ufe0f', text: '\u8f6c\u8f6e\u5f0f\u51e0\u4e4e\u65e0\u9700\u66f4\u6362\u5e72\u71e5\u5242\uff0c\u7ef4\u62a4\u5c11\u3002\u53cc\u5854\u5f0f\u9700\u5b9a\u671f\u68c0\u67e5\u9600\u95e8\u548c\u66f4\u6362\u5206\u5b50\u7b5b\u3002' },\n { title: '\u521d\u59cb\u6295\u8d44', icon: '\ud83d\udcb0', text: '\u53cc\u5854\u5f0f\u901a\u5e38\u521d\u59cb\u6295\u8d44\u8f83\u4f4e\uff0c\u800c\u8f6c\u8f6e\u5f0f\u56e0\u5176\u7cbe\u5bc6\u7ed3\u6784\u6210\u672c\u66f4\u9ad8\u3002' },\n { title: '\u5360\u5730\u9762\u79ef', icon: '\ud83c\udfe0', text: '\u8f6c\u8f6e\u5f0f\u8bbe\u8ba1\u66f4\u7d27\u51d1\uff0c\u96c6\u6210\u5ea6\u9ad8\u3002\u53cc\u5854\u5f0f\u56e0\u6709\u4e24\u4e2a\u5854\u4f53\uff0c\u5360\u5730\u76f8\u5bf9\u8f83\u5927\u3002' },\n { title: '\u65e0\u5c18\u6027', icon: '\ud83c\udf43', text: '\u8f6c\u8f6e\u5f0f\u4e3a\u56fa\u6001\u8702\u7a9d\u7ed3\u6784\uff0c\u65e0\u7c89\u5c18\u3002\u53cc\u5854\u5f0f\u7684\u9897\u7c92\u72b6\u5206\u5b50\u7b5b\u53ef\u80fd\u4ea7\u751f\u7c89\u5c18\u3002' }\n ]\n },\n parameters: {\n temp: {\n title: '\u5e72\u71e5\u6e29\u5ea6',\n desc: '\u6e29\u5ea6\u662f\u5f71\u54cd\u5e72\u71e5\u6548\u7387\u7684\u9996\u8981\u56e0\u7d20\u3002\u5fc5\u987b\u5728\u5e72\u71e5\u6548\u7387\u548c\u6750\u6599\u5b8c\u6574\u6027\u4e4b\u95f4\u627e\u5230\u6700\u4f73\u5e73\u8861\u70b9\u3002',\n levels: {\n low: { quality: 50, text: '\u6548\u7387\u4f4e\u4e0b', color: '#FBBF24' },\n optimal: { quality: 95, text: '\u4f18\u826f', color: '#4CAF50' },\n high: { quality: 40, text: '\u6750\u6599\u964d\u89e3', color: '#EF4444' }\n }\n },\n dew: {\n title: '\u9732\u70b9',\n desc: '\u9732\u70b9\u662f\u8861\u91cf\u5e72\u71e5\u7a7a\u6c14\u542b\u6e7f\u91cf\u7684\u6838\u5fc3\u6307\u6807\u3002\u9732\u70b9\u8d8a\u4f4e\uff0c\u5e72\u71e5\u80fd\u529b\u8d8a\u5f3a\u3002',\n levels: {\n low: { quality: 98, text: '\u6781\u4f73', color: '#4CAF50' },\n optimal: { quality: 90, text: '\u4f18\u826f', color: '#4CAF50' },\n high: { quality: 30, text: '\u5e72\u71e5\u4e0d\u8db3', color: '#EF4444' }\n }\n },\n air: {\n title: '\u98ce\u91cf',\n desc: '\u98ce\u91cf\u9700\u9002\u4e2d\uff0c\u786e\u4fdd\u70ed\u7a7a\u6c14\u5747\u5300\u7a7f\u900f\u6240\u6709\u7269\u6599\uff0c\u540c\u65f6\u907f\u514d\u4ea7\u751f\u8fc7\u591a\u7c89\u5c18\u6216\u201c\u77ed\u8def\u201d\u73b0\u8c61\u3002',\n levels: {\n low: { quality: 60, text: '\u5e72\u71e5\u4e0d\u5747', color: '#FBBF24' },\n optimal: { quality: 92, text: '\u4f18\u826f', color: '#4CAF50' },\n high: { quality: 70, text: '\u4ea7\u751f\u7c89\u5c18', color: '#FBBF24' }\n }\n }\n }\n };<\/p>\n<p> function initComparisonChart() {\n const canvas = document.getElementById('techComparisonChart');\n \/\/ \u786e\u4fdd canvas \u5143\u7d20\u5b58\u5728\u540e\u518d\u8fdb\u884c\u64cd\u4f5c\uff0c\u8fd9\u53ef\u4ee5\u907f\u514d\u56e0\u9875\u9762\u52a0\u8f7d\u95ee\u9898\u5bfc\u81f4\u7684\u811a\u672c\u4e2d\u65ad\n if (!canvas) {\n console.error('Error: Chart canvas element with ID \"techComparisonChart\" not found!');\n return;\n }\n const ctx = canvas.getContext('2d');\n if (!ctx) {\n console.error('Error: Could not get 2D context for canvas!');\n return;\n }<\/p>\n<p> new Chart(ctx, {\n type: 'radar',\n data: {\n labels: data.comparison.labels,\n datasets: [{\n label: data.comparison.twinTower.name,\n data: data.comparison.twinTower.values,\n backgroundColor: data.comparison.twinTower.color,\n borderColor: data.comparison.twinTower.borderColor,\n borderWidth: 2,\n pointBackgroundColor: data.comparison.twinTower.borderColor,\n }, {\n label: data.comparison.rotor.name,\n data: data.comparison.rotor.values,\n backgroundColor: data.comparison.rotor.color,\n borderColor: data.comparison.rotor.borderColor,\n borderWidth: 2,\n pointBackgroundColor: data.comparison.rotor.borderColor,\n }]\n },\n options: {\n maintainAspectRatio: false,\n scales: {\n r: {\n angleLines: {\n color: '#E5E7EB'\n },\n grid: {\n color: '#E5E7EB'\n },\n pointLabels: {\n font: {\n size: 13,\n family: \"'Noto Sans SC', sans-serif\"\n },\n color: '#4A4A4A'\n },\n ticks: {\n beginAtZero: true,\n max: 5,\n stepSize: 1,\n backdropColor: 'rgba(0,0,0,0)',\n color: '#9CA3AF'\n }\n }\n },\n plugins: {\n legend: {\n position: 'top',\n labels: {\n font: {\n size: 14,\n family: \"'Noto Sans SC', sans-serif\"\n }\n }\n },\n tooltip: {\n callbacks: {\n label: function(context) {\n let label = context.dataset.label || '';\n if (label) {\n label += ': ';\n }\n label += context.raw;\n return label;\n }\n }\n }\n }\n }\n });<\/p>\n<p> const detailsContainer = document.getElementById('comparison-details');\n data.comparison.details.forEach(item => {\n const card = document.createElement('div');\n card.className = 'p-4 bg-gray-50 rounded-lg cursor-pointer transition-all duration-300 border-2 border-transparent';\n card.innerHTML = `<\/p>\n<div class=\"text-3xl mb-2\">${item.icon}<\/div>\n<h4 class=\"font-semibold text-gray-800\">${item.title}<\/h4>\n<p class=\"text-xs text-gray-500 mt-1 hidden\">${item.text}<\/p>\n<p> `;\n card.addEventListener('click', () => {\n document.querySelectorAll('#comparison-details > div').forEach(c => {\n c.classList.remove('card-active');\n c.querySelector('p').classList.add('hidden');\n });\n card.classList.add('card-active');\n card.querySelector('p').classList.remove('hidden');\n });\n detailsContainer.appendChild(card);\n });\n detailsContainer.firstChild.click();\n }<\/p>\n<p> function initTowerAnimation() {\n const switchBtn = document.getElementById('switch-towers-btn');\n const towerA = document.getElementById('towerA').querySelector('div');\n const towerB = document.getElementById('towerB').querySelector('div');\n const statusA = document.getElementById('statusA');\n const statusB = document.getElementById('statusB');<\/p>\n<p> switchBtn.addEventListener('click', () => {\n const colorA = towerA.style.backgroundColor;\n const colorB = towerB.style.backgroundColor;\n const textA = statusA.textContent;\n const textB = statusB.textContent;<\/p>\n<p> towerA.style.backgroundColor = colorB;\n towerB.style.backgroundColor = colorA;\n towerA.classList.toggle('bg-[#5F9EA0]');\n towerA.classList.toggle('bg-[#E27D60]');\n towerB.classList.toggle('bg-[#5F9EA0]');\n towerB.classList.toggle('bg-[#E27D60]');<\/p>\n<p> statusA.textContent = textB;\n statusB.textContent = textA;\n statusA.classList.toggle('text-[#5F9EA0]');\n statusA.classList.toggle('text-[#E27D60]');\n statusB.classList.toggle('text-[#5F9EA0]');\n statusB.classList.toggle('text-[#E27D60]');\n });\n }<\/p>\n<p> function initParametersDashboard() {\n const paramBtns = document.querySelectorAll('.param-btn');\n const levelBtns = document.querySelectorAll('.param-level-btn');\n const titleEl = document.getElementById('param-title');\n const descEl = document.getElementById('param-desc');\n const qualityBar = document.getElementById('quality-bar');\n let currentParam = 'temp';<\/p>\n<p> function updateParamDisplay(paramKey) {\n const paramData = data.parameters[paramKey];\n titleEl.textContent = paramData.title;\n descEl.textContent = paramData.desc;\n updateLevelDisplay(paramKey, 'optimal');\n paramBtns.forEach(btn => {\n if (btn.dataset.param === paramKey) {\n btn.classList.add('bg-gray-100');\n btn.classList.remove('hover:bg-gray-100');\n } else {\n btn.classList.remove('bg-gray-100');\n btn.classList.add('hover:bg-gray-100');\n }\n });\n }<\/p>\n<p> function updateLevelDisplay(paramKey, levelKey) {\n const levelData = data.parameters[paramKey].levels[levelKey];\n qualityBar.style.width = `${levelData.quality}%`;\n qualityBar.style.backgroundColor = levelData.color;\n qualityBar.textContent = levelData.text;\n levelBtns.forEach(btn => {\n if (btn.dataset.level === levelKey) {\n btn.classList.add('ring-2', 'ring-green-400');\n } else {\n btn.classList.remove('ring-2', 'ring-green-400');\n }\n });\n }<\/p>\n<p> paramBtns.forEach(btn => {\n btn.addEventListener('click', () => {\n currentParam = btn.dataset.param;\n updateParamDisplay(currentParam);\n });\n });<\/p>\n<p> levelBtns.forEach(btn => {\n btn.addEventListener('click', () => {\n const level = btn.dataset.level;\n updateLevelDisplay(currentParam, level);\n });\n });<\/p>\n<p> updateParamDisplay('temp');\n }<\/p>\n<p> function initNav() {\n const menuBtn = document.getElementById('menu-btn');\n const mobileMenu = document.getElementById('mobile-menu');\n menuBtn.addEventListener('click', () => {\n mobileMenu.classList.toggle('hidden');\n });<\/p>\n<p> const sections = document.querySelectorAll('section');\n const navLinks = document.querySelectorAll('.nav-link');<\/p>\n<p> window.addEventListener('scroll', () => {\n let current = '';\n sections.forEach(section => {\n const sectionTop = section.offsetTop;\n if (pageYOffset >= sectionTop - 100) {\n current = section.getAttribute('id');\n }\n });<\/p>\n<p> navLinks.forEach(link => {\n link.classList.remove('active-nav');\n if (link.getAttribute('href').includes(current)) {\n link.classList.add('active-nav');\n }\n });\n });\n }<\/p>\n<p> initComparisonChart();\n initTowerAnimation();\n initParametersDashboard();\n initNav();\n });\n <\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p class=\"qua-blog-post-description\">PET\u5e72\u71e5\u673a\u6280\u672f\u4ea4\u4e92\u5f0f\u6307\u5357 PET\u5e72\u71e5\u6280\u672f\u6307\u5357 \u6280\u672f\u5bf9\u6bd4 \u5de5\u4f5c\u539f\u7406 \u5173\u952e\u53c2\u6570 \u9009\u578b\u6307\u5357 \u6280\u672f\u5bf9\u6bd4 \u5de5\u4f5c\u539f\u7406 \u5173 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"epkb_post_type_1_category":[14],"epkb_post_type_1_tag":[],"class_list":["post-1414","epkb_post_type_1","type-epkb_post_type_1","status-publish","hentry","epkb_post_type_1_category-injection-molding-equipment"],"_links":{"self":[{"href":"https:\/\/www.laoni.work\/index.php?rest_route=\/wp\/v2\/epkb_post_type_1\/1414","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.laoni.work\/index.php?rest_route=\/wp\/v2\/epkb_post_type_1"}],"about":[{"href":"https:\/\/www.laoni.work\/index.php?rest_route=\/wp\/v2\/types\/epkb_post_type_1"}],"author":[{"embeddable":true,"href":"https:\/\/www.laoni.work\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.laoni.work\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1414"}],"version-history":[{"count":2,"href":"https:\/\/www.laoni.work\/index.php?rest_route=\/wp\/v2\/epkb_post_type_1\/1414\/revisions"}],"predecessor-version":[{"id":1416,"href":"https:\/\/www.laoni.work\/index.php?rest_route=\/wp\/v2\/epkb_post_type_1\/1414\/revisions\/1416"}],"wp:attachment":[{"href":"https:\/\/www.laoni.work\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1414"}],"wp:term":[{"taxonomy":"epkb_post_type_1_category","embeddable":true,"href":"https:\/\/www.laoni.work\/index.php?rest_route=%2Fwp%2Fv2%2Fepkb_post_type_1_category&post=1414"},{"taxonomy":"epkb_post_type_1_tag","embeddable":true,"href":"https:\/\/www.laoni.work\/index.php?rest_route=%2Fwp%2Fv2%2Fepkb_post_type_1_tag&post=1414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1414,"date":"2025-08-11T22:46:41","date_gmt":"2025-08-11T14:46:41","guid":{"rendered":"https:\/\/www.laoni.work\/?post_type=epkb_post_type_1&p=1414"},"modified":"2025-08-11T23:05:22","modified_gmt":"2025-08-11T15:05:22","slug":"pet%e5%b9%b2%e7%87%a5%e6%9c%ba%e6%8a%80%e6%9c%af%e4%ba%a4%e4%ba%92%e5%bc%8f%e6%8c%87%e5%8d%97","status":"publish","type":"epkb_post_type_1","link":"https:\/\/www.laoni.work\/?epkb_post_type_1=pet%e5%b9%b2%e7%87%a5%e6%9c%ba%e6%8a%80%e6%9c%af%e4%ba%a4%e4%ba%92%e5%bc%8f%e6%8c%87%e5%8d%97","title":{"rendered":"PET\u5e72\u71e5\u673a\u6280\u672f\u4ea4\u4e92\u5f0f\u6307\u5357"},"content":{"rendered":"

\n
\n
\n
\n
\n PET\u5e72\u71e5\u673a\u6280\u672f\u4ea4\u4e92\u5f0f\u6307\u5357<\/title><br \/>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script><br \/>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap\" rel=\"stylesheet\">\n <br \/>\n <br \/>\n <br \/>\n <\/p>\n<style>\n body {\n font-family: 'Noto Sans SC', sans-serif;\n background-color: #F8F5F2;\n color: #4A4A4A;\n }\n .chart-container {\n position: relative;\n width: 100%;\n max-width: 600px;\n margin-left: auto;\n margin-right: auto;\n height: 40vh;\n max-height: 450px;\n }\n @media (max-width: 768px) {\n .chart-container {\n height: 50vh;\n max-height: 350px;\n }\n }\n .tower-pipe { transition: background-color 0.5s ease-in-out; }\n .air-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n position: absolute;\n animation: move-air 4s linear infinite;\n }\n .rotor-animation {\n animation: rotate-rotor 25s linear infinite;\n }\n @keyframes rotate-rotor {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n @keyframes move-air {\n from { offset-distance: 0%; }\n to { offset-distance: 100%; }\n }\n .nav-link {\n transition: color 0.3s, border-bottom-color 0.3s;\n }\n .nav-link:hover {\n color: #C3B091;\n }\n .active-nav {\n color: #C3B091;\n border-bottom: 2px solid #C3B091;\n }\n .card-active {\n transform: translateY(-5px);\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n border-color: #C3B091;\n }\n <\/style>\n<p><\/head><br \/>\n<body class=\"antialiased\"><\/p>\n<header class=\"bg-white\/80 backdrop-blur-md sticky top-0 z-50 shadow-sm\">\n<nav class=\"container mx-auto px-6 py-3 flex justify-between items-center\">\n<div class=\"text-xl font-bold text-gray-800\">PET\u5e72\u71e5\u6280\u672f\u6307\u5357<\/div>\n<div class=\"hidden md:flex space-x-8\">\n <a href=\"#comparison\" class=\"nav-link pb-1\">\u6280\u672f\u5bf9\u6bd4<\/a><br \/>\n <a href=\"#how-it-works\" class=\"nav-link pb-1\">\u5de5\u4f5c\u539f\u7406<\/a><br \/>\n <a href=\"#parameters\" class=\"nav-link pb-1\">\u5173\u952e\u53c2\u6570<\/a><br \/>\n <a href=\"#selection\" class=\"nav-link pb-1\">\u9009\u578b\u6307\u5357<\/a>\n <\/div>\n<div class=\"md:hidden\">\n <button id=\"menu-btn\" class=\"text-gray-800 focus:outline-none\"><br \/>\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16m-7 6h7\"><\/path><\/svg><br \/>\n <\/button>\n <\/div>\n<\/nav>\n<div id=\"mobile-menu\" class=\"hidden md:hidden\">\n <a href=\"#comparison\" class=\"block py-2 px-6 text-sm hover:bg-gray-100\">\u6280\u672f\u5bf9\u6bd4<\/a><br \/>\n <a href=\"#how-it-works\" class=\"block py-2 px-6 text-sm hover:bg-gray-100\">\u5de5\u4f5c\u539f\u7406<\/a><br \/>\n <a href=\"#parameters\" class=\"block py-2 px-6 text-sm hover:bg-gray-100\">\u5173\u952e\u53c2\u6570<\/a><br \/>\n <a href=\"#selection\" class=\"block py-2 px-6 text-sm hover:bg-gray-100\">\u9009\u578b\u6307\u5357<\/a>\n <\/div>\n<\/header>\n<p> <main class=\"container mx-auto px-6 py-12\"><\/p>\n<section id=\"intro\" class=\"text-center mb-24\">\n<h1 class=\"text-4xl md:text-5xl font-bold mb-4\">\u63a2\u7a76PET\u5e72\u71e5\u7684\u6838\u5fc3\u5965\u79d8<\/h1>\n<p class=\"text-lg text-gray-600 max-w-3xl mx-auto\">\n PET\u6811\u8102\u5177\u6709\u5f88\u5f3a\u7684\u5438\u6e7f\u6027\u3002\u5982\u679c\u5728\u6ce8\u5851\u524d\u672a\u5145\u5206\u5e72\u71e5\uff0c\u5fae\u91cf\u7684\u6c34\u5206\u4f1a\u5728\u9ad8\u6e29\u4e0b\u5f15\u53d1\u6c34\u89e3\u53cd\u5e94\uff0c\u5bfc\u81f4\u6750\u6599\u6027\u80fd\u4e25\u91cd\u4e0b\u964d\uff0c\u4ea7\u751f\u6b21\u54c1\u3002\u672c\u6307\u5357\u5c06\u5e26\u60a8\u6df1\u5165\u4e86\u89e3\u884c\u4e1a\u9886\u5148\u7684\u5e72\u71e5\u6280\u672f\uff0c\u52a9\u60a8\u505a\u51fa\u660e\u667a\u51b3\u7b56\u3002\n <\/p>\n<\/section>\n<section id=\"comparison\" class=\"mb-24 scroll-mt-20\">\n<div class=\"text-center mb-12\">\n<h2 class=\"text-3xl font-bold\">\u6280\u672f\u5bf9\u6bd4\u4eea\u8868\u76d8<\/h2>\n<p class=\"text-gray-600 mt-2\">\u76f4\u89c2\u6bd4\u8f83\u53cc\u5854\u5f0f\u4e0e\u8f6c\u8f6e\u5f0f\u5e72\u71e5\u673a\u7684\u5173\u952e\u6027\u80fd\u6307\u6807\u3002<\/p>\n<\/p><\/div>\n<div class=\"bg-white p-4 sm:p-8 rounded-xl shadow-lg\">\n<div class=\"chart-container\">\n <canvas id=\"techComparisonChart\"><\/canvas>\n <\/div>\n<div id=\"comparison-details\" class=\"mt-8 grid grid-cols-1 md:grid-cols-3 gap-4 text-center\">\n <\/div>\n<\/p><\/div>\n<\/section>\n<section id=\"how-it-works\" class=\"mb-24 scroll-mt-20\">\n<div class=\"text-center mb-12\">\n<h2 class=\"text-3xl font-bold\">\u5de5\u4f5c\u539f\u7406\u89e3\u6790<\/h2>\n<p class=\"text-gray-600 mt-2\">\u901a\u8fc7\u4ea4\u4e92\u5f0f\u52a8\u753b\uff0c\u63a2\u7d22\u4e24\u79cd\u5e72\u71e5\u673a\u5185\u90e8\u7684\u52a8\u6001\u5de5\u4f5c\u6d41\u7a0b\u3002<\/p>\n<\/p><\/div>\n<div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12\">\n<article class=\"bg-white p-6 rounded-xl shadow-lg\">\n<h3 class=\"text-2xl font-semibold mb-4 text-center text-[#5F9EA0]\">\u53cc\u5854\u5f0f\u5e72\u71e5\u673a\uff1a\u4ea4\u66ff\u5faa\u73af<\/h3>\n<p class=\"text-gray-600 mb-6 text-sm\">\n \u53cc\u5854\u5f0f\u5e72\u71e5\u673a\u901a\u8fc7\u4e24\u4e2a\u88c5\u6ee1\u5206\u5b50\u7b5b\u7684\u5438\u9644\u5854\u4ea4\u66ff\u5de5\u4f5c\uff0c\u4e00\u4e2a\u8fdb\u884c\u5438\u9644\u9664\u6e7f\uff0c\u53e6\u4e00\u4e2a\u5219\u8fdb\u884c\u52a0\u70ed\u518d\u751f\uff0c\u4ece\u800c\u5b9e\u73b0\u4e0d\u95f4\u65ad\u7684\u5e72\u71e5\u7a7a\u6c14\u4f9b\u5e94\u3002\u5176\u6838\u5fc3\u5728\u4e8e\u9600\u95e8\u7684\u7cbe\u786e\u5207\u6362\uff0c\u4f46\u5207\u6362\u77ac\u95f4\u53ef\u80fd\u5e26\u6765\u5fae\u5c0f\u7684\u9732\u70b9\u6ce2\u52a8\u3002\n <\/p>\n<div class=\"relative h-96 bg-gray-50 rounded-lg p-4 flex justify-around items-center\">\n<div id=\"towerA\" class=\"text-center\">\n<div class=\"w-20 h-48 bg-[#5F9EA0] tower-pipe rounded-lg mx-auto flex items-center justify-center text-white font-bold\">\u5854 A<\/div>\n<div id=\"statusA\" class=\"mt-2 text-sm font-medium text-[#5F9EA0]\">\u5438\u9644\u4e2d<\/div>\n<\/p><\/div>\n<div id=\"towerB\" class=\"text-center\">\n<div class=\"w-20 h-48 bg-[#E27D60] tower-pipe rounded-lg mx-auto flex items-center justify-center text-white font-bold\">\u5854 B<\/div>\n<div id=\"statusB\" class=\"mt-2 text-sm font-medium text-[#E27D60]\">\u518d\u751f\u4e2d<\/div>\n<\/p><\/div>\n<div class=\"absolute top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2\">\n <button id=\"switch-towers-btn\" class=\"px-4 py-2 bg-[#C3B091] text-white rounded-lg shadow-md hover:bg-opacity-90 transition\"><br \/>\n \u6a21\u62df\u5207\u6362<br \/>\n <\/button>\n <\/div>\n<\/p><\/div>\n<\/article>\n<article class=\"bg-white p-6 rounded-xl shadow-lg\">\n<h3 class=\"text-2xl font-semibold mb-4 text-center text-[#E27D60]\">\u8f6c\u8f6e\u5f0f\u5e72\u71e5\u673a\uff1a\u8fde\u7eed\u7a33\u5b9a<\/h3>\n<p class=\"text-gray-600 mb-6 text-sm\">\n \u8f6c\u8f6e\u5f0f\u5e72\u71e5\u673a\u7684\u6838\u5fc3\u662f\u4e00\u4e2a\u7f13\u6162\u65cb\u8f6c\u7684\u8702\u7a9d\u72b6\u5206\u5b50\u7b5b\u8f6c\u8f6e\u3002\u8f6c\u8f6e\u88ab\u5212\u5206\u4e3a\u5438\u9644\u533a\u548c\u518d\u751f\u533a\uff0c\u901a\u8fc7\u8fde\u7eed\u65cb\u8f6c\uff0c\u540c\u6b65\u5b8c\u6210\u5438\u9644\u548c\u518d\u751f\u8fc7\u7a0b\u3002\u8fd9\u79cd\u8bbe\u8ba1\u4ece\u6839\u672c\u4e0a\u6d88\u9664\u4e86\u5207\u6362\u52a8\u4f5c\uff0c\u786e\u4fdd\u4e86\u6781\u4e3a\u7a33\u5b9a\u7684\u9732\u70b9\u8f93\u51fa\u3002\n <\/p>\n<div class=\"relative h-96 bg-gray-50 rounded-lg p-4 flex justify-center items-center\">\n<div class=\"w-64 h-64 relative\">\n<div class=\"w-full h-full border-8 border-gray-300 rounded-full flex items-center justify-center rotor-animation\">\n<div class=\"w-full h-px bg-gray-300\"><\/div>\n<div class=\"w-px h-full bg-gray-300 absolute\"><\/div>\n<div class=\"w-full h-px bg-gray-300 absolute transform rotate-45\"><\/div>\n<div class=\"w-px h-full bg-gray-300 absolute transform rotate-45\"><\/div>\n<\/p><\/div>\n<div class=\"absolute top-0 left-0 w-full h-full\">\n<div class=\"absolute w-full h-full clip-path-adsorption\">\n<div class=\"w-full h-full bg-[#5F9EA0] bg-opacity-30 rounded-full\"><\/div>\n<\/p><\/div>\n<div class=\"absolute w-full h-full clip-path-regeneration\">\n<div class=\"w-full h-full bg-[#E27D60] bg-opacity-40 rounded-full\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"absolute top-1\/4 -left-8 text-sm text-center text-[#5F9EA0]\">\n<p class=\"font-semibold\">\u5438\u9644\u533a<\/p>\n<p>(~75%)<\/p>\n<\/p><\/div>\n<div class=\"absolute bottom-1\/4 -right-8 text-sm text-center text-[#E27D60]\">\n<p class=\"font-semibold\">\u518d\u751f\u533a<\/p>\n<p>(~25%)<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/article><\/div>\n<\/section>\n<section id=\"parameters\" class=\"mb-24 scroll-mt-20\">\n<div class=\"text-center mb-12\">\n<h2 class=\"text-3xl font-bold\">\u5173\u952e\u5de5\u827a\u53c2\u6570\u7684\u5f71\u54cd<\/h2>\n<p class=\"text-gray-600 mt-2\">\u4e86\u89e3\u5e72\u71e5\u6e29\u5ea6\u3001\u9732\u70b9\u548c\u98ce\u91cf\u5982\u4f55\u5171\u540c\u51b3\u5b9a\u6700\u7ec8\u4ea7\u54c1\u8d28\u91cf\u3002<\/p>\n<\/p><\/div>\n<div class=\"bg-white p-8 rounded-xl shadow-lg\">\n<div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n<div class=\"md:col-span-1\">\n<h4 class=\"font-semibold text-lg mb-2\">\u9009\u62e9\u53c2\u6570\u8fdb\u884c\u63a2\u7d22:<\/h4>\n<div id=\"param-selector\" class=\"flex flex-col space-y-2\">\n <button data-param=\"temp\" class=\"param-btn text-left p-3 rounded-lg transition bg-gray-100\">\u5e72\u71e5\u6e29\u5ea6<\/button><br \/>\n <button data-param=\"dew\" class=\"param-btn text-left p-3 rounded-lg transition hover:bg-gray-100\">\u9732\u70b9<\/button><br \/>\n <button data-param=\"air\" class=\"param-btn text-left p-3 rounded-lg transition hover:bg-gray-100\">\u98ce\u91cf<\/button>\n <\/div>\n<\/p><\/div>\n<div class=\"md:col-span-2\">\n<h4 id=\"param-title\" class=\"font-semibold text-lg mb-2\">\u5e72\u71e5\u6e29\u5ea6<\/h4>\n<p id=\"param-desc\" class=\"text-gray-600 text-sm mb-4\">\u6e29\u5ea6\u662f\u5f71\u54cd\u5e72\u71e5\u6548\u7387\u7684\u9996\u8981\u56e0\u7d20\u3002\u5fc5\u987b\u5728\u5e72\u71e5\u6548\u7387\u548c\u6750\u6599\u5b8c\u6574\u6027\u4e4b\u95f4\u627e\u5230\u6700\u4f73\u5e73\u8861\u70b9\u3002<\/p>\n<div class=\"flex items-center space-x-4 mb-4\">\n<div id=\"quality-bar-container\" class=\"w-full bg-gray-200 rounded-full h-6\">\n<div id=\"quality-bar\" class=\"h-6 rounded-full transition-all duration-500 flex items-center justify-center text-white text-xs font-bold\" style=\"width: 90%; background-color: #4CAF50;\">\u4f18\u826f<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"flex justify-around\">\n <button data-level=\"low\" class=\"param-level-btn px-4 py-1 text-sm bg-blue-100 text-blue-800 rounded-full\">\u8bbe\u7f6e\u8fc7\u4f4e<\/button><br \/>\n <button data-level=\"optimal\" class=\"param-level-btn px-4 py-1 text-sm bg-green-100 text-green-800 rounded-full ring-2 ring-green-400\">\u8bbe\u4e3a\u6700\u4f73<\/button><br \/>\n <button data-level=\"high\" class=\"param-level-btn px-4 py-1 text-sm bg-red-100 text-red-800 rounded-full\">\u8bbe\u7f6e\u8fc7\u9ad8<\/button>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<section id=\"selection\" class=\"scroll-mt-20\">\n<div class=\"text-center mb-12\">\n<h2 class=\"text-3xl font-bold\">\u6280\u672f\u9009\u578b\u6307\u5357<\/h2>\n<p class=\"text-gray-600 mt-2\">\u6839\u636e\u60a8\u7684\u5177\u4f53\u5e94\u7528\u573a\u666f\uff0c\u9009\u62e9\u6700\u5408\u9002\u7684\u5e72\u71e5\u6280\u672f\u3002<\/p>\n<\/p><\/div>\n<div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\n<div class=\"bg-white p-8 rounded-xl shadow-lg border-l-4 border-[#5F9EA0]\">\n<h4 class=\"text-xl font-semibold mb-3\">\u4f55\u65f6\u9009\u62e9\u53cc\u5854\u5f0f\uff1f<\/h4>\n<ul class=\"space-y-3 text-gray-700 list-disc list-inside\">\n<li><strong>\u901a\u7528\u6ce8\u5851\u573a\u666f\uff1a<\/strong> \u5bf9\u4e8e\u975e\u8fde\u7eed\u751f\u4ea7\u6216\u5bf9\u9732\u70b9\u7a33\u5b9a\u6027\u8981\u6c42\u5e76\u975e\u6781\u81f4\u7684\u5e94\u7528\uff0c\u53cc\u5854\u5f0f\u6280\u672f\u6210\u719f\u53ef\u9760\uff0c\u6027\u4ef7\u6bd4\u9ad8\u3002<\/li>\n<li><strong>\u9884\u7b97\u6709\u9650\uff1a<\/strong> \u521d\u59cb\u6295\u8d44\u6210\u672c\u76f8\u5bf9\u8f83\u4f4e\uff0c\u4e3a\u9884\u7b97\u654f\u611f\u578b\u9879\u76ee\u63d0\u4f9b\u4e86\u7ecf\u6d4e\u7684\u89e3\u51b3\u65b9\u6848\u3002<\/li>\n<li><strong>\u7075\u6d3b\u7684\u80fd\u8017\u9009\u62e9\uff1a<\/strong> \u63d0\u4f9b\u4ece\u65e0\u70ed\u5230\u70ed\u56de\u6536\u7b49\u591a\u79cd\u518d\u751f\u65b9\u5f0f\uff0c\u53ef\u6839\u636e\u5de5\u5382\u7684\u80fd\u6e90\u914d\u7f6e\u7075\u6d3b\u9009\u62e9\u3002<\/li>\n<\/ul><\/div>\n<div class=\"bg-white p-8 rounded-xl shadow-lg border-l-4 border-[#E27D60]\">\n<h4 class=\"text-xl font-semibold mb-3\">\u4f55\u65f6\u9009\u62e9\u8f6c\u8f6e\u5f0f\uff1f<\/h4>\n<ul class=\"space-y-3 text-gray-700 list-disc list-inside\">\n<li><strong>\u9ad8\u7cbe\u5ea6\/\u9ad8\u8d28\u91cf\u5e94\u7528\uff1a<\/strong> \u5bf9\u4e8e\u5149\u5b66\u7ea7\u3001\u533b\u7597\u7ea7\u4ea7\u54c1\uff0c\u5176\u6301\u7eed\u7a33\u5b9a\u7684\u4f4e\u9732\u70b9\u8f93\u51fa\u662f\u8d28\u91cf\u7684\u6839\u672c\u4fdd\u969c\u3002<\/li>\n<li><strong>\u5927\u89c4\u6a21\u8fde\u7eed\u751f\u4ea7\uff1a<\/strong> \u57287×24\u5c0f\u65f6\u4e0d\u95f4\u65ad\u7684\u751f\u4ea7\u7ebf\u4e0a\uff0c\u5176\u65e0\u5207\u6362\u7684\u7a33\u5b9a\u6027\u4f18\u52bf\u66f4\u4e3a\u7a81\u51fa\u3002<\/li>\n<li><strong>\u5173\u6ce8\u957f\u671f\u8fd0\u8425\u6210\u672c\uff1a<\/strong> \u867d\u7136\u521d\u6295\u8f83\u9ad8\uff0c\u4f46\u5176\u4f4e\u80fd\u8017\u3001\u957f\u5bff\u547d\u3001\u65e0\u7c89\u5c18\u548c\u4f4e\u7ef4\u62a4\u7684\u7279\u70b9\uff0c\u4f7f\u5176\u957f\u671f\u603b\u62e5\u6709\u6210\u672c\u66f4\u4f4e\u3002<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<p> <\/main><\/p>\n<footer class=\"bg-white mt-24\">\n<div class=\"container mx-auto px-6 py-6 text-center text-gray-500 text-sm\">\n<p>© 2025 PET\u5e72\u71e5\u673a\u6280\u672f\u4ea4\u4e92\u5f0f\u6307\u5357\u3002\u5185\u5bb9\u4ec5\u4f9b\u53c2\u8003\u5b66\u4e60\u3002<\/p>\n<\/p><\/div>\n<\/footer>\n<p> <script>\n document.addEventListener('DOMContentLoaded', () => {\n const data = {\n comparison: {\n labels: ['\u9732\u70b9\u7a33\u5b9a\u6027', '\u80fd\u8017\u6548\u7387', '\u7ef4\u62a4\u7b80\u6613\u5ea6', '\u521d\u59cb\u6295\u8d44', '\u5360\u5730\u9762\u79ef', '\u65e0\u5c18\u6027'],\n twinTower: {\n name: '\u53cc\u5854\u5f0f',\n values: [3, 3, 4, 5, 3, 3],\n color: 'rgba(95, 158, 160, 0.5)',\n borderColor: 'rgb(95, 158, 160)',\n },\n rotor: {\n name: '\u8f6c\u8f6e\u5f0f',\n values: [5, 4, 5, 3, 4, 5],\n color: 'rgba(226, 125, 96, 0.5)',\n borderColor: 'rgb(226, 125, 96)',\n },\n details: [\n { title: '\u9732\u70b9\u7a33\u5b9a\u6027', icon: '\ud83c\udf21\ufe0f', text: '\u8f6c\u8f6e\u5f0f\u56e0\u8fde\u7eed\u5de5\u4f5c\u65e0\u5207\u6362\uff0c\u9732\u70b9\u6781\u4e3a\u7a33\u5b9a\u3002\u53cc\u5854\u5f0f\u5728\u5207\u6362\u65f6\u6709\u5fae\u5c0f\u6ce2\u52a8\u3002' },\n { title: '\u80fd\u8017\u6548\u7387', icon: '\u26a1', text: '\u8f6c\u8f6e\u5f0f\u901a\u5e38\u80fd\u6548\u66f4\u9ad8\u3002\u53cc\u5854\u5f0f\u80fd\u8017\u53d6\u51b3\u4e8e\u518d\u751f\u65b9\u5f0f\uff0c\u70ed\u56de\u6536\u5f0f\u80fd\u6548\u4e5f\u5f88\u9ad8\u3002' },\n { title: '\u7ef4\u62a4\u7b80\u6613\u5ea6', icon: '\ud83d\udee0\ufe0f', text: '\u8f6c\u8f6e\u5f0f\u51e0\u4e4e\u65e0\u9700\u66f4\u6362\u5e72\u71e5\u5242\uff0c\u7ef4\u62a4\u5c11\u3002\u53cc\u5854\u5f0f\u9700\u5b9a\u671f\u68c0\u67e5\u9600\u95e8\u548c\u66f4\u6362\u5206\u5b50\u7b5b\u3002' },\n { title: '\u521d\u59cb\u6295\u8d44', icon: '\ud83d\udcb0', text: '\u53cc\u5854\u5f0f\u901a\u5e38\u521d\u59cb\u6295\u8d44\u8f83\u4f4e\uff0c\u800c\u8f6c\u8f6e\u5f0f\u56e0\u5176\u7cbe\u5bc6\u7ed3\u6784\u6210\u672c\u66f4\u9ad8\u3002' },\n { title: '\u5360\u5730\u9762\u79ef', icon: '\ud83c\udfe0', text: '\u8f6c\u8f6e\u5f0f\u8bbe\u8ba1\u66f4\u7d27\u51d1\uff0c\u96c6\u6210\u5ea6\u9ad8\u3002\u53cc\u5854\u5f0f\u56e0\u6709\u4e24\u4e2a\u5854\u4f53\uff0c\u5360\u5730\u76f8\u5bf9\u8f83\u5927\u3002' },\n { title: '\u65e0\u5c18\u6027', icon: '\ud83c\udf43', text: '\u8f6c\u8f6e\u5f0f\u4e3a\u56fa\u6001\u8702\u7a9d\u7ed3\u6784\uff0c\u65e0\u7c89\u5c18\u3002\u53cc\u5854\u5f0f\u7684\u9897\u7c92\u72b6\u5206\u5b50\u7b5b\u53ef\u80fd\u4ea7\u751f\u7c89\u5c18\u3002' }\n ]\n },\n parameters: {\n temp: {\n title: '\u5e72\u71e5\u6e29\u5ea6',\n desc: '\u6e29\u5ea6\u662f\u5f71\u54cd\u5e72\u71e5\u6548\u7387\u7684\u9996\u8981\u56e0\u7d20\u3002\u5fc5\u987b\u5728\u5e72\u71e5\u6548\u7387\u548c\u6750\u6599\u5b8c\u6574\u6027\u4e4b\u95f4\u627e\u5230\u6700\u4f73\u5e73\u8861\u70b9\u3002',\n levels: {\n low: { quality: 50, text: '\u6548\u7387\u4f4e\u4e0b', color: '#FBBF24' },\n optimal: { quality: 95, text: '\u4f18\u826f', color: '#4CAF50' },\n high: { quality: 40, text: '\u6750\u6599\u964d\u89e3', color: '#EF4444' }\n }\n },\n dew: {\n title: '\u9732\u70b9',\n desc: '\u9732\u70b9\u662f\u8861\u91cf\u5e72\u71e5\u7a7a\u6c14\u542b\u6e7f\u91cf\u7684\u6838\u5fc3\u6307\u6807\u3002\u9732\u70b9\u8d8a\u4f4e\uff0c\u5e72\u71e5\u80fd\u529b\u8d8a\u5f3a\u3002',\n levels: {\n low: { quality: 98, text: '\u6781\u4f73', color: '#4CAF50' },\n optimal: { quality: 90, text: '\u4f18\u826f', color: '#4CAF50' },\n high: { quality: 30, text: '\u5e72\u71e5\u4e0d\u8db3', color: '#EF4444' }\n }\n },\n air: {\n title: '\u98ce\u91cf',\n desc: '\u98ce\u91cf\u9700\u9002\u4e2d\uff0c\u786e\u4fdd\u70ed\u7a7a\u6c14\u5747\u5300\u7a7f\u900f\u6240\u6709\u7269\u6599\uff0c\u540c\u65f6\u907f\u514d\u4ea7\u751f\u8fc7\u591a\u7c89\u5c18\u6216\u201c\u77ed\u8def\u201d\u73b0\u8c61\u3002',\n levels: {\n low: { quality: 60, text: '\u5e72\u71e5\u4e0d\u5747', color: '#FBBF24' },\n optimal: { quality: 92, text: '\u4f18\u826f', color: '#4CAF50' },\n high: { quality: 70, text: '\u4ea7\u751f\u7c89\u5c18', color: '#FBBF24' }\n }\n }\n }\n };<\/p>\n<p> function initComparisonChart() {\n const canvas = document.getElementById('techComparisonChart');\n \/\/ \u786e\u4fdd canvas \u5143\u7d20\u5b58\u5728\u540e\u518d\u8fdb\u884c\u64cd\u4f5c\uff0c\u8fd9\u53ef\u4ee5\u907f\u514d\u56e0\u9875\u9762\u52a0\u8f7d\u95ee\u9898\u5bfc\u81f4\u7684\u811a\u672c\u4e2d\u65ad\n if (!canvas) {\n console.error('Error: Chart canvas element with ID \"techComparisonChart\" not found!');\n return;\n }\n const ctx = canvas.getContext('2d');\n if (!ctx) {\n console.error('Error: Could not get 2D context for canvas!');\n return;\n }<\/p>\n<p> new Chart(ctx, {\n type: 'radar',\n data: {\n labels: data.comparison.labels,\n datasets: [{\n label: data.comparison.twinTower.name,\n data: data.comparison.twinTower.values,\n backgroundColor: data.comparison.twinTower.color,\n borderColor: data.comparison.twinTower.borderColor,\n borderWidth: 2,\n pointBackgroundColor: data.comparison.twinTower.borderColor,\n }, {\n label: data.comparison.rotor.name,\n data: data.comparison.rotor.values,\n backgroundColor: data.comparison.rotor.color,\n borderColor: data.comparison.rotor.borderColor,\n borderWidth: 2,\n pointBackgroundColor: data.comparison.rotor.borderColor,\n }]\n },\n options: {\n maintainAspectRatio: false,\n scales: {\n r: {\n angleLines: {\n color: '#E5E7EB'\n },\n grid: {\n color: '#E5E7EB'\n },\n pointLabels: {\n font: {\n size: 13,\n family: \"'Noto Sans SC', sans-serif\"\n },\n color: '#4A4A4A'\n },\n ticks: {\n beginAtZero: true,\n max: 5,\n stepSize: 1,\n backdropColor: 'rgba(0,0,0,0)',\n color: '#9CA3AF'\n }\n }\n },\n plugins: {\n legend: {\n position: 'top',\n labels: {\n font: {\n size: 14,\n family: \"'Noto Sans SC', sans-serif\"\n }\n }\n },\n tooltip: {\n callbacks: {\n label: function(context) {\n let label = context.dataset.label || '';\n if (label) {\n label += ': ';\n }\n label += context.raw;\n return label;\n }\n }\n }\n }\n }\n });<\/p>\n<p> const detailsContainer = document.getElementById('comparison-details');\n data.comparison.details.forEach(item => {\n const card = document.createElement('div');\n card.className = 'p-4 bg-gray-50 rounded-lg cursor-pointer transition-all duration-300 border-2 border-transparent';\n card.innerHTML = `<\/p>\n<div class=\"text-3xl mb-2\">${item.icon}<\/div>\n<h4 class=\"font-semibold text-gray-800\">${item.title}<\/h4>\n<p class=\"text-xs text-gray-500 mt-1 hidden\">${item.text}<\/p>\n<p> `;\n card.addEventListener('click', () => {\n document.querySelectorAll('#comparison-details > div').forEach(c => {\n c.classList.remove('card-active');\n c.querySelector('p').classList.add('hidden');\n });\n card.classList.add('card-active');\n card.querySelector('p').classList.remove('hidden');\n });\n detailsContainer.appendChild(card);\n });\n detailsContainer.firstChild.click();\n }<\/p>\n<p> function initTowerAnimation() {\n const switchBtn = document.getElementById('switch-towers-btn');\n const towerA = document.getElementById('towerA').querySelector('div');\n const towerB = document.getElementById('towerB').querySelector('div');\n const statusA = document.getElementById('statusA');\n const statusB = document.getElementById('statusB');<\/p>\n<p> switchBtn.addEventListener('click', () => {\n const colorA = towerA.style.backgroundColor;\n const colorB = towerB.style.backgroundColor;\n const textA = statusA.textContent;\n const textB = statusB.textContent;<\/p>\n<p> towerA.style.backgroundColor = colorB;\n towerB.style.backgroundColor = colorA;\n towerA.classList.toggle('bg-[#5F9EA0]');\n towerA.classList.toggle('bg-[#E27D60]');\n towerB.classList.toggle('bg-[#5F9EA0]');\n towerB.classList.toggle('bg-[#E27D60]');<\/p>\n<p> statusA.textContent = textB;\n statusB.textContent = textA;\n statusA.classList.toggle('text-[#5F9EA0]');\n statusA.classList.toggle('text-[#E27D60]');\n statusB.classList.toggle('text-[#5F9EA0]');\n statusB.classList.toggle('text-[#E27D60]');\n });\n }<\/p>\n<p> function initParametersDashboard() {\n const paramBtns = document.querySelectorAll('.param-btn');\n const levelBtns = document.querySelectorAll('.param-level-btn');\n const titleEl = document.getElementById('param-title');\n const descEl = document.getElementById('param-desc');\n const qualityBar = document.getElementById('quality-bar');\n let currentParam = 'temp';<\/p>\n<p> function updateParamDisplay(paramKey) {\n const paramData = data.parameters[paramKey];\n titleEl.textContent = paramData.title;\n descEl.textContent = paramData.desc;\n updateLevelDisplay(paramKey, 'optimal');\n paramBtns.forEach(btn => {\n if (btn.dataset.param === paramKey) {\n btn.classList.add('bg-gray-100');\n btn.classList.remove('hover:bg-gray-100');\n } else {\n btn.classList.remove('bg-gray-100');\n btn.classList.add('hover:bg-gray-100');\n }\n });\n }<\/p>\n<p> function updateLevelDisplay(paramKey, levelKey) {\n const levelData = data.parameters[paramKey].levels[levelKey];\n qualityBar.style.width = `${levelData.quality}%`;\n qualityBar.style.backgroundColor = levelData.color;\n qualityBar.textContent = levelData.text;\n levelBtns.forEach(btn => {\n if (btn.dataset.level === levelKey) {\n btn.classList.add('ring-2', 'ring-green-400');\n } else {\n btn.classList.remove('ring-2', 'ring-green-400');\n }\n });\n }<\/p>\n<p> paramBtns.forEach(btn => {\n btn.addEventListener('click', () => {\n currentParam = btn.dataset.param;\n updateParamDisplay(currentParam);\n });\n });<\/p>\n<p> levelBtns.forEach(btn => {\n btn.addEventListener('click', () => {\n const level = btn.dataset.level;\n updateLevelDisplay(currentParam, level);\n });\n });<\/p>\n<p> updateParamDisplay('temp');\n }<\/p>\n<p> function initNav() {\n const menuBtn = document.getElementById('menu-btn');\n const mobileMenu = document.getElementById('mobile-menu');\n menuBtn.addEventListener('click', () => {\n mobileMenu.classList.toggle('hidden');\n });<\/p>\n<p> const sections = document.querySelectorAll('section');\n const navLinks = document.querySelectorAll('.nav-link');<\/p>\n<p> window.addEventListener('scroll', () => {\n let current = '';\n sections.forEach(section => {\n const sectionTop = section.offsetTop;\n if (pageYOffset >= sectionTop - 100) {\n current = section.getAttribute('id');\n }\n });<\/p>\n<p> navLinks.forEach(link => {\n link.classList.remove('active-nav');\n if (link.getAttribute('href').includes(current)) {\n link.classList.add('active-nav');\n }\n });\n });\n }<\/p>\n<p> initComparisonChart();\n initTowerAnimation();\n initParametersDashboard();\n initNav();\n });\n <\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p class=\"qua-blog-post-description\">PET\u5e72\u71e5\u673a\u6280\u672f\u4ea4\u4e92\u5f0f\u6307\u5357 PET\u5e72\u71e5\u6280\u672f\u6307\u5357 \u6280\u672f\u5bf9\u6bd4 \u5de5\u4f5c\u539f\u7406 \u5173\u952e\u53c2\u6570 \u9009\u578b\u6307\u5357 \u6280\u672f\u5bf9\u6bd4 \u5de5\u4f5c\u539f\u7406 \u5173 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"epkb_post_type_1_category":[14],"epkb_post_type_1_tag":[],"class_list":["post-1414","epkb_post_type_1","type-epkb_post_type_1","status-publish","hentry","epkb_post_type_1_category-injection-molding-equipment"],"_links":{"self":[{"href":"https:\/\/www.laoni.work\/index.php?rest_route=\/wp\/v2\/epkb_post_type_1\/1414","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.laoni.work\/index.php?rest_route=\/wp\/v2\/epkb_post_type_1"}],"about":[{"href":"https:\/\/www.laoni.work\/index.php?rest_route=\/wp\/v2\/types\/epkb_post_type_1"}],"author":[{"embeddable":true,"href":"https:\/\/www.laoni.work\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.laoni.work\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1414"}],"version-history":[{"count":2,"href":"https:\/\/www.laoni.work\/index.php?rest_route=\/wp\/v2\/epkb_post_type_1\/1414\/revisions"}],"predecessor-version":[{"id":1416,"href":"https:\/\/www.laoni.work\/index.php?rest_route=\/wp\/v2\/epkb_post_type_1\/1414\/revisions\/1416"}],"wp:attachment":[{"href":"https:\/\/www.laoni.work\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1414"}],"wp:term":[{"taxonomy":"epkb_post_type_1_category","embeddable":true,"href":"https:\/\/www.laoni.work\/index.php?rest_route=%2Fwp%2Fv2%2Fepkb_post_type_1_category&post=1414"},{"taxonomy":"epkb_post_type_1_tag","embeddable":true,"href":"https:\/\/www.laoni.work\/index.php?rest_route=%2Fwp%2Fv2%2Fepkb_post_type_1_tag&post=1414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}