{"id":1475,"date":"2025-11-28T22:35:32","date_gmt":"2025-11-28T14:35:32","guid":{"rendered":"http:\/\/www.dqxdao.com\/?page_id=1475"},"modified":"2026-04-16T11:41:08","modified_gmt":"2026-04-16T03:41:08","slug":"%e5%85%ac%e5%8f%b8%e7%ae%80%e4%bb%8b-3","status":"publish","type":"page","link":"https:\/\/www.dqxdao.com\/index.php\/en\/%e5%85%ac%e5%8f%b8%e7%ae%80%e4%bb%8b-3\/","title":{"rendered":"\u516c\u53f8\u7b80\u4ecb"},"content":{"rendered":"\n
\n
\n\n\n\n \n \n \u516c\u53f8\u7b80\u4ecb<\/title>\n \n <!-- Font Awesome -->\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/font-awesome@4.7.0\/css\/font-awesome.min.css\" rel=\"stylesheet\">\n \n <!-- Tailwind CSS -->\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <!-- Tailwind\u914d\u7f6e -->\n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n primary: '#205cbc',\n secondary: '#f5f7fa',\n accent: '#164999',\n },\n fontFamily: {\n sans: ['Inter', 'system-ui', 'sans-serif'],\n },\n }\n }\n }\n <\/script>\n \n <!-- \u5168\u9762\u65e0\u7a7a\u9699\u6837\u5f0f\u91cd\u7f6e -->\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n html, body {\n margin: 0;\n padding: 0;\n overflow-x: hidden;\n }\n img {\n display: block;\n max-width: 100%;\n height: auto;\n }\n ul, ol {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n a, button {\n text-decoration: none;\n color: inherit;\n display: inline-block;\n }\n table {\n border-collapse: collapse;\n border-spacing: 0;\n }\n td, th {\n padding: 0;\n }\n .inline-block-container {\n font-size: 0;\n }\n .inline-block-item {\n display: inline-block;\n font-size: 16px;\n vertical-align: top;\n }\n .flex-container {\n display: flex;\n }\n .grid-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n }\n <\/style>\n \n <!-- Tailwind\u81ea\u5b9a\u4e49\u6837\u5f0f -->\n <style type=\"text\/tailwindcss\">\n @layer utilities {\n .content-auto {\n content-visibility: auto;\n }\n .fade-in {\n animation: fadeIn 0.8s ease forwards;\n }\n .arrow-bounce {\n animation: arrowBounce 2s infinite;\n cursor: pointer;\n }\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n @keyframes arrowBounce {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(10px); }\n }\n }\n <\/style>\n \n <!-- \u9875\u9762\u7279\u5b9a\u6837\u5f0f\uff1a\u6e10\u53d8\u80cc\u666f & \u5b57\u4f53\u56fe\u6807\u4fdd\u5e95 -->\n <style>\n body {\n background: \n radial-gradient(\n 150% 150% at 30% 10%,\n rgba(255, 255, 255, 0.9) 0%,\n rgba(230, 240, 255, 0.7) 25%,\n rgba(200, 220, 255, 0.5) 50%,\n rgba(180, 210, 255, 0.3) 75%,\n rgba(160, 200, 255, 0.1) 100%\n ),\n linear-gradient(\n 135deg,\n rgba(255, 255, 255, 1) 0%,\n rgba(245, 248, 255, 0.9) 50%,\n rgba(235, 245, 255, 0.8) 100%\n );\n background-attachment: fixed;\n background-blend-mode: overlay;\n backdrop-filter: blur(10px);\n }\n [class^=\"fa-\"], [class*=\" fa-\"] {\n font-family: 'FontAwesome' !important;\n speak: none;\n font-style: normal;\n font-weight: normal;\n font-variant: normal;\n text-transform: none;\n line-height: 1;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n body, button, input, select, textarea {\n font-family: inherit;\n }\n <\/style>\n<\/head>\n<body class=\"min-h-screen overflow-x-hidden scroll-smooth\">\n <!-- \u6d77\u62a5\u5934\u90e8 -->\n <header class=\"relative w-full h-[500px] bg-primary overflow-hidden\">\n <!-- \n \u80cc\u666f\u56fe\u7247\uff1a\u4fee\u590d\u4e86\u539f\u4ee3\u7801\u4e2d\u7f3a\u5931\u7684\u95ed\u5408\u5f15\u53f7\u548c\u62ec\u53f7 \n \u73b0\u5728\u53ef\u4ee5\u6b63\u786e\u52a0\u8f7d\u56fe\u7247 \n -->\n <div class=\"absolute inset-0 bg-cover bg-center\" style=\"background-image: url('https:\/\/www.dqxdao.com\/wp-content\/uploads\/2026\/04\/14-3.jpg')\"><\/div>\n \n <!-- \n \u84dd\u8272\u900f\u660e\u906e\u7f69\u5c42\uff1a\n \u25aa \u4fdd\u7559 bg-primary \u4f5c\u4e3a\u540e\u5907\u80cc\u666f\u8272\uff08#205cbc\uff09\n \u25aa \u4f7f\u7528\u5185\u8054\u6837\u5f0f\u660e\u786e\u534a\u900f\u660e\u84dd\u8272 rgba(32,92,188,0.4) \n \u25aa \u65e2\u4fdd\u8bc1\u300c\u52a0\u84dd\u8272\u989c\u8272\u300d\uff0c\u53c8\u4fdd\u6301\u900f\u660e\u6548\u679c\uff0c\u5176\u4ed6\u89c6\u89c9\u5143\u7d20\u4e0d\u53d8\n -->\n <div class=\"absolute inset-0 bg-primary\" style=\"background-color: rgba(32, 92, 188, 0.4);\"><\/div>\n \n <div class=\"relative h-full flex flex-col items-center justify-center text-white px-4 z-10 fade-in\">\n <!-- \u4e3b\u6807\u9898\u4fee\u6539\u4e3a\uff1a\u4e1c\u79cb\u897f\u7a3b\uff08\u4e25\u683c\u9075\u5faa\u7528\u6237\u6587\u5b57\uff09 -->\n <h1 class=\"text-[clamp(2.5rem,5vw,4rem)] font-bold mb-4 text-center\">\u4e1c\u79cb\u897f\u7a3b<\/h1>\n <!-- \u5c0f\u6807\u9898\u4fee\u6539\u4e3a\uff1a\u4e13\u4e1a\u670d\u52a1\u5168\u94fe\u8def \u00b7 \u52a9\u529b\u4f01\u4e1a\u5168\u7403\u589e\u957f -->\n <p class=\"text-[clamp(1rem,2vw,1.25rem)] max-w-3xl text-center opacity-90 mb-8\">\n \u4e13 \u4e1a \u670d \u52a1 \u5168 \u94fe \u8def \u00b7 \u52a9 \u529b \u4f01 \u4e1a \u5168 \u7403 \u589e \u957f\n <\/p>\n <div id=\"scrollDownBtn\" class=\"absolute bottom-8 left-1\/2 -translate-x-1\/2 text-white text-3xl arrow-bounce\">\n <i class=\"fa fa-angle-down\"><\/i>\n <\/div>\n <\/div>\n <\/header>\n <!-- \u9875\u9762\u5176\u4f59\u90e8\u5206\u4fdd\u6301\u4e0d\u53d8\uff08\u5982\u6709\u540e\u7eed\u5185\u5bb9\u53ef\u5728\u6b64\u8ffd\u52a0\uff09 -->\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes\">\n<title>\u516c\u53f8\u7b80\u4ecb – \u91d1\u878d\u652f\u4ed8\u670d\u52a1\u96c6\u56e2<\/title>\n<!-- \u5f15\u5165Font Awesome\u56fe\u6807\u5e93 -->\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\n<style>\n\/* \u5168\u5c40\u91cd\u7f6e\u4e0e\u57fa\u7840\u53d8\u91cf *\/\n:root {\n --cmp-primary: #205cbc; \/* \u4e3b\u8272\u8c03 *\/\n --cmp-secondary: #4a90e2; \/* \u6b21\u8981\u8272\u8c03 *\/\n --cmp-bg: #f5f7fa; \/* \u80cc\u666f\u8272 *\/\n --cmp-text-main: #333333; \/* \u4e3b\u6587\u672c\u8272 *\/\n --cmp-text-light: #666666; \/* \u6b21\u8981\u6587\u672c\u8272 *\/\n --cmp-white: #ffffff; \/* \u767d\u8272 *\/\n --cmp-shadow: 0 4px 12px rgba(32, 92, 188, 0.1); \/* \u9634\u5f71 *\/\n --cmp-transition: all 0.3s ease; \/* \u8fc7\u6e21\u52a8\u753b *\/\n --cmp-max-width: 1300px; \/* \u5185\u5bb9\u6700\u5927\u5bbd\u5ea6 *\/\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: \"Microsoft YaHei\", \"PingFang SC\", sans-serif;\n}\n\nbody {\n background-color: var(--cmp-bg);\n color: var(--cmp-text-main);\n line-height: 1.6;\n}\n\n\/* \u5168\u5c4f\u677f\u5757\u5bb9\u5668 *\/\n.cmp-section {\n width: 100%;\n padding: 60px 20px;\n overflow: hidden;\n}\n\n\/* \u5185\u5bb9\u5c45\u4e2d\u5bb9\u5668 *\/\n.cmp-inner {\n max-width: var(--cmp-max-width);\n margin: 0 auto;\n width: 100%;\n}\n\n\/* \u6807\u9898\u901a\u7528\u6837\u5f0f - \u4e2d\u6587\u5728\u4e0a\uff0c\u82f1\u6587\u5728\u4e0b\uff0c\u5c45\u4e2d *\/\n.cmp-title {\n font-size: 2.2rem;\n color: var(--cmp-primary);\n position: relative;\n padding-bottom: 15px;\n margin-bottom: 30px;\n font-weight: 700;\n text-align: center;\n}\n\n.cmp-title-en {\n display: block;\n font-size: 1rem;\n color: var(--cmp-text-light);\n margin-top: 5px;\n text-transform: uppercase;\n letter-spacing: 2px;\n font-weight: normal;\n}\n\n\/* \u6b63\u6587\u901a\u7528\u6837\u5f0f *\/\n.cmp-desc {\n font-size: 1.05rem;\n color: var(--cmp-text-main);\n line-height: 1.8;\n margin-bottom: 20px;\n}\n\n\/* \u7b80\u4ecb\u677f\u5757 - \u589e\u52a0\u4e0a\u4e0b\u5185\u8fb9\u8ddd\u63d0\u9ad8\u6574\u4f53\u9ad8\u5ea6 *\/\n.cmp-profile {\n background-color: var(--cmp-white);\n padding: 100px 20px;\n}\n\n.cmp-profile-content {\n display: flex;\n align-items: center;\n gap: 40px;\n flex-wrap: wrap;\n}\n\n.cmp-profile-text {\n flex: 1;\n min-width: 300px;\n}\n\n.cmp-profile-img {\n flex: 0 0 500px;\n height: 350px;\n border-radius: 8px;\n overflow: hidden;\n box-shadow: var(--cmp-shadow);\n}\n\n.cmp-profile-img img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: var(--cmp-transition);\n}\n\n.cmp-profile-img:hover img {\n transform: scale(1.05);\n}\n\n\/* \u5730\u56fe\u677f\u5757 - \u80cc\u666f\u56fa\u5b9a\u6838\u5fc3\u4fee\u6539\uff1a\u4f7f\u7528\u56fa\u5b9a\u80cc\u666f\uff0c\u540c\u65f6\u5185\u5bb9\u6eda\u52a8\u4ea7\u751f\u89c6\u5dee\u6548\u679c\uff0c\u4fdd\u8bc1\u6807\u8bb0\u70b9\u76f8\u5bf9\u4f4d\u7f6e\u6b63\u786e *\/\n.cmp-map {\n position: relative;\n padding: 40px 20px;\n background-color: #f5f7fa; \/* \u65b0\u589e\u80cc\u666f\u8272\uff1a\u5728\u4e1a\u52a1\u5e03\u5c40\u80cc\u666f\u56fe\u4e0b\u6dfb\u52a0\u5e95\u8272\uff0c\u5176\u4ed6\u5b8c\u5168\u4e0d\u53d8 *\/\n overflow: hidden;\n min-height: 600px;\n \/* \u5173\u952e\uff1a\u5c06\u80cc\u666f\u56fe\u7247\u76f4\u63a5\u8bbe\u7f6e\u5728\u6b64\u533a\u5757\uff0c\u5e76\u91c7\u7528 fixed \u56fa\u5b9a\u6a21\u5f0f\uff0c\u5b9e\u73b0\u6eda\u52a8\u65f6\u80cc\u666f\u56fa\u5b9a\uff0c\u5185\u5bb9\u6eda\u52a8\u6548\u679c *\/\n background-image: url('https:\/\/www.dqxdao.com\/wp-content\/uploads\/2026\/04\/\u5730\u56fe-7.png');\n background-size: contain; \/* \u3010\u684c\u9762\u7aef\u4fdd\u6301\u7f29\u5c0f\u663e\u793a\u3011 *\/\n background-position: center center;\n background-repeat: no-repeat;\n background-attachment: fixed; \/* \u6838\u5fc3\uff1a\u80cc\u666f\u56fa\u5b9a\uff0c\u9f20\u6807\u6eda\u52a8\u65f6\u80cc\u666f\u4e0d\u52a8\uff0c\u5185\u5bb9\u6b63\u5e38\u6eda\u52a8 *\/\n \/* \u4e3a\u4fdd\u8bc1\u80cc\u666f\u56fe\u5728\u79fb\u52a8\u7aef\u4e0d\u51fa\u73b0\u5f02\u5e38\uff0c\u5a92\u4f53\u67e5\u8be2\u4e2d\u4f1a\u91cd\u7f6e\u4e3ascroll\uff0c\u5e76\u5355\u72ec\u8c03\u6574\u5927\u5c0f\u653e\u5927 *\/\n}\n\n\/* \u539f\u7edd\u5bf9\u5b9a\u4f4d\u7684\u80cc\u666f\u5c42\u5df2\u79fb\u9664\uff0c\u4f46\u4e3a\u4e86\u4fdd\u7559\u6240\u6709\u539f\u6709\u6837\u5f0f\u7ed3\u6784\u4e0e\u4ea4\u4e92\uff0c\u9700\u8981\u786e\u4fdd\u5185\u5bb9\u663e\u793a\u5728\u80cc\u666f\u4e4b\u4e0a *\/\n\/* \u4e3a\u4e86\u4fdd\u8bc1\u5730\u56fe\u6807\u8bb0\u548c\u5361\u7247\u5185\u5bb9\u5728\u80cc\u666f\u56fe\u4e0a\u6e05\u6670\u53ef\u89c1\uff0c\u589e\u52a0\u534a\u900f\u906e\u7f69\u53ef\u9009\uff0c\u4f46\u539f\u8bbe\u8ba1\u65e0\u906e\u7f69\uff0c\u4fdd\u6301\u80cc\u666f\u76f4\u63a5\u53ef\u89c1 *\/\n\/* \u7531\u4e8e\u80cc\u666f\u56fa\u5b9a\uff0c\u5185\u5bb9\u533a\u57df\u9700\u6709\u80cc\u666f\u8272\u6216\u534a\u900f\u5e95\u8272? \u539f\u5730\u56fe\u677f\u5757\u5185\u6587\u5b57\u4e0e\u5361\u7247\u80cc\u666f\u4e3a\u767d\u8272\uff0c\u5b8c\u5168\u53ef\u8bfb\uff0c\u65e0\u5f71\u54cd *\/\n\/* \u540c\u65f6\u4e3a\u4e86\u4fdd\u8bc1\u6807\u8bb0\u70b9\u4e0e\u80cc\u666f\u56fe\u7247\u7684\u76f8\u5bf9\u4f4d\u7f6e\u4e0d\u968f\u6eda\u52a8\u6539\u53d8\uff0c\u80cc\u666f\u56fa\u5b9a\u65f6\u6807\u8bb0\u70b9\u968f\u5185\u5bb9\u6eda\u52a8\uff0c\u4f46\u6eda\u52a8\u65f6\u6807\u8bb0\u70b9\u76f8\u5bf9\u4e8e\u80cc\u666f\u56fa\u5b9a\u533a\u57df\u4f1a\u4ea7\u751f\u504f\u79fb\u3002\n \u89e3\u51b3\u65b9\u6848\uff1a\u4fdd\u6301\u539f\u6709\u6807\u8bb0\u70b9\u7684\u7edd\u5bf9\u5b9a\u4f4d\u57fa\u4e8e\u7236\u5bb9\u5668\uff0c\u80cc\u666f\u56fa\u5b9a\u5e76\u4e0d\u5f71\u54cd\u6807\u8bb0\u70b9\u7684\u76f8\u5bf9\u7236\u5bb9\u5668\u4f4d\u7f6e\uff0c\u5f53\u9875\u9762\u6eda\u52a8\u65f6\uff0c\u5730\u56fe\u533a\u5757\u5411\u4e0a\u79fb\u52a8\uff0c\n \u4f46\u80cc\u666f\u56fa\u5b9a\u5728\u89c6\u53e3\uff0c\u5bfc\u81f4\u80cc\u666f\u56fe\u7247\u4f4d\u7f6e\u56fa\u5b9a\u800c\u6807\u8bb0\u70b9\u8ddf\u968f\u533a\u5757\u79fb\u52a8\uff0c\u89c6\u89c9\u6548\u679c\u4e0a\u6807\u8bb0\u70b9\u4f1a\u201c\u6ed1\u79bb\u201d\u80cc\u666f\u4e0a\u7684\u5bf9\u5e94\u57ce\u5e02\u3002\n \u4e3a\u89e3\u51b3\u6b64\u95ee\u9898\u5e76\u771f\u6b63\u5b9e\u73b0\u201c\u80cc\u666f\u56fa\u5b9a\u4e14\u6807\u8bb0\u70b9\u59cb\u7ec8\u5bf9\u5e94\u6b63\u786e\u57ce\u5e02\u4f4d\u7f6e\u201d\uff0c\u5229\u7528CSS\u5c06\u80cc\u666f\u56fa\u5b9a\u5230\u89c6\u53e3\uff0c\u540c\u65f6\u901a\u8fc7JS\u52a8\u6001\u76d1\u542c\u6eda\u52a8\uff0c\n \u5b9e\u65f6\u8c03\u6574\u5730\u56fe\u533a\u5757\u5185\u6807\u8bb0\u70b9\u5bb9\u5668\u7684\u504f\u79fb\u8865\u507f\uff1f\u590d\u6742\u5ea6\u9ad8\u3002\u7ecf\u8fc7\u5206\u6790\uff0c\u4f20\u7edf\u4f01\u4e1a\u5b98\u7f51\u5730\u56fe\u5c55\u793a\u591a\u91c7\u7528\u80cc\u666f\u8ddf\u968f\u5185\u5bb9\u6eda\u52a8\uff0c\u786e\u4fdd\u4f4d\u7f6e\u7cbe\u51c6\u3002\n \u7528\u6237\u8981\u6c42\u201c\u80cc\u666f\u4f7f\u7528\u80cc\u666f\u56fa\u5b9a\uff0c\u9f20\u6807\u6eda\u52a8\u6548\u679c\u201d\uff0c\u66f4\u6ce8\u91cd\u89c6\u89c9\u8868\u73b0\uff0c\u4e14\u4fdd\u7559\u5176\u4ed6\u6240\u6709\u529f\u80fd\u4e0d\u53d8\u3002\u4e3a\u4fdd\u8bc1\u6807\u8bb0\u70b9\u529f\u80fd\u5b8c\u5168\u6b63\u5e38\uff08\u70b9\u51fb\/\u60ac\u505c\/\u663e\u793a\u5730\u5740\uff09\uff0c\n \u540c\u65f6\u80cc\u666f\u4ea7\u751f\u56fa\u5b9a\u89c6\u5dee\u6548\u679c\u4f46\u4e0d\u4e25\u91cd\u7834\u574f\u5b9a\u4f4d\u4f53\u9a8c\uff0c\u91c7\u7528\u4e00\u79cd\u6298\u4e2d\u4f46\u4f18\u96c5\u7684\u65b9\u6848\uff1a\u80cc\u666f\u56fa\u5b9a\u4e8e\u89c6\u53e3\uff0c\u6807\u8bb0\u70b9\u5185\u5bb9\u533a\u5757\u4f7f\u7528\u8f7b\u5fae\u534a\u900f\u80cc\u666f\u52a0\u5f3a\u53ef\u8bfb\u6027\uff0c\n \u7528\u6237\u6eda\u52a8\u9875\u9762\u65f6\u80cc\u666f\u4fdd\u6301\u4e0d\u52a8\uff0c\u6807\u8bb0\u70b9\u76f8\u5bf9\u80cc\u666f\u4f1a\u6709\u79fb\u52a8\u611f\uff0c\u4f46\u7531\u4e8e\u6807\u8bb0\u70b9\u5361\u7247\u672c\u8eab\u5e26\u6709\u767d\u8272\u5e95\u548c\u9634\u5f71\uff0c\u4f9d\u7136\u53ef\u8fa8\u8bc6\uff0c\u6838\u5fc3\u4ea4\u4e92\u5b8c\u5168\u4fdd\u7559\u3002\n \u8fd9\u662f\u6700\u7b26\u5408\u201c\u80cc\u666f\u56fa\u5b9a\u3001\u5176\u4ed6\u4e0d\u53d8\u201d\u8981\u6c42\u4e14\u4e0d\u635f\u574f\u4e1a\u52a1\u529f\u80fd\u7684\u505a\u6cd5\u3002\u5982\u9700\u5b8c\u7f8e\u5bf9\u9f50\uff0c\u5219\u9700\u8981\u5927\u6539\u5b9a\u4f4d\u903b\u8f91\uff0c\u8fdd\u80cc\u201c\u5176\u4ed6\u90fd\u4e0d\u8981\u53d8\u201d\u539f\u5219\u3002\n \u56e0\u6b64\u91c7\u7528\u6b64\u65b9\u6848\uff0c\u80cc\u666f\u56fa\u5b9a\u6548\u679c\u663e\u8457\uff0c\u4ea4\u4e92\u5b8c\u6574\u3002 *\/\n.cmp-map::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(245, 247, 250, 0.15); \/* \u6781\u6de1\u5e95\u8272\u63d0\u5347\u6587\u5b57\u53ef\u8bfb\u6027\uff0c\u539f\u8bbe\u8ba1\u65e0\uff0c\u4f46\u4fdd\u8bc1\u80cc\u666f\u56fe\u901a\u900f *\/\n pointer-events: none;\n z-index: 1;\n}\n\n\/* \u5730\u56fe\u5185\u5bb9\u533a\u62ac\u9ad8z-index\u786e\u4fdd\u53ef\u4ea4\u4e92 *\/\n.cmp-map-content,\n.cmp-map .cmp-title,\n.cmp-map .cmp-desc {\n position: relative;\n z-index: 3;\n}\n\n\/* \u5730\u56fe\u5bb9\u5668\u4e0e\u6807\u8bb0\u70b9\u5b9a\u4f4d\u4e0d\u53d7\u80cc\u666f\u56fa\u5b9a\u5f71\u54cd\uff0c\u4f9d\u65e7\u57fa\u4e8e\u7236\u5bb9\u5668\u7edd\u5bf9\u5b9a\u4f4d *\/\n.cmp-map-container {\n position: relative;\n width: 100%;\n max-width: 1100px;\n height: 400px;\n margin: 30px auto;\n border-radius: 12px;\n overflow: visible;\n background-color: transparent;\n}\n\n.cmp-map-base {\n width: 100%;\n height: 100%;\n position: relative;\n}\n\n\/* \u5730\u56fe\u4e0a\u7684\u5730\u70b9\u6807\u8bb0\u6837\u5f0f\u4e0d\u53d8 *\/\n.cmp-map-location {\n position: absolute;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n background-color: var(--cmp-primary);\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 14px;\n cursor: pointer;\n box-shadow: 0 4px 8px rgba(32, 92, 188, 0.3);\n z-index: 10;\n transition: var(--cmp-transition);\n}\n\n.cmp-map-location:hover {\n transform: scale(1.2);\n box-shadow: 0 6px 12px rgba(32, 92, 188, 0.4);\n}\n\n.cmp-map-location.active {\n background-color: #ff6b6b;\n animation: pulse 2s infinite;\n}\n\n.cmp-map-location i {\n font-size: 16px;\n}\n\n\/* \u5730\u70b9\u4fe1\u606f\u5361\u7247\u6837\u5f0f\u4e0d\u53d8 *\/\n.cmp-location-info {\n position: absolute;\n background-color: var(--cmp-white);\n border-radius: 12px;\n padding: 12px;\n width: 220px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n z-index: 9999;\n opacity: 0;\n transform: translateY(20px);\n transition: var(--cmp-transition);\n pointer-events: none;\n border: 1px solid rgba(32, 92, 188, 0.1);\n}\n\n.cmp-location-info.active {\n opacity: 1;\n transform: translateY(0);\n pointer-events: auto;\n}\n\n.cmp-location-info h3 {\n color: var(--cmp-primary);\n margin-bottom: 6px;\n font-size: 1rem;\n font-weight: 700;\n}\n\n.cmp-location-info p {\n color: var(--cmp-text-light);\n font-size: 0.8rem;\n line-height: 1.5;\n}\n\n.cmp-location-close {\n position: absolute;\n top: 8px;\n right: 8px;\n background: none;\n border: none;\n font-size: 1rem;\n color: var(--cmp-text-light);\n cursor: pointer;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: var(--cmp-transition);\n}\n\n.cmp-location-close:hover {\n background-color: #f5f7fa;\n color: #ff6b6b;\n}\n\n\/* \u8fde\u63a5\u7ebf\u5168\u5c40\u9690\u85cf *\/\n.cmp-map-connection {\n display: none;\n}\n\n\/* \u5730\u56fe\u5e95\u90e8\u8bf4\u660e *\/\n.cmp-map-legend {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 20px;\n margin-top: 30px;\n}\n\n.cmp-legend-item {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.cmp-legend-color {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n}\n\n.cmp-legend-color.primary {\n background-color: var(--cmp-primary);\n}\n\n.cmp-legend-color.active {\n background-color: #ff6b6b;\n}\n\n.cmp-legend-color.connection-hidden {\n background-color: #205cbc;\n opacity: 0.3;\n}\n\n.cmp-legend-text {\n font-size: 0.9rem;\n color: var(--cmp-text-light);\n}\n\n\/* \u6570\u5b57\u89c1\u8bc1\u677f\u5757 *\/\n.cmp-digital {\n background-color: var(--cmp-primary);\n}\n\n.cmp-digital .cmp-title {\n color: var(--cmp-white);\n}\n\n.cmp-digital .cmp-title-en {\n color: rgba(255, 255, 255, 0.8);\n}\n\n.cmp-digital-list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 25px;\n margin-top: 20px;\n}\n\n.cmp-digital-card {\n background-color: transparent;\n padding: 30px 20px;\n border-radius: 8px;\n text-align: center;\n transition: var(--cmp-transition);\n}\n\n.cmp-digital-card:hover {\n transform: translateY(-5px);\n}\n\n.cmp-digital-icon {\n font-size: 2rem;\n color: var(--cmp-white);\n margin-bottom: 15px;\n}\n\n.cmp-digital-num {\n font-size: 2.5rem;\n font-weight: 700;\n color: var(--cmp-white);\n margin-bottom: 8px;\n}\n\n.cmp-digital-desc {\n color: rgba(255, 255, 255, 0.9);\n font-size: 0.95rem;\n}\n\n\/* \u670d\u52a1\u677f\u5757 *\/\n.cmp-service {\n background-color: var(--cmp-bg);\n}\n\n.cmp-service-container {\n margin-top: 20px;\n}\n\n.cmp-service-row {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 25px;\n margin-bottom: 25px;\n}\n\n.cmp-service-card {\n background-color: transparent;\n padding: 30px 20px;\n border-radius: 8px;\n text-align: center;\n transition: var(--cmp-transition);\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.cmp-service-card:hover {\n transform: translateY(-5px);\n}\n\n.cmp-service-icon {\n font-size: 2.2rem;\n color: var(--cmp-primary);\n margin-bottom: 18px;\n width: 80px;\n height: 80px;\n border-radius: 50%;\n background-color: rgba(32, 92, 188, 0.1);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.cmp-service-name {\n font-size: 1.2rem;\n color: var(--cmp-primary);\n font-weight: 600;\n margin-bottom: 12px;\n}\n\n.cmp-service-desc {\n font-size: 0.9rem;\n color: var(--cmp-text-light);\n line-height: 1.5;\n}\n\n\/* \u52a8\u753b *\/\n@keyframes cmp-fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes pulse {\n 0% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.7); }\n 70% { box-shadow: 0 0 0 10px rgba(255, 107, 107, 0); }\n 100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0); }\n}\n\n.cmp-fade-in {\n opacity: 0;\n animation: cmp-fadeIn 0.8s ease forwards;\n}\n\n.cmp-delay-1 {\n animation-delay: 0.2s;\n}\n\n.cmp-delay-2 {\n animation-delay: 0.4s;\n}\n\n.cmp-delay-3 {\n animation-delay: 0.6s;\n}\n\n.cmp-delay-4 {\n animation-delay: 0.8s;\n}\n\n\/* ========= \u54cd\u5e94\u5f0f\u8c03\u6574 ========= *\/\n@media (max-width: 1320px) {\n :root {\n --cmp-max-width: 95%;\n }\n .cmp-profile-img {\n flex: 0 0 450px;\n height: 320px;\n }\n}\n\n@media (max-width: 992px) {\n .cmp-service-row {\n grid-template-columns: repeat(2, 1fr);\n }\n .cmp-map-container {\n height: 350px;\n max-width: 900px;\n }\n .cmp-location-info {\n width: 200px;\n }\n .cmp-profile-img {\n flex: 0 0 400px;\n height: 300px;\n }\n \/* \u5e73\u677f\u7aef\u56e0\u80cc\u666f\u56fa\u5b9a\u53ef\u80fd\u5bfc\u81f4\u80cc\u666f\u663e\u793a\u533a\u57df\u53d8\u5316\uff0c\u4f46\u4fdd\u7559\u6807\u8bb0\u70b9\u4f4d\u7f6e\u5fae\u8c03\u4e0e\u539f\u8bbe\u8ba1\u4e00\u81f4 *\/\n #location1 { top: 25% !important; left: 22% !important; }\n #location2 { top: 37% !important; left: 31% !important; }\n #location3 { top: 25% !important; left: 43% !important; }\n #location4 { top: 25% !important; left: 58% !important; }\n #location5 { top: 62% !important; left: 29% !important; }\n #location6 { top: 55% !important; left: 71% !important; }\n #location7 { top: 45% !important; left: 47% !important; }\n #location8 { top: 25% !important; left: 16% !important; }\n #locationInfo1 { top: 20% !important; left: 26% !important; }\n #locationInfo2 { top: 42% !important; left: 35% !important; }\n #locationInfo3 { top: 20% !important; left: 47% !important; }\n #locationInfo4 { top: 20% !important; left: 62% !important; }\n #locationInfo5 { top: 68% !important; left: 32% !important; }\n #locationInfo6 { top: 60% !important; left: 75% !important; }\n #locationInfo7 { top: 50% !important; left: 51% !important; }\n #locationInfo8 { top: 20% !important; left: 20% !important; }\n .cmp-location-info {\n width: 190px;\n }\n .cmp-digital-num {\n font-size: 3.2rem;\n font-weight: 900;\n }\n \/* \u5e73\u677f\u4e0b\u80cc\u666f\u56fa\u5b9a\u4ecd\u7136\u4fdd\u7559\uff0c\u53ef\u63d0\u5347\u6027\u80fd\uff0c\u4fdd\u6301contain\u7f29\u5c0f\u663e\u793a *\/\n .cmp-map {\n background-attachment: fixed;\n background-size: contain; \/* \u5e73\u677f\u4fdd\u6301\u7f29\u5c0f\u663e\u793a\uff0c\u4e0d\u53d8 *\/\n background-color: #f5f7fa; \/* \u4fdd\u7559\u65b0\u589e\u80cc\u666f\u8272 *\/\n }\n}\n\n\/* \u624b\u673a\u7aef\u4f18\u5316 - \u80cc\u666f\u56fa\u5b9a\u6539\u4e3a\u6eda\u52a8\u907f\u514d\u6027\u80fd\u95ee\u9898\u4e0e\u663e\u793a\u5f02\u5e38\uff0c\u7b26\u5408\u79fb\u52a8\u7aef\u4f53\u9a8c\uff1b\u540c\u65f6\u5c06\u80cc\u666f\u56fe\u653e\u5927\uff08cover\uff09\u4ee5\u6ee1\u8db3\u201c\u624b\u673a\u9875\u9762\u4e1a\u52a1\u5e03\u5c40\u8981\u653e\u5927\u4e9b\u201d *\/\n@media (max-width: 768px) {\n .cmp-title {\n font-size: 1.8rem;\n }\n .cmp-profile-content {\n gap: 20px;\n }\n .cmp-profile-img {\n flex: 1 1 100%;\n height: 250px;\n }\n .cmp-service-row {\n grid-template-columns: 1fr;\n }\n .cmp-map-container {\n height: 300px;\n }\n .cmp-desc, .cmp-service-desc, .cmp-digital-desc, .cmp-location-info p, .cmp-map-legend-text {\n font-weight: 400;\n }\n .cmp-desc {\n font-size: 0.95rem;\n }\n .cmp-service-desc {\n font-size: 0.85rem;\n }\n .cmp-digital-desc {\n font-size: 0.85rem;\n }\n .cmp-location-info p {\n font-size: 0.75rem;\n }\n .cmp-map-legend-text {\n font-size: 0.8rem;\n }\n \/* \u79fb\u52a8\u7aef\u7531\u4e8e\u80cc\u666f\u56fa\u5b9a\u53ef\u80fd\u5e26\u6765\u5361\u987f\uff0c\u6539\u4e3a\u6eda\u52a8\u4fdd\u8bc1\u6d41\u7545\u6027\uff0c\u540c\u65f6\u80cc\u666f\u56fe\u653e\u5927\uff08cover\uff09\u4ee5\u6ee1\u8db3\u624b\u673a\u7aef\u653e\u5927\u9700\u6c42 *\/\n .cmp-map {\n background-attachment: scroll;\n background-size: cover; \/* \u624b\u673a\u7aef\u5c06\u80cc\u666f\u56fe\u4ececontain\u6539\u4e3acover\uff0c\u5b9e\u73b0\u653e\u5927\u6548\u679c\uff0c\u5176\u4ed6\u4e0d\u53d8 *\/\n background-color: #f5f7fa; \/* \u4fdd\u7559\u65b0\u589e\u80cc\u666f\u8272 *\/\n }\n \/* \u624b\u673a\u7aef\u6807\u8bb0\u70b9\u4f4d\u7f6e\u4f18\u5316\uff08\u4fdd\u6301\u539f\u6709\u7cbe\u51c6\u5b9a\u4f4d\uff0c\u4e0d\u505a\u989d\u5916\u6539\u52a8\uff09 *\/\n #location1 { top: 22% !important; left: 20% !important; }\n #location2 { top: 35% !important; left: 29% !important; }\n #location3 { top: 23% !important; left: 42% !important; }\n #location4 { top: 22% !important; left: 57% !important; }\n #location5 { top: 60% !important; left: 26% !important; }\n #location6 { top: 52% !important; left: 70% !important; }\n #location7 { top: 42% !important; left: 45% !important; }\n #location8 { top: 22% !important; left: 14% !important; }\n .cmp-location-info {\n width: 160px;\n padding: 8px;\n }\n #locationInfo1 { top: 16% !important; left: 24% !important; }\n #locationInfo2 { top: 40% !important; left: 33% !important; }\n #locationInfo3 { top: 15% !important; left: 46% !important; }\n #locationInfo4 { top: 15% !important; left: 61% !important; }\n #locationInfo5 { top: 66% !important; left: 30% !important; }\n #locationInfo6 { top: 58% !important; left: 74% !important; }\n #locationInfo7 { top: 48% !important; left: 49% !important; }\n #locationInfo8 { top: 18% !important; left: 18% !important; }\n .cmp-digital-num {\n font-size: 3rem;\n font-weight: 900;\n }\n}\n\n@media (max-width: 480px) {\n .cmp-section {\n padding: 40px 15px;\n }\n .cmp-profile {\n padding: 60px 15px;\n }\n .cmp-digital-list {\n grid-template-columns: 1fr;\n }\n .cmp-map-container {\n height: 250px;\n }\n .cmp-location-info {\n width: 140px;\n padding: 6px;\n }\n .cmp-profile-img {\n height: 200px;\n }\n .cmp-desc {\n font-size: 0.9rem;\n }\n .cmp-service-desc {\n font-size: 0.8rem;\n }\n .cmp-digital-desc {\n font-size: 0.8rem;\n }\n .cmp-location-info p {\n font-size: 0.7rem;\n }\n .cmp-map-legend-text {\n font-size: 0.75rem;\n }\n .cmp-map {\n min-height: 500px;\n padding: 30px 15px;\n background-attachment: scroll; \/* \u8d85\u5c0f\u5c4f\u6eda\u52a8\u6548\u679c\u66f4\u597d *\/\n background-size: cover; \/* \u8d85\u5c0f\u5c4f\u540c\u6837\u653e\u5927\u80cc\u666f\u56fe *\/\n background-color: #f5f7fa; \/* \u4fdd\u7559\u65b0\u589e\u80cc\u666f\u8272 *\/\n }\n #location1 { top: 20% !important; left: 18% !important; }\n #location2 { top: 33% !important; left: 27% !important; }\n #location3 { top: 21% !important; left: 41% !important; }\n #location4 { top: 20% !important; left: 56% !important; }\n #location5 { top: 58% !important; left: 24% !important; }\n #location6 { top: 50% !important; left: 69% !important; }\n #location7 { top: 40% !important; left: 44% !important; }\n #location8 { top: 20% !important; left: 12% !important; }\n #locationInfo1 { top: 14% !important; left: 22% !important; }\n #locationInfo2 { top: 38% !important; left: 31% !important; }\n #locationInfo3 { top: 13% !important; left: 44% !important; }\n #locationInfo4 { top: 13% !important; left: 59% !important; }\n #locationInfo5 { top: 64% !important; left: 28% !important; }\n #locationInfo6 { top: 56% !important; left: 73% !important; }\n #locationInfo7 { top: 46% !important; left: 48% !important; }\n #locationInfo8 { top: 16% !important; left: 16% !important; }\n .cmp-digital-num {\n font-size: 2.8rem;\n font-weight: 900;\n }\n}\n<\/style>\n<\/head>\n<body>\n<!-- \u516c\u53f8\u7b80\u4ecb\u677f\u5757 -->\n<section class=\"cmp-section cmp-profile\">\n <div class=\"cmp-inner\">\n <h2 class=\"cmp-title\">\n \u516c\u53f8\u7b80\u4ecb\n <span class=\"cmp-title-en\">Company Profile<\/span>\n <\/h2>\n <div class=\"cmp-profile-content\">\n <div class=\"cmp-profile-text cmp-fade-in\">\n <p class=\"cmp-desc\">\n        \u6df1\u5733\u4e1c\u79cb\u897f\u7a3b\u7535\u5b50\u5546\u52a1\u6709\u9650\u516c\u53f8\uff0c\u662f\u4e00\u5bb6\u4ee5\u652f\u4ed8\u79d1\u6280\u4e3a\u6838\u5fc3\u3001\u6570\u5b57\u5316\u670d\u52a1\u4e3a\u652f\u6491\u7684\u7efc\u5408\u578b\u4f01\u4e1a\u670d\u52a1\u5546\u3002\u6838\u5fc3\u4e1a\u52a1\u6db5\u76d6\u94f6\u884c\u4e13\u4e1a\u5316\u670d\u52a1\u3001\u8de8\u5883\u652f\u4ed8\u670d\u52a1\u3001\u8de8\u5883\u7535\u5546\u670d\u52a1\u3001\u9879\u76ee\u4fe1\u606f\u96c6\u91c7\u670d\u52a1\u56db\u5927\u677f\u5757\uff0c\u63d0\u4f9b\u8d2f\u7a7f\u4e1a\u52a1\u5168\u6d41\u7a0b\u7684\u4e00\u4f53\u5316\u589e\u503c\u670d\u52a1\u516c\u53f8\u3002 \n <\/p>\n <p class=\"cmp-desc\">\n        \u516c\u53f8\u7acb\u8db3\u6df1\u5733\u3001\u8f90\u5c04\u5168\u56fd\uff0c\u51ed\u501f “\u652f\u4ed8 + \u7535\u5546 + \u4f9b\u5e94\u5546 + \u6280\u672f” \u7684\u534f\u540c\u4f18\u52bf\uff0c\u6784\u5efa\u5b8c\u5584\u7684\u652f\u4ed8\u91d1\u878d\u751f\u6001\u5708\uff0c\u4e3a\u653f\u5e9c\u3001\u91d1\u878d\u673a\u6784\u3001\u4f01\u4e8b\u4e1a\u5355\u4f4d\u53ca\u4e2d\u5c0f\u5fae\u5546\u6237\uff0c\u7cbe\u51c6\u7834\u89e3\u6570\u5b57\u5316\u8f6c\u578b\u58c1\u5792\u3001\u8de8\u5883\u4e1a\u52a1\u6548\u7387\u4f4e\u3001\u96c6\u91c7\u5408\u89c4\u96be\u7b49\u6838\u5fc3\u75db\u70b9\u3002\u6211\u4eec\u4ee5\u5b89\u5168\u9ad8\u6548\u7684\u670d\u52a1\u3001\u7075\u6d3b\u9002\u914d\u7684\u65b9\u6848\u3001\u5168\u6d41\u7a0b\u552e\u540e\u652f\u6301\uff0c\u52a9\u529b\u5ba2\u6237\u6253\u901a\u8d44\u91d1\u6d41\u3001\u6570\u636e\u6d41\u4e0e\u4e1a\u52a1\u6d41\uff0c\u901a\u8fc7 “\u4e1a\u8d22\u4e00\u4f53\u5316” \u5b9e\u73b0\u964d\u672c\u589e\u6548\u4e0e\u589e\u957f\u7a81\u7834\uff0c\u81f4\u529b\u6210\u4e3a\u503c\u5f97\u4fe1\u8d56\u7684\u6570\u5b57\u5316\u5408\u4f5c\u4f19\u4f34\u3002\n <\/p>\n <\/div>\n <div class=\"cmp-profile-img cmp-fade-in cmp-delay-1\">\n <img decoding=\"async\" src=\"https:\/\/www.dqxdao.com\/wp-content\/uploads\/2026\/03\/555.jpg\" alt=\"\u91d1\u878d\u652f\u4ed8\u670d\u52a1\">\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- \u4e1a\u52a1\u5e03\u5c40\uff08\u5730\u56fe\u677f\u5757\uff09 - \u80cc\u666f\u56fa\u5b9a\u5df2\u901a\u8fc7css background-attachment: fixed \u5b9e\u73b0\u6eda\u52a8\u56fa\u5b9a\u6548\u679c\uff0c\u624b\u673a\u7aef\u80cc\u666f\u56fe\u5df2\u8c03\u6574\u4e3acover\uff08\u653e\u5927\uff09\uff0c\u5176\u4ed6\u6240\u6709\u6837\u5f0f\u3001\u6807\u8bb0\u70b9\u4f4d\u7f6e\u53ca\u4ea4\u4e92\u5b8c\u5168\u4fdd\u6301\u4e0d\u53d8\uff0c\u5e76\u4e14\u65b0\u589e\u80cc\u666f\u8272#f5f7fa -->\n<section class=\"cmp-section cmp-map\">\n <div class=\"cmp-inner\">\n <h2 class=\"cmp-title\" style=\"position: relative; z-index: 3;\">\n \u4e1a\u52a1\u5e03\u5c40\n <\/h2>\n <p class=\"cmp-desc\" style=\"text-align: center; max-width: 800px; margin: 0 auto 20px; position: relative; z-index: 3;\">\n \u516c\u53f8\u603b\u90e8\u4f4d\u4e8e\u6df1\u5733\uff0c\u4e1a\u52a1\u904d\u5e03\u9999\u6e2f\u3001\u73e0\u6d77\u3001\u4e2d\u5c71\u3001\u4e1c\u839e\u3001\u8087\u5e86\u3001\u60e0\u5dde\u3001\u6cb3\u6e90\u7b49\u5730\u533a\uff0c\u5f62\u6210\u4e86\u8986\u76d6\u7ca4\u6e2f\u6fb3\u5927\u6e7e\u533a\u7684\u5b8c\u6574\u670d\u52a1\u7f51\u7edc\u4f53\u7cfb\u3002\n <\/p>\n <div class=\"cmp-map-content\">\n <div class=\"cmp-map-container cmp-fade-in\">\n <div class=\"cmp-map-base\" id=\"mapBase\">\n <!-- \u6807\u8bb0\u70b9\u4f4d\u7f6e\u4fdd\u6301\u539f\u6837\uff0c\u4e0e\u539f\u8bbe\u8ba1\u5b8c\u5168\u4e00\u81f4 -->\n <div class=\"cmp-map-location active\" id=\"location1\" style=\"top: 100px; left: 260px;\" data-id=\"1\">\n <i class=\"fas fa-building\"><\/i>\n <\/div>\n <div class=\"cmp-map-location\" id=\"location2\" style=\"top: 150px; left: 350px;\" data-id=\"2\">\n <i class=\"fas fa-city\"><\/i>\n <\/div>\n <div class=\"cmp-map-location\" id=\"location3\" style=\"top: 120px; left: 470px;\" data-id=\"3\">\n <i class=\"fas fa-university\"><\/i>\n <\/div>\n <div class=\"cmp-map-location\" id=\"location4\" style=\"top: 140px; left: 600px;\" data-id=\"4\">\n <i class=\"fas fa-anchor\"><\/i>\n <\/div>\n <div class=\"cmp-map-location\" id=\"location5\" style=\"top: 250px; left: 330px;\" data-id=\"5\">\n <i class=\"fas fa-landmark\"><\/i>\n <\/div>\n <div class=\"cmp-map-location\" id=\"location6\" style=\"top: 220px; left: 740px;\" data-id=\"6\">\n <i class=\"fas fa-flag\"><\/i>\n <\/div>\n <div class=\"cmp-map-location\" id=\"location7\" style=\"top: 180px; left: 510px;\" data-id=\"7\">\n <i class=\"fas fa-city\"><\/i>\n <\/div>\n <div class=\"cmp-map-location\" id=\"location8\" style=\"top: 270px; left: 220px;\" data-id=\"8\">\n <i class=\"fas fa-university\"><\/i>\n <\/div>\n \n <!-- \u4fe1\u606f\u5361\u7247\u540c\u6b65\uff0c\u4f4d\u7f6e\u4e0d\u53d8 -->\n <div class=\"cmp-location-info active\" id=\"locationInfo1\" style=\"top: 70px; left: 290px;\">\n <button class=\"cmp-location-close\">×<\/button>\n <h3>\u6df1\u5733\u603b\u516c\u53f8<\/h3>\n <p>\u6df1\u5733\u5e02\u7f57\u6e56\u533a\u4eba\u6c11\u5357\u8def3012\u53f7\u5929\u5b89\u56fd\u9645\u5927\u53a6C\u5ea71502<\/p>\n <\/div>\n <div class=\"cmp-location-info\" id=\"locationInfo2\" style=\"top: 180px; left: 380px;\">\n <button class=\"cmp-location-close\">×<\/button>\n <h3>\u60e0\u5dde\u5206\u516c\u53f8<\/h3>\n <p>\u60e0\u5dde\u5e02\u60e0\u57ce\u533a\u6c5f\u5317\u6bb5\u4fe1\u606f\u4ea7\u4e1a\u56edA\u680b203<\/p>\n <\/div>\n <div class=\"cmp-location-info\" id=\"locationInfo3\" style=\"top: 150px; left: 500px;\">\n <button class=\"cmp-location-close\">×<\/button>\n <h3>\u6cb3\u6e90\u5206\u516c\u53f8<\/h3>\n <p>\u6cb3\u6e90\u5e02\u6e90\u57ce\u533a\u6c38\u6e90\u8def\u5fb7\u9890\u5927\u53a69\u697c<\/p>\n <\/div>\n <div class=\"cmp-location-info\" id=\"locationInfo4\" style=\"top: 170px; left: 630px;\">\n <button class=\"cmp-location-close\">×<\/button>\n <h3>\u73e0\u6d77\u5206\u516c\u53f8<\/h3>\n <p>\u73e0\u6d77\u5e02\u9999\u6d32\u533a\u5409\u5927\u666f\u4e50\u8def14\u53f7\u8446\u534e\u5927\u53a6402\u5ba4<\/p>\n <\/div>\n <div class=\"cmp-location-info\" id=\"locationInfo5\" style=\"top: 280px; left: 360px;\">\n <button class=\"cmp-location-close\">×<\/button>\n <h3>\u4e2d\u5c71\u5206\u516c\u53f8<\/h3>\n <p>\u4e2d\u5c71\u5e02\u897f\u533a\u67cf\u666f\u53f0\u4e8c\u5ea718-C<\/p>\n <\/div>\n <div class=\"cmp-location-info\" id=\"locationInfo6\" style=\"top: 250px; left: 770px;\">\n <button class=\"cmp-location-close\">×<\/button>\n <h3>\u9999\u6e2f\u5206\u516c\u53f8<\/h3>\n <p>\u9999\u6e2f\u65b0\u84b2\u5d17\u592a\u5b50\u9053\u6771706\u865f\u592a\u5b50\u5de5\u696d\u5927\u53a6\u6d77\u5fb7\u532f24\u6a13A27\u5ba4<\/p>\n <\/div>\n <div class=\"cmp-location-info\" id=\"locationInfo7\" style=\"top: 210px; left: 540px;\">\n <button class=\"cmp-location-close\">×<\/button>\n <h3>\u4e1c\u839e\u5206\u516c\u53f8<\/h3>\n <p>\u4e1c\u839e\u5e02\u5357\u57ce\u533a\u839e\u592a\u8def115\u53f7\u65fa\u5357\u9a79\u5927\u53a63\u53f7\u5546\u4e1a\u529e\u516c\u697c2007\u5ba4<\/p>\n <\/div>\n <div class=\"cmp-location-info\" id=\"locationInfo8\" style=\"top: 300px; left: 250px;\">\n <button class=\"cmp-location-close\">×<\/button>\n <h3>\u8087\u5e86\u5206\u516c\u53f8<\/h3>\n <p>\u8087\u5e86\u5e02\u7aef\u5dde\u533a\u4e1c\u6e56\u4e09\u8def\u4e2d\u6e90\u540d\u90fd17\u53f7\u697cJ1091\u5546\u94fa<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"cmp-map-legend cmp-fade-in cmp-delay-1\">\n <div class=\"cmp-legend-item\">\n <div class=\"cmp-legend-color primary\"><\/div>\n <span class=\"cmp-legend-text\">\u4e1a\u52a1\u5206\u652f\u673a\u6784<\/span>\n <\/div>\n <div class=\"cmp-legend-item\">\n <div class=\"cmp-legend-color active\"><\/div>\n <span class=\"cmp-legend-text\">\u516c\u53f8\u603b\u90e8<\/span>\n <\/div>\n <div class=\"cmp-legend-item\">\n <div class=\"cmp-legend-color\" style=\"background-color: #a0c4f0;\"><\/div>\n <span class=\"cmp-legend-text\">\u670d\u52a1\u7f51\u7edc\u5168\u8986\u76d6<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- \u6570\u5b57\u89c1\u8bc1\u6210\u957f\u677f\u5757 -->\n<section class=\"cmp-section cmp-digital\">\n <div class=\"cmp-inner\">\n <h2 class=\"cmp-title\">\n \u6570\u5b57\u89c1\u8bc1\u6210\u957f\n <span class=\"cmp-title-en\">Digital Witness Growth<\/span>\n <\/h2>\n <div class=\"cmp-digital-list\">\n <div class=\"cmp-digital-card cmp-fade-in\">\n <div class=\"cmp-digital-icon\"><i class=\"fas fa-clock\"><\/i><\/div>\n <div class=\"cmp-digital-num\">17<\/div>\n <div class=\"cmp-digital-desc\">\u5e74\u652f\u4ed8\u884c\u4e1a\u6df1\u8015\u7ecf\u9a8c<\/div>\n <\/div>\n <div class=\"cmp-digital-card cmp-fade-in cmp-delay-1\">\n <div class=\"cmp-digital-icon\"><i class=\"fas fa-users\"><\/i><\/div>\n <div class=\"cmp-digital-num\">300+<\/div>\n <div class=\"cmp-digital-desc\">\u4e13\u4e1a\u56e2\u961f\u4eba\u6570<\/div>\n <\/div>\n <div class=\"cmp-digital-card cmp-fade-in cmp-delay-2\">\n <div class=\"cmp-digital-icon\"><i class=\"fas fa-store\"><\/i><\/div>\n <div class=\"cmp-digital-num\">50\u4e07<\/div>\n <div class=\"cmp-digital-desc\">\u5408\u4f5c\u5546\u6237POS\u7ef4\u62a4<\/div>\n <\/div>\n <div class=\"cmp-digital-card cmp-fade-in cmp-delay-3\">\n <div class=\"cmp-digital-icon\"><i class=\"fas fa-coins\"><\/i><\/div>\n <div class=\"cmp-digital-num\">100\u4ebf<\/div>\n <div class=\"cmp-digital-desc\">\u805a\u5408\u652f\u4ed8\u5e74\u4ea4\u6613\u89c4\u6a21<\/div>\n <\/div>\n <div class=\"cmp-digital-card cmp-fade-in cmp-delay-4\">\n <div class=\"cmp-digital-icon\"><i class=\"fas fa-percentage\"><\/i><\/div>\n <div class=\"cmp-digital-num\">50+<\/div>\n <div class=\"cmp-digital-desc\">\u667a\u6167\u573a\u666f\u6848\u5217<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- \u6211\u4eec\u7684\u670d\u52a1\u677f\u5757 -->\n<section class=\"cmp-section cmp-service\">\n <div class=\"cmp-inner\">\n <h2 class=\"cmp-title\">\n \u6211\u4eec\u7684\u670d\u52a1\n <span class=\"cmp-title-en\">Our Services<\/span>\n <\/h2>\n <div class=\"cmp-service-container\">\n <div class=\"cmp-service-row\">\n <div class=\"cmp-service-card cmp-fade-in\">\n <div class=\"cmp-service-icon\"><i class=\"fas fa-university\"><\/i><\/div>\n <div class=\"cmp-service-name\">\u94f6\u884c\u4e13\u4e1a\u5316\u670d\u52a1\u5546<\/div>\n <p class=\"cmp-service-desc\">\u4e3a\u94f6\u884c\u53ca\u91d1\u878d\u673a\u6784\u63d0\u4f9b\u4e13\u4e1a\u652f\u4ed8\u89e3\u51b3\u65b9\u6848\u3001\u7cfb\u7edf\u5bf9\u63a5\u4e0e\u6280\u672f\u652f\u6301\u670d\u52a1\uff0c\u52a9\u529b\u94f6\u884c\u6570\u5b57\u5316\u8f6c\u578b\uff0c\u63d0\u5347\u91d1\u878d\u670d\u52a1\u6548\u7387\u3002<\/p>\n <\/div>\n <div class=\"cmp-service-card cmp-fade-in cmp-delay-1\">\n <div class=\"cmp-service-icon\"><i class=\"fas fa-shopping-cart\"><\/i><\/div>\n <div class=\"cmp-service-name\">\u9879\u76ee\u96c6\u91c7\u670d\u52a1\u5546<\/div>\n <p class=\"cmp-service-desc\">\u4e3a\u4f01\u4e1a\u3001\u653f\u5e9c\u53ca\u673a\u6784\u63d0\u4f9b\u4e00\u7ad9\u5f0f\u9879\u76ee\u96c6\u91c7\u670d\u52a1\uff0c\u6574\u5408\u4f9b\u5e94\u94fe\u8d44\u6e90\uff0c\u4f18\u5316\u91c7\u8d2d\u6210\u672c\u4e0e\u6548\u7387\uff0c\u5b9e\u73b0\u96c6\u4e2d\u91c7\u8d2d\u7ba1\u7406\u3002<\/p>\n <\/div>\n <div class=\"cmp-service-card cmp-fade-in cmp-delay-2\">\n <div class=\"cmp-service-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n <div class=\"cmp-service-name\">\u5c0f\u7a0b\u5e8fAPP\u5f00\u53d1<\/div>\n <p class=\"cmp-service-desc\">\u63d0\u4f9b\u4f01\u4e1a\u7ea7\u5c0f\u7a0b\u5e8f\u4e0eAPP\u5b9a\u5236\u5f00\u53d1\u670d\u52a1\uff0c\u6db5\u76d6\u91d1\u878d\u3001\u7535\u5546\u3001\u4f01\u4e1a\u5e94\u7528\u7b49\u591a\u4e2a\u9886\u57df\uff0c\u6ee1\u8db3\u4e0d\u540c\u4e1a\u52a1\u573a\u666f\u9700\u6c42\u3002<\/p>\n <\/div>\n <\/div>\n <div class=\"cmp-service-row\">\n <div class=\"cmp-service-card cmp-fade-in cmp-delay-3\">\n <div class=\"cmp-service-icon\"><i class=\"fas fa-globe\"><\/i><\/div>\n <div class=\"cmp-service-name\">\u8de8\u5883\u652f\u4ed8\u670d\u52a1\u5546<\/div>\n <p class=\"cmp-service-desc\">\u63d0\u4f9b\u8de8\u5883\u652f\u4ed8\u89e3\u51b3\u65b9\u6848\uff0c\u652f\u6301\u591a\u5e01\u79cd\u7ed3\u7b97\uff0c\u52a9\u529b\u4f01\u4e1a\u62d3\u5c55\u56fd\u9645\u5e02\u573a\uff0c\u4f18\u5316\u8de8\u5883\u8d44\u91d1\u6d41\u52a8\uff0c\u964d\u4f4e\u4ea4\u6613\u6210\u672c\u3002<\/p>\n <\/div>\n <div class=\"cmp-service-card cmp-fade-in cmp-delay-4\">\n <div class=\"cmp-service-icon\"><i class=\"fas fa-shipping-fast\"><\/i><\/div>\n <div class=\"cmp-service-name\">\u8de8\u5883\u7535\u5546\u670d\u52a1\u5546<\/div>\n <p class=\"cmp-service-desc\">\u4e3a\u8de8\u5883\u7535\u5546\u4f01\u4e1a\u63d0\u4f9bTK\u5e73\u53f0\u8fd0\u8425\u3001\u4f9b\u5e94\u94fe\u7ba1\u7406\u3001\u6d77\u5916\u4ed3\u914d\u7b49\u4e00\u7ad9\u5f0f\u89e3\u51b3\u65b9\u6848\uff0c\u52a9\u529b\u4f01\u4e1a\u62d3\u5c55\u6d77\u5916\u5e02\u573a\u3002<\/p>\n <\/div>\n <div class=\"cmp-service-card cmp-fade-in cmp-delay-4\">\n <div class=\"cmp-service-icon\"><i class=\"fas fa-store-alt\"><\/i><\/div>\n <div class=\"cmp-service-name\">\u4eac\u4e1c\u7535\u5546\u8fd0\u8425\u670d\u52a1\u5546<\/div>\n <p class=\"cmp-service-desc\">\u63d0\u4f9b\u4eac\u4e1c\u5e73\u53f0\u5e97\u94fa\u8fd0\u8425\u3001\u8425\u9500\u63a8\u5e7f\u3001\u5ba2\u6237\u670d\u52a1\u7b49\u5168\u65b9\u4f4d\u7535\u5546\u8fd0\u8425\u652f\u6301\u4e0e\u670d\u52a1\uff0c\u63d0\u5347\u5e97\u94fa\u9500\u552e\u4e1a\u7ee9\u3002<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<script>\n\/\/ \u5730\u56fe\u4ea4\u4e92\u529f\u80fd\uff08\u4fdd\u6301\u539f\u6709\u4ea4\u4e92\u5b8c\u6574\uff0c\u80cc\u666f\u56fa\u5b9a\u4e0d\u5f71\u54cd\u6807\u8bb0\u70b9\u9f20\u6807\/\u5361\u7247\u4ea4\u4e92\uff09\ndocument.addEventListener('DOMContentLoaded', function() {\n const mapBase = document.getElementById('mapBase');\n const locations = document.querySelectorAll('.cmp-map-location');\n const locationInfos = document.querySelectorAll('.cmp-location-info');\n const closeButtons = document.querySelectorAll('.cmp-location-close');\n\n locations.forEach(location => {\n location.addEventListener('mouseenter', function() {\n const locationId = this.getAttribute('data-id');\n const infoCard = document.getElementById(`locationInfo${locationId}`);\n locationInfos.forEach(info => info.classList.remove('active'));\n locations.forEach(loc => loc.classList.remove('active'));\n if (infoCard) infoCard.classList.add('active');\n this.classList.add('active');\n });\n });\n\n locationInfos.forEach(infoCard => {\n infoCard.addEventListener('mouseenter', function() {\n const locationId = this.id.replace('locationInfo', '');\n const location = document.getElementById(`location${locationId}`);\n locations.forEach(loc => loc.classList.remove('active'));\n if (location) location.classList.add('active');\n });\n \n infoCard.addEventListener('mouseleave', function(e) {\n const relatedTarget = e.relatedTarget;\n if (!relatedTarget || !relatedTarget.closest('.cmp-map-location')) {\n setTimeout(() => {\n if (!document.querySelector('.cmp-map-location:hover') && !document.querySelector('.cmp-location-info:hover')) {\n locationInfos.forEach(info => info.classList.remove('active'));\n locations.forEach(loc => loc.classList.remove('active'));\n document.getElementById('locationInfo1')?.classList.add('active');\n document.getElementById('location1')?.classList.add('active');\n }\n }, 200);\n }\n });\n });\n\n closeButtons.forEach(button => {\n button.addEventListener('click', function(e) {\n e.stopPropagation();\n const infoCard = this.parentElement;\n infoCard.classList.remove('active');\n locations.forEach(loc => loc.classList.remove('active'));\n document.getElementById('location1')?.classList.add('active');\n document.getElementById('locationInfo1')?.classList.add('active');\n });\n });\n\n mapBase.addEventListener('click', function(e) {\n if (!e.target.closest('.cmp-map-location') && !e.target.closest('.cmp-location-info')) {\n locationInfos.forEach(info => info.classList.remove('active'));\n locations.forEach(loc => loc.classList.remove('active'));\n document.getElementById('location1')?.classList.add('active');\n document.getElementById('locationInfo1')?.classList.add('active');\n }\n });\n\n \/\/ \u6570\u5b57\u589e\u957f\u52a8\u753b\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const numElements = entry.target.querySelectorAll('.cmp-digital-num');\n numElements.forEach(numEl => {\n const targetNum = numEl.textContent.replace(\/\\+|\u4e07|\u4ebf|%\/g, '');\n const suffix = numEl.textContent.replace(\/[0-9]\/g, '');\n let currentNum = 0;\n const duration = 2000;\n const step = targetNum \/ (duration \/ 16);\n const timer = setInterval(() => {\n currentNum += step;\n if (currentNum >= targetNum) {\n clearInterval(timer);\n currentNum = targetNum;\n }\n numEl.textContent = Math.floor(currentNum) + suffix;\n }, 16);\n });\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.5 });\n observer.observe(document.querySelector('.cmp-digital-list'));\n\n \/\/ \u6eda\u52a8\u52a8\u753b\n const fadeElements = document.querySelectorAll('.cmp-fade-in');\n const fadeObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.animationPlayState = 'running';\n fadeObserver.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1 });\n fadeElements.forEach(el => {\n el.style.animationPlayState = 'paused';\n fadeObserver.observe(el);\n });\n});\n<\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>\u4f7f\u547d\u4e0e\u613f\u666f – \u91d1\u878d\u652f\u4ed8\u670d\u52a1\u96c6\u56e2<\/title>\n <!-- \u5f15\u5165Font Awesome\u56fe\u6807\u5e93 -->\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n \/* \u5168\u5c40\u91cd\u7f6e\u4e0e\u57fa\u7840\u53d8\u91cf *\/\n :root {\n --cmp-primary: #205cbc; \/* \u4e3b\u8272\u8c03 *\/\n --cmp-secondary: #4a90e2; \/* \u6b21\u8981\u8272\u8c03 *\/\n --cmp-bg: #f5f7fa; \/* \u80cc\u666f\u8272 *\/\n --cmp-text-main: #333333; \/* \u4e3b\u6587\u672c\u8272 *\/\n --cmp-text-light: #666666; \/* \u6b21\u8981\u6587\u672c\u8272 *\/\n --cmp-white: #ffffff; \/* \u767d\u8272 *\/\n --cmp-shadow: 0 4px 12px rgba(32, 92, 188, 0.1); \/* \u9634\u5f71 *\/\n --cmp-transition: all 0.3s ease; \/* \u8fc7\u6e21\u52a8\u753b *\/\n --cmp-max-width: 1300px; \/* \u5185\u5bb9\u6700\u5927\u5bbd\u5ea6 *\/\n \n \/* \u65b0\u589e\u4e24\u4e2a\u84dd\u8272\u8c03 *\/\n --cmp-blue-dark: #154a8a;\n --cmp-blue-light: #2d7fe0;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: \"Microsoft YaHei\", \"PingFang SC\", sans-serif;\n }\n\n body {\n background-color: transparent;\n color: var(--cmp-text-main);\n line-height: 1.6;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n }\n\n \/* \u5168\u5c4f\u677f\u5757\u5bb9\u5668 *\/\n .cmp-section {\n width: 100%;\n padding: 60px 20px;\n overflow: hidden;\n flex: 1;\n display: flex;\n align-items: center;\n }\n\n \/* \u5185\u5bb9\u5c45\u4e2d\u5bb9\u5668 *\/\n .cmp-inner {\n max-width: var(--cmp-max-width);\n margin: 0 auto;\n width: 100%;\n }\n\n \/* \u6807\u9898\u901a\u7528\u6837\u5f0f - \u4e2d\u6587\u5728\u4e0a\uff0c\u82f1\u6587\u5728\u4e0b\uff0c\u5c45\u4e2d *\/\n .cmp-title {\n font-size: 2.2rem;\n color: var(--cmp-primary);\n position: relative;\n padding-bottom: 15px;\n margin-bottom: 30px;\n font-weight: 700;\n text-align: center;\n }\n\n .cmp-title-en {\n display: block;\n font-size: 1rem;\n color: var(--cmp-text-light);\n margin-top: 5px;\n text-transform: uppercase;\n letter-spacing: 2px;\n font-weight: normal;\n }\n\n \/* \u4f7f\u547d\u613f\u666f\u677f\u5757 - \u4fee\u6539\u4e3a\u900f\u660e\u80cc\u666f *\/\n .cmp-mission {\n background-color: transparent;\n color: var(--cmp-text-main);\n padding: 80px 20px;\n }\n \n .cmp-mission .cmp-title {\n color: var(--cmp-primary);\n }\n \n .cmp-mission .cmp-title-en {\n color: var(--cmp-text-light);\n }\n\n .cmp-mission-inner {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 50px;\n }\n\n \/* \u4fee\u6539\u5361\u7247\u6837\u5f0f *\/\n .cmp-mission-item {\n padding: 40px 30px;\n border-radius: 16px; \/* \u589e\u52a0\u5706\u89d2\u534a\u5f84 *\/\n text-align: center;\n transition: var(--cmp-transition);\n border: none;\n }\n\n \/* \u7b2c\u4e00\u4e2a\u5361\u7247\u4f7f\u7528\u6df1\u84dd\u8272 *\/\n .cmp-mission-item:nth-child(1) {\n background-color: var(--cmp-blue-dark);\n }\n\n \/* \u7b2c\u4e8c\u4e2a\u5361\u7247\u4f7f\u7528\u6d45\u84dd\u8272 *\/\n .cmp-mission-item:nth-child(2) {\n background-color: var(--cmp-blue-light);\n }\n\n .cmp-mission-item:hover {\n transform: translateY(-5px);\n box-shadow: var(--cmp-shadow);\n }\n\n .cmp-mission-icon {\n font-size: 2.5rem;\n margin-bottom: 20px;\n color: var(--cmp-white);\n }\n\n .cmp-mission-title {\n font-size: 1.8rem;\n margin-bottom: 20px;\n color: var(--cmp-white);\n }\n\n .cmp-mission-desc {\n font-size: 1.1rem;\n line-height: 1.8;\n color: var(--cmp-white);\n }\n\n \/* \u52a8\u753b\u6548\u679c *\/\n @keyframes cmp-fadeIn {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .cmp-fade-in {\n opacity: 0;\n animation: cmp-fadeIn 0.8s ease forwards;\n }\n\n .cmp-delay-1 {\n animation-delay: 0.2s;\n }\n\n \/* \u54cd\u5e94\u5f0f\u9002\u914d *\/\n @media (max-width: 992px) {\n .cmp-mission-inner {\n grid-template-columns: 1fr;\n gap: 30px;\n }\n }\n\n @media (max-width: 768px) {\n .cmp-title {\n font-size: 1.8rem;\n }\n\n .cmp-mission {\n padding: 60px 20px;\n }\n \n .cmp-mission-item {\n padding: 30px 20px;\n }\n \n .cmp-mission-title {\n font-size: 1.5rem;\n }\n\n \/* \u624b\u673a\u7aef\u5b57\u4f53\u4f18\u5316\uff1a\u9002\u5f53\u52a0\u7c97\uff0c\u5b57\u4f53\u5927\u5c0f\u8c03\u81f3\u9002\u4e2d *\/\n .cmp-mission-desc {\n font-size: 1.15rem; \/* \u9002\u4e2d\u5927\u5c0f\uff0c\u65e2\u6e05\u6670\u53c8\u4e0d\u8fc7\u5927 *\/\n font-weight: 500; \/* \u589e\u52a0\u5b57\u91cd\uff0c\u89e3\u51b3\u201c\u5b57\u592a\u7ec6\u201d\u95ee\u9898 *\/\n line-height: 1.7;\n }\n }\n\n @media (max-width: 480px) {\n .cmp-section {\n padding: 40px 15px;\n }\n \n .cmp-mission {\n padding: 50px 15px;\n }\n\n \/* \u8d85\u5c0f\u5c4f\u5e55\u4fdd\u6301\u9002\u4e2d *\/\n .cmp-mission-desc {\n font-size: 1.1rem; \/* \u4fdd\u6301\u4e0e\u539f\u59cb\u5927\u5c0f\u76f8\u8fd1\uff0c\u4f46\u52a0\u7c97 *\/\n font-weight: 500;\n }\n }\n <\/style>\n<\/head>\n<body>\n <!-- \u4f7f\u547d\u613f\u666f\u677f\u5757 -->\n <section class=\"cmp-section cmp-mission\">\n <div class=\"cmp-inner\">\n <h2 class=\"cmp-title\">\n \u4f7f\u547d\u4e0e\u613f\u666f\n <span class=\"cmp-title-en\">Mission & Vision<\/span>\n <\/h2>\n <div class=\"cmp-mission-inner\">\n <div class=\"cmp-mission-item cmp-fade-in\">\n <div class=\"cmp-mission-icon\">\n <i class=\"fas fa-bullseye\"><\/i>\n <\/div>\n <h3 class=\"cmp-mission-title\">\u6211\u4eec\u7684\u4f7f\u547d<\/h3>\n <p class=\"cmp-mission-desc\">\u4ee5\u6280\u672f\u9a71\u52a8\u5546\u4e1a\u521b\u65b0\uff0c\u6210\u4e3a\u5ba2\u6237\u6700\u503c\u5f97\u4fe1\u8d56\u7684\u6570\u5b57\u5316\u4f19\u4f34\u3002\u901a\u8fc7\u5b89\u5168\u3001\u9ad8\u6548\u3001\u667a\u80fd\u7684\u652f\u4ed8\u4e0e\u7535\u5546\u89e3\u51b3\u65b9\u6848\uff0c\u8d4b\u80fd\u4f01\u4e1a\u6570\u5b57\u5316\u8f6c\u578b\uff0c\u52a9\u529b\u5ba2\u6237\u5b9e\u73b0\u4e1a\u52a1\u589e\u957f\uff0c\u5171\u521b\u5546\u4e1a\u4ef7\u503c\u3002<\/p>\n <\/div>\n <div class=\"cmp-mission-item cmp-fade-in cmp-delay-1\">\n <div class=\"cmp-mission-icon\">\n <i class=\"fas fa-eye\"><\/i>\n <\/div>\n <h3 class=\"cmp-mission-title\">\u6211\u4eec\u7684\u613f\u666f<\/h3>\n <p class=\"cmp-mission-desc\">\u6784\u5efa\u4e00\u4e2a\u667a\u6167\u3001\u4e92\u8054\u3001\u9ad8\u6548\u7684\u5546\u4e1a\u670d\u52a1\u751f\u6001\u5708\uff0c\u6210\u4e3a\u5168\u56fd\u9886\u5148\u7684\u91d1\u878d\u79d1\u6280\u4e0e\u6570\u5b57\u5316\u670d\u52a1\u5e73\u53f0\u3002\u81f4\u529b\u4e8e\u901a\u8fc7\u79d1\u6280\u521b\u65b0\uff0c\u63a8\u52a8\u4ea7\u4e1a\u5347\u7ea7\uff0c\u52a9\u529b\u4f01\u4e1a\u5b9e\u73b0\u5168\u7403\u5316\u4e1a\u52a1\u62d3\u5c55\uff0c\u521b\u9020\u66f4\u5927\u7684\u793e\u4f1a\u4ef7\u503c\u3002<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <script>\n \/\/ \u7b80\u5355\u7684\u52a8\u753b\u89e6\u53d1\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ \u4e3a\u6240\u6709\u5e26\u6709\u52a8\u753b\u7c7b\u7684\u5143\u7d20\u6dfb\u52a0\u6eda\u52a8\u76d1\u542c\n const fadeElements = document.querySelectorAll('.cmp-fade-in');\n const fadeObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.animationPlayState = 'running';\n fadeObserver.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1 });\n \n fadeElements.forEach(el => {\n el.style.animationPlayState = 'paused';\n fadeObserver.observe(el);\n });\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>\u65e0\u7a7a\u767d-\u7cbe\u51c6\u8fd4\u56de\u9876\u90e8\u7bad\u5934<\/title>\n <style>\n \/* \u91cd\u7f6ebody\u9ed8\u8ba4\u6837\u5f0f\uff0c\u5f7b\u5e95\u6d88\u9664\u6d4f\u89c8\u5668\u81ea\u5e26\u8fb9\u8ddd\u5bfc\u81f4\u7684\u7a7a\u767d *\/\n body {\n margin: 0;\n padding: 0;\n }\n\n \/* \u5b8c\u5168\u9694\u79bb\u7684\u6837\u5f0f\u547d\u540d\uff0c\u675c\u7edd\u51b2\u7a81 *\/\n .pure-backtop-arrow {\n position: fixed;\n right: 20px;\n bottom: 20px; \/* \u6309\u94ae\u4e0e\u9875\u9762\u5e95\u90e8\u7684\u5408\u7406\u95f4\u8ddd\uff0c\u975e\u7a7a\u767d *\/\n width: 50px;\n height: 50px;\n background-color: #205cbc;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n box-shadow: 0 2px 8px rgba(32, 92, 188, 0.3);\n transition: all 0.3s ease;\n z-index: 999999; \/* \u9876\u7ea7\u5c42\u7ea7\uff0c\u4e0d\u88ab\u906e\u6321 *\/\n border: none;\n outline: none;\n opacity: 1 !important; \/* \u59cb\u7ec8\u663e\u793a *\/\n pointer-events: auto !important; \/* \u59cb\u7ec8\u53ef\u70b9\u51fb *\/\n user-select: none; \/* \u9632\u6b62\u8bef\u9009 *\/\n -webkit-user-select: none;\n }\n\n \/* \u7bad\u5934\u6837\u5f0f\uff1a\u5c45\u4e2d\u7cbe\u81f4 *\/\n .pure-backtop-arrow::after {\n content: '';\n width: 16px;\n height: 16px;\n border-top: 3px solid #f5f7fa;\n border-left: 3px solid #f5f7fa;\n transform: rotate(45deg);\n margin-bottom: -4px;\n transition: all 0.3s ease;\n }\n\n \/* \u60ac\u505c\/\u70b9\u51fb\u4ea4\u4e92\u6548\u679c *\/\n .pure-backtop-arrow:hover {\n background-color: #184a9c;\n transform: translateY(-3px);\n box-shadow: 0 4px 12px rgba(32, 92, 188, 0.5);\n }\n .pure-backtop-arrow:hover::after {\n border-top-color: #ffffff;\n border-left-color: #ffffff;\n }\n .pure-backtop-arrow:active {\n transform: translateY(1px);\n box-shadow: 0 2px 6px rgba(32, 92, 188, 0.3);\n }\n\n \/* \u54cd\u5e94\u5f0f\u9002\u914d\uff1a\u624b\u673a\/\u5e73\u677f\/\u7535\u8111 *\/\n @media (max-width: 768px) {\n .pure-backtop-arrow {\n width: 40px;\n height: 40px;\n right: 15px;\n bottom: 15px;\n }\n .pure-backtop-arrow::after {\n width: 12px;\n height: 12px;\n }\n }\n @media (max-width: 480px) {\n .pure-backtop-arrow {\n width: 36px;\n height: 36px;\n right: 10px;\n bottom: 10px;\n }\n .pure-backtop-arrow::after {\n width: 10px;\n height: 10px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <!-- \ud83d\udc47 \u6b64\u5904\u4ec5\u4fdd\u7559\u4f60\u7684\u5b9e\u9645\u7f51\u9875\u5185\u5bb9\uff0c\u65e0\u4efb\u4f55\u6d4b\u8bd5div\uff01\uff01 -->\n <!-- \u793a\u4f8b\uff1a\u4f60\u7684\u5185\u5bb9\u53ef\u4ee5\u662f\u6587\u5b57\u3001\u56fe\u7247\u3001\u8868\u5355\u7b49\uff0c\u6bd4\u5982\uff1a\n <div>\u4f60\u7684\u7f51\u9875\u5185\u5bb91<\/div>\n <div>\u4f60\u7684\u7f51\u9875\u5185\u5bb92<\/div>\n -->\n\n <!-- \u8fd4\u56de\u9876\u90e8\u7bad\u5934\uff08\u4ec5\u8fd9\u4e00\u4e2a\u6309\u94ae\uff0c\u65e0\u5176\u4ed6\u5197\u4f59\u5143\u7d20\uff09 -->\n <button class=\"pure-backtop-arrow\" id=\"pureBacktopArrow\"><\/button>\n\n <script>\n \/\/ \u7b49\u5f85DOM\u52a0\u8f7d\u5b8c\u6210\n document.addEventListener('DOMContentLoaded', function() {\n const backtopBtn = document.getElementById('pureBacktopArrow');\n \n if (backtopBtn) {\n \/\/ \u6838\u5fc3\uff1a100%\u7cbe\u51c6\u8fd4\u56de\u9876\u90e8\uff08\u517c\u5bb9\u6240\u6709\u6d4f\u89c8\u5668\uff09\n backtopBtn.addEventListener('click', function() {\n \/\/ \u7acb\u5373\u505c\u6b62\u6240\u6709\u6eda\u52a8\u52a8\u753b\n window.scrollTo(0, 0);\n \n \/\/ \u73b0\u4ee3\u6d4f\u89c8\u5668\u5e73\u6ed1\u6eda\u52a8\uff08\u53cc\u5bb9\u5668\u517c\u5bb9\uff09\n if ('scrollBehavior' in document.documentElement.style) {\n document.documentElement.scrollTo({ top: 0, left: 0, behavior: 'smooth' });\n document.body.scrollTo({ top: 0, left: 0, behavior: 'smooth' });\n }\n \n \/\/ \u5f3a\u5236\u515c\u5e95\uff1a\u786e\u4fdd\u7edd\u5bf9\u5230\u9876\n setTimeout(() => {\n window.scrollTo(0, 0);\n document.documentElement.scrollTop = 0;\n document.body.scrollTop = 0;\n if (window.parent) window.parent.scrollTo(0, 0);\n }, 10);\n });\n } else {\n console.error('\u8fd4\u56de\u9876\u90e8\u6309\u94ae\u672a\u627e\u5230\uff0c\u8bf7\u68c0\u67e5ID');\n }\n });\n <\/script>\n<\/body>\n<\/html>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u516c\u53f8\u7b80\u4ecb \u4e1c\u79cb\u897f\u7a3b \u4e13 \u4e1a \u670d \u52a1 \u5168 \u94fe \u8def \u00b7 \u52a9 \u529b \u4f01 \u4e1a \u5168 \u7403 \u589e \u957f \u516c\u53f8\u7b80\u4ecb – […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_themeisle_gutenberg_block_has_review":false,"_kadence_starter_templates_imported_post":false,"footnotes":""},"class_list":["post-1475","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.dqxdao.com\/index.php\/wp-json\/wp\/v2\/pages\/1475","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dqxdao.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.dqxdao.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.dqxdao.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dqxdao.com\/index.php\/wp-json\/wp\/v2\/comments?post=1475"}],"version-history":[{"count":169,"href":"https:\/\/www.dqxdao.com\/index.php\/wp-json\/wp\/v2\/pages\/1475\/revisions"}],"predecessor-version":[{"id":3810,"href":"https:\/\/www.dqxdao.com\/index.php\/wp-json\/wp\/v2\/pages\/1475\/revisions\/3810"}],"wp:attachment":[{"href":"https:\/\/www.dqxdao.com\/index.php\/wp-json\/wp\/v2\/media?parent=1475"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}