{"id":900,"date":"2026-01-06T10:43:05","date_gmt":"2026-01-06T02:43:05","guid":{"rendered":"https:\/\/www.bvsc.top\/?page_id=900"},"modified":"2026-01-13T14:58:12","modified_gmt":"2026-01-13T06:58:12","slug":"%e6%b2%89%e9%99%8d%e7%9b%91%e6%b5%8b1","status":"publish","type":"page","link":"https:\/\/www.bvsc.top\/index.php\/%e6%b2%89%e9%99%8d%e7%9b%91%e6%b5%8b1\/","title":{"rendered":"\u6c89\u964d\u76d1\u6d4b"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\u76ee\u5f55<\/title>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.4.0\/css\/all.min.css\" rel=\"stylesheet\">\r\n<style>\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Noto Sans SC', sans-serif;\r\n background-color: #0f172a;\r\n }\r\n .slide-container {\r\n width: 1280px;\r\n height: 720px;\r\n position: relative;\r\n background-color: #0f172a;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \/* SVG pattern background *\/\r\n .bg-grid {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-image: url(\"data:image\/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2338bdf8' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'\/%3E%3C\/g%3E%3C\/g%3E%3C\/svg%3E\");\r\n z-index: 0;\r\n }\r\n .glass-card {\r\n background: rgba(30, 41, 59, 0.6);\r\n border: 1px solid rgba(56, 189, 248, 0.1);\r\n backdrop-filter: blur(8px);\r\n transition: all 0.3s ease;\r\n }\r\n .chapter-num {\r\n font-family: 'Arial', sans-serif;\r\n color: rgba(255, 255, 255, 0.05);\r\n position: absolute;\r\n right: 10px;\r\n top: -5px;\r\n font-size: 3rem;\r\n font-weight: 900;\r\n line-height: 1;\r\n z-index: 0;\r\n pointer-events: none;\r\n }\r\n .chapter-card:hover {\r\n transform: translateY(-2px);\r\n background: rgba(30, 41, 59, 0.9);\r\n border-color: rgba(56, 189, 248, 0.5);\r\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\r\n }\r\n .chapter-card:hover .chapter-icon {\r\n transform: scale(1.1);\r\n }\r\n .page-badge {\r\n background-color: rgba(56, 189, 248, 0.15);\r\n color: #7dd3fc;\r\n font-size: 0.65rem;\r\n padding: 2px 6px;\r\n border-radius: 9999px;\r\n display: inline-block;\r\n font-weight: 600;\r\n margin-top: 4px;\r\n }\r\n .custom-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 0.6rem;\r\n height: 100%;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body style=\"\" autocomplete=\"off\">\r\n<div class=\"slide-container\">\r\n<!-- Background -->\r\n<div class=\"bg-grid\"><\/div>\r\n<div class=\"absolute top-[-100px] right-[-100px] w-[600px] h-[600px] bg-blue-900 rounded-full opacity-10 blur-3xl\"><\/div>\r\n<div class=\"absolute bottom-[-100px] left-[-100px] w-[400px] h-[400px] bg-indigo-900 rounded-full opacity-10 blur-3xl\"><\/div>\r\n<!-- Header -->\r\n<div class=\"flex items-center justify-between px-12 pt-6 pb-2 z-10\">\r\n<div>\r\n<h1 class=\"text-3xl font-bold text-white tracking-tight flex items-center\">\r\n<span class=\"text-blue-400 mr-3\">\u76ee\u5f55<\/span>\r\n<span class=\"text-xl font-light text-gray-400\">| \u667a\u80fd\u5e94\u6025 \u00b7 \u5b88\u62a4\u672a\u6765<\/span>\r\n<\/h1>\r\n<div class=\"w-16 h-1 bg-blue-500 mt-2 rounded-full\"><\/div>\r\n<\/div>\r\n<div class=\"text-gray-500 text-xs flex items-center bg-slate-800\/50 px-3 py-1 rounded-full border border-slate-700\">\r\n<i class=\"fa-solid fa-list-ul mr-2\"><\/i> 29 Pages Total\r\n <\/div>\r\n<\/div>\r\n<!-- Main Content -->\r\n<div class=\"flex flex-1 px-12 pb-6 z-10 overflow-hidden pt-2\">\r\n<!-- Left Column: Chapter Grid -->\r\n<div class=\"w-2\/3 pr-6 h-full\">\r\n<div class=\"custom-grid\">\r\n<!-- Chapter 01 -->\r\n<div class=\"glass-card chapter-card rounded-lg p-2.5 relative overflow-hidden group cursor-default flex items-center\">\r\n<div class=\"chapter-num text-3xl\">01<\/div>\r\n<div class=\"flex items-center relative z-10 w-full\">\r\n<div class=\"w-9 h-9 rounded-full bg-blue-500\/10 flex items-center justify-center mr-3 group-hover:bg-blue-500\/20 transition-colors flex-shrink-0\">\r\n<i class=\"fa-solid fa-magnifying-glass-chart text-blue-300 chapter-icon transition-transform text-base\"><\/i>\r\n<\/div>\r\n<div class=\"flex-1 min-w-0\">\r\n<div class=\"flex justify-between items-center\">\r\n<h3 class=\"text-sm font-bold text-white group-hover:text-blue-300 transition-colors truncate\">\u5730\u8d28\u707e\u5bb3\u7c7b\u578b<\/h3>\r\n<span class=\"page-badge\">P.3-4<\/span>\r\n<\/div>\r\n<p class=\"text-xs text-gray-400 mt-0.5 truncate\">\u6d1e\u5bdf\u81ea\u7136\u8109\u640f\uff1a\u6210\u56e0\u6df1\u5ea6\u5256\u6790<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Chapter 02 -->\r\n<div class=\"glass-card chapter-card rounded-lg p-2.5 relative overflow-hidden group cursor-default flex items-center\">\r\n<div class=\"chapter-num text-3xl\">02<\/div>\r\n<div class=\"flex items-center relative z-10 w-full\">\r\n<div class=\"w-9 h-9 rounded-full bg-blue-500\/10 flex items-center justify-center mr-3 group-hover:bg-blue-500\/20 transition-colors flex-shrink-0\">\r\n<i class=\"fa-solid fa-scale-unbalanced text-blue-300 chapter-icon transition-transform text-base\"><\/i>\r\n<\/div>\r\n<div class=\"flex-1 min-w-0\">\r\n<div class=\"flex justify-between items-center\">\r\n<h3 class=\"text-sm font-bold text-white group-hover:text-blue-300 transition-colors truncate\">\u7ba1\u7406\u90e8\u95e8\u7684\u5173\u6ce8<\/h3>\r\n<span class=\"page-badge\">P.5-6<\/span>\r\n<\/div>\r\n<p class=\"text-xs text-gray-400 mt-0.5 truncate\">\u4f20\u7edf\u624b\u6bb5 vs \u667a\u80fd\u6280\u672f<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Chapter 03 -->\r\n<div class=\"glass-card chapter-card rounded-lg p-2.5 relative overflow-hidden group cursor-default flex items-center\">\r\n<div class=\"chapter-num text-3xl\">03<\/div>\r\n<div class=\"flex items-center relative z-10 w-full\">\r\n<div class=\"w-9 h-9 rounded-full bg-blue-500\/10 flex items-center justify-center mr-3 group-hover:bg-blue-500\/20 transition-colors flex-shrink-0\">\r\n<i class=\"fa-solid fa-sitemap text-blue-300 chapter-icon transition-transform text-base\"><\/i>\r\n<\/div>\r\n<div class=\"flex-1 min-w-0\">\r\n<div class=\"flex justify-between items-center\">\r\n<h3 class=\"text-sm font-bold text-white group-hover:text-blue-300 transition-colors truncate\">\u89e3\u51b3\u65b9\u6848\u603b\u89c8<\/h3>\r\n<span class=\"page-badge\">P.7-8<\/span>\r\n<\/div>\r\n<p class=\"text-xs text-gray-400 mt-0.5 truncate\">\u4ece\u76d1\u6d4b\u70b9\u5230\u98ce\u9669\u573a<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Chapter 04 -->\r\n<div class=\"glass-card chapter-card rounded-lg p-2.5 relative overflow-hidden group cursor-default flex items-center\">\r\n<div class=\"chapter-num text-3xl\">04<\/div>\r\n<div class=\"flex items-center relative z-10 w-full\">\r\n<div class=\"w-9 h-9 rounded-full bg-indigo-500\/10 flex items-center justify-center mr-3 group-hover:bg-indigo-500\/20 transition-colors flex-shrink-0\">\r\n<i class=\"fa-solid fa-clapperboard text-indigo-300 chapter-icon transition-transform text-base\"><\/i>\r\n<\/div>\r\n<div class=\"flex-1 min-w-0\">\r\n<div class=\"flex justify-between items-center\">\r\n<h3 class=\"text-sm font-bold text-white group-hover:text-indigo-300 transition-colors truncate\">\u5b9e\u9645\u6848\u4f8b\u5206\u6790<\/h3>\r\n<span class=\"page-badge\" style=\"background-color: rgba(99, 102, 241, 0.15); color: #a5b4fc;\">P.9-12<\/span>\r\n<\/div>\r\n<p class=\"text-xs text-gray-400 mt-0.5 truncate\">\u821f\u66f2\/\u5546\u6d1b\/\u84dd\u7530\u590d\u76d8<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Chapter 05 -->\r\n<div class=\"glass-card chapter-card rounded-lg p-2.5 relative overflow-hidden group cursor-default flex items-center\">\r\n<div class=\"chapter-num text-3xl\">05<\/div>\r\n<div class=\"flex items-center relative z-10 w-full\">\r\n<div class=\"w-9 h-9 rounded-full bg-indigo-500\/10 flex items-center justify-center mr-3 group-hover:bg-indigo-500\/20 transition-colors flex-shrink-0\">\r\n<i class=\"fa-solid fa-microchip text-indigo-300 chapter-icon transition-transform text-base\"><\/i>\r\n<\/div>\r\n<div class=\"flex-1 min-w-0\">\r\n<div class=\"flex justify-between items-center\">\r\n<h3 class=\"text-sm font-bold text-white group-hover:text-indigo-300 transition-colors truncate\">\u6838\u5fc3\u6280\u672f\u7ec4\u6210<\/h3>\r\n<span class=\"page-badge\" style=\"background-color: rgba(99, 102, 241, 0.15); color: #a5b4fc;\">P.13-16<\/span>\r\n<\/div>\r\n<p class=\"text-xs text-gray-400 mt-0.5 truncate\">\u611f\u77e5\/\u4f20\u8f93\/AI\u5f15\u64ce<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Chapter 06 (NEW - Technical Team) -->\r\n<div class=\"glass-card chapter-card rounded-lg p-2.5 relative overflow-hidden group cursor-default flex items-center\">\r\n<div class=\"chapter-num text-3xl\">06<\/div>\r\n<div class=\"flex items-center relative z-10 w-full\">\r\n<div class=\"w-9 h-9 rounded-full bg-cyan-500\/10 flex items-center justify-center mr-3 group-hover:bg-cyan-500\/20 transition-colors flex-shrink-0\">\r\n<i class=\"fa-solid fa-users-gear text-cyan-300 chapter-icon transition-transform text-base\"><\/i>\r\n<\/div>\r\n<div class=\"flex-1 min-w-0\">\r\n<div class=\"flex justify-between items-center\">\r\n<h3 class=\"text-sm font-bold text-white group-hover:text-cyan-300 transition-colors truncate\">\u6211\u4eec\u7684\u56e2\u961f<\/h3>\r\n<span class=\"page-badge\" style=\"background-color: rgba(34, 211, 238, 0.15); color: #67e8f9;\">P.17-18<\/span>\r\n<\/div>\r\n<p class=\"text-xs text-gray-400 mt-0.5 truncate\">\u535a\u58eb\u9886\u8854 \u00b7 \u519b\u6c11\u878d\u5408\u3001\u79d1\u7814\u9662\u6240\u3001\u5f3a\u529b\u652f\u6301<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Chapter 07 (Previously 06) -->\r\n<div class=\"glass-card chapter-card rounded-lg p-2.5 relative overflow-hidden group cursor-default flex items-center\">\r\n<div class=\"chapter-num text-3xl\">07<\/div>\r\n<div class=\"flex items-center relative z-10 w-full\">\r\n<div class=\"w-9 h-9 rounded-full bg-purple-500\/10 flex items-center justify-center mr-3 group-hover:bg-purple-500\/20 transition-colors flex-shrink-0\">\r\n<i class=\"fa-solid fa-trophy text-purple-300 chapter-icon transition-transform text-base\"><\/i>\r\n<\/div>\r\n<div class=\"flex-1 min-w-0\">\r\n<div class=\"flex justify-between items-center\">\r\n<h3 class=\"text-sm font-bold text-white group-hover:text-purple-300 transition-colors truncate\">\u6838\u5fc3\u4f18\u52bf\u4e0e\u4e1a\u7ee9<\/h3>\r\n<span class=\"page-badge\" style=\"background-color: rgba(168, 85, 247, 0.15); color: #d8b4fe;\">P.19-23<\/span>\r\n<\/div>\r\n<p class=\"text-xs text-gray-400 mt-0.5 truncate\">\u5de5\u7a0b\u5316\u4ef7\u503c\u4e0e\u843d\u5730<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Chapter 08 (Previously 07) -->\r\n<div class=\"glass-card chapter-card rounded-lg p-2.5 relative overflow-hidden group cursor-default flex items-center\">\r\n<div class=\"chapter-num text-3xl\">08<\/div>\r\n<div class=\"flex items-center relative z-10 w-full\">\r\n<div class=\"w-9 h-9 rounded-full bg-purple-500\/10 flex items-center justify-center mr-3 group-hover:bg-purple-500\/20 transition-colors flex-shrink-0\">\r\n<i class=\"fa-solid fa-city text-purple-300 chapter-icon transition-transform text-base\"><\/i>\r\n<\/div>\r\n<div class=\"flex-1 min-w-0\">\r\n<div class=\"flex justify-between items-center\">\r\n<h3 class=\"text-sm font-bold text-white group-hover:text-purple-300 transition-colors truncate\">\u5e94\u7528\u573a\u666f<\/h3>\r\n<span class=\"page-badge\" style=\"background-color: rgba(168, 85, 247, 0.15); color: #d8b4fe;\">P.24-26<\/span>\r\n<\/div>\r\n<p class=\"text-xs text-gray-400 mt-0.5 truncate\">\u7535\u529b\/\u4ea4\u901a\/\u77ff\u5c71\/\u6c34\u5229<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Chapter 09 (Previously 08) -->\r\n<div class=\"glass-card chapter-card rounded-lg p-2.5 relative overflow-hidden group cursor-default flex items-center\">\r\n<div class=\"chapter-num text-3xl\">09<\/div>\r\n<div class=\"flex items-center relative z-10 w-full\">\r\n<div class=\"w-9 h-9 rounded-full bg-pink-500\/10 flex items-center justify-center mr-3 group-hover:bg-pink-500\/20 transition-colors flex-shrink-0\">\r\n<i class=\"fa-solid fa-triangle-exclamation text-pink-300 chapter-icon transition-transform text-base\"><\/i>\r\n<\/div>\r\n<div class=\"flex-1 min-w-0\">\r\n<div class=\"flex justify-between items-center\">\r\n<h3 class=\"text-sm font-bold text-white group-hover:text-pink-300 transition-colors truncate\"><p>\u6865\u6881\u9884\u8b66\u4e0e\u5e94\u6025\u63aa\u65bd<\/p>\r\n<\/h3>\r\n<span class=\"page-badge\" style=\"background-color: rgba(236, 72, 153, 0.15); color: #f9a8d4;\">P.27-28<\/span>\r\n<\/div>\r\n<p class=\"text-xs text-gray-400 mt-0.5 truncate\">\u4ea4\u901a\u5b89\u5168\u7684\u667a\u80fd\u54e8\u5175<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Future Outlook -->\r\n<div class=\"glass-card chapter-card rounded-lg p-2.5 relative overflow-hidden group cursor-default flex items-center\">\r\n<div class=\"flex items-center relative z-10 w-full\">\r\n<div class=\"w-9 h-9 rounded-full bg-rose-500\/10 flex items-center justify-center mr-3 group-hover:bg-rose-500\/20 transition-colors flex-shrink-0\">\r\n<i class=\"fa-solid fa-rocket text-rose-300 chapter-icon transition-transform text-base\"><\/i>\r\n<\/div>\r\n<div class=\"flex-1 min-w-0\">\r\n<div class=\"flex justify-between items-center\">\r\n<h3 class=\"text-sm font-bold text-white group-hover:text-rose-300 transition-colors truncate\">\u672a\u6765\u5c55\u671b<\/h3>\r\n<span class=\"page-badge\" style=\"background-color: rgba(244, 63, 94, 0.15); color: #fda4af;\">P.29<\/span>\r\n<\/div>\r\n<p class=\"text-xs text-gray-400 mt-0.5 truncate\">\u5171\u5efa\u667a\u80fd\u9632\u707e\u7f51\u7edc<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Right Column: Visual Decoration -->\r\n<div class=\"w-1\/3 h-full relative flex items-center justify-center pl-8 border-l border-gray-800\">\r\n<div class=\"relative w-full h-full flex flex-col justify-between py-6\">\r\n<!-- Step 1 -->\r\n<div class=\"flex items-start space-x-4 opacity-90 group\">\r\n<div class=\"flex flex-col items-center\">\r\n<div class=\"w-4 h-4 bg-blue-500 rounded-full shadow-[0_0_15px_rgba(59,130,246,0.5)] z-10 border-2 border-slate-900\"><\/div>\r\n<div class=\"w-0.5 h-24 bg-blue-500\/30\"><\/div>\r\n<\/div>\r\n<div class=\"mt-[-2px]\">\r\n<p class=\"text-blue-300 font-bold text-sm\">\u95ee\u9898\u4e0e\u6311\u6218<\/p>\r\n<p class=\"text-gray-500 text-xs mt-1 leading-tight\">\u707e\u5bb3\u753b\u50cf<br>\u5e02\u573a\u75db\u70b9<\/p>\r\n<\/div>\r\n<\/div>\r\n<!-- Step 2 -->\r\n<div class=\"flex items-center justify-end space-x-4 opacity-90 group\">\r\n<div class=\"text-right mt-[-5px]\">\r\n<p class=\"text-indigo-300 font-bold text-sm\">\u65b9\u6848\u4e0e\u6280\u672f<\/p>\r\n<p class=\"text-gray-500 text-xs mt-1 leading-tight\">\u6838\u5fc3\u6280\u672f<br>\u7814\u53d1\u56e2\u961f<\/p>\r\n<\/div>\r\n<div class=\"flex flex-col items-center\">\r\n<div class=\"w-0.5 h-24 bg-indigo-500\/30\"><\/div>\r\n<div class=\"w-4 h-4 bg-indigo-500 rounded-full shadow-[0_0_15px_rgba(99,102,241,0.5)] z-10 border-2 border-slate-900\"><\/div>\r\n<div class=\"w-0.5 h-24 bg-indigo-500\/30\"><\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Step 3 -->\r\n<div class=\"flex items-end space-x-4 opacity-90 group\">\r\n<div class=\"flex flex-col items-center\">\r\n<div class=\"w-0.5 h-24 bg-purple-500\/30\"><\/div>\r\n<div class=\"w-4 h-4 bg-pink-500 rounded-full shadow-[0_0_15px_rgba(236,72,153,0.5)] z-10 border-2 border-slate-900\"><\/div>\r\n<\/div>\r\n<div class=\"mb-[-2px]\">\r\n<p class=\"text-pink-300 font-bold text-sm\">\u4ef7\u503c\u4e0e\u843d\u5730<\/p>\r\n<p class=\"text-gray-500 text-xs mt-1 leading-tight\">\u707e\u96be\u5b8c\u5168\u53ef\u4ee5\u907f\u514d<\/p><p class=\"text-gray-500 text-xs mt-1 leading-tight\">\u667a\u80fd\u6280\u672f\u5168\u57df\u5e94\u7528<\/p>\r\n<\/div>\r\n<\/div>\r\n<!-- Central Visual -->\r\n<div class=\"absolute top-1\/2 left-1\/2 transform -translate-x-1\/2 -translate-y-1\/2 w-48 h-48 border border-slate-700\/50 rounded-full flex items-center justify-center\">\r\n<div class=\"w-32 h-32 border border-slate-600\/50 rounded-full flex items-center justify-center bg-slate-800\/20 backdrop-filter blur-sm\">\r\n<i class=\"fa-solid fa-shield-halved text-4xl text-slate-500\/50\"><\/i>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n<\/body><\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5d2d56e elementor-widget elementor-widget-html\" data-id=\"5d2d56e\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"zh-CN\" data-theme=\"light\" style=\"\"><head>\r\n<meta charset=\"utf-8\">\r\n<meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\">\r\n<title>\u6c89\u964d\u4e0e\u81ea\u7136\u707e\u5bb3\u5e94\u6025\u4fdd\u969c\u89e3\u51b3\u65b9\u6848<\/title>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.4.0\/css\/all.min.css\" rel=\"stylesheet\">\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/echarts@5.4.3\/dist\/echarts.min.js\"><\/script>\r\n<style>\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Noto Sans SC', sans-serif;\r\n background-color: #0f172a; \/* Fallback *\/\r\n }\r\n .slide-container {\r\n width: 1280px;\r\n height: 720px;\r\n position: relative;\r\n background-color: #0f172a;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \/* Grid Background Pattern *\/\r\n .bg-grid {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-image: \r\n linear-gradient(rgba(56, 189, 248, 0.05) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(56, 189, 248, 0.05) 1px, transparent 1px);\r\n background-size: 40px 40px;\r\n z-index: 0;\r\n }\r\n .glow-text {\r\n text-shadow: 0 0 20px rgba(56, 189, 248, 0.3);\r\n }\r\n .accent-line {\r\n width: 80px;\r\n height: 6px;\r\n background-color: #38bdf8;\r\n margin-bottom: 2rem;\r\n }\r\n .glass-panel {\r\n background: rgba(30, 41, 59, 0.4);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n backdrop-filter: blur(4px);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body style=\"\" autocomplete=\"off\">\r\n<div class=\"slide-container\" id=\"slide1\">\r\n<!-- Background Decor -->\r\n<div class=\"bg-grid\"><\/div>\r\n<!-- Decorative Circles -->\r\n<div class=\"absolute top-0 right-0 w-[600px] h-[600px] bg-blue-900 rounded-full opacity-10 blur-3xl transform translate-x-1\/3 -translate-y-1\/3\"><\/div>\r\n<div class=\"absolute bottom-0 left-0 w-[400px] h-[400px] bg-indigo-900 rounded-full opacity-10 blur-3xl transform -translate-x-1\/3 translate-y-1\/3\"><\/div>\r\n<!-- Main Content Wrapper -->\r\n<div class=\"flex flex-1 z-10 relative px-16 py-12 items-center\">\r\n<!-- Left Column: Text -->\r\n<div class=\"w-3\/5 flex flex-col justify-center pr-8\">\r\n<!-- Top Tag -->\r\n<div class=\"flex items-center space-x-2 mb-6 animate-fade-in-up\">\r\n<span class=\"px-3 py-1 bg-blue-900 text-blue-300 text-xs font-bold rounded border border-blue-700 uppercase tracking-wider\">\r\n Smart Emergency Response\r\n <\/span>\r\n<span class=\"text-gray-500 text-xs tracking-wider\">|<\/span>\r\n<span class=\"text-gray-400 text-xs tracking-wider\">2026 \u65b9\u6848\u6c47\u62a5<\/span>\r\n<\/div>\r\n<!-- Main Title -->\r\n<h1 class=\"text-6xl font-black text-white leading-tight mb-4 glow-text tracking-tight\">\u9488\u5bf9\u5730\u8d28\u6c89\u964d\u7b49\u81ea\u7136\u707e\u5bb3 <span style=\"color: rgb(96, 165, 250); font-size: 3.75rem; letter-spacing: -0.025em;\">\u5e94\u6025\u4fdd\u969c\u667a\u80fd\u9632\u6cbb\u7cfb\u7edf<\/span><\/h1>\r\n<!-- Divider -->\r\n<div class=\"accent-line rounded-full my-6\"><\/div>\r\n<!-- Subtitle -->\r\n<h2 class=\"text-2xl text-gray-300 font-light mb-10 leading-relaxed max-w-2xl\">\r\n \u6784\u5efa\u5168\u65b9\u4f4d\u3001\u667a\u80fd\u5316\u7684\u707e\u5bb3\u9884\u8b66\u4e0e\u5e94\u6025\u54cd\u5e94\u4f53\u7cfb<br>\r\n<span class=\"text-sm text-gray-400 mt-2 block\">Building a Comprehensive & Intelligent Disaster Warning System<\/span>\r\n<\/h2>\r\n<!-- Keywords Cards -->\r\n<div class=\"grid grid-cols-2 gap-4 max-w-xl\">\r\n<div class=\"glass-panel p-3 rounded flex items-center space-x-3\">\r\n<div class=\"w-8 h-8 rounded bg-blue-500\/20 flex items-center justify-center text-blue-400\">\r\n<i class=\"fa-solid fa-satellite-dish\"><\/i>\r\n<\/div>\r\n<p class=\"text-gray-200 font-medium text-sm\">\u591a\u6e90\u611f\u77e5 \u00b7 Multi-Source<\/p>\r\n<\/div>\r\n<div class=\"glass-panel p-3 rounded flex items-center space-x-3\">\r\n<div class=\"w-8 h-8 rounded bg-indigo-500\/20 flex items-center justify-center text-indigo-400\">\r\n<i class=\"fa-solid fa-cloud-arrow-up\"><\/i>\r\n<\/div>\r\n<p class=\"text-gray-200 font-medium text-sm\">\u4e91\u8fb9\u534f\u540c \u00b7 Cloud-Edge<\/p>\r\n<\/div>\r\n<div class=\"glass-panel p-3 rounded flex items-center space-x-3\">\r\n<div class=\"w-8 h-8 rounded bg-purple-500\/20 flex items-center justify-center text-purple-400\">\r\n<i class=\"fa-solid fa-brain\"><\/i>\r\n<\/div>\r\n<p class=\"text-gray-200 font-medium text-sm\">AI \u9884\u6d4b \u00b7 AI Prediction<\/p>\r\n<\/div>\r\n<div class=\"glass-panel p-3 rounded flex items-center space-x-3\">\r\n<div class=\"w-8 h-8 rounded bg-orange-500\/20 flex items-center justify-center text-orange-400\">\r\n<i class=\"fa-solid fa-stopwatch\"><\/i>\r\n<\/div>\r\n<p class=\"text-gray-200 font-medium text-sm\">\u5206\u949f\u7ea7\u9884\u8b66 \u00b7 Real-time<\/p>\r\n<\/div>\r\n<\/div>\r\n<!-- Footer Info -->\r\n<div class=\"mt-16 flex items-center text-gray-500 text-sm\">\r\n<div class=\"flex items-center mr-8\">\r\n<i class=\"fa-solid fa-building mr-2\"><\/i>\r\n<span>\u4eac\u7ef4\u667a\u7f51<\/span>\r\n<\/div>\r\n<div class=\"flex items-center\">\r\n<i class=\"fa-solid fa-calendar-days mr-2\"><\/i>\r\n<span>2026.01.04<\/span>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Right Column: Visualization -->\r\n<div class=\"w-2\/5 h-full flex items-center justify-center relative\" style=\"transform: translate(-40.6178px, -8.70383px);\">\r\n<!-- Chart Container -->\r\n<div class=\"w-[450px] h-[450px]\" id=\"radarChart\" _echarts_instance_=\"ec_1767842831201\"><div style=\"position: relative; overflow: hidden; width: 0px; height: 0px;\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" version=\"1.1\" baseProfile=\"full\" width=\"0\" height=\"0\" style=\"position:absolute;left:0;top:0;user-select:none\"><rect width=\"0\" height=\"0\" x=\"0\" y=\"0\" id=\"0\" fill=\"none\"><\/rect><g><path d=\"M0 0A0 0 0 1 1 0 0M0 0A0 0 0 1 1 0 0\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.1\"><\/path><path d=\"M0 0A0 0 0 1 1 0 0\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.2\"><\/path><path d=\"M0 0A0 0 0 1 1 0 0\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><path d=\"M0 0A0 0 0 1 1 0 0\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.6\"><\/path><path d=\"M0.5 0.5\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.3\" stroke-linecap=\"round\"><\/path><text dominant-baseline=\"central\" text-anchor=\"middle\" style=\"font-size:12px;font-family:Microsoft YaHei;font-weight:bold;\" y=\"-9\" transform=\"translate(0 -15)\" fill=\"#94a3b8\">\u6c89\u964d\u76d1\u6d4b<\/text><path d=\"M0.5 0.5\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.3\" stroke-linecap=\"round\"><\/path><text dominant-baseline=\"central\" text-anchor=\"end\" style=\"font-size:12px;font-family:Microsoft YaHei;font-weight:bold;\" x=\"-5\" transform=\"translate(-12.9904 -7.5)\" fill=\"#94a3b8\">\u6c14\u8c61\u8054\u52a8<\/text><path d=\"M0.5 0.5\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.3\" stroke-linecap=\"round\"><\/path><text dominant-baseline=\"central\" text-anchor=\"end\" style=\"font-size:12px;font-family:Microsoft YaHei;font-weight:bold;\" x=\"-5\" transform=\"translate(-12.9904 7.5)\" fill=\"#94a3b8\">\u6c34\u6587\u5206\u6790<\/text><path d=\"M0.5 0.5\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.3\" stroke-linecap=\"round\"><\/path><text dominant-baseline=\"central\" text-anchor=\"middle\" style=\"font-size:12px;font-family:Microsoft YaHei;font-weight:bold;\" y=\"9\" transform=\"translate(0 15)\" fill=\"#94a3b8\">\u7ed3\u6784\u5065\u5eb7<\/text><path d=\"M0.5 0.5\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.3\" stroke-linecap=\"round\"><\/path><text dominant-baseline=\"central\" text-anchor=\"start\" style=\"font-size:12px;font-family:Microsoft YaHei;font-weight:bold;\" x=\"5\" transform=\"translate(12.9904 7.5)\" fill=\"#94a3b8\">\u89c6\u9891AI<\/text><path d=\"M0.5 0.5\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.3\" stroke-linecap=\"round\"><\/path><text dominant-baseline=\"central\" text-anchor=\"start\" style=\"font-size:12px;font-family:Microsoft YaHei;font-weight:bold;\" x=\"5\" transform=\"translate(12.9904 -7.5)\" fill=\"#94a3b8\">\u5fae\u9707\u63a2\u6d4b<\/text><path d=\"M0 0\" fill=\"none\" stroke=\"#38bdf8\" stroke-width=\"2\" stroke-linejoin=\"round\"><\/path><path d=\"M0 0Z\" fill=\"url(#zr0-g0)\" fill-opacity=\"0.7\"><\/path><path d=\"\" fill=\"rgb(56,189,248)\" fill-opacity=\"0.1\"><\/path><path d=\"M-11 0L-17 0\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><path d=\"M-9.5263 -5.5L-14.7224 -8.5\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><path d=\"M-5.5 -9.5263L-8.5 -14.7224\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><path d=\"M0 -11L0 -17\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><path d=\"M5.5 -9.5263L8.5 -14.7224\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><path d=\"M9.5263 -5.5L14.7224 -8.5\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><path d=\"M11 0L17 0\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><path d=\"M9.5263 5.5L14.7224 8.5\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><path d=\"M5.5 9.5263L8.5 14.7224\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><path d=\"M0 11L0 17\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><path d=\"M-5.5 9.5263L-8.5 14.7224\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><path d=\"M-9.5263 5.5L-14.7224 8.5\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><path d=\"M-11 0L-17 0\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><\/g><defs><linearGradient gradientUnits=\"objectBoundingBox\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\" id=\"zr0-g0\"><stop offset=\"0%\" stop-color=\"rgb(56,189,248)\" stop-opacity=\"0.6\"><\/stop><stop offset=\"100%\" stop-color=\"rgb(56,189,248)\" stop-opacity=\"0.1\"><\/stop><\/linearGradient><\/defs><\/svg><\/div><div style=\"position: relative; overflow: hidden; width: 0px; height: 0px;\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" version=\"1.1\" baseProfile=\"full\" width=\"0\" height=\"0\" style=\"position:absolute;left:0;top:0;user-select:none\"><rect width=\"0\" height=\"0\" x=\"0\" y=\"0\" id=\"0\" fill=\"none\"><\/rect><g><path d=\"M0 0A0 0 0 1 1 0 0M0 0A0 0 0 1 1 0 0\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.1\"><\/path><path d=\"M0 0A0 0 0 1 1 0 0\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.2\"><\/path><path d=\"M0 0A0 0 0 1 1 0 0\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><path d=\"M0 0A0 0 0 1 1 0 0\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.6\"><\/path><path d=\"M0.5 0.5\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.3\" stroke-linecap=\"round\"><\/path><text dominant-baseline=\"central\" text-anchor=\"middle\" style=\"font-size:12px;font-family:Microsoft YaHei;font-weight:bold;\" y=\"-9\" transform=\"translate(0 -15)\" fill=\"#94a3b8\">\u6c89\u964d\u76d1\u6d4b<\/text><path d=\"M0.5 0.5\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.3\" stroke-linecap=\"round\"><\/path><text dominant-baseline=\"central\" text-anchor=\"end\" style=\"font-size:12px;font-family:Microsoft YaHei;font-weight:bold;\" x=\"-5\" transform=\"translate(-12.9904 -7.5)\" fill=\"#94a3b8\">\u6c14\u8c61\u8054\u52a8<\/text><path d=\"M0.5 0.5\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.3\" stroke-linecap=\"round\"><\/path><text dominant-baseline=\"central\" text-anchor=\"end\" style=\"font-size:12px;font-family:Microsoft YaHei;font-weight:bold;\" x=\"-5\" transform=\"translate(-12.9904 7.5)\" fill=\"#94a3b8\">\u6c34\u6587\u5206\u6790<\/text><path d=\"M0.5 0.5\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.3\" stroke-linecap=\"round\"><\/path><text dominant-baseline=\"central\" text-anchor=\"middle\" style=\"font-size:12px;font-family:Microsoft YaHei;font-weight:bold;\" y=\"9\" transform=\"translate(0 15)\" fill=\"#94a3b8\">\u7ed3\u6784\u5065\u5eb7<\/text><path d=\"M0.5 0.5\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.3\" stroke-linecap=\"round\"><\/path><text dominant-baseline=\"central\" text-anchor=\"start\" style=\"font-size:12px;font-family:Microsoft YaHei;font-weight:bold;\" x=\"5\" transform=\"translate(12.9904 7.5)\" fill=\"#94a3b8\">\u89c6\u9891AI<\/text><path d=\"M0.5 0.5\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.3\" stroke-linecap=\"round\"><\/path><text dominant-baseline=\"central\" text-anchor=\"start\" style=\"font-size:12px;font-family:Microsoft YaHei;font-weight:bold;\" x=\"5\" transform=\"translate(12.9904 -7.5)\" fill=\"#94a3b8\">\u5fae\u9707\u63a2\u6d4b<\/text><path d=\"M0 0\" fill=\"none\" stroke=\"#38bdf8\" stroke-width=\"2\" stroke-linejoin=\"round\"><\/path><path d=\"M0 0Z\" fill=\"url(#zr0-g0)\" fill-opacity=\"0.7\"><\/path><path d=\"\" fill=\"rgb(56,189,248)\" fill-opacity=\"0.1\"><\/path><path d=\"M-11 0L-17 0\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><path d=\"M-9.5263 -5.5L-14.7224 -8.5\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><path d=\"M-5.5 -9.5263L-8.5 -14.7224\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><path d=\"M0 -11L0 -17\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><path d=\"M5.5 -9.5263L8.5 -14.7224\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><path d=\"M9.5263 -5.5L14.7224 -8.5\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><path d=\"M11 0L17 0\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><path d=\"M9.5263 5.5L14.7224 8.5\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><path d=\"M5.5 9.5263L8.5 14.7224\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><path d=\"M0 11L0 17\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><path d=\"M-5.5 9.5263L-8.5 14.7224\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><path d=\"M-9.5263 5.5L-14.7224 8.5\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><path d=\"M-11 0L-17 0\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><\/g><defs><linearGradient gradientUnits=\"objectBoundingBox\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\" id=\"zr0-g0\"><stop offset=\"0%\" stop-color=\"rgb(56,189,248)\" stop-opacity=\"0.6\"><\/stop><stop offset=\"100%\" stop-color=\"rgb(56,189,248)\" stop-opacity=\"0.1\"><\/stop><\/linearGradient><\/defs><\/svg><\/div><div style=\"position: relative; overflow: hidden; width: 0px; height: 0px;\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" version=\"1.1\" baseProfile=\"full\" width=\"0\" height=\"0\" style=\"position:absolute;left:0;top:0;user-select:none\"><rect width=\"0\" height=\"0\" x=\"0\" y=\"0\" id=\"0\" fill=\"none\"><\/rect><g><path d=\"M0 0A0 0 0 1 1 0 0M0 0A0 0 0 1 1 0 0\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.1\"><\/path><path d=\"M0 0A0 0 0 1 1 0 0\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.2\"><\/path><path d=\"M0 0A0 0 0 1 1 0 0\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><path d=\"M0 0A0 0 0 1 1 0 0\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.6\"><\/path><path d=\"M0.5 0.5\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.3\" stroke-linecap=\"round\"><\/path><text dominant-baseline=\"central\" text-anchor=\"middle\" style=\"font-size:12px;font-family:Microsoft YaHei;font-weight:bold;\" y=\"-9\" transform=\"translate(0 -15)\" fill=\"#94a3b8\">\u6c89\u964d\u76d1\u6d4b<\/text><path d=\"M0.5 0.5\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.3\" stroke-linecap=\"round\"><\/path><text dominant-baseline=\"central\" text-anchor=\"end\" style=\"font-size:12px;font-family:Microsoft YaHei;font-weight:bold;\" x=\"-5\" transform=\"translate(-12.9904 -7.5)\" fill=\"#94a3b8\">\u6c14\u8c61\u8054\u52a8<\/text><path d=\"M0.5 0.5\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.3\" stroke-linecap=\"round\"><\/path><text dominant-baseline=\"central\" text-anchor=\"end\" style=\"font-size:12px;font-family:Microsoft YaHei;font-weight:bold;\" x=\"-5\" transform=\"translate(-12.9904 7.5)\" fill=\"#94a3b8\">\u6c34\u6587\u5206\u6790<\/text><path d=\"M0.5 0.5\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.3\" stroke-linecap=\"round\"><\/path><text dominant-baseline=\"central\" text-anchor=\"middle\" style=\"font-size:12px;font-family:Microsoft YaHei;font-weight:bold;\" y=\"9\" transform=\"translate(0 15)\" fill=\"#94a3b8\">\u7ed3\u6784\u5065\u5eb7<\/text><path d=\"M0.5 0.5\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.3\" stroke-linecap=\"round\"><\/path><text dominant-baseline=\"central\" text-anchor=\"start\" style=\"font-size:12px;font-family:Microsoft YaHei;font-weight:bold;\" x=\"5\" transform=\"translate(12.9904 7.5)\" fill=\"#94a3b8\">\u89c6\u9891AI<\/text><path d=\"M0.5 0.5\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.3\" stroke-linecap=\"round\"><\/path><text dominant-baseline=\"central\" text-anchor=\"start\" style=\"font-size:12px;font-family:Microsoft YaHei;font-weight:bold;\" x=\"5\" transform=\"translate(12.9904 -7.5)\" fill=\"#94a3b8\">\u5fae\u9707\u63a2\u6d4b<\/text><path d=\"M0 0\" fill=\"none\" stroke=\"#38bdf8\" stroke-width=\"2\" stroke-linejoin=\"round\"><\/path><path d=\"M0 0Z\" fill=\"url(#zr0-g0)\" fill-opacity=\"0.7\"><\/path><path d=\"\" fill=\"rgb(56,189,248)\" fill-opacity=\"0.1\"><\/path><path d=\"M-11 0L-17 0\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><path d=\"M-9.5263 -5.5L-14.7224 -8.5\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><path d=\"M-5.5 -9.5263L-8.5 -14.7224\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><path d=\"M0 -11L0 -17\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><path d=\"M5.5 -9.5263L8.5 -14.7224\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><path d=\"M9.5263 -5.5L14.7224 -8.5\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><path d=\"M11 0L17 0\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><path d=\"M9.5263 5.5L14.7224 8.5\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><path d=\"M5.5 9.5263L8.5 14.7224\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><path d=\"M0 11L0 17\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><path d=\"M-5.5 9.5263L-8.5 14.7224\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><path d=\"M-9.5263 5.5L-14.7224 8.5\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><path d=\"M-11 0L-17 0\" fill=\"none\" stroke=\"rgb(56,189,248)\" stroke-opacity=\"0.4\"><\/path><\/g><defs><linearGradient gradientUnits=\"objectBoundingBox\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\" id=\"zr0-g0\"><stop offset=\"0%\" stop-color=\"rgb(56,189,248)\" stop-opacity=\"0.6\"><\/stop><stop offset=\"100%\" stop-color=\"rgb(56,189,248)\" stop-opacity=\"0.1\"><\/stop><\/linearGradient><\/defs><\/svg><\/div><\/div>\r\n<!-- Floating Data Points Decoration -->\r\n<div class=\"absolute top-1\/4 right-0 glass-panel px-3 py-1 rounded text-xs text-blue-300 border-l-2 border-blue-400\">\r\n<p>InSAR \u76d1\u6d4b\u63a5\u5165<\/p>\r\n<p class=\"font-bold text-white\">99.9% \u5728\u7ebf<\/p>\r\n<\/div>\r\n<div class=\"absolute bottom-1\/4 left-0 glass-panel px-3 py-1 rounded text-xs text-orange-300 border-l-2 border-orange-400\">\r\n<p>\u5b9e\u65f6\u5f62\u53d8\u9884\u8b66<\/p>\r\n<p class=\"font-bold text-white\">0.2mm \u7cbe\u5ea6<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Bottom Logo Placeholder -->\r\n<div class=\"absolute bottom-8 right-12 opacity-50\">\r\n<div class=\"border border-gray-600 px-4 py-2 rounded text-gray-400 font-bold tracking-widest text-sm\">\r\n LOGO\r\n <\/div>\r\n<\/div>\r\n<\/div>\r\n<script>\r\n \/\/ Initialize ECharts for the abstract visualization\r\n document.addEventListener('DOMContentLoaded', function() {\r\n const chartDom = document.getElementById('radarChart');\r\n const myChart = echarts.init(chartDom, null, { renderer: 'svg' });\r\n \r\n const option = {\r\n backgroundColor: 'transparent',\r\n radar: {\r\n indicator: [\r\n { name: '\u6c89\u964d\u76d1\u6d4b', max: 100 },\r\n { name: '\u6c14\u8c61\u8054\u52a8', max: 100 },\r\n { name: '\u6c34\u6587\u5206\u6790', max: 100 },\r\n { name: '\u7ed3\u6784\u5065\u5eb7', max: 100 },\r\n { name: '\u89c6\u9891AI', max: 100 },\r\n { name: '\u5fae\u9707\u63a2\u6d4b', max: 100 }\r\n ],\r\n center: ['50%', '50%'],\r\n radius: '65%',\r\n shape: 'circle',\r\n splitNumber: 4,\r\n axisName: {\r\n color: '#94a3b8',\r\n fontSize: 12,\r\n fontWeight: 'bold',\r\n padding: [3, 5]\r\n },\r\n splitLine: {\r\n lineStyle: {\r\n color: ['rgba(56, 189, 248, 0.1)', 'rgba(56, 189, 248, 0.2)', 'rgba(56, 189, 248, 0.4)', 'rgba(56, 189, 248, 0.6)'],\r\n width: 1\r\n }\r\n },\r\n splitArea: {\r\n show: false\r\n },\r\n axisLine: {\r\n lineStyle: {\r\n color: 'rgba(56, 189, 248, 0.3)'\r\n }\r\n }\r\n },\r\n series: [\r\n {\r\n name: 'Data Source',\r\n type: 'radar',\r\n symbol: 'none',\r\n lineStyle: {\r\n width: 2,\r\n color: '#38bdf8'\r\n },\r\n areaStyle: {\r\n color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\r\n { offset: 0, color: 'rgba(56, 189, 248, 0.6)' },\r\n { offset: 1, color: 'rgba(56, 189, 248, 0.1)' }\r\n ])\r\n },\r\n data: [\r\n {\r\n value: [90, 85, 95, 80, 88, 70],\r\n name: 'Coverage'\r\n }\r\n ],\r\n \/\/ Add animation effect\r\n animationDuration: 2000,\r\n animationEasing: 'cubicOut'\r\n },\r\n {\r\n \/\/ Simulated Scanning Effect Ring\r\n type: 'gauge',\r\n radius: '85%',\r\n startAngle: 0,\r\n endAngle: 360,\r\n splitNumber: 12,\r\n axisLine: {\r\n lineStyle: {\r\n color: [[1, 'rgba(56, 189, 248, 0.1)']],\r\n width: 1\r\n }\r\n },\r\n splitLine: {\r\n length: 6,\r\n lineStyle: {\r\n color: 'rgba(56, 189, 248, 0.4)',\r\n width: 1\r\n }\r\n },\r\n axisTick: { show: false },\r\n axisLabel: { show: false },\r\n pointer: { show: false },\r\n detail: { show: false }\r\n }\r\n ]\r\n };\r\n\r\n myChart.setOption(option);\r\n });\r\n<\/script>\r\n\r\n<\/body><\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-437bb62 elementor-widget elementor-widget-html\" data-id=\"437bb62\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"zh-CN\" data-theme=\"light\" style=\"\"><head>\r\n<meta charset=\"utf-8\">\r\n<meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\">\r\n<title>\u7ae0\u8282\u5c01\u9762\uff1a\u707e\u5bb3\u6a21\u62df\u753b\u50cf<\/title>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.4.0\/css\/all.min.css\" rel=\"stylesheet\">\r\n<style>\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Noto Sans SC', sans-serif;\r\n background-color: #0f172a;\r\n }\r\n .slide-container {\r\n width: 1280px;\r\n height: 720px;\r\n position: relative;\r\n background-color: #0f172a;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \/* Grid Background Pattern *\/\r\n .bg-grid {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-image: \r\n linear-gradient(rgba(56, 189, 248, 0.05) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(56, 189, 248, 0.05) 1px, transparent 1px);\r\n background-size: 40px 40px;\r\n z-index: 0;\r\n }\r\n .chapter-number-huge {\r\n font-size: 12rem;\r\n font-weight: 900;\r\n line-height: 1;\r\n color: transparent;\r\n -webkit-text-stroke: 4px rgba(255, 255, 255, 0.1);\r\n position: absolute;\r\n left: 60px;\r\n top: 60px;\r\n z-index: 0;\r\n opacity: 0.5;\r\n }\r\n .glass-panel {\r\n background: rgba(30, 41, 59, 0.4);\r\n border-left: 6px solid #38bdf8;\r\n backdrop-filter: blur(4px);\r\n }\r\n .glow-icon {\r\n filter: drop-shadow(0 0 15px rgba(56, 189, 248, 0.6));\r\n }\r\n .terrain-line {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 300px;\r\n background: url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 1440 320\"><path fill=\"%231e293b\" fill-opacity=\"0.8\" d=\"M0,224L48,213.3C96,203,192,181,288,181.3C384,181,480,203,576,224C672,245,768,267,864,261.3C960,256,1056,224,1152,197.3C1248,171,1344,149,1392,138.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z\"><\/path><\/svg>') no-repeat bottom;\r\n background-size: cover;\r\n z-index: 1;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body style=\"\" autocomplete=\"off\">\r\n<div class=\"slide-container\">\r\n<!-- Background Grid -->\r\n<div class=\"bg-grid\"><\/div>\r\n<!-- Giant Chapter Number -->\r\n<div class=\"chapter-number-huge\">01<\/div>\r\n<!-- Decorative Background Elements -->\r\n<div class=\"absolute top-0 right-0 w-[800px] h-[800px] bg-blue-900 rounded-full opacity-10 blur-3xl transform translate-x-1\/3 -translate-y-1\/3\"><\/div>\r\n<div class=\"absolute bottom-0 left-0 w-[600px] h-[600px] bg-indigo-900 rounded-full opacity-10 blur-3xl transform -translate-x-1\/3 translate-y-1\/3\"><\/div>\r\n<!-- Terrain Decoration -->\r\n<div class=\"terrain-line\"><\/div>\r\n<!-- Main Content Area -->\r\n<div class=\"flex flex-1 z-20 items-center px-24 relative\">\r\n<div class=\"w-full flex justify-between items-center\">\r\n<!-- Left: Text Content -->\r\n<div class=\"w-3\/5 pt-20\">\r\n<div class=\"flex items-center space-x-3 mb-6\">\r\n<div class=\"h-1 w-12 bg-blue-500\"><\/div>\r\n<p class=\"text-blue-400 font-bold tracking-widest uppercase\">Chapter One<\/p>\r\n<\/div>\r\n<h1 class=\"text-7xl font-black text-white mb-8 tracking-tight leading-tight\">\u5730\u8d28\u707e\u5bb3\u7c7b\u578b<\/h1>\r\n<div class=\"glass-panel p-8 rounded-r-lg max-w-2xl\">\r\n<h2 class=\"text-3xl text-gray-200 font-light mb-4\">\u6d1e\u5bdf\u81ea\u7136\u7684\u8109\u640f<\/h2>\r\n<p class=\"text-gray-400 text-lg leading-relaxed\">\r\n \u7cbe\u51c6\u611f\u77e5\u6ce5\u77f3\u6d41\u3001\u6ed1\u5761\u3001\u5d29\u584c\u3001\u5c3e\u77ff\u5e93\u5931\u7a33\u4e0e\u91c7\u7a7a\u533a\u6c89\u9677\u3002<br>\r\n \u7528\u6570\u636e\u523b\u753b\u5f62\u6210\u673a\u5236\u3001\u89e6\u53d1\u6761\u4ef6\u3001\u6f14\u5316\u8def\u5f84\u4e0e\u9884\u8b66\u9608\u503c\u3002\r\n <\/p>\r\n<\/div>\r\n<!-- Key Points -->\r\n<div class=\"flex space-x-8 mt-12\">\r\n<div class=\"flex flex-col items-center\">\r\n<div class=\"w-12 h-12 rounded-full bg-gray-800 border border-gray-600 flex items-center justify-center mb-3\">\r\n<i class=\"fa-solid fa-mountain text-blue-400 text-xl\"><\/i>\r\n<\/div>\r\n<p class=\"text-gray-400 text-sm\">\u5730\u8d28\u5f62\u53d8<\/p>\r\n<\/div>\r\n<div class=\"flex flex-col items-center\">\r\n<div class=\"w-12 h-12 rounded-full bg-gray-800 border border-gray-600 flex items-center justify-center mb-3\">\r\n<i class=\"fa-solid fa-cloud-showers-heavy text-blue-400 text-xl\"><\/i>\r\n<\/div>\r\n<p class=\"text-gray-400 text-sm\">\u6c14\u8c61\u8bf1\u56e0<\/p>\r\n<\/div>\r\n<div class=\"flex flex-col items-center\">\r\n<div class=\"w-12 h-12 rounded-full bg-gray-800 border border-gray-600 flex items-center justify-center mb-3\">\r\n<i class=\"fa-solid fa-house-crack text-blue-400 text-xl\"><\/i>\r\n<\/div>\r\n<p class=\"text-gray-400 text-sm\">\u7ed3\u6784\u54cd\u5e94<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Right: Visual Icon\/Graphic -->\r\n<div class=\"w-2\/5 flex justify-center items-center\">\r\n<div class=\"relative w-80 h-80\">\r\n<div class=\"absolute inset-0 bg-blue-500 rounded-full opacity-5 blur-xl animate-pulse\"><\/div>\r\n<div class=\"absolute inset-0 border-2 border-dashed border-blue-500\/30 rounded-full animate-spin-slow\" style=\"animation-duration: 20s;\"><\/div>\r\n<div class=\"absolute inset-4 border border-blue-500\/20 rounded-full\"><\/div>\r\n<!-- Central Icon -->\r\n<div class=\"absolute inset-0 flex items-center justify-center\">\r\n<i class=\"fa-solid fa-magnifying-glass-chart text-9xl text-white opacity-90 glow-icon\"><\/i>\r\n<\/div>\r\n<!-- Floating Satellite Icons -->\r\n<div class=\"absolute top-0 left-1\/2 transform -translate-x-1\/2 -translate-y-4 bg-gray-900 border border-blue-500\/50 p-2 rounded-lg shadow-lg\">\r\n<i class=\"fa-solid fa-satellite text-blue-400\"><\/i>\r\n<\/div>\r\n<div class=\"absolute bottom-10 right-0 bg-gray-900 border border-blue-500\/50 p-2 rounded-lg shadow-lg\">\r\n<i class=\"fa-solid fa-tower-broadcast text-blue-400\"><\/i>\r\n<\/div>\r\n<div class=\"absolute bottom-10 left-0 bg-gray-900 border border-blue-500\/50 p-2 rounded-lg shadow-lg\">\r\n<i class=\"fa-solid fa-ruler-combined text-blue-400\"><\/i>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n<\/body><\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-510ea01 elementor-widget elementor-widget-html\" data-id=\"510ea01\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html data-theme=\"light\" lang=\"zh-CN\" style=\"\"><head>\r\n<meta charset=\"utf-8\">\r\n<meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\">\r\n<title>\u5730\u8d28\u707e\u5bb3\u8ba4\u77e5\u4e0e\u53ef\u89c2\u6d4b\u91cf<\/title>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.4.0\/css\/all.min.css\" rel=\"stylesheet\">\r\n<style>\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Noto Sans SC', sans-serif;\r\n background-color: #0f172a;\r\n }\r\n .slide-container {\r\n width: 1280px;\r\n height: 1000px;\r\n position: relative;\r\n background-color: #0f172a;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \r\n \/* Left Column Styles *\/\r\n .content-card {\r\n background-color: rgba(30, 41, 59, 0.6);\r\n border: 1px solid rgba(56, 189, 248, 0.2);\r\n border-radius: 0.75rem; \/* rounded-xl *\/\r\n }\r\n .trigger-item {\r\n border-left: 3px solid #3b82f6;\r\n padding-left: 1rem;\r\n margin-bottom: 1rem;\r\n }\r\n .list-dot {\r\n min-width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n background-color: #38bdf8;\r\n margin-top: 8px;\r\n margin-right: 12px;\r\n }\r\n\r\n \/* Right Column - Simplified Diagram Styles *\/\r\n .diagram-container {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n background-color: #1e293b;\r\n border-radius: 1rem;\r\n border: 1px solid #334155;\r\n overflow: hidden;\r\n }\r\n \r\n .connector-svg {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: 0;\r\n pointer-events: none;\r\n }\r\n .connector-line {\r\n stroke: #475569;\r\n stroke-width: 2;\r\n stroke-dasharray: 6 6;\r\n }\r\n \r\n \/* Central Hub *\/\r\n .hub-node {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 140px;\r\n height: 140px;\r\n border-radius: 50%;\r\n background-color: #2563eb; \/* blue-600 *\/\r\n border: 4px solid #1d4ed8; \/* blue-700 *\/\r\n box-shadow: 0 0 40px rgba(37, 99, 235, 0.3);\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 10;\r\n }\r\n\r\n \/* Sensor Nodes *\/\r\n .sensor-node {\r\n position: absolute;\r\n display: flex;\r\n align-items: center;\r\n background-color: #334155; \/* slate-700 *\/\r\n border: 1px solid #475569; \/* slate-600 *\/\r\n border-radius: 0.75rem;\r\n padding: 1rem;\r\n width: 200px;\r\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);\r\n z-index: 5;\r\n transition: transform 0.3s ease;\r\n }\r\n .sensor-node:hover {\r\n transform: scale(1.05);\r\n border-color: #60a5fa; \/* blue-400 *\/\r\n background-color: #1e293b;\r\n }\r\n \r\n .node-icon-box {\r\n width: 50px;\r\n height: 50px;\r\n border-radius: 0.5rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-right: 1rem;\r\n flex-shrink: 0;\r\n }\r\n \r\n .node-number {\r\n position: absolute;\r\n top: -10px;\r\n left: -10px;\r\n width: 28px;\r\n height: 28px;\r\n background-color: #fff;\r\n color: #0f172a;\r\n border-radius: 50%;\r\n font-weight: 900;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border: 2px solid #3b82f6;\r\n font-size: 14px;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body autocomplete=\"off\" style=\"\">\r\n<div class=\"slide-container\">\r\n<!-- Header -->\r\n<div class=\"flex items-center justify-between px-12 pt-8 pb-2 z-10\">\r\n<div>\r\n<div class=\"flex items-center space-x-3 mb-2\">\r\n<span class=\"px-2 py-1 bg-blue-900\/50 text-blue-400 text-xs font-bold rounded border border-blue-700\/50\">\u707e\u5bb3\u753b\u50cf<\/span>\r\n<span class=\"text-gray-500 text-sm\">\/ 01 CHAPTER<\/span>\r\n<\/div>\r\n<h1 class=\"text-3xl font-bold text-white tracking-tight\">\u5730\u8d28\u707e\u5bb3\u8ba4\u77e5\u4e0e\u53ef\u89c2\u6d4b\u91cf<\/h1>\r\n<div class=\"h-1 w-20 bg-blue-500 mt-2\"><\/div>\r\n<\/div>\r\n<div class=\"flex items-center space-x-4\">\r\n<div class=\"text-right\">\r\n<p class=\"text-xs text-gray-400\">CORE MONITORING<\/p>\r\n<p class=\"text-sm font-bold text-blue-300\">\u6838\u5fc3\u76d1\u6d4b\u6307\u6807\u4f53\u7cfb<\/p>\r\n<\/div>\r\n<i class=\"fa-solid fa-chart-network text-2xl text-blue-500\"><\/i>\r\n<\/div>\r\n<\/div>\r\n<!-- Main Content -->\r\n<div class=\"flex flex-1 px-12 py-6 space-x-8 z-10 overflow-hidden\">\r\n<!-- Left Column: Text Info (Unchanged) -->\r\n<div class=\"w-5\/12 flex flex-col justify-between h-full\">\r\n<!-- Section 1: Types & Triggers -->\r\n<div class=\"content-card p-6 mb-4 flex-1 overflow-y-auto\">\r\n<h3 class=\"flex items-center text-lg font-bold text-white mb-4 border-b border-gray-700 pb-2\">\r\n<i class=\"fa-solid fa-triangle-exclamation text-yellow-500 mr-2\"><\/i>\r\n \u5178\u578b\u707e\u5bb3\u7c7b\u578b\u4e0e\u89e6\u53d1\u673a\u5236\r\n <\/h3>\r\n<div class=\"space-y-4\">\r\n<div class=\"trigger-item\">\r\n<p class=\"text-blue-300 font-bold mb-1\">\u6ce5\u77f3\u6d41 \/ \u5c71\u6d2a<\/p>\r\n<p class=\"text-gray-400 text-sm leading-relaxed\">\r\n<span class=\"text-gray-500\">\u89e6\u53d1\u6761\u4ef6\uff1a<\/span>\u77ed\u5386\u65f6\u5f3a\u964d\u96e8\u3001\u51b0\u96ea\u878d\u6c34\uff1b\u6c47\u6d41\u5730\u5f62\uff1b\u677e\u6563\u7269\u6e90\u5806\u79ef\r\n <\/p>\r\n<\/div>\r\n<div class=\"trigger-item\" style=\"border-left-color: #ef4444;\">\r\n<p class=\"text-red-300 font-bold mb-1\">\u6ed1\u5761 \/ \u5d29\u584c<\/p>\r\n<p class=\"text-gray-400 text-sm leading-relaxed\">\r\n<span class=\"text-gray-500\">\u89e6\u53d1\u6761\u4ef6\uff1a<\/span>\u8f6f\u5f31\u9762\u9971\u6c34\u964d\u4f4e\u6297\u526a\u5f3a\u5ea6\uff1b\u5730\u9707\/\u5de5\u7a0b\u6270\u52a8\uff1b\u5761\u811a\u5f00\u6316\uff1b\u957f\u671f\u8815\u53d8\r\n <\/p>\r\n<\/div>\r\n<div class=\"trigger-item\" style=\"border-left-color: #a855f7;\">\r\n<p class=\"text-purple-300 font-bold mb-1\">\u91c7\u7a7a\u533a \/ \u5c3e\u77ff\u5e93<\/p>\r\n<p class=\"text-gray-400 text-sm leading-relaxed\">\r\n<span class=\"text-gray-500\">\u89e6\u53d1\u6761\u4ef6\uff1a<\/span>\u5730\u4e0b\u91c7\u52a8\u8bf1\u53d1\u8986\u5ca9\u79fb\u52a8\uff1b\u575d\u4f53\u6e17\u6d41\u5f02\u5e38\uff1b\u5e93\u533a\u6c34\u4f4d\u6025\u5267\u53d8\u5316\r\n <\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Section 2: Key Observables -->\r\n<div class=\"content-card p-6 flex-shrink-0\">\r\n<h3 class=\"flex items-center text-lg font-bold text-white mb-4 border-b border-gray-700 pb-2\">\r\n<i class=\"fa-solid fa-eye text-blue-400 mr-2\"><\/i>\r\n \u5173\u952e\u53ef\u89c2\u6d4b\u91cf (Key Observables)\r\n <\/h3>\r\n<div class=\"grid grid-cols-2 gap-4\">\r\n<div class=\"flex items-start\">\r\n<div class=\"list-dot bg-green-400\"><\/div>\r\n<div>\r\n<p class=\"text-white text-sm font-bold\">\u5730\u8868\u5f62\u53d8<\/p>\r\n<p class=\"text-gray-500 text-xs\">\u4f4d\u79fb\u3001\u6c89\u964d\u3001\u88c2\u7f1d\u5bbd\u5ea6<\/p>\r\n<\/div>\r\n<\/div>\r\n<div class=\"flex items-start\">\r\n<div class=\"list-dot bg-blue-400\"><\/div>\r\n<div>\r\n<p class=\"text-white text-sm font-bold\">\u6c34\u6587\u6c14\u8c61<\/p>\r\n<p class=\"text-gray-500 text-xs\">\u96e8\u91cf\u3001\u5b54\u9699\u6c34\u538b\u3001\u6c34\u4f4d<\/p>\r\n<\/div>\r\n<\/div>\r\n<div class=\"flex items-start\">\r\n<div class=\"list-dot bg-orange-400\"><\/div>\r\n<div>\r\n<p class=\"text-white text-sm font-bold\">\u6df1\u90e8\u72b6\u6001<\/p>\r\n<p class=\"text-gray-500 text-xs\">\u6df1\u90e8\u4f4d\u79fb\u3001\u5e94\u529b\u3001\u5fae\u9707<\/p>\r\n<\/div>\r\n<\/div>\r\n<div class=\"flex items-start\">\r\n<div class=\"list-dot bg-purple-400\"><\/div>\r\n<div>\r\n<p class=\"text-white text-sm font-bold\">\u89c6\u9891\u611f\u77e5<\/p>\r\n<p class=\"text-gray-500 text-xs\">\u8868\u9762\u5f02\u52a8\u3001\u6ce5\u4f4d\u8bc6\u522b<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Right Column: Simplified Flat Diagram -->\r\n<div class=\"w-7\/12 h-full flex flex-col\">\r\n<!-- Header -->\r\n<div class=\"flex items-center justify-between mb-2\">\r\n<div class=\"bg-blue-600 px-4 py-1.5 rounded-lg flex items-center\">\r\n<i class=\"fa-solid fa-sitemap text-white mr-2 text-sm\"><\/i>\r\n<span class=\"text-white font-bold text-sm\">\u667a\u80fd\u76d1\u6d4b\u70b9\u4f4d\u90e8\u7f72\u67b6\u6784<\/span>\r\n<\/div>\r\n<div class=\"text-gray-400 text-xs\">5\u5927\u6838\u5fc3\u76d1\u6d4b\u7ef4\u5ea6 \u00b7 \u5b9e\u65f6\u6c47\u805a<\/div>\r\n<\/div>\r\n<!-- Diagram Container -->\r\n<div class=\"diagram-container\">\r\n<!-- Connecting Lines (SVG) -->\r\n<svg class=\"connector-svg\">\r\n<!-- Center is roughly 50% 50% of the container -->\r\n<!-- Lines radiating from center to node positions -->\r\n<!-- Node 1 (Top Left): ~15%, 15% -->\r\n<line class=\"connector-line\" x1=\"50%\" x2=\"18%\" y1=\"50%\" y2=\"18%\"><\/line>\r\n<!-- Node 2 (Top Right): ~82%, 15% -->\r\n<line class=\"connector-line\" x1=\"50%\" x2=\"82%\" y1=\"50%\" y2=\"18%\"><\/line>\r\n<!-- Node 3 (Bottom Right): ~82%, 82% -->\r\n<line class=\"connector-line\" x1=\"50%\" x2=\"82%\" y1=\"50%\" y2=\"82%\"><\/line>\r\n<!-- Node 4 (Bottom Left): ~18%, 82% -->\r\n<line class=\"connector-line\" x1=\"50%\" x2=\"18%\" y1=\"50%\" y2=\"82%\"><\/line>\r\n<!-- Node 5 (Top Center\/Alternative): Let's put 5th at bottom center ~50%, 85% -->\r\n<line class=\"connector-line\" x1=\"50%\" x2=\"50%\" y1=\"50%\" y2=\"85%\"><\/line>\r\n<\/svg>\r\n<!-- Central Hub -->\r\n<div class=\"hub-node\">\r\n<i class=\"fa-solid fa-cloud text-5xl text-white mb-2\"><\/i>\r\n<span class=\"text-white font-black text-lg\">\u4e91\u5e73\u53f0<\/span>\r\n<span class=\"text-blue-200 text-xs\">\u667a\u80fd\u51b3\u7b56\u4e2d\u5fc3<\/span>\r\n<\/div>\r\n<!-- Node 1: Rainfall (Top Left) -->\r\n<div class=\"sensor-node\" style=\"top: 10%; left: 5%;\">\r\n<div class=\"node-number\">01<\/div>\r\n<div class=\"node-icon-box bg-blue-500\">\r\n<i class=\"fa-solid fa-cloud-showers-heavy text-2xl text-white\"><\/i>\r\n<\/div>\r\n<div>\r\n<h4 class=\"text-white font-bold text-lg\">\u5fae\u6c14\u8c61\u76d1\u6d4b<\/h4>\r\n<p class=\"text-gray-400 text-xs mt-1\">\u5b9e\u65f6\u96e8\u91cf \/ \u9608\u503c\u544a\u8b66<\/p>\r\n<\/div>\r\n<\/div>\r\n<!-- Node 2: GNSS (Top Right) -->\r\n<div class=\"sensor-node\" style=\"top: 10%; right: 5%;\">\r\n<div class=\"node-number\">02<\/div>\r\n<div class=\"node-icon-box bg-green-500\">\r\n<i class=\"fa-solid fa-satellite-dish text-2xl text-white\"><\/i>\r\n<\/div>\r\n<div>\r\n<h4 class=\"text-white font-bold text-lg\">\u5f62\u53d8\u76d1\u6d4b<\/h4>\r\n<p class=\"text-gray-400 text-xs mt-1\">GNSS\u6beb\u7c73\u7ea7\u6c89\u964d<\/p>\r\n<\/div>\r\n<\/div>\r\n<!-- Node 3: Deep Sensor (Bottom Left) -->\r\n<div class=\"sensor-node\" style=\"bottom: 10%; left: 5%;\">\r\n<div class=\"node-number\">03<\/div>\r\n<div class=\"node-icon-box bg-purple-500\">\r\n<i class=\"fa-solid fa-ruler-vertical text-2xl text-white\"><\/i>\r\n<\/div>\r\n<div>\r\n<h4 class=\"text-white font-bold text-lg\">\u5c40\u90e8\u76d1\u6d4b<\/h4>\r\n<p class=\"text-gray-400 text-xs mt-1\">\u6df1\u5c42\u6d4b\u659c \/ \u5e94\u529b\u8ba1<\/p>\r\n<\/div>\r\n<\/div>\r\n<!-- Node 4: Groundwater (Bottom Right) -->\r\n<div class=\"sensor-node\" style=\"bottom: 10%; right: 5%;\">\r\n<div class=\"node-number\">04<\/div>\r\n<div class=\"node-icon-box bg-cyan-500\">\r\n<i class=\"fa-solid fa-water text-2xl text-white\"><\/i>\r\n<\/div>\r\n<div>\r\n<h4 class=\"text-white font-bold text-lg\">\u7a7a\u5929\u76d1\u6d4b<\/h4>\r\n<p class=\"text-gray-400 text-xs mt-1\">\u65e0\u4eba\u673a \/ \u536b\u661f<\/p>\r\n<\/div>\r\n<\/div>\r\n<!-- Node 5: Video (Bottom Center) -->\r\n<div class=\"sensor-node\" style=\"bottom: 5%; left: 50%; transform: translateX(-50%);\">\r\n<div class=\"node-number\">05<\/div>\r\n<div class=\"node-icon-box bg-orange-500\">\r\n<i class=\"fa-solid fa-video text-2xl text-white\"><\/i>\r\n<\/div>\r\n<div>\r\n<h4 class=\"text-white font-bold text-lg\">\u89c6\u9891\u76d1\u63a7<\/h4>\r\n<p class=\"text-gray-400 text-xs mt-1\">AI\u8bc6\u522b \/ \u53ef\u89c6\u5316\u590d\u6838<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n<\/body><\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9c78094 elementor-widget elementor-widget-html\" data-id=\"9c78094\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"zh-CN\" data-theme=\"light\" style=\"\"><head>\r\n<meta charset=\"utf-8\">\r\n<meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\">\r\n<title>\u7ae0\u8282\u5c01\u9762\uff1a\u5e02\u573a\u75db\u70b9<\/title>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.4.0\/css\/all.min.css\" rel=\"stylesheet\">\r\n<style>\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Noto Sans SC', sans-serif;\r\n background-color: #0f172a;\r\n }\r\n .slide-container {\r\n width: 1280px;\r\n height: 720px;\r\n position: relative;\r\n background-color: #0f172a;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \/* Grid Background Pattern *\/\r\n .bg-grid {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n \/* Removed linear-gradient as requested *\/\r\n background-color: #0f172a;\r\n background-image: url('data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEgMEwwIDBMMCAxIiBzdHJva2U9InJnYmEoNTYsIDE4OSwgMjQ4LCAwLjA1KSIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==');\r\n z-index: 0;\r\n }\r\n .chapter-number-huge {\r\n font-size: 12rem;\r\n font-weight: 900;\r\n line-height: 1;\r\n color: transparent;\r\n -webkit-text-stroke: 4px rgba(255, 255, 255, 0.1);\r\n position: absolute;\r\n left: 60px;\r\n top: 60px;\r\n z-index: 0;\r\n opacity: 0.5;\r\n }\r\n .glass-panel {\r\n background: rgba(30, 41, 59, 0.4);\r\n border-left: 6px solid #ef4444; \/* Changed to red for \"Pain Points\" theme *\/\r\n backdrop-filter: blur(4px);\r\n }\r\n .glow-icon {\r\n filter: drop-shadow(0 0 15px rgba(239, 68, 68, 0.6)); \/* Red glow *\/\r\n }\r\n .terrain-line {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 300px;\r\n background: url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 1440 320\"><path fill=\"%231e293b\" fill-opacity=\"0.8\" d=\"M0,224L48,213.3C96,203,192,181,288,181.3C384,181,480,203,576,224C672,245,768,267,864,261.3C960,256,1056,224,1152,197.3C1248,171,1344,149,1392,138.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z\"><\/path><\/svg>') no-repeat bottom;\r\n background-size: cover;\r\n z-index: 1;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body style=\"\" autocomplete=\"off\">\r\n<div class=\"slide-container\">\r\n<!-- Background Grid -->\r\n<div class=\"bg-grid\"><\/div>\r\n<!-- Giant Chapter Number -->\r\n<div class=\"chapter-number-huge\">02<\/div>\r\n<!-- Decorative Background Elements (Gradient removed, replaced with solid colors with opacity) -->\r\n<div class=\"absolute top-0 right-0 w-[800px] h-[800px] bg-red-900 rounded-full opacity-10 blur-3xl transform translate-x-1\/3 -translate-y-1\/3\"><\/div>\r\n<div class=\"absolute bottom-0 left-0 w-[600px] h-[600px] bg-red-900 rounded-full opacity-10 blur-3xl transform -translate-x-1\/3 translate-y-1\/3\"><\/div>\r\n<!-- Terrain Decoration -->\r\n<div class=\"terrain-line\"><\/div>\r\n<!-- Main Content Area -->\r\n<div class=\"flex flex-1 z-20 items-center px-24 relative\">\r\n<div class=\"w-full flex justify-between items-center\">\r\n<!-- Left: Text Content -->\r\n<div class=\"w-3\/5 pt-20\">\r\n<div class=\"flex items-center space-x-3 mb-6\">\r\n<div class=\"h-1 w-12 bg-red-500\"><\/div>\r\n<p class=\"text-red-400 font-bold tracking-widest uppercase\">Chapter Two<\/p>\r\n<\/div>\r\n<h1 class=\"text-7xl font-black text-white mb-8 tracking-tight leading-tight\">\u7ba1\u7406\u90e8\u95e8\u7684\u5173\u6ce8\r\n\r\n <\/h1>\r\n<div class=\"glass-panel p-8 rounded-r-lg max-w-2xl\">\r\n<h2 class=\"text-3xl text-gray-200 font-light mb-4\">\u4f20\u7edf\u5e94\u6025\u54cd\u5e94\u7684\u6311\u6218<\/h2>\r\n<p class=\"text-gray-400 text-lg leading-relaxed\">\r\n \u76f4\u51fb\u884c\u4e1a\u6838\u5fc3\u96be\u9898\uff1a\u5371\u9669\u70b9\u4f17\u591a\u3001\u76d1\u6d4b\u624b\u6bb5\u79bb\u6563\u3001\u6570\u636e\u5b64\u5c9b\u3001\u9884\u8b66\u65f6\u6548\u6ede\u540e\u3002\u52a9\u529b\u7ba1\u7406\u90e8\u95e8\r\n \u4ece\u201c\u5e94\u6025\u6551\u707e\u201d\u8f6c\u5411\u201c\u667a\u80fd\u9632\u707e\u201d\u4e4b\u8def\u3002\r\n <\/p>\r\n<\/div>\r\n<!-- Key Points -->\r\n<div class=\"flex space-x-8 mt-12\">\r\n<div class=\"flex flex-col items-center\">\r\n<div class=\"w-12 h-12 rounded-full bg-gray-800 border border-gray-600 flex items-center justify-center mb-3\">\r\n<i class=\"fa-solid fa-satellite-dish text-red-400 text-xl\"><\/i>\r\n<\/div>\r\n<p class=\"text-gray-400 text-sm\">\u76d1\u6d4b\u79bb\u6563<\/p>\r\n<\/div>\r\n<div class=\"flex flex-col items-center\">\r\n<div class=\"w-12 h-12 rounded-full bg-gray-800 border border-gray-600 flex items-center justify-center mb-3\">\r\n<i class=\"fa-solid fa-triangle-exclamation text-red-400 text-xl\"><\/i>\r\n<\/div>\r\n<p class=\"text-gray-400 text-sm\">\u8bef\u62a5\u6f0f\u62a5<\/p>\r\n<\/div>\r\n<div class=\"flex flex-col items-center\">\r\n<div class=\"w-12 h-12 rounded-full bg-gray-800 border border-gray-600 flex items-center justify-center mb-3\">\r\n<i class=\"fa-solid fa-stopwatch text-red-400 text-xl\"><\/i>\r\n<\/div>\r\n<p class=\"text-gray-400 text-sm\">\u54cd\u5e94\u6ede\u540e<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Right: Visual Icon\/Graphic -->\r\n<div class=\"w-2\/5 flex justify-center items-center\">\r\n<div class=\"relative w-80 h-80\">\r\n<div class=\"absolute inset-0 bg-red-500 rounded-full opacity-5 blur-xl\"><\/div>\r\n<div class=\"absolute inset-0 border-2 border-dashed border-red-500\/30 rounded-full\" style=\"transform: rotate(45deg);\"><\/div>\r\n<div class=\"absolute inset-4 border border-red-500\/20 rounded-full\"><\/div>\r\n<!-- Central Icon -->\r\n<div class=\"absolute inset-0 flex items-center justify-center\">\r\n<i class=\"fa-solid fa-chart-line-down text-9xl text-white opacity-90 glow-icon\"><\/i>\r\n<\/div>\r\n<!-- Floating Satellite Icons -->\r\n<div class=\"absolute top-0 left-1\/2 transform -translate-x-1\/2 -translate-y-4 bg-gray-900 border border-red-500\/50 p-2 rounded-lg shadow-lg\">\r\n<i class=\"fa-solid fa-bell-slash text-red-400\"><\/i>\r\n<\/div>\r\n<div class=\"absolute bottom-10 right-0 bg-gray-900 border border-red-500\/50 p-2 rounded-lg shadow-lg\">\r\n<i class=\"fa-solid fa-link-slash text-red-400\"><\/i>\r\n<\/div>\r\n<div class=\"absolute bottom-10 left-0 bg-gray-900 border border-red-500\/50 p-2 rounded-lg shadow-lg\">\r\n<i class=\"fa-solid fa-database text-red-400\"><\/i>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n<\/body><\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e40fee1 elementor-widget elementor-widget-html\" data-id=\"e40fee1\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"zh-CN\" data-theme=\"light\" style=\"\"><head>\r\n<meta charset=\"utf-8\">\r\n<meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\">\r\n<title>\u6280\u672f\u5bf9\u6bd4\uff1a\u4f20\u7edf\u76d1\u6d4b vs \u667a\u80fd\u65b9\u6848<\/title>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.4.0\/css\/all.min.css\" rel=\"stylesheet\">\r\n<style>\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Noto Sans SC', sans-serif;\r\n background-color: #0f172a;\r\n }\r\n .slide-container {\r\n width: 1280px;\r\n height: 1000px;\r\n position: relative;\r\n background-color: #0f172a;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n .bg-grid {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-image: url('data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEgMEwwIDBMMCAxIiBzdHJva2U9InJnYmEoNTYsIDE4OSwgMjQ4LCAwLjAzKSIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==');\r\n z-index: 0;\r\n }\r\n \/* Comparison Cards *\/\r\n .comparison-card {\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n transition: all 0.3s ease;\r\n }\r\n .traditional-card {\r\n background-color: rgba(30, 41, 59, 0.7);\r\n border-left: 4px solid #94a3b8;\r\n }\r\n .smart-card {\r\n background-color: rgba(15, 23, 42, 0.8);\r\n border: 1px solid rgba(56, 189, 248, 0.3);\r\n border-left: 4px solid #38bdf8;\r\n box-shadow: 0 10px 30px -5px rgba(56, 189, 248, 0.1);\r\n }\r\n \/* Status Badges *\/\r\n .status-badge-red {\r\n background-color: rgba(239, 68, 68, 0.2);\r\n color: #fca5a5;\r\n padding: 2px 8px;\r\n border-radius: 4px;\r\n font-size: 0.7rem;\r\n border: 1px solid rgba(239, 68, 68, 0.3);\r\n }\r\n .status-badge-green {\r\n background-color: rgba(34, 197, 94, 0.2);\r\n color: #86efac;\r\n padding: 2px 8px;\r\n border-radius: 4px;\r\n font-size: 0.7rem;\r\n border: 1px solid rgba(34, 197, 94, 0.3);\r\n }\r\n \/* Custom Table *\/\r\n .comparison-table td {\r\n padding: 12px;\r\n border-bottom: 1px solid rgba(255,255,255,0.05);\r\n vertical-align: middle;\r\n }\r\n .comparison-table tr:last-child td {\r\n border-bottom: none;\r\n }\r\n .video-placeholder {\r\n background-color: #1e293b;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n overflow: hidden;\r\n border: 1px dashed rgba(56, 189, 248, 0.3);\r\n }\r\n .video-placeholder::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: url('data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgMEwyMCAyME0yMCAwTDAgMjAiIHN0cm9rZT0icmdiYSg1NiwgMTg5LCAyNDgsIDAuMSkiIHN0cm9rZS13aWR0aD0iMSIvPjwvc3ZnPg==');\r\n opacity: 0.3;\r\n }\r\n .vs-circle {\r\n width: 40px;\r\n height: 40px;\r\n background-color: #0f172a;\r\n border: 2px solid #38bdf8;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: #38bdf8;\r\n font-weight: bold;\r\n font-style: italic;\r\n z-index: 20;\r\n box-shadow: 0 0 15px rgba(56, 189, 248, 0.3);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body style=\"color: rgb(255, 255, 255);\" autocomplete=\"off\">\r\n<div class=\"slide-container\">\r\n<!-- Background -->\r\n<div class=\"bg-grid\"><\/div>\r\n<div class=\"absolute top-0 right-0 w-[600px] h-[600px] bg-blue-900 rounded-full opacity-5 blur-3xl\"><\/div>\r\n<!-- Header -->\r\n<div class=\"flex items-center justify-between px-12 pt-8 pb-4 z-10\">\r\n<div>\r\n<div class=\"flex items-center space-x-3 mb-2\">\r\n<span class=\"px-2 py-1 bg-blue-900\/50 text-blue-400 text-xs font-bold rounded border border-blue-700\/50\">\u6280\u672f\u5bf9\u6bd4 ANALYSIS<\/span>\r\n<span class=\"text-gray-500 text-sm\">\/ 02 COMPARISON<\/span>\r\n<\/div>\r\n<h1 class=\"text-3xl font-bold text-white tracking-tight\">\u4f20\u7edf\u76d1\u6d4b vs \u667a\u80fd\u4e00\u4f53\u5316\u65b9\u6848<\/h1>\r\n<div class=\"h-1 w-20 bg-blue-500 mt-2\"><\/div>\r\n<\/div>\r\n<!-- Legend -->\r\n<div class=\"flex space-x-6 text-sm\">\r\n<div class=\"flex items-center\">\r\n<div class=\"w-3 h-3 bg-gray-600 rounded mr-2\"><\/div>\r\n<span class=\"text-gray-400\">\u4f20\u7edf\u79bb\u6563\u76d1\u6d4b<\/span>\r\n<\/div>\r\n<div class=\"flex items-center\">\r\n<div class=\"w-3 h-3 bg-blue-500 rounded mr-2\"><\/div>\r\n<span class=\"text-blue-400 font-bold\">\u667a\u80fd\u878d\u5408\u76d1\u6d4b<\/span>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Main Content -->\r\n<div class=\"flex flex-1 px-12 pb-8 z-10 space-x-6 overflow-hidden relative\">\r\n<!-- VS Badge centered -->\r\n<div class=\"absolute top-1\/2 left-1\/2 transform -translate-x-1\/2 -translate-y-1\/2 vs-circle\">\r\n VS\r\n <\/div>\r\n<!-- Left: Traditional Methods -->\r\n<div class=\"w-1\/2 flex flex-col h-full\">\r\n<div class=\"traditional-card rounded-xl p-6 h-full flex flex-col relative overflow-hidden\">\r\n<!-- Header -->\r\n<div class=\"flex items-center justify-between mb-6 border-b border-gray-700 pb-4\">\r\n<h3 class=\"text-xl font-bold text-gray-300\">\r\n<i class=\"fa-solid fa-screwdriver-wrench mr-2\"><\/i>\u4f20\u7edf\u624b\u6bb5\r\n <\/h3>\r\n<span class=\"text-xs text-gray-500 bg-gray-800 px-2 py-1 rounded\">Current State<\/span>\r\n<\/div>\r\n<!-- Content List -->\r\n<div class=\"space-y-4 flex-1\">\r\n<!-- Item 1 -->\r\n<div class=\"flex items-start\">\r\n<div class=\"w-8 h-8 rounded bg-gray-700 flex items-center justify-center mr-3 flex-shrink-0 text-gray-400\">\r\n<i class=\"fa-solid fa-satellite\"><\/i>\r\n<\/div>\r\n<div style=\"font-size: 12px;\">\r\n<div class=\"flex items-center justify-between w-full\">\r\n<p class=\"text-gray-200 font-bold text-sm\"><\/p><p style=\"position: relative; transform: translate(-140.227px, 1.93419px); font-size: 14px;\">\u5e03\u8bbe\u4e13\u4e1a\u76d1\u6d4b\u8bbe\u5907<span>(GPS\/\u5168\u7ad9\u4eea)<\/span><\/p><p><\/p>\r\n\r\n<\/div>\r\n<p class=\"text-gray-400 text-xs mt-1\"><\/p><p style=\"color: rgb(204, 204, 204);\">\u5982GNSS\u4f4d\u79fb\u76d1\u6d4b\u7ad9\u3001\u88c2\u7f1d\u8ba1\u3001\u96e8\u91cf\u8ba1\u3001\u6d4b\u659c\u4eea\u7b49\uff0c\u5b9e\u65f6\u91c7\u96c6\u5c71\u4f53\u3001\u8fb9\u5761\u3001\u6ed1\u5761\u4f53\u7684\u4f4d\u79fb\u3001\u5f62\u53d8\u53ca\u964d\u96e8\u91cf\u6570\u636e\u3002<\/p><p><\/p>\r\n<\/div>\r\n<\/div>\r\n<!-- Item 2 -->\r\n<div class=\"flex items-start\">\r\n<div class=\"w-8 h-8 rounded bg-gray-700 flex items-center justify-center mr-3 flex-shrink-0 text-gray-400\">\r\n<i class=\"fa-solid fa-clock\"><\/i>\r\n<\/div>\r\n<div>\r\n<div class=\"flex items-center justify-between w-full\">\r\n<p class=\"text-gray-200 font-bold text-sm\"><\/p><p style=\"position: relative; transform: translate(-188.583px, -4.83546px); color: rgb(255, 255, 255); font-size: 14px;\">\u52d8\u5bdf\u4e0e\u8bc4\u4f30\u6280\u672f<\/p>\r\n<p><\/p>\r\n\r\n<\/div>\r\n<p class=\"text-gray-400 text-xs mt-1\"><\/p><p style=\"font-size: 12px; color: rgb(204, 204, 204);\"><span>\u5229\u7528\u536b\u661f\u9065\u611f\uff08SAR\u5e72\u6d89\u6d4b\u91cf\uff09\u3001\u65e0\u4eba\u673a\u822a\u6d4b\u3001\u7ea2\u5916\u70ed\u6210\u50cf\u7b49\u6280\u672f<\/span><span>\u5feb\u901f\u8bc6\u522b\u5927\u8303\u56f4\u5730\u8d28\u707e\u5bb3\u9690\u60a3\u70b9<\/span> \uff0c\u8bc4\u4f30\u707e\u5bb3\u53d1\u80b2\u7279\u5f81\u548c\u5f71\u54cd\u8303\u56f4\u3002<\/p><p><\/p>\r\n<\/div>\r\n<\/div>\r\n<!-- Item 3 -->\r\n<div class=\"flex items-start\">\r\n<div class=\"w-8 h-8 rounded bg-gray-700 flex items-center justify-center mr-3 flex-shrink-0 text-gray-400\">\r\n<i class=\"fa-solid fa-triangle-exclamation\"><\/i>\r\n<\/div>\r\n<div>\r\n<div class=\"flex items-center justify-between w-full\">\r\n<p class=\"text-gray-200 font-bold text-sm\"><\/p><p><\/p><p style=\"position: relative; transform: translate(-163.439px, 0.967092px); font-size: 14px;\"><\/p><p style=\"position: relative; transform: translate(-175.044px, 0.967088px); font-size: 14px;\">\u642d\u5efa\u81ea\u52a8\u5316\u76d1\u6d4b\u5e73\u53f0<\/p>\r\n<p><\/p>\r\n<p><\/p>\r\n<p><\/p>\r\n\r\n<\/div>\r\n<p class=\"text-gray-400 text-xs mt-1\"><\/p><p style=\"color: rgb(204, 204, 204); font-size: 12px;\">\r\n <\/p><p style=\"font-size: 12px; color: rgb(204, 204, 204);\">\r\n \u901a\u8fc7\u7269\u8054\u7f51\u3001\u65e0\u7ebf\u4f20\u8f93\u6280\u672f\uff0c\u5c06\u76d1\u6d4b\u6570\u636e\u6c47\u603b\u81f3\u7701\u7ea7\u6216\u56fd\u5bb6\u7ea7\u5730\u8d28\u707e\u5bb3\u76d1\u6d4b\u9884\u8b66\u7cfb\u7edf\uff0c\u5b9e\u73b0\u6570\u636e\u81ea\u52a8\u5206\u6790\u3001\u9608\u503c\u9884\u8b66\u3002\r\n<\/p>\r\n\r\n<p><\/p>\r\n<p><\/p>\r\n<\/div>\r\n<\/div>\r\n<!-- Item 4 -->\r\n<div class=\"flex items-start\">\r\n<div class=\"w-8 h-8 rounded bg-gray-700 flex items-center justify-center mr-3 flex-shrink-0 text-gray-400\">\r\n<i class=\"fa-solid fa-signal\"><\/i>\r\n<\/div>\r\n<div>\r\n<div class=\"flex items-center justify-between w-full\">\r\n<p class=\"text-gray-200 font-bold text-sm\">\u4f20\u8f93\u4e0d\u7a33\u5b9a<\/p>\r\n\r\n<\/div>\r\n<p class=\"text-gray-400 text-xs mt-1\" style=\"color: rgb(204, 204, 204);\">\u5c71\u533a\u4fe1\u53f7\u5f31\uff0c\u7f3a\u4e4f\u65ad\u70b9\u7eed\u4f20\u4e0e\u591a\u94fe\u8def\u5197\u4f59\uff0c\u6781\u7aef\u5929\u6c14\u4e0b\u6613\u5931\u8054\u3002<\/p>\r\n<\/div>\r\n<\/div>\r\n<div class=\"flex items-start\">\r\n<div class=\"w-8 h-8 rounded bg-gray-700 flex items-center justify-center mr-3 flex-shrink-0 text-gray-400\">\r\n<i class=\"fa-solid fa-triangle-exclamation\"><\/i>\r\n<\/div>\r\n<div>\r\n<div class=\"flex items-center justify-between w-full\">\r\n<p class=\"text-gray-200 font-bold text-sm\"><\/p><p><\/p><p style=\"position: relative; transform: translate(-163.439px, 0.967092px); font-size: 14px;\"><\/p><p style=\"position: relative; transform: translate(-175.044px, 0.967088px); font-size: 14px;\">\u5e94\u5bf9\u63aa\u65bd<\/p>\r\n<p><\/p>\r\n<p><\/p>\r\n\r\n<\/div>\r\n<p class=\"text-gray-400 text-xs mt-1\"><\/p><p style=\"color: rgb(204, 204, 204); font-size: 12px;\">\r\n <\/p>\r\n <p><\/p>\r\n <p><\/p>\r\n <p style=\"font-size: 12px; color: rgb(204, 204, 204);\">\r\n \r\n \u5f80\u5f80\u4f9d\u8d56\u4e8e\u4eba\u5de5\u5b9a\u671f\u5de1\u68c0\u3001\u7b80\u5355\u7684\u7269\u7406\u56f4\u6321\u6216\u4f20\u7edf\u7684\u88ab\u52a8\u89e6\u53d1\u62a5\u8b66\u3002\r\n<\/p>\r\n\r\n<p><\/p>\r\n<p><\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Bottom Image -->\r\n<div class=\"mt-4 h-32 w-full rounded-lg overflow-hidden relative group\">\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Right: Our Smart Solution -->\r\n<div class=\"w-1\/2 flex flex-col h-full\">\r\n<div class=\"smart-card rounded-xl p-6 h-full flex flex-col relative overflow-hidden\">\r\n<!-- Header -->\r\n<div class=\"flex items-center justify-between mb-6 border-b border-blue-500\/30 pb-4\">\r\n<h3 class=\"text-xl font-bold text-white\">\r\n<i class=\"fa-solid fa-brain mr-2 text-blue-400\"><\/i>\u667a\u80fd\u4e00\u4f53\u5316\u65b9\u6848\r\n <\/h3>\r\n<span class=\"text-xs text-blue-300 bg-blue-900\/50 px-2 py-1 rounded border border-blue-500\/30\">Our Solution<\/span>\r\n<\/div>\r\n<!-- Content List -->\r\n<div class=\"space-y-4 flex-1\">\r\n<!-- Item 1 -->\r\n<div class=\"flex items-start\">\r\n<div class=\"w-8 h-8 rounded bg-blue-900\/50 border border-blue-500\/30 flex items-center justify-center mr-3 flex-shrink-0 text-blue-400\">\r\n<i class=\"fa-solid fa-layer-group\"><\/i>\r\n<\/div>\r\n<div>\r\n<div class=\"flex items-center justify-between w-full\">\r\n<p class=\"text-white font-bold text-sm\">\u591a\u6e90\u878d\u5408\u611f\u77e5<\/p>\r\n<span class=\"status-badge-green\">\u70b9\u7ebf\u9762\u4e00\u4f53<\/span>\r\n<\/div>\r\n<p class=\"text-gray-400 text-xs mt-1\"><\/p><p style=\"font-size: 12px; color: rgb(204, 204, 204);\">\r\n \u7a7a\u5929\u5730\u534f\u540c\uff1a\u536b\u661fInSAR\u5e7f\u57df\u626b\u63cf\u3001\u65e0\u4eba\u673a\u52a8\u6001\u5de1\u67e5\u3001\u5730\u9762\u7269\u8054\u7f51\uff08GNSS\/\u88c2\u7f1d\u8ba1\/\u96e8\u91cf\u8ba1\uff09\u5b9e\u65f6\u6355\u6349\uff0c\u6784\u5efa\u201c\u707e\u5bb3\u70b9+\u98ce\u9669\u533a\u201d\u53cc\u63a7\u4f53\u7cfb\r\n \u3002\r\n<\/p>\r\n<p><\/p>\r\n<\/div>\r\n<\/div>\r\n<!-- Item 2 -->\r\n<div class=\"flex items-start\">\r\n<div class=\"w-8 h-8 rounded bg-blue-900\/50 border border-blue-500\/30 flex items-center justify-center mr-3 flex-shrink-0 text-blue-400\">\r\n<i class=\"fa-solid fa-bolt\"><\/i>\r\n<\/div>\r\n<div>\r\n<div class=\"flex items-center justify-between w-full\">\r\n<p class=\"text-white font-bold text-sm\">\u5206\u949f\u7ea7\u5b9e\u65f6\u9884\u8b66<\/p>\r\n<span class=\"status-badge-green\">\u6beb\u79d2\u54cd\u5e94<\/span>\r\n<\/div>\r\n<p class=\"text-gray-400 text-xs mt-1\" style=\"color: rgb(204, 204, 204);\">\u7aef\u4fa7\u8fb9\u7f18\u8ba1\u7b97\uff0c\u6570\u636e\u79d2\u7ea7\u4e0a\u4f20\uff0cAI\u6a21\u578b\u5b9e\u65f6\u63a8\u6f14\uff0c\u7a81\u53d1\u707e\u5bb3\u63d0\u524d\u9884\u8b66\u3002<\/p>\r\n<\/div>\r\n<\/div>\r\n<!-- Item 3 -->\r\n<div class=\"flex items-start\">\r\n<div class=\"w-8 h-8 rounded bg-blue-900\/50 border border-blue-500\/30 flex items-center justify-center mr-3 flex-shrink-0 text-blue-400\">\r\n<i class=\"fa-solid fa-filter\"><\/i>\r\n<\/div>\r\n<div>\r\n<div class=\"flex items-center justify-between w-full\">\r\n<p class=\"text-white font-bold text-sm\"><\/p><p style=\"position: relative; transform: translate(-108.314px, -1.93418px);\">AI\u6df1\u5ea6\u5e94\u7528<\/p>\r\n<p><\/p>\r\n<span class=\"status-badge-green\">\u7cbe\u51c6\u53ef\u9760<\/span>\r\n<\/div>\r\n<p class=\"text-gray-400 text-xs mt-1\"><\/p><p style=\"font-size: 12px; color: rgb(204, 204, 204);\">\u878d\u5408\u591a\u6e90\u6570\u636e\u8bad\u7ec3\u6a21\u578b\uff0c\u5b9e\u73b0\u9690\u60a3\u81ea\u52a8\u8bc6\u522b\u3001\u8d8b\u52bf\u9884\u6d4b\u3001\u5206\u7ea7\u9884\u8b66\uff0c\u51c6\u786e\u7387\u6301\u7eed\u63d0\u5347 \u3002<\/p>\r\n\r\n<p><\/p>\r\n<\/div>\r\n<\/div>\r\n<!-- Item 4 -->\r\n<div class=\"flex items-start\">\r\n<div class=\"w-8 h-8 rounded bg-blue-900\/50 border border-blue-500\/30 flex items-center justify-center mr-3 flex-shrink-0 text-blue-400\">\r\n<i class=\"fa-solid fa-wifi\"><\/i>\r\n<\/div>\r\n<div>\r\n<div class=\"flex items-center justify-between w-full\">\r\n<p class=\"text-white font-bold text-sm\">\u5168\u5929\u5019\u9ad8\u53ef\u9760\u901a\u4fe1<\/p>\r\n<span class=\"status-badge-green\">\u6c38\u4e0d\u5931\u8054<\/span>\r\n<\/div>\r\n<p class=\"text-gray-400 text-xs mt-1\" style=\"color: rgb(204, 204, 204);\">\u5317\u6597\u77ed\u62a5\u6587 + 4G\/5G \u81ea\u9002\u5e94\u5207\u6362\uff0c\u65ad\u70b9\u7eed\u4f20\uff0cIP68\u9632\u62a4\u3002<\/p><p style=\"font-size: 12px; color: rgb(204, 204, 204);\">\u79fb\u52a8\u6307\u6325\u534f\u540c\uff0c\u5b9e\u73b0\u73b0\u573a\u4e0e\u540e\u65b9\u5b9e\u65f6\u97f3\u89c6\u9891\u3001\u6570\u636e\u5171\u4eab\uff0c\u63d0\u5347\u5904\u7f6e\u6548\u7387\u3002<\/p>\r\n<p><\/p>\r\n<\/div>\r\n\r\n<\/div>\r\n<div class=\"flex items-start\">\r\n<div class=\"w-8 h-8 rounded bg-blue-900\/50 border border-blue-500\/30 flex items-center justify-center mr-3 flex-shrink-0 text-blue-400\">\r\n<i class=\"fa-solid fa-filter\"><\/i>\r\n<\/div>\r\n<div>\r\n<div class=\"flex items-center justify-between w-full\">\r\n<p class=\"text-white font-bold text-sm\"><\/p><p style=\"position: relative; transform: translate(-108.314px, -1.93418px);\">\u5e94\u5bf9\u63aa\u65bd<\/p>\r\n<p><\/p>\r\n<span class=\"status-badge-green\">\u5b89\u5168\u53ca\u65f6<\/span>\r\n<\/div>\r\n<!-- \u5e94\u5bf9\u63aa\u65bd\u63cf\u8ff0\uff1a\u5f3a\u8c03\u5168\u5929\u5019\u3001\u81ea\u52a8\u5316\u7684\u4e3b\u52a8\u76d1\u6d4b\u4e0e\u9632\u5fa1\uff0c\u652f\u6301\u4e0e\u65e0\u4eba\u673a\/\u96f7\u8fbe\u534f\u540c -->\r\n<p class=\"text-gray-400 text-xs mt-1\"><\/p>\r\n<p style=\"font-size: 12px; color: rgb(204, 204, 204);\">\u80fd\u591f\u5b9e\u73b0\u5168\u5929\u5019\u3001\u81ea\u52a8\u5316\u7684\u4e3b\u52a8\u76d1\u6d4b\u4e0e\u9632\u5fa1\uff0c\u5e76\u4e0e\u65e0\u4eba\u673a\uff0c\u96f7\u8fbe\u7cfb\u7edf\u534f\u540c\u4f5c\u6218\u3002<\/p>\r\n\r\n<p><\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Bottom Image -->\r\n<div class=\"mt-4 h-32 w-full rounded-lg overflow-hidden relative group cursor-pointer\">\r\n\r\n<div class=\"absolute inset-0 bg-blue-900\/20 group-hover:bg-blue-900\/10 transition-colors\"><\/div>\r\n<div class=\"absolute inset-0 flex items-center justify-center z-10 pointer-events-none\">\r\n<div class=\"w-10 h-10 rounded-full bg-blue-500\/80 backdrop-blur-sm flex items-center justify-center shadow-lg shadow-blue-500\/50\">\r\n<\/div>\r\n<\/div>\r\n\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n<\/body><\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6047c03 elementor-widget elementor-widget-html\" data-id=\"6047c03\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n\r\n<html lang=\"zh-CN\">\r\n<head>\r\n<meta charset=\"utf-8\"\/>\r\n<meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\"\/>\r\n<title>\u7ae0\u8282\u5c01\u9762\uff1a\u89e3\u51b3\u65b9\u6848\u603b\u89c8<\/title>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\"\/>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap\" rel=\"stylesheet\"\/>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.4.0\/css\/all.min.css\" rel=\"stylesheet\"\/>\r\n<style>\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Noto Sans SC', sans-serif;\r\n background-color: #0f172a;\r\n }\r\n .slide-container {\r\n width: 1280px;\r\n height: 1000px;\r\n position: relative;\r\n background-color: #0f172a;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \/* Grid Background Pattern - Simplified without gradient for export compatibility *\/\r\n .bg-grid {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-image: \r\n url(\"data:image\/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cpath d='M0 0h40v40H0V0zm1 1h38v38H1V1z' fill='%2338bdf8' fill-opacity='0.05' fill-rule='evenodd'\/%3E%3C\/svg%3E\");\r\n z-index: 0;\r\n }\r\n .chapter-number-huge {\r\n font-size: 12rem;\r\n font-weight: 900;\r\n line-height: 1;\r\n color: transparent;\r\n -webkit-text-stroke: 4px rgba(255, 255, 255, 0.1);\r\n position: absolute;\r\n left: 60px;\r\n top: 60px;\r\n z-index: 0;\r\n opacity: 0.5;\r\n }\r\n .glass-panel {\r\n background: rgba(30, 41, 59, 0.6);\r\n border-left: 6px solid #38bdf8;\r\n backdrop-filter: blur(4px);\r\n }\r\n .glow-icon {\r\n filter: drop-shadow(0 0 15px rgba(56, 189, 248, 0.6));\r\n }\r\n .tech-circuit-bg {\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n width: 50%;\r\n height: 100%;\r\n background-image: url(\"data:image\/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cpath d='M10 10 L30 10 L30 30 L10 30 Z M70 70 L90 70 L90 90 L70 90 Z M40 10 L60 10 M80 30 L80 50' stroke='%2338bdf8' stroke-width='1' stroke-opacity='0.1' fill='none'\/%3E%3C\/svg%3E\");\r\n z-index: 1;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"slide-container\">\r\n<!-- Background Grid -->\r\n<div class=\"bg-grid\"><\/div>\r\n<div class=\"tech-circuit-bg\"><\/div>\r\n<!-- Giant Chapter Number -->\r\n<div class=\"chapter-number-huge\">03<\/div>\r\n<!-- Decorative Background Elements -->\r\n<div class=\"absolute top-0 right-0 w-[800px] h-[800px] bg-blue-900 rounded-full opacity-10 blur-3xl transform translate-x-1\/3 -translate-y-1\/3\"><\/div>\r\n<div class=\"absolute bottom-0 left-0 w-[600px] h-[600px] bg-indigo-900 rounded-full opacity-10 blur-3xl transform -translate-x-1\/3 translate-y-1\/3\"><\/div>\r\n<!-- Main Content Area -->\r\n<div class=\"flex flex-1 z-20 items-center px-24 relative\">\r\n<div class=\"w-full flex justify-between items-center\">\r\n<!-- Left: Text Content -->\r\n<div class=\"w-3\/5 pt-20\">\r\n<div class=\"flex items-center space-x-3 mb-6\">\r\n<div class=\"h-1 w-12 bg-blue-500\"><\/div>\r\n<p class=\"text-blue-400 font-bold tracking-widest uppercase\">Chapter Three<\/p>\r\n<\/div>\r\n<h1 class=\"text-7xl font-black text-white mb-8 tracking-tight leading-tight\">\r\n \u89e3\u51b3\u65b9\u6848\u603b\u89c8\r\n <\/h1>\r\n<div class=\"glass-panel p-8 rounded-r-lg max-w-2xl\">\r\n<h2 class=\"text-3xl text-gray-200 font-light mb-4\">\u4ece\u201c\u76d1\u6d4b\u70b9\u201d\u5230\u201c\u98ce\u9669\u573a\u201d\u7684\u4e00\u4f53\u5316\u611f\u77e5<\/h2>\r\n<p class=\"text-gray-400 text-lg leading-relaxed\">\r\n \u6784\u5efa\u5168\u65b9\u4f4d\u3001\u667a\u80fd\u5316\u7684\u707e\u5bb3\u9884\u8b66\u4e0e\u5e94\u6025\u54cd\u5e94\u4f53\u7cfb\u3002<br\/>\r\n \u5bf9\u5173\u952e\u57fa\u7840\u8bbe\u65bd\u4e0e\u5730\u8d28\u98ce\u9669\u533a\u5b9e\u73b0\u53ef\u89c6\u3001\u53ef\u6d4b\u3001\u53ef\u9884\u8b66\u3001\u53ef\u8054\u52a8\u3002\r\n <\/p>\r\n<\/div>\r\n<!-- Key Features -->\r\n<div class=\"flex space-x-8 mt-12\">\r\n<div class=\"flex flex-col items-center group cursor-pointer\">\r\n<div class=\"w-14 h-14 rounded-full bg-gray-800 border border-blue-500\/30 flex items-center justify-center mb-3 group-hover:bg-blue-900\/50 transition-colors\">\r\n<i class=\"fa-solid fa-layer-group text-blue-400 text-xl\"><\/i>\r\n<\/div>\r\n<p class=\"text-gray-400 text-sm font-medium\">\u591a\u6e90\u611f\u77e5<\/p>\r\n<\/div>\r\n<div class=\"flex flex-col items-center group cursor-pointer\">\r\n<div class=\"w-14 h-14 rounded-full bg-gray-800 border border-blue-500\/30 flex items-center justify-center mb-3 group-hover:bg-blue-900\/50 transition-colors\">\r\n<i class=\"fa-solid fa-microchip text-blue-400 text-xl\"><\/i>\r\n<\/div>\r\n<p class=\"text-gray-400 text-sm font-medium\">\u8fb9\u7f18\u8ba1\u7b97<\/p>\r\n<\/div>\r\n<div class=\"flex flex-col items-center group cursor-pointer\">\r\n<div class=\"w-14 h-14 rounded-full bg-gray-800 border border-blue-500\/30 flex items-center justify-center mb-3 group-hover:bg-blue-900\/50 transition-colors\">\r\n<i class=\"fa-solid fa-brain text-blue-400 text-xl\"><\/i>\r\n<\/div>\r\n<p class=\"text-gray-400 text-sm font-medium\">AI\u9884\u6d4b<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Right: Visual Icon\/Graphic -->\r\n<div class=\"w-2\/5 flex justify-center items-center\">\r\n<div class=\"relative w-96 h-96\">\r\n<!-- Hexagon Grid Decoration -->\r\n<div class=\"absolute inset-0 flex items-center justify-center opacity-20\">\r\n<svg fill=\"none\" height=\"100%\" viewbox=\"0 0 100 100\" width=\"100%\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n<path d=\"M50 0 L93.3 25 L93.3 75 L50 100 L6.7 75 L6.7 25 Z\" stroke=\"#38bdf8\" stroke-width=\"0.5\"><\/path>\r\n<path d=\"M50 10 L84.6 30 L84.6 70 L50 90 L15.4 70 L15.4 30 Z\" stroke=\"#38bdf8\" stroke-width=\"0.5\"><\/path>\r\n<\/svg>\r\n<\/div>\r\n<!-- Rotating Elements -->\r\n<div class=\"absolute inset-0 border-2 border-dashed border-blue-500\/30 rounded-full animate-spin-slow\" style=\"animation-duration: 30s;\"><\/div>\r\n<div class=\"absolute inset-10 border border-blue-500\/20 rounded-full\"><\/div>\r\n<!-- Central Icon -->\r\n<div class=\"absolute inset-0 flex items-center justify-center\">\r\n<div class=\"relative\">\r\n<i class=\"fa-solid fa-shield-halved text-9xl text-white opacity-90 glow-icon\"><\/i>\r\n<div class=\"absolute -top-4 -right-4 w-6 h-6 bg-green-500 rounded-full animate-ping\"><\/div>\r\n<div class=\"absolute -top-4 -right-4 w-6 h-6 bg-green-500 rounded-full border-2 border-white\"><\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Connected Nodes -->\r\n<div class=\"absolute top-10 left-0 bg-gray-900 border border-blue-500\/50 px-3 py-1 rounded-full shadow-lg flex items-center space-x-2\">\r\n<div class=\"w-2 h-2 bg-green-400 rounded-full animate-pulse\"><\/div>\r\n<span class=\"text-xs text-blue-200\">\u5b9e\u65f6\u76d1\u6d4b<\/span>\r\n<\/div>\r\n<div class=\"absolute bottom-20 right-0 bg-gray-900 border border-blue-500\/50 px-3 py-1 rounded-full shadow-lg flex items-center space-x-2\">\r\n<div class=\"w-2 h-2 bg-yellow-400 rounded-full animate-pulse\"><\/div>\r\n<span class=\"text-xs text-blue-200\">\u667a\u80fd\u9884\u8b66<\/span>\r\n<\/div>\r\n<div class=\"absolute top-1\/2 -right-10 bg-gray-900 border border-blue-500\/50 px-3 py-1 rounded-full shadow-lg flex items-center space-x-2\">\r\n<div class=\"w-2 h-2 bg-blue-400 rounded-full animate-pulse\"><\/div>\r\n<span class=\"text-xs text-blue-200\">\u5feb\u901f\u54cd\u5e94<\/span>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-13f7266 elementor-widget elementor-widget-html\" data-id=\"13f7266\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"zh-CN\" data-theme=\"light\" style=\"\"><head>\r\n<meta charset=\"utf-8\">\r\n<meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\">\r\n<title>\u7cfb\u7edf\u67b6\u6784\u4e0e\u9884\u8b66\u6d41\u7a0b<\/title>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.4.0\/css\/all.min.css\" rel=\"stylesheet\">\r\n<style>\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Noto Sans SC', sans-serif;\r\n background-color: #0f172a;\r\n }\r\n .slide-container {\r\n width: 1280px;\r\n height: 1000px;\r\n position: relative;\r\n background-color: #0f172a;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \/* Grid Background Pattern *\/\r\n .bg-grid {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-image: url('data:image\/svg+xml,%3Csvg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"%3E%3Cpath d=\"M0 0h40v40H0V0zm1 1h38v38H1V1z\" fill=\"%2338bdf8\" fill-opacity=\"0.05\" fill-rule=\"evenodd\"\/%3E%3C\/svg%3E');\r\n z-index: 0;\r\n }\r\n \r\n \/* Architecture Layer Styles *\/\r\n .layer-box {\r\n background-color: rgba(30, 41, 59, 0.8);\r\n border: 1px solid rgba(56, 189, 248, 0.3);\r\n backdrop-filter: blur(5px);\r\n transition: all 0.3s ease;\r\n }\r\n \r\n .layer-cloud {\r\n border-top: 3px solid #3b82f6;\r\n }\r\n .layer-edge {\r\n border-top: 3px solid #8b5cf6;\r\n }\r\n .layer-device {\r\n border-top: 3px solid #10b981;\r\n }\r\n \r\n \/* Flow Arrows *\/\r\n .flow-arrow {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n color: rgba(56, 189, 248, 0.5);\r\n }\r\n .flow-line {\r\n width: 2px;\r\n height: 20px;\r\n background-color: rgba(56, 189, 248, 0.3);\r\n }\r\n .flow-head {\r\n font-size: 12px;\r\n }\r\n\r\n \/* Process Steps *\/\r\n .process-step {\r\n position: relative;\r\n background-color: rgba(15, 23, 42, 0.6);\r\n border: 1px solid rgba(148, 163, 184, 0.2);\r\n padding: 10px;\r\n border-radius: 8px;\r\n }\r\n .process-step::after {\r\n content: '';\r\n position: absolute;\r\n right: -14px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n border-left: 8px solid rgba(148, 163, 184, 0.4);\r\n border-top: 6px solid transparent;\r\n border-bottom: 6px solid transparent;\r\n }\r\n .process-step:last-child::after {\r\n display: none;\r\n }\r\n \r\n \/* Video Container *\/\r\n .video-container {\r\n background-color: #1e293b;\r\n border: 1px solid rgba(56, 189, 248, 0.2);\r\n position: relative;\r\n overflow: hidden;\r\n cursor: pointer;\r\n }\r\n .play-btn {\r\n background-color: rgba(59, 130, 246, 0.9);\r\n box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);\r\n }\r\n <\/style>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400&display=swap\" rel=\"stylesheet\"><link href=\"https:\/\/fonts.googleapis.com\/css2?family=Open%20Sans:wght@400&display=swap\" rel=\"stylesheet\"><link href=\"https:\/\/fonts.googleapis.com\/css2?family=Google%20Sans:wght@400&display=swap\" rel=\"stylesheet\"><link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto%20Sans%20JP:wght@400&display=swap\" rel=\"stylesheet\"><link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400&display=swap\" rel=\"stylesheet\"><\/head>\r\n<body style=\"\" autocomplete=\"off\">\r\n<div class=\"slide-container\">\r\n<!-- Background -->\r\n<div class=\"bg-grid\"><\/div>\r\n<div class=\"absolute bottom-0 right-0 w-[500px] h-[500px] bg-blue-900 rounded-full opacity-10 blur-3xl\"><\/div>\r\n<!-- Header -->\r\n<div class=\"flex items-center justify-between px-12 pt-8 pb-2 z-10\">\r\n<div>\r\n<div class=\"flex items-center space-x-3 mb-2\">\r\n<span class=\"px-2 py-1 bg-blue-900\/50 text-blue-400 text-xs font-bold rounded border border-blue-700\/50\">SYSTEM ARCHITECTURE<\/span>\r\n<span class=\"text-gray-500 text-sm\">\/ 03 SOLUTION<\/span>\r\n<\/div>\r\n<h1 class=\"text-3xl font-bold text-white tracking-tight\">\u7cfb\u7edf\u67b6\u6784\u4e0e\u9884\u8b66\u6d41\u7a0b<\/h1>\r\n<div class=\"h-1 w-20 bg-blue-500 mt-2\"><\/div>\r\n<\/div>\r\n<div class=\"flex items-center space-x-2 text-gray-400 text-sm\">\r\n<i class=\"fa-solid fa-server\"><\/i>\r\n<span>\u7aef - \u8fb9 - \u4e91 \u534f\u540c<\/span>\r\n<\/div>\r\n<\/div>\r\n<!-- Main Content -->\r\n<div class=\"flex flex-1 px-12 py-4 z-10 space-x-6\">\r\n<!-- Left: Architecture Diagram (Vertical) -->\r\n<div class=\"w-2\/3 flex flex-col space-y-3 h-full pb-6\">\r\n<!-- Cloud Layer -->\r\n<div class=\"layer-box layer-cloud rounded-xl p-4 flex-1 flex flex-col relative\">\r\n<div class=\"absolute -left-3 top-4 bg-blue-600 text-white text-xs font-bold px-2 py-1 rounded shadow-lg\">\u4e91\u7aef Cloud<\/div>\r\n<div class=\"flex justify-between items-start ml-12 h-full\">\r\n<div class=\"w-1\/3 pr-2\">\r\n<h4 class=\"text-blue-300 font-bold mb-2 text-sm\"><i class=\"fa-solid fa-brain mr-2\"><\/i>\u878d\u5408\u5f15\u64ce<\/h4>\r\n<ul class=\"text-gray-400 text-xs space-y-1\">\r\n<li>\u2022 \u591a\u6e90\u6570\u636e\u6e05\u6d17\u53bb\u566a<\/li>\r\n<li>\u2022 \u5730\u8d28\u5f62\u53d8-\u96e8\u6d2a\u8026\u5408\u5206\u6790<\/li>\r\n<li>\u2022 \u6570\u5b57\u5b6a\u751f\u573a\u666f\u6620\u5c04<\/li>\r\n<\/ul>\r\n<\/div>\r\n<div class=\"w-1\/3 px-2 border-l border-r border-gray-700\">\r\n<h4 class=\"text-blue-300 font-bold mb-2 text-sm\"><i class=\"fa-solid fa-chart-line mr-2\"><\/i>AI \u9884\u6d4b<\/h4>\r\n<ul class=\"text-gray-400 text-xs space-y-1\">\r\n<li>\u2022 \u65f6\u5e8f\u8d8b\u52bf\u9884\u6d4b (LSTM)<\/li>\r\n<li>\u2022 \u52a8\u6001\u9608\u503c\u81ea\u9002\u5e94<\/li>\r\n<li>\u2022 \u707e\u5bb3\u98ce\u9669\u7b49\u7ea7\u7814\u5224<\/li>\r\n<\/ul>\r\n<\/div>\r\n<div class=\"w-1\/3 pl-2\">\r\n<h4 class=\"text-blue-300 font-bold mb-2 text-sm\"><i class=\"fa-solid fa-desktop mr-2\"><\/i>\u5e94\u7528\u670d\u52a1<\/h4>\r\n<ul class=\"text-gray-400 text-xs space-y-1\">\r\n<li>\u2022 \u53ef\u89c6\u5316\u6307\u6325\u5927\u5c4f<\/li>\r\n<li>\u2022 \u9884\u8b66\u5de5\u5355\u5206\u53d1<\/li>\r\n<li>\u2022 \u5e94\u6025\u9884\u6848\u8054\u52a8<\/li><li>\u2022 \u65e0\u4eba\u673a\u8054\u52a8<\/li>\r\n<li>\u2022 \u667a\u80fd\u9525\u6876\u8054\u52a8<\/li>\r\n\r\n<\/ul>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Connection Arrows -->\r\n<div class=\"flex justify-center -my-1 z-10\">\r\n<div class=\"bg-gray-800 px-3 py-1 rounded-full text-xs text-gray-500 border border-gray-700 flex items-center\">\r\n<i class=\"fa-solid fa-arrow-up-down mr-2 text-blue-500\"><\/i> 4G \/ 5G \/ \u5317\u6597\u77ed\u62a5\u6587\r\n <\/div>\r\n<\/div>\r\n<!-- Edge Layer -->\r\n<div class=\"layer-box layer-edge rounded-xl p-4 h-32 flex flex-col relative\">\r\n<div class=\"absolute -left-3 top-4 bg-purple-600 text-white text-xs font-bold px-2 py-1 rounded shadow-lg\">\u8fb9\u7f18 Edge<\/div>\r\n<div class=\"flex items-center ml-12 h-full\">\r\n<div class=\"w-1\/2 pr-4 border-r border-gray-700\">\r\n<h4 class=\"text-purple-300 font-bold mb-1 text-sm\"><i class=\"fa-solid fa-microchip mr-2\"><\/i>\u667a\u80fd\u7f51\u5173<\/h4>\r\n<p class=\"text-gray-400 text-xs\">\u534f\u8bae\u89e3\u6790 \u00b7 \u672c\u5730\u7f13\u5b58(72h) \u00b7 \u65ad\u70b9\u7eed\u4f20<\/p>\r\n<\/div>\r\n<div class=\"w-1\/2 pl-4\">\r\n<h4 class=\"text-purple-300 font-bold mb-1 text-sm\"><i class=\"fa-solid fa-bolt mr-2\"><\/i>\u5373\u65f6\u544a\u8b66<\/h4>\r\n<p class=\"text-gray-400 text-xs\">\u672c\u5730\u58f0\u5149\u62a5\u8b66 \u00b7 \u6beb\u79d2\u7ea7\u8054\u52a8\u54cd\u5e94<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Connection Arrows -->\r\n<div class=\"flex justify-center -my-1 z-10\">\r\n<div class=\"bg-gray-800 px-3 py-1 rounded-full text-xs text-gray-500 border border-gray-700 flex items-center\">\r\n<i class=\"fa-solid fa-arrow-up mr-2 text-green-500\"><\/i> LoRa \/ NB-IoT \/ \u6709\u7ebf\r\n <\/div>\r\n<\/div>\r\n<!-- Device Layer -->\r\n<div class=\"layer-box layer-device rounded-xl p-4 h-28 flex flex-col relative\">\r\n<div class=\"absolute -left-3 top-4 bg-green-600 text-white text-xs font-bold px-2 py-1 rounded shadow-lg\">\u611f\u77e5 Device<\/div>\r\n<div class=\"grid grid-cols-4 gap-2 ml-12 h-full items-center\">\r\n<div class=\"text-center\" style=\"position: relative; transform: translate(10.6381px, 0.967118px);\">\r\n<div class=\"bg-gray-900\/50 p-2 rounded mb-1 mx-auto w-10 h-10 flex items-center justify-center border border-gray-700\" style=\"position: relative; transform: translate(-50.2888px, 7.7368px);\">\r\n<i class=\"fa-solid fa-satellite text-green-400\"><\/i>\r\n<\/div><div class=\"bg-gray-900\/50 p-2 rounded mb-1 mx-auto w-10 h-10 flex items-center justify-center border border-gray-700\" style=\"position: relative; transform: translate(81.2357px, -37.7166px);\">\r\n<i class=\"fa-solid fa-satellite text-green-400\"><\/i>\r\n<\/div>\r\n<p class=\"text-gray-400 text-[10px]\" style=\"position: relative; transform: translate(-44.4862px, -32.8812px);\">GNSS\/InSAR<\/p>\r\n<\/div>\r\n<div class=\"text-center\">\r\n<div class=\"bg-gray-900\/50 p-2 rounded mb-1 mx-auto w-10 h-10 flex items-center justify-center border border-gray-700\" style=\"position: relative; transform: translate(44.4862px, -3.86837px);\">\r\n<i class=\"fa-solid fa-ruler-combined text-green-400\"><\/i>\r\n<\/div>\r\n<p class=\"text-gray-400 text-[10px]\" style=\"position: relative; transform: translate(-79.3016px, 3.86836px);\">\u96f7\u8fbe\u611f\u77e5<\/p><p class=\"text-gray-400 text-[10px]\" style=\"position: relative; transform: translate(44.4862px, -20.309px);\">\u88c2\u7f1d\/\u503e\u89d2\/\u5e94\u529b<\/p>\r\n<\/div>\r\n<div class=\"text-center\">\r\n<div class=\"bg-gray-900\/50 p-2 rounded mb-1 mx-auto w-10 h-10 flex items-center justify-center border border-gray-700\" style=\"position: relative; transform: translate(7.73674px, -16.4406px);\">\r\n<i class=\"fa-solid fa-cloud-rain text-blue-400\"><\/i>\r\n<\/div>\r\n<p class=\"text-gray-400 text-[10px]\" style=\"position: relative; transform: translate(9.67092px, -8.70383px);\">\u5fae\u6c14\u8c61\/\u6c34\u4f4d<\/p>\r\n<\/div>\r\n<div class=\"text-center\">\r\n<div class=\"bg-gray-900\/50 p-2 rounded mb-1 mx-auto w-10 h-10 flex items-center justify-center border border-gray-700\" style=\"position: relative; transform: translate(-19.3419px, -17.4077px);\">\r\n<i class=\"fa-solid fa-video text-red-400\"><\/i>\r\n<\/div>\r\n<p class=\"text-gray-400 text-[10px]\" style=\"position: relative; transform: translate(-18.3747px, -9.67091px);\">\u89c6\u9891\u76d1\u63a7<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Right: Warning Flow & Video -->\r\n<div class=\"w-1\/3 flex flex-col h-full pb-6 space-y-4\">\r\n<!-- Warning Flow Chart -->\r\n<div class=\"bg-gray-800\/50 rounded-xl p-5 border border-gray-700 flex-1 flex flex-col\">\r\n<h3 class=\"text-white font-bold mb-4 border-b border-gray-700 pb-2 flex items-center\">\r\n<i class=\"fa-solid fa-list-check text-blue-500 mr-2\"><\/i>\u9884\u8b66\u54cd\u5e94\u95ed\u73af\r\n <\/h3>\r\n<div class=\"space-y-3 flex-1 overflow-y-auto pr-1\">\r\n<div class=\"process-step flex items-center\">\r\n<div class=\"w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center text-blue-400 mr-3 flex-shrink-0 font-bold border border-gray-600\">1<\/div>\r\n<div>\r\n<h4 class=\"text-blue-200 text-xs font-bold\">\u591a\u6e90\u91c7\u96c6<\/h4>\r\n<p class=\"text-gray-500 text-[10px]\">\u5168\u5929\u5019\u9ad8\u9891\u6570\u636e\u83b7\u53d6<\/p>\r\n<\/div>\r\n<\/div>\r\n<div class=\"process-step flex items-center\">\r\n<div class=\"w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center text-blue-400 mr-3 flex-shrink-0 font-bold border border-gray-600\">2<\/div>\r\n<div>\r\n<h4 class=\"text-blue-200 text-xs font-bold\">\u7279\u5f81\u63d0\u53d6 & \u878d\u5408<\/h4>\r\n<p class=\"text-gray-500 text-[10px]\">\u53bb\u9664\u73af\u5883\u566a\u58f0\uff0c\u63d0\u53d6\u5f62\u53d8\u8d8b\u52bf<\/p>\r\n<\/div>\r\n<\/div>\r\n<div class=\"process-step flex items-center border-blue-500\/30 bg-blue-900\/10\">\r\n<div class=\"w-8 h-8 rounded-full bg-blue-900 flex items-center justify-center text-blue-400 mr-3 flex-shrink-0 font-bold border border-blue-500\">3<\/div>\r\n<div>\r\n<h4 class=\"text-blue-300 text-xs font-bold\">\u667a\u80fd\u5224\u8bc6 & \u9884\u8b66<\/h4>\r\n<p class=\"text-gray-400 text-[10px]\">\u591a\u6307\u6807\u8054\u5224\uff0c\u81ea\u52a8\u89e6\u53d1\u5206\u7ea7\u544a\u8b66<\/p>\r\n<\/div>\r\n<\/div>\r\n<div class=\"process-step flex items-center border-red-500\/30 bg-red-900\/10\">\r\n<div class=\"w-8 h-8 rounded-full bg-red-900 flex items-center justify-center text-red-400 mr-3 flex-shrink-0 font-bold border border-red-500\">4<\/div>\r\n<div>\r\n<h4 class=\"text-red-300 text-xs font-bold\">\u6307\u6325\u8054\u52a8<\/h4>\r\n<p class=\"text-gray-400 text-[10px]\">\u77ed\u4fe1\/\u58f0\u5149\/\u5927\u5c4f\u63a8\u9001\uff0c\u542f\u52a8\u9884\u6848<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Video Placeholder -->\r\n<div class=\"video-container rounded-xl h-40 flex items-center justify-center group cursor-pointer\" onclick=\"window.open('https:\/\/www.bing.com\/videos\/riverview\/relatedvideo?q=%e5%9c%b0%e8%b4%a8%e7%81%be%e5%ae%b3%e7%9b%91%e6%b5%8b%e9%a2%84%e8%ad%a5%e4%b8%93%e9%a2%98&&mid=1AF05F95105ABC08F9091AF05F95105ABC08F909&FORM=VCGVRP', '_blank')\">\r\n<!-- Thumbnail Background -->\r\n<div class=\"absolute inset-0 bg-gray-800\">\r\n<div class=\"w-full h-full opacity-50 bg-cover bg-center\" style=\"background-image: url("https:\/\/page.gensparksite.com\/slides_images\/6fab05d49d5a27187887ae50b257c165.webp");\"><\/div>\r\n<\/div>\r\n<div class=\"z-10 text-center\">\r\n<div class=\"w-12 h-12 play-btn rounded-full flex items-center justify-center mx-auto mb-2 text-white transition-transform group-hover:scale-110\">\r\n<i class=\"fa-solid fa-play ml-1\"><\/i>\r\n<\/div>\r\n<p class=\"text-white text-xs font-bold shadow-black drop-shadow-md\">CCTV: \u5730\u8d28\u707e\u5bb3\u76d1\u6d4b\u9884\u8b66\u4e13\u9898<\/p>\r\n<p class=\"text-blue-200 text-[10px] mt-1\">\u70b9\u51fb\u89c2\u770b\u592e\u89c6\u62a5\u9053<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n<\/body><\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7ccb722 elementor-widget elementor-widget-html\" data-id=\"7ccb722\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n\r\n<html lang=\"zh-CN\">\r\n<head>\r\n<meta charset=\"utf-8\"\/>\r\n<meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\"\/>\r\n<title>\u7ae0\u8282\u5c01\u9762\uff1a\u5b9e\u9645\u6848\u4f8b\u5206\u6790<\/title>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\"\/>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap\" rel=\"stylesheet\"\/>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.4.0\/css\/all.min.css\" rel=\"stylesheet\"\/>\r\n<style>\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Noto Sans SC', sans-serif;\r\n background-color: #0f172a;\r\n }\r\n .slide-container {\r\n width: 1280px;\r\n height: 1000px;\r\n position: relative;\r\n background-color: #0f172a;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \/* Grid Background Pattern *\/\r\n .bg-grid {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n \/* Removed linear-gradient for export compatibility *\/\r\n background-color: #0f172a;\r\n background-image: url('data:image\/svg+xml;utf8,<svg width=\"40\" height=\"40\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><defs><pattern id=\"grid\" width=\"40\" height=\"40\" patternUnits=\"userSpaceOnUse\"><path d=\"M 40 0 L 0 0 0 40\" fill=\"none\" stroke=\"rgba(56, 189, 248, 0.05)\" stroke-width=\"1\"\/><\/pattern><\/defs><rect width=\"100%\" height=\"100%\" fill=\"url(%23grid)\" \/><\/svg>');\r\n z-index: 0;\r\n }\r\n .chapter-number-huge {\r\n font-size: 12rem;\r\n font-weight: 900;\r\n line-height: 1;\r\n color: transparent;\r\n -webkit-text-stroke: 4px rgba(255, 255, 255, 0.1);\r\n position: absolute;\r\n left: 60px;\r\n top: 60px;\r\n z-index: 0;\r\n opacity: 0.5;\r\n }\r\n .glass-panel {\r\n background: rgba(30, 41, 59, 0.4);\r\n border-left: 6px solid #fbbf24;\r\n backdrop-filter: blur(4px);\r\n }\r\n .glow-icon {\r\n filter: drop-shadow(0 0 15px rgba(251, 191, 36, 0.6));\r\n }\r\n .terrain-line {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 300px;\r\n background: url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 1440 320\"><path fill=\"%231e293b\" fill-opacity=\"0.8\" d=\"M0,224L48,213.3C96,203,192,181,288,181.3C384,181,480,203,576,224C672,245,768,267,864,261.3C960,256,1056,224,1152,197.3C1248,171,1344,149,1392,138.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z\"><\/path><\/svg>') no-repeat bottom;\r\n background-size: cover;\r\n z-index: 1;\r\n }\r\n \/* Circular glow replacement for gradients *\/\r\n .circle-glow {\r\n position: absolute;\r\n border-radius: 9999px;\r\n background-color: rgba(251, 191, 36, 0.05); \/* Amber color for warning theme *\/\r\n filter: blur(60px);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"slide-container\">\r\n<!-- Background Grid -->\r\n<div class=\"bg-grid\"><\/div>\r\n<!-- Giant Chapter Number -->\r\n<div class=\"chapter-number-huge\">04<\/div>\r\n<!-- Decorative Background Elements -->\r\n<div class=\"circle-glow w-[800px] h-[800px] top-0 right-0 transform translate-x-1\/3 -translate-y-1\/3\"><\/div>\r\n<div class=\"circle-glow w-[600px] h-[600px] bottom-0 left-0 transform -translate-x-1\/3 translate-y-1\/3\"><\/div>\r\n<!-- Terrain Decoration -->\r\n<div class=\"terrain-line\"><\/div>\r\n<!-- Main Content Area -->\r\n<div class=\"flex flex-1 z-20 items-center px-24 relative\">\r\n<div class=\"w-full flex justify-between items-center\">\r\n<!-- Left: Text Content -->\r\n<div class=\"w-3\/5 pt-20\">\r\n<div class=\"flex items-center space-x-3 mb-6\">\r\n<div class=\"h-1 w-12 bg-yellow-500\"><\/div>\r\n<p class=\"text-yellow-400 font-bold tracking-widest uppercase\">Chapter Four<\/p>\r\n<\/div>\r\n<h1 class=\"text-7xl font-black text-white mb-8 tracking-tight leading-tight\">\r\n \u5b9e\u9645\u6848\u4f8b\u5206\u6790\r\n <\/h1>\r\n<div class=\"glass-panel p-8 rounded-r-lg max-w-2xl\">\r\n<h2 class=\"text-3xl text-gray-200 font-light mb-4\">\u6280\u672f\u590d\u76d8\u4e0e\u9884\u8b66\u63a8\u6f14<\/h2>\r\n<p class=\"text-gray-400 text-lg leading-relaxed\">\r\n \u6df1\u5ea6\u5256\u6790<strong>\u821f\u66f2\u6ce5\u77f3\u6d41<\/strong>\u3001<strong>\u5546\u6d1b\u6865\u6881\u57ae\u584c<\/strong>\u3001<strong>\u84dd\u7530\u66b4\u96e8\u5c71\u6d2a<\/strong>\u4e09\u5927\u5178\u578b\u6848\u4f8b\u3002<br\/>\r\n \u590d\u76d8\u707e\u96be\u5f62\u6210\u673a\u5236\uff0c\u63a8\u6f14\u667a\u80fd\u76d1\u6d4b\u9884\u8b66\u7684\u53ef\u884c\u6027\u4e0e\u65f6\u95f4\u7a97\u53e3\u3002\r\n <\/p>\r\n<\/div>\r\n<!-- Key Points -->\r\n<div class=\"flex space-x-8 mt-12\">\r\n<div class=\"flex flex-col items-center\">\r\n<div class=\"w-12 h-12 rounded-full bg-gray-800 border border-gray-600 flex items-center justify-center mb-3\">\r\n<i class=\"fa-solid fa-cloud-bolt text-yellow-400 text-xl\"><\/i>\r\n<\/div>\r\n<p class=\"text-gray-400 text-sm\">\u821f\u66f2\u6ce5\u77f3\u6d41<\/p>\r\n<\/div>\r\n<div class=\"flex flex-col items-center\">\r\n<div class=\"w-12 h-12 rounded-full bg-gray-800 border border-gray-600 flex items-center justify-center mb-3\">\r\n<i class=\"fa-solid fa-bridge-water text-yellow-400 text-xl\"><\/i>\r\n<\/div>\r\n<p class=\"text-gray-400 text-sm\">\u5546\u6d1b\u6865\u6881<\/p>\r\n<\/div>\r\n<div class=\"flex flex-col items-center\">\r\n<div class=\"w-12 h-12 rounded-full bg-gray-800 border border-gray-600 flex items-center justify-center mb-3\">\r\n<i class=\"fa-solid fa-house-flood-water text-yellow-400 text-xl\"><\/i>\r\n<\/div>\r\n<p class=\"text-gray-400 text-sm\">\u84dd\u7530\u5c71\u6d2a<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Right: Visual Icon\/Graphic -->\r\n<div class=\"w-2\/5 flex justify-center items-center\">\r\n<div class=\"relative w-80 h-80\">\r\n<!-- Use solid colors with opacity instead of gradients for compatibility -->\r\n<div class=\"absolute inset-0 bg-yellow-500 rounded-full opacity-5 blur-xl animate-pulse\"><\/div>\r\n<div class=\"absolute inset-0 border-2 border-dashed border-yellow-500\/30 rounded-full animate-spin-slow\" style=\"animation-duration: 20s;\"><\/div>\r\n<div class=\"absolute inset-4 border border-yellow-500\/20 rounded-full\"><\/div>\r\n<!-- Central Icon -->\r\n<div class=\"absolute inset-0 flex items-center justify-center\">\r\n<i class=\"fa-solid fa-file-shield text-9xl text-white opacity-90 glow-icon\"><\/i>\r\n<\/div>\r\n<!-- Floating Satellite Icons -->\r\n<div class=\"absolute top-0 left-1\/2 transform -translate-x-1\/2 -translate-y-4 bg-gray-900 border border-yellow-500\/50 p-2 rounded-lg shadow-lg\">\r\n<i class=\"fa-solid fa-stopwatch text-yellow-400\"><\/i>\r\n<\/div>\r\n<div class=\"absolute bottom-10 right-0 bg-gray-900 border border-yellow-500\/50 p-2 rounded-lg shadow-lg\">\r\n<i class=\"fa-solid fa-triangle-exclamation text-yellow-400\"><\/i>\r\n<\/div>\r\n<div class=\"absolute bottom-10 left-0 bg-gray-900 border border-yellow-500\/50 p-2 rounded-lg shadow-lg\">\r\n<i class=\"fa-solid fa-clipboard-check text-yellow-400\"><\/i>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-90ff59e elementor-widget elementor-widget-html\" data-id=\"90ff59e\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n\r\n<html data-theme=\"light\" lang=\"zh-CN\">\r\n<head>\r\n<meta charset=\"utf-8\"\/>\r\n<meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\"\/>\r\n<title>\u6848\u4f8b01\uff1a\u821f\u66f2\u6ce5\u77f3\u6d41\uff082010.08\uff09<\/title>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\"\/>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap\" rel=\"stylesheet\"\/>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.4.0\/css\/all.min.css\" rel=\"stylesheet\"\/>\r\n<style>\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Noto Sans SC', sans-serif;\r\n background-color: #0f172a;\r\n }\r\n .slide-container {\r\n width: 1280px;\r\n height: 1000px;\r\n position: relative;\r\n background-color: #0f172a;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n .bg-grid {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-image: url('data:image\/svg+xml,%3Csvg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"%3E%3Cg fill=\"%2338bdf8\" fill-opacity=\"0.05\" fill-rule=\"evenodd\"%3E%3Cpath d=\"M0 40L40 0H20L0 20M40 40V20L20 40\"\/%3E%3C\/g%3E%3C\/svg%3E');\r\n z-index: 0;\r\n }\r\n .content-card {\r\n background: rgba(30, 41, 59, 0.6);\r\n border: 1px solid rgba(56, 189, 248, 0.2);\r\n backdrop-filter: blur(10px);\r\n }\r\n .monitor-item {\r\n border-left: 3px solid #3b82f6;\r\n padding-left: 1rem;\r\n margin-bottom: 1rem;\r\n transition: all 0.3s ease;\r\n }\r\n .monitor-item:hover {\r\n background: rgba(59, 130, 246, 0.1);\r\n padding-right: 0.5rem;\r\n border-radius: 0 4px 4px 0;\r\n }\r\n .video-container {\r\n position: relative;\r\n overflow: hidden;\r\n border-radius: 0.75rem;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);\r\n border: 1px solid rgba(56, 189, 248, 0.3);\r\n }\r\n .play-overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0, 0, 0, 0.3);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n opacity: 0;\r\n transition: opacity 0.3s;\r\n cursor: pointer;\r\n }\r\n .video-container:hover .play-overlay {\r\n opacity: 1;\r\n }\r\n .stat-badge {\r\n background: rgba(15, 23, 42, 0.8);\r\n border: 1px solid rgba(56, 189, 248, 0.3);\r\n border-radius: 0.5rem;\r\n padding: 0.5rem 1rem;\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"slide-container\">\r\n<!-- Background -->\r\n<div class=\"bg-grid\"><\/div>\r\n<div class=\"absolute bottom-0 left-0 w-[500px] h-[500px] bg-blue-900 rounded-full opacity-10 blur-3xl\"><\/div>\r\n<div class=\"absolute top-0 right-0 w-[400px] h-[400px] bg-red-900 rounded-full opacity-5 blur-3xl\"><\/div>\r\n<!-- Header -->\r\n<div class=\"flex items-center justify-between px-12 pt-8 pb-2 z-10\">\r\n<div>\r\n<div class=\"flex items-center space-x-3 mb-2\">\r\n<span class=\"px-2 py-1 bg-red-900\/50 text-red-400 text-xs font-bold rounded border border-red-700\/50\">\u91cd\u5927\u707e\u5bb3\u6848\u4f8b<\/span>\r\n<span class=\"text-gray-500 text-sm\">\/ 04 CASE STUDY<\/span>\r\n<\/div>\r\n<h1 class=\"text-3xl font-bold text-white tracking-tight\">\u6848\u4f8b01\uff1a\u821f\u66f2\u6ce5\u77f3\u6d41\uff082010.08\uff09<\/h1>\r\n<div class=\"h-1 w-20 bg-red-500 mt-2\"><\/div>\r\n<\/div>\r\n<div class=\"flex items-center space-x-4\">\r\n<div class=\"text-right\">\r\n<p class=\"text-xs text-gray-400\">HISTORICAL REVIEW<\/p>\r\n<p class=\"text-sm font-bold text-blue-300\">\u6280\u672f\u590d\u76d8\u4e0e\u9884\u8b66\u63a8\u6f14<\/p>\r\n<\/div>\r\n<i class=\"fa-solid fa-history text-2xl text-red-500\"><\/i>\r\n<\/div>\r\n<\/div>\r\n<!-- Main Content -->\r\n<div class=\"flex flex-1 px-12 py-6 space-x-8 z-10 overflow-hidden\">\r\n<!-- Left Column: Case Details -->\r\n<div class=\"w-5\/12 flex flex-col h-full space-y-4\">\r\n<!-- Event Background -->\r\n<div class=\"content-card rounded-xl p-6 relative overflow-hidden group\">\r\n<div class=\"absolute top-0 right-0 p-3 opacity-10 group-hover:opacity-20 transition-opacity\">\r\n<i class=\"fa-solid fa-cloud-bolt text-6xl text-white\"><\/i>\r\n<\/div>\r\n<h3 class=\"flex items-center text-lg font-bold text-white mb-3\">\r\n<i class=\"fa-solid fa-triangle-exclamation text-red-500 mr-2\"><\/i>\r\n \u4e8b\u4ef6\u80cc\u666f\u4e0e\u5f71\u54cd\r\n <\/h3>\r\n<div class=\"flex justify-between items-start mb-4\">\r\n<div class=\"w-2\/3\">\r\n<p class=\"text-gray-300 text-sm leading-relaxed mb-2\">\r\n 2010\u5e748\u67087\u65e5\u6df1\u591c\uff0c\u7518\u8083\u7701\u7518\u5357\u85cf\u65cf\u81ea\u6cbb\u5dde\u821f\u66f2\u53bf\u7a81\u53d1\u7279\u5927\u5c71\u6d2a\u6ce5\u77f3\u6d41\u707e\u5bb3\u3002\u6ce5\u77f3\u6d41\u957f\u7ea65\u516c\u91cc\uff0c\u5e73\u5747\u5bbd\u5ea6300\u7c73\uff0c\u5e73\u5747\u539a\u5ea65\u7c73\uff0c\u603b\u4f53\u79ef180\u4e07\u7acb\u65b9\u7c73\u3002\r\n <\/p>\r\n<\/div>\r\n<div class=\"w-1\/3 flex flex-col items-end space-y-2\">\r\n<div class=\"bg-red-900\/40 border border-red-500\/30 px-3 py-1 rounded text-center w-full\">\r\n<p class=\"text-red-400 text-xs font-bold\">\u9047\u96be\u4eba\u6570<\/p>\r\n<p class=\"text-white text-xl font-black\">1,471<span class=\"text-xs font-normal ml-1\">\u4eba<\/span><\/p>\r\n<\/div>\r\n<div class=\"bg-orange-900\/40 border border-orange-500\/30 px-3 py-1 rounded text-center w-full\">\r\n\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"border-t border-gray-700\/50 pt-4 mt-2\">\r\n<p class=\"text-blue-300 font-bold text-sm mb-2\"><i class=\"fa-solid fa-magnifying-glass mr-2\"><\/i>\u6210\u56e0\u673a\u5236\u5206\u6790<\/p>\r\n<div class=\"grid grid-cols-2 gap-3\">\r\n<div class=\"bg-gray-800\/50 p-2 rounded border-l-2 border-blue-500\">\r\n<p class=\"text-gray-400 text-xs\">\u5730\u5f62\u5730\u8c8c<\/p>\r\n<p class=\"text-gray-200 text-xs font-bold\">\u9ad8\u5c71\u5ce1\u8c37\uff0c\u5ca9\u4f53\u7834\u788e\uff0c\u6c76\u5ddd\u5730\u9707\u5bfc\u81f4\u571f\u8d28\u677e\u6563<\/p>\r\n<\/div>\r\n<div class=\"bg-gray-800\/50 p-2 rounded border-l-2 border-blue-500\">\r\n<p class=\"text-gray-400 text-xs\">\u89e6\u53d1\u56e0\u7d20<\/p>\r\n<p class=\"text-gray-200 text-xs font-bold\">\u77ed\u5386\u65f6\u5f3a\u964d\u96e8\uff0c40\u5206\u949f\u964d\u96e8\u91cf\u8fbe96.8mm<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Monitoring & Warning -->\r\n<div class=\"content-card rounded-xl p-6 flex-1 flex flex-col justify-between\">\r\n<h3 class=\"flex items-center text-lg font-bold text-white mb-3\">\r\n<i class=\"fa-solid fa-radar text-blue-400 mr-2\"><\/i>\r\n \u667a\u80fd\u76d1\u6d4b\u4e0e\u9884\u8b66\u63a8\u6f14\r\n <\/h3>\r\n<div class=\"space-y-3 flex-1 overflow-y-auto pr-2 custom-scrollbar\">\r\n<div class=\"monitor-item border-blue-500\">\r\n<p class=\"text-white font-bold text-sm flex justify-between\">\r\n<span>\u964d\u96e8\u91cf\u76d1\u6d4b (\u96e8\u91cf\u8ba1)<\/span>\r\n<span class=\"text-blue-400 text-xs bg-blue-900\/50 px-2 py-0.5 rounded\">\u6838\u5fc3\u6307\u6807<\/span>\r\n<\/p>\r\n<p class=\"text-gray-400 text-xs mt-1\">\u76d1\u6d4b\u5c0f\u65f6\u96e8\u5f3a\u4e0e\u7d2f\u8ba1\u96e8\u91cf\uff0c\u5f53\u964d\u96e8\u5f3a\u5ea6 >50mm\/h \u65f6\u89e6\u53d1\u6a59\u8272\u9884\u8b66\u3002<\/p>\r\n<\/div>\r\n<div class=\"monitor-item border-green-500\">\r\n<p class=\"text-white font-bold text-sm flex justify-between\">\r\n<span>\u571f\u58e4\u542b\u6c34\u7387 (\u6c34\u5206\u8ba1)<\/span>\r\n<span class=\"text-green-400 text-xs bg-green-900\/50 px-2 py-0.5 rounded\">\u524d\u5146\u6307\u6807<\/span>\r\n<\/p>\r\n<p class=\"text-gray-400 text-xs mt-1\">\u76d1\u6d4b\u6ed1\u5761\u4f53\u9971\u548c\u5ea6\uff0c\u5f53\u542b\u6c34\u7387\u63a5\u8fd1\u6db2\u9650\u65f6\uff0c\u571f\u4f53\u6297\u526a\u5f3a\u5ea6\u6025\u5267\u4e0b\u964d\u3002<\/p>\r\n<\/div>\r\n<div class=\"monitor-item border-yellow-500\">\r\n<p class=\"text-white font-bold text-sm flex justify-between\">\r\n<span>\u5fae\u9707\u4e0e\u6b21\u58f0\u6ce2 (\u5fae\u9707\u4eea)<\/span>\r\n<span class=\"text-yellow-400 text-xs bg-yellow-900\/50 px-2 py-0.5 rounded\">\u4e34\u707e\u6307\u6807<\/span>\r\n<\/p>\r\n<p class=\"text-gray-400 text-xs mt-1\">\u6355\u6349\u6ce5\u77f3\u6d41\u8d77\u52a8\u65f6\u7684\u5730\u58f0\u9707\u52a8\uff0c\u6709\u6548\u8bc6\u522b\u6c9f\u9053\u5185\u6d41\u4f53\u8fd0\u52a8\u7279\u5f81\u3002<\/p>\r\n<\/div>\r\n<\/div>\r\n<div class=\"mt-4 bg-gray-900\/60 p-3 rounded-lg border border-green-500\/30 flex items-center justify-between\">\r\n<div>\r\n<p class=\"text-green-400 text-xs font-bold uppercase\">\u9884\u8b66\u7a97\u53e3\u671f<\/p>\r\n<p class=\"text-white font-bold text-lg\">2 - 6 \u5c0f\u65f6<\/p>\r\n<\/div>\r\n<div class=\"text-right\">\r\n<p class=\"text-gray-400 text-xs\">\u82e5\u90e8\u7f72\u672c\u65b9\u6848\u53ef\u4e89\u53d6\u7684<\/p>\r\n<p class=\"text-gray-400 text-xs\">\u9ec4\u91d1\u64a4\u79bb\u65f6\u95f4<\/p>\r\n<\/div>\r\n<div class=\"h-10 w-10 bg-green-500\/20 rounded-full flex items-center justify-center border border-green-500\">\r\n<i class=\"fa-solid fa-hourglass-half text-green-400\"><\/i>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Right Column: Video & Visuals -->\r\n<div class=\"w-7\/12 flex flex-col h-full space-y-4\">\r\n<!-- Video Section -->\r\n<div class=\"video-container h-3\/5 w-full bg-black relative group\">\r\n<!-- Fallback Image \/ Cover -->\r\n<img decoding=\"async\" alt=\"\u821f\u66f2\u6ce5\u77f3\u6d41\u73b0\u573a\" class=\"w-full h-full object-cover opacity-80\" src=\"https:\/\/www.genspark.ai\/image_placeholder.png\"\/>\r\n<!-- Bilibili Video Embed (Simulated with overlay for export compatibility) -->\r\n<div class=\"absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-90\"><\/div>\r\n<div class=\"absolute bottom-6 left-6 right-6\">\r\n<div class=\"flex items-center space-x-2 mb-2\">\r\n<span class=\"bg-[#FB7299] text-white text-xs px-2 py-0.5 rounded font-bold\">Bilibili<\/span>\r\n<span class=\"text-gray-300 text-xs\">\u592e\u89c6\u65b0\u95fb\u8d44\u6599<\/span>\r\n<\/div>\r\n<h2 class=\"text-2xl font-bold text-white mb-2 leading-tight\">\u56de\u987e\u821f\u66f2\u7279\u5927\u5c71\u6d2a\u6ce5\u77f3\u6d41<\/h2>\r\n<p class=\"text-gray-300 text-sm line-clamp-2\">2010\u5e748\u67088\u65e5\uff0c\u7518\u8083\u821f\u66f2\u53d1\u751f\u7279\u5927\u6ce5\u77f3\u6d41\u707e\u5bb3\uff0c\u9020\u6210\u91cd\u5927\u4eba\u5458\u4f24\u4ea1\u3002\u672c\u89c6\u9891\u56de\u987e\u4e86\u5f53\u65f6\u7684\u707e\u60c5\u73b0\u573a\u4e0e\u6551\u63f4\u60c5\u51b5\uff0c\u8b66\u793a\u5730\u8d28\u707e\u5bb3\u7684\u7a81\u53d1\u6027\u4e0e\u7834\u574f\u529b\u3002<\/p>\r\n<\/div>\r\n<!-- Play Button Overlay -->\r\n<a class=\"play-overlay group-hover:opacity-100\" href=\"https:\/\/www.bilibili.com\/video\/BV1Zf4y1q7ig\/\" target=\"_blank\">\r\n<div class=\"w-20 h-20 bg-blue-500\/90 rounded-full flex items-center justify-center backdrop-blur-sm border-4 border-white\/20 shadow-2xl transform transition-transform group-hover:scale-110\">\r\n<i class=\"fa-solid fa-play text-white text-3xl ml-2\"><\/i>\r\n<\/div>\r\n<\/a>\r\n<\/div>\r\n<!-- Additional Visual\/Chart -->\r\n<div class=\"content-card rounded-xl p-4 flex-1 flex flex-col\">\r\n<h4 class=\"text-sm font-bold text-gray-300 mb-3 border-l-2 border-blue-500 pl-2\">\u5178\u578b\u6ce5\u77f3\u6d41\u9884\u8b66\u6a21\u578b\u793a\u610f<\/h4>\r\n<div class=\"flex-1 relative flex items-center justify-center bg-gray-900\/50 rounded-lg overflow-hidden border border-gray-700\/50\">\r\n<!-- Simplified Visual Chart -->\r\n<div class=\"w-full h-full p-4 flex items-end justify-between space-x-2\">\r\n<div class=\"w-1\/4 h-2\/5 bg-blue-900\/40 rounded-t relative group cursor-help\">\r\n<div class=\"absolute bottom-0 w-full bg-blue-500 transition-all duration-1000\" style=\"height: 40%;\"><\/div>\r\n<p class=\"absolute -top-6 w-full text-center text-xs text-gray-400\">\u964d\u96e8\u91cf<\/p>\r\n<\/div>\r\n<div class=\"w-1\/4 h-3\/5 bg-green-900\/40 rounded-t relative group cursor-help\">\r\n<div class=\"absolute bottom-0 w-full bg-green-500 transition-all duration-1000\" style=\"height: 70%;\"><\/div>\r\n<p class=\"absolute -top-6 w-full text-center text-xs text-gray-400\">\u542b\u6c34\u7387<\/p>\r\n<\/div>\r\n<div class=\"w-1\/4 h-4\/5 bg-yellow-900\/40 rounded-t relative group cursor-help\">\r\n<div class=\"absolute bottom-0 w-full bg-yellow-500 transition-all duration-1000\" style=\"height: 20%;\"><\/div>\r\n<p class=\"absolute -top-6 w-full text-center text-xs text-gray-400\">\u5730\u58f0<\/p>\r\n<\/div>\r\n<div class=\"w-1\/4 h-full bg-red-900\/40 rounded-t relative group cursor-help flex items-end justify-center\">\r\n<div class=\"w-full bg-red-500\/20 h-full absolute top-0\"><\/div>\r\n<div class=\"border-b-2 border-dashed border-red-500 w-full absolute top-[20%]\"><\/div>\r\n<p class=\"absolute top-[15%] right-1 text-[10px] text-red-400\">\u9884\u8b66\u9608\u503c<\/p>\r\n<p class=\"absolute -top-6 w-full text-center text-xs text-red-400 font-bold\">\u7efc\u5408\u98ce\u9669<\/p>\r\n<\/div>\r\n<\/div>\r\n<!-- Axis Lines -->\r\n<div class=\"absolute left-4 bottom-4 top-4 w-px bg-gray-600\"><\/div>\r\n<div class=\"absolute left-4 bottom-4 right-4 h-px bg-gray-600\"><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f99c0bf elementor-widget elementor-widget-html\" data-id=\"f99c0bf\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n\r\n<html data-theme=\"light\" lang=\"zh-CN\">\r\n<head>\r\n<meta charset=\"utf-8\"\/>\r\n<meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\"\/>\r\n<title>\u6848\u4f8b02\uff1a\u5546\u6d1b\u6865\u6881\u57ae\u584c\uff082024.07\uff09<\/title>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\"\/>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap\" rel=\"stylesheet\"\/>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.4.0\/css\/all.min.css\" rel=\"stylesheet\"\/>\r\n<style>\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Noto Sans SC', sans-serif;\r\n background-color: #0f172a;\r\n }\r\n .slide-container {\r\n width: 1280px;\r\n height: 1000px;\r\n position: relative;\r\n background-color: #0f172a;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \/* Background Grid *\/\r\n .bg-grid {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: #0f172a;\r\n background-image: url('data:image\/svg+xml,%3Csvg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"%3E%3Cg fill=\"%2338bdf8\" fill-opacity=\"0.05\" fill-rule=\"evenodd\"%3E%3Cpath d=\"M0 40L40 0H20L0 20M40 40V20L20 40\"\/%3E%3C\/g%3E%3C\/svg%3E');\r\n z-index: 0;\r\n }\r\n .content-card {\r\n background: rgba(30, 41, 59, 0.6);\r\n border: 1px solid rgba(56, 189, 248, 0.2);\r\n backdrop-filter: blur(10px);\r\n transition: all 0.3s ease;\r\n }\r\n .content-card:hover {\r\n border-color: rgba(56, 189, 248, 0.4);\r\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\r\n }\r\n .info-row {\r\n border-left: 3px solid #3b82f6;\r\n padding-left: 1rem;\r\n margin-bottom: 1.25rem;\r\n }\r\n .highlight-value {\r\n color: #38bdf8;\r\n font-weight: 700;\r\n }\r\n .video-container {\r\n position: relative;\r\n overflow: hidden;\r\n border-radius: 0.75rem;\r\n box-shadow: 0 10px 30px rgba(0,0,0,0.5);\r\n border: 1px solid rgba(56, 189, 248, 0.3);\r\n }\r\n .video-overlay {\r\n background: linear-gradient(to top, rgba(15, 23, 42, 0.9), transparent); \r\n \/* Fallback for export issues with gradients: using solid color with opacity if needed, but linear-gradient is requested to be avoided. \r\n Using solid background with transparency for overlay text area instead. *\/\r\n background: rgba(15, 23, 42, 0.7);\r\n }\r\n .signal-tag {\r\n background: rgba(15, 23, 42, 0.6);\r\n border: 1px solid rgba(148, 163, 184, 0.2);\r\n border-radius: 4px;\r\n padding: 4px 8px;\r\n font-size: 0.75rem;\r\n color: #e2e8f0;\r\n display: inline-flex;\r\n align-items: center;\r\n margin-right: 6px;\r\n margin-bottom: 6px;\r\n }\r\n .signal-tag i {\r\n margin-right: 6px;\r\n color: #38bdf8;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"slide-container\">\r\n<!-- Background -->\r\n<div class=\"bg-grid\"><\/div>\r\n<div class=\"absolute bottom-0 left-0 w-[500px] h-[500px] bg-blue-900 rounded-full opacity-10 blur-3xl\"><\/div>\r\n<!-- Header -->\r\n<div class=\"flex items-center justify-between px-12 pt-8 pb-4 z-10\">\r\n<div>\r\n<div class=\"flex items-center space-x-3 mb-2\">\r\n<span class=\"px-2 py-1 bg-red-900\/30 text-red-400 text-xs font-bold rounded border border-red-700\/30\">\u5b9e\u9645\u6848\u4f8b\u5206\u6790<\/span>\r\n<span class=\"text-gray-500 text-sm\">\/ 04 CASE STUDY<\/span>\r\n<\/div>\r\n<h1 class=\"text-3xl font-bold text-white tracking-tight\">\u6848\u4f8b02\uff1a\u5546\u6d1b\u6865\u6881\u57ae\u584c\uff082024.07\uff09<\/h1>\r\n<div class=\"h-1 w-20 bg-red-500 mt-2\"><\/div>\r\n<\/div>\r\n<div class=\"flex items-center space-x-4\">\r\n<div class=\"text-right\">\r\n<p class=\"text-xs text-gray-400\">BRIDGE COLLAPSE<\/p>\r\n<p class=\"text-sm font-bold text-red-400\">\u6865\u6881\u7ed3\u6784\u76d1\u6d4b<\/p>\r\n<\/div>\r\n<div class=\"w-10 h-10 rounded-full bg-red-900\/30 border border-red-500\/50 flex items-center justify-center\">\r\n<i class=\"fa-solid fa-bridge-water text-red-400\"><\/i>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Main Content -->\r\n<div class=\"flex flex-1 px-12 py-4 space-x-8 z-10 overflow-hidden\">\r\n<!-- Left Column: Case Details -->\r\n<div class=\"w-5\/12 flex flex-col justify-between h-full pb-8\">\r\n<!-- Event Background -->\r\n<div class=\"content-card rounded-xl p-6 mb-4\">\r\n<h3 class=\"flex items-center text-lg font-bold text-white mb-4 border-b border-gray-700 pb-2\">\r\n<i class=\"fa-solid fa-circle-info text-blue-400 mr-2\"><\/i>\r\n \u4e8b\u4ef6\u6982\u51b5\u4e0e\u6210\u56e0\r\n <\/h3>\r\n<div class=\"info-row\" style=\"border-left-color: #ef4444;\">\r\n<p class=\"text-gray-400 text-xs uppercase mb-1\">\u4e8b\u4ef6\u80cc\u666f<\/p>\r\n<p class=\"text-white text-sm leading-relaxed font-bold\">\r\n \u9655\u897f\u5546\u6d1b\u4e39\u5b81\u9ad8\u901f\u516c\u8def\u6865\u6881\u57ae\u584c\r\n <\/p>\r\n<p class=\"text-red-400 text-sm font-bold mt-1\">\r\n<i class=\"fa-solid fa-skull-crossbones mr-1\"><\/i> 62\u4eba\u6b7b\u4ea1\/\u5931\u8e2a\r\n <\/p>\r\n<\/div>\r\n<div class=\"info-row\" style=\"border-left-color: #f59e0b;\">\r\n<p class=\"text-gray-400 text-xs uppercase mb-1\">\u89e6\u53d1\u6761\u4ef6<\/p>\r\n<p class=\"text-gray-300 text-sm leading-relaxed\">\r\n<span class=\"text-yellow-400 font-bold\">\u6301\u7eed\u66b4\u96e8\u5f15\u53d1\u5c71\u6d2a<\/span> \u5bfc\u81f4\u6c34\u4f4d\u66b4\u6da8\uff0c\u5f3a\u529b\u51b2\u5237\u6865\u58a9\u57fa\u7840\uff0c\u81f4\u4f7f\u7ed3\u6784\u574d\u584c\uff0c\u8f66\u8f86\u8fde\u7eed\u5760\u5165\u6cb3\u9053\u3002\r\n <\/p>\r\n<\/div>\r\n<\/div>\r\n<!-- Monitoring & Warning -->\r\n<div class=\"content-card rounded-xl p-6 flex-1\">\r\n<h3 class=\"flex items-center text-lg font-bold text-white mb-4 border-b border-gray-700 pb-2\">\r\n<i class=\"fa-solid fa-radar text-green-400 mr-2\"><\/i>\r\n \u76d1\u6d4b\u4e0e\u9884\u8b66\u590d\u76d8\r\n <\/h3>\r\n<div class=\"mb-4\">\r\n<p class=\"text-gray-400 text-xs uppercase mb-2\">\u5173\u952e\u53ef\u76d1\u6d4b\u4fe1\u53f7<\/p>\r\n<div class=\"flex flex-wrap\">\r\n<div class=\"signal-tag\"><i class=\"fa-solid fa-up-down\"><\/i> \u6865\u6881\u4f4d\u79fb\/\u6c89\u964d<\/div>\r\n<div class=\"signal-tag\"><i class=\"fa-solid fa-ruler-vertical\"><\/i> \u58a9\u53f0\u503e\u659c<\/div>\r\n<div class=\"signal-tag\"><i class=\"fa-solid fa-water\"><\/i> \u6c34\u4f4d\/\u6d41\u901f\u7a81\u53d8<\/div>\r\n<div class=\"signal-tag\"><i class=\"fa-solid fa-arrows-to-circle\"><\/i>\u7ed3\u6784\u574d\u584c<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"bg-green-900\/20 border border-green-500\/30 rounded-lg p-4 flex items-center justify-between\">\r\n<div>\r\n<p class=\"text-gray-400 text-xs\">\u6709\u6548\u9884\u8b66\u7a97\u53e3<\/p>\r\n<p class=\"text-green-400 font-bold text-xl\">\u63d0\u524d 30\u5206\u949f - 2\u5c0f\u65f6<\/p>\r\n<\/div>\r\n<div class=\"h-10 w-10 bg-green-900\/50 rounded-full flex items-center justify-center border border-green-500\">\r\n<i class=\"fa-solid fa-clock text-green-400\"><\/i>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Right Column: Video\/Visual -->\r\n<div class=\"w-7\/12 h-full pb-8 flex flex-col\">\r\n<div class=\"video-container flex-1 bg-black relative group\">\r\n<!-- Video Thumbnail \/ Placeholder -->\r\n<img decoding=\"async\" alt=\"\u5546\u6d1b\u6865\u6881\u57ae\u584c\u73b0\u573a\" class=\"w-full h-full object-cover opacity-80 group-hover:opacity-60 transition-opacity duration-300\" src=\"https:\/\/www.genspark.ai\/image_placeholder.png\"\/>\r\n<!-- Play Button Overlay -->\r\n<a class=\"absolute inset-0 flex items-center justify-center z-20\" href=\"https:\/\/tv.cctv.com\/2024\/07\/20\/VIDE5K1S6ZJtpZ32BPKsuIuv240720.shtml\" target=\"_blank\">\r\n<div class=\"w-20 h-20 bg-red-600\/90 rounded-full flex items-center justify-center shadow-lg transform group-hover:scale-110 transition-transform duration-300 border-4 border-white\/20\">\r\n<i class=\"fa-solid fa-play text-white text-3xl ml-1\"><\/i>\r\n<\/div>\r\n<\/a>\r\n<!-- Source Label -->\r\n<div class=\"absolute top-4 right-4 bg-black\/60 text-white text-xs px-2 py-1 rounded border border-white\/20 backdrop-blur-sm z-20\">\r\n<i class=\"fa-solid fa-video mr-1\"><\/i> \u592e\u89c6\u65b0\u95fb\u6e90\r\n <\/div>\r\n<!-- Bottom Info Overlay -->\r\n<div class=\"absolute bottom-0 left-0 right-0 p-6 z-20\" style=\"background-color: rgba(0,0,0,0.7);\">\r\n<h3 class=\"text-white font-bold text-lg mb-1\">\u9655\u897f\u5546\u6d1b\u4e39\u5b81\u9ad8\u901f\u516c\u8def\u6865\u6881\u57ae\u584c\u73b0\u573a<\/h3>\r\n<p class=\"text-gray-300 text-sm\">2024\u5e747\u670819\u65e520\u65f640\u5206\uff0c\u7a81\u53d1\u66b4\u96e8\u5c71\u6d2a\u5bfc\u81f4\u4e8c\u53f7\u6865\u5c40\u90e8\u57ae\u584c<\/p>\r\n<\/div>\r\n<\/div>\r\n<!-- Analysis Graphic placeholder below video -->\r\n<div class=\"h-1\/3 mt-4 flex space-x-4\">\r\n<div class=\"flex-1 content-card rounded-lg p-3 flex flex-col items-center justify-center relative overflow-hidden\">\r\n<div class=\"absolute inset-0 opacity-10 flex items-center justify-center\">\r\n<i class=\"fa-solid fa-chart-line text-6xl text-blue-500\"><\/i>\r\n<\/div>\r\n<p class=\"text-blue-400 text-2xl font-bold z-10\">450mm+<\/p>\r\n<p class=\"text-gray-400 text-xs z-10 text-center\">\u7d2f\u8ba1\u964d\u96e8\u91cf\u8d85\u9608\u503c<\/p>\r\n<\/div>\r\n<div class=\"flex-1 content-card rounded-lg p-3 flex flex-col items-center justify-center relative overflow-hidden\">\r\n<div class=\"absolute inset-0 opacity-10 flex items-center justify-center\">\r\n<i class=\"fa-solid fa-arrow-trend-up text-6xl text-red-500\"><\/i>\r\n<\/div>\r\n<p class=\"text-red-400 text-2xl font-bold z-10\">Instant<\/p>\r\n<p class=\"text-gray-400 text-xs z-10 text-center\">\u7ed3\u6784\u5e94\u529b\u7a81\u53d8\u76d1\u6d4b<\/p>\r\n<\/div>\r\n<div class=\"flex-1 content-card rounded-lg p-3 flex flex-col items-center justify-center relative overflow-hidden\">\r\n<div class=\"absolute inset-0 opacity-10 flex items-center justify-center\">\r\n<i class=\"fa-solid fa-shield-halved text-6xl text-green-500\"><\/i>\r\n<\/div>\r\n<p class=\"text-green-400 text-2xl font-bold z-10\">\u8054\u52a8<\/p>\r\n<p class=\"text-gray-400 text-xs z-10 text-center\">\u667a\u80fd\u9525\u6876\u591a\u7ea7\u81ea\u52a8\u963b\u62e6\r\n\u4ea4\u901a\u4fe1\u53f7\u3001\u58f0\u97f3\u8fde\u7eed\u8b66\u793a<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-de55748 elementor-widget elementor-widget-html\" data-id=\"de55748\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n\r\n<html data-theme=\"light\" lang=\"zh-CN\">\r\n<head>\r\n<meta charset=\"utf-8\"\/>\r\n<meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\"\/>\r\n<title>\u6848\u4f8b03\uff1a\u84dd\u7530\u66b4\u96e8\u5c71\u6d2a\uff082023.08\uff09<\/title>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\"\/>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap\" rel=\"stylesheet\"\/>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.4.0\/css\/all.min.css\" rel=\"stylesheet\"\/>\r\n<style>\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Noto Sans SC', sans-serif;\r\n background-color: #0f172a;\r\n }\r\n .slide-container {\r\n width: 1280px;\r\n height: 1000px;\r\n position: relative;\r\n background-color: #0f172a;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n .bg-grid {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: #0f172a;\r\n background-image: url('data:image\/svg+xml,%3Csvg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"%3E%3Cg fill=\"%2338bdf8\" fill-opacity=\"0.05\" fill-rule=\"evenodd\"%3E%3Cpath d=\"M0 40L40 0H20L0 20M40 40V20L20 40\"\/%3E%3C\/g%3E%3C\/svg%3E');\r\n z-index: 0;\r\n }\r\n .content-card {\r\n background: rgba(30, 41, 59, 0.6);\r\n border: 1px solid rgba(56, 189, 248, 0.2);\r\n backdrop-filter: blur(10px);\r\n transition: all 0.3s ease;\r\n }\r\n .content-card:hover {\r\n border-color: rgba(56, 189, 248, 0.4);\r\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\r\n }\r\n .info-row {\r\n border-left: 3px solid #3b82f6;\r\n padding-left: 1rem;\r\n margin-bottom: 1.25rem;\r\n }\r\n .video-container {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 0.75rem;\r\n overflow: hidden;\r\n border: 1px solid rgba(56, 189, 248, 0.3);\r\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\r\n }\r\n .video-overlay {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n padding: 20px;\r\n background: rgba(15, 23, 42, 0.9);\r\n border-top: 1px solid rgba(255, 255, 255, 0.1);\r\n }\r\n .metric-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n padding: 0.25rem 0.75rem;\r\n border-radius: 9999px;\r\n font-size: 0.75rem;\r\n font-weight: 600;\r\n margin-right: 0.5rem;\r\n margin-bottom: 0.5rem;\r\n border: 1px solid;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"slide-container\">\r\n<!-- Background -->\r\n<div class=\"bg-grid\"><\/div>\r\n<div class=\"absolute bottom-0 right-0 w-[600px] h-[600px] bg-blue-900 rounded-full opacity-10 blur-3xl\"><\/div>\r\n<!-- Header -->\r\n<div class=\"flex items-center justify-between px-12 pt-8 pb-2 z-10\">\r\n<div>\r\n<div class=\"flex items-center space-x-3 mb-2\">\r\n<span class=\"px-2 py-1 bg-blue-900\/50 text-blue-400 text-xs font-bold rounded border border-blue-700\/50\">\u6848\u4f8b\u590d\u76d8<\/span>\r\n<span class=\"text-gray-500 text-sm\">\/ 04 CASE STUDY<\/span>\r\n<\/div>\r\n<h1 class=\"text-3xl font-bold text-white tracking-tight\">\u6848\u4f8b03\uff1a\u84dd\u7530\u66b4\u96e8\u5c71\u6d2a\uff082023.08\uff09<\/h1>\r\n<div class=\"h-1 w-20 bg-blue-500 mt-2\"><\/div>\r\n<\/div>\r\n<div class=\"flex items-center space-x-4\">\r\n<div class=\"text-right\">\r\n<p class=\"text-xs text-gray-400\">DISASTER ANALYSIS<\/p>\r\n<p class=\"text-sm font-bold text-blue-300\">\u5c40\u5730\u66b4\u96e8 \u00b7 \u6c9f\u9053\u5806\u79ef<\/p>\r\n<\/div>\r\n<i class=\"fa-solid fa-cloud-showers-heavy text-2xl text-blue-500\"><\/i>\r\n<\/div>\r\n<\/div>\r\n<!-- Main Content -->\r\n<div class=\"flex flex-1 px-12 py-6 space-x-8 z-10 overflow-hidden\">\r\n<!-- Left Column: Case Details -->\r\n<div class=\"w-5\/12 flex flex-col justify-between h-full\">\r\n<div class=\"content-card rounded-xl p-6 flex-1 overflow-y-auto\">\r\n<h3 class=\"flex items-center text-lg font-bold text-white mb-6 border-b border-gray-700 pb-3\">\r\n<i class=\"fa-solid fa-file-waveform text-blue-400 mr-3\"><\/i>\r\n \u4e8b\u4ef6\u7279\u5f81\u4e0e\u6210\u56e0\u5206\u6790\r\n <\/h3>\r\n<div class=\"space-y-6\">\r\n<div class=\"info-row border-l-red-500\">\r\n<p class=\"text-gray-400 text-xs uppercase tracking-wider mb-1\">\u4e8b\u4ef6\u80cc\u666f Event Background<\/p>\r\n<p class=\"text-white text-base font-bold mb-1\">\u9655\u897f\u897f\u5b89\u84dd\u7530\u53bf\u66b4\u96e8\u5c71\u6d2a<\/p>\r\n<p class=\"text-gray-400 text-sm leading-relaxed\">\r\n 2023\u5e748\u6708\uff0c\u84dd\u7530\u53bf\u7a81\u53d1\u5c40\u5730\u5f3a\u964d\u96e8\uff0c\u5f15\u53d1\u738b\u987a\u5c71\u53ca\u5468\u8fb9\u6c9f\u9053\u5c71\u6d2a\u6ce5\u77f3\u6d41\u3002\u77ed\u65f6\u964d\u96e8\u5f3a\u5ea6\u5927\uff0c\u5bfc\u81f4\u6cb3\u9053\u6c34\u4f4d\u66b4\u6da8\uff0c\u9053\u8def\u635f\u6bc1\uff0c\u90e8\u5206\u6e38\u5ba2\u88ab\u56f0\u3002\r\n <\/p>\r\n<\/div>\r\n<div class=\"info-row border-l-orange-500\">\r\n<p class=\"text-gray-400 text-xs uppercase tracking-wider mb-1\">\u89e6\u53d1\u6761\u4ef6 Trigger Conditions<\/p>\r\n<div class=\"flex flex-wrap gap-2 mt-2\">\r\n<span class=\"metric-badge bg-orange-900\/30 text-orange-300 border-orange-500\/30\">\r\n<i class=\"fa-solid fa-bolt mr-1\"><\/i> \u6a59\u8272\u66b4\u96e8\u9884\u8b66\r\n <\/span>\r\n<span class=\"metric-badge bg-yellow-900\/30 text-yellow-300 border-yellow-500\/30\">\r\n<i class=\"fa-solid fa-cloud-rain mr-1\"><\/i> \u77ed\u5386\u65f6\u5f3a\u964d\u96e8\r\n <\/span>\r\n<span class=\"metric-badge bg-gray-700\/30 text-gray-300 border-gray-500\/30\">\r\n<i class=\"fa-solid fa-mound mr-1\"><\/i> \u6c9f\u9053\u677e\u6563\u5806\u79ef\u7269\r\n <\/span>\r\n<\/div>\r\n<\/div>\r\n<div class=\"info-row border-l-blue-500\">\r\n<p class=\"text-gray-400 text-xs uppercase tracking-wider mb-1\">\u53ef\u76d1\u6d4b\u4fe1\u53f7 Observable Signals<\/p>\r\n<div class=\"grid grid-cols-2 gap-3 mt-2\">\r\n<div class=\"bg-gray-800\/50 p-2 rounded border border-gray-700\">\r\n<p class=\"text-blue-300 text-xs font-bold\"><i class=\"fa-solid fa-droplet mr-1\"><\/i> \u964d\u96e8\u5f3a\u5ea6<\/p>\r\n<p class=\"text-gray-500 text-[10px]\">\u5206\u949f\u7ea7\u96e8\u91cf\u6fc0\u589e<\/p>\r\n<\/div>\r\n<div class=\"bg-gray-800\/50 p-2 rounded border border-gray-700\">\r\n<p class=\"text-blue-300 text-xs font-bold\"><i class=\"fa-solid fa-water mr-1\"><\/i> \u6c9f\u9053\u6c34\u4f4d<\/p>\r\n<p class=\"text-gray-500 text-[10px]\">\u6c34\u4f4d\u9661\u6da8\u901f\u7387<\/p>\r\n<\/div>\r\n<div class=\"bg-gray-800\/50 p-2 rounded border border-gray-700\">\r\n<p class=\"text-blue-300 text-xs font-bold\"><i class=\"fa-solid fa-arrows-down-to-line mr-1\"><\/i> \u6ce5\u4f4d\/\u6d41\u901f<\/p>\r\n<p class=\"text-gray-500 text-[10px]\">\u6ce5\u77f3\u6d41\u8fc7\u6d41\u7279\u5f81<\/p>\r\n<\/div>\r\n<div class=\"bg-gray-800\/50 p-2 rounded border border-gray-700\">\r\n<p class=\"text-blue-300 text-xs font-bold\"><i class=\"fa-solid fa-wave-square mr-1\"><\/i> \u9707\u52a8\u4fe1\u53f7<\/p>\r\n<p class=\"text-gray-500 text-[10px]\">\u6b21\u58f0\u6ce2\/\u5730\u58f0\u5f02\u5e38<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Warning Window -->\r\n<div class=\"mt-4 content-card rounded-xl p-4 border-l-4 border-green-500 flex items-center justify-between\">\r\n<div>\r\n<p class=\"text-gray-400 text-xs font-bold uppercase\">\u9884\u8b66\u53ef\u884c\u6027\u7a97\u53e3<\/p>\r\n<p class=\"text-white text-lg font-bold\">\u63d0\u524d 1 - 4 \u5c0f\u65f6<\/p>\r\n<\/div>\r\n<div class=\"text-right\">\r\n<p class=\"text-green-400 text-sm font-bold\"><i class=\"fa-solid fa-check-circle mr-1\"><\/i> \u6c14\u8c61-\u6c34\u6587\u8054\u52a8\u9884\u8b66<\/p>\r\n<p class=\"text-gray-500 text-xs\">\u57fa\u4e8e\u964d\u96e8\u9608\u503c\u4e0e\u6c34\u4f4d\u76d1\u6d4b<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Right Column: Video & Visualization -->\r\n<div class=\"w-7\/12 flex flex-col h-full\">\r\n<div class=\"video-container relative group\">\r\n<!-- Video Placeholder \/ Iframe -->\r\n<div class=\"absolute inset-0 bg-black flex items-center justify-center overflow-hidden\">\r\n<img decoding=\"async\" alt=\"Video Thumbnail\" class=\"w-full h-full object-cover opacity-60 group-hover:opacity-40 transition-opacity duration-500\" src=\"https:\/\/page.gensparksite.com\/slides_images\/6862b2a0657ce6b9b6a3b0eef2ea7690.webp\"\/>\r\n<div class=\"absolute z-10 flex flex-col items-center\">\r\n<a class=\"w-20 h-20 bg-blue-600\/90 rounded-full flex items-center justify-center hover:bg-blue-500 hover:scale-110 transition-all duration-300 shadow-[0_0_30px_rgba(37,99,235,0.5)] border-2 border-white\/20 backdrop-blur-sm\" href=\"https:\/\/www.douyin.com\/video\/7266351370838494527\" target=\"_blank\">\r\n<i class=\"fa-solid fa-play text-3xl text-white ml-2\"><\/i>\r\n<\/a>\r\n<p class=\"mt-4 text-white font-bold text-lg drop-shadow-md\">\u70b9\u51fb\u89c2\u770b\u73b0\u573a\u89c6\u9891<\/p>\r\n<p class=\"text-blue-200 text-sm bg-black\/40 px-3 py-1 rounded-full mt-2 backdrop-blur-sm border border-white\/10\">\u6765\u6e90\uff1a\u6296\u97f3 (2023.08.12)<\/p>\r\n<\/div>\r\n<\/div>\r\n<!-- Video Info Overlay -->\r\n<div class=\"video-overlay\">\r\n<div class=\"flex justify-between items-end\">\r\n<div>\r\n<h4 class=\"text-white font-bold text-lg mb-1\">\u9655\u897f\u84dd\u7530\u738b\u987a\u5c71\u7a81\u53d1\u66b4\u96e8\u5c71\u6d2a<\/h4>\r\n<p class=\"text-gray-400 text-sm\">\u8bb0\u5f55\u4e86\u5c71\u6d2a\u7206\u53d1\u65f6\u6cb3\u9053\u6c34\u4f4d\u66b4\u6da8\u7684\u60ca\u9669\u77ac\u95f4\uff0c\u5c55\u793a\u4e86\u6781\u7aef\u5929\u6c14\u4e0b\u5c0f\u6d41\u57df\u5c71\u6d2a\u7684\u7a81\u53d1\u6027\u4e0e\u7834\u574f\u529b\u3002<\/p>\r\n<\/div>\r\n<div class=\"flex space-x-2\">\r\n<div class=\"text-center px-3 py-1 bg-gray-800 rounded border border-gray-700\">\r\n<p class=\"text-xs text-gray-500\">\u64ad\u653e\u91cf<\/p>\r\n<p class=\"text-blue-400 font-bold\">670W+<\/p>\r\n<\/div>\r\n<div class=\"text-center px-3 py-1 bg-gray-800 rounded border border-gray-700\">\r\n<p class=\"text-xs text-gray-500\">\u6765\u6e90<\/p>\r\n<p class=\"text-white font-bold\">\u6296\u97f3<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Analysis Box -->\r\n<div class=\"mt-4 grid grid-cols-2 gap-4 h-28\">\r\n<div class=\"content-card rounded-xl p-3 flex flex-col justify-center\">\r\n<div class=\"flex items-center mb-2\">\r\n<div class=\"w-8 h-8 rounded-full bg-red-900\/50 flex items-center justify-center border border-red-500\/30 text-red-400 mr-3\">\r\n<i class=\"fa-solid fa-triangle-exclamation\"><\/i>\r\n<\/div>\r\n<p class=\"text-gray-300 font-bold text-sm\">\u76d1\u6d4b\u75db\u70b9<\/p>\r\n<\/div>\r\n<p class=\"text-gray-500 text-xs leading-snug\">\r\n \u5c71\u533a\u5c40\u5730\u6027\u5f3a\u964d\u96e8\u96be\u4ee5\u7cbe\u51c6\u9884\u6d4b\uff1b\u6c9f\u9053\u76d1\u63a7\u76f2\u533a\u591a\uff0c\u4f20\u7edf\u624b\u6bb5\u96be\u4ee5\u6355\u6349\u7a81\u53d1\u6ce5\u77f3\u6d41\u524d\u5146\u3002\r\n <\/p>\r\n<\/div>\r\n<div class=\"content-card rounded-xl p-3 flex flex-col justify-center\">\r\n<div class=\"flex items-center mb-2\">\r\n<div class=\"w-8 h-8 rounded-full bg-blue-900\/50 flex items-center justify-center border border-blue-500\/30 text-blue-400 mr-3\">\r\n<i class=\"fa-solid fa-shield-halved\"><\/i>\r\n<\/div>\r\n<p class=\"text-gray-300 font-bold text-sm\">\u5e94\u5bf9\u7b56\u7565<\/p>\r\n<\/div>\r\n<p class=\"text-gray-500 text-xs leading-snug\">\r\n \u90e8\u7f72\u5fae\u6c14\u8c61\u88c5\u7f6e+ \u4e0b\u6e38\u58f0\u5149\u62a5\u8b66\u5668+\u5e94\u6025\u7cfb\u7edf\uff0c\u5b9e\u73b0\u201cAI\u667a\u80fd\u7cbe\u786e\u9884\u8b66\u3002\r\n <\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d5b9312 elementor-widget elementor-widget-html\" data-id=\"d5b9312\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n\r\n<html lang=\"zh-CN\">\r\n<head>\r\n<meta charset=\"utf-8\"\/>\r\n<meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\"\/>\r\n<title>\u7ae0\u8282\u5c01\u9762\uff1a\u6838\u5fc3\u6280\u672f<\/title>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\"\/>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap\" rel=\"stylesheet\"\/>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.4.0\/css\/all.min.css\" rel=\"stylesheet\"\/>\r\n<style>\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Noto Sans SC', sans-serif;\r\n background-color: #0f172a;\r\n }\r\n .slide-container {\r\n width: 1280px;\r\n height: 1000px;\r\n position: relative;\r\n background-color: #0f172a;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \/* Grid Background Pattern *\/\r\n .bg-grid {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-image: \r\n linear-gradient(rgba(56, 189, 248, 0.05) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(56, 189, 248, 0.05) 1px, transparent 1px);\r\n background-size: 40px 40px;\r\n z-index: 0;\r\n }\r\n .chapter-number-huge {\r\n font-size: 12rem;\r\n font-weight: 900;\r\n line-height: 1;\r\n color: transparent;\r\n -webkit-text-stroke: 4px rgba(255, 255, 255, 0.1);\r\n position: absolute;\r\n left: 60px;\r\n top: 60px;\r\n z-index: 0;\r\n opacity: 0.5;\r\n }\r\n .glass-panel {\r\n background: rgba(30, 41, 59, 0.4);\r\n border-left: 6px solid #38bdf8;\r\n backdrop-filter: blur(4px);\r\n }\r\n .glow-icon {\r\n filter: drop-shadow(0 0 15px rgba(56, 189, 248, 0.6));\r\n }\r\n .terrain-line {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 300px;\r\n background: url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 1440 320\"><path fill=\"%231e293b\" fill-opacity=\"0.8\" d=\"M0,224L48,213.3C96,203,192,181,288,181.3C384,181,480,203,576,224C672,245,768,267,864,261.3C960,256,1056,224,1152,197.3C1248,171,1344,149,1392,138.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z\"><\/path><\/svg>') no-repeat bottom;\r\n background-size: cover;\r\n z-index: 1;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"slide-container\">\r\n<!-- Background Grid -->\r\n<div class=\"bg-grid\"><\/div>\r\n<!-- Giant Chapter Number -->\r\n<div class=\"chapter-number-huge\">05<\/div>\r\n<!-- Decorative Background Elements -->\r\n<div class=\"absolute top-0 right-0 w-[800px] h-[800px] bg-blue-900 rounded-full opacity-10 blur-3xl transform translate-x-1\/3 -translate-y-1\/3\"><\/div>\r\n<div class=\"absolute bottom-0 left-0 w-[600px] h-[600px] bg-indigo-900 rounded-full opacity-10 blur-3xl transform -translate-x-1\/3 translate-y-1\/3\"><\/div>\r\n<!-- Terrain Decoration -->\r\n<div class=\"terrain-line\"><\/div>\r\n<!-- Main Content Area -->\r\n<div class=\"flex flex-1 z-20 items-center px-24 relative\">\r\n<div class=\"w-full flex justify-between items-center\">\r\n<!-- Left: Text Content -->\r\n<div class=\"w-3\/5 pt-20\">\r\n<div class=\"flex items-center space-x-3 mb-6\">\r\n<div class=\"h-1 w-12 bg-blue-500\"><\/div>\r\n<p class=\"text-blue-400 font-bold tracking-widest uppercase\">Chapter Five<\/p>\r\n<\/div>\r\n<h1 class=\"text-7xl font-black text-white mb-8 tracking-tight leading-tight\">\r\n \u6838\u5fc3\u6280\u672f\r\n <\/h1>\r\n<div class=\"glass-panel p-8 rounded-r-lg max-w-2xl\">\r\n<h2 class=\"text-3xl text-gray-200 font-light mb-4\">\u9a71\u52a8\u667a\u80fd\u5e94\u6025\u7684\u5f15\u64ce<\/h2>\r\n<p class=\"text-gray-400 text-lg leading-relaxed\">\r\n \u6df1\u5ea6\u878d\u5408\u591a\u6e90\u611f\u77e5\u6280\u672f\u3001\u9ad8\u53ef\u9760\u4f20\u8f93\u7f51\u7edc\u4e0eAI\u667a\u80fd\u7b97\u6cd5\u3002<br\/>\r\n \u81f4\u529b\u4e8e\u5b9e\u73b0\u6beb\u7c73\u7ea7\u8fde\u7eed\u76d1\u6d4b\u4e0e\u5206\u949f\u7ea7\u7cbe\u51c6\u9884\u8b66\uff0c\u5168\u9762\u63d0\u5347\u7cfb\u7edf\u53ef\u7528\u6027\u4e0e\u53ef\u89e3\u91ca\u6027\u3002\r\n <\/p>\r\n<\/div>\r\n<!-- Key Points -->\r\n<div class=\"flex space-x-8 mt-12\">\r\n<div class=\"flex flex-col items-center\">\r\n<div class=\"w-12 h-12 rounded-full bg-gray-800 border border-gray-600 flex items-center justify-center mb-3\">\r\n<i class=\"fa-solid fa-satellite-dish text-blue-400 text-xl\"><\/i>\r\n<\/div>\r\n<p class=\"text-gray-400 text-sm\">\u591a\u6e90\u611f\u77e5<\/p>\r\n<\/div>\r\n<div class=\"flex flex-col items-center\">\r\n<div class=\"w-12 h-12 rounded-full bg-gray-800 border border-gray-600 flex items-center justify-center mb-3\">\r\n<i class=\"fa-solid fa-wifi text-blue-400 text-xl\"><\/i>\r\n<\/div>\r\n<p class=\"text-gray-400 text-sm\">\u53ef\u9760\u4f20\u8f93<\/p>\r\n<\/div>\r\n<div class=\"flex flex-col items-center\">\r\n<div class=\"w-12 h-12 rounded-full bg-gray-800 border border-gray-600 flex items-center justify-center mb-3\">\r\n<i class=\"fa-solid fa-brain text-blue-400 text-xl\"><\/i>\r\n<\/div>\r\n<p class=\"text-gray-400 text-sm\">AI\u7b97\u6cd5<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Right: Visual Icon\/Graphic -->\r\n<div class=\"w-2\/5 flex justify-center items-center\">\r\n<div class=\"relative w-80 h-80\">\r\n<div class=\"absolute inset-0 bg-blue-500 rounded-full opacity-5 blur-xl animate-pulse\"><\/div>\r\n<div class=\"absolute inset-0 border-2 border-dashed border-blue-500\/30 rounded-full animate-spin-slow\" style=\"animation-duration: 20s;\"><\/div>\r\n<div class=\"absolute inset-4 border border-blue-500\/20 rounded-full\"><\/div>\r\n<!-- Central Icon -->\r\n<div class=\"absolute inset-0 flex items-center justify-center\">\r\n<i class=\"fa-solid fa-microchip text-9xl text-white opacity-90 glow-icon\"><\/i>\r\n<\/div>\r\n<!-- Floating Satellite Icons -->\r\n<div class=\"absolute top-0 left-1\/2 transform -translate-x-1\/2 -translate-y-4 bg-gray-900 border border-blue-500\/50 p-2 rounded-lg shadow-lg\">\r\n<i class=\"fa-solid fa-layer-group text-blue-400\"><\/i>\r\n<\/div>\r\n<div class=\"absolute bottom-10 right-0 bg-gray-900 border border-blue-500\/50 p-2 rounded-lg shadow-lg\">\r\n<i class=\"fa-solid fa-shield-halved text-blue-400\"><\/i>\r\n<\/div>\r\n<div class=\"absolute bottom-10 left-0 bg-gray-900 border border-blue-500\/50 p-2 rounded-lg shadow-lg\">\r\n<i class=\"fa-solid fa-chart-line text-blue-400\"><\/i>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bb20f46 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"bb20f46\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"zh-CN\" data-theme=\"light\" style=\"\"><head>\r\n<meta charset=\"utf-8\">\r\n<meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\">\r\n<title>\u591a\u6e90\u611f\u77e5\u6280\u672f\u8be6\u89e3<\/title>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.4.0\/css\/all.min.css\" rel=\"stylesheet\">\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/echarts@5\/dist\/echarts.min.js\"><\/script>\r\n<style>\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Noto Sans SC', sans-serif;\r\n background-color: #0f172a;\r\n }\r\n .slide-container {\r\n width: 1280px;\r\n height: 1000px;\r\n position: relative;\r\n background-color: #0f172a;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \/* Grid Background Pattern *\/\r\n .bg-grid {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-image: url('data:image\/svg+xml,%3Csvg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"%3E%3Cpath d=\"M0 0h40v40H0V0zm1 1h38v38H1V1z\" fill=\"%2338bdf8\" fill-opacity=\"0.03\" fill-rule=\"evenodd\"\/%3E%3C\/svg%3E');\r\n z-index: 0;\r\n }\r\n\r\n \/* Tech Card Styling *\/\r\n .tech-card {\r\n background-color: rgba(30, 41, 59, 0.6);\r\n border: 1px solid rgba(148, 163, 184, 0.2);\r\n backdrop-filter: blur(5px);\r\n transition: all 0.3s ease;\r\n }\r\n .tech-card:hover {\r\n border-color: rgba(56, 189, 248, 0.6);\r\n background-color: rgba(30, 41, 59, 0.9);\r\n transform: translateY(-2px);\r\n box-shadow: 0 4px 20px rgba(56, 189, 248, 0.15);\r\n }\r\n\r\n \/* Chart Container *\/\r\n .chart-wrapper {\r\n background: rgba(15, 23, 42, 0.5);\r\n border: 1px solid rgba(56, 189, 248, 0.2);\r\n border-radius: 12px;\r\n position: relative;\r\n }\r\n .chart-wrapper::after {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 1px;\r\n background: rgba(56, 189, 248, 0.5);\r\n box-shadow: 0 0 10px rgba(56, 189, 248, 0.8);\r\n }\r\n \r\n .feature-tag {\r\n background-color: rgba(59, 130, 246, 0.1);\r\n border: 1px solid rgba(59, 130, 246, 0.3);\r\n color: #60a5fa;\r\n font-size: 0.75rem;\r\n padding: 2px 8px;\r\n border-radius: 9999px;\r\n display: inline-flex;\r\n align-items: center;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body style=\"\" autocomplete=\"off\">\r\n<div class=\"slide-container\">\r\n<!-- Background Elements -->\r\n<div class=\"bg-grid\"><\/div>\r\n<div class=\"absolute top-0 right-0 w-[600px] h-[600px] bg-blue-900 rounded-full opacity-5 blur-3xl\"><\/div>\r\n<div class=\"absolute bottom-0 left-0 w-[400px] h-[400px] bg-cyan-900 rounded-full opacity-5 blur-3xl\"><\/div>\r\n<!-- Header -->\r\n<div class=\"flex items-center justify-between px-12 pt-8 pb-4 z-10\">\r\n<div>\r\n<div class=\"flex items-center space-x-3 mb-2\">\r\n<span class=\"px-2 py-1 bg-blue-900\/40 text-blue-400 text-xs font-bold rounded border border-blue-700\/40\">CORE TECHNOLOGY<\/span>\r\n<span class=\"text-gray-500 text-sm\">\/ 05 MULTI-SOURCE SENSING<\/span>\r\n<\/div>\r\n<h1 class=\"text-3xl font-bold text-white tracking-tight\">\u591a\u6e90\u611f\u77e5\u6280\u672f\u8be6\u89e3<\/h1>\r\n<div class=\"h-1 w-24 bg-blue-500 mt-2\"><\/div>\r\n<\/div>\r\n<div class=\"flex items-center space-x-4\">\r\n<div class=\"px-4 py-2 bg-gray-800\/80 rounded border border-gray-700 flex items-center space-x-3\">\r\n<div class=\"flex flex-col text-right\">\r\n<span class=\"text-[10px] text-gray-400\">PRECISION<\/span>\r\n<span class=\"text-lg font-bold text-green-400\">0.2mm<\/span>\r\n<\/div>\r\n<div class=\"w-px h-8 bg-gray-600\"><\/div>\r\n<div class=\"flex flex-col text-right\">\r\n<span class=\"text-[10px] text-gray-400\">SAMPLING<\/span>\r\n<span class=\"text-lg font-bold text-blue-400\">10Hz<\/span>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Main Content -->\r\n<div class=\"flex flex-1 px-12 pb-8 gap-8 z-10 overflow-hidden\">\r\n<!-- Left Column: Sensor Matrix -->\r\n<div class=\"w-[55%] flex flex-col\">\r\n<div class=\"flex items-center mb-4\">\r\n<div class=\"w-8 h-8 rounded bg-blue-900\/50 flex items-center justify-center mr-3 border border-blue-500\/30\">\r\n<i class=\"fa-solid fa-satellite-dish text-blue-400\"><\/i>\r\n<\/div>\r\n<h3 class=\"text-xl text-white font-bold\">\u5168\u57df\u4f20\u611f\u5668\u77e9\u9635<\/h3>\r\n<\/div>\r\n<div class=\"grid grid-cols-2 gap-3 flex-1\">\r\n<!-- Card 1: Surface Displacement -->\r\n<div class=\"tech-card rounded-xl p-3 flex flex-col h-full\">\r\n<div class=\"flex justify-between items-start mb-2\">\r\n<div class=\"w-8 h-8 rounded-lg bg-indigo-900\/50 flex items-center justify-center text-indigo-400 border border-indigo-500\/30\">\r\n<i class=\"fa-solid fa-location-dot\"><\/i>\r\n<\/div>\r\n<span class=\"text-[10px] bg-indigo-900 text-indigo-300 px-2 py-0.5 rounded\">\u8868\u5c42\u5f62\u53d8<\/span>\r\n<\/div>\r\n<h4 class=\"text-white font-bold mb-1 text-sm\"><p>\u6beb\u7c73\u7ea7\u96f7\u8fbe<\/p>\r\n<\/h4>\r\n<div class=\"flex flex-wrap gap-1 mb-2\">\r\n<span class=\"text-[9px] text-gray-400 bg-gray-800 px-1 rounded\"><\/span><p style=\"color: rgb(128, 128, 128);\"><\/p><p style=\"color: rgb(128, 128, 128);\">\u9ad8\u7cbe\u5ea6\uff1a\u6d4b\u91cf\u7cbe\u5ea6\u53ef\u8fbe 0.2mm\uff0c\u80fd\u591f\u6355\u6349\u6781\u5176\u5fae\u5c0f\u7684\u5fae\u5f62\u53d8\u3002<\/p><p><\/p>\r\n<span class=\"text-[9px] text-gray-400 bg-gray-800 px-1 rounded\"><\/span>\r\n<\/div>\r\n<p class=\"text-gray-400 text-[10px] leading-snug\"><\/p><p style=\"color: rgb(128, 128, 128);\">\u9ad8\u9891\u91c7\u6837\uff1a \u91c7\u6837\u9891\u7387\u901a\u5e38\u5728 1-10 Hz \u4e4b\u95f4\uff0c\u652f\u6301\u79d2\u7ea7\u6570\u636e\u4e0a\u4f20\u3002<\/p><p style=\"color: rgb(128, 128, 128);\"><\/p><p style=\"color: rgb(128, 128, 128);\">\r\n \u5168\u5929\u5019\u4f5c\u4e1a\uff1a \u5177\u5907 IP68\r\n \u9632\u62a4\u7b49\u7ea7\uff0c\u5728\u98ce\u96e8\u3001\u96fe\u973e\u7b49\u6781\u7aef\u5929\u6c14\u4e0b\u4ecd\u80fd\u7a33\u5b9a\u8fd0\u884c\uff0c\u5f25\u8865\u4e86\u4f20\u7edf\u4eba\u5de5\u5de1\u68c0\u6216\u5149\u5b66\u624b\u6bb5\u7684\u4e0d\u8db3\u3002<\/p>\r\n<p><\/p>\r\n<p><\/p>\r\n<\/div>\r\n<!-- Card 2: Deep Structure -->\r\n<div class=\"tech-card rounded-xl p-3 flex flex-col h-full\">\r\n<div class=\"flex justify-between items-start mb-2\">\r\n<div class=\"w-8 h-8 rounded-lg bg-cyan-900\/50 flex items-center justify-center text-cyan-400 border border-cyan-500\/30\">\r\n<i class=\"fa-solid fa-layer-group\"><\/i>\r\n<\/div>\r\n<span class=\"text-[10px] bg-cyan-900 text-cyan-300 px-2 py-0.5 rounded\">\u6df1\u90e8\u7ed3\u6784<\/span>\r\n<\/div>\r\n<h4 class=\"text-white font-bold mb-1 text-sm\"><p>\u89c6\u9891\u611f\u77e5\u6280\u672f<\/p><\/h4><div class=\"flex flex-wrap gap-1 mb-2\"><span class=\"text-[9px] text-gray-400 bg-gray-800 px-1 rounded\"><p style=\"color: rgb(128, 128, 128);\">\r\n \u89c6\u9891\u611f\u77e5\u6280\u672f\u4e0d\u4ec5\u662f\u201c\u70b9\u3001\u7ebf\u3001\u9762\u201d\u5168\u606f\u611f\u77e5\u573a\u7684\u91cd\u8981\u7ec4\u6210\u90e8\u5206\uff0c\u66f4\u662f\u5b9e\u73b0\u53ef\u89c6\u5316\u590d\u6838\u4e0e\u667a\u80fd\u5316\u51b3\u7b56\u7684\u5173\u952e\u624b\u6bb5,\u3002\u5b83\u901a\u8fc7\u6df1\u5ea6\u878d\u5408AI\u7b97\u6cd5\uff0c\u5c06\u4f20\u7edf\u7684\u201c\u88ab\u52a8\u76d1\u63a7\u201d\u63d0\u5347\u4e3a\u201c\u4e3b\u52a8\u9884\u8b66\u201d\r\n<\/p>\r\n<\/span>\r\n<span class=\"text-[9px] text-gray-400 bg-gray-800 px-1 rounded\"><p style=\"color: rgb(128, 128, 128);\">\r\n \u6ce5\u4f4d\u4e0e\u6d41\u901f\u8bc6\u522b\uff1a\r\n \u5728\u6ce5\u77f3\u6d41\u6c9f\u9053\u76d1\u6d4b\u4e2d\uff0c\u89c6\u9891AI\u80fd\u81ea\u52a8\u8bc6\u522b\u6ce5\u4f4d\u9ad8\u5ea6\u4e0e\u6d41\u4f53\u8fc7\u6d41\u7279\u5f81\uff0c\u8f85\u52a9\u6784\u5efa\u201c\u964d\u96e8-\u6c34\u4f4d-\u6ce5\u4f4d\u201d\u7684\u591a\u7ef4\u9884\u8b66\u6a21\u578b\r\n<\/p>\r\n<\/span>\r\n<\/div>\r\n<p class=\"text-gray-400 text-[10px] leading-snug\"><\/p><p>\r\n <span style=\"color: rgb(128, 128, 128);\">\u7279\u5b9a\u884c\u4e3a\u8bc6\u522b\uff1a\r\n \u5728\u667a\u80fd\u4ea4\u901a\u573a\u666f\u4e2d\uff08\u5982\u667a\u80fd\u9525\u6876\u5e94\u7528\uff09\uff0c\u89c6\u9891\u611f\u77e5\u53ef\u914d\u9009\u6444\u50cf\u5934\uff0c\u667a\u80fd\u8bc6\u522b\u8f66\u8f86\u9006\u884c\u6216\u884c\u4eba\u95ef\u5165\u7981\u533a\u7b49\u5f02\u5e38\u884c\u4e3a<\/span>\r\n<\/p>\r\n<p><\/p>\r\n<\/div>\r\n<!-- Card 3: Surface Cracks -->\r\n<div class=\"tech-card rounded-xl p-3 flex flex-col h-full\">\r\n<div class=\"flex justify-between items-start mb-2\">\r\n<div class=\"w-8 h-8 rounded-lg bg-purple-900\/50 flex items-center justify-center text-purple-400 border border-purple-500\/30\">\r\n<i class=\"fa-solid fa-\u88c2\u7f1d\"><\/i>\r\n<i class=\"fa-solid fa-magnifying-glass-chart\"><\/i>\r\n<\/div>\r\n<span class=\"text-[10px] bg-purple-900 text-purple-300 px-2 py-0.5 rounded\"><p>\u7cfb\u7edf\u5927\u8111<\/p>\r\n<\/span>\r\n<\/div>\r\n<h4 class=\"text-white font-bold mb-1 text-sm\"><p>AI \u667a\u80fd\u7b97\u6cd5\u5f15\u64ce<\/p>\r\n<\/h4>\r\n<div class=\"flex flex-wrap gap-1 mb-2\">\r\n<span class=\"text-[9px] text-gray-400 bg-gray-800 px-1 rounded\"><\/span><p style=\"color: rgb(128, 128, 128);\">\u667a\u80fd\u53bb\u566a\uff1a \u57fa\u4e8e\u5c0f\u6ce2\u53d8\u6362\u4e0e\u5361\u5c14\u66fc\u6ee4\u6ce2\uff0c\u5254\u9664\u73af\u5883\u566a\u70b9\uff0c\r\n \r\n <!--StartFragment--><span style=\"\r\n color: rgb(128, 128, 128);\r\n font-family: 'Noto Sans SC', sans-serif;\r\n font-size: medium;\r\n font-style: normal;\r\n font-variant-ligatures: normal;\r\n font-variant-caps: normal;\r\n font-weight: 400;\r\n letter-spacing: normal;\r\n orphans: 2;\r\n text-align: start;\r\n text-indent: 0px;\r\n text-transform: none;\r\n widows: 2;\r\n word-spacing: 0px;\r\n -webkit-text-stroke-width: 0px;\r\n white-space: normal;\r\n background-color: rgba(30, 41, 59, 0.9);\r\n text-decoration-thickness: initial;\r\n text-decoration-style: initial;\r\n text-decoration-color: initial;\r\n display: inline !important;\r\n float: none;\r\n \">\u8fd8\u539f\u771f\u5b9e\u7684\u5730\u5f62\u53d8\u8d8b\u52bf\u3002<\/span><!--EndFragment--><\/p><p style=\"color: rgb(128, 128, 128);\">\r\n \u52a8\u6001\u9608\u503c\u4e0e\u8054\u5224\uff1a \u7b97\u6cd5\u80fd\u591f\u81ea\u9002\u5e94\u8c03\u6574\u62a5\u8b66\u7ebf\uff0c\u5e76\u8fdb\u884c\u5730\u8d28\u5f62\u53d8\u4e0e\u96e8\u6d2a\u6307\u6807\u7684\u8de8\u6e90\u4ea4\u53c9\u9a8c\u8bc1\uff0c\u5c06\u8bef\u62a5\u7387\u964d\u4f4e\u81f3\r\n 1% \u4ee5\u4e0b\u3002<\/p>\r\n<p><\/p><p style=\"color: rgb(128, 128, 128);\"><br><\/p>\r\n<span class=\"text-[9px] text-gray-400 bg-gray-800 px-1 rounded\"><\/span>\r\n<\/div>\r\n<p class=\"text-gray-400 text-[10px] leading-snug\">\r\n<\/p>\r\n<\/div>\r\n<!-- Card 4: Environment -->\r\n<div class=\"tech-card rounded-xl p-3 flex flex-col h-full\">\r\n<div class=\"flex justify-between items-start mb-2\">\r\n<div class=\"w-8 h-8 rounded-lg bg-teal-900\/50 flex items-center justify-center text-teal-400 border border-teal-500\/30\">\r\n<i class=\"fa-solid fa-cloud-showers-heavy\"><\/i>\r\n<\/div>\r\n<span class=\"text-[10px] bg-teal-900 text-teal-300 px-2 py-0.5 rounded\">\u8bf1\u53d1\u56e0\u5b50<\/span>\r\n<\/div>\r\n<h4 class=\"text-white font-bold mb-1 text-sm\">\u96e8\u91cf \/ \u6c34\u4f4d \/ \u5b54\u538b<\/h4>\r\n<div class=\"flex flex-wrap gap-1 mb-2\">\r\n<span class=\"text-[9px] text-gray-400 bg-gray-800 px-1 rounded\" style=\"color: rgb(128, 128, 128);\">\u964d\u96e8\u5f3a\u5ea6<\/span>\r\n<span class=\"text-[9px] text-gray-400 bg-gray-800 px-1 rounded\" style=\"color: rgb(128, 128, 128);\">\u5730\u4e0b\u6c34\u6e17\u6d41<\/span>\r\n<\/div>\r\n<p class=\"text-gray-400 text-[10px] leading-snug\" style=\"color: rgb(128, 128, 128);\">\u540c\u6b65\u76d1\u6d4b\u964d\u96e8\u91cf\u4e0e\u5730\u4e0b\u6c34\u4f4d\/\u5b54\u9699\u6c34\u538b\u529b\uff0c\u6784\u5efa\u964d\u96e8-\u6e17\u6d41-\u53d8\u5f62\u8026\u5408\u6a21\u578b\u3002<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Right Column: Specs & Deployment -->\r\n<div class=\"w-[45%] flex flex-col gap-4\">\r\n<!-- Key Metrics -->\r\n<div class=\"bg-slate-800\/50 border border-slate-700 rounded-xl p-4\">\r\n<h3 class=\"text-white font-bold text-sm mb-3 flex items-center\">\r\n<i class=\"fa-solid fa-sliders text-blue-400 mr-2\"><\/i>\u5173\u952e\u6280\u672f\u6307\u6807\r\n <\/h3>\r\n<div class=\"grid grid-cols-2 gap-y-3 gap-x-2\">\r\n<div class=\"flex items-center\">\r\n<div class=\"w-1 h-8 bg-green-500 rounded-full mr-2\"><\/div>\r\n<div>\r\n<p class=\"text-[10px] text-gray-400 uppercase\">\u6d4b\u91cf\u7cbe\u5ea6<\/p>\r\n<p class=\"text-white font-mono font-bold text-sm\">0.2 - 1.0 mm<\/p>\r\n<\/div>\r\n<\/div>\r\n<div class=\"flex items-center\">\r\n<div class=\"w-1 h-8 bg-blue-500 rounded-full mr-2\"><\/div>\r\n<div>\r\n<p class=\"text-[10px] text-gray-400 uppercase\">\u91c7\u6837\u9891\u7387<\/p>\r\n<p class=\"text-white font-mono font-bold text-sm\">1 - 10 Hz<\/p>\r\n<\/div>\r\n<\/div>\r\n<div class=\"flex items-center\">\r\n<div class=\"w-1 h-8 bg-yellow-500 rounded-full mr-2\"><\/div>\r\n<div>\r\n<p class=\"text-[10px] text-gray-400 uppercase\">\u529f\u8017\u7eed\u822a<\/p>\r\n<p class=\"text-white font-mono font-bold text-sm\"><2W \/ 30Days+<\/p>\r\n<\/div>\r\n<\/div>\r\n<div class=\"flex items-center\">\r\n<div class=\"w-1 h-8 bg-purple-500 rounded-full mr-2\"><\/div>\r\n<div>\r\n<p class=\"text-[10px] text-gray-400 uppercase\">\u9632\u62a4\u7b49\u7ea7<\/p>\r\n<p class=\"text-white font-mono font-bold text-sm\">IP67 \/ IP68<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Deployment Strategy -->\r\n<div class=\"bg-slate-800\/50 border border-slate-700 rounded-xl p-4 flex-1 flex flex-col\">\r\n<h3 class=\"text-white font-bold text-sm mb-3 flex items-center\">\r\n<i class=\"fa-solid fa-map text-blue-400 mr-2\"><\/i>\u7acb\u4f53\u5316\u90e8\u7f72\u7b56\u7565\r\n <\/h3>\r\n<div class=\"relative flex-1 bg-slate-900\/50 rounded-lg p-3 border border-slate-800\">\r\n<!-- Simple Deployment Diagram -->\r\n<div class=\"absolute inset-0 flex items-center justify-center opacity-20\">\r\n<i class=\"fa-solid fa-mountain text-9xl text-gray-600\"><\/i>\r\n<\/div>\r\n<div class=\"relative z-10 flex flex-col justify-between h-full space-y-2\">\r\n<div class=\"flex items-center justify-between\">\r\n<span class=\"text-[10px] text-blue-300 bg-blue-900\/30 px-2 py-0.5 rounded border border-blue-800\">\u8868\u5c42: GNSS\/\u96f7\u8fbe<\/span>\r\n<div class=\"h-px bg-blue-500\/30 flex-1 mx-2\"><\/div>\r\n<\/div>\r\n<div class=\"flex items-center justify-between pl-4\">\r\n<span class=\"text-[10px] text-cyan-300 bg-cyan-900\/30 px-2 py-0.5 rounded border border-cyan-800\">\u6df1\u90e8: \u6d4b\u659c\/\u5149\u7ea4<\/span>\r\n<div class=\"h-px bg-cyan-500\/30 flex-1 mx-2\"><\/div>\r\n<\/div>\r\n<div class=\"flex items-center justify-between pl-8\">\r\n<span class=\"text-[10px] text-teal-300 bg-teal-900\/30 px-2 py-0.5 rounded border border-teal-800\">\u6c9f\u9053: \u96e8\u91cf\/\u6c34\u4f4d<\/span>\r\n<div class=\"h-px bg-teal-500\/30 flex-1 mx-2\"><\/div>\r\n<\/div>\r\n<div class=\"flex items-center justify-between pl-12\">\r\n<span class=\"text-[10px] text-purple-300 bg-purple-900\/30 px-2 py-0.5 rounded border border-purple-800\">\u4e0b\u6e38: \u89c6\u9891\/\u5e7f\u64ad<\/span>\r\n<div class=\"h-px bg-purple-500\/30 flex-1 mx-2\"><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Reliability & Interface -->\r\n<div class=\"grid grid-cols-2 gap-3 mt-1\">\r\n<div class=\"bg-slate-800\/50 border border-slate-700 rounded-xl p-3\">\r\n<h4 class=\"text-xs text-white font-bold mb-2\"><i class=\"fa-solid fa-shield-halved text-green-400 mr-1\"><\/i>\u6297\u5e72\u6270\u63aa\u65bd<\/h4>\r\n<div class=\"space-y-1\">\r\n<p class=\"text-[10px] text-gray-400 flex items-center\"><i class=\"fa-solid fa-check text-[8px] text-green-500 mr-1\"><\/i>\u786c\u4ef6\u6e29\u6f02\u81ea\u52a8\u8865\u507f<\/p>\r\n<p class=\"text-[10px] text-gray-400 flex items-center\"><i class=\"fa-solid fa-check text-[8px] text-green-500 mr-1\"><\/i>\u5173\u952e\u70b9\u4f4d\u5197\u4f59\u5e03\u8bbe<\/p>\r\n<p class=\"text-[10px] text-gray-400 flex items-center\"><i class=\"fa-solid fa-check text-[8px] text-green-500 mr-1\"><\/i>\u4f20\u611f\u5668\u5f02\u5e38\u81ea\u68c0\u9694\u79bb<\/p>\r\n<\/div>\r\n<\/div>\r\n<div class=\"bg-slate-800\/50 border border-slate-700 rounded-xl p-3\">\r\n<h4 class=\"text-xs text-white font-bold mb-2\"><i class=\"fa-solid fa-network-wired text-yellow-400 mr-1\"><\/i>\u878d\u5408\u63a5\u53e3<\/h4>\r\n<div class=\"flex flex-wrap gap-1\">\r\n<span class=\"text-[9px] bg-gray-700 text-gray-300 px-1.5 py-0.5 rounded border border-gray-600\">MQTT<\/span>\r\n<span class=\"text-[9px] bg-gray-700 text-gray-300 px-1.5 py-0.5 rounded border border-gray-600\">HTTP\/S<\/span>\r\n<span class=\"text-[9px] bg-gray-700 text-gray-300 px-1.5 py-0.5 rounded border border-gray-600\">OPC-UA<\/span>\r\n<span class=\"text-[9px] bg-gray-700 text-gray-300 px-1.5 py-0.5 rounded border border-gray-600\">Modbus<\/span>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n<\/body><\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9edd6a9 elementor-widget elementor-widget-html\" data-id=\"9edd6a9\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html data-theme=\"light\" lang=\"zh-CN\" style=\"\"><head>\r\n<meta charset=\"utf-8\">\r\n<meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\">\r\n<title>\u9ad8\u53ef\u9760\u4f20\u8f93\u6280\u672f<\/title>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.4.0\/css\/all.min.css\" rel=\"stylesheet\">\r\n<style>\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Noto Sans SC', sans-serif;\r\n background-color: #0f172a;\r\n color: #f8fafc;\r\n }\r\n .slide-container {\r\n width: 1280px;\r\n height: 1000px;\r\n position: relative;\r\n background-color: #0f172a;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \/* Background Grid *\/\r\n .bg-grid {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: #0f172a;\r\n background-image: url('data:image\/svg+xml,%3Csvg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"%3E%3Cg fill=\"%2338bdf8\" fill-opacity=\"0.05\" fill-rule=\"evenodd\"%3E%3Cpath d=\"M0 40L40 0H20L0 20M40 40V20L20 40\"\/%3E%3C\/g%3E%3C\/svg%3E');\r\n z-index: 0;\r\n }\r\n .content-card {\r\n background: rgba(30, 41, 59, 0.4);\r\n border: 1px solid rgba(56, 189, 248, 0.1);\r\n backdrop-filter: blur(8px);\r\n transition: all 0.3s ease;\r\n }\r\n .content-card:hover {\r\n border-color: rgba(56, 189, 248, 0.3);\r\n background: rgba(30, 41, 59, 0.6);\r\n }\r\n .tech-icon-box {\r\n width: 48px;\r\n height: 48px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 12px;\r\n background: rgba(15, 23, 42, 0.6);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n font-size: 1.25rem;\r\n margin-bottom: 1rem;\r\n }\r\n .network-node {\r\n width: 60px;\r\n height: 60px;\r\n border-radius: 50%;\r\n background: #1e293b;\r\n border: 2px solid #3b82f6;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1.5rem;\r\n color: #60a5fa;\r\n position: absolute;\r\n z-index: 10;\r\n box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);\r\n }\r\n .connection-line {\r\n position: absolute;\r\n height: 2px;\r\n background: rgba(59, 130, 246, 0.3);\r\n transform-origin: left center;\r\n z-index: 5;\r\n }\r\n .packet-dot {\r\n width: 6px;\r\n height: 6px;\r\n background: #60a5fa;\r\n border-radius: 50%;\r\n position: absolute;\r\n top: -2px;\r\n box-shadow: 0 0 8px #60a5fa;\r\n }\r\n .status-badge {\r\n font-size: 0.65rem;\r\n padding: 2px 6px;\r\n border-radius: 4px;\r\n background: rgba(16, 185, 129, 0.2);\r\n color: #34d399;\r\n border: 1px solid rgba(16, 185, 129, 0.3);\r\n margin-left: 8px;\r\n }\r\n .feature-list li {\r\n position: relative;\r\n padding-left: 1rem;\r\n margin-bottom: 0.5rem;\r\n color: #94a3b8;\r\n font-size: 0.85rem;\r\n line-height: 1.4;\r\n }\r\n .feature-list li::before {\r\n content: \"\";\r\n position: absolute;\r\n left: 0;\r\n top: 8px;\r\n width: 4px;\r\n height: 4px;\r\n border-radius: 50%;\r\n background: #38bdf8;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body autocomplete=\"off\" style=\"\">\r\n<div class=\"slide-container\">\r\n<!-- Background -->\r\n<div class=\"bg-grid\"><\/div>\r\n<div class=\"absolute top-0 right-0 w-[500px] h-[500px] bg-blue-900 rounded-full opacity-5 blur-3xl\"><\/div>\r\n<div class=\"absolute bottom-0 left-0 w-[400px] h-[400px] bg-indigo-900 rounded-full opacity-5 blur-3xl\"><\/div>\r\n<!-- Header -->\r\n<div class=\"flex items-center justify-between px-12 pt-8 pb-4 z-10\">\r\n<div>\r\n<div class=\"flex items-center space-x-3 mb-2\">\r\n<span class=\"px-2 py-1 bg-blue-900\/40 text-blue-400 text-xs font-bold rounded border border-blue-700\/30\">\u6838\u5fc3\u6280\u672f<\/span>\r\n<span class=\"text-gray-500 text-sm\">\/ 05 CHAPTER<\/span>\r\n<\/div>\r\n<h1 class=\"text-3xl font-bold text-white tracking-tight\">\u9ad8\u53ef\u9760\u4f20\u8f93\u6280\u672f<\/h1>\r\n<div class=\"h-1 w-20 bg-blue-500 mt-2\"><\/div>\r\n<\/div>\r\n<div class=\"flex items-center space-x-4\">\r\n<div class=\"text-right\">\r\n<p class=\"text-xs text-gray-400\">TRANSMISSION<\/p>\r\n<p class=\"text-sm font-bold text-blue-300\">\u591a\u7ef4\u94fe\u8def \u00b7 \u8fb9\u4e91\u534f\u540c<\/p>\r\n<\/div>\r\n<i class=\"fa-solid fa-tower-broadcast text-2xl text-blue-500\"><\/i>\r\n<\/div>\r\n<\/div>\r\n<!-- Main Content -->\r\n<div class=\"flex flex-1 px-12 py-4 space-x-6 z-10 overflow-hidden mb-6\">\r\n<!-- Left Column: Technical Features -->\r\n<div class=\"w-1\/2 flex flex-col space-y-4 h-full\">\r\n<!-- Feature 1: Multi-link Access -->\r\n<div class=\"content-card rounded-xl p-5 flex flex-col flex-1\">\r\n<div class=\"flex items-start space-x-4\">\r\n<div class=\"tech-icon-box text-blue-400 border-blue-500\/30\">\r\n<i class=\"fa-solid fa-satellite\"><\/i>\r\n<\/div>\r\n<div class=\"flex-1\">\r\n<h3 class=\"text-lg font-bold text-white mb-2 flex items-center\">\r\n \u6df7\u5408\u94fe\u8def\u63a5\u5165\u65b9\u6848\r\n <span class=\"status-badge\">Always Online<\/span>\r\n<\/h3>\r\n<p class=\"text-sm text-gray-400 mb-3\">\u9488\u5bf9\u590d\u6742\u5730\u5f62\u6784\u5efa\"\u5929\u5730\u4e00\u4f53\"\u901a\u4fe1\u7f51\uff0c\u786e\u4fdd\u6781\u7aef\u707e\u5bb3\u4e0b\u901a\u4fe1\u4e0d\u4e2d\u65ad\u3002<\/p>\r\n<div class=\"grid grid-cols-2 gap-2\">\r\n<div class=\"bg-blue-900\/20 px-3 py-2 rounded border border-blue-500\/20 text-xs text-blue-200 text-center\">\u5317\u6597\u77ed\u62a5\u6587<\/div>\r\n<div class=\"bg-blue-900\/20 px-3 py-2 rounded border border-blue-500\/20 text-xs text-blue-200 text-center\">4G \/ 5G \u516c\u7f51<\/div>\r\n<div class=\"bg-blue-900\/20 px-3 py-2 rounded border border-blue-500\/20 text-xs text-blue-200 text-center\">NB-IoT \/ LoRa<\/div>\r\n<div class=\"bg-blue-900\/20 px-3 py-2 rounded border border-blue-500\/20 text-xs text-blue-200 text-center\">\u536b\u661f\u4e13\u7f51<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Feature 2: Edge-Cloud Synergy -->\r\n<div class=\"content-card rounded-xl p-5 flex flex-col flex-1\">\r\n<div class=\"flex items-start space-x-4\">\r\n<div class=\"tech-icon-box text-green-400 border-green-500\/30\">\r\n<i class=\"fa-solid fa-server\"><\/i>\r\n<\/div>\r\n<div class=\"flex-1\">\r\n<h3 class=\"text-lg font-bold text-white mb-2\">\u8fb9\u4e91\u534f\u540c\u4e0e\u5bb9\u707e<\/h3>\r\n<ul class=\"feature-list\">\r\n<li><strong class=\"text-gray-200\">\u672c\u5730\u7f13\u5b58\uff1a<\/strong> \u65ad\u7f51\u81ea\u52a8\u5b58\u50a8\u6570\u636e\uff0c\u6062\u590d\u540e\u81ea\u52a8\u7eed\u4f20\uff0c\u4fdd\u969c\u6570\u636e\u5b8c\u6574\u6027<\/li>\r\n<li><strong class=\"text-gray-200\">99.9%\u5728\u7ebf\uff1a<\/strong> \u53cc\u6d3b\/\u591aAZ\u67b6\u6784\uff0c\u6545\u969c\u81ea\u52a8\u5207\u6362<\/li>\r\n<li><strong class=\"text-gray-200\">\u8fdc\u7a0b\u8fd0\u7ef4\uff1a<\/strong> \u652f\u6301OTA\u56fa\u4ef6\u5347\u7ea7\u3001\u53c2\u6570\u7b56\u7565\u4e91\u7aef\u4e0b\u53d1<\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Feature 3: Security & Performance -->\r\n<div class=\"content-card rounded-xl p-5 flex flex-col flex-1\">\r\n<div class=\"flex items-start space-x-4\">\r\n<div class=\"tech-icon-box text-purple-400 border-purple-500\/30\">\r\n<i class=\"fa-solid fa-shield-halved\"><\/i>\r\n<\/div>\r\n<div class=\"flex-1\">\r\n<h3 class=\"text-lg font-bold text-white mb-2 flex justify-between\">\r\n<span>\u5b89\u5168\u4e0e\u6027\u80fd\u6307\u6807<\/span>\r\n<span class=\"text-xs font-normal text-purple-300 bg-purple-900\/30 px-2 py-1 rounded\">\u4f01\u4e1a\u7ea7\u5b89\u5168<\/span>\r\n<\/h3>\r\n<div class=\"flex space-x-4 text-sm text-gray-400\">\r\n<div class=\"flex-1 border-r border-gray-700 pr-4\">\r\n<p class=\"text-white font-bold mb-1\">\u4f4e\u65f6\u5ef6<\/p>\r\n<p class=\"text-xs\">\u5f62\u53d8\u6570\u636e <1s \u5165\u5e93<br>\u89c6\u9891\u81ea\u9002\u5e94\u6d41\u63a7<\/p>\r\n<\/div>\r\n<div class=\"flex-1\">\r\n<p class=\"text-white font-bold mb-1\">\u9ad8\u5b89\u5168<\/p>\r\n<p class=\"text-xs\">TLS\u5168\u94fe\u8def\u52a0\u5bc6<br>\u8bbe\u5907\u8bc1\u4e66\u53cc\u5411\u8ba4\u8bc1<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Right Column: Visual Architecture -->\r\n<div class=\"w-1\/2 h-full relative rounded-xl border border-gray-700 bg-[#0f172a]\/50 backdrop-blur-sm overflow-hidden flex flex-col\">\r\n<div class=\"absolute top-4 left-4 z-20\">\r\n<h3 class=\"text-lg font-bold text-white\">\u6570\u636e\u4f20\u8f93\u62d3\u6251\u56fe<\/h3>\r\n<p class=\"text-xs text-gray-400\">Data Transmission Topology<\/p>\r\n<\/div>\r\n<!-- Legend -->\r\n<div class=\"absolute bottom-4 left-4 z-20 bg-gray-900\/80 p-3 rounded-lg border border-gray-700 text-xs\" style=\"transform: translate(441.961px, 3.86837px);\">\r\n<div class=\"flex items-center mb-1\"><span class=\"w-3 h-3 bg-blue-500 rounded-full mr-2\"><\/span> \u76d1\u6d4b\u7ec8\u7aef<\/div>\r\n<div class=\"flex items-center mb-1\"><span class=\"w-3 h-3 bg-green-500 rounded-full mr-2\"><\/span> \u8fb9\u7f18\u7f51\u5173<\/div>\r\n<div class=\"flex items-center\"><span class=\"w-3 h-3 bg-indigo-500 rounded-full mr-2\"><\/span> \u4e91\u7aef\u5e73\u53f0<\/div>\r\n<\/div>\r\n<!-- Visualization Container -->\r\n<div class=\"w-full h-full relative\" id=\"topology-container\">\r\n<!-- Nodes will be placed via CSS, simulated Canvas drawing below -->\r\n<!-- 1. Sensor Nodes (Left) -->\r\n<div class=\"network-node text-sm\" style=\"top: 20%; left: 15%; width: 40px; height: 40px; font-size: 1rem;\">\r\n<i class=\"fa-solid fa-microchip\"><\/i>\r\n<\/div>\r\n<div class=\"absolute text-xs text-gray-400\" style=\"top: 27%; left: 14%;\">GNSS<\/div>\r\n<div class=\"network-node text-sm\" style=\"top: 50%; left: 15%; width: 40px; height: 40px; font-size: 1rem;\">\r\n<i class=\"fa-solid fa-ruler\"><\/i>\r\n<\/div>\r\n<div class=\"absolute text-xs text-gray-400\" style=\"top: 57%; left: 14%;\">\u88c2\u7f1d\u8ba1<\/div>\r\n<div class=\"network-node text-sm\" style=\"top: 80%; left: 15%; width: 40px; height: 40px; font-size: 1rem;\">\r\n<i class=\"fa-solid fa-video\"><\/i>\r\n<\/div>\r\n<div class=\"absolute text-xs text-gray-400\" style=\"top: 87%; left: 15%;\">\u89c6\u9891<\/div>\r\n<!-- 2. Edge Gateway (Center) -->\r\n<div class=\"network-node border-green-500 text-green-500\" style=\"top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px;\">\r\n<i class=\"fa-solid fa-network-wired\"><\/i>\r\n<\/div>\r\n<div class=\"absolute text-xs text-green-400 font-bold\" style=\"top: 62%; left: 45%;\">\u8fb9\u7f18\u8ba1\u7b97\u7f51\u5173<\/div>\r\n<!-- 3. Cloud Platform (Right) -->\r\n<div class=\"network-node border-indigo-500 text-indigo-500\" style=\"top: 50%; right: 10%; transform: translateY(-50%); width: 100px; height: 100px; font-size: 2.5rem;\">\r\n<i class=\"fa-solid fa-cloud\"><\/i>\r\n<\/div>\r\n<div class=\"absolute text-sm text-indigo-400 font-bold\" style=\"top: 65%; right: 12%;\">\u4e91\u63a7\u5e73\u53f0<\/div>\r\n<!-- Transmission Lines Canvas -->\r\n<canvas class=\"absolute inset-0 w-full h-full z-0\" id=\"transCanvas\" width=\"578\" height=\"533\"><\/canvas>\r\n<!-- Animated Connection Effects -->\r\n<div class=\"absolute text-xs font-mono text-blue-300 bg-gray-900\/80 px-2 py-1 rounded border border-blue-500\/30\" style=\"top: 35%; left: 35%;\">\r\n<i class=\"fa-solid fa-wifi mr-1\"><\/i> 4G\/5G\r\n <\/div>\r\n<div class=\"absolute text-xs font-mono text-yellow-300 bg-gray-900\/80 px-2 py-1 rounded border border-yellow-500\/30\" style=\"top: 65%; left: 35%;\">\r\n<i class=\"fa-solid fa-satellite mr-1\"><\/i> \u5317\u6597\r\n <\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const canvas = document.getElementById('transCanvas');\r\n const ctx = canvas.getContext('2d');\r\n \r\n function resize() {\r\n canvas.width = canvas.parentElement.clientWidth;\r\n canvas.height = canvas.parentElement.clientHeight;\r\n draw();\r\n }\r\n window.addEventListener('resize', resize);\r\n \r\n function draw() {\r\n const w = canvas.width;\r\n const h = canvas.height;\r\n ctx.clearRect(0, 0, w, h);\r\n \r\n \/\/ Coordinates\r\n const sensors = [\r\n {x: w * 0.15 + 20, y: h * 0.2 + 20},\r\n {x: w * 0.15 + 20, y: h * 0.5 + 20},\r\n {x: w * 0.15 + 20, y: h * 0.8 + 20}\r\n ];\r\n const gateway = {x: w * 0.5, y: h * 0.5};\r\n const cloud = {x: w * 0.9 - 50, y: h * 0.5};\r\n \r\n \/\/ Draw Sensor -> Gateway Lines\r\n ctx.lineWidth = 2;\r\n ctx.setLineDash([5, 5]);\r\n \r\n sensors.forEach((s, i) => {\r\n ctx.beginPath();\r\n ctx.moveTo(s.x, s.y);\r\n \r\n \/\/ Curve control points\r\n const cp1x = s.x + (gateway.x - s.x) * 0.5;\r\n const cp1y = s.y;\r\n const cp2x = gateway.x - (gateway.x - s.x) * 0.5;\r\n const cp2y = gateway.y;\r\n \r\n \/\/ Color based on type\r\n if (i === 0) ctx.strokeStyle = 'rgba(96, 165, 250, 0.4)'; \/\/ Blue\r\n else if (i === 1) ctx.strokeStyle = 'rgba(250, 204, 21, 0.4)'; \/\/ Yellow (Beidou)\r\n else ctx.strokeStyle = 'rgba(168, 85, 247, 0.4)'; \/\/ Purple\r\n \r\n ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, gateway.x, gateway.y);\r\n ctx.stroke();\r\n });\r\n \r\n \/\/ Draw Gateway -> Cloud Line (Thick)\r\n ctx.beginPath();\r\n ctx.moveTo(gateway.x, gateway.y);\r\n ctx.lineTo(cloud.x, cloud.y);\r\n ctx.lineWidth = 4;\r\n ctx.setLineDash([]);\r\n ctx.strokeStyle = 'rgba(99, 102, 241, 0.3)'; \/\/ Indigo\r\n ctx.stroke();\r\n \r\n \/\/ Animated packets logic would be handled by CSS or JS loop\r\n \/\/ Drawing static representation of packets\r\n \r\n \/\/ Packet on Gateway -> Cloud\r\n ctx.beginPath();\r\n ctx.arc(gateway.x + (cloud.x - gateway.x) * 0.6, gateway.y, 4, 0, Math.PI * 2);\r\n ctx.fillStyle = '#818cf8';\r\n ctx.fill();\r\n ctx.shadowColor = '#818cf8';\r\n ctx.shadowBlur = 10;\r\n }\r\n \r\n \/\/ Animation Loop for packets\r\n let offset = 0;\r\n function animate() {\r\n offset = (offset + 1) % 100;\r\n draw(); \/\/ Redraw static lines\r\n \r\n const w = canvas.width;\r\n const h = canvas.height;\r\n const gateway = {x: w * 0.5, y: h * 0.5};\r\n const cloud = {x: w * 0.9 - 50, y: h * 0.5};\r\n const sensors = [\r\n {x: w * 0.15 + 20, y: h * 0.2 + 20},\r\n {x: w * 0.15 + 20, y: h * 0.5 + 20},\r\n {x: w * 0.15 + 20, y: h * 0.8 + 20}\r\n ];\r\n\r\n \/\/ Draw moving packets\r\n sensors.forEach((s, i) => {\r\n const t = (offset + i * 33) % 100 \/ 100;\r\n \/\/ Cubic Bezier calculation\r\n const cp1x = s.x + (gateway.x - s.x) * 0.5;\r\n const cp1y = s.y;\r\n const cp2x = gateway.x - (gateway.x - s.x) * 0.5;\r\n const cp2y = gateway.y;\r\n \r\n \/\/ Simplified linear interpolation for visual effect (bezier math is complex)\r\n \/\/ Using simple lerp for demo\r\n \/\/ Ideally, use getPointOnPath if SVG, here canvas approx\r\n \r\n \/\/ Packet color\r\n ctx.fillStyle = i === 1 ? '#facc15' : '#60a5fa';\r\n ctx.beginPath();\r\n \/\/ Approx position logic\r\n let px, py;\r\n if (t < 0.5) {\r\n px = s.x + (cp1x - s.x) * (t * 2);\r\n py = s.y + (cp1y - s.y) * (t * 2);\r\n } else {\r\n px = cp1x + (gateway.x - cp1x) * ((t - 0.5) * 2);\r\n py = cp1y + (gateway.y - cp1y) * ((t - 0.5) * 2);\r\n }\r\n \/\/ Overwrite with simple straight line for robustness in this prompt\r\n px = s.x + (gateway.x - s.x) * t;\r\n py = s.y + (gateway.y - s.y) * t;\r\n\r\n ctx.arc(px, py, 3, 0, Math.PI * 2);\r\n ctx.fill();\r\n });\r\n\r\n \/\/ Gateway -> Cloud Packet\r\n const t2 = (offset * 1.5) % 100 \/ 100;\r\n const px2 = gateway.x + (cloud.x - gateway.x) * t2;\r\n const py2 = gateway.y;\r\n ctx.beginPath();\r\n ctx.arc(px2, py2, 5, 0, Math.PI * 2);\r\n ctx.fillStyle = '#a5b4fc';\r\n ctx.fill();\r\n\r\n requestAnimationFrame(animate);\r\n }\r\n \r\n resize();\r\n animate();\r\n });\r\n<\/script>\r\n\r\n<\/body><\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-597ffee elementor-widget elementor-widget-html\" data-id=\"597ffee\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"zh-CN\" data-theme=\"light\" style=\"\"><head>\r\n<meta charset=\"utf-8\">\r\n<meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\">\r\n<title>AI\u667a\u80fd\u7b97\u6cd5\u5f15\u64ce<\/title>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.4.0\/css\/all.min.css\" rel=\"stylesheet\">\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/echarts@5\/dist\/echarts.min.js\"><\/script>\r\n<style>\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Noto Sans SC', sans-serif;\r\n background-color: #0f172a;\r\n }\r\n .slide-container {\r\n width: 1280px;\r\n height: 1000px;\r\n position: relative;\r\n background-color: #0f172a;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \/* Grid Background Pattern *\/\r\n .bg-grid {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-image: url('data:image\/svg+xml,%3Csvg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"%3E%3Cpath d=\"M0 0h40v40H0V0zm1 1h38v38H1V1z\" fill=\"%2338bdf8\" fill-opacity=\"0.03\" fill-rule=\"evenodd\"\/%3E%3C\/svg%3E');\r\n z-index: 0;\r\n }\r\n\r\n \/* Tech Card Styling *\/\r\n .tech-card {\r\n background-color: rgba(30, 41, 59, 0.6);\r\n border: 1px solid rgba(148, 163, 184, 0.2);\r\n backdrop-filter: blur(5px);\r\n transition: all 0.3s ease;\r\n }\r\n .tech-card:hover {\r\n border-color: rgba(56, 189, 248, 0.6);\r\n background-color: rgba(30, 41, 59, 0.9);\r\n transform: translateY(-2px);\r\n box-shadow: 0 4px 20px rgba(56, 189, 248, 0.15);\r\n }\r\n\r\n \/* Chart Container *\/\r\n .chart-wrapper {\r\n background: rgba(15, 23, 42, 0.5);\r\n border: 1px solid rgba(56, 189, 248, 0.2);\r\n border-radius: 12px;\r\n position: relative;\r\n }\r\n .chart-wrapper::after {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 1px;\r\n background: rgba(56, 189, 248, 0.5);\r\n box-shadow: 0 0 10px rgba(56, 189, 248, 0.8);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body style=\"\">\r\n<div class=\"slide-container\">\r\n<!-- Background Elements -->\r\n<div class=\"bg-grid\"><\/div>\r\n<div class=\"absolute top-0 right-0 w-[600px] h-[600px] bg-blue-900 rounded-full opacity-5 blur-3xl\"><\/div>\r\n<div class=\"absolute bottom-0 left-0 w-[400px] h-[400px] bg-cyan-900 rounded-full opacity-5 blur-3xl\"><\/div>\r\n<!-- Header -->\r\n<div class=\"flex items-center justify-between px-12 pt-8 pb-4 z-10\">\r\n<div>\r\n<div class=\"flex items-center space-x-3 mb-2\">\r\n<span class=\"px-2 py-1 bg-blue-900\/40 text-blue-400 text-xs font-bold rounded border border-blue-700\/40\">CORE TECHNOLOGY<\/span>\r\n<span class=\"text-gray-500 text-sm\">\/ 05 AI ALGORITHM ENGINE<\/span>\r\n<\/div>\r\n<h1 class=\"text-3xl font-bold text-white tracking-tight\">AI \u667a\u80fd\u7b97\u6cd5\u5f15\u64ce<\/h1>\r\n<div class=\"h-1 w-24 bg-blue-500 mt-2\"><\/div>\r\n<\/div>\r\n<div class=\"flex items-center space-x-4\">\r\n<div class=\"px-4 py-2 bg-gray-800\/80 rounded border border-gray-700 flex items-center space-x-3\">\r\n<div class=\"flex flex-col text-right\">\r\n<span class=\"text-[10px] text-gray-400\">FALSE ALARM<\/span>\r\n<span class=\"text-lg font-bold text-green-400\">\u219340%+<\/span>\r\n<\/div>\r\n<div class=\"w-px h-8 bg-gray-600\"><\/div>\r\n<div class=\"flex flex-col text-right\">\r\n<span class=\"text-[10px] text-gray-400\">LEAD TIME<\/span>\r\n<span class=\"text-lg font-bold text-blue-400\">\u219130%+<\/span>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Main Content -->\r\n<div class=\"flex flex-1 px-12 pb-8 gap-8 z-10 overflow-hidden\">\r\n<!-- Left Column: Core Algorithms -->\r\n<div class=\"w-1\/2 flex flex-col\">\r\n<div class=\"flex items-center mb-4\">\r\n<div class=\"w-8 h-8 rounded bg-blue-900\/50 flex items-center justify-center mr-3 border border-blue-500\/30\">\r\n<i class=\"fa-solid fa-brain text-blue-400\"><\/i>\r\n<\/div>\r\n<h3 class=\"text-xl text-white font-bold\">\u6838\u5fc3\u7b97\u6cd5\u80fd\u529b<\/h3>\r\n<\/div>\r\n<div class=\"grid grid-cols-2 gap-4 flex-1\">\r\n<!-- Card 1: Noise Filtering -->\r\n<div class=\"tech-card rounded-xl p-4 flex flex-col\">\r\n<div class=\"flex justify-between items-start mb-2\">\r\n<div class=\"w-10 h-10 rounded-lg bg-indigo-900\/50 flex items-center justify-center text-indigo-400 border border-indigo-500\/30\">\r\n<i class=\"fa-solid fa-filter text-xl\"><\/i>\r\n<\/div>\r\n<span class=\"text-[10px] bg-indigo-900 text-indigo-300 px-2 py-0.5 rounded\">Filter<\/span>\r\n<\/div>\r\n<h4 class=\"text-white font-bold mb-1\">\u65f6\u5e8f\u6ee4\u6ce2\u4e0e\u53bb\u566a<\/h4>\r\n<p class=\"text-gray-400 text-xs leading-relaxed\">\u57fa\u4e8e\u5c0f\u6ce2\u53d8\u6362\u4e0e\u5361\u5c14\u66fc\u6ee4\u6ce2\uff0c\u5254\u9664\u73af\u5883\u566a\u58f0\uff0c\u8fd8\u539f<span class=\"text-white font-bold\">\u771f\u5b9e\u5f62\u53d8<\/span>\u3002<\/p>\r\n<\/div>\r\n<!-- Card 2: Anomaly Detection -->\r\n<div class=\"tech-card rounded-xl p-4 flex flex-col\">\r\n<div class=\"flex justify-between items-start mb-2\">\r\n<div class=\"w-10 h-10 rounded-lg bg-purple-900\/50 flex items-center justify-center text-purple-400 border border-purple-500\/30\">\r\n<i class=\"fa-solid fa-triangle-exclamation text-xl\"><\/i>\r\n<\/div>\r\n<span class=\"text-[10px] bg-purple-900 text-purple-300 px-2 py-0.5 rounded\">Detect<\/span>\r\n<\/div>\r\n<h4 class=\"text-white font-bold mb-1\">\u5f02\u5e38\u68c0\u6d4b\u8bc6\u522b<\/h4>\r\n<p class=\"text-gray-400 text-xs leading-relaxed\">\u533a\u5206\u7a81\u53d8\uff08\u5d29\u584c\uff09\u4e0e\u7f13\u53d8\uff08\u6c89\u964d\uff09\uff0c\u8bc6\u522b<span class=\"text-white font-bold\">\u975e\u7ebf\u6027<\/span>\u5f62\u53d8\u7279\u5f81\u3002<\/p>\r\n<\/div>\r\n<!-- Card 3: Data Fusion -->\r\n<div class=\"tech-card rounded-xl p-4 flex flex-col\">\r\n<div class=\"flex justify-between items-start mb-2\">\r\n<div class=\"w-10 h-10 rounded-lg bg-cyan-900\/50 flex items-center justify-center text-cyan-400 border border-cyan-500\/30\">\r\n<i class=\"fa-solid fa-layer-group text-xl\"><\/i>\r\n<\/div>\r\n<span class=\"text-[10px] bg-cyan-900 text-cyan-300 px-2 py-0.5 rounded\">Fusion<\/span>\r\n<\/div>\r\n<h4 class=\"text-white font-bold mb-1\">\u8de8\u6e90\u6570\u636e\u878d\u5408<\/h4>\r\n<p class=\"text-gray-400 text-xs leading-relaxed\">\u878d\u5408GNSS\u3001InSAR\u3001\u96e8\u91cf\u7b49\u591a\u6e90\u6570\u636e\uff0c\u6784\u5efa<span class=\"text-white font-bold\">\u591a\u7ef4\u5224\u636e<\/span>\u6a21\u578b\u3002<\/p>\r\n<\/div>\r\n<!-- Card 4: Trend Prediction -->\r\n<div class=\"tech-card rounded-xl p-4 flex flex-col\">\r\n<div class=\"flex justify-between items-start mb-2\">\r\n<div class=\"w-10 h-10 rounded-lg bg-teal-900\/50 flex items-center justify-center text-teal-400 border border-teal-500\/30\">\r\n<i class=\"fa-solid fa-chart-line text-xl\"><\/i>\r\n<\/div>\r\n<span class=\"text-[10px] bg-teal-900 text-teal-300 px-2 py-0.5 rounded\">Predict<\/span>\r\n<\/div>\r\n<h4 class=\"text-white font-bold mb-1\">\u8d8b\u52bf\u9884\u6d4b (ARIMA\/LSTM)<\/h4>\r\n<p class=\"text-gray-400 text-xs leading-relaxed\">\u5229\u7528\u6df1\u5ea6\u5b66\u4e60\u9884\u6d4b\u672a\u676524-72\u5c0f\u65f6\u4f4d\u79fb\uff0c\u4e89\u53d6<span class=\"text-white font-bold\">\u9ec4\u91d1\u9884\u8b66\u7a97\u53e3<\/span>\u3002<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Right Column: Algorithm Engine (Processing Layer) -->\r\n<div class=\"w-1\/2 flex flex-col\">\r\n<div class=\"flex items-center mb-4\">\r\n<div class=\"w-8 h-8 rounded bg-green-900\/50 flex items-center justify-center mr-3 border border-green-500\/30\">\r\n<i class=\"fa-solid fa-clipboard-check text-green-400\"><\/i>\r\n<\/div>\r\n<h3 class=\"text-xl text-white font-bold\">\u8f93\u51fa\u80fd\u529b\u4e0e\u6548\u679c<\/h3>\r\n<\/div>\r\n<!-- Algo Pipeline Visual -->\r\n<div class=\"flex justify-between mb-6 px-2\">\r\n<div class=\"text-center\">\r\n<div class=\"w-12 h-12 rounded-full bg-gray-800 border border-gray-600 flex items-center justify-center mx-auto mb-2 text-blue-400\">\r\n<i class=\"fa-solid fa-bullseye\"><\/i>\r\n<\/div>\r\n<p class=\"text-[10px] text-gray-400\">\u591a\u7c92\u5ea6\u9884\u8b66<\/p>\r\n<\/div>\r\n<div class=\"flex-1 flex items-center justify-center\">\r\n<div class=\"h-0.5 w-full bg-gray-700 relative\">\r\n<i class=\"fa-solid fa-chevron-right absolute right-0 -top-1.5 text-gray-600 text-xs\"><\/i>\r\n<\/div>\r\n<\/div>\r\n<div class=\"text-center\">\r\n<div class=\"w-12 h-12 rounded-full bg-gray-800 border border-gray-600 flex items-center justify-center mx-auto mb-2 text-purple-400\">\r\n<i class=\"fa-solid fa-star-half-stroke\"><\/i>\r\n<\/div>\r\n<p class=\"text-[10px] text-gray-400\">\u53ef\u4fe1\u5ea6\u8bc4\u5206<\/p>\r\n<\/div>\r\n<div class=\"flex-1 flex items-center justify-center\">\r\n<div class=\"h-0.5 w-full bg-gray-700 relative\">\r\n<i class=\"fa-solid fa-chevron-right absolute right-0 -top-1.5 text-gray-600 text-xs\"><\/i>\r\n<\/div>\r\n<\/div>\r\n<div class=\"text-center\">\r\n<div class=\"w-12 h-12 rounded-full bg-blue-900\/50 border border-blue-500 flex items-center justify-center mx-auto mb-2 text-white shadow-[0_0_15px_rgba(59,130,246,0.5)]\">\r\n<i class=\"fa-solid fa-file-circle-check\"><\/i>\r\n<\/div>\r\n<p class=\"text-[10px] text-blue-400 font-bold\">\u53ef\u89e3\u91ca\u62a5\u544a<\/p>\r\n<\/div>\r\n<\/div>\r\n<!-- Visualization Chart -->\r\n<div class=\"flex-1 chart-wrapper p-4 flex flex-col\">\r\n<div class=\"flex justify-between items-center mb-2\">\r\n<h4 class=\"text-sm text-blue-200 font-bold\"><i class=\"fa-solid fa-chart-area mr-2\"><\/i>\u7b97\u6cd5\u6548\u679c\u6f14\u793a\uff1a\u98ce\u9669\u8bc4\u4f30\u4e0e\u52a8\u6001\u9608\u503c<\/h4>\r\n<div class=\"flex space-x-3 text-[10px]\">\r\n<span class=\"flex items-center text-blue-400\"><span class=\"w-2 h-2 rounded-full bg-blue-500 mr-1\"><\/span>\u98ce\u9669\u6307\u6570<\/span>\r\n<span class=\"flex items-center text-red-400\"><span class=\"w-2 h-2 rounded-full bg-red-500 mr-1\"><\/span>\u52a8\u6001\u9608\u503c<\/span>\r\n<span class=\"flex items-center text-green-400\"><span class=\"w-2 h-2 rounded-full bg-green-500 mr-1\"><\/span>\u5b89\u5168\u533a\u95f4<\/span>\r\n<\/div>\r\n<\/div>\r\n<div class=\"flex-1 w-full h-full\" id=\"algoChart\" _echarts_instance_=\"ec_1767521075119\" style=\"user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: relative;\"><div style=\"position: relative; width: 542px; height: 261px; padding: 0px; margin: 0px; border-width: 0px;\"><canvas data-zr-dom-id=\"zr_0\" width=\"710\" height=\"341\" style=\"position: absolute; left: 0px; top: 0px; width: 542px; height: 261px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;\"><\/canvas><\/div><div class=\"\"><\/div><\/div>\r\n<\/div>\r\n<!-- Algo Capability Tags -->\r\n<div class=\"mt-4 grid grid-cols-2 gap-3\">\r\n<div class=\"flex items-start\">\r\n<i class=\"fa-solid fa-check text-green-500 mt-1 mr-2 text-xs\"><\/i>\r\n<div>\r\n<p class=\"text-white text-xs font-bold\">\u9608\u503c\u81ea\u9002\u5e94 (Adaptive Threshold)<\/p>\r\n<p class=\"text-gray-500 text-[10px]\">\u52a8\u6001\u8c03\u6574\u62a5\u8b66\u7ebf\uff0c\u907f\u514d\u964d\u96e8\u7b49\u73af\u5883\u56e0\u7d20\u5bfc\u81f4\u7684\u8bef\u62a5\u3002<\/p>\r\n<\/div>\r\n<\/div>\r\n<div class=\"flex items-start\">\r\n<i class=\"fa-solid fa-check text-green-500 mt-1 mr-2 text-xs\"><\/i>\r\n<div>\r\n<p class=\"text-white text-xs font-bold\">\u5f52\u56e0\u5206\u6790 (Root Cause)<\/p>\r\n<p class=\"text-gray-500 text-[10px]\">\u8f93\u51fa\u4e0d\u4ec5\u662f\u62a5\u8b66\uff0c\u66f4\u63d0\u4f9b\u201c\u964d\u96e8\u8bf1\u53d1\u201d\u6216\u201c\u6784\u9020\u6d3b\u52a8\u201d\u7b49\u539f\u56e0\u3002<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<script>\r\n document.addEventListener('DOMContentLoaded', function() {\r\n var chartDom = document.getElementById('algoChart');\r\n var myChart = echarts.init(chartDom);\r\n var option;\r\n\r\n \/\/ Generate simulated data for risk assessment\r\n let time = [];\r\n let riskIndex = [];\r\n let dynamicThreshold = [];\r\n let safeZone = [];\r\n \r\n for (let i = 0; i < 60; i++) {\r\n time.push(i);\r\n \/\/ Risk Index: simulate a rising trend with fluctuations\r\n let risk = 20 + i * 0.8 + Math.sin(i * 0.3) * 5 + Math.random() * 3;\r\n riskIndex.push(risk.toFixed(1));\r\n \r\n \/\/ Dynamic Threshold: adapts to recent trends but stays higher\r\n let threshold = 45 + i * 0.5 + Math.cos(i * 0.2) * 3;\r\n dynamicThreshold.push(threshold.toFixed(1));\r\n \r\n safeZone.push(threshold - 15);\r\n }\r\n\r\n option = {\r\n grid: {\r\n top: '15%',\r\n left: '5%',\r\n right: '5%',\r\n bottom: '10%',\r\n containLabel: true\r\n },\r\n tooltip: {\r\n trigger: 'axis'\r\n },\r\n xAxis: {\r\n type: 'category',\r\n boundaryGap: false,\r\n data: time,\r\n show: false\r\n },\r\n yAxis: {\r\n type: 'value',\r\n splitLine: {\r\n lineStyle: {\r\n color: 'rgba(255,255,255,0.05)'\r\n }\r\n },\r\n axisLabel: {\r\n color: '#64748b',\r\n fontSize: 10\r\n }\r\n },\r\n series: [\r\n {\r\n name: '\u52a8\u6001\u9608\u503c',\r\n type: 'line',\r\n lineStyle: {\r\n color: '#f87171',\r\n width: 2,\r\n type: 'dashed'\r\n },\r\n symbol: 'none',\r\n data: dynamicThreshold\r\n },\r\n {\r\n name: '\u98ce\u9669\u6307\u6570',\r\n type: 'line',\r\n smooth: true,\r\n showSymbol: false,\r\n lineStyle: {\r\n color: '#3b82f6',\r\n width: 3,\r\n shadowColor: 'rgba(59, 130, 246, 0.5)',\r\n shadowBlur: 10\r\n },\r\n areaStyle: {\r\n color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\r\n { offset: 0, color: 'rgba(59, 130, 246, 0.4)' },\r\n { offset: 1, color: 'rgba(59, 130, 246, 0.05)' }\r\n ])\r\n },\r\n data: riskIndex,\r\n markPoint: {\r\n data: [\r\n { type: 'max', name: 'Max Risk', itemStyle: { color: '#f87171' } }\r\n ]\r\n }\r\n },\r\n {\r\n name: '\u5b89\u5168\u533a\u95f4',\r\n type: 'line',\r\n lineStyle: {\r\n opacity: 0\r\n },\r\n areaStyle: {\r\n color: 'rgba(16, 185, 129, 0.1)'\r\n },\r\n symbol: 'none',\r\n data: safeZone,\r\n stack: 'zone' \/\/ Stack to fill area below threshold if needed, simplified here\r\n }\r\n ]\r\n };\r\n\r\n myChart.setOption(option);\r\n \r\n window.addEventListener('resize', function() {\r\n myChart.resize();\r\n });\r\n });\r\n <\/script>\r\n\r\n<\/body><\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-119b373 elementor-widget elementor-widget-html\" data-id=\"119b373\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"zh-CN\" data-theme=\"light\" style=\"\"><head>\r\n<meta charset=\"utf-8\">\r\n<meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\">\r\n<title>\u7ae0\u8282\u5c01\u9762\uff1a\u6211\u4eec\u7684\u6280\u672f\u56e2\u961f<\/title>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.4.0\/css\/all.min.css\" rel=\"stylesheet\">\r\n<style>\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Noto Sans SC', sans-serif;\r\n background-color: #0f172a;\r\n }\r\n .slide-container {\r\n width: 1280px;\r\n height: 1000px;\r\n position: relative;\r\n background-color: #0f172a;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \/* Grid Background Pattern *\/\r\n .bg-grid {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-image: \r\n linear-gradient(rgba(56, 189, 248, 0.05) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(56, 189, 248, 0.05) 1px, transparent 1px);\r\n background-size: 40px 40px;\r\n z-index: 0;\r\n }\r\n .chapter-number-huge {\r\n font-size: 12rem;\r\n font-weight: 900;\r\n line-height: 1;\r\n color: transparent;\r\n -webkit-text-stroke: 4px rgba(255, 255, 255, 0.1);\r\n position: absolute;\r\n left: 60px;\r\n top: 60px;\r\n z-index: 0;\r\n opacity: 0.5;\r\n }\r\n .glass-panel {\r\n background: rgba(30, 41, 59, 0.4);\r\n border-left: 6px solid #38bdf8;\r\n backdrop-filter: blur(4px);\r\n }\r\n .glow-icon {\r\n filter: drop-shadow(0 0 15px rgba(56, 189, 248, 0.6));\r\n }\r\n .terrain-line {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 300px;\r\n background: url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 1440 320\"><path fill=\"%231e293b\" fill-opacity=\"0.8\" d=\"M0,224L48,213.3C96,203,192,181,288,181.3C384,181,480,203,576,224C672,245,768,267,864,261.3C960,256,1056,224,1152,197.3C1248,171,1344,149,1392,138.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z\"><\/path><\/svg>') no-repeat bottom;\r\n background-size: cover;\r\n z-index: 1;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body style=\"\" autocomplete=\"off\">\r\n<div class=\"slide-container\">\r\n<!-- Background Grid -->\r\n<div class=\"bg-grid\"><\/div>\r\n<!-- Giant Chapter Number -->\r\n<!-- This is chapter 06 now because we inserted it after chapter 05 -->\r\n<div class=\"chapter-number-huge\">06<\/div>\r\n<!-- Decorative Background Elements -->\r\n<div class=\"absolute top-0 right-0 w-[800px] h-[800px] bg-blue-900 rounded-full opacity-10 blur-3xl transform translate-x-1\/3 -translate-y-1\/3\"><\/div>\r\n<div class=\"absolute bottom-0 left-0 w-[600px] h-[600px] bg-indigo-900 rounded-full opacity-10 blur-3xl transform -translate-x-1\/3 translate-y-1\/3\"><\/div>\r\n<!-- Terrain Decoration -->\r\n<div class=\"terrain-line\"><\/div>\r\n<!-- Main Content Area -->\r\n<div class=\"flex flex-1 z-20 items-center px-24 relative\">\r\n<div class=\"w-full flex justify-between items-center\">\r\n<!-- Left: Text Content -->\r\n<div class=\"w-3\/5 pt-20\">\r\n<div class=\"flex items-center space-x-3 mb-6\">\r\n<div class=\"h-1 w-12 bg-blue-500\"><\/div>\r\n<p class=\"text-blue-400 font-bold tracking-widest uppercase\">Chapter Six<\/p>\r\n<\/div>\r\n<h1 class=\"text-7xl font-black text-white mb-8 tracking-tight leading-tight\">\r\n \u6211\u4eec\u7684\u56e2\u961f\r\n <\/h1>\r\n<div class=\"glass-panel p-8 rounded-r-lg max-w-2xl\">\r\n<h2 class=\"text-3xl text-gray-200 font-light mb-4\">\u535a\u58eb\u9886\u8854 \u00b7 \u519b\u6c11\u878d\u5408\u3001\u79d1\u7814\u9662\u6240\u3001\u5408\u4f5c\u652f\u6301<\/h2>\r\n<p class=\"text-gray-400 text-lg leading-relaxed\">\r\n \u6c47\u805a\u9876\u5c16\u79d1\u7814\u529b\u91cf\uff0c\u6253\u9020\u667a\u80fd\u611f\u77e5\u6280\u672f\u9ad8\u5730\u3002<br>\r\n \u4ee5\u4e13\u4e1a\u7cbe\u795e\u4e0e\u521b\u65b0\u6d3b\u529b\uff0c\u4e3a\u60a8\u63d0\u4f9b\u575a\u5b9e\u53ef\u9760\u7684\u667a\u6167\u89e3\u51b3\u65b9\u6848\u3002\r\n <\/p>\r\n<\/div>\r\n<!-- Key Points -->\r\n<div class=\"flex space-x-8 mt-12\">\r\n<div class=\"flex flex-col items-center\">\r\n<div class=\"w-12 h-12 rounded-full bg-gray-800 border border-gray-600 flex items-center justify-center mb-3\">\r\n<i class=\"fa-solid fa-user-graduate text-blue-400 text-xl\"><\/i>\r\n<\/div>\r\n<p class=\"text-gray-400 text-sm\">\u535a\u58eb\u9886\u8854<\/p>\r\n<\/div>\r\n<div class=\"flex flex-col items-center\">\r\n<div class=\"w-12 h-12 rounded-full bg-gray-800 border border-gray-600 flex items-center justify-center mb-3\">\r\n<i class=\"fa-solid fa-microchip text-blue-400 text-xl\"><\/i>\r\n<\/div>\r\n<p class=\"text-gray-400 text-sm\">\u81ea\u4e3b\u7814\u53d1<\/p>\r\n<\/div>\r\n<div class=\"flex flex-col items-center\">\r\n<div class=\"w-12 h-12 rounded-full bg-gray-800 border border-gray-600 flex items-center justify-center mb-3\">\r\n<i class=\"fa-solid fa-users-gear text-blue-400 text-xl\"><\/i>\r\n<\/div>\r\n<p class=\"text-gray-400 text-sm\">\u4e13\u4e1a\u4ea4\u4ed8<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Right: Visual Icon\/Graphic -->\r\n<div class=\"w-2\/5 flex justify-center items-center\">\r\n<div class=\"relative w-80 h-80\">\r\n<div class=\"absolute inset-0 bg-blue-500 rounded-full opacity-5 blur-xl animate-pulse\"><\/div>\r\n<div class=\"absolute inset-0 border-2 border-dashed border-blue-500\/30 rounded-full animate-spin-slow\" style=\"animation-duration: 20s;\"><\/div>\r\n<div class=\"absolute inset-4 border border-blue-500\/20 rounded-full\"><\/div>\r\n<!-- Central Icon -->\r\n<div class=\"absolute inset-0 flex items-center justify-center\">\r\n<i class=\"fa-solid fa-people-group text-9xl text-white opacity-90 glow-icon\"><\/i>\r\n<\/div>\r\n<!-- Floating Satellite Icons -->\r\n<div class=\"absolute top-0 left-1\/2 transform -translate-x-1\/2 -translate-y-4 bg-gray-900 border border-blue-500\/50 p-2 rounded-lg shadow-lg\">\r\n<i class=\"fa-solid fa-graduation-cap text-blue-400\"><\/i>\r\n<\/div>\r\n<div class=\"absolute bottom-10 right-0 bg-gray-900 border border-blue-500\/50 p-2 rounded-lg shadow-lg\">\r\n<i class=\"fa-solid fa-code text-blue-400\"><\/i>\r\n<\/div>\r\n<div class=\"absolute bottom-10 left-0 bg-gray-900 border border-blue-500\/50 p-2 rounded-lg shadow-lg\">\r\n<i class=\"fa-solid fa-flask text-blue-400\"><\/i>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n<\/body><\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cd613e9 elementor-widget elementor-widget-html\" data-id=\"cd613e9\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html data-theme=\"light\" lang=\"zh-CN\" style=\"\"><head>\r\n<meta charset=\"utf-8\">\r\n<meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\">\r\n<title>\u6211\u4eec\u7684\u6280\u672f\u56e2\u961f<\/title>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.4.0\/css\/all.min.css\" rel=\"stylesheet\">\r\n<style>\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Noto Sans SC', sans-serif;\r\n background-color: #0f172a;\r\n }\r\n .slide-container {\r\n width: 1280px;\r\n height: 1000px;\r\n position: relative;\r\n background-color: #0f172a;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \/* Background Grid *\/\r\n .bg-grid {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: #0f172a;\r\n background-image: url('data:image\/svg+xml,%3Csvg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"%3E%3Cg fill=\"%2338bdf8\" fill-opacity=\"0.05\" fill-rule=\"evenodd\"%3E%3Cpath d=\"M0 40L40 0H20L0 20M40 40V20L20 40\"\/%3E%3C\/g%3E%3C\/svg%3E');\r\n z-index: 0;\r\n }\r\n .content-card {\r\n background: rgba(30, 41, 59, 0.6);\r\n border: 1px solid rgba(56, 189, 248, 0.2);\r\n backdrop-filter: blur(10px);\r\n }\r\n .stat-card {\r\n background: rgba(15, 23, 42, 0.6);\r\n border: 1px solid rgba(56, 189, 248, 0.1);\r\n transition: all 0.3s ease;\r\n }\r\n .stat-card:hover {\r\n border-color: rgba(56, 189, 248, 0.4);\r\n transform: translateY(-2px);\r\n background: rgba(30, 41, 59, 0.8);\r\n }\r\n .feature-icon {\r\n width: 48px;\r\n height: 48px;\r\n background: rgba(59, 130, 246, 0.1);\r\n border: 1px solid rgba(59, 130, 246, 0.2);\r\n border-radius: 12px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 24px;\r\n color: #60a5fa;\r\n margin-bottom: 12px;\r\n }\r\n .image-overlay {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n padding: 24px;\r\n background: rgba(15, 23, 42, 0.9);\r\n border-top: 1px solid rgba(56, 189, 248, 0.2);\r\n }\r\n \/* Expertise Tags *\/\r\n .expertise-tag {\r\n background: rgba(56, 189, 248, 0.1);\r\n border: 1px solid rgba(56, 189, 248, 0.2);\r\n color: #bae6fd;\r\n padding: 4px 12px;\r\n border-radius: 999px;\r\n font-size: 12px;\r\n font-weight: 500;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body style=\"\" autocomplete=\"off\">\r\n<div class=\"slide-container\">\r\n<!-- Background -->\r\n<div class=\"bg-grid\"><\/div>\r\n<div class=\"absolute top-0 right-0 w-[800px] h-[800px] bg-blue-900 rounded-full opacity-5 blur-3xl\"><\/div>\r\n<div class=\"absolute bottom-0 left-0 w-[600px] h-[600px] bg-indigo-900 rounded-full opacity-5 blur-3xl\"><\/div>\r\n<!-- Header -->\r\n<div class=\"flex items-center justify-between px-12 pt-8 pb-2 z-10\">\r\n<div>\r\n<div class=\"flex items-center space-x-3 mb-2\">\r\n<span class=\"px-2 py-1 bg-blue-900\/50 text-blue-400 text-xs font-bold rounded border border-blue-700\/50\">\u6838\u5fc3\u56e2\u961f<\/span>\r\n<span class=\"text-gray-500 text-sm\">\/ OUR TEAM<\/span>\r\n<\/div>\r\n<h1 class=\"text-3xl font-bold text-white tracking-tight\">\u6211\u4eec\u7684\u6280\u672f\u56e2\u961f<\/h1>\r\n<div class=\"h-1 w-20 bg-blue-500 mt-2\"><\/div>\r\n<\/div>\r\n<div class=\"flex items-center space-x-4\">\r\n<div class=\"text-right\">\r\n<p class=\"text-xs text-gray-400\">R&D ELITE TEAM<\/p>\r\n<p class=\"text-sm font-bold text-blue-300\">\u7cbe\u82f1\u7814\u53d1\u529b\u91cf<\/p>\r\n<\/div>\r\n<i class=\"fa-solid fa-users-gear text-2xl text-blue-500\"><\/i>\r\n<\/div>\r\n<\/div>\r\n<!-- Main Content -->\r\n<div class=\"flex flex-1 px-12 py-6 space-x-8 z-10 overflow-hidden\">\r\n<!-- Left Column: Text Info -->\r\n<div class=\"w-5\/12 flex flex-col justify-between h-full\">\r\n<div class=\"flex-1 pr-4\">\r\n<h2 class=\"text-2xl font-bold text-white mb-6 leading-tight\">\r\n \u535a\u58eb\u9886\u8854 \u00b7 \u667a\u6167\u5f15\u64ce<br>\r\n<span class=\"text-blue-400 text-xl font-normal mt-2 block\">\u6253\u9020\u4eac\u7ef4\u667a\u7f51\u6280\u672f\u6838\u5fc3\u7ade\u4e89\u529b<\/span>\r\n<\/h2>\r\n<p class=\"text-gray-300 mb-8 leading-relaxed text-lg\">\u7531\u8d44\u6df1\u535a\u58eb\u9886\u8854\u7684\u7cbe\u82f1\u7814\u53d1\u9635\u5bb9\uff0c\u51ed\u501f\u6df1\u539a\u7684\u5b66\u672f\u80cc\u666f\u4e0e\u4e30\u5bcc\u7684\u5b9e\u6218\u7ecf\u9a8c\uff0c\u4e13\u6ce8\u4e8e\u5c06 <!--StartFragment--><span style=\"\r\n color: rgb(255, 255, 255);\r\n font-family: 'Noto Sans SC', sans-serif;\r\n font-size: 18px;\r\n font-style: normal;\r\n font-variant-ligatures: normal;\r\n font-variant-caps: normal;\r\n font-weight: 700;\r\n letter-spacing: normal;\r\n orphans: 2;\r\n text-align: start;\r\n text-indent: 0px;\r\n text-transform: none;\r\n widows: 2;\r\n word-spacing: 0px;\r\n -webkit-text-stroke-width: 0px;\r\n white-space: normal;\r\n background-color: rgb(15, 23, 42);\r\n text-decoration-thickness: initial;\r\n text-decoration-style: initial;\r\n text-decoration-color: initial;\r\n display: inline !important;\r\n float: none;\r\n \">\u96f7\u8fbe\u6280\u672f\u5e94\u7528\u4e8e<\/span><!--EndFragment-->\r\n \r\n\r\n<span class=\"text-white font-bold\">\u667a\u80fd\u611f\u77e5<\/span>\u3001<span class=\"text-white font-bold\">\u5728\u7ebf\u76d1\u6d4b<\/span>\u8bbe\u5907\u7684\u7814\u53d1\u3001\u751f\u4ea7\u3002\u4ee5\u4e13\u4e1a\u94f8\u5c31\u57fa\u77f3\uff0c\u4ee5\u6d3b\u529b\u9a71\u52a8\u521b\u65b0\uff0c\u4e3a\u80fd\u6e90\u3001\u7535\u529b\u3001\u4ea4\u901a\u884c\u4e1a\u63d0\u4f9b\u667a\u6167\u89e3\u51b3\u65b9\u6848\u3002\r\n <\/p>\r\n<!-- Key Strengths Grid -->\r\n<div class=\"grid grid-cols-2 gap-4 mb-8\">\r\n<div class=\"stat-card rounded-xl p-4\">\r\n<div class=\"feature-icon\">\r\n<i class=\"fa-solid fa-user-graduate\"><\/i>\r\n<\/div>\r\n<h3 class=\"text-white font-bold mb-1\">\u9876\u5c16\u4eba\u624d<\/h3>\r\n<p class=\"text-gray-400 text-xs\">\u535a\u58eb\u9886\u8854 \/ \u7855\u58eb\u5360\u6bd480%+<\/p>\r\n<\/div>\r\n<div class=\"stat-card rounded-xl p-4\">\r\n<div class=\"feature-icon\">\r\n<i class=\"fa-solid fa-microchip\"><\/i>\r\n<\/div>\r\n<h3 class=\"text-white font-bold mb-1\">\u6838\u5fc3\u81ea\u7814<\/h3>\r\n<p class=\"text-gray-400 text-xs\">\u5168\u6808\u81ea\u4e3b\u77e5\u8bc6\u4ea7\u6743<\/p>\r\n<\/div>\r\n<div class=\"stat-card rounded-xl p-4\">\r\n<div class=\"feature-icon\">\r\n<i class=\"fa-solid fa-rocket\"><\/i>\r\n<\/div>\r\n<h3 class=\"text-white font-bold mb-1\">\u521b\u65b0\u6d3b\u529b<\/h3>\r\n<p class=\"text-gray-400 text-xs\">\u5e74\u5747\u4e13\u5229\u7533\u8bf7 20+ \u9879<\/p>\r\n<\/div>\r\n<div class=\"stat-card rounded-xl p-4\">\r\n<div class=\"feature-icon\">\r\n<i class=\"fa-solid fa-shield-halved\"><\/i>\r\n<\/div>\r\n<h3 class=\"text-white font-bold mb-1\">\u53ef\u9760\u4ea4\u4ed8<\/h3>\r\n<p class=\"text-gray-400 text-xs\">\u5de5\u4e1a\u7ea7\u9ad8\u6807\u51c6\u9a8c\u8bc1<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Tags at bottom -->\r\n<div class=\"mt-auto\">\r\n<p class=\"text-xs text-gray-500 uppercase tracking-wider mb-3 font-bold\">Research Focus<\/p>\r\n<div class=\"flex flex-wrap gap-2\">\r\n<span class=\"expertise-tag\">\u6beb\u7c73\u6ce2\u96f7\u8fbe<\/span>\r\n<span class=\"expertise-tag\">InSAR\u7b97\u6cd5<\/span>\r\n<span class=\"expertise-tag\">\u8fb9\u7f18\u8ba1\u7b97<\/span>\r\n<span class=\"expertise-tag\">\u591a\u6e90\u878d\u5408<\/span>\r\n<span class=\"expertise-tag\">\u5fae\u5f31\u4fe1\u53f7\u68c0\u6d4b<\/span>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Right Column: Visual Image -->\r\n<div class=\"w-7\/12 h-full relative rounded-xl overflow-hidden border border-gray-700 shadow-2xl group\">\r\n<!-- Main Team Image -->\r\n<img decoding=\"async\" alt=\"\u7cbe\u82f1\u7814\u53d1\u56e2\u961f\u5b9e\u9a8c\u5ba4\u5de5\u4f5c\u7167\" class=\"absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105\" src=\"https:\/\/page.gensparksite.com\/slides_images\/54fd749c8d88f98d14802a53a0c2b6a2.webp\" data-height-listener-added=\"true\">\r\n<!-- Overlay Info -->\r\n<div class=\"image-overlay backdrop-blur-md\">\r\n<div class=\"flex justify-between items-end\">\r\n<div>\r\n<h3 class=\"text-xl font-bold text-white mb-1\">\u4eac\u7ef4\u667a\u7f51 \u00b7 \u8054\u5408\u521b\u65b0\u5b9e\u9a8c\u5ba4<\/h3>\r\n<p class=\"text-blue-300 text-sm\"><br><\/p>\r\n<\/div>\r\n<div class=\"flex items-center space-x-4\">\r\n<div class=\"text-right\">\r\n<p class=\"text-3xl font-bold text-white\">100<span class=\"text-lg text-blue-400\">+<\/span><\/p>\r\n<p class=\"text-xs text-gray-400\">\u6210\u529f\u6848\u4f8b<\/p>\r\n<\/div>\r\n<div class=\"w-px h-8 bg-gray-600\"><\/div>\r\n<div class=\"text-right\">\r\n<p class=\"text-3xl font-bold text-white\">15<span class=\"text-lg text-blue-400\">yr+<\/span><\/p>\r\n<p class=\"text-xs text-gray-400\">\u884c\u4e1a\u7ecf\u9a8c<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n<\/body><\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2adbf83 elementor-widget elementor-widget-html\" data-id=\"2adbf83\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n\r\n<html lang=\"zh-CN\">\r\n<head>\r\n<meta charset=\"utf-8\"\/>\r\n<meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\"\/>\r\n<title>\u7ae0\u8282\u5c01\u9762\uff1a\u6838\u5fc3\u4f18\u52bf\u4e0e\u4e1a\u7ee9<\/title>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\"\/>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap\" rel=\"stylesheet\"\/>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.4.0\/css\/all.min.css\" rel=\"stylesheet\"\/>\r\n<style>\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Noto Sans SC', sans-serif;\r\n background-color: #0f172a;\r\n }\r\n .slide-container {\r\n width: 1280px;\r\n height: 1000px;\r\n position: relative;\r\n background-color: #0f172a;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \/* Grid Background Pattern *\/\r\n .bg-grid {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-image: \r\n linear-gradient(rgba(56, 189, 248, 0.05) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(56, 189, 248, 0.05) 1px, transparent 1px);\r\n background-size: 40px 40px;\r\n z-index: 0;\r\n }\r\n .chapter-number-huge {\r\n font-size: 12rem;\r\n font-weight: 900;\r\n line-height: 1;\r\n color: transparent;\r\n -webkit-text-stroke: 4px rgba(255, 255, 255, 0.1);\r\n position: absolute;\r\n left: 60px;\r\n top: 60px;\r\n z-index: 0;\r\n opacity: 0.5;\r\n }\r\n .glass-panel {\r\n background: rgba(30, 41, 59, 0.4);\r\n border-left: 6px solid #38bdf8;\r\n backdrop-filter: blur(4px);\r\n }\r\n .glow-icon {\r\n filter: drop-shadow(0 0 15px rgba(56, 189, 248, 0.6));\r\n }\r\n .terrain-line {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 300px;\r\n background: url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 1440 320\"><path fill=\"%231e293b\" fill-opacity=\"0.8\" d=\"M0,224L48,213.3C96,203,192,181,288,181.3C384,181,480,203,576,224C672,245,768,267,864,261.3C960,256,1056,224,1152,197.3C1248,171,1344,149,1392,138.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z\"><\/path><\/svg>') no-repeat bottom;\r\n background-size: cover;\r\n z-index: 1;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"slide-container\">\r\n<!-- Background Grid -->\r\n<div class=\"bg-grid\"><\/div>\r\n<!-- Giant Chapter Number -->\r\n<div class=\"chapter-number-huge\">07<\/div>\r\n<!-- Decorative Background Elements -->\r\n<div class=\"absolute top-0 right-0 w-[800px] h-[800px] bg-blue-900 rounded-full opacity-10 blur-3xl transform translate-x-1\/3 -translate-y-1\/3\"><\/div>\r\n<div class=\"absolute bottom-0 left-0 w-[600px] h-[600px] bg-indigo-900 rounded-full opacity-10 blur-3xl transform -translate-x-1\/3 translate-y-1\/3\"><\/div>\r\n<!-- Terrain Decoration -->\r\n<div class=\"terrain-line\"><\/div>\r\n<!-- Main Content Area -->\r\n<div class=\"flex flex-1 z-20 items-center px-24 relative\">\r\n<div class=\"w-full flex justify-between items-center\">\r\n<!-- Left: Text Content -->\r\n<div class=\"w-3\/5 pt-20\">\r\n<div class=\"flex items-center space-x-3 mb-6\">\r\n<div class=\"h-1 w-12 bg-blue-500\"><\/div>\r\n<p class=\"text-blue-400 font-bold tracking-widest uppercase\">Chapter Six<\/p>\r\n<\/div>\r\n<h1 class=\"text-7xl font-black text-white mb-8 tracking-tight leading-tight\">\r\n \u6838\u5fc3\u4f18\u52bf\u4e0e\u4e1a\u7ee9\r\n <\/h1>\r\n<div class=\"glass-panel p-8 rounded-r-lg max-w-2xl\">\r\n<h2 class=\"text-3xl text-gray-200 font-light mb-4\">\u6211\u4eec\u7684\u72ec\u7279\u4ef7\u503c<\/h2>\r\n<p class=\"text-gray-400 text-lg leading-relaxed\">\r\n \u5177\u5907\u5168\u573a\u666f\u76d1\u6d4b\u3001\u5206\u949f\u7ea7\u9884\u8b66\u3001\u5de5\u7a0b\u5316\u53ef\u9760\u6027\u53ca\u4f4eTCO\u7684\u72ec\u7279\u4f18\u52bf\u3002<br\/>\r\n \u4e1a\u52a1\u5df2\u8986\u76d6\u9655\u7518\u5b81\u664b\u591a\u5730\uff0c\u5b9e\u73b0\u89c4\u6a21\u5316\u90e8\u7f72\uff0c\u7d2f\u8ba1\u670d\u52a1\u9879\u76ee194\u5957+\u3002\r\n <\/p>\r\n<\/div>\r\n<!-- Key Points -->\r\n<div class=\"flex space-x-8 mt-12\">\r\n<div class=\"flex flex-col items-center\">\r\n<div class=\"w-12 h-12 rounded-full bg-gray-800 border border-gray-600 flex items-center justify-center mb-3\">\r\n<i class=\"fa-solid fa-medal text-blue-400 text-xl\"><\/i>\r\n<\/div>\r\n<p class=\"text-gray-400 text-sm\">\u5353\u8d8a\u4f18\u52bf<\/p>\r\n<\/div>\r\n<div class=\"flex flex-col items-center\">\r\n<div class=\"w-12 h-12 rounded-full bg-gray-800 border border-gray-600 flex items-center justify-center mb-3\">\r\n<i class=\"fa-solid fa-map-location-dot text-blue-400 text-xl\"><\/i>\r\n<\/div>\r\n<p class=\"text-gray-400 text-sm\">\u89c4\u6a21\u90e8\u7f72<\/p>\r\n<\/div>\r\n<div class=\"flex flex-col items-center\">\r\n<div class=\"w-12 h-12 rounded-full bg-gray-800 border border-gray-600 flex items-center justify-center mb-3\">\r\n<i class=\"fa-solid fa-chart-line text-blue-400 text-xl\"><\/i>\r\n<\/div>\r\n<p class=\"text-gray-400 text-sm\">\u6301\u7eed\u589e\u957f<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Right: Visual Icon\/Graphic -->\r\n<div class=\"w-2\/5 flex justify-center items-center\">\r\n<div class=\"relative w-80 h-80\">\r\n<div class=\"absolute inset-0 bg-blue-500 rounded-full opacity-5 blur-xl animate-pulse\"><\/div>\r\n<div class=\"absolute inset-0 border-2 border-dashed border-blue-500\/30 rounded-full animate-spin-slow\" style=\"animation-duration: 20s;\"><\/div>\r\n<div class=\"absolute inset-4 border border-blue-500\/20 rounded-full\"><\/div>\r\n<!-- Central Icon -->\r\n<div class=\"absolute inset-0 flex items-center justify-center\">\r\n<i class=\"fa-solid fa-trophy text-9xl text-white opacity-90 glow-icon\"><\/i>\r\n<\/div>\r\n<!-- Floating Satellite Icons -->\r\n<div class=\"absolute top-0 left-1\/2 transform -translate-x-1\/2 -translate-y-4 bg-gray-900 border border-blue-500\/50 p-2 rounded-lg shadow-lg\">\r\n<i class=\"fa-solid fa-check-to-slot text-blue-400\"><\/i>\r\n<\/div>\r\n<div class=\"absolute bottom-10 right-0 bg-gray-900 border border-blue-500\/50 p-2 rounded-lg shadow-lg\">\r\n<i class=\"fa-solid fa-clipboard-check text-blue-400\"><\/i>\r\n<\/div>\r\n<div class=\"absolute bottom-10 left-0 bg-gray-900 border border-blue-500\/50 p-2 rounded-lg shadow-lg\">\r\n<i class=\"fa-solid fa-thumbs-up text-blue-400\"><\/i>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-250aefc elementor-widget elementor-widget-html\" data-id=\"250aefc\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"zh-CN\" data-theme=\"light\" style=\"\"><head>\r\n<meta charset=\"utf-8\">\r\n<meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\">\r\n<title>\u9879\u76ee\u4e1a\u7ee9\u5730\u56fe\u5c55\u793a<\/title>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.4.0\/css\/all.min.css\" rel=\"stylesheet\">\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/echarts@5\/dist\/echarts.min.js\"><\/script>\r\n<style>\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Noto Sans SC', sans-serif;\r\n background-color: #0f172a;\r\n }\r\n .slide-container {\r\n width: 1280px;\r\n height: 720px;\r\n position: relative;\r\n background-color: #0f172a;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n .bg-grid {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-image: url('data:image\/svg+xml,%3Csvg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"%3E%3Cpath d=\"M0 0h40v40H0V0zm1 1h38v38H1V1z\" fill=\"%2338bdf8\" fill-opacity=\"0.03\" fill-rule=\"evenodd\"\/%3E%3C\/svg%3E');\r\n z-index: 0;\r\n }\r\n .glass-panel {\r\n background: rgba(30, 41, 59, 0.4);\r\n border: 1px solid rgba(56, 189, 248, 0.2);\r\n backdrop-filter: blur(10px);\r\n border-radius: 12px;\r\n }\r\n \/* Custom scrollbar *\/\r\n .custom-scrollbar::-webkit-scrollbar {\r\n width: 6px;\r\n }\r\n .custom-scrollbar::-webkit-scrollbar-track {\r\n background: rgba(30, 41, 59, 0.5);\r\n border-radius: 4px;\r\n }\r\n .custom-scrollbar::-webkit-scrollbar-thumb {\r\n background: rgba(56, 189, 248, 0.3);\r\n border-radius: 4px;\r\n }\r\n .custom-scrollbar::-webkit-scrollbar-thumb:hover {\r\n background: rgba(56, 189, 248, 0.5);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body style=\"\" autocomplete=\"off\">\r\n<div class=\"slide-container\">\r\n<!-- Background Elements -->\r\n<div class=\"bg-grid\"><\/div>\r\n<div class=\"absolute top-0 left-0 w-[500px] h-[500px] bg-blue-900 rounded-full opacity-5 blur-3xl\"><\/div>\r\n<div class=\"absolute bottom-0 right-0 w-[600px] h-[600px] bg-cyan-900 rounded-full opacity-5 blur-3xl\"><\/div>\r\n<!-- Header -->\r\n<div class=\"flex items-center justify-between px-12 pt-8 pb-4 z-10\">\r\n<div>\r\n<div class=\"flex items-center space-x-3 mb-2\">\r\n<span class=\"px-2 py-1 bg-green-900\/40 text-green-400 text-xs font-bold rounded border border-green-700\/40\">ACHIEVEMENTS<\/span>\r\n<span class=\"text-gray-500 text-sm\">\/ 06 CORE ADVANTAGE & TRACK RECORD<\/span>\r\n<\/div>\r\n<h1 class=\"text-3xl font-bold text-white tracking-tight\">\u9879\u76ee\u4e1a\u7ee9\u5730\u56fe\u5c55\u793a<\/h1>\r\n<div class=\"h-1 w-24 bg-green-500 mt-2\"><\/div>\r\n<\/div>\r\n<div class=\"flex items-center space-x-6\">\r\n<div class=\"text-right\">\r\n<p class=\"text-xs text-gray-400 uppercase\">Total Deployments<\/p>\r\n<p class=\"text-2xl font-bold text-white\"><span class=\"text-blue-400\">194+<\/span> <span class=\"text-sm font-normal text-gray-400\">Sets<\/span><\/p>\r\n<\/div>\r\n<div class=\"w-px h-8 bg-gray-700\"><\/div>\r\n<div class=\"text-right\">\r\n<p class=\"text-xs text-gray-400 uppercase\">Success Cases<\/p>\r\n<p class=\"text-2xl font-bold text-white\">12 <span class=\"text-sm font-normal text-gray-400\">Warnings<\/span><\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Main Content -->\r\n<div class=\"flex flex-1 px-12 pb-8 gap-6 z-10 overflow-hidden\">\r\n<!-- Left: Map Visualization -->\r\n<div class=\"w-2\/3 h-full glass-panel p-4 relative flex flex-col\">\r\n<div class=\"absolute top-4 left-4 z-10\">\r\n<h3 class=\"text-white font-bold text-lg\"><i class=\"fa-solid fa-map-location-dot mr-2 text-blue-400\"><\/i>\u91cd\u70b9\u533a\u57df\u90e8\u7f72\u5206\u5e03<\/h3>\r\n<p class=\"text-gray-400 text-xs mt-1\">\u897f\u5317\u80fd\u6e90\u91d1\u4e09\u89d2 \u00b7 \u6c89\u964d\u4e0e\u707e\u5bb3\u8054\u9632<\/p>\r\n<\/div>\r\n<!-- Filter Buttons -->\r\n<div class=\"absolute top-4 right-4 z-10 flex space-x-2\">\r\n<button class=\"px-3 py-1 bg-blue-600\/30 text-blue-300 text-xs rounded border border-blue-500\/30 hover:bg-blue-600\/50 transition-colors\">\u6309\u5e74\u4efd<\/button>\r\n<button class=\"px-3 py-1 bg-gray-700\/30 text-gray-400 text-xs rounded border border-gray-600\/30 hover:bg-gray-600\/50 transition-colors\">\u6309\u7535\u538b\u7b49\u7ea7<\/button>\r\n<\/div>\r\n<!-- ECharts Container -->\r\n<div class=\"w-full h-full flex-1\" id=\"projectMap\" style=\"user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: relative;\" _echarts_instance_=\"ec_1767847789143\"><div style=\"position: relative; width: 740px; height: 525px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;\"><canvas data-zr-dom-id=\"zr_0\" width=\"969\" height=\"687\" style=\"position: absolute; left: 0px; top: 0px; width: 740px; height: 525px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;\"><\/canvas><canvas data-zr-dom-id=\"zr_1\" width=\"969\" height=\"687\" style=\"position: absolute; left: 0px; top: 0px; width: 740px; height: 525px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;\"><\/canvas><canvas data-zr-dom-id=\"zr_2\" width=\"969\" height=\"687\" style=\"position: absolute; left: 0px; top: 0px; width: 740px; height: 525px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;\"><\/canvas><\/div><div class=\"\" style=\"position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 10px; transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(30, 41, 59, 0.9); border-width: 1px; border-radius: 4px; color: rgb(255, 255, 255); font: 14px \/ 21px "Microsoft YaHei"; padding: 10px; top: 0px; left: 0px; transform: translate3d(291px, 252px, 0px); border-color: rgb(59, 130, 246); pointer-events: none; visibility: hidden; opacity: 0;\"><\/div><\/div>\r\n<!-- Map Legend Overlay -->\r\n<div class=\"absolute bottom-4 left-4 bg-gray-900\/80 p-3 rounded border border-gray-700 backdrop-blur-sm\">\r\n<div class=\"flex items-center mb-2\">\r\n<span class=\"w-3 h-3 rounded-full bg-blue-500 shadow-[0_0_10px_#3b82f6] mr-2\"><\/span>\r\n<span class=\"text-gray-300 text-xs\">\u5927\u89c4\u6a21\u90e8\u7f72 (>20\u5957)<\/span>\r\n<\/div>\r\n<div class=\"flex items-center mb-2\">\r\n<span class=\"w-3 h-3 rounded-full bg-cyan-400 shadow-[0_0_10px_#22d3ee] mr-2\"><\/span>\r\n<span class=\"text-gray-300 text-xs\">\u91cd\u70b9\u9879\u76ee\u8bd5\u70b9<\/span>\r\n<\/div>\r\n<div class=\"flex items-center\">\r\n<i class=\"fa-solid fa-bolt text-yellow-400 text-xs mr-2\"><\/i>\r\n<span class=\"text-gray-300 text-xs\">\u9884\u8b66\u6210\u529f\u6848\u4f8b<\/span>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Right: Stats & List -->\r\n<div class=\"w-1\/3 h-full flex flex-col space-y-4\">\r\n<!-- Key Metrics -->\r\n<div class=\"glass-panel p-4 flex justify-between items-center\">\r\n<div class=\"text-center\">\r\n<p class=\"text-xs text-gray-400\">\u91cd\u5927\u707e\u5bb3\u5728\u7ebf\u7387<\/p>\r\n<p class=\"text-xl font-bold text-green-400\">>99.9%<\/p>\r\n<\/div>\r\n<div class=\"w-px h-8 bg-gray-700\"><\/div>\r\n<div class=\"text-center\">\r\n<p class=\"text-xs text-gray-400\">\u5e73\u5747\u54cd\u5e94\u65f6\u95f4<\/p>\r\n<p class=\"text-xl font-bold text-blue-400\"><60s<\/p>\r\n<\/div>\r\n<div class=\"w-px h-8 bg-gray-700\"><\/div>\r\n<div class=\"text-center\">\r\n<p class=\"text-xs text-gray-400\">\u8bef\u62a5\u7387<\/p>\r\n<p class=\"text-xl font-bold text-purple-400\"><0.1%<\/p>\r\n<\/div>\r\n<\/div>\r\n<!-- Data List Card -->\r\n<div class=\"glass-panel p-4 flex-1 flex flex-col overflow-hidden\">\r\n<h3 class=\"text-white font-bold text-sm mb-3 border-b border-gray-700 pb-2\"><i class=\"fa-solid fa-list-ul mr-2 text-green-400\"><\/i>\u533a\u57df\u90e8\u7f72\u660e\u7ec6<\/h3>\r\n<div class=\"flex-1 overflow-y-auto pr-2 custom-scrollbar space-y-2\">\r\n<!-- Item 1 -->\r\n<div class=\"flex justify-between items-center p-3 bg-gray-800\/50 rounded hover:bg-gray-700\/50 transition-colors group cursor-pointer border-l-2 border-transparent hover:border-blue-500\">\r\n<div>\r\n<p class=\"text-gray-200 text-sm font-bold group-hover:text-blue-300\">\u5ef6\u5b89\u4f9b\u7535\u516c\u53f8<\/p>\r\n<p class=\"text-gray-500 text-xs mt-0.5\">\u5c71\u5730\u8f93\u7535\u901a\u9053\u6c89\u964d\u76d1\u6d4b<\/p>\r\n<\/div>\r\n<span class=\"text-blue-300 text-sm font-bold bg-blue-900\/30 px-2 py-1 rounded\">96\u5957<\/span>\r\n<\/div>\r\n<!-- Item 2 -->\r\n<div class=\"flex justify-between items-center p-3 bg-gray-800\/50 rounded hover:bg-gray-700\/50 transition-colors group cursor-pointer border-l-2 border-transparent hover:border-blue-500\">\r\n<div>\r\n<p class=\"text-gray-200 text-sm font-bold group-hover:text-blue-300\">\u54b8\u9633\u4f9b\u7535\u516c\u53f8<\/p>\r\n<p class=\"text-gray-500 text-xs mt-0.5\">\u542b\u5f6c\u4e7e\u7ebf750kV\u7279\u9ad8\u538b<\/p>\r\n<\/div>\r\n<span class=\"text-blue-300 text-sm font-bold bg-blue-900\/30 px-2 py-1 rounded\">52 \u5957<\/span>\r\n<\/div>\r\n<!-- Item 3 -->\r\n<div class=\"flex justify-between items-center p-3 bg-gray-800\/50 rounded hover:bg-gray-700\/50 transition-colors group cursor-pointer border-l-2 border-transparent hover:border-blue-500\">\r\n<div>\r\n<p class=\"text-gray-200 text-sm font-bold group-hover:text-blue-300\">\u6986\u6797\u4f9b\u7535\u516c\u53f8 <span style=\"color: rgb(107, 114, 128); font-size: 0.75rem;\">\u91c7\u7a7a\u533a\u6c89\u9677\u4e0e\u98ce\u7535\u573a<\/span><\/p>\r\n<\/div>\r\n<span class=\"text-blue-300 text-sm font-bold bg-blue-900\/30 px-2 py-1 rounded\">126 \u5957<\/span>\r\n<\/div>\r\n<!-- Item 4 -->\r\n<div class=\"flex justify-between items-center p-3 bg-gray-800\/50 rounded hover:bg-gray-700\/50 transition-colors group cursor-pointer border-l-2 border-transparent hover:border-cyan-400\">\r\n<div>\r\n<p class=\"text-gray-200 text-sm font-bold group-hover:text-cyan-300\">\u5b9d\u9e21\u4f9b\u7535\u516c\u53f8<\/p>\r\n<p class=\"text-gray-500 text-xs mt-0.5\">\u79e6\u5cad\u5317\u9e93\u6ed1\u5761\u76d1\u6d4b<\/p>\r\n<\/div>\r\n<span class=\"text-cyan-300 text-sm font-bold bg-cyan-900\/30 px-2 py-1 rounded\" style=\"color: rgb(107, 151, 234);\">20 \u5957<\/span>\r\n<\/div>\r\n<!-- Item 5 -->\r\n<div class=\"flex justify-between items-center p-3 bg-gray-800\/50 rounded hover:bg-gray-700\/50 transition-colors group cursor-pointer border-l-2 border-transparent hover:border-cyan-400\">\r\n<div>\r\n<p class=\"text-gray-200 text-sm font-bold group-hover:text-cyan-300\">\u5b81\u590f\u94f6\u5ddd\u4f9b\u7535\u516c\u53f8<\/p>\r\n<p class=\"text-gray-500 text-xs mt-0.5\">\u9ec4\u6cb3\u6e7f\u5730\u5854\u57fa\u76d1\u6d4b<\/p>\r\n<\/div>\r\n<span class=\"text-cyan-300 text-sm font-bold bg-cyan-900\/30 px-2 py-1 rounded\" style=\"color: rgb(107, 151, 234);\">6 \u5957<\/span>\r\n<\/div>\r\n<!-- Item 6 -->\r\n<div class=\"flex justify-between items-center p-3 bg-gray-800\/50 rounded hover:bg-gray-700\/50 transition-colors group cursor-pointer border-l-2 border-transparent hover:border-cyan-400\">\r\n<div>\r\n<p class=\"text-gray-200 text-sm font-bold group-hover:text-cyan-300\">\u5546\u6d1b\u4f9b\u7535\u516c\u53f8<\/p>\r\n<p class=\"text-gray-500 text-xs mt-0.5\">\u79e6\u5cad\u5357\u9e93\u6ce5\u77f3\u6d41\u76d1\u6d4b<\/p>\r\n<\/div>\r\n<span class=\"text-cyan-300 text-sm font-bold bg-cyan-900\/30 px-2 py-1 rounded\" style=\"color: rgb(107, 151, 234);\">5 \u5957<\/span>\r\n<\/div>\r\n<!-- Item 7 -->\r\n<div class=\"flex justify-between items-center p-3 bg-gray-800\/50 rounded hover:bg-gray-700\/50 transition-colors group cursor-pointer border-l-2 border-transparent hover:border-cyan-400\">\r\n<div>\r\n<p class=\"text-gray-200 text-sm font-bold group-hover:text-cyan-300\">\u5c71\u897f\u4f9b\u7535\u516c\u53f8<\/p>\r\n<p class=\"text-gray-500 text-xs mt-0.5\">\u8de8\u7701\u901a\u9053\u8054\u52a8\u76d1\u6d4b<\/p>\r\n<\/div>\r\n<span class=\"text-cyan-300 text-sm font-bold bg-cyan-900\/30 px-2 py-1 rounded\" style=\"color: rgb(107, 151, 234);\">5 \u5957<\/span>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<script>\r\n document.addEventListener('DOMContentLoaded', function() {\r\n var chartDom = document.getElementById('projectMap');\r\n var myChart = echarts.init(chartDom);\r\n var option;\r\n\r\n \/\/ Coordinates mapping relative to center (Shaanxi area)\r\n const data = [\r\n {name: '\u6986\u6797', value: 126, x: 55, y: 85, type: 'major'},\r\n {name: '\u5ef6\u5b89', value: 96, x: 55, y: 65, type: 'major'},\r\n {name: '\u54b8\u9633', value: 52, x: 48, y: 45, type: 'major'},\r\n {name: '\u5b9d\u9e21', value: 20, x: 35, y: 43, type: 'normal'},\r\n {name: '\u5546\u6d1b', value: 5, x: 65, y: 30, type: 'normal'},\r\n {name: '\u94f6\u5ddd', value: 6, x: 25, y: 75, type: 'normal'},\r\n {name: '\u5c71\u897f', value: 5, x: 85, y: 55, type: 'normal'}\r\n ];\r\n\r\n const warningCases = [\r\n {name: '\u5ef6\u5b89\u9884\u8b66', x: 55, y: 65},\r\n {name: '\u5546\u6d1b\u9884\u8b66', x: 65, y: 30}\r\n ];\r\n\r\n option = {\r\n grid: { top: 40, bottom: 40, left: 40, right: 40 },\r\n xAxis: { show: false, min: 0, max: 100 },\r\n yAxis: { show: false, min: 0, max: 100 },\r\n tooltip: {\r\n trigger: 'item',\r\n formatter: function(params) {\r\n if (params.seriesType === 'effectScatter' && params.seriesName === 'deployments') {\r\n return `<div style=\"text-align:left;\"><b>${params.data[3]}<\/b><br\/>\u90e8\u7f72\u6570\u91cf: ${params.data[2]} \u5957<br\/>\u8fd0\u884c\u72b6\u6001: \u5728\u7ebf<\/div>`;\r\n }\r\n return '';\r\n },\r\n backgroundColor: 'rgba(30, 41, 59, 0.9)',\r\n borderColor: '#3b82f6',\r\n textStyle: { color: '#fff' }\r\n },\r\n series: [\r\n \/\/ Heatmap-like background effect (simulated with large blurred scatters)\r\n {\r\n type: 'scatter',\r\n coordinateSystem: 'cartesian2d',\r\n data: data.map(item => [item.x, item.y, item.value * 2]),\r\n symbolSize: function (val) { return val[2] * 2; },\r\n itemStyle: {\r\n color: {\r\n type: 'radial',\r\n x: 0.5, y: 0.5, r: 0.5,\r\n colorStops: [\r\n {offset: 0, color: 'rgba(56, 189, 248, 0.2)'}, \r\n {offset: 1, color: 'rgba(56, 189, 248, 0)'}\r\n ]\r\n }\r\n },\r\n silent: true,\r\n z: 1\r\n },\r\n \/\/ Connection lines\r\n {\r\n type: 'lines',\r\n coordinateSystem: 'cartesian2d',\r\n z: 2,\r\n effect: {\r\n show: true,\r\n period: 4,\r\n trailLength: 0.1,\r\n color: '#fff',\r\n symbolSize: 3\r\n },\r\n lineStyle: {\r\n color: 'rgba(56, 189, 248, 0.15)',\r\n width: 1,\r\n curveness: 0.2\r\n },\r\n data: [\r\n {coords: [[55, 85], [55, 65]]}, \/\/ Yulin -> Yanan\r\n {coords: [[55, 65], [48, 45]]}, \/\/ Yanan -> Xianyang\r\n {coords: [[48, 45], [35, 43]]}, \/\/ Xianyang -> Baoji\r\n {coords: [[48, 45], [65, 30]]}, \/\/ Xianyang -> Shangluo\r\n {coords: [[55, 65], [85, 55]]}, \/\/ Yanan -> Shanxi\r\n {coords: [[55, 85], [25, 75]]} \/\/ Yulin -> Yinchuan\r\n ]\r\n },\r\n \/\/ Main deployment points\r\n {\r\n name: 'deployments',\r\n type: 'effectScatter',\r\n coordinateSystem: 'cartesian2d',\r\n z: 3,\r\n data: data.map(item => [item.x, item.y, item.value, item.name]),\r\n symbolSize: function (val) { return Math.max(12, Math.sqrt(val[2]) * 6); },\r\n itemStyle: {\r\n color: function(params) {\r\n return params.data[2] > 20 ? '#3b82f6' : '#22d3ee';\r\n },\r\n shadowBlur: 10,\r\n shadowColor: '#fff'\r\n },\r\n rippleEffect: { brushType: 'stroke', scale: 3 },\r\n label: {\r\n show: true,\r\n formatter: function(params) {\r\n return `{name|${params.data[3]}}\\n{val|${params.data[2]}\u5957}`;\r\n },\r\n position: 'right',\r\n offset: [5, 0],\r\n rich: {\r\n name: { color: '#fff', fontSize: 13, fontWeight: 'bold', padding: [0, 0, 2, 0] },\r\n val: { color: '#94a3b8', fontSize: 11 }\r\n }\r\n }\r\n },\r\n \/\/ Warning success cases (Badges)\r\n {\r\n name: 'warnings',\r\n type: 'scatter',\r\n coordinateSystem: 'cartesian2d',\r\n z: 4,\r\n data: warningCases.map(item => [item.x, item.y]),\r\n symbol: 'path:\/\/M13.8,8.8l-5.3-9.2C8.1-1,7.1-1.1,6.7-0.4l-5.3,9.2c-0.4,0.7-0.4,1.5,0,2.2l5.3,9.2c0.4,0.7,1.4,0.6,1.8-0.1l5.3-9.2C14.2,10.3,14.2,9.5,13.8,8.8z',\r\n symbolSize: 20,\r\n itemStyle: { color: '#fbbf24' },\r\n label: { show: false }\r\n }\r\n ]\r\n };\r\n \r\n \/\/ Add map background outline (Abstract Shape of Shaanxi + surrounding)\r\n option.graphic = [\r\n {\r\n type: 'group',\r\n left: 'center', top: 'center',\r\n children: [\r\n \/\/ Abstract Map Background\r\n {\r\n type: 'polygon',\r\n z: 0,\r\n shape: {\r\n points: [\r\n [400, 100], [500, 150], [520, 300], [600, 400], [550, 550], [450, 600], [350, 500], [300, 300], [350, 150]\r\n ]\r\n },\r\n style: {\r\n fill: 'rgba(30, 41, 59, 0.3)',\r\n stroke: 'rgba(56, 189, 248, 0.1)',\r\n lineWidth: 2\r\n },\r\n \/\/ Scale to fit the chart area roughly\r\n scale: [0.8, 0.8],\r\n origin: [450, 350]\r\n }\r\n ]\r\n }\r\n ];\r\n\r\n myChart.setOption(option);\r\n window.addEventListener('resize', function() { myChart.resize(); });\r\n });\r\n <\/script>\r\n\r\n<\/body><\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f49f779 elementor-widget elementor-widget-html\" data-id=\"f49f779\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n\r\n<html lang=\"zh-CN\">\r\n<head>\r\n<meta charset=\"utf-8\"\/>\r\n<meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\"\/>\r\n<title>\u90e8\u7f72\u8be6\u60c5\u4e0e\u73b0\u573a\u7167\u7247<\/title>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\"\/>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap\" rel=\"stylesheet\"\/>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.4.0\/css\/all.min.css\" rel=\"stylesheet\"\/>\r\n<style>\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Noto Sans SC', sans-serif;\r\n background-color: #0f172a;\r\n color: #f8fafc;\r\n }\r\n .slide-container {\r\n width: 1280px;\r\n height: 1000px;\r\n position: relative;\r\n background-color: #0f172a;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \/* Grid Background Pattern *\/\r\n .bg-grid {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-image: url('data:image\/svg+xml,%3Csvg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"%3E%3Cpath d=\"M0 0h40v40H0V0zm1 1h38v38H1V1z\" fill=\"%2338bdf8\" fill-opacity=\"0.03\" fill-rule=\"evenodd\"\/%3E%3C\/svg%3E');\r\n z-index: 0;\r\n }\r\n\r\n \/* Glass Panel Styling *\/\r\n .glass-panel {\r\n background: rgba(30, 41, 59, 0.6);\r\n border: 1px solid rgba(148, 163, 184, 0.2);\r\n backdrop-filter: blur(10px);\r\n border-radius: 12px;\r\n }\r\n\r\n \/* Photo Gallery Grid *\/\r\n .photo-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n grid-template-rows: repeat(2, 1fr);\r\n gap: 16px;\r\n height: 100%;\r\n }\r\n\r\n .photo-item {\r\n position: relative;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n border: 1px solid rgba(56, 189, 248, 0.2);\r\n background-color: #1e293b;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .photo-item:hover {\r\n transform: scale(1.02);\r\n border-color: #3b82f6;\r\n box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.4);\r\n z-index: 10;\r\n }\r\n\r\n .photo-caption {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n padding: 8px 12px;\r\n background: rgba(15, 23, 42, 0.85);\r\n backdrop-filter: blur(4px);\r\n border-top: 1px solid rgba(56, 189, 248, 0.2);\r\n transform: translateY(100%);\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .photo-item:hover .photo-caption {\r\n transform: translateY(0);\r\n }\r\n\r\n \/* List Styling *\/\r\n .deploy-list::-webkit-scrollbar {\r\n width: 6px;\r\n }\r\n .deploy-list::-webkit-scrollbar-track {\r\n background: rgba(30, 41, 59, 0.5);\r\n }\r\n .deploy-list::-webkit-scrollbar-thumb {\r\n background: #475569;\r\n border-radius: 3px;\r\n }\r\n .deploy-list::-webkit-scrollbar-thumb:hover {\r\n background: #64748b;\r\n }\r\n\r\n .list-item {\r\n border-bottom: 1px solid rgba(148, 163, 184, 0.1);\r\n transition: background-color 0.2s;\r\n }\r\n .list-item:hover {\r\n background-color: rgba(56, 189, 248, 0.05);\r\n }\r\n .list-item:last-child {\r\n border-bottom: none;\r\n }\r\n\r\n \/* Tech Spec Tags *\/\r\n .spec-tag {\r\n background: rgba(15, 23, 42, 0.6);\r\n border: 1px solid rgba(56, 189, 248, 0.2);\r\n padding: 6px 12px;\r\n border-radius: 6px;\r\n font-size: 12px;\r\n color: #94a3b8;\r\n display: flex;\r\n align-items: center;\r\n }\r\n .spec-tag i {\r\n color: #38bdf8;\r\n margin-right: 8px;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"slide-container\">\r\n<!-- Background Elements -->\r\n<div class=\"bg-grid\"><\/div>\r\n<div class=\"absolute top-0 right-0 w-[600px] h-[600px] bg-blue-900 rounded-full opacity-5 blur-3xl\"><\/div>\r\n<div class=\"absolute bottom-0 left-0 w-[500px] h-[500px] bg-indigo-900 rounded-full opacity-5 blur-3xl\"><\/div>\r\n<!-- Header -->\r\n<div class=\"flex items-center justify-between px-12 pt-8 pb-4 z-10\">\r\n<div>\r\n<div class=\"flex items-center space-x-3 mb-2\">\r\n<span class=\"px-2 py-1 bg-green-900\/40 text-green-400 text-xs font-bold rounded border border-green-700\/40\">ACHIEVEMENTS<\/span>\r\n<span class=\"text-gray-500 text-sm\">\/ 05 CORE ADVANTAGE<\/span>\r\n<\/div>\r\n<h1 class=\"text-3xl font-bold text-white tracking-tight\">\u90e8\u7f72\u8be6\u60c5\u4e0e\u73b0\u573a\u7167\u7247<\/h1>\r\n<div class=\"h-1 w-24 bg-green-500 mt-2\"><\/div>\r\n<\/div>\r\n<div class=\"flex items-center space-x-6\">\r\n<div class=\"text-right\">\r\n<p class=\"text-xs text-gray-400 uppercase\">Deployed Units<\/p>\r\n<p class=\"text-2xl font-bold text-white\"><span class=\"text-green-400\">194<\/span> <span class=\"text-sm font-normal text-gray-400\">Sets<\/span><\/p>\r\n<\/div>\r\n<div class=\"w-px h-8 bg-gray-700\"><\/div>\r\n<div class=\"text-right\">\r\n<p class=\"text-xs text-gray-400 uppercase\">Site Photos<\/p>\r\n<p class=\"text-2xl font-bold text-white\">9 <span class=\"text-sm font-normal text-gray-400\">Views<\/span><\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Main Content -->\r\n<div class=\"flex flex-1 px-12 pb-8 gap-6 z-10 overflow-hidden\">\r\n<!-- Left Column: Deployment List -->\r\n<div class=\"w-1\/3 flex flex-col space-y-4\">\r\n<!-- List Card -->\r\n<div class=\"glass-panel p-5 flex-1 flex flex-col overflow-hidden\">\r\n<div class=\"flex items-center justify-between mb-4 pb-2 border-b border-gray-700\">\r\n<h3 class=\"text-white font-bold text-sm\"><i class=\"fa-solid fa-list-ul mr-2 text-blue-400\"><\/i>\u533a\u57df\u90e8\u7f72\u6e05\u5355<\/h3>\r\n<span class=\"text-xs text-gray-500\">\u622a\u6b62 2026.01<\/span>\r\n<\/div>\r\n<div class=\"overflow-y-auto deploy-list pr-2 flex-1\">\r\n<!-- Item 1 -->\r\n<div class=\"list-item p-3 rounded\">\r\n<div class=\"flex justify-between items-center mb-1\">\r\n<span class=\"text-white text-sm font-bold\">\u5ef6\u5b89\u4f9b\u7535\u516c\u53f8<\/span>\r\n<span class=\"text-green-400 text-sm font-bold\">96 \u5957<\/span>\r\n<\/div>\r\n<p class=\"text-gray-500 text-xs\">\u91cd\u70b9\u76d1\u6d4b\u9ec4\u571f\u9ad8\u539f\u6c9f\u58d1\u533a\u6746\u5854\u6c89\u964d<\/p>\r\n<\/div>\r\n<!-- Item 2 -->\r\n<div class=\"list-item p-3 rounded\">\r\n<div class=\"flex justify-between items-center mb-1\">\r\n<span class=\"text-white text-sm font-bold\">\u54b8\u9633\u4f9b\u7535\u516c\u53f8<\/span>\r\n<span class=\"text-green-400 text-sm font-bold\"52 \u5957<\/span>\r\n<\/div>\r\n<p class=\"text-gray-500 text-xs\">\u8986\u76d6\u5173\u4e2d\u5e73\u539f\u4e0e\u53f0\u586c\u8fc7\u6e21\u5e26<\/p>\r\n<\/div>\r\n<!-- Item 3 -->\r\n<div class=\"list-item p-3 rounded\">\r\n<div class=\"flex justify-between items-center mb-1\">\r\n<span class=\"text-white text-sm font-bold\">\u6986\u6797\u4f9b\u7535\u516c\u53f8 (330kV)<\/span>\r\n<span class=\"text-green-400 text-sm font-bold\">126 \u5957<\/span>\r\n<\/div>\r\n<p class=\"text-gray-500 text-xs\">\u9655\u5317\u98ce\u6c99\u6ee9\u533a\u8f93\u7535\u8d70\u5eca\u76d1\u6d4b<\/p>\r\n<\/div>\r\n<!-- Item 4 -->\r\n<div class=\"list-item p-3 rounded\">\r\n<div class=\"flex justify-between items-center mb-1\">\r\n<span class=\"text-white text-sm font-bold\">\u5b9d\u9e21\u4f9b\u7535\u516c\u53f8<\/span>\r\n<span class=\"text-green-400 text-sm font-bold\">20 \u5957<\/span>\r\n<\/div>\r\n<p class=\"text-gray-500 text-xs\">\u79e6\u5cad\u5317\u9e93\u590d\u6742\u5c71\u5730\u73af\u5883\u9002\u914d<\/p>\r\n<\/div>\r\n<!-- Item 5 -->\r\n<div class=\"list-item p-3 rounded\">\r\n<div class=\"flex justify-between items-center mb-1\">\r\n<span class=\"text-white text-sm font-bold\">\u56fd\u534e\u6986\u6797\u80fd\u6e90\u57fa\u5730<\/span>\r\n<span class=\"text-green-400 text-sm font-bold\">16 \u5957<\/span>\r\n<\/div>\r\n<p class=\"text-gray-500 text-xs\">\u80fd\u6e90\u57fa\u5730\u5468\u8fb9\u5730\u8d28\u7a33\u5b9a\u6027\u76d1\u6d4b<\/p>\r\n<\/div>\r\n<!-- Item 6 -->\r\n<div class=\"list-item p-3 rounded\">\r\n<div class=\"flex justify-between items-center mb-1\">\r\n<span class=\"text-white text-sm font-bold\">\u5f6c\u4e7e\u7ebf 750kV<\/span>\r\n<span class=\"text-green-400 text-sm font-bold\">8 \u5957<\/span>\r\n<\/div>\r\n<p class=\"text-gray-500 text-xs\">\u7279\u9ad8\u538b\u8f93\u7535\u901a\u9053\u4e13\u9879\u4fdd\u969c<\/p>\r\n<\/div>\r\n<!-- Item 7 -->\r\n<div class=\"list-item p-3 rounded\">\r\n<div class=\"flex justify-between items-center mb-1\">\r\n<span class=\"text-white text-sm font-bold\">\u5b81\u590f\u94f6\u5ddd\u4f9b\u7535\u516c\u53f8<\/span>\r\n<span class=\"text-green-400 text-sm font-bold\">6 \u5957<\/span>\r\n<\/div>\r\n<p class=\"text-gray-500 text-xs\">\u8de8\u7701\u7535\u7f51\u5173\u952e\u8282\u70b9\u76d1\u6d4b<\/p>\r\n<\/div>\r\n<!-- Item 8 -->\r\n<div class=\"list-item p-3 rounded\">\r\n<div class=\"flex justify-between items-center mb-1\">\r\n<span class=\"text-white text-sm font-bold\">\u5546\u6d1b\u4f9b\u7535\u516c\u53f8<\/span>\r\n<span class=\"text-green-400 text-sm font-bold\">5 \u5957<\/span>\r\n<\/div>\r\n<p class=\"text-gray-500 text-xs\">\u79e6\u5cad\u8179\u5730\u5c71\u6d2a\u6ce5\u77f3\u6d41\u9ad8\u53d1\u533a<\/p>\r\n<\/div>\r\n<!-- Item 9 -->\r\n<div class=\"list-item p-3 rounded\">\r\n<div class=\"flex justify-between items-center mb-1\">\r\n<span class=\"text-white text-sm font-bold\">\u5c71\u897f\u4f9b\u7535\u516c\u53f8<\/span>\r\n<span class=\"text-green-400 text-sm font-bold\">5 \u5957<\/span>\r\n<\/div>\r\n<p class=\"text-gray-500 text-xs\">\u664b\u9655\u4ea4\u754c\u91c7\u7a7a\u533a\u5f71\u54cd\u76d1\u6d4b<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Right Column: Photo Gallery -->\r\n<div class=\"w-2\/3 flex flex-col space-y-4\">\r\n<div class=\"glass-panel p-5 h-full flex flex-col\">\r\n<div class=\"flex items-center justify-between mb-4\">\r\n<h3 class=\"text-white font-bold text-sm\"><i class=\"fa-solid fa-images mr-2 text-blue-400\"><\/i>\u73b0\u573a\u5b9e\u65bd\u5b9e\u5f55<\/h3>\r\n<div class=\"flex space-x-2\">\r\n<span class=\"text-xs px-2 py-1 rounded bg-gray-700 text-gray-300\">\u65bd\u5de5\u5b89\u88c5<\/span>\r\n<span class=\"text-xs px-2 py-1 rounded bg-gray-700 text-gray-300\">\u8bbe\u5907\u8c03\u8bd5<\/span>\r\n<span class=\"text-xs px-2 py-1 rounded bg-gray-700 text-gray-300\">\u8fd0\u7ef4\u5de1\u68c0<\/span>\r\n<\/div>\r\n<\/div>\r\n<div class=\"photo-grid\">\r\n<!-- Photo 1 -->\r\n<div class=\"photo-item group cursor-pointer\">\r\n<img decoding=\"async\" alt=\"\u6746\u5854\u503e\u659c\u76d1\u6d4b\u5b89\u88c5\" class=\"w-full h-full object-cover\" src=\"https:\/\/page.gensparksite.com\/slides_images\/92c53e9f19baca333f6dccf0101be3e7.webp\"\/>\r\n<div class=\"photo-caption\">\r\n<p class=\"text-white text-xs font-bold\">\u6746\u5854\u503e\u659c\u76d1\u6d4b\u5b89\u88c5<\/p>\r\n<p class=\"text-gray-400 text-[10px]\">\u9ad8\u7a7a\u4f5c\u4e1a\u89c4\u8303\u65bd\u5de5<\/p>\r\n<\/div>\r\n<\/div>\r\n<!-- Photo 2 -->\r\n<div class=\"photo-item group cursor-pointer\">\r\n<img decoding=\"async\" alt=\"\u5317\u6597\u9ad8\u7cbe\u5ea6\u63a5\u6536\u673a\" class=\"w-full h-full object-cover\" src=\"https:\/\/page.gensparksite.com\/slides_images\/181cb6d9713de6bf1390e269352828e3.jpg\"\/>\r\n<div class=\"photo-caption\">\r\n<p class=\"text-white text-xs font-bold\">\u5317\u6597\u9ad8\u7cbe\u5ea6\u63a5\u6536\u673a<\/p>\r\n<p class=\"text-gray-400 text-[10px]\">\u6beb\u7c73\u7ea7\u4f4d\u79fb\u76d1\u6d4b\u6838\u5fc3<\/p>\r\n<\/div>\r\n<\/div>\r\n<!-- Photo 3 -->\r\n<div class=\"photo-item group cursor-pointer\">\r\n<img decoding=\"async\" alt=\"\u5730\u707e\u8bbe\u5907\u73b0\u573a\u8c03\u8bd5\" class=\"w-full h-full object-cover\" src=\"https:\/\/page.gensparksite.com\/slides_images\/d0d4605b685da6f5759a3b0211febc81.webp\"\/>\r\n<div class=\"photo-caption\">\r\n<p class=\"text-white text-xs font-bold\">\u5730\u707e\u8bbe\u5907\u73b0\u573a\u8c03\u8bd5<\/p>\r\n<p class=\"text-gray-400 text-[10px]\">\u591a\u4f20\u611f\u5668\u8054\u5408\u6821\u51c6<\/p>\r\n<\/div>\r\n<\/div>\r\n<!-- Photo 4 -->\r\n<div class=\"photo-item group cursor-pointer\">\r\n<img decoding=\"async\" alt=\"\u590d\u6742\u5c71\u5730\u73af\u5883\u90e8\u7f72\" class=\"w-full h-full object-cover\" src=\"https:\/\/page.gensparksite.com\/slides_images\/63460ce6ab4628c5bcda1821bae311ab.webp\"\/>\r\n<div class=\"photo-caption\">\r\n<p class=\"text-white text-xs font-bold\">\u590d\u6742\u5c71\u5730\u73af\u5883\u90e8\u7f72<\/p>\r\n<p class=\"text-gray-400 text-[10px]\">\u9002\u5e94\u9ad8\u6d77\u62d4\u5927\u6e29\u5dee\u73af\u5883<\/p>\r\n<\/div>\r\n<\/div>\r\n<!-- Photo 5 -->\r\n<div class=\"photo-item group cursor-pointer\">\r\n<img decoding=\"async\" alt=\"\u592a\u9633\u80fd\u4f9b\u7535\u7cfb\u7edf\" class=\"w-full h-full object-cover\" src=\"https:\/\/page.gensparksite.com\/slides_images\/32e1a8bd6d71e6e1516157d29b3e6b48.webp\"\/>\r\n<div class=\"photo-caption\">\r\n<p class=\"text-white text-xs font-bold\">\u592a\u9633\u80fd\u4f9b\u7535\u7cfb\u7edf<\/p>\r\n<p class=\"text-gray-400 text-[10px]\">\u4fdd\u969c\u91ce\u5916\u957f\u671f\u7a33\u5b9a\u8fd0\u884c<\/p>\r\n<\/div>\r\n<\/div>\r\n<!-- Photo 6 -->\r\n<div class=\"photo-item group cursor-pointer\">\r\n<img decoding=\"async\" alt=\"\u8f93\u7535\u8d70\u5eca\u5168\u666f\u76d1\u6d4b\" class=\"w-full h-full object-cover\" src=\"https:\/\/page.gensparksite.com\/slides_images\/e50a6580ff485ca906cdae3f7b9b0e39.webp\"\/>\r\n<div class=\"photo-caption\">\r\n<p class=\"text-white text-xs font-bold\">\u8f93\u7535\u8d70\u5eca\u5168\u666f\u76d1\u6d4b<\/p>\r\n<p class=\"text-gray-400 text-[10px]\">\u89c6\u9891+\u611f\u77e5\u6570\u636e\u8054\u52a8<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Tech Specs -->\r\n<div class=\"mt-4 flex space-x-4\">\r\n<div class=\"spec-tag\">\r\n<i class=\"fa-solid fa-temperature-three-quarters\"><\/i>\r\n<span>\u73af\u5883\u9002\u914d\uff1a-40\u2103 ~ +85\u2103<\/span>\r\n<\/div>\r\n<div class=\"spec-tag\">\r\n<i class=\"fa-solid fa-bolt\"><\/i>\r\n<span>\u9632\u96f7\u63a5\u5730\uff1a\u591a\u7ea7\u6d6a\u6d8c\u4fdd\u62a4<\/span>\r\n<\/div>\r\n<div class=\"spec-tag\">\r\n<i class=\"fa-solid fa-solar-panel\"><\/i>\r\n<span>\u4f9b\u7535\u65b9\u6848\uff1a\u592a\u9633\u80fd+\u84c4\u7535\u6c60 (7\u5929\u65e0\u5149\u7167)<\/span>\r\n<\/div>\r\n<div class=\"spec-tag\">\r\n<i class=\"fa-solid fa-tower-broadcast\"><\/i>\r\n<span>\u56de\u4f20\u65b9\u6848\uff1a4G\/5G \u5168\u7f51\u901a + \u5317\u6597\u77ed\u62a5\u6587<\/span>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5dff974 elementor-widget elementor-widget-html\" data-id=\"5dff974\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"zh-CN\" data-theme=\"light\" style=\"\"><head>\r\n<meta charset=\"utf-8\">\r\n<meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\">\r\n<title>\u90e8\u7f72\u5b9e\u65bd\u6d41\u7a0b<\/title>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.4.0\/css\/all.min.css\" rel=\"stylesheet\">\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/echarts@5.4.3\/dist\/echarts.min.js\"><\/script>\r\n<style>\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Noto Sans SC', sans-serif;\r\n background-color: #0f172a;\r\n }\r\n .slide-container {\r\n width: 1280px;\r\n height: 1000px;\r\n position: relative;\r\n background-color: #0f172a;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n .bg-grid {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-image: url('data:image\/svg+xml,%3Csvg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"%3E%3Cpath d=\"M0 0h40v40H0V0zm1 1h38v38H1V1z\" fill=\"%2338bdf8\" fill-opacity=\"0.05\" fill-rule=\"evenodd\"\/%3E%3C\/svg%3E');\r\n z-index: 0;\r\n }\r\n \r\n \/* Flow Chart Styles *\/\r\n .step-card {\r\n background-color: rgba(30, 41, 59, 0.7);\r\n border: 1px solid rgba(56, 189, 248, 0.2);\r\n backdrop-filter: blur(5px);\r\n transition: all 0.3s ease;\r\n position: relative;\r\n }\r\n .step-card:hover {\r\n border-color: rgba(56, 189, 248, 0.6);\r\n transform: translateY(-2px);\r\n background-color: rgba(30, 41, 59, 0.9);\r\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\r\n }\r\n \r\n .arrow-right {\r\n position: absolute;\r\n right: -24px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n color: rgba(56, 189, 248, 0.4);\r\n font-size: 18px;\r\n z-index: 10;\r\n }\r\n\r\n \/* Milestone Markers *\/\r\n .milestone-badge {\r\n position: absolute;\r\n top: -12px;\r\n right: 10px;\r\n background-color: #2563eb;\r\n color: white;\r\n font-size: 10px;\r\n padding: 2px 8px;\r\n border-radius: 12px;\r\n font-weight: 700;\r\n box-shadow: 0 2px 4px rgba(0,0,0,0.3);\r\n border: 1px solid rgba(255,255,255,0.2);\r\n }\r\n\r\n \/* Role Tags *\/\r\n .role-tag {\r\n display: inline-block;\r\n font-size: 9px;\r\n padding: 1px 6px;\r\n border-radius: 4px;\r\n margin-right: 4px;\r\n margin-top: 4px;\r\n }\r\n .role-client { background-color: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); }\r\n .role-design { background-color: rgba(59, 130, 246, 0.2); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }\r\n .role-construction { background-color: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }\r\n .role-ops { background-color: rgba(139, 92, 246, 0.2); color: #a78bfa; border: 1px solid rgba(139, 92, 246, 0.3); }\r\n \r\n \/* Phase Container *\/\r\n .phase-container {\r\n border-left: 2px dashed rgba(148, 163, 184, 0.3);\r\n padding-left: 20px;\r\n position: relative;\r\n }\r\n .phase-dot {\r\n position: absolute;\r\n left: -6px;\r\n top: 0;\r\n width: 10px;\r\n height: 10px;\r\n border-radius: 50%;\r\n background-color: #3b82f6;\r\n border: 2px solid #1e293b;\r\n }\r\n\r\n \/* Gantt Chart Container *\/\r\n #ganttChart {\r\n width: 100%;\r\n height: 100%;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body style=\"\" autocomplete=\"off\">\r\n<div class=\"slide-container\">\r\n<!-- Background -->\r\n<div class=\"bg-grid\"><\/div>\r\n<div class=\"absolute top-0 right-0 w-[600px] h-[600px] bg-blue-900 rounded-full opacity-5 blur-[100px]\"><\/div>\r\n<div class=\"absolute bottom-0 left-0 w-[400px] h-[400px] bg-purple-900 rounded-full opacity-5 blur-[80px]\"><\/div>\r\n<!-- Header -->\r\n<div class=\"flex items-center justify-between px-12 pt-8 pb-4 z-10\">\r\n<div>\r\n<div class=\"flex items-center space-x-3 mb-2\">\r\n<span class=\"px-2 py-1 bg-blue-900\/50 text-blue-400 text-xs font-bold rounded border border-blue-700\/50\">IMPLEMENTATION PROCESS<\/span>\r\n<span class=\"text-gray-500 text-sm\">\/ 06 DEPLOYMENT<\/span>\r\n<\/div>\r\n<h1 class=\"text-3xl font-bold text-white tracking-tight\">\u90e8\u7f72\u5b9e\u65bd\u5168\u6d41\u7a0b\u4e0e\u5173\u952e\u8282\u70b9<\/h1>\r\n<div class=\"h-1 w-24 bg-blue-500 mt-3 rounded-full\"><\/div>\r\n<\/div>\r\n<div class=\"flex items-center space-x-4\">\r\n<div class=\"flex items-center space-x-2\">\r\n<div class=\"w-3 h-3 rounded-full bg-green-500\"><\/div>\r\n<span class=\"text-gray-400 text-xs\">\u7532\u65b9\/\u4e1a\u4e3b<\/span>\r\n<\/div>\r\n<div class=\"flex items-center space-x-2\">\r\n<div class=\"w-3 h-3 rounded-full bg-blue-500\"><\/div>\r\n<span class=\"text-gray-400 text-xs\">\u8bbe\u8ba1\/\u65b9\u6848<\/span>\r\n<\/div>\r\n<div class=\"flex items-center space-x-2\">\r\n<div class=\"w-3 h-3 rounded-full bg-yellow-500\"><\/div>\r\n<span class=\"text-gray-400 text-xs\">\u65bd\u5de5\/\u5b9e\u65bd<\/span>\r\n<\/div>\r\n<div class=\"flex items-center space-x-2\">\r\n<div class=\"w-3 h-3 rounded-full bg-purple-500\"><\/div>\r\n<span class=\"text-gray-400 text-xs\">\u8fd0\u7ef4\/\u4fdd\u969c<\/span>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Main Content -->\r\n<div class=\"flex flex-1 px-12 pb-8 z-10 space-x-6 overflow-hidden\">\r\n<!-- Top Section: Flow Process (Steps) -->\r\n<div class=\"flex flex-col w-full h-full space-y-6\">\r\n<!-- Phase 1: \u524d\u671f\u51c6\u5907 (Rows) -->\r\n<div class=\"flex space-x-6 h-1\/2\">\r\n<!-- Step 1 -->\r\n<div class=\"step-card flex-1 rounded-xl p-4 flex flex-col justify-between group\">\r\n<div class=\"milestone-badge bg-gray-600\">T-2\u5468<\/div>\r\n<i class=\"fa-solid fa-arrow-right arrow-right\"><\/i>\r\n<div>\r\n<div class=\"w-10 h-10 rounded-lg bg-blue-900\/50 flex items-center justify-center mb-3 border border-blue-700\/30 text-blue-400\">\r\n<i class=\"fa-solid fa-map-location-dot text-lg\"><\/i>\r\n<\/div>\r\n<h3 class=\"text-white font-bold text-sm mb-1\">\u73b0\u573a\u8e0f\u52d8 & \u9700\u6c42\u8c03\u7814<\/h3>\r\n<p class=\"text-gray-400 text-xs leading-relaxed\">\u5730\u5f62\u5730\u8c8c\u52d8\u5bdf\u3001\u707e\u5bb3\u70b9\u786e\u8ba4\u3001\u76d1\u6d4b\u76ee\u6807\u9501\u5b9a\u3001\u73b0\u573a\u73af\u5883\u8bc4\u4f30<\/p>\r\n<\/div>\r\n<div class=\"mt-2\">\r\n<span class=\"role-tag role-client\">\u7532\u65b9<\/span>\r\n<span class=\"role-tag role-design\">\u8bbe\u8ba1<\/span>\r\n<\/div>\r\n<\/div>\r\n<!-- Step 2 -->\r\n<div class=\"step-card flex-1 rounded-xl p-4 flex flex-col justify-between group\">\r\n<i class=\"fa-solid fa-arrow-right arrow-right\"><\/i>\r\n<div>\r\n<div class=\"w-10 h-10 rounded-lg bg-blue-900\/50 flex items-center justify-center mb-3 border border-blue-700\/30 text-blue-400\">\r\n<i class=\"fa-solid fa-compass-drafting text-lg\"><\/i>\r\n<\/div>\r\n<h3 class=\"text-white font-bold text-sm mb-1\">\u65b9\u6848\u8bbe\u8ba1 & \u70b9\u4f4d\u52d8\u6d4b<\/h3>\r\n<p class=\"text-gray-400 text-xs leading-relaxed\">\u5e03\u70b9\u56fe\u8bbe\u8ba1\u3001\u4f20\u611f\u5668\u9009\u578b\u3001\u8986\u76d6\u8303\u56f4\u6a21\u62df\u3001\u571f\u5efa\u65b9\u6848\u786e\u8ba4<\/p>\r\n<\/div>\r\n<div class=\"mt-2\">\r\n<span class=\"role-tag role-design\">\u8bbe\u8ba1<\/span>\r\n<span class=\"role-tag role-construction\">\u65bd\u5de5<\/span>\r\n<\/div>\r\n<\/div>\r\n<!-- Step 3 -->\r\n<div class=\"step-card flex-1 rounded-xl p-4 flex flex-col justify-between group border-blue-500\/50 bg-blue-900\/20\">\r\n<div class=\"milestone-badge bg-blue-600 shadow-blue-500\/30\">T0 \u7acb\u9879<\/div>\r\n<i class=\"fa-solid fa-arrow-right arrow-right\"><\/i>\r\n<div>\r\n<div class=\"w-10 h-10 rounded-lg bg-blue-600 flex items-center justify-center mb-3 text-white shadow-lg shadow-blue-500\/30\">\r\n<i class=\"fa-solid fa-file-signature text-lg\"><\/i>\r\n<\/div>\r\n<h3 class=\"text-white font-bold text-sm mb-1\">\u4f9b\u7535\/\u901a\u4fe1\u65b9\u6848\u786e\u8ba4<\/h3>\r\n<p class=\"text-gray-300 text-xs leading-relaxed\">\u592a\u9633\u80fd\/\u5e02\u7535\u63a5\u5165\u65b9\u6848\u30014G\/5G\/\u5317\u6597\u94fe\u8def\u6d4b\u8bd5\u3001\u7acb\u9879\u5ba1\u6279\u5b8c\u6210<\/p>\r\n<\/div>\r\n<div class=\"mt-2\">\r\n<span class=\"role-tag role-client\">\u7532\u65b9<\/span>\r\n<span class=\"role-tag role-design\">\u8bbe\u8ba1<\/span>\r\n<\/div>\r\n<\/div>\r\n<!-- Step 4 -->\r\n<div class=\"step-card flex-1 rounded-xl p-4 flex flex-col justify-between group\">\r\n<div class=\"milestone-badge bg-gray-600\">T+2\u5468<\/div>\r\n<i class=\"fa-solid fa-turn-down arrow-right rotate-90 !right-1\/2 !top-[110%] translate-x-1\/2\"><\/i>\r\n<div>\r\n<div class=\"w-10 h-10 rounded-lg bg-yellow-900\/50 flex items-center justify-center mb-3 border border-yellow-700\/30 text-yellow-400\">\r\n<i class=\"fa-solid fa-person-digging text-lg\"><\/i>\r\n<\/div>\r\n<h3 class=\"text-white font-bold text-sm mb-1\">\u65bd\u5de5\u5b89\u88c5 & \u4f20\u611f\u5668\u6821\u51c6<\/h3>\r\n<p class=\"text-gray-400 text-xs leading-relaxed\">\u57fa\u5ea7\u6d47\u7b51\u3001\u7acb\u6746\u5b89\u88c5\u3001\u8bbe\u5907\u6302\u8f7d\u3001\u4f20\u611f\u5668\u96f6\u70b9\u6821\u51c6\u4e0e\u8054\u8c03<\/p>\r\n<\/div>\r\n<div class=\"mt-2\">\r\n<span class=\"role-tag role-construction\">\u65bd\u5de5<\/span>\r\n<span class=\"role-tag role-design\">\u8bbe\u8ba1<\/span>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Phase 2: \u540e\u671f\u4ea4\u4ed8 (Rows) -->\r\n<div class=\"flex space-x-6 h-1\/2 pl-[25%]\"> <!-- Indent to align flow -->\r\n<!-- Step 5 -->\r\n<div class=\"step-card flex-1 rounded-xl p-4 flex flex-col justify-between group\">\r\n<i class=\"fa-solid fa-arrow-right arrow-right\"><\/i>\r\n<div>\r\n<div class=\"w-10 h-10 rounded-lg bg-purple-900\/50 flex items-center justify-center mb-3 border border-purple-700\/30 text-purple-400\">\r\n<i class=\"fa-solid fa-network-wired text-lg\"><\/i>\r\n<\/div>\r\n<h3 class=\"text-white font-bold text-sm mb-1\">\u7cfb\u7edf\u8054\u8c03 & \u521d\u6b65\u9a8c\u6536<\/h3>\r\n<p class=\"text-gray-400 text-xs leading-relaxed\">\u6570\u636e\u94fe\u8def\u6253\u901a\u3001\u5e73\u53f0\u6570\u636e\u63a5\u5165\u3001\u544a\u8b66\u9608\u503c\u914d\u7f6e\u3001\u521d\u9a8c\u6d4b\u8bd5<\/p>\r\n<\/div>\r\n<div class=\"mt-2\">\r\n<span class=\"role-tag role-construction\">\u65bd\u5de5<\/span>\r\n<span class=\"role-tag role-ops\">\u8fd0\u7ef4<\/span>\r\n<\/div>\r\n<\/div>\r\n<!-- Step 6 -->\r\n<div class=\"step-card flex-1 rounded-xl p-4 flex flex-col justify-between group border-green-500\/50 bg-green-900\/20\">\r\n<div class=\"milestone-badge bg-green-600 shadow-green-500\/30\">T+6\u5468 \u4ea4\u4ed8<\/div>\r\n<i class=\"fa-solid fa-arrow-right arrow-right\"><\/i>\r\n<div>\r\n<div class=\"w-10 h-10 rounded-lg bg-green-600 flex items-center justify-center mb-3 text-white shadow-lg shadow-green-500\/30\">\r\n<i class=\"fa-solid fa-clipboard-check text-lg\"><\/i>\r\n<\/div>\r\n<h3 class=\"text-white font-bold text-sm mb-1\">\u57f9\u8bad\u79fb\u4ea4 & \u6b63\u5f0f\u4e0a\u7ebf<\/h3>\r\n<p class=\"text-gray-300 text-xs leading-relaxed\">\u7528\u6237\u64cd\u4f5c\u57f9\u8bad\u3001\u6587\u6863\u79fb\u4ea4\u3001\u7ec8\u9a8c\u7b7e\u5b57\u3001\u7cfb\u7edf\u6b63\u5f0f\u8f6c\u5165\u8fd0\u884c<\/p>\r\n<\/div>\r\n<div class=\"mt-2\">\r\n<span class=\"role-tag role-client\">\u7532\u65b9<\/span>\r\n<span class=\"role-tag role-ops\">\u8fd0\u7ef4<\/span>\r\n<\/div>\r\n<\/div>\r\n<!-- Step 7 -->\r\n<div class=\"step-card flex-1 rounded-xl p-4 flex flex-col justify-between group\">\r\n<div>\r\n<div class=\"w-10 h-10 rounded-lg bg-gray-700\/50 flex items-center justify-center mb-3 border border-gray-600\/30 text-gray-300\">\r\n<i class=\"fa-solid fa-rotate text-lg\"><\/i>\r\n<\/div>\r\n<h3 class=\"text-white font-bold text-sm mb-1\">\u957f\u671f\u8fd0\u7ef4 & \u5b9a\u671f\u5de1\u68c0<\/h3>\r\n<p class=\"text-gray-400 text-xs leading-relaxed\">7x24h\u5728\u7ebf\u76d1\u6d4b\u3001\u5b9a\u671f\u73b0\u573a\u5de1\u68c0\u3001\u8bbe\u5907OTA\u5347\u7ea7\u3001\u5907\u4ef6\u66f4\u6362<\/p>\r\n<\/div>\r\n<div class=\"mt-2\">\r\n<span class=\"role-tag role-ops\">\u8fd0\u7ef4<\/span>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Timeline Visualization using ECharts -->\r\n<div class=\"absolute bottom-4 left-12 w-[22%] h-[160px] bg-gray-800\/80 rounded-xl border border-gray-700 p-2 backdrop-blur-sm z-20\" style=\"transform: translate(-2.90128px, 11.6051px);\">\r\n<p class=\"text-gray-400 text-[10px] pl-2 font-bold mb-1\">\u9879\u76ee\u5468\u671f\u7518\u7279\u56fe\u793a\u610f<\/p>\r\n<div id=\"ganttChart\" _echarts_instance_=\"ec_1767521162847\" style=\"user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\"><div style=\"position: relative; width: 152px; height: 0px; padding: 0px; margin: 0px; border-width: 0px;\"><canvas data-zr-dom-id=\"zr_0\" width=\"199\" height=\"0\" style=\"position: absolute; left: 0px; top: 0px; width: 152px; height: 0px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;\"><\/canvas><\/div><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<script>\r\n \/\/ ECharts for simple Gantt visualization\r\n document.addEventListener('DOMContentLoaded', function() {\r\n var chartDom = document.getElementById('ganttChart');\r\n var myChart = echarts.init(chartDom);\r\n var option;\r\n\r\n option = {\r\n grid: {\r\n top: 20,\r\n bottom: 20,\r\n left: 45,\r\n right: 10\r\n },\r\n xAxis: {\r\n type: 'value',\r\n show: false,\r\n min: 0,\r\n max: 8\r\n },\r\n yAxis: {\r\n type: 'category',\r\n data: ['\u8fd0\u7ef4', '\u4ea4\u4ed8', '\u5b9e\u65bd', '\u8bbe\u8ba1'],\r\n axisLine: { show: false },\r\n axisTick: { show: false },\r\n axisLabel: {\r\n color: '#94a3b8',\r\n fontSize: 9\r\n }\r\n },\r\n series: [\r\n {\r\n name: 'Placeholder',\r\n type: 'bar',\r\n stack: 'Total',\r\n itemStyle: {\r\n borderColor: 'transparent',\r\n color: 'transparent'\r\n },\r\n emphasis: {\r\n itemStyle: {\r\n borderColor: 'transparent',\r\n color: 'transparent'\r\n }\r\n },\r\n data: [6, 5, 2, 0] \/\/ Start positions\r\n },\r\n {\r\n name: 'Duration',\r\n type: 'bar',\r\n stack: 'Total',\r\n itemStyle: {\r\n borderRadius: 2\r\n },\r\n data: [\r\n {value: 2, itemStyle: {color: '#8b5cf6'}}, \/\/ \u8fd0\u7ef4\r\n {value: 1, itemStyle: {color: '#10b981'}}, \/\/ \u4ea4\u4ed8\r\n {value: 3, itemStyle: {color: '#f59e0b'}}, \/\/ \u5b9e\u65bd\r\n {value: 2, itemStyle: {color: '#3b82f6'}} \/\/ \u8bbe\u8ba1\r\n ]\r\n }\r\n ]\r\n };\r\n\r\n myChart.setOption(option);\r\n window.addEventListener('resize', function() {\r\n myChart.resize();\r\n });\r\n });\r\n <\/script>\r\n\r\n<\/body><\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6fb3c5d elementor-widget elementor-widget-html\" data-id=\"6fb3c5d\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"zh-CN\" data-theme=\"light\" style=\"\"><head>\r\n<meta charset=\"utf-8\">\r\n<meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\">\r\n<title>\u6210\u672c\u6548\u76ca\u5206\u6790<\/title>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.4.0\/css\/all.min.css\" rel=\"stylesheet\">\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/echarts@5\/dist\/echarts.min.js\"><\/script>\r\n<style>\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Noto Sans SC', sans-serif;\r\n background-color: #0f172a;\r\n color: #f8fafc;\r\n }\r\n .slide-container {\r\n width: 1280px;\r\n height: 1000px;\r\n position: relative;\r\n background-color: #0f172a;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \r\n \/* Grid Background Pattern *\/\r\n .bg-grid {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-image: url('data:image\/svg+xml,%3Csvg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"%3E%3Cpath d=\"M0 0h40v40H0V0zm1 1h38v38H1V1z\" fill=\"%2338bdf8\" fill-opacity=\"0.03\" fill-rule=\"evenodd\"\/%3E%3C\/svg%3E');\r\n z-index: 0;\r\n }\r\n\r\n \/* Glass Panel Styling *\/\r\n .glass-panel {\r\n background: rgba(30, 41, 59, 0.6);\r\n border: 1px solid rgba(148, 163, 184, 0.2);\r\n backdrop-filter: blur(10px);\r\n border-radius: 12px;\r\n }\r\n \r\n .glass-panel-dark {\r\n background: rgba(15, 23, 42, 0.8);\r\n border: 1px solid rgba(56, 189, 248, 0.1);\r\n border-radius: 8px;\r\n }\r\n\r\n \/* KPI Card Styling *\/\r\n .kpi-card {\r\n background: rgba(30, 41, 59, 0.4);\r\n border-radius: 12px;\r\n padding: 20px;\r\n border: 1px solid rgba(56, 189, 248, 0.1);\r\n position: relative;\r\n overflow: hidden;\r\n transition: all 0.3s ease;\r\n }\r\n \r\n .kpi-card:hover {\r\n transform: translateY(-5px);\r\n border-color: rgba(56, 189, 248, 0.4);\r\n background: rgba(30, 41, 59, 0.7);\r\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);\r\n }\r\n \r\n .kpi-icon-bg {\r\n position: absolute;\r\n right: -10px;\r\n bottom: -10px;\r\n font-size: 80px;\r\n opacity: 0.05;\r\n transform: rotate(-15deg);\r\n }\r\n \r\n .kpi-value-huge {\r\n font-size: 32px;\r\n font-weight: 900;\r\n line-height: 1;\r\n }\r\n \r\n .kpi-trend {\r\n font-size: 12px;\r\n padding: 2px 8px;\r\n border-radius: 4px;\r\n display: inline-flex;\r\n align-items: center;\r\n }\r\n \r\n .trend-up {\r\n background-color: rgba(16, 185, 129, 0.2);\r\n color: #34d399;\r\n }\r\n \r\n .trend-down {\r\n background-color: rgba(239, 68, 68, 0.2);\r\n color: #f87171;\r\n }\r\n \r\n \/* Gradient borders for different sections *\/\r\n .border-blue-gradient {\r\n border-left: 4px solid #3b82f6;\r\n }\r\n \r\n .border-green-gradient {\r\n border-left: 4px solid #10b981;\r\n }\r\n \r\n .border-purple-gradient {\r\n border-left: 4px solid #8b5cf6;\r\n }\r\n \r\n \/* Table Styling *\/\r\n .comparison-table {\r\n width: 100%;\r\n border-collapse: separate;\r\n border-spacing: 0;\r\n }\r\n \r\n .comparison-table th {\r\n text-align: left;\r\n padding: 12px;\r\n color: #94a3b8;\r\n font-size: 12px;\r\n font-weight: 600;\r\n border-bottom: 1px solid rgba(148, 163, 184, 0.2);\r\n }\r\n \r\n .comparison-table td {\r\n padding: 12px;\r\n color: #e2e8f0;\r\n font-size: 13px;\r\n border-bottom: 1px solid rgba(148, 163, 184, 0.1);\r\n }\r\n \r\n .comparison-table tr:last-child td {\r\n border-bottom: none;\r\n }\r\n \r\n .highlight-cell {\r\n background-color: rgba(59, 130, 246, 0.1);\r\n color: #60a5fa !important;\r\n font-weight: bold;\r\n }\r\n \r\n .check-icon {\r\n color: #34d399;\r\n margin-right: 6px;\r\n }\r\n \r\n .cross-icon {\r\n color: #f87171;\r\n margin-right: 6px;\r\n }\r\n\r\n \/* Chart Container *\/\r\n .chart-container {\r\n width: 100%;\r\n height: 100%;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body style=\"\">\r\n<div class=\"slide-container\">\r\n<!-- Background Elements -->\r\n<div class=\"bg-grid\"><\/div>\r\n<div class=\"absolute top-0 left-0 w-[400px] h-[400px] bg-blue-900 rounded-full opacity-5 blur-3xl\"><\/div>\r\n<div class=\"absolute bottom-0 right-0 w-[500px] h-[500px] bg-indigo-900 rounded-full opacity-5 blur-3xl\"><\/div>\r\n<!-- Header -->\r\n<div class=\"flex items-center justify-between px-12 pt-8 pb-4 z-10\">\r\n<div>\r\n<div class=\"flex items-center space-x-3 mb-2\">\r\n<span class=\"px-2 py-1 bg-green-900\/40 text-green-400 text-xs font-bold rounded border border-green-700\/40\">ROI ANALYSIS<\/span>\r\n<span class=\"text-gray-500 text-sm\">\/ 06 CORE ADVANTAGE<\/span>\r\n<\/div>\r\n<h1 class=\"text-3xl font-bold text-white tracking-tight\">\u6210\u672c\u6548\u76ca\u5206\u6790<\/h1>\r\n<div class=\"h-1 w-24 bg-green-500 mt-2\"><\/div>\r\n<\/div>\r\n<div class=\"flex items-center space-x-4\">\r\n<div class=\"flex flex-col items-end\">\r\n<p class=\"text-gray-400 text-xs uppercase\">Avg. ROI Period<\/p>\r\n<p class=\"text-xl font-bold text-white\">12-24 <span class=\"text-sm font-normal text-gray-400\">Months<\/span><\/p>\r\n<\/div>\r\n<div class=\"w-10 h-10 rounded-full bg-green-500\/20 flex items-center justify-center border border-green-500\/50\">\r\n<i class=\"fa-solid fa-chart-line text-green-400\"><\/i>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Main Content -->\r\n<div class=\"flex flex-1 px-12 pb-8 gap-6 z-10 overflow-hidden\">\r\n<!-- Left Column: KPIs & Charts -->\r\n<div class=\"w-3\/5 flex flex-col gap-6\">\r\n<!-- Row 1: Direct & Indirect Benefits -->\r\n<div class=\"grid grid-cols-2 gap-4\">\r\n<!-- Direct Benefits Card -->\r\n<div class=\"kpi-card border-blue-gradient\">\r\n<div class=\"kpi-icon-bg\">\r\n<i class=\"fa-solid fa-money-bill-trend-up\"><\/i>\r\n<\/div>\r\n<h3 class=\"text-white font-bold text-sm mb-4 flex items-center\">\r\n<i class=\"fa-solid fa-hand-holding-dollar text-blue-400 mr-2\"><\/i>\u76f4\u63a5\u6536\u76ca\r\n <\/h3>\r\n<div class=\"space-y-4\">\r\n<div>\r\n<div class=\"flex justify-between items-end mb-1\">\r\n<p class=\"text-gray-400 text-xs\">\u51cf\u5c11\u4e8b\u6545\u505c\u8fd0\u65f6\u957f<\/p>\r\n<span class=\"kpi-trend trend-up\"><i class=\"fa-solid fa-arrow-down mr-1\"><\/i>30-60%<\/span>\r\n<\/div>\r\n<div class=\"w-full bg-gray-700 rounded-full h-1.5\">\r\n<div class=\"bg-blue-500 h-1.5 rounded-full\" style=\"width: 60%\"><\/div>\r\n<\/div>\r\n<\/div>\r\n<div>\r\n<div class=\"flex justify-between items-end mb-1\">\r\n<p class=\"text-gray-400 text-xs\">\u62a2\u9669\u7ef4\u62a4\u6210\u672c\u4e0b\u964d<\/p>\r\n<span class=\"kpi-trend trend-up\"><i class=\"fa-solid fa-arrow-down mr-1\"><\/i>20-40%<\/span>\r\n<\/div>\r\n<div class=\"w-full bg-gray-700 rounded-full h-1.5\">\r\n<div class=\"bg-blue-400 h-1.5 rounded-full\" style=\"width: 40%\"><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Indirect Benefits Card -->\r\n<div class=\"kpi-card border-purple-gradient\">\r\n<div class=\"kpi-icon-bg\">\r\n<i class=\"fa-solid fa-shield-halved\"><\/i>\r\n<\/div>\r\n<h3 class=\"text-white font-bold text-sm mb-4 flex items-center\">\r\n<i class=\"fa-solid fa-award text-purple-400 mr-2\"><\/i>\u95f4\u63a5\u6536\u76ca\r\n <\/h3>\r\n<div class=\"space-y-3\">\r\n<div class=\"flex items-start\">\r\n<div class=\"w-8 h-8 rounded bg-purple-500\/20 flex items-center justify-center mr-3 flex-shrink-0\">\r\n<i class=\"fa-solid fa-gavel text-purple-400 text-xs\"><\/i>\r\n<\/div>\r\n<div>\r\n<p class=\"text-white text-sm font-bold\">\u76d1\u7ba1\u5408\u89c4<\/p>\r\n<p class=\"text-gray-400 text-xs\">\u6ee1\u8db3\u56fd\u5bb6\u9632\u707e\u51cf\u707e\u786c\u6027\u6307\u6807\u8981\u6c42<\/p>\r\n<\/div>\r\n<\/div>\r\n<div class=\"flex items-start\">\r\n<div class=\"w-8 h-8 rounded bg-purple-500\/20 flex items-center justify-center mr-3 flex-shrink-0\">\r\n<i class=\"fa-solid fa-users text-purple-400 text-xs\"><\/i>\r\n<\/div>\r\n<div>\r\n<p class=\"text-white text-sm font-bold\">\u793e\u4f1a\u4fe1\u8a89<\/p>\r\n<p class=\"text-gray-400 text-xs\">\u63d0\u5347\u54c1\u724c\u5f62\u8c61\u4e0e\u516c\u4f17\u5b89\u5168\u611f<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Row 2: Financial Metrics Chart -->\r\n<div class=\"glass-panel p-5 flex-1 flex flex-col\">\r\n<h3 class=\"text-white font-bold text-sm mb-2 flex items-center\">\r\n<i class=\"fa-solid fa-chart-pie text-green-400 mr-2\"><\/i>\u8d22\u52a1\u6307\u6807\u5206\u6790 (\u4e09\u5e74TCO)\r\n <\/h3>\r\n<div class=\"flex-1 w-full relative\">\r\n<div class=\"chart-container\" id=\"tcoChart\" _echarts_instance_=\"ec_1767521176116\" style=\"user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: relative;\"><div style=\"position: relative; width: 654px; height: 243px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;\"><canvas data-zr-dom-id=\"zr_0\" width=\"856\" height=\"318\" style=\"position: absolute; left: 0px; top: 0px; width: 654px; height: 243px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;\"><\/canvas><\/div><div class=\"\" style=\"position: absolute; display: block; border-style: solid; white-space: nowrap; z-index: 9999999; box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 10px; transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(15, 23, 42, 0.9); border-width: 1px; border-radius: 4px; color: rgb(255, 255, 255); font: 14px \/ 21px "Microsoft YaHei"; padding: 10px; top: 0px; left: 0px; transform: translate3d(81px, 87px, 0px); border-color: rgb(59, 130, 246); pointer-events: none; visibility: hidden; opacity: 0;\"><div style=\"margin: 0px 0 0;line-height:1;\"><div style=\"margin: 0px 0 0;line-height:1;\"><div style=\"font-size:14px;color:#fff;font-weight:400;line-height:1;\">Year 3<\/div><div style=\"margin: 10px 0 0;line-height:1;\"><div style=\"margin: 0px 0 0;line-height:1;\"><div style=\"margin: 0px 0 0;line-height:1;\"><span style=\"display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#64748b;\"><\/span><span style=\"font-size:14px;color:#fff;font-weight:400;margin-left:2px\">\u4f20\u7edf\u4eba\u5de5\u6a21\u5f0f<\/span><span style=\"float:right;margin-left:20px;font-size:14px;color:#fff;font-weight:900\">330<\/span><div style=\"clear:both\"><\/div><\/div><div style=\"clear:both\"><\/div><\/div><div style=\"margin: 10px 0 0;line-height:1;\"><div style=\"margin: 0px 0 0;line-height:1;\"><span style=\"display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#3b82f6;\"><\/span><span style=\"font-size:14px;color:#fff;font-weight:400;margin-left:2px\">\u667a\u80fd\u76d1\u6d4b\u65b9\u6848<\/span><span style=\"float:right;margin-left:20px;font-size:14px;color:#fff;font-weight:900\">220<\/span><div style=\"clear:both\"><\/div><\/div><div style=\"clear:both\"><\/div><\/div><div style=\"clear:both\"><\/div><\/div><div style=\"clear:both\"><\/div><\/div><div style=\"clear:both\"><\/div><\/div><\/div><\/div>\r\n<\/div>\r\n<div class=\"flex justify-between mt-2 pt-2 border-t border-gray-700\">\r\n<div class=\"text-center\">\r\n<p class=\"text-gray-500 text-xs\">ROI \u56de\u6536\u671f<\/p>\r\n<p class=\"text-green-400 font-bold text-lg\">12-24 <span class=\"text-xs text-gray-400\">\u6708<\/span><\/p>\r\n<\/div>\r\n<div class=\"text-center\">\r\n<p class=\"text-gray-500 text-xs\">\u8fd0\u7ef4\u6548\u7387\u63d0\u5347<\/p>\r\n<p class=\"text-blue-400 font-bold text-lg\">300%<\/p>\r\n<\/div>\r\n<div class=\"text-center\">\r\n<p class=\"text-gray-500 text-xs\">\u8d44\u4ea7\u5bff\u547d\u5ef6\u957f<\/p>\r\n<p class=\"text-purple-400 font-bold text-lg\">3-5 <span class=\"text-xs text-gray-400\">\u5e74<\/span><\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Right Column: Comparison Table -->\r\n<div class=\"w-2\/5 flex flex-col h-full\">\r\n<div class=\"glass-panel p-1 flex-1 flex flex-col overflow-hidden\">\r\n<div class=\"bg-gray-800\/50 p-4 border-b border-gray-700\">\r\n<h3 class=\"text-white font-bold text-sm flex items-center\">\r\n<i class=\"fa-solid fa-scale-balanced text-yellow-400 mr-2\"><\/i>\u6a21\u5f0f\u5bf9\u6bd4\u5206\u6790\r\n <\/h3>\r\n<p class=\"text-gray-400 text-xs mt-1\">\u4f20\u7edf\u4eba\u5de5\u5de1\u68c0 vs. \u667a\u80fd\u5728\u7ebf\u76d1\u6d4b<\/p>\r\n<\/div>\r\n<div class=\"p-4 flex-1 overflow-auto\">\r\n<table class=\"comparison-table\">\r\n<thead>\r\n<tr>\r\n<th width=\"20%\">\u7ef4\u5ea6<\/th>\r\n<th width=\"40%\">\u4f20\u7edf\u4eba\u5de5\u5de1\u68c0<\/th>\r\n<th class=\"text-blue-400\" width=\"40%\">\u667a\u80fd\u5728\u7ebf\u76d1\u6d4b<\/th>\r\n<\/tr>\r\n<\/thead>\r\n<tbody>\r\n<tr>\r\n<td><i class=\"fa-solid fa-user-clock mr-2 text-gray-500\"><\/i>\u4eba\u529b\u6295\u5165<\/td>\r\n<td>\r\n<div class=\"flex items-center\">\r\n<span class=\"text-gray-400 text-xs\">\u9ad8\u9891\u6b21\u73b0\u573a\u8dd1\u52a8<\/span>\r\n<\/div>\r\n<p class=\"text-xs text-gray-500 mt-1\">\u4eba\u5747\u7ba1\u62a4\u534a\u5f84\u5c0f<\/p>\r\n<\/td>\r\n<td class=\"highlight-cell\">\r\n<div class=\"flex items-center\">\r\n<i class=\"fa-solid fa-check check-icon\"><\/i>\r\n<span>\u8fdc\u7a0b\u503c\u5b88<\/span>\r\n<\/div>\r\n<p class=\"text-xs text-blue-300\/70 mt-1\">\u6548\u7387\u63d0\u53475\u500d+<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr>\r\n<td><i class=\"fa-solid fa-hourglass-half mr-2 text-gray-500\"><\/i>\u65f6\u6548\u6027<\/td>\r\n<td>\r\n<div class=\"flex items-center\">\r\n<span class=\"text-gray-400 text-xs\">\u5468\u671f\u6027\/\u4e8b\u540e\u54cd\u5e94<\/span>\r\n<\/div>\r\n<p class=\"text-xs text-gray-500 mt-1\">\u5929\u7ea7\/\u5468\u7ea7\u6ede\u540e<\/p>\r\n<\/td>\r\n<td class=\"highlight-cell\">\r\n<div class=\"flex items-center\">\r\n<i class=\"fa-solid fa-check check-icon\"><\/i>\r\n<span>7\u00d724h \u5b9e\u65f6<\/span>\r\n<\/div>\r\n<p class=\"text-xs text-blue-300\/70 mt-1\">\u5206\u949f\u7ea7\u9884\u8b66<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr>\r\n<td><i class=\"fa-solid fa-bullseye mr-2 text-gray-500\"><\/i>\u76d1\u6d4b\u7cbe\u5ea6<\/td>\r\n<td>\r\n<div class=\"flex items-center\">\r\n<span class=\"text-gray-400 text-xs\">\u76ee\u89c6\/\u7b80\u6613\u6d4b\u91cf<\/span>\r\n<\/div>\r\n<p class=\"text-xs text-gray-500 mt-1\">\u5398\u7c73\u7ea7\u8bef\u5dee<\/p>\r\n<\/td>\r\n<td class=\"highlight-cell\">\r\n<div class=\"flex items-center\">\r\n<i class=\"fa-solid fa-check check-icon\"><\/i>\r\n<span>\u6beb\u7c73\u7ea7\u7cbe\u51c6<\/span>\r\n<\/div>\r\n<p class=\"text-xs text-blue-300\/70 mt-1\">0.2mm \u5fae\u5f62\u53d8<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr>\r\n<td><i class=\"fa-solid fa-cloud-rain mr-2 text-gray-500\"><\/i>\u5168\u5929\u5019<\/td>\r\n<td>\r\n<div class=\"flex items-center\">\r\n<span class=\"text-gray-400 text-xs\">\u53d7\u5929\u6c14\/\u5730\u5f62\u9650\u5236<\/span>\r\n<\/div>\r\n<p class=\"text-xs text-gray-500 mt-1\">\u6076\u52a3\u5929\u6c14\u65e0\u6cd5\u4f5c\u4e1a<\/p>\r\n<\/td>\r\n<td class=\"highlight-cell\">\r\n<div class=\"flex items-center\">\r\n<i class=\"fa-solid fa-check check-icon\"><\/i>\r\n<span>\u98ce\u96e8\u65e0\u963b<\/span>\r\n<\/div>\r\n<p class=\"text-xs text-blue-300\/70 mt-1\">\u6781\u7aef\u73af\u5883\u7a33\u5b9a\u8fd0\u884c<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr>\r\n<td><i class=\"fa-solid fa-database mr-2 text-gray-500\"><\/i>\u6570\u636e\u4ef7\u503c<\/td>\r\n<td>\r\n<div class=\"flex items-center\">\r\n<span class=\"text-gray-400 text-xs\">\u79bb\u6563\/\u7eb8\u8d28\u8bb0\u5f55<\/span>\r\n<\/div>\r\n<p class=\"text-xs text-gray-500 mt-1\">\u96be\u4ee5\u8ffd\u6eaf\u5206\u6790<\/p>\r\n<\/td>\r\n<td class=\"highlight-cell\">\r\n<div class=\"flex items-center\">\r\n<i class=\"fa-solid fa-check check-icon\"><\/i>\r\n<span>\u6570\u5b57\u5316\u8d44\u4ea7<\/span>\r\n<\/div>\r\n<p class=\"text-xs text-blue-300\/70 mt-1\">AI \u9884\u6d4b\/\u5168\u751f\u547d\u5468\u671f<\/p>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<script>\r\n document.addEventListener('DOMContentLoaded', function() {\r\n var chartDom = document.getElementById('tcoChart');\r\n var myChart = echarts.init(chartDom);\r\n var option;\r\n\r\n option = {\r\n backgroundColor: 'transparent',\r\n tooltip: {\r\n trigger: 'axis',\r\n axisPointer: { type: 'shadow' },\r\n backgroundColor: 'rgba(15, 23, 42, 0.9)',\r\n borderColor: '#3b82f6',\r\n textStyle: { color: '#fff' }\r\n },\r\n legend: {\r\n data: ['\u4f20\u7edf\u4eba\u5de5\u6a21\u5f0f', '\u667a\u80fd\u76d1\u6d4b\u65b9\u6848'],\r\n textStyle: { color: '#94a3b8' },\r\n bottom: 0\r\n },\r\n grid: {\r\n left: '3%',\r\n right: '4%',\r\n bottom: '10%',\r\n top: '10%',\r\n containLabel: true\r\n },\r\n xAxis: {\r\n type: 'value',\r\n splitLine: {\r\n lineStyle: { color: 'rgba(148, 163, 184, 0.1)' }\r\n },\r\n axisLabel: { color: '#94a3b8' }\r\n },\r\n yAxis: {\r\n type: 'category',\r\n data: ['Year 1', 'Year 2', 'Year 3'],\r\n axisLabel: { color: '#fff' },\r\n axisLine: { show: false },\r\n axisTick: { show: false }\r\n },\r\n series: [\r\n {\r\n name: '\u4f20\u7edf\u4eba\u5de5\u6a21\u5f0f',\r\n type: 'bar',\r\n data: [100, 210, 330], \/\/ Cumulative cost simulation\r\n itemStyle: {\r\n color: '#64748b'\r\n },\r\n label: {\r\n show: true,\r\n position: 'right',\r\n color: '#94a3b8',\r\n formatter: '{c}k'\r\n }\r\n },\r\n {\r\n name: '\u667a\u80fd\u76d1\u6d4b\u65b9\u6848',\r\n type: 'bar',\r\n data: [150, 180, 220], \/\/ Higher initial, lower operational\r\n itemStyle: {\r\n color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [\r\n { offset: 0, color: '#3b82f6' },\r\n { offset: 1, color: '#22d3ee' }\r\n ])\r\n },\r\n label: {\r\n show: true,\r\n position: 'right',\r\n color: '#fff',\r\n fontWeight: 'bold',\r\n formatter: '{c}k'\r\n }\r\n }\r\n ]\r\n };\r\n\r\n myChart.setOption(option);\r\n window.addEventListener('resize', function() {\r\n myChart.resize();\r\n });\r\n });\r\n <\/script>\r\n\r\n<\/body><\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-87f977e elementor-widget elementor-widget-html\" data-id=\"87f977e\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n\r\n<html lang=\"zh-CN\">\r\n<head>\r\n<meta charset=\"utf-8\"\/>\r\n<meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\"\/>\r\n<title>\u7ae0\u8282\u5c01\u9762\uff1a\u5e94\u7528\u573a\u666f<\/title>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\"\/>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap\" rel=\"stylesheet\"\/>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.4.0\/css\/all.min.css\" rel=\"stylesheet\"\/>\r\n<style>\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Noto Sans SC', sans-serif;\r\n background-color: #0f172a;\r\n }\r\n .slide-container {\r\n width: 1280px;\r\n height: 1000px;\r\n position: relative;\r\n background-color: #0f172a;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \/* Grid Background Pattern *\/\r\n .bg-grid {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-image: \r\n linear-gradient(rgba(56, 189, 248, 0.05) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(56, 189, 248, 0.05) 1px, transparent 1px);\r\n background-size: 40px 40px;\r\n z-index: 0;\r\n }\r\n .chapter-number-huge {\r\n font-size: 12rem;\r\n font-weight: 900;\r\n line-height: 1;\r\n color: transparent;\r\n -webkit-text-stroke: 4px rgba(255, 255, 255, 0.1);\r\n position: absolute;\r\n left: 60px;\r\n top: 60px;\r\n z-index: 0;\r\n opacity: 0.5;\r\n }\r\n .glass-panel {\r\n background: rgba(30, 41, 59, 0.4);\r\n border-left: 6px solid #38bdf8;\r\n backdrop-filter: blur(4px);\r\n }\r\n .glow-icon {\r\n filter: drop-shadow(0 0 15px rgba(56, 189, 248, 0.6));\r\n }\r\n .terrain-line {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 300px;\r\n background: url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 1440 320\"><path fill=\"%231e293b\" fill-opacity=\"0.8\" d=\"M0,224L48,213.3C96,203,192,181,288,181.3C384,181,480,203,576,224C672,245,768,267,864,261.3C960,256,1056,224,1152,197.3C1248,171,1344,149,1392,138.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z\"><\/path><\/svg>') no-repeat bottom;\r\n background-size: cover;\r\n z-index: 1;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"slide-container\">\r\n<!-- Background Grid -->\r\n<div class=\"bg-grid\"><\/div>\r\n<!-- Giant Chapter Number -->\r\n<div class=\"chapter-number-huge\">08<\/div>\r\n<!-- Decorative Background Elements -->\r\n<div class=\"absolute top-0 right-0 w-[800px] h-[800px] bg-blue-900 rounded-full opacity-10 blur-3xl transform translate-x-1\/3 -translate-y-1\/3\"><\/div>\r\n<div class=\"absolute bottom-0 left-0 w-[600px] h-[600px] bg-indigo-900 rounded-full opacity-10 blur-3xl transform -translate-x-1\/3 translate-y-1\/3\"><\/div>\r\n<!-- Terrain Decoration -->\r\n<div class=\"terrain-line\"><\/div>\r\n<!-- Main Content Area -->\r\n<div class=\"flex flex-1 z-20 items-center px-24 relative\">\r\n<div class=\"w-full flex justify-between items-center\">\r\n<!-- Left: Text Content -->\r\n<div class=\"w-3\/5 pt-20\">\r\n<div class=\"flex items-center space-x-3 mb-6\">\r\n<div class=\"h-1 w-12 bg-blue-500\"><\/div>\r\n<p class=\"text-blue-400 font-bold tracking-widest uppercase\">Chapter Seven<\/p>\r\n<\/div>\r\n<h1 class=\"text-7xl font-black text-white mb-8 tracking-tight leading-tight\">\r\n \u5e94\u7528\u573a\u666f\r\n <\/h1>\r\n<div class=\"glass-panel p-8 rounded-r-lg max-w-2xl\">\r\n<h2 class=\"text-3xl text-gray-200 font-light mb-4\">\u5168\u57df\u8986\u76d6 \u00b7 \u95ed\u73af\u7ba1\u7406<\/h2>\r\n<p class=\"text-gray-400 text-lg leading-relaxed\">\r\n \u805a\u7126\u7535\u529b\u4e0e\u4ea4\u901a\u3001\u77ff\u5c71\u4e0e\u6c34\u5229\u4e24\u5927\u6838\u5fc3\u677f\u5757\u3002<br\/>\r\n \u5f62\u6210\u70b9\u3001\u7ebf\u3001\u9762\u4e00\u4f53\u5316\u7684\u7acb\u4f53\u76d1\u6d4b\u4e0e\u667a\u80fd\u9884\u8b66\u95ed\u73af\u4f53\u7cfb\u3002\r\n <\/p>\r\n<\/div>\r\n<!-- Key Points -->\r\n<div class=\"flex space-x-12 mt-12\">\r\n<div class=\"flex flex-col items-center\">\r\n<div class=\"w-16 h-16 rounded-full bg-gray-800 border border-gray-600 flex items-center justify-center mb-3\">\r\n<i class=\"fa-solid fa-bolt text-blue-400 text-2xl\"><\/i>\r\n<\/div>\r\n<p class=\"text-gray-300 font-medium\">\u7535\u529b\u4ea4\u901a<\/p>\r\n<\/div>\r\n<div class=\"flex flex-col items-center\">\r\n<div class=\"w-16 h-16 rounded-full bg-gray-800 border border-gray-600 flex items-center justify-center mb-3\">\r\n<i class=\"fa-solid fa-trowel-bricks text-blue-400 text-2xl\"><\/i>\r\n<\/div>\r\n<p class=\"text-gray-300 font-medium\">\u77ff\u5c71\u6c34\u5229<\/p>\r\n<\/div>\r\n<div class=\"flex flex-col items-center\">\r\n<div class=\"w-16 h-16 rounded-full bg-gray-800 border border-gray-600 flex items-center justify-center mb-3\">\r\n<i class=\"fa-solid fa-shield-halved text-blue-400 text-2xl\"><\/i>\r\n<\/div>\r\n<p class=\"text-gray-300 font-medium\">\u5b89\u5168\u95ed\u73af<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Right: Visual Icon\/Graphic -->\r\n<div class=\"w-2\/5 flex justify-center items-center\">\r\n<div class=\"relative w-96 h-96\">\r\n<div class=\"absolute inset-0 bg-blue-500 rounded-full opacity-5 blur-xl animate-pulse\"><\/div>\r\n<div class=\"absolute inset-0 border-2 border-dashed border-blue-500\/30 rounded-full animate-spin-slow\" style=\"animation-duration: 25s;\"><\/div>\r\n<div class=\"absolute inset-4 border border-blue-500\/20 rounded-full\"><\/div>\r\n<!-- Central Icon -->\r\n<div class=\"absolute inset-0 flex items-center justify-center\">\r\n<i class=\"fa-solid fa-city text-9xl text-white opacity-90 glow-icon\"><\/i>\r\n<\/div>\r\n<!-- Floating Satellite Icons -->\r\n<div class=\"absolute top-4 left-1\/2 transform -translate-x-1\/2 -translate-y-4 bg-gray-900 border border-blue-500\/50 p-3 rounded-lg shadow-lg\">\r\n<i class=\"fa-solid fa-tower-cell text-blue-400 text-xl\"><\/i>\r\n<\/div>\r\n<div class=\"absolute bottom-12 right-4 bg-gray-900 border border-blue-500\/50 p-3 rounded-lg shadow-lg\">\r\n<i class=\"fa-solid fa-bridge-water text-blue-400 text-xl\"><\/i>\r\n<\/div>\r\n<div class=\"absolute bottom-12 left-4 bg-gray-900 border border-blue-500\/50 p-3 rounded-lg shadow-lg\">\r\n<i class=\"fa-solid fa-mountain-sun text-blue-400 text-xl\"><\/i>\r\n<\/div>\r\n<!-- Orbiting Dots -->\r\n<div class=\"absolute top-1\/2 left-1\/2 w-full h-full transform -translate-x-1\/2 -translate-y-1\/2 animate-spin-slow\" style=\"animation-duration: 15s;\">\r\n<div class=\"absolute top-0 left-1\/2 w-3 h-3 bg-blue-400 rounded-full shadow-lg transform -translate-x-1\/2\"><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4d2e128 elementor-widget elementor-widget-html\" data-id=\"4d2e128\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n\r\n<html lang=\"zh-CN\">\r\n<head>\r\n<meta charset=\"utf-8\"\/>\r\n<meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\"\/>\r\n<title>\u7535\u529b\u4e0e\u4ea4\u901a\u5e94\u7528\u573a\u666f<\/title>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\"\/>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap\" rel=\"stylesheet\"\/>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.4.0\/css\/all.min.css\" rel=\"stylesheet\"\/>\r\n<style>\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Noto Sans SC', sans-serif;\r\n background-color: #0f172a;\r\n }\r\n .slide-container {\r\n width: 1280px;\r\n height: 1000px;\r\n position: relative;\r\n background-color: #0f172a;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \r\n \/* Grid Background Pattern (SVG) *\/\r\n .bg-grid {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-image: url('data:image\/svg+xml,%3Csvg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"%3E%3Cg fill=\"none\" fill-rule=\"evenodd\"%3E%3Cg fill=\"%2338bdf8\" fill-opacity=\"0.03\"%3E%3Cpath d=\"M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\"\/%3E%3C\/g%3E%3C\/g%3E%3C\/svg%3E');\r\n z-index: 0;\r\n }\r\n\r\n \/* Scenario Card Styling *\/\r\n .scenario-card {\r\n background-color: rgba(30, 41, 59, 0.4);\r\n border: 1px solid rgba(148, 163, 184, 0.2);\r\n backdrop-filter: blur(10px);\r\n border-radius: 12px;\r\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .scenario-card:hover {\r\n border-color: rgba(56, 189, 248, 0.6);\r\n background-color: rgba(30, 41, 59, 0.8);\r\n transform: translateY(-5px);\r\n box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5);\r\n }\r\n\r\n .scenario-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 4px;\r\n height: 100%;\r\n background-color: transparent;\r\n transition: background-color 0.3s;\r\n }\r\n\r\n .scenario-card:hover::before {\r\n background-color: #3b82f6;\r\n }\r\n\r\n \/* Icon Container *\/\r\n .icon-box {\r\n width: 64px;\r\n height: 64px;\r\n border-radius: 12px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 28px;\r\n margin-bottom: 16px;\r\n transition: all 0.3s ease;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n \/* Pseudo-element for icon glow *\/\r\n .icon-box::after {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n border-radius: 12px;\r\n opacity: 0.2;\r\n z-index: 0;\r\n }\r\n \r\n .scenario-card:hover .icon-box {\r\n transform: scale(1.1);\r\n }\r\n\r\n \/* Card Colors *\/\r\n .card-electric .icon-box { background-color: rgba(59, 130, 246, 0.1); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }\r\n .card-electric:hover .icon-box { background-color: rgba(59, 130, 246, 0.2); border-color: #60a5fa; box-shadow: 0 0 15px rgba(59, 130, 246, 0.3); }\r\n\r\n .card-traffic .icon-box { background-color: rgba(245, 158, 11, 0.1); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }\r\n .card-traffic:hover .icon-box { background-color: rgba(245, 158, 11, 0.2); border-color: #fbbf24; box-shadow: 0 0 15px rgba(245, 158, 11, 0.3); }\r\n \r\n .card-value .icon-box { background-color: rgba(16, 185, 129, 0.1); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); }\r\n .card-value:hover .icon-box { background-color: rgba(16, 185, 129, 0.2); border-color: #34d399; box-shadow: 0 0 15px rgba(16, 185, 129, 0.3); }\r\n\r\n .card-api .icon-box { background-color: rgba(139, 92, 246, 0.1); color: #a78bfa; border: 1px solid rgba(139, 92, 246, 0.3); }\r\n .card-api:hover .icon-box { background-color: rgba(139, 92, 246, 0.2); border-color: #a78bfa; box-shadow: 0 0 15px rgba(139, 92, 246, 0.3); }\r\n\r\n .corner-accent {\r\n position: absolute;\r\n width: 10px;\r\n height: 10px;\r\n border-top: 2px solid rgba(56, 189, 248, 0.5);\r\n border-right: 2px solid rgba(56, 189, 248, 0.5);\r\n top: 10px;\r\n right: 10px;\r\n opacity: 0;\r\n transition: opacity 0.3s;\r\n }\r\n .scenario-card:hover .corner-accent {\r\n opacity: 1;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"slide-container\">\r\n<!-- Background Elements -->\r\n<div class=\"bg-grid\"><\/div>\r\n<div class=\"absolute top-0 right-0 w-[600px] h-[600px] bg-blue-900 rounded-full opacity-5 blur-3xl\"><\/div>\r\n<div class=\"absolute bottom-0 left-0 w-[500px] h-[500px] bg-indigo-900 rounded-full opacity-5 blur-3xl\"><\/div>\r\n<!-- Header -->\r\n<div class=\"flex items-center justify-between px-12 pt-8 pb-4 z-10\">\r\n<div>\r\n<div class=\"flex items-center space-x-3 mb-2\">\r\n<span class=\"px-2 py-1 bg-blue-900\/40 text-blue-400 text-xs font-bold rounded border border-blue-700\/40\">SCENARIO DEEP DIVE<\/span>\r\n<span class=\"text-gray-500 text-sm\">\/ 07 POWER & TRANSPORT<\/span>\r\n<\/div>\r\n<h1 class=\"text-3xl font-bold text-white tracking-tight\">\u7535\u529b\u4e0e\u4ea4\u901a\u5e94\u7528\u573a\u666f<\/h1>\r\n<div class=\"h-1 w-24 bg-blue-500 mt-2\"><\/div>\r\n<\/div>\r\n<div class=\"flex items-center space-x-2\">\r\n<i class=\"fa-solid fa-bolt text-blue-500 text-xl\"><\/i>\r\n<i class=\"fa-solid fa-road text-yellow-500 text-xl ml-2\"><\/i>\r\n<span class=\"text-gray-400 text-sm font-medium ml-2\">\u70b9\u7ebf\u9762\u4e00\u4f53\u5316\u76d1\u6d4b<\/span>\r\n<\/div>\r\n<\/div>\r\n<!-- Main Grid Content -->\r\n<div class=\"flex-1 px-12 pb-10 z-10 grid grid-cols-3 grid-rows-2 gap-6\">\r\n<!-- Power Scenario 1: Transmission Lines -->\r\n<div class=\"scenario-card card-electric p-6 flex flex-col justify-start\">\r\n<div class=\"corner-accent\"><\/div>\r\n<div class=\"flex justify-between items-start\">\r\n<div class=\"icon-box\">\r\n<i class=\"fa-solid fa-tower-cell\"><\/i>\r\n<\/div>\r\n<span class=\"text-[10px] text-gray-500 font-mono tracking-wider\">POWER 01<\/span>\r\n<\/div>\r\n<h3 class=\"text-xl text-white font-bold mb-2\">\u8f93\u7535\u7ebf\u8def\u4e0e\u5854\u57fa<\/h3>\r\n<p class=\"text-gray-400 text-sm leading-relaxed mb-4\">\r\n \u9488\u5bf9\u7279\u9ad8\u538b\u53ca\u9aa8\u5e72\u7f51\uff0c\u5b9e\u65f6\u76d1\u6d4b<span class=\"text-blue-400 font-bold\">\u5854\u57fa\u6c89\u964d\u3001\u503e\u659c<\/span>\u53ca\u5468\u8fb9\u6ed1\u5761\u98ce\u9669\uff0c\u9632\u8303\u5012\u5854\u65ad\u7ebf\u4e8b\u6545\u3002\r\n <\/p>\r\n<div class=\"mt-auto pt-4 border-t border-gray-700\/50\">\r\n<div class=\"flex items-center space-x-2 text-xs text-gray-500\">\r\n<i class=\"fa-solid fa-check text-green-500\"><\/i>\r\n<span>\u4e0d\u5747\u5300\u6c89\u964d<\/span>\r\n<i class=\"fa-solid fa-check text-green-500 ml-2\"><\/i>\r\n<span>\u5730\u8d28\u6ed1\u79fb<\/span>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Power Scenario 2: Substations -->\r\n<div class=\"scenario-card card-electric p-6 flex flex-col justify-start\">\r\n<div class=\"corner-accent\"><\/div>\r\n<div class=\"flex justify-between items-start\">\r\n<div class=\"icon-box\">\r\n<i class=\"fa-solid fa-charging-station\"><\/i>\r\n<\/div>\r\n<span class=\"text-[10px] text-gray-500 font-mono tracking-wider\">POWER 02<\/span>\r\n<\/div>\r\n<h3 class=\"text-xl text-white font-bold mb-2\">\u53d8\u7535\u7ad9\u6c89\u964d\u76d1\u6d4b<\/h3>\r\n<p class=\"text-gray-400 text-sm leading-relaxed mb-4\">\r\n \u5bf9\u5173\u952e\u53d8\u7535\u7ad9\u5730\u57fa\u8fdb\u884c\u5fae\u53d8\u5f62\u76d1\u6d4b\uff0c\u7279\u522b\u662f<span class=\"text-blue-400 font-bold\">\u8f6f\u571f\u533a\u57df<\/span>\u548c\u9ad8\u586b\u65b9\u5730\u57fa\uff0c\u4fdd\u969c\u8bbe\u5907\u8fd0\u884c\u5e73\u7a33\u3002\r\n <\/p>\r\n<div class=\"mt-auto pt-4 border-t border-gray-700\/50\">\r\n<div class=\"flex items-center space-x-2 text-xs text-gray-500\">\r\n<i class=\"fa-solid fa-check text-green-500\"><\/i>\r\n<span>\u5730\u57fa\u5f62\u53d8<\/span>\r\n<i class=\"fa-solid fa-check text-green-500 ml-2\"><\/i>\r\n<span>\u8bbe\u5907\u57fa\u7840<\/span>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Power Scenario 3: Supply Channels -->\r\n<div class=\"scenario-card card-electric p-6 flex flex-col justify-start\">\r\n<div class=\"corner-accent\"><\/div>\r\n<div class=\"flex justify-between items-start\">\r\n<div class=\"icon-box\">\r\n<i class=\"fa-solid fa-plug-circle-bolt\"><\/i>\r\n<\/div>\r\n<span class=\"text-[10px] text-gray-500 font-mono tracking-wider\">POWER 03<\/span>\r\n<\/div>\r\n<h3 class=\"text-xl text-white font-bold mb-2\">\u7535\u6e90\u4fdd\u969c\u901a\u9053<\/h3>\r\n<p class=\"text-gray-400 text-sm leading-relaxed mb-4\">\r\n \u9488\u5bf9\u91cd\u8981\u7535\u6e90\u9001\u51fa\u901a\u9053\u7684<span class=\"text-blue-400 font-bold\">\u8fb9\u5761\u7a33\u5b9a\u6027<\/span>\u8fdb\u884c\u5168\u5929\u5019\u76d1\u63a7\uff0c\u786e\u4fdd\u6781\u7aef\u5929\u6c14\u4e0b\u7684\u7535\u529b\u751f\u547d\u7ebf\u7545\u901a\u3002\r\n <\/p>\r\n<div class=\"mt-auto pt-4 border-t border-gray-700\/50\">\r\n<div class=\"flex items-center space-x-2 text-xs text-gray-500\">\r\n<i class=\"fa-solid fa-check text-green-500\"><\/i>\r\n<span>\u8fb9\u5761\u5d29\u584c<\/span>\r\n<i class=\"fa-solid fa-check text-green-500 ml-2\"><\/i>\r\n<span>\u6ce5\u77f3\u6d41\u9884\u8b66<\/span>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Transport Scenario 1: Highway Slopes -->\r\n<div class=\"scenario-card card-traffic p-6 flex flex-col justify-start\">\r\n<div class=\"corner-accent\"><\/div>\r\n<div class=\"flex justify-between items-start\">\r\n<div class=\"icon-box\">\r\n<i class=\"fa-solid fa-road\"><\/i>\r\n<\/div>\r\n<span class=\"text-[10px] text-gray-500 font-mono tracking-wider\">TRAFFIC 01<\/span>\r\n<\/div>\r\n<h3 class=\"text-xl text-white font-bold mb-2\">\u9ad8\u901f\/\u56fd\u7701\u9053\u8fb9\u5761<\/h3>\r\n<p class=\"text-gray-400 text-sm leading-relaxed mb-4\">\r\n \u5bf9\u6cbf\u7ebf\u9ad8\u8fb9\u5761\u3001\u8def\u5811\u8fb9\u5761\u5b9e\u65bd\u52a8\u6001\u76d1\u6d4b\uff0c\u8bc6\u522b<span class=\"text-yellow-400 font-bold\">\u88c2\u7f1d\u6269\u5c55<\/span>\u8d8b\u52bf\uff0c\u63d0\u524d\u9884\u8b66\u6ed1\u584c\u707e\u5bb3\u3002\r\n <\/p>\r\n<div class=\"mt-auto pt-4 border-t border-gray-700\/50\">\r\n<div class=\"flex items-center space-x-2 text-xs text-gray-500\">\r\n<i class=\"fa-solid fa-check text-green-500\"><\/i>\r\n<span>\u4f4d\u79fb\u76d1\u6d4b<\/span>\r\n<i class=\"fa-solid fa-check text-green-500 ml-2\"><\/i>\r\n<span>\u88c2\u7f1d\u8ba1<\/span>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Transport Scenario 2: Bridges & Tunnels -->\r\n<div class=\"scenario-card card-traffic p-6 flex flex-col justify-start\">\r\n<div class=\"corner-accent\"><\/div>\r\n<div class=\"flex justify-between items-start\">\r\n<div class=\"icon-box\">\r\n<i class=\"fa-solid fa-bridge\"><\/i>\r\n<\/div>\r\n<span class=\"text-[10px] text-gray-500 font-mono tracking-wider\">TRAFFIC 02<\/span>\r\n<\/div>\r\n<h3 class=\"text-xl text-white font-bold mb-2\">\u6865\u6881\u4e0e\u96a7\u9053\u76d1\u6d4b<\/h3>\r\n<p class=\"text-gray-400 text-sm leading-relaxed mb-4\">\r\n \u76d1\u6d4b\u6865\u6881\u6c89\u964d\u3001\u58a9\u53f0\u4f4d\u79fb\u53ca\u96a7\u9053\u62f1\u9876\u4e0b\u6c89\u3001\u6536\u655b\uff0c\u63d0\u4f9b<span class=\"text-yellow-400 font-bold\">\u7ed3\u6784\u5065\u5eb7<\/span>\u5168\u751f\u547d\u5468\u671f\u6570\u636e\u652f\u6491\u3002\r\n <\/p>\r\n<div class=\"mt-auto pt-4 border-t border-gray-700\/50\">\r\n<div class=\"flex items-center space-x-2 text-xs text-gray-500\">\r\n<i class=\"fa-solid fa-check text-green-500\"><\/i>\r\n<span>\u62f1\u9876\u4e0b\u6c89<\/span>\r\n<i class=\"fa-solid fa-check text-green-500 ml-2\"><\/i>\r\n<span>\u6865\u58a9\u4f4d\u79fb<\/span>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Value & Integration -->\r\n<div class=\"scenario-card card-api p-6 flex flex-col justify-start\">\r\n<div class=\"corner-accent\"><\/div>\r\n<div class=\"flex justify-between items-start\">\r\n<div class=\"icon-box\">\r\n<i class=\"fa-solid fa-network-wired\"><\/i>\r\n<\/div>\r\n<span class=\"text-[10px] text-gray-500 font-mono tracking-wider\">INTEGRATION<\/span>\r\n<\/div>\r\n<h3 class=\"text-xl text-white font-bold mb-2\">\u4ef7\u503c\u4e0e\u5bf9\u63a5<\/h3>\r\n<p class=\"text-gray-400 text-sm leading-relaxed mb-4\">\r\n \u5b9e\u73b0<span class=\"text-purple-400 font-bold\">\u63d0\u524d\u91cf\u2191 \u8bef\u62a5\u2193<\/span>\uff0c\u652f\u6301\u4e0e\u7535\u529b\u8c03\u5ea6\/\u4ea4\u901a\u517b\u62a4\u5e73\u53f0API\u65e0\u7f1d\u5bf9\u63a5\uff0c\u6570\u636e\u4e92\u901a\u3002\r\n <\/p>\r\n<div class=\"mt-auto pt-4 border-t border-gray-700\/50\">\r\n<div class=\"flex items-center space-x-2 text-xs text-gray-500\">\r\n<i class=\"fa-solid fa-check text-green-500\"><\/i>\r\n<span>\u5feb\u901f\u54cd\u5e94<\/span>\r\n<i class=\"fa-solid fa-check text-green-500 ml-2\"><\/i>\r\n<span>API\u96c6\u6210<\/span>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1b31ea3 elementor-widget elementor-widget-html\" data-id=\"1b31ea3\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n\r\n<html lang=\"zh-CN\">\r\n<head>\r\n<meta charset=\"utf-8\"\/>\r\n<meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\"\/>\r\n<title>\u77ff\u5c71\u4e0e\u6c34\u5229\u5e94\u7528\u573a\u666f<\/title>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\"\/>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap\" rel=\"stylesheet\"\/>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.4.0\/css\/all.min.css\" rel=\"stylesheet\"\/>\r\n<style>\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Noto Sans SC', sans-serif;\r\n background-color: #0f172a;\r\n }\r\n .slide-container {\r\n width: 1280px;\r\n height: 1000px;\r\n position: relative;\r\n background-color: #0f172a;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \r\n \/* Grid Background Pattern *\/\r\n .bg-grid {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-image: url('data:image\/svg+xml,%3Csvg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"%3E%3Cg fill=\"none\" fill-rule=\"evenodd\"%3E%3Cg fill=\"%2338bdf8\" fill-opacity=\"0.03\"%3E%3Cpath d=\"M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\"\/%3E%3C\/g%3E%3C\/g%3E%3C\/svg%3E');\r\n z-index: 0;\r\n }\r\n\r\n \/* Scenario Card Styling *\/\r\n .scenario-card {\r\n background-color: rgba(30, 41, 59, 0.4);\r\n border: 1px solid rgba(148, 163, 184, 0.2);\r\n backdrop-filter: blur(10px);\r\n border-radius: 12px;\r\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .scenario-card:hover {\r\n border-color: rgba(56, 189, 248, 0.6);\r\n background-color: rgba(30, 41, 59, 0.8);\r\n transform: translateY(-5px);\r\n box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5);\r\n }\r\n\r\n .scenario-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 4px;\r\n height: 100%;\r\n background-color: transparent;\r\n transition: background-color 0.3s;\r\n }\r\n\r\n .scenario-card:hover::before {\r\n background-color: #3b82f6;\r\n }\r\n\r\n \/* Icon Container *\/\r\n .icon-box {\r\n width: 64px;\r\n height: 64px;\r\n border-radius: 12px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 28px;\r\n margin-bottom: 16px;\r\n transition: all 0.3s ease;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .icon-box::after {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n border-radius: 12px;\r\n opacity: 0.2;\r\n z-index: 0;\r\n }\r\n \r\n .scenario-card:hover .icon-box {\r\n transform: scale(1.1);\r\n }\r\n\r\n \/* Color Variants based on Semantic Types *\/\r\n \r\n \/* Mining (Danger\/Earth) - Red *\/\r\n .card-red .icon-box { background-color: rgba(239, 68, 68, 0.1); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }\r\n .card-red:hover .icon-box { background-color: rgba(239, 68, 68, 0.2); border-color: #f87171; box-shadow: 0 0 15px rgba(239, 68, 68, 0.3); }\r\n\r\n \/* Slopes (Warning) - Orange *\/\r\n .card-orange .icon-box { background-color: rgba(245, 158, 11, 0.1); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }\r\n .card-orange:hover .icon-box { background-color: rgba(245, 158, 11, 0.2); border-color: #fbbf24; box-shadow: 0 0 15px rgba(245, 158, 11, 0.3); }\r\n\r\n \/* Tailings (Complex) - Purple *\/\r\n .card-purple .icon-box { background-color: rgba(139, 92, 246, 0.1); color: #a78bfa; border: 1px solid rgba(139, 92, 246, 0.3); }\r\n .card-purple:hover .icon-box { background-color: rgba(139, 92, 246, 0.2); border-color: #a78bfa; box-shadow: 0 0 15px rgba(139, 92, 246, 0.3); }\r\n\r\n \/* Water (Hydro) - Blue *\/\r\n .card-blue .icon-box { background-color: rgba(59, 130, 246, 0.1); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }\r\n .card-blue:hover .icon-box { background-color: rgba(59, 130, 246, 0.2); border-color: #60a5fa; box-shadow: 0 0 15px rgba(59, 130, 246, 0.3); }\r\n\r\n \/* River (Flow) - Cyan *\/\r\n .card-cyan .icon-box { background-color: rgba(6, 182, 212, 0.1); color: #22d3ee; border: 1px solid rgba(6, 182, 212, 0.3); }\r\n .card-cyan:hover .icon-box { background-color: rgba(6, 182, 212, 0.2); border-color: #22d3ee; box-shadow: 0 0 15px rgba(6, 182, 212, 0.3); }\r\n\r\n \/* Mudslide (Nature) - Green\/Emerald *\/\r\n .card-green .icon-box { background-color: rgba(16, 185, 129, 0.1); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); }\r\n .card-green:hover .icon-box { background-color: rgba(16, 185, 129, 0.2); border-color: #34d399; box-shadow: 0 0 15px rgba(16, 185, 129, 0.3); }\r\n\r\n .corner-accent {\r\n position: absolute;\r\n width: 10px;\r\n height: 10px;\r\n border-top: 2px solid rgba(56, 189, 248, 0.5);\r\n border-right: 2px solid rgba(56, 189, 248, 0.5);\r\n top: 10px;\r\n right: 10px;\r\n opacity: 0;\r\n transition: opacity 0.3s;\r\n }\r\n .scenario-card:hover .corner-accent {\r\n opacity: 1;\r\n }\r\n\r\n .badge {\r\n font-size: 0.65rem;\r\n padding: 2px 6px;\r\n border-radius: 4px;\r\n border: 1px solid;\r\n display: inline-flex;\r\n align-items: center;\r\n margin-right: 4px;\r\n }\r\n .badge-env {\r\n border-color: rgba(148, 163, 184, 0.3);\r\n background: rgba(148, 163, 184, 0.1);\r\n color: #94a3b8;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"slide-container\">\r\n<!-- Background Elements -->\r\n<div class=\"bg-grid\"><\/div>\r\n<div class=\"absolute top-0 left-0 w-[600px] h-[600px] bg-red-900 rounded-full opacity-5 blur-3xl\"><\/div>\r\n<div class=\"absolute bottom-0 right-0 w-[500px] h-[500px] bg-blue-900 rounded-full opacity-5 blur-3xl\"><\/div>\r\n<!-- Header -->\r\n<div class=\"flex items-center justify-between px-12 pt-8 pb-4 z-10\">\r\n<div>\r\n<div class=\"flex items-center space-x-3 mb-2\">\r\n<span class=\"px-2 py-1 bg-blue-900\/40 text-blue-400 text-xs font-bold rounded border border-blue-700\/40\">APPLICATION SCENARIOS<\/span>\r\n<span class=\"text-gray-500 text-sm\">\/ 07 MINING & WATER CONSERVANCY<\/span>\r\n<\/div>\r\n<h1 class=\"text-3xl font-bold text-white tracking-tight\">\u77ff\u5c71\u4e0e\u6c34\u5229\uff1a\u5b89\u5168\u751f\u547d\u7ebf<\/h1>\r\n<div class=\"h-1 w-24 bg-gradient-to-r from-red-500 to-blue-500 mt-2\"><\/div>\r\n<\/div>\r\n<div class=\"flex flex-col items-end space-y-2\">\r\n<div class=\"flex items-center space-x-2\">\r\n<i class=\"fa-solid fa-shield-halved text-blue-500 text-xl\"><\/i>\r\n<span class=\"text-gray-400 text-sm font-medium\">\u5e7f\u57df\u8054\u52a8 \u00b7 \u98ce\u9669\u95ed\u73af<\/span>\r\n<\/div>\r\n<div class=\"flex space-x-2\">\r\n<span class=\"badge badge-env\"><i class=\"fa-solid fa-snowflake mr-1\"><\/i>\u4f4e\u6e29\u8010\u5019<\/span>\r\n<span class=\"badge badge-env\"><i class=\"fa-solid fa-mountain mr-1\"><\/i>\u9ad8\u6d77\u62d4\u9002\u914d<\/span>\r\n<span class=\"badge badge-env\"><i class=\"fa-solid fa-flask mr-1\"><\/i>\u9632\u8150\u8680<\/span>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Main Grid Content -->\r\n<div class=\"flex-1 px-12 pb-10 z-10 grid grid-cols-3 grid-rows-2 gap-6\">\r\n<!-- Scenario 1: Coal Mine Goaf (Red) -->\r\n<div class=\"scenario-card card-red p-6 flex flex-col justify-start\">\r\n<div class=\"corner-accent\"><\/div>\r\n<div class=\"flex justify-between items-start\">\r\n<div class=\"icon-box\">\r\n<i class=\"fa-solid fa-arrows-to-circle\"><\/i>\r\n<\/div>\r\n<span class=\"text-[10px] text-gray-500 font-mono tracking-wider\">MINING 01<\/span>\r\n<\/div>\r\n<h3 class=\"text-xl text-white font-bold mb-2\">\u91c7\u7a7a\u533a\u6c89\u9677<\/h3>\r\n<p class=\"text-gray-400 text-sm leading-relaxed mb-4\">\r\n \u5e7f\u57dfInSAR\u5b9a\u671f\u7b5b\u67e5\u4e0eGNSS\u5b9a\u70b9\u76d1\u6d4b\u7ed3\u5408\uff0c\u7cbe\u51c6\u638c\u63a7<span class=\"text-red-400 font-bold\">\u6c89\u9677\u6f0f\u6597<\/span>\u6f14\u5316\uff0c\u9632\u8303\u623f\u5c4b\u635f\u6bc1\u3002\r\n <\/p>\r\n<div class=\"mt-auto pt-4 border-t border-gray-700\/50\">\r\n<div class=\"flex items-center space-x-2 text-xs text-gray-500\">\r\n<i class=\"fa-solid fa-check text-red-500\"><\/i>\r\n<span>\u5730\u8868\u88c2\u7f1d<\/span>\r\n<i class=\"fa-solid fa-check text-red-500 ml-2\"><\/i>\r\n<span>\u584c\u9677\u9884\u8b66<\/span>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Scenario 2: Open-pit Slope (Orange) -->\r\n<div class=\"scenario-card card-orange p-6 flex flex-col justify-start\">\r\n<div class=\"corner-accent\"><\/div>\r\n<div class=\"flex justify-between items-start\">\r\n<div class=\"icon-box\">\r\n<i class=\"fa-solid fa-mountain\"><\/i>\r\n<\/div>\r\n<span class=\"text-[10px] text-gray-500 font-mono tracking-wider\">MINING 02<\/span>\r\n<\/div>\r\n<h3 class=\"text-xl text-white font-bold mb-2\">\u9732\u5929\u77ff\u9ad8\u8fb9\u5761<\/h3>\r\n<p class=\"text-gray-400 text-sm leading-relaxed mb-4\">\r\n \u5168\u7ad9\u4eea\u4e0e\u8fb9\u5761\u96f7\u8fbe\u5b9e\u65f6\u626b\u63cf\uff0c\u591a\u53c2\u6570\u878d\u5408\u5206\u6790<span class=\"text-yellow-400 font-bold\">\u6ed1\u5761\u98ce\u9669<\/span>\uff0c\u4fdd\u969c\u751f\u4ea7\u4f5c\u4e1a\u5b89\u5168\u3002\r\n <\/p>\r\n<div class=\"mt-auto pt-4 border-t border-gray-700\/50\">\r\n<div class=\"flex items-center space-x-2 text-xs text-gray-500\">\r\n<i class=\"fa-solid fa-check text-yellow-500\"><\/i>\r\n<span>\u8fb9\u5761\u4f4d\u79fb<\/span>\r\n<i class=\"fa-solid fa-check text-yellow-500 ml-2\"><\/i>\r\n<span>\u7206\u7834\u632f\u52a8<\/span>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Scenario 3: Tailings (Purple) -->\r\n<div class=\"scenario-card card-purple p-6 flex flex-col justify-start\">\r\n<div class=\"corner-accent\"><\/div>\r\n<div class=\"flex justify-between items-start\">\r\n<div class=\"icon-box\">\r\n<i class=\"fa-solid fa-layer-group\"><\/i>\r\n<\/div>\r\n<span class=\"text-[10px] text-gray-500 font-mono tracking-wider\">MINING 03<\/span>\r\n<\/div>\r\n<h3 class=\"text-xl text-white font-bold mb-2\">\u5c3e\u77ff\u5e93\u76d1\u6d4b<\/h3>\r\n<p class=\"text-gray-400 text-sm leading-relaxed mb-4\">\r\n \u6d78\u6da6\u7ebf\u3001\u5e72\u6ee9\u957f\u5ea6\u3001\u5e93\u6c34\u4f4d\u4e00\u4f53\u5316\u76d1\u6d4b\uff0c\u675c\u7edd<span class=\"text-purple-400 font-bold\">\u6e83\u575d\u98ce\u9669<\/span>\uff0c\u5b9e\u73b0\u5934\u9876\u5e93\u5b89\u5168\u7ba1\u7406\u3002\r\n <\/p>\r\n<div class=\"mt-auto pt-4 border-t border-gray-700\/50\">\r\n<div class=\"flex items-center space-x-2 text-xs text-gray-500\">\r\n<i class=\"fa-solid fa-check text-purple-500\"><\/i>\r\n<span>\u575d\u4f53\u53d8\u5f62<\/span>\r\n<i class=\"fa-solid fa-check text-purple-500 ml-2\"><\/i>\r\n<span>\u6e17\u6d41\u538b\u529b<\/span>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Scenario 4: Water Dam (Blue) -->\r\n<div class=\"scenario-card card-blue p-6 flex flex-col justify-start\">\r\n<div class=\"corner-accent\"><\/div>\r\n<div class=\"flex justify-between items-start\">\r\n<div class=\"icon-box\">\r\n<i class=\"fa-solid fa-building-shield\"><\/i>\r\n<\/div>\r\n<span class=\"text-[10px] text-gray-500 font-mono tracking-wider\">WATER 01<\/span>\r\n<\/div>\r\n<h3 class=\"text-xl text-white font-bold mb-2\">\u6c34\u5e93\u5927\u575d\u5b89\u5168<\/h3>\r\n<p class=\"text-gray-400 text-sm leading-relaxed mb-4\">\r\n \u9488\u5bf9\u5927\u575d\u4e3b\u4f53\u8fdb\u884c<span class=\"text-blue-400 font-bold\">\u5168\u751f\u547d\u5468\u671f<\/span>\u5065\u5eb7\u4f53\u68c0\uff0c\u76d1\u6d4b\u8868\u9762\u53d8\u5f62\u4e0e\u5185\u90e8\u7ed3\u6784\u5e94\u529b\u3002\r\n <\/p>\r\n<div class=\"mt-auto pt-4 border-t border-gray-700\/50\">\r\n<div class=\"flex items-center space-x-2 text-xs text-gray-500\">\r\n<i class=\"fa-solid fa-check text-blue-500\"><\/i>\r\n<span>\u4e0d\u5747\u5300\u6c89\u964d<\/span>\r\n<i class=\"fa-solid fa-check text-blue-500 ml-2\"><\/i>\r\n<span>\u6e17\u6d41\u91cf<\/span>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Scenario 5: River (Cyan) -->\r\n<div class=\"scenario-card card-cyan p-6 flex flex-col justify-start\">\r\n<div class=\"corner-accent\"><\/div>\r\n<div class=\"flex justify-between items-start\">\r\n<div class=\"icon-box\">\r\n<i class=\"fa-solid fa-cloud-showers-heavy\"><\/i>\r\n<\/div>\r\n<span class=\"text-[10px] text-gray-500 font-mono tracking-wider\">WATER 02<\/span>\r\n<\/div>\r\n<h3 class=\"text-xl text-white font-bold mb-2\">\u6cb3\u9053\u4e0e\u9632\u6d2a<\/h3>\r\n<p class=\"text-gray-400 text-sm leading-relaxed mb-4\">\r\n \u96e8\u91cf\u4e0e\u6c34\u4f4d\u8054\u52a8\u76d1\u6d4b\uff0c\u6784\u5efa\u6d41\u57df\u9632\u6d2a\u6297\u65f1<span class=\"text-cyan-400 font-bold\">\u6570\u5b57\u5e95\u5ea7<\/span>\uff0c\u8f85\u52a9\u9632\u6c5b\u51b3\u7b56\u3002\r\n <\/p>\r\n<div class=\"mt-auto pt-4 border-t border-gray-700\/50\">\r\n<div class=\"flex items-center space-x-2 text-xs text-gray-500\">\r\n<i class=\"fa-solid fa-check text-cyan-500\"><\/i>\r\n<span>\u5b9e\u65f6\u6c34\u4f4d<\/span>\r\n<i class=\"fa-solid fa-check text-cyan-500 ml-2\"><\/i>\r\n<span>\u964d\u96e8\u9884\u8b66<\/span>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Scenario 6: Mudslide (Green) -->\r\n<div class=\"scenario-card card-green p-6 flex flex-col justify-start\">\r\n<div class=\"corner-accent\"><\/div>\r\n<div class=\"flex justify-between items-start\">\r\n<div class=\"icon-box\">\r\n<i class=\"fa-solid fa-house-tsunami\"><\/i>\r\n<\/div>\r\n<span class=\"text-[10px] text-gray-500 font-mono tracking-wider\">WATER 03<\/span>\r\n<\/div>\r\n<h3 class=\"text-xl text-white font-bold mb-2\">\u6ce5\u77f3\u6d41\u6c9f\u9053<\/h3>\r\n<p class=\"text-gray-400 text-sm leading-relaxed mb-4\">\r\n \u6ce5\u4f4d\u8ba1+\u6b21\u58f0\u6ce2+\u89c6\u9891AI\u591a\u7ef4\u878d\u5408\uff0c\u5b9e\u73b0\u6c9f\u9053\u6ce5\u77f3\u6d41<span class=\"text-green-400 font-bold\">\u63d0\u524d\u9884\u8b66<\/span>\uff0c\u4fdd\u969c\u4e0b\u6e38\u5b89\u5168\u3002\r\n <\/p>\r\n<div class=\"mt-auto pt-4 border-t border-gray-700\/50\">\r\n<div class=\"flex items-center space-x-2 text-xs text-gray-500\">\r\n<i class=\"fa-solid fa-check text-green-500\"><\/i>\r\n<span>\u6ce5\u4f4d\u76d1\u6d4b<\/span>\r\n<i class=\"fa-solid fa-check text-green-500 ml-2\"><\/i>\r\n<span>\u6b21\u58f0\u6ce2\u611f\u77e5<\/span>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ca4ae68 elementor-widget elementor-widget-html\" data-id=\"ca4ae68\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"zh-CN\" data-theme=\"light\" style=\"\"><head>\r\n<meta charset=\"utf-8\">\r\n<meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\">\r\n<title>\u7ae0\u8282\u5c01\u9762\uff1a\u667a\u80fd\u9525\u6876<\/title>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.4.0\/css\/all.min.css\" rel=\"stylesheet\">\r\n<style>\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Noto Sans SC', sans-serif;\r\n background-color: #0f172a;\r\n }\r\n .slide-container {\r\n width: 1280px;\r\n height: 720px;\r\n position: relative;\r\n background-color: #0f172a;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \/* Grid Background Pattern - Replaced linear-gradient with SVG for export compatibility *\/\r\n .bg-grid {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%2338bdf8' fill-opacity='0.05'%3E%3Cpath opacity='1' d='M0 0h40v1H0zM0 0h1v40H0z'\/%3E%3C\/g%3E%3C\/g%3E%3C\/svg%3E\");\r\n background-size: 40px 40px;\r\n z-index: 0;\r\n }\r\n .chapter-number-huge {\r\n font-size: 12rem;\r\n font-weight: 900;\r\n line-height: 1;\r\n color: transparent;\r\n -webkit-text-stroke: 4px rgba(255, 255, 255, 0.1);\r\n position: absolute;\r\n left: 60px;\r\n top: 60px;\r\n z-index: 0;\r\n opacity: 0.5;\r\n }\r\n .glass-panel {\r\n background: rgba(30, 41, 59, 0.4);\r\n border-left: 6px solid #38bdf8;\r\n backdrop-filter: blur(4px);\r\n }\r\n .glow-icon {\r\n filter: drop-shadow(0 0 15px rgba(56, 189, 248, 0.6));\r\n }\r\n .terrain-line {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 300px;\r\n background: url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 1440 320\"><path fill=\"%231e293b\" fill-opacity=\"0.8\" d=\"M0,224L48,213.3C96,203,192,181,288,181.3C384,181,480,203,576,224C672,245,768,267,864,261.3C960,256,1056,224,1152,197.3C1248,171,1344,149,1392,138.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z\"><\/path><\/svg>') no-repeat bottom;\r\n background-size: cover;\r\n z-index: 1;\r\n }\r\n <\/style>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400&display=swap\" rel=\"stylesheet\"><link href=\"https:\/\/fonts.googleapis.com\/css2?family=Open%20Sans:wght@400&display=swap\" rel=\"stylesheet\"><link href=\"https:\/\/fonts.googleapis.com\/css2?family=Google%20Sans:wght@400&display=swap\" rel=\"stylesheet\"><link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto%20Sans%20JP:wght@400&display=swap\" rel=\"stylesheet\"><link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400&display=swap\" rel=\"stylesheet\"><\/head>\r\n<body style=\"\" autocomplete=\"off\">\r\n<div class=\"slide-container\">\r\n<!-- Background Grid -->\r\n<div class=\"bg-grid\"><\/div>\r\n<!-- Giant Chapter Number -->\r\n<div class=\"chapter-number-huge\">09<\/div>\r\n<!-- Decorative Background Elements -->\r\n<div class=\"absolute top-0 right-0 w-[800px] h-[800px] bg-blue-900 rounded-full opacity-10 blur-3xl transform translate-x-1\/3 -translate-y-1\/3\"><\/div>\r\n<div class=\"absolute bottom-0 left-0 w-[600px] h-[600px] bg-indigo-900 rounded-full opacity-10 blur-3xl transform -translate-x-1\/3 translate-y-1\/3\"><\/div>\r\n<!-- Terrain Decoration -->\r\n<div class=\"terrain-line\"><\/div>\r\n<!-- Main Content Area -->\r\n<div class=\"flex flex-1 z-20 items-center px-24 relative\">\r\n<div class=\"w-full flex justify-between items-center\">\r\n<!-- Left: Text Content -->\r\n<div class=\"w-3\/5 pt-20\">\r\n<div class=\"flex items-center space-x-3 mb-6\">\r\n<div class=\"h-1 w-12 bg-blue-500\"><\/div>\r\n<p class=\"text-blue-400 font-bold tracking-widest uppercase\">Chapter Eight<\/p>\r\n<\/div>\r\n<h1 class=\"text-7xl font-black text-white mb-8 tracking-tight leading-tight\">\r\n \r\n <!--StartFragment-->\r\n <\/h1><h3 class=\"text-sm font-bold text-white group-hover:text-pink-300 transition-colors truncate\" style=\"\r\n box-sizing: border-box;\r\n border-width: 0px;\r\n border-style: solid;\r\n border-color: rgb(229, 231, 235);\r\n --tw-border-opacity: 1;\r\n --tw-shadow: 0 0 #0000;\r\n --tw-ring-inset: ;\r\n --tw-ring-offset-width: 0px;\r\n --tw-ring-offset-color: #fff;\r\n --tw-ring-color: rgba(59, 130, 246, 0.5);\r\n --tw-ring-offset-shadow: 0 0 #0000;\r\n --tw-ring-shadow: 0 0 #0000;\r\n margin: 0px;\r\n font-size: 0.875rem;\r\n font-weight: 700;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n line-height: 1.25rem;\r\n --tw-text-opacity: 1;\r\n color: rgb(249, 168, 212);\r\n transition-property: background-color, border-color, color, fill, stroke;\r\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\r\n transition-duration: 150ms;\r\n font-family: 'Noto Sans SC', sans-serif;\r\n font-style: normal;\r\n font-variant-ligatures: normal;\r\n font-variant-caps: normal;\r\n letter-spacing: normal;\r\n orphans: 2;\r\n text-align: start;\r\n text-indent: 0px;\r\n text-transform: none;\r\n widows: 2;\r\n word-spacing: 0px;\r\n -webkit-text-stroke-width: 0px;\r\n background-color: rgba(30, 41, 59, 0.9);\r\n text-decoration-thickness: initial;\r\n text-decoration-style: initial;\r\n text-decoration-color: initial;\r\n \">\r\n \r\n <!--StartFragment-->\r\n <h1 class=\"text-7xl font-black text-white mb-8 tracking-tight leading-tight\" style=\"\r\n box-sizing: border-box;\r\n border-width: 0px;\r\n border-style: solid;\r\n border-color: rgb(229, 231, 235);\r\n --tw-border-opacity: 1;\r\n --tw-shadow: 0 0 #0000;\r\n --tw-ring-inset: ;\r\n --tw-ring-offset-width: 0px;\r\n --tw-ring-offset-color: #fff;\r\n --tw-ring-color: rgba(59, 130, 246, 0.5);\r\n --tw-ring-offset-shadow: 0 0 #0000;\r\n --tw-ring-shadow: 0 0 #0000;\r\n margin: 0px 0px 2rem;\r\n font-size: 4.5rem;\r\n font-weight: 900;\r\n line-height: 1.25;\r\n letter-spacing: -0.025em;\r\n --tw-text-opacity: 1;\r\n color: rgb(255, 255, 255);\r\n font-family: 'Noto Sans SC', sans-serif;\r\n font-style: normal;\r\n font-variant-ligatures: normal;\r\n font-variant-caps: normal;\r\n orphans: 2;\r\n text-align: start;\r\n text-indent: 0px;\r\n text-transform: none;\r\n widows: 2;\r\n word-spacing: 0px;\r\n -webkit-text-stroke-width: 0px;\r\n white-space: normal;\r\n background-color: rgb(15, 23, 42);\r\n text-decoration-thickness: initial;\r\n text-decoration-style: initial;\r\n text-decoration-color: initial;\r\n \">\r\n <p>\u6865\u6881\u9884\u8b66\u4e0e\u5e94\u6025\u63aa\u65bd<\/p>\r\n\r\n <\/h1>\r\n <!--EndFragment-->\r\n \r\n\r\n\r\n <\/h3>\r\n <!--EndFragment-->\r\n \r\n\r\n\r\n<div class=\"glass-panel p-8 rounded-r-lg max-w-2xl\">\r\n<h2 class=\"text-3xl text-gray-200 font-light mb-4\">\u4ea4\u901a\u5b89\u5168\u7684\u667a\u80fd\u54e8\u5175<\/h2>\r\n<p class=\"text-gray-400 text-lg leading-relaxed\">\r\n \u878d\u5408\u7269\u8054\u7f51\u3001\u5317\u6597\u5b9a\u4f4d\u4e0eAI\u89c6\u89c9\u7684\u65b0\u4e00\u4ee3\u4ea4\u901a\u5b89\u5168\u8bbe\u5907\u3002<br>\r\n \u5b9e\u65f6\u76d1\u6d4b\u8def\u51b5\u3001\u4e3b\u52a8\u9884\u8b66\u98ce\u9669\u3001\u667a\u80fd\u8c03\u5ea6\u7ba1\u7406\uff0c\u4e3a\u9053\u8def\u65bd\u5de5\u3001\u4e8b\u6545\u73b0\u573a\u3001\u4e34\u65f6\u7ba1\u5236\u63d0\u4f9b\u5168\u65b9\u4f4d\u5b89\u5168\u4fdd\u969c\u3002\r\n <\/p>\r\n<\/div>\r\n<!-- Key Points -->\r\n<div class=\"flex space-x-8 mt-12\">\r\n<div class=\"flex flex-col items-center\">\r\n<div class=\"w-12 h-12 rounded-full bg-gray-800 border border-gray-600 flex items-center justify-center mb-3\">\r\n<i class=\"fa-solid fa-satellite-dish text-blue-400 text-xl\"><\/i>\r\n<\/div>\r\n<p class=\"text-gray-400 text-sm\">\u4e07\u7269\u4e92\u8054<\/p>\r\n<\/div>\r\n<div class=\"flex flex-col items-center\">\r\n<div class=\"w-12 h-12 rounded-full bg-gray-800 border border-gray-600 flex items-center justify-center mb-3\">\r\n<i class=\"fa-solid fa-location-crosshairs text-blue-400 text-xl\"><\/i>\r\n<\/div>\r\n<p class=\"text-gray-400 text-sm\">\u5317\u6597\u5b9a\u4f4d<\/p>\r\n<\/div>\r\n<div class=\"flex flex-col items-center\">\r\n<div class=\"w-12 h-12 rounded-full bg-gray-800 border border-gray-600 flex items-center justify-center mb-3\">\r\n<i class=\"fa-solid fa-eye text-blue-400 text-xl\"><\/i>\r\n<\/div>\r\n<p class=\"text-gray-400 text-sm\">AI \u89c6\u89c9<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Right: Visual Icon\/Graphic -->\r\n<div class=\"w-2\/5 flex justify-center items-center\">\r\n<div class=\"relative w-80 h-80\">\r\n<div class=\"absolute inset-0 bg-blue-500 rounded-full opacity-5 blur-xl animate-pulse\"><\/div>\r\n<div class=\"absolute inset-0 border-2 border-dashed border-blue-500\/30 rounded-full animate-spin-slow\" style=\"animation-duration: 20s;\"><\/div>\r\n<div class=\"absolute inset-4 border border-blue-500\/20 rounded-full\"><\/div>\r\n<!-- Central Icon -->\r\n<div class=\"absolute inset-0 flex items-center justify-center\">\r\n<i class=\"fa-solid fa-traffic-cone text-9xl text-white opacity-90 glow-icon\"><\/i>\r\n<\/div>\r\n<!-- Floating Satellite Icons -->\r\n<div class=\"absolute top-0 left-1\/2 transform -translate-x-1\/2 -translate-y-4 bg-gray-900 border border-blue-500\/50 p-2 rounded-lg shadow-lg\">\r\n<i class=\"fa-solid fa-map-location-dot text-blue-400\"><\/i>\r\n<\/div>\r\n<div class=\"absolute bottom-10 right-0 bg-gray-900 border border-blue-500\/50 p-2 rounded-lg shadow-lg\">\r\n<i class=\"fa-solid fa-triangle-exclamation text-blue-400\"><\/i>\r\n<\/div>\r\n<div class=\"absolute bottom-10 left-0 bg-gray-900 border border-blue-500\/50 p-2 rounded-lg shadow-lg\">\r\n<i class=\"fa-solid fa-video text-blue-400\"><\/i>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n<\/body><\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e28a406 elementor-widget elementor-widget-html\" data-id=\"e28a406\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"zh-CN\" data-theme=\"light\" style=\"\"><head>\r\n<meta charset=\"utf-8\">\r\n<meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\">\r\n<title>\u667a\u80fd\u9525\u6876\u4ea7\u54c1\u8be6\u89e3<\/title>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.4.0\/css\/all.min.css\" rel=\"stylesheet\">\r\n<style>\r\n #body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Noto Sans SC', sans-serif;\r\n background-color: #0f172a;\r\n color: white;\r\n overflow: hidden;\r\n }\r\n .slide-container {\r\n width: 1280px;\r\n height: 720px;\r\n position: relative;\r\n background-color: #0f172a;\r\n display: flex;\r\n flex-direction: column;\r\n overflow: hidden;\r\n }\r\n \/* Background Grid Pattern *\/\r\n .bg-grid {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-image: url('data:image\/svg+xml,%3Csvg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"%3E%3Cg fill=\"%2338bdf8\" fill-opacity=\"0.05\" fill-rule=\"evenodd\"%3E%3Cpath d=\"M0 40L40 0H20L0 20M40 40V20L20 40\"\/%3E%3C\/g%3E%3C\/svg%3E');\r\n z-index: 0;\r\n pointer-events: none;\r\n }\r\n \r\n \/* Custom Scrollbar for left panel *\/\r\n .custom-scrollbar::-webkit-scrollbar {\r\n width: 4px;\r\n }\r\n .custom-scrollbar::-webkit-scrollbar-track {\r\n background: rgba(15, 23, 42, 0.5);\r\n }\r\n .custom-scrollbar::-webkit-scrollbar-thumb {\r\n background: rgba(56, 189, 248, 0.3);\r\n border-radius: 2px;\r\n }\r\n\r\n .glass-panel {\r\n background: rgba(30, 41, 59, 0.7);\r\n border: 1px solid rgba(56, 189, 248, 0.2);\r\n backdrop-filter: blur(12px);\r\n }\r\n\r\n .feature-icon-box {\r\n width: 36px;\r\n height: 36px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 8px;\r\n margin-right: 12px;\r\n flex-shrink: 0;\r\n }\r\n\r\n \/* Tech HUD Elements for Right Image *\/\r\n .tech-marker {\r\n position: absolute;\r\n display: flex;\r\n align-items: center;\r\n z-index: 20;\r\n }\r\n .marker-dot {\r\n width: 12px;\r\n height: 12px;\r\n background-color: #38bdf8;\r\n border: 2px solid white;\r\n border-radius: 50%;\r\n box-shadow: 0 0 10px #38bdf8;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n .marker-line {\r\n height: 1px;\r\n width: 60px;\r\n background-color: #38bdf8;\r\n margin: 0 8px;\r\n position: relative;\r\n }\r\n .marker-card {\r\n background: rgba(15, 23, 42, 0.9);\r\n border: 1px solid #38bdf8;\r\n padding: 6px 12px;\r\n border-radius: 4px;\r\n font-size: 12px;\r\n color: #e0f2fe;\r\n white-space: nowrap;\r\n }\r\n \r\n \/* Pulse Animation *\/\r\n @keyframes pulse-ring {\r\n 0% { transform: scale(0.8); opacity: 0.5; }\r\n 100% { transform: scale(2.4); opacity: 0; }\r\n }\r\n .pulse::before {\r\n content: '';\r\n position: absolute;\r\n left: -6px; top: -6px;\r\n width: 24px; height: 24px;\r\n border: 1px solid #38bdf8;\r\n border-radius: 50%;\r\n animation: pulse-ring 2s infinite;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body style=\"\" autocomplete=\"off\">\r\n<div class=\"slide-container\">\r\n<!-- Background -->\r\n<div class=\"bg-grid\"><\/div>\r\n<div class=\"absolute top-[-100px] right-[-100px] w-[500px] h-[500px] bg-blue-600 rounded-full opacity-10 filter blur-[80px]\"><\/div>\r\n<!-- Header -->\r\n<div class=\"flex items-center justify-between px-12 pt-8 pb-4 z-10\">\r\n<div>\r\n<div class=\"flex items-center space-x-3 mb-2\">\r\n<span class=\"px-2 py-1 bg-blue-900 bg-opacity-50 text-blue-400 text-xs font-bold rounded border border-blue-700 border-opacity-50\">\u667a\u80fd\u9525\u6876<\/span>\r\n<span class=\"text-gray-500 text-sm\">\/ 08 CHAPTER<\/span>\r\n<\/div>\r\n<h1 class=\"text-3xl font-bold text-white tracking-tight\">\u667a\u80fd\u9525\u6876\u4ea7\u54c1\u8be6\u89e3<\/h1>\r\n<div class=\"h-1 w-20 bg-blue-500 mt-2\"><\/div>\r\n<\/div>\r\n<div class=\"text-right\">\r\n<p class=\"text-xs text-gray-400 uppercase tracking-wider\">Product Details<\/p>\r\n<p class=\"text-sm font-bold text-blue-300\">\u4ea4\u901a\u5b89\u5168\u667a\u80fd\u54e8\u5175<\/p>\r\n<\/div>\r\n<\/div>\r\n<!-- Main Content -->\r\n<div class=\"flex flex-1 px-12 pb-8 gap-8 z-10 overflow-hidden\">\r\n<!-- Left Column: Detailed Specs (Scrollable) -->\r\n<div class=\"w-5\/12 h-full overflow-hidden flex flex-col\">\r\n<div class=\"flex-1 overflow-y-auto custom-scrollbar pr-2 space-y-4\">\r\n<!-- Section 1: Core Functions -->\r\n<div class=\"glass-panel rounded-xl p-5\">\r\n<h3 class=\"flex items-center text-lg font-bold text-white mb-4 border-b border-gray-700 pb-2\">\r\n<i class=\"fa-solid fa-microchip text-blue-400 mr-2\"><\/i>\u6838\u5fc3\u529f\u80fd\r\n <\/h3>\r\n<div class=\"grid grid-cols-1 gap-3\">\r\n<div class=\"flex items-start\">\r\n<div class=\"feature-icon-box bg-blue-900 bg-opacity-50 text-blue-300 border border-blue-800\">\r\n<i class=\"fa-solid fa-location-crosshairs\"><\/i>\r\n<\/div>\r\n<div>\r\n<p class=\"text-sm font-bold text-white\">\u5b9e\u65f6\u5b9a\u4f4d\u4e0e\u8f68\u8ff9\u8ffd\u8e2a<\/p>\r\n<p class=\"text-xs text-gray-400 mt-1\">\u5317\u6597\/GPS\u53cc\u6a21\u5b9a\u4f4d\uff0c\u7cbe\u5ea6\u22643m\uff0c\u5168\u65f6\u6bb5\u8f68\u8ff9\u56de\u653e\u3002<\/p>\r\n<\/div>\r\n<\/div>\r\n<div class=\"flex items-start\">\r\n<div class=\"feature-icon-box bg-red-900 bg-opacity-50 text-red-300 border border-red-800\">\r\n<i class=\"fa-solid fa-triangle-exclamation\"><\/i>\r\n<\/div>\r\n<div>\r\n<p class=\"text-sm font-bold text-white\">\u72b6\u6001\u76d1\u6d4b\u4e0e\u5f02\u5e38\u544a\u8b66<\/p>\r\n<p class=\"text-xs text-gray-400 mt-1\">\u5185\u7f6e\u9640\u87ba\u4eea\uff0c\u503e\u5012\u3001\u79fb\u4f4d\u3001\u78b0\u649e\u6beb\u79d2\u7ea7\u81ea\u52a8\u62a5\u8b66\u3002<\/p>\r\n<\/div>\r\n<\/div>\r\n<div class=\"flex items-start\">\r\n<div class=\"feature-icon-box bg-yellow-900 bg-opacity-50 text-yellow-300 border border-yellow-800\">\r\n<i class=\"fa-solid fa-lightbulb\"><\/i>\r\n<\/div>\r\n<div>\r\n<p class=\"text-sm font-bold text-white\">\u4e3b\u52a8\u53d1\u5149\u9884\u8b66<\/p>\r\n<p class=\"text-xs text-gray-400 mt-1\">\u9876\u7f6e\u9ad8\u4eaeLED\u8b66\u793a\u706f\uff0c\u96e8\u96fe\u5929\u7a7f\u900f\u529b\u5f3a\uff0c\u89c6\u8ddd>500m\u3002<\/p>\r\n<\/div>\r\n<\/div>\r\n<div class=\"flex items-start\">\r\n<div class=\"feature-icon-box bg-purple-900 bg-opacity-50 text-purple-300 border border-purple-800\">\r\n<i class=\"fa-solid fa-video\"><\/i>\r\n<\/div>\r\n<div>\r\n<p class=\"text-sm font-bold text-white\">\u89c6\u9891AI\u8bc6\u522b<\/p>\r\n<p class=\"text-xs text-gray-400 mt-1\">\u53ef\u9009\u914d\u6444\u50cf\u5934\uff0c\u667a\u80fd\u8bc6\u522b\u8f66\u8f86\u9006\u884c\u3001\u884c\u4eba\u95ef\u5165\u7981\u533a\u3002<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Section 2: Technical Specs -->\r\n<div class=\"glass-panel rounded-xl p-5\">\r\n<h3 class=\"flex items-center text-lg font-bold text-white mb-4 border-b border-gray-700 pb-2\">\r\n<i class=\"fa-solid fa-sliders text-green-400 mr-2\"><\/i>\u6280\u672f\u7279\u70b9\r\n <\/h3>\r\n<div class=\"grid grid-cols-2 gap-4\">\r\n<div class=\"bg-gray-800 bg-opacity-50 p-3 rounded-lg border border-gray-700\">\r\n<div class=\"text-xs text-gray-400 mb-1\">\u7eed\u822a\u80fd\u529b<\/div>\r\n<div class=\"text-sm font-bold text-white flex items-center\">\r\n<i class=\"fa-solid fa-solar-panel text-yellow-400 mr-2\"><\/i>\u592a\u9633\u80fd+\u9502\u7535\r\n <\/div>\r\n<div class=\"text-xs text-gray-500 mt-1\">30\u5929\u8d85\u957f\u5f85\u673a<\/div>\r\n<\/div>\r\n<div class=\"bg-gray-800 bg-opacity-50 p-3 rounded-lg border border-gray-700\">\r\n<div class=\"text-xs text-gray-400 mb-1\">\u901a\u4fe1\u65b9\u5f0f<\/div>\r\n<div class=\"text-sm font-bold text-white flex items-center\">\r\n<i class=\"fa-solid fa-signal text-blue-400 mr-2\"><\/i>\u5168\u7f51\u901a\r\n <\/div>\r\n<div class=\"text-xs text-gray-500 mt-1\">4G\/NB-IoT\/LoRa<\/div>\r\n<\/div>\r\n<div class=\"bg-gray-800 bg-opacity-50 p-3 rounded-lg border border-gray-700\">\r\n<div class=\"text-xs text-gray-400 mb-1\">\u9632\u62a4\u7b49\u7ea7<\/div>\r\n<div class=\"text-sm font-bold text-white flex items-center\">\r\n<i class=\"fa-solid fa-shield-halved text-green-400 mr-2\"><\/i>IP68\u7ea7\r\n <\/div>\r\n<div class=\"text-xs text-gray-500 mt-1\">\u6297\u538b\u22652\u5428<\/div>\r\n<\/div>\r\n<div class=\"bg-gray-800 bg-opacity-50 p-3 rounded-lg border border-gray-700\">\r\n<div class=\"text-xs text-gray-400 mb-1\">\u90e8\u7f72\u65b9\u5f0f<\/div>\r\n<div class=\"text-sm font-bold text-white flex items-center\">\r\n<i class=\"fa-solid fa-box-open text-purple-400 mr-2\"><\/i>\u5373\u653e\u5373\u7528\r\n <\/div>\r\n<div class=\"text-xs text-gray-500 mt-1\">\u65e0\u9700\u5e03\u7ebf<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Section 3 & 4 Combined -->\r\n<div class=\"grid grid-cols-1 gap-4\">\r\n<div class=\"glass-panel rounded-xl p-5\">\r\n<h3 class=\"flex items-center text-base font-bold text-white mb-3\">\r\n<i class=\"fa-solid fa-map-location-dot text-orange-400 mr-2\"><\/i>\u5e94\u7528\u573a\u666f\r\n <\/h3>\r\n<div class=\"flex flex-wrap gap-2\">\r\n<span class=\"px-2 py-1 bg-gray-700 rounded text-xs text-gray-200 border border-gray-600\">\u9ad8\u901f\u65bd\u5de5\u7ba1\u63a7<\/span>\r\n<span class=\"px-2 py-1 bg-gray-700 rounded text-xs text-gray-200 border border-gray-600\">\u4e8b\u6545\u73b0\u573a\u9694\u79bb<\/span>\r\n<span class=\"px-2 py-1 bg-gray-700 rounded text-xs text-gray-200 border border-gray-600\">\u4e34\u65f6\u4ea4\u901a\u7ba1\u5236<\/span>\r\n<span class=\"px-2 py-1 bg-gray-700 rounded text-xs text-gray-200 border border-gray-600\">\u6865\u96a7\u7ef4\u62a4<\/span>\r\n<span class=\"px-2 py-1 bg-gray-700 rounded text-xs text-gray-200 border border-gray-600\">\u5e94\u6025\u6551\u63f4<\/span>\r\n<\/div>\r\n<\/div>\r\n<div class=\"glass-panel rounded-xl p-5\">\r\n<h3 class=\"flex items-center text-base font-bold text-white mb-3\">\r\n<i class=\"fa-solid fa-desktop text-cyan-400 mr-2\"><\/i>\u7ba1\u7406\u5e73\u53f0\u80fd\u529b\r\n <\/h3>\r\n<ul class=\"text-xs text-gray-300 space-y-1 list-disc list-inside\">\r\n<li><span class=\"text-white font-medium\">\u53ef\u89c6\u5316\uff1a<\/span>\u7535\u5b50\u5730\u56fe\u5b9e\u65f6\u663e\u793a\u5168\u90e8\u9525\u6876\u4f4d\u7f6e<\/li>\r\n<li><span class=\"text-white font-medium\">\u96c6\u4e2d\u76d1\u63a7\uff1a<\/span>\u7535\u91cf\u3001\u503e\u659c\u3001\u79fb\u4f4d\u72b6\u6001\u4e00\u76ee\u4e86\u7136<\/li>\r\n<li><span class=\"text-white font-medium\">\u6570\u636e\u5206\u6790\uff1a<\/span>\u4f7f\u7528\u9891\u6b21\u7edf\u8ba1\u3001\u4e8b\u6545\u9884\u8b66\u8bb0\u5f55\u5bfc\u51fa<\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<!-- Right Column: Visual Showcase -->\r\n<div class=\"w-7\/12 h-full relative rounded-xl overflow-hidden border border-gray-700 bg-gray-900 group\">\r\n<!-- Technical Concept Diagram Replacement -->\r\n<img decoding=\"async\" alt=\"\u667a\u80fd\u9525\u6876\u6280\u672f\u67b6\u6784\u793a\u610f\u56fe\" class=\"w-full h-full object-cover opacity-90 group-hover:opacity-100 transition-opacity duration-700\" src=\"https:\/\/www.bvsc.top\/wp-content\/uploads\/2026\/01\/\u667a\u80fd\u9525\u6876.png\" data-height-listener-added=\"true\" style=\"font-size: 16px;\">\r\n<!-- Overlay for Readability -->\r\n<div class=\"absolute inset-0 bg-gray-900 bg-opacity-30 pointer-events-none\"><\/div>\r\n<!-- Tech HUD Markers -->\r\n<!-- Marker 1: Top Light -->\r\n\r\n<!-- Marker 2: GPS Module (Internal) -->\r\n<div class=\"tech-marker\" style=\"top: 35%; left: 52%;\">\r\n\r\n<div class=\"marker-line\" style=\"width: 50px;\"><\/div>\r\n\r\n<\/div>\r\n<!-- Marker 3: Solar Panel -->\r\n\r\n<!-- Marker 4: Base -->\r\n\r\n<!-- Corner HUD Elements -->\r\n<div class=\"absolute top-4 left-4 border-l-2 border-t-2 border-blue-500 w-8 h-8 opacity-70\"><\/div>\r\n<div class=\"absolute top-4 right-4 border-r-2 border-t-2 border-blue-500 w-8 h-8 opacity-70\"><\/div>\r\n<div class=\"absolute bottom-4 left-4 border-l-2 border-b-2 border-blue-500 w-8 h-8 opacity-70\"><\/div>\r\n<div class=\"absolute bottom-4 right-4 border-r-2 border-b-2 border-blue-500 w-8 h-8 opacity-70\"><\/div>\r\n<!-- Status Panel overlay -->\r\n\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n<\/body><\/html>\r\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4d5a83f e-con-full e-flex e-con e-child\" data-id=\"4d5a83f\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7160382 elementor-widget__width-initial elementor-widget elementor-widget-image\" data-id=\"7160382\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"2048\" height=\"1419\" src=\"https:\/\/www.bvsc.top\/wp-content\/uploads\/2026\/01\/\u56fe\u7247\u5904\u7406-e1768212047662-2048x1419.png\" class=\"attachment-2048x2048 size-2048x2048 wp-image-1003\" alt=\"\" srcset=\"https:\/\/www.bvsc.top\/wp-content\/uploads\/2026\/01\/\u56fe\u7247\u5904\u7406-e1768212047662-2048x1419.png 2048w, https:\/\/www.bvsc.top\/wp-content\/uploads\/2026\/01\/\u56fe\u7247\u5904\u7406-e1768212047662-300x208.png 300w, https:\/\/www.bvsc.top\/wp-content\/uploads\/2026\/01\/\u56fe\u7247\u5904\u7406-e1768212047662-1024x709.png 1024w, https:\/\/www.bvsc.top\/wp-content\/uploads\/2026\/01\/\u56fe\u7247\u5904\u7406-e1768212047662-768x532.png 768w, https:\/\/www.bvsc.top\/wp-content\/uploads\/2026\/01\/\u56fe\u7247\u5904\u7406-e1768212047662-1536x1064.png 1536w\" sizes=\"(max-width: 2048px) 100vw, 2048px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f468c5e elementor-widget elementor-widget-image\" data-id=\"f468c5e\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"2048\" height=\"1152\" src=\"https:\/\/www.bvsc.top\/wp-content\/uploads\/2026\/01\/2-2048x1152.png\" class=\"attachment-2048x2048 size-2048x2048 wp-image-1000\" alt=\"\" srcset=\"https:\/\/www.bvsc.top\/wp-content\/uploads\/2026\/01\/2-2048x1152.png 2048w, https:\/\/www.bvsc.top\/wp-content\/uploads\/2026\/01\/2-300x169.png 300w, https:\/\/www.bvsc.top\/wp-content\/uploads\/2026\/01\/2-1024x576.png 1024w, https:\/\/www.bvsc.top\/wp-content\/uploads\/2026\/01\/2-768x432.png 768w, https:\/\/www.bvsc.top\/wp-content\/uploads\/2026\/01\/2-1536x864.png 1536w\" sizes=\"(max-width: 2048px) 100vw, 2048px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4801885 elementor-widget elementor-widget-image\" data-id=\"4801885\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"2048\" height=\"1152\" src=\"https:\/\/www.bvsc.top\/wp-content\/uploads\/2026\/01\/3-2048x1152.png\" class=\"attachment-2048x2048 size-2048x2048 wp-image-1001\" alt=\"\" srcset=\"https:\/\/www.bvsc.top\/wp-content\/uploads\/2026\/01\/3-2048x1152.png 2048w, https:\/\/www.bvsc.top\/wp-content\/uploads\/2026\/01\/3-300x169.png 300w, https:\/\/www.bvsc.top\/wp-content\/uploads\/2026\/01\/3-1024x576.png 1024w, https:\/\/www.bvsc.top\/wp-content\/uploads\/2026\/01\/3-768x432.png 768w, https:\/\/www.bvsc.top\/wp-content\/uploads\/2026\/01\/3-1536x864.png 1536w\" sizes=\"(max-width: 2048px) 100vw, 2048px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-473e19d elementor-widget elementor-widget-image\" data-id=\"473e19d\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"1077\" src=\"https:\/\/www.bvsc.top\/wp-content\/uploads\/2026\/01\/4-scaled-e1768212121183-2048x1077.png\" class=\"attachment-2048x2048 size-2048x2048 wp-image-1002\" alt=\"\" srcset=\"https:\/\/www.bvsc.top\/wp-content\/uploads\/2026\/01\/4-scaled-e1768212121183-2048x1077.png 2048w, https:\/\/www.bvsc.top\/wp-content\/uploads\/2026\/01\/4-scaled-e1768212121183-300x158.png 300w, https:\/\/www.bvsc.top\/wp-content\/uploads\/2026\/01\/4-scaled-e1768212121183-1024x538.png 1024w, https:\/\/www.bvsc.top\/wp-content\/uploads\/2026\/01\/4-scaled-e1768212121183-768x404.png 768w, https:\/\/www.bvsc.top\/wp-content\/uploads\/2026\/01\/4-scaled-e1768212121183-1536x808.png 1536w\" sizes=\"(max-width: 2048px) 100vw, 2048px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f411e18 e-con-full e-flex e-con e-child\" data-id=\"f411e18\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1733596 elementor-widget elementor-widget-html\" data-id=\"1733596\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n\r\n<html lang=\"zh-CN\">\r\n<head>\r\n<meta charset=\"utf-8\"\/>\r\n<meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\"\/>\r\n<title>\u672a\u6765\u5c55\u671b\u4e0e\u884c\u52a8\u53f7\u53ec<\/title>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\"\/>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap\" rel=\"stylesheet\"\/>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.4.0\/css\/all.min.css\" rel=\"stylesheet\"\/>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/echarts@5\/dist\/echarts.min.js\"><\/script>\r\n<style>\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Noto Sans SC', sans-serif;\r\n background-color: #0f172a;\r\n color: #f8fafc;\r\n }\r\n .slide-container {\r\n width: 1280px;\r\n height: 1000px;\r\n position: relative;\r\n background-color: #0f172a;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \r\n \/* Background Grid *\/\r\n .bg-grid {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-image: url('data:image\/svg+xml,%3Csvg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"%3E%3Cg fill=\"none\" fill-rule=\"evenodd\"%3E%3Cg fill=\"%2338bdf8\" fill-opacity=\"0.05\"%3E%3Cpath d=\"M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\"\/%3E%3C\/g%3E%3C\/g%3E%3C\/svg%3E');\r\n z-index: 0;\r\n }\r\n \r\n \/* Card Styles *\/\r\n .vision-card {\r\n background-color: rgba(30, 41, 59, 0.4);\r\n border: 1px solid rgba(148, 163, 184, 0.2);\r\n backdrop-filter: blur(10px);\r\n border-radius: 12px;\r\n transition: all 0.3s ease;\r\n position: relative;\r\n overflow: hidden;\r\n height: 100%;\r\n }\r\n \r\n .vision-card:hover {\r\n border-color: rgba(56, 189, 248, 0.6);\r\n transform: translateY(-5px);\r\n box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5);\r\n background-color: rgba(30, 41, 59, 0.6);\r\n }\r\n\r\n .vision-card::after {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 4px;\r\n background-color: transparent;\r\n }\r\n\r\n .card-tech::after { background-color: #3b82f6; }\r\n .card-business::after { background-color: #f59e0b; }\r\n .card-eco::after { background-color: #10b981; }\r\n\r\n .icon-wrapper {\r\n width: 50px;\r\n height: 50px;\r\n border-radius: 12px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 24px;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .icon-tech { background-color: rgba(59, 130, 246, 0.15); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }\r\n .icon-business { background-color: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }\r\n .icon-eco { background-color: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); }\r\n\r\n \/* Roadmap Line *\/\r\n .roadmap-line {\r\n position: absolute;\r\n top: 50%;\r\n left: 0;\r\n width: 100%;\r\n height: 2px;\r\n background-color: rgba(148, 163, 184, 0.2);\r\n z-index: 0;\r\n transform: translateY(-50%);\r\n }\r\n\r\n .roadmap-node {\r\n position: absolute;\r\n top: 50%;\r\n width: 16px;\r\n height: 16px;\r\n border-radius: 50%;\r\n background-color: #0f172a;\r\n border: 4px solid #3b82f6;\r\n transform: translate(-50%, -50%);\r\n z-index: 10;\r\n }\r\n\r\n \/* Call to Action Section *\/\r\n .cta-section {\r\n background-color: rgba(59, 130, 246, 0.1);\r\n border: 1px solid rgba(59, 130, 246, 0.3);\r\n border-radius: 16px;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .cta-glow {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: radial-gradient(circle at center, rgba(59, 130, 246, 0.15) 0%, transparent 70%);\r\n z-index: 0;\r\n }\r\n\r\n .qr-placeholder {\r\n width: 100px;\r\n height: 100px;\r\n background-color: white;\r\n padding: 4px;\r\n border-radius: 8px;\r\n }\r\n\r\n .contact-item {\r\n display: flex;\r\n align-items: center;\r\n padding: 8px 16px;\r\n background-color: rgba(30, 41, 59, 0.6);\r\n border-radius: 8px;\r\n border: 1px solid rgba(148, 163, 184, 0.1);\r\n transition: all 0.3s ease;\r\n }\r\n \r\n .contact-item:hover {\r\n border-color: rgba(56, 189, 248, 0.5);\r\n background-color: rgba(30, 41, 59, 0.8);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"slide-container\">\r\n<!-- Background Elements -->\r\n<div class=\"bg-grid\"><\/div>\r\n<div class=\"absolute top-[-200px] left-[-200px] w-[600px] h-[600px] bg-blue-900 rounded-full opacity-10 blur-3xl\"><\/div>\r\n<div class=\"absolute bottom-[-200px] right-[-200px] w-[600px] h-[600px] bg-indigo-900 rounded-full opacity-10 blur-3xl\"><\/div>\r\n<!-- Header -->\r\n<div class=\"flex items-center justify-between px-12 pt-8 pb-4 z-10 relative\">\r\n<div>\r\n<div class=\"flex items-center space-x-3 mb-2\">\r\n<span class=\"px-2 py-1 bg-blue-900\/40 text-blue-400 text-xs font-bold rounded border border-blue-700\/40\">FUTURE OUTLOOK<\/span>\r\n<span class=\"text-gray-500 text-sm\">\/ 08 NEXT STEPS<\/span>\r\n<\/div>\r\n<h1 class=\"text-3xl font-bold text-white tracking-tight\">\u672a\u6765\u5c55\u671b\u4e0e\u884c\u52a8\u53f7\u53ec<\/h1>\r\n<div class=\"h-1 w-24 bg-blue-500 mt-2\"><\/div>\r\n<\/div>\r\n<div class=\"text-right\">\r\n<p class=\"text-gray-400 text-sm font-medium uppercase tracking-widest\">Vision 2026+<\/p>\r\n<p class=\"text-2xl font-bold text-white\">\u5171\u5efa\u667a\u80fd\u9632\u707e\u65b0\u751f\u6001<\/p>\r\n<\/div>\r\n<\/div>\r\n<!-- Main Content -->\r\n<div class=\"flex flex-col flex-1 px-12 pb-8 gap-6 z-10 relative\">\r\n<!-- Strategic Pillars (Top Section) -->\r\n<div class=\"grid grid-cols-3 gap-6 h-[340px]\">\r\n<!-- Card 1: Tech Evolution -->\r\n<div class=\"vision-card card-tech p-6 flex flex-col\">\r\n<div class=\"icon-wrapper icon-tech\">\r\n<i class=\"fa-solid fa-microchip\"><\/i>\r\n<\/div>\r\n<h3 class=\"text-xl text-white font-bold mb-3\">\u6280\u672f\u6f14\u8fdb\u65b9\u5411<\/h3>\r\n<ul class=\"space-y-4 flex-1\">\r\n<li class=\"flex items-start\">\r\n<i class=\"fa-solid fa-angle-right text-blue-500 mt-1 mr-2 text-xs\"><\/i>\r\n<div>\r\n<p class=\"text-blue-300 font-bold text-sm\">AI\u7b97\u6cd5\u6301\u7eed\u4f18\u5316<\/p>\r\n<p class=\"text-gray-400 text-xs mt-1\">\u6df1\u5ea6\u5b66\u4e60\u6a21\u578b\u8fed\u4ee3\uff0c\u9884\u8b66\u51c6\u786e\u7387\u63d0\u5347\u81f395%+<\/p>\r\n<\/div>\r\n<\/li>\r\n<li class=\"flex items-start\">\r\n<i class=\"fa-solid fa-angle-right text-blue-500 mt-1 mr-2 text-xs\"><\/i>\r\n<div>\r\n<p class=\"text-blue-300 font-bold text-sm\">\u591a\u707e\u79cd\u878d\u5408\u9884\u8b66<\/p>\r\n<p class=\"text-gray-400 text-xs mt-1\">\u5730\u9707\u3001\u6d2a\u6c34\u3001\u6ed1\u5761\u8054\u52a8\u9884\u8b66\uff0c\u6253\u7834\u6570\u636e\u5b64\u5c9b<\/p>\r\n<\/div>\r\n<\/li>\r\n<li class=\"flex items-start\">\r\n<i class=\"fa-solid fa-angle-right text-blue-500 mt-1 mr-2 text-xs\"><\/i>\r\n<div>\r\n<p class=\"text-blue-300 font-bold text-sm\">\u6570\u5b57\u5b6a\u751f\u6280\u672f<\/p>\r\n<p class=\"text-gray-400 text-xs mt-1\">\u6784\u5efa\u707e\u5bb3\u573a\u666f\u865a\u62df\u4eff\u771f\u5e73\u53f0\uff0c\u63a8\u6f14\u707e\u53d8\u5168\u8fc7\u7a0b<\/p>\r\n<\/div>\r\n<\/li>\r\n<\/ul>\r\n<\/div>\r\n<!-- Card 2: Business Expansion -->\r\n<div class=\"vision-card card-business p-6 flex flex-col\">\r\n<div class=\"icon-wrapper icon-business\">\r\n<i class=\"fa-solid fa-chart-line\"><\/i>\r\n<\/div>\r\n<h3 class=\"text-xl text-white font-bold mb-3\">\u4e1a\u52a1\u62d3\u5c55\u89c4\u5212<\/h3>\r\n<ul class=\"space-y-4 flex-1\">\r\n<li class=\"flex items-start\">\r\n<i class=\"fa-solid fa-angle-right text-yellow-500 mt-1 mr-2 text-xs\"><\/i>\r\n<div>\r\n<p class=\"text-yellow-300 font-bold text-sm\">\u533a\u57df\u8986\u76d6\u5ef6\u4f38<\/p>\r\n<p class=\"text-gray-400 text-xs mt-1\">\u4ece\u897f\u5317\u5ef6\u4f38\u81f3\u897f\u5357\u3001\u534e\u5317\u91cd\u70b9\u5730\u533a\uff0c\u7ec7\u5bc6\u76d1\u6d4b\u7f51<\/p>\r\n<\/div>\r\n<\/li>\r\n<li class=\"flex items-start\">\r\n<i class=\"fa-solid fa-angle-right text-yellow-500 mt-1 mr-2 text-xs\"><\/i>\r\n<div>\r\n<p class=\"text-yellow-300 font-bold text-sm\">\u884c\u4e1a\u6df1\u5ea6\u6e17\u900f<\/p>\r\n<p class=\"text-gray-400 text-xs mt-1\">\u4ece\u7535\u529b\u4ea4\u901a\u6269\u5c55\u81f3\u57ce\u5e02\u5e94\u6025\u3001\u667a\u6167\u57ce\u5e02\u751f\u547d\u7ebf<\/p>\r\n<\/div>\r\n<\/li>\r\n<li class=\"flex items-start\">\r\n<i class=\"fa-solid fa-angle-right text-yellow-500 mt-1 mr-2 text-xs\"><\/i>\r\n<div>\r\n<p class=\"text-yellow-300 font-bold text-sm\">\u670d\u52a1\u6a21\u5f0f\u5347\u7ea7<\/p>\r\n<p class=\"text-gray-400 text-xs mt-1\">\u4ece\u8bbe\u5907\u9500\u552e\u5347\u7ea7\u4e3a\"\u76d1\u6d4b\u5373\u670d\u52a1\" (MaaS)\uff0c\u6309\u6548\u4ed8\u8d39<\/p>\r\n<\/div>\r\n<\/li>\r\n<\/ul>\r\n<\/div>\r\n<!-- Card 3: Ecosystem -->\r\n<div class=\"vision-card card-eco p-6 flex flex-col\">\r\n<div class=\"icon-wrapper icon-eco\">\r\n<i class=\"fa-solid fa-seedling\"><\/i>\r\n<\/div>\r\n<h3 class=\"text-xl text-white font-bold mb-3\">\u751f\u6001\u5efa\u8bbe\u613f\u666f<\/h3>\r\n<ul class=\"space-y-4 flex-1\">\r\n<li class=\"flex items-start\">\r\n<i class=\"fa-solid fa-angle-right text-green-500 mt-1 mr-2 text-xs\"><\/i>\r\n<div>\r\n<p class=\"text-green-300 font-bold text-sm\">\u5f00\u653e\u6570\u636e\u5e73\u53f0<\/p>\r\n<p class=\"text-gray-400 text-xs mt-1\">\u4e0e\u6c14\u8c61\u3001\u5730\u9707\u3001\u6c34\u5229\u7b49\u90e8\u95e8\u6570\u636e\u4e92\u8054\uff0c\u5171\u4eab\u4ef7\u503c<\/p>\r\n<\/div>\r\n<\/li>\r\n<li class=\"flex items-start\">\r\n<i class=\"fa-solid fa-angle-right text-green-500 mt-1 mr-2 text-xs\"><\/i>\r\n<div>\r\n<p class=\"text-green-300 font-bold text-sm\">\u4ea7\u5b66\u7814\u534f\u540c\u521b\u65b0<\/p>\r\n<p class=\"text-gray-400 text-xs mt-1\">\u4e0e\u9ad8\u6821\u79d1\u7814\u673a\u6784\u5171\u5efa\u8054\u5408\u5b9e\u9a8c\u5ba4\uff0c\u653b\u514b\u6838\u5fc3\u7b97\u6cd5<\/p>\r\n<\/div>\r\n<\/li>\r\n<li class=\"flex items-start\">\r\n<i class=\"fa-solid fa-angle-right text-green-500 mt-1 mr-2 text-xs\"><\/i>\r\n<div>\r\n<p class=\"text-green-300 font-bold text-sm\">\u884c\u4e1a\u6807\u51c6\u5236\u5b9a<\/p>\r\n<p class=\"text-gray-400 text-xs mt-1\">\u53c2\u4e0e\u884c\u4e1a\u6807\u51c6\u548c\u56fd\u5bb6\u89c4\u8303\u7f16\u5236\uff0c\u5f15\u9886\u6280\u672f\u98ce\u5411<\/p>\r\n<\/div>\r\n<\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/div>\r\n<!-- Call to Action (Bottom Section) -->\r\n<div class=\"cta-section flex-1 flex items-center justify-between px-10 relative\">\r\n<div class=\"cta-glow\"><\/div>\r\n<!-- Left: Slogan -->\r\n<div class=\"z-10 max-w-2xl\">\r\n<p class=\"text-blue-400 font-bold tracking-wider text-sm mb-2 uppercase\">Call to Action<\/p>\r\n<h2 class=\"text-4xl font-black text-white mb-2 leading-tight\">\r\n \u643a\u624b\u5171\u5efa\u667a\u80fd\u9632\u707e\u7f51\u7edc<br\/>\r\n<span class=\"text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-teal-300\">\u5b88\u62a4\u751f\u547d\u5b89\u5168\u6bcf\u4e00\u523b<\/span>\r\n<\/h2>\r\n<p class=\"text-gray-400 text-sm mt-2\">\u671f\u5f85\u4e0e\u60a8\u5408\u4f5c\uff0c\u5171\u540c\u63a8\u8fdb\u56fd\u5bb6\u81ea\u7136\u707e\u5bb3\u9632\u6cbb\u4f53\u7cfb\u548c\u9632\u6cbb\u80fd\u529b\u73b0\u4ee3\u5316\u3002<\/p>\r\n<\/div>\r\n<!-- Right: Contact Info -->\r\n<div class=\"z-10 flex items-center space-x-8\">\r\n<div class=\"flex flex-col space-y-3\">\r\n<div class=\"contact-item\">\r\n<div class=\"w-8 h-8 rounded-full bg-blue-500\/20 flex items-center justify-center mr-3 border border-blue-500\/30\">\r\n<i class=\"fa-solid fa-phone text-blue-400 text-sm\"><\/i>\r\n<\/div>\r\n<div>\r\n<p class=\"text-gray-400 text-xs\">24h \u670d\u52a1\u70ed\u7ebf<\/p>\r\n<p class=\"text-white font-bold font-mono\">400-888-XXXX<\/p>\r\n<\/div>\r\n<\/div>\r\n<div class=\"contact-item\">\r\n<div class=\"w-8 h-8 rounded-full bg-blue-500\/20 flex items-center justify-center mr-3 border border-blue-500\/30\">\r\n<i class=\"fa-solid fa-envelope text-blue-400 text-sm\"><\/i>\r\n<\/div>\r\n<div>\r\n<p class=\"text-gray-400 text-xs\">\u5546\u52a1\u5408\u4f5c\u90ae\u7bb1<\/p>\r\n<p class=\"text-white font-bold font-mono\">bd@company.com<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"flex flex-col items-center\">\r\n<div class=\"qr-placeholder flex items-center justify-center\">\r\n<i class=\"fa-solid fa-qrcode text-4xl text-gray-800\"><\/i>\r\n<\/div>\r\n<p class=\"text-gray-400 text-[10px] mt-2 text-center\">\u626b\u7801\u83b7\u53d6\u8be6\u7ec6\u65b9\u6848<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u76ee\u5f55 \u76ee\u5f55 | \u667a\u80fd\u5e94\u6025 \u00b7 \u5b88\u62a4\u672a\u6765 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-900","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bvsc.top\/index.php\/wp-json\/wp\/v2\/pages\/900","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bvsc.top\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.bvsc.top\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.bvsc.top\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bvsc.top\/index.php\/wp-json\/wp\/v2\/comments?post=900"}],"version-history":[{"count":60,"href":"https:\/\/www.bvsc.top\/index.php\/wp-json\/wp\/v2\/pages\/900\/revisions"}],"predecessor-version":[{"id":1018,"href":"https:\/\/www.bvsc.top\/index.php\/wp-json\/wp\/v2\/pages\/900\/revisions\/1018"}],"wp:attachment":[{"href":"https:\/\/www.bvsc.top\/index.php\/wp-json\/wp\/v2\/media?parent=900"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}