{"id":581,"date":"2026-03-05T14:06:24","date_gmt":"2026-03-05T06:06:24","guid":{"rendered":"https:\/\/www.xunmanlab.com\/?page_id=581"},"modified":"2026-10-09T18:25:28","modified_gmt":"2026-10-09T10:25:28","slug":"works","status":"publish","type":"page","link":"https:\/\/www.xunmanlab.com\/","title":{"rendered":"\u6848\u4f8b"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"581\" class=\"elementor elementor-581\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cc780de e-flex e-con-boxed e-con e-parent\" data-id=\"cc780de\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-39a83ea elementor-widget elementor-widget-html\" data-id=\"39a83ea\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!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>XUNMAN LAB | 01 \u6570\u5b57\u5168\u666f<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Oswald:wght@300;500;700&display=swap\" rel=\"stylesheet\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=JetBrains+Mono:wght@400;700&display=swap\" rel=\"stylesheet\">\n\n<style>\n    \/* --- 1. \u7ec8\u6781\u6ee1\u5bbd\u5305\u88f9\u5c42 --- *\/\n    .xm-super-wrapper {\n        width: 100vw !important;\n        position: relative;\n        left: 50%;\n        transform: translateX(-50%);\n        background-color: #ffffff; \n        overflow: hidden; \n        padding-top: 30px;\n        font-family: -apple-system, BlinkMacSystemFont, \"PingFang SC\", \"Helvetica Neue\", Arial, sans-serif;\n    }\n\n    \/* --- 2. 86vw \u6838\u5fc3\u5185\u5bb9\u7ea6\u675f\u5c42\uff08\u50cf\u4e00\u4e2a\u9690\u5f62\u7684\u753b\u6846\u76d2\u5b50\uff09 --- *\/\n    .xm-container {\n        width: 86vw !important;\n        max-width: 1600px !important;\n        margin: 0 auto;\n    }\n\n    \/* --- 3. \u7c7b\u522b\u6807\u9898\u533a --- *\/\n    .section-header {\n        border-bottom: 2px solid #111; \n        padding-bottom: 15px;\n        margin-bottom: 30px;\n    }\n    .cat-label { \n        font-family: 'JetBrains Mono', monospace; \n        font-size: 14px; font-weight: 700; letter-spacing: 3px; \n        color: #666; display: block; margin-bottom: 8px; \n    }\n    .cat-title { \n        font-size: 42px; font-weight: 900; margin: 0; \n        color: #000000; letter-spacing: 2px; \n    }\n\n    \/* --- 4. \u4e3b\u821e\u53f0\uff1aVR\u5927\u56fe --- *\/\n    .vm-stage {\n        position: relative; \n        width: 100%; \n        padding-bottom: 48%; \/* \u9501\u5b9a\u9ad8\u5bbd\u6bd4 *\/\n        background: transparent; \n        border-radius: 20px; \n        overflow: hidden;\n        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 30px 60px rgba(0,0,0,0.12); \n        margin-bottom: 40px;\n        -webkit-transform: translateZ(0); transform: translateZ(0);\n    }\n\n    .vm-cover { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 10; overflow: hidden; }\n    .vm-bg-img {\n        position: absolute; top: -1%; left: -1%; width: 102%; height: 102%; \n        object-fit: cover; transform: scale(1.02); \n        animation: slowPushIn 30s ease-out infinite alternate;\n        image-rendering: -webkit-optimize-contrast;\n    }\n    @keyframes slowPushIn {\n        0% { transform: scale(1.02); }\n        100% { transform: scale(1.12); }\n    }\n\n    .vm-overlay {\n        position: absolute; inset: 0; \n        background: linear-gradient(to right, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);\n        display: flex; flex-direction: column; justify-content: center;\n        padding: 0 8%; pointer-events: none;\n    }\n\n    .vm-tag { font-family: 'JetBrains Mono'; font-size: 13px; color: #fff; letter-spacing: 2px; margin-bottom: 15px; opacity: 0.9; text-transform: uppercase;}\n    .vm-project-title { font-size: 48px; font-weight: 900; color: #fff; margin: 0 0 20px 0; line-height: 1.2; letter-spacing: 1px; }\n    .vm-project-desc { font-size: 16px; color: rgba(255,255,255,0.8); line-height: 1.8; max-width: 550px; margin-bottom: 45px; text-align: justify; font-weight: 300;}\n\n    .vm-btn-play {\n        display: inline-flex; align-items: center; justify-content: center;\n        border: 1px solid #fff; border-radius: 50px; \n        padding: 16px 45px; color: #111; font-size: 15px; font-weight: bold;\n        background: #ffffff; \n        cursor: pointer; pointer-events: auto; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); width: fit-content;\n    }\n    .vm-btn-play:hover { background: transparent; color: #fff; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }\n\n    .vm-iframe-box { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; display: none; }\n    .vm-iframe-box iframe { width: 100%; height: 100%; border: none; }\n    .vm-btn-close {\n        position: absolute; top: 25px; right: 25px; z-index: 20;\n        background: rgba(0,0,0,0.7); color: #fff; border: 1px solid rgba(255,255,255,0.3);\n        padding: 10px 25px; border-radius: 50px; font-size: 13px; cursor: pointer;\n        backdrop-filter: blur(8px); transition: 0.3s; display: none; font-weight: bold;\n    }\n    .vm-btn-close:hover { background: #fff; color: #000; }\n\n    \/* --- 5. \u5e95\u90e8\u6a2a\u6ed1\u533a\uff1a\u88ab\u7edd\u5bf9\u9650\u5236\u5728\u753b\u6846\u5bbd\u5ea6\u5185 --- *\/\n    .slider-wrapper {\n        width: 100%; \/* \u56e0\u4e3a\u8fdb\u4e86\u7ea6\u675f\u5c42\uff0c100% \u521a\u597d\u7b49\u4e8e\u4e0a\u65b9\u5927\u56fe\u7684\u5bbd\u5ea6 *\/\n        margin: 0 auto;\n    }\n    .slider-track {\n        display: flex; gap: 24px;\n        padding: 0 0 60px 0; \/* \u3010\u6838\u5fc3\u4fee\u590d\u3011\u5e9f\u5f03\u590d\u6742\u7684\u5de6\u53f3\u586b\u5145\uff0c\u56de\u5f52\u6781\u7b80\uff0c\u5de6\u53f3\u7edd\u5bf9\u5bf9\u9f50 *\/\n        overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; \n    }\n    .slider-track::-webkit-scrollbar { display: none; }\n\n    .slide-card {\n        flex: 0 0 31%; \/* \u4e00\u6392\u521a\u597d\u5c55\u793a3\u5f20\u6574\u5361\u7247+\u6f0f\u51fa\u4e00\u70b9\u70b9\u7b2c4\u5f20\u7684\u8fb9\u7f18 *\/\n        max-width: 450px; height: 24vh; min-height: 220px;\n        border-radius: 16px; scroll-snap-align: start; \n        position: relative; overflow: hidden; cursor: pointer;\n        transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);\n        border: none; background: transparent; \n    }\n    .slide-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,0.15); }\n    .slide-card.active { box-shadow: 0 15px 35px rgba(0,0,0,0.2); }\n\n    .slide-card-img {\n        position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;\n        transition: 0.6s ease; filter: brightness(0.65) grayscale(20%); transform: scale(1.02); \n    }\n    .slide-card:hover .slide-card-img, .slide-card.active .slide-card-img { filter: brightness(0.95) grayscale(0%); transform: scale(1.05); }\n\n    .slide-card-info {\n        position: absolute; bottom: 0; left: 0; width: 100%; padding: 25px 20px; box-sizing: border-box;\n        background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);\n    }\n    .slide-card-title { font-size: 18px; font-weight: bold; margin: 0 0 6px 0; color: #fff; letter-spacing: 1px;}\n    .slide-card-sub { font-size: 12px; color: #ddd; font-family: 'JetBrains Mono', monospace; }\n    \n    .playing-badge {\n        position: absolute; top: 15px; right: 15px; background: rgba(0, 0, 0, 0.85); color: #fff;\n        font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: bold; padding: 6px 12px; \n        border-radius: 6px; opacity: 0; transition: 0.3s; backdrop-filter: blur(4px);\n    }\n    .slide-card.active .playing-badge { opacity: 1; }\n\n    \/* --- \u79fb\u52a8\u7aef\u81ea\u9002\u5e94 (iPad & \u624b\u673a) --- *\/\n    @media (max-width: 900px) {\n        .xm-container { width: 92vw !important; }\n        .vm-stage { padding-bottom: 120%; border-radius: 16px; } \n        .cat-title { font-size: 32px; }\n        .vm-project-title { font-size: 34px; }\n        .vm-project-desc { font-size: 14px; margin-bottom: 25px; line-height: 1.6; }\n        .vm-overlay { padding: 12% 8%; justify-content: flex-end; }\n        .vm-btn-play { padding: 12px 30px; font-size: 14px; }\n        .slider-track { padding: 0 0 80px 0; gap: 16px; }\n        .slide-card { flex: 0 0 82%; height: 22vh; min-height: 180px; } \/* \u624b\u673a\u7aef\u53d8\u6210\u5c55\u793a\u4e00\u5f20\u5927\u5361\u7247+\u6f0f\u51fa\u8fb9\u7f18 *\/\n    }\n<\/style>\n<\/head>\n<body>\n\n    <!-- \u5f3a\u5236\u6491\u7834\u7f51\u9875\u5bbd\u5ea6\u7684\u6ee1\u5bbd\u5305\u88f9\u5c42 -->\n    <div class=\"xm-super-wrapper\">\n        \n        <!-- \u3010\u6781\u5176\u5173\u952e\u7684\u67b6\u6784\u3011\u5927\u5c4f\u7ea6\u675f\u5c42\uff0c\u4e0d\u4ec5\u5305\u88f9\u5927\u56fe\uff0c\u73b0\u5728\u628a\u4e0b\u65b9\u7684\u6ed1\u52a8\u533a\u4e5f\u5305\u88f9\u8fdb\u6765\u4e86\uff01 -->\n        <div class=\"xm-container\">\n            \n            <!-- 01 \u5c55\u533a\u6807\u9898 -->\n            <div class=\"section-header\">\n                <span class=\"cat-label\">01 \/ DIGITAL PANORAMA<\/span>\n                <h2 class=\"cat-title\">\u6570\u5b57\u5168\u666f<\/h2>\n            <\/div>\n\n            <!-- \u4e3b\u821e\u53f0 -->\n            <div class=\"vm-stage\">\n                <div id=\"vm-cover\" class=\"vm-cover\">\n                    <img decoding=\"async\" id=\"vm-bg\" src=\"\" class=\"vm-bg-img\" alt=\"\u5c01\u9762\u80cc\u666f\">\n                    <div class=\"vm-overlay\">\n                        <div id=\"vm-tag\" class=\"vm-tag\">LOADING...<\/div>\n                        <h2 id=\"vm-title\" class=\"vm-project-title\">\u8bfb\u53d6\u6570\u636e\u4e2d...<\/h2>\n                        <p id=\"vm-desc\" class=\"vm-project-desc\">...<\/p>\n                        <div class=\"vm-btn-play\" onclick=\"playVR()\">\u70b9\u51fb\u8fdb\u5165\u5168\u666f\u6f2b\u6e38 \u2197<\/div>\n                    <\/div>\n                <\/div>\n\n                <div id=\"vm-iframe-box\" class=\"vm-iframe-box\">\n                    <iframe id=\"vm-player\" src=\"\" allow=\"fullscreen; xr-spatial-tracking\" allowfullscreen=\"true\"><\/iframe>\n                <\/div>\n                <div id=\"vm-btn-close\" class=\"vm-btn-close\" onclick=\"closeVR()\">\u2715 \u9000\u51fa\u5168\u666f<\/div>\n            <\/div>\n\n            <!-- \u3010\u4fee\u6539\u6838\u5fc3\u3011\u5e95\u90e8\u6a2a\u6ed1\u533a\u73b0\u5728\u88ab\u79fb\u5165 xm-container \u5185\u90e8 -->\n            <!-- \u8fd9\u610f\u5473\u7740\u5b83\u5c06\u88ab\u5f3a\u5236\u201c\u4e00\u5200\u5207\u65ad\u201d\u5728\u5927\u56fe\u7684\u53f3\u4fa7\u8fb9\u754c\uff0c\u4e25\u4e1d\u5408\u7f1d\uff01 -->\n            <div class=\"slider-wrapper\">\n                <div id=\"slider-track\" class=\"slider-track\">\n                    <!-- \u5361\u7247\u7531\u4e0b\u65b9 JS \u52a8\u6001\u751f\u6210 -->\n                <\/div>\n            <\/div>\n\n        <\/div> <!-- End of xm-container -->\n    <\/div> <!-- End of xm-super-wrapper -->\n\n<script>\nconst vrProjects = [\n    {\n        title: \"\u7eff\u5c9b\u7f8e\u672f\u9986\",\n        tag: \"\u5b9e\u666f\u626b\u63cf \/ \u7a7a\u95f4\u4ea4\u4e92\",\n        desc: \"\u91c7\u7528 720\u00b0 \u9ad8\u7cbe\u5ea6\u5168\u666f\u6355\u6349\u6280\u672f\uff0c\u5c06\u7ebf\u4e0b\u7269\u7406\u5c55\u9986\u8d44\u4ea7\u65e0\u635f\u8f6c\u5316\u4e3a\u6570\u5b57\u7a7a\u95f4\u3002\u5185\u5d4c\u591a\u5a92\u4f53\u4ea4\u4e92\u8282\u70b9\uff0c\u6253\u9020\u6c38\u4e0d\u843d\u5e55\u7684\u6570\u5b57\u7279\u5c55\u3002\",\n        url: \"https:\/\/www.xunmanlab.com\/vr\/green-island\/index.html\", \n        thumb: \"http:\/\/www.xunmanlab.com\/wp-content\/uploads\/2026\/03\/IMG_7519.jpg\" \n    },\n    {\n        title: \"\u91cd\u5de5\u88c5\u5907\u8d4b\u80fd\u4e2d\u5fc3\",\n        tag: \"\u5de5\u4e1a\u4eff\u771f \/ \u8fdc\u7a0b\u9a8c\u5382\",\n        desc: \"\u7ed3\u5408\u4e13\u4e1a\u673a\u68b0\u80cc\u666f\uff0c\u5c06\u590d\u6742\u7684\u751f\u4ea7\u6d41\u6c34\u7ebf\u8fdb\u884c\u6570\u5b57\u91cd\u6784\u3002\u652f\u6301\u8bbe\u5907\u8282\u70b9\u70ed\u70b9\u4ea4\u4e92\uff0c\u52a9\u529b\u4f01\u4e1a\u6d77\u5916\u8fdc\u7a0b\u9a8c\u5382\u4e0e\u786c\u6838\u9500\u552e\u5c55\u793a\u3002\",\n        url: \"\", \n        thumb: \"https:\/\/images.unsplash.com\/photo-1581091226825-a6a2a5aee158?q=80&w=1600&auto=format&fit=crop\" \n    },\n    {\n        title: \"\u6587\u521b\u56ed\u533a\u7a7a\u95f4\u6f2b\u6e38\",\n        tag: \"\u822a\u62cd\u5168\u666f \/ \u7535\u5b50\u6c99\u76d8\",\n        desc: \"\u65e0\u4eba\u673a\u822a\u62cd\u5168\u666f\u4e0e\u5730\u6e90\u5168\u666f\u65e0\u7f1d\u7a7f\u68ad\u3002\u96c6\u6210\u7535\u5b50\u6c99\u76d8\u4e0e\u8def\u7ebf\u5bfc\u822a\uff0c\u4e3a\u56ed\u533a\u62db\u5546\u5f15\u8d44\u63d0\u4f9b\u6781\u5177\u79d1\u6280\u611f\u7684\u89c6\u89c9\u6b66\u5668\u3002\",\n        url: \"\", \n        thumb: \"https:\/\/images.unsplash.com\/photo-1497366216548-37526070297c?q=80&w=1600&auto=format&fit=crop\" \n    },\n    {\n        title: \"\u66f4\u591a\u5168\u666f\u4f5c\u54c1\",\n        tag: \"COMING SOON\",\n        desc: \"\u6570\u5b57\u7a7a\u95f4\u5b9e\u9a8c\u5ba4\u6301\u7eed\u63a2\u7d22\u7269\u7406\u7a7a\u95f4\u4e0e\u6570\u5b57\u8d44\u4ea7\u7684\u8fb9\u754c\uff0c\u66f4\u591a\u524d\u6cbf\u5168\u666f\u6848\u4f8b\u6b63\u5728\u6444\u5236\u8f6c\u5316\u4e2d...\",\n        url: \"\", \n        thumb: \"https:\/\/images.unsplash.com\/photo-1618005182384-a83a8bd57fbe?q=80&w=1600&auto=format&fit=crop\" \n    }\n];\n\nlet currentIndex = 0;\nconst coverEl = document.getElementById('vm-cover');\nconst bgImgEl = document.getElementById('vm-bg');\nconst titleEl = document.getElementById('vm-title');\nconst descEl = document.getElementById('vm-desc');\nconst tagEl = document.getElementById('vm-tag');\nconst iframeBox = document.getElementById('vm-iframe-box');\nconst player = document.getElementById('vm-player');\nconst btnClose = document.getElementById('vm-btn-close');\nconst sliderTrack = document.getElementById('slider-track');\n\nfunction loadProject(index) {\n    currentIndex = index;\n    const project = vrProjects[index];\n    \n    closeVR(); \n    bgImgEl.src = project.thumb;\n    titleEl.innerText = project.title;\n    descEl.innerText = project.desc;\n    tagEl.innerText = project.tag;\n\n    const playBtn = document.querySelector('.vm-btn-play');\n    if(project.url === \"\") {\n        playBtn.style.display = 'none';\n    } else {\n        playBtn.style.display = 'inline-flex';\n    }\n\n    const items = sliderTrack.querySelectorAll('.slide-card');\n    items.forEach(item => item.classList.remove('active'));\n    if(items[index]) items[index].classList.add('active');\n}\n\nfunction playVR() {\n    const project = vrProjects[currentIndex];\n    if(!project.url) return;\n    player.src = project.url;\n    coverEl.style.display = 'none';\n    iframeBox.style.display = 'block';\n    btnClose.style.display = 'block';\n}\n\nfunction closeVR() {\n    player.src = ''; \n    coverEl.style.display = 'block';\n    iframeBox.style.display = 'none';\n    btnClose.style.display = 'none';\n}\n\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n    if (!sliderTrack) return;\n\n    vrProjects.forEach((project, index) => {\n        const card = document.createElement('div');\n        card.className = 'slide-card';\n        card.innerHTML = `\n            <img decoding=\"async\" src=\"${project.thumb}\" alt=\"${project.title}\" class=\"slide-card-img\">\n            <div class=\"playing-badge\">NOW VIEWING<\/div>\n            <div class=\"slide-card-info\">\n                <h3 class=\"slide-card-title\">${project.title}<\/h3>\n                <div class=\"slide-card-sub\">${project.tag}<\/div>\n            <\/div>\n        `;\n        \n        card.onclick = function() {\n            loadProject(index);\n            card.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });\n            coverEl.style.opacity = 0;\n            setTimeout(() => { coverEl.style.opacity = 1; }, 200);\n        };\n        sliderTrack.appendChild(card);\n    });\n\n    if(vrProjects.length > 0) loadProject(0);\n});\n<\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-86a8e64 e-flex e-con-boxed e-con e-parent\" data-id=\"86a8e64\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5c39f74 elementor-widget elementor-widget-html\" data-id=\"5c39f74\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!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>XUNMAN LAB | 02 \u6570\u5b57\u827a\u672f<\/title>\n\n<style>\n    \/* \uff08\u5168\u5c40\u67b6\u6784\u4e0e 01 \u4fdd\u6301\u7edd\u5bf9\u4e00\u81f4\uff0c\u786e\u4fdd\u5b8c\u7f8e\u5bf9\u9f50\uff09 *\/\n    .xm-super-wrapper {\n        width: 100vw !important;\n        position: relative;\n        left: 50%;\n        transform: translateX(-50%);\n        background-color: #ffffff; \n        overflow: hidden; \n        padding-top: 30px;\n        font-family: -apple-system, BlinkMacSystemFont, \"PingFang SC\", \"Helvetica Neue\", Arial, sans-serif;\n    }\n\n    .xm-container {\n        width: 86vw !important;\n        max-width: 1600px !important;\n        margin: 0 auto;\n    }\n\n    .section-header {\n        border-bottom: 2px solid #111; \n        padding-bottom: 15px;\n        margin-bottom: 30px;\n    }\n    .cat-label { \n        font-family: 'JetBrains Mono', monospace; \n        font-size: 14px; font-weight: 700; letter-spacing: 3px; \n        color: #666; display: block; margin-bottom: 8px; \n    }\n    .cat-title { \n        font-size: 42px; font-weight: 900; margin: 0; \n        color: #000000; letter-spacing: 2px; \n    }\n\n    .vm-stage {\n        position: relative; \n        width: 100%; \n        padding-bottom: 48%; \n        background: transparent; \n        border-radius: 20px; \n        overflow: hidden;\n        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 30px 60px rgba(0,0,0,0.12); \n        margin-bottom: 40px;\n        -webkit-transform: translateZ(0); transform: translateZ(0);\n    }\n\n    .vm-cover { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 10; overflow: hidden; }\n    .vm-bg-img {\n        position: absolute; top: -1%; left: -1%; width: 102%; height: 102%; \n        object-fit: cover; transform: scale(1.02); \n        animation: slowPushIn 30s ease-out infinite alternate;\n        image-rendering: -webkit-optimize-contrast;\n    }\n    @keyframes slowPushIn {\n        0% { transform: scale(1.02); }\n        100% { transform: scale(1.12); }\n    }\n\n    .vm-overlay {\n        position: absolute; inset: 0; \n        background: linear-gradient(to right, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);\n        display: flex; flex-direction: column; justify-content: center;\n        padding: 0 8%; pointer-events: none;\n    }\n\n    .vm-tag { font-family: 'JetBrains Mono'; font-size: 13px; color: #fff; letter-spacing: 2px; margin-bottom: 15px; opacity: 0.9; text-transform: uppercase;}\n    .vm-project-title { font-size: 48px; font-weight: 900; color: #fff; margin: 0 0 20px 0; line-height: 1.2; letter-spacing: 1px; }\n    .vm-project-desc { font-size: 16px; color: rgba(255,255,255,0.8); line-height: 1.8; max-width: 550px; margin-bottom: 45px; text-align: justify; font-weight: 300;}\n\n    .vm-btn-play {\n        display: inline-flex; align-items: center; justify-content: center;\n        border: 1px solid #fff; border-radius: 50px; \n        padding: 16px 45px; color: #111; font-size: 15px; font-weight: bold;\n        background: #ffffff; \n        cursor: pointer; pointer-events: auto; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); width: fit-content;\n    }\n    .vm-btn-play:hover { background: transparent; color: #fff; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }\n\n    .vm-iframe-box { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; display: none; background: #000; }\n    .vm-iframe-box iframe { width: 100%; height: 100%; border: none; }\n    \n    \/* \u3010\u6838\u5fc3\u66f4\u65b0\u3011\u5c06\u6309\u94ae\u7ec4\u56fa\u5b9a\u5728\u5de6\u4e0a\u89d2 left: 25px *\/\n    .vm-action-bar {\n        position: absolute; top: 25px; left: 25px; z-index: 20;\n        display: flex; gap: 12px; pointer-events: none; \n    }\n    .vm-btn-action {\n        pointer-events: auto; \n        background: rgba(0,0,0,0.7); color: #fff; border: 1px solid rgba(255,255,255,0.3);\n        padding: 10px 22px; border-radius: 50px; font-size: 13px; cursor: pointer;\n        backdrop-filter: blur(8px); transition: 0.3s; font-weight: bold;\n    }\n    .vm-btn-action:hover { background: #fff; color: #000; }\n\n    .slider-wrapper { width: 100%; margin: 0 auto; }\n    .slider-track {\n        display: flex; gap: 24px; padding: 0 0 60px 0; \n        overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; \n    }\n    .slider-track::-webkit-scrollbar { display: none; }\n\n    .slide-card {\n        flex: 0 0 31%; \n        max-width: 450px; height: 24vh; min-height: 220px;\n        border-radius: 16px; scroll-snap-align: start; \n        position: relative; overflow: hidden; cursor: pointer;\n        transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);\n        border: none; background: transparent; \n    }\n    .slide-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,0.15); }\n    .slide-card.active { box-shadow: 0 15px 35px rgba(0,0,0,0.2); }\n\n    .slide-card-img {\n        position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;\n        transition: 0.6s ease; filter: brightness(0.65) grayscale(20%); transform: scale(1.02); \n    }\n    .slide-card:hover .slide-card-img, .slide-card.active .slide-card-img { filter: brightness(0.95) grayscale(0%); transform: scale(1.05); }\n\n    .slide-card-info {\n        position: absolute; bottom: 0; left: 0; width: 100%; padding: 25px 20px; box-sizing: border-box;\n        background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);\n    }\n    .slide-card-title { font-size: 18px; font-weight: bold; margin: 0 0 6px 0; color: #fff; letter-spacing: 1px;}\n    .slide-card-sub { font-size: 12px; color: #ddd; font-family: 'JetBrains Mono', monospace; }\n    \n    .playing-badge {\n        position: absolute; top: 15px; right: 15px; background: rgba(0, 0, 0, 0.85); color: #fff;\n        font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: bold; padding: 6px 12px; \n        border-radius: 6px; opacity: 0; transition: 0.3s; backdrop-filter: blur(4px);\n    }\n    .slide-card.active .playing-badge { opacity: 1; }\n\n    @media (max-width: 900px) {\n        .xm-container { width: 92vw !important; }\n        .vm-stage { padding-bottom: 120%; border-radius: 16px; } \n        .cat-title { font-size: 32px; }\n        .vm-project-title { font-size: 34px; }\n        .vm-project-desc { font-size: 14px; margin-bottom: 25px; line-height: 1.6; }\n        .vm-overlay { padding: 12% 8%; justify-content: flex-end; }\n        .vm-btn-play { padding: 12px 30px; font-size: 14px; }\n        .slider-track { padding: 0 0 80px 0; gap: 16px; }\n        .slide-card { flex: 0 0 82%; height: 22vh; min-height: 180px; } \n        \n        \/* \u3010\u6838\u5fc3\u66f4\u65b0\u3011\u624b\u673a\u7aef\u6309\u94ae\u7ec4\u5fae\u8c03\u5de6\u4e0a\u89d2\u4f4d\u7f6e *\/\n        .vm-action-bar { top: 15px; left: 15px; gap: 10px; }\n        .vm-btn-action { padding: 8px 16px; font-size: 12px; }\n    }\n<\/style>\n<\/head>\n<body>\n\n    <div class=\"xm-super-wrapper\">\n        <div class=\"xm-container\">\n            \n            <div class=\"section-header\">\n                <span class=\"cat-label\">02 \/ DIGITAL ART<\/span>\n                <h2 class=\"cat-title\">\u6570\u5b57\u827a\u672f<\/h2>\n            <\/div>\n\n            <div class=\"vm-stage\">\n                <div id=\"art-cover\" class=\"vm-cover\">\n                    <img decoding=\"async\" id=\"art-bg\" src=\"\" class=\"vm-bg-img\" alt=\"\u5c01\u9762\u80cc\u666f\">\n                    <div class=\"vm-overlay\">\n                        <div id=\"art-tag\" class=\"vm-tag\">LOADING...<\/div>\n                        <h2 id=\"art-title\" class=\"vm-project-title\">\u8bfb\u53d6\u6570\u636e\u4e2d...<\/h2>\n                        <p id=\"art-desc\" class=\"vm-project-desc\">...<\/p>\n                        <div class=\"vm-btn-play\" onclick=\"playArt()\">\u70b9\u51fb\u4ea4\u4e92\u4f53\u9a8c \u2197<\/div>\n                    <\/div>\n                <\/div>\n\n                <div id=\"art-iframe-box\" class=\"vm-iframe-box\">\n                    <iframe id=\"art-player\" src=\"\" allow=\"fullscreen\" allowfullscreen=\"true\"><\/iframe>\n                    \n                    <!-- \u60ac\u6d6e\u64cd\u4f5c\u6309\u94ae\u7ec4 (\u73b0\u5728\u56fa\u5b9a\u5728\u5de6\u4e0a\u89d2) -->\n                    <div class=\"vm-action-bar\">\n                        <div class=\"vm-btn-action\" onclick=\"openFullscreenArt()\">\u26f6 \u5168\u5c4f\u6a21\u5f0f<\/div>\n                        <div class=\"vm-btn-action\" onclick=\"closeArt()\">\u2715 \u9000\u51fa\u4f5c\u54c1<\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"slider-wrapper\">\n                <div id=\"art-slider-track\" class=\"slider-track\">\n                    <!-- \u5361\u7247\u7531\u4e0b\u65b9 JS \u52a8\u6001\u751f\u6210 -->\n                <\/div>\n            <\/div>\n\n        <\/div> \n    <\/div> \n\n<script>\nconst artProjects = [\n    {\n        title: \"Traces of Time\",\n        tag: \"\u4e92\u52a8\u5f71\u50cf\u88c5\u7f6e \/ \u751f\u6210\u5f0f\u7c92\u5b50\u4ea4\u4e92\",\n        desc: \"\u4ee5\u952e\u76d8\u8f93\u5165\u4e3a\u6838\u5fc3\u7684\u4e92\u52a8\u6570\u5b57\u827a\u672f\u4f5c\u54c1\u3002\u89c2\u4f17\u8f93\u5165\u81ea\u5df1\u8fc7\u53bb\u7684\u51b3\u5b9a\uff0c\u7a0b\u5e8f\u6839\u636e\u6587\u5b57\u751f\u6210\u7c92\u5b50\u7fa4\uff0c\u5f62\u6210\u4e0d\u65ad\u6269\u5c55\u7684\u201c\u51b3\u7b56\u7f51\u7edc\u201d\uff0c\u9690\u55bb\u88ab\u9057\u5fd8\u7684\u8fc7\u53bb\u5982\u4f55\u6301\u7eed\u5f71\u54cd\u5f53\u4e0b\u4e0e\u672a\u6765\u3002\u53c2\u5c55\u7ecf\u5386\uff1a\u4f26\u6566Goldsmiths, POP UP\u4e0e\u6c88\u9633\u5dfd\u6cc9\u89c2\u90b82026\u79cb\u5b63\u5c55\u300c\u4e98\u53e4\u540c\u89c2\u300d\u3002\",\n        url: \"https:\/\/www.xunmanlab.com\/artworks\/traces-of-time\/index.html\", \n        thumb: \"https:\/\/images.unsplash.com\/photo-1550684848-fac1c5b4e853?q=80&w=1600&auto=format&fit=crop\" \n    },\n    {\n        title: \"\u66f4\u591a\u827a\u672f\u4f5c\u54c1\",\n        tag: \"COMING SOON\",\n        desc: \"\u6570\u5b57\u7a7a\u95f4\u5b9e\u9a8c\u5ba4\u6301\u7eed\u63a2\u7d22\u4ee3\u7801\u9a71\u52a8\u7684\u89c6\u89c9\u8fb9\u754c\uff0c\u66f4\u591a\u524d\u6cbf\u4e92\u52a8\u5f71\u50cf\u88c5\u7f6e\u4e0e\u6570\u5b57\u827a\u672f\u4f5c\u54c1\u6b63\u5728\u521b\u4f5c\u4e2d...\",\n        url: \"\", \n        thumb: \"https:\/\/images.unsplash.com\/photo-1618005182384-a83a8bd57fbe?q=80&w=1600&auto=format&fit=crop\" \n    }\n];\n\nlet currentArtIndex = 0;\nconst artCoverEl = document.getElementById('art-cover');\nconst artBgImgEl = document.getElementById('art-bg');\nconst artTitleEl = document.getElementById('art-title');\nconst artDescEl = document.getElementById('art-desc');\nconst artTagEl = document.getElementById('art-tag');\nconst artIframeBox = document.getElementById('art-iframe-box');\nconst artPlayer = document.getElementById('art-player');\nconst artSliderTrack = document.getElementById('art-slider-track');\n\nfunction loadArtProject(index) {\n    currentArtIndex = index;\n    const project = artProjects[index];\n    \n    closeArt(); \n    artBgImgEl.src = project.thumb;\n    artTitleEl.innerText = project.title;\n    artDescEl.innerText = project.desc;\n    artTagEl.innerText = project.tag;\n\n    const playBtn = artCoverEl.querySelector('.vm-btn-play');\n    if(project.url === \"\") {\n        playBtn.style.display = 'none';\n    } else {\n        playBtn.style.display = 'inline-flex';\n    }\n\n    const items = artSliderTrack.querySelectorAll('.slide-card');\n    items.forEach(item => item.classList.remove('active'));\n    if(items[index]) items[index].classList.add('active');\n}\n\nfunction playArt() {\n    const project = artProjects[currentArtIndex];\n    if(!project.url) return;\n    artPlayer.src = project.url;\n    artCoverEl.style.display = 'none';\n    artIframeBox.style.display = 'block'; \n}\n\nfunction openFullscreenArt() {\n    const elem = document.getElementById(\"art-iframe-box\");\n    if (elem.requestFullscreen) {\n        elem.requestFullscreen();\n    } else if (elem.webkitRequestFullscreen) { \n        elem.webkitRequestFullscreen();\n    } else if (elem.msRequestFullscreen) { \n        elem.msRequestFullscreen();\n    }\n}\n\nfunction closeArt() {\n    if (document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {\n        if (document.exitFullscreen) {\n            document.exitFullscreen();\n        } else if (document.webkitExitFullscreen) {\n            document.webkitExitFullscreen();\n        } else if (document.msExitFullscreen) {\n            document.msExitFullscreen();\n        }\n    }\n    \n    artPlayer.src = ''; \n    artCoverEl.style.display = 'block';\n    artIframeBox.style.display = 'none';\n}\n\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n    if (!artSliderTrack) return;\n\n    artProjects.forEach((project, index) => {\n        const card = document.createElement('div');\n        card.className = 'slide-card';\n        card.innerHTML = `\n            <img decoding=\"async\" src=\"${project.thumb}\" alt=\"${project.title}\" class=\"slide-card-img\">\n            <div class=\"playing-badge\">NOW VIEWING<\/div>\n            <div class=\"slide-card-info\">\n                <h3 class=\"slide-card-title\">${project.title}<\/h3>\n                <div class=\"slide-card-sub\">${project.tag}<\/div>\n            <\/div>\n        `;\n        \n        card.onclick = function() {\n            loadArtProject(index);\n            card.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });\n            artCoverEl.style.opacity = 0;\n            setTimeout(() => { artCoverEl.style.opacity = 1; }, 200);\n        };\n        artSliderTrack.appendChild(card);\n    });\n\n    if(artProjects.length > 0) loadArtProject(0);\n});\n<\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6ddefd4 e-flex e-con-boxed e-con e-parent\" data-id=\"6ddefd4\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8b1f809 elementor-widget elementor-widget-html\" data-id=\"8b1f809\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!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>XUNMAN LAB | 03 \u6570\u5b57\u89c6\u9891<\/title>\n\n<style>\n    \/* \u5168\u5c40\u53ca\u5bb9\u5668\u7ea6\u675f *\/\n    .xm-super-wrapper {\n        width: 100vw !important;\n        position: relative;\n        left: 50%;\n        transform: translateX(-50%);\n        background-color: #ffffff; \n        overflow: hidden; \n        padding-top: 30px;\n        font-family: -apple-system, BlinkMacSystemFont, \"PingFang SC\", \"Helvetica Neue\", Arial, sans-serif;\n    }\n\n    .xm-container {\n        width: 86vw !important;\n        max-width: 1600px !important;\n        margin: 0 auto;\n    }\n\n    \/* \u5c55\u533a\u6807\u9898 *\/\n    .section-header {\n        border-bottom: 2px solid #111; \n        padding-bottom: 15px;\n        margin-bottom: 30px;\n    }\n    .cat-label { \n        font-family: 'JetBrains Mono', monospace; \n        font-size: 14px; font-weight: 700; letter-spacing: 3px; \n        color: #666; display: block; margin-bottom: 8px; \n    }\n    .cat-title { \n        font-size: 42px; font-weight: 900; margin: 0; \n        color: #000000; letter-spacing: 2px; \n    }\n\n    \/* \u4e3b\u753b\u6846 *\/\n    .vm-stage {\n        position: relative; \n        width: 100%; \n        padding-bottom: 48%; \n        background: transparent; \n        border-radius: 20px; \n        overflow: hidden;\n        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 30px 60px rgba(0,0,0,0.12); \n        margin-bottom: 40px;\n        -webkit-transform: translateZ(0); transform: translateZ(0);\n    }\n\n    \/* \u5c01\u9762\u4ea4\u4e92\u5c42 *\/\n    .vm-cover { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 10; overflow: hidden; }\n    .vm-bg-img {\n        position: absolute; top: -1%; left: -1%; width: 102%; height: 102%; \n        object-fit: cover; transform: scale(1.02); \n        animation: slowPushIn 30s ease-out infinite alternate;\n        image-rendering: -webkit-optimize-contrast;\n    }\n    @keyframes slowPushIn {\n        0% { transform: scale(1.02); }\n        100% { transform: scale(1.12); }\n    }\n\n    .vm-overlay {\n        position: absolute; inset: 0; \n        background: linear-gradient(to right, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);\n        display: flex; flex-direction: column; justify-content: center;\n        padding: 0 8%; pointer-events: none;\n    }\n\n    .vm-tag { font-family: 'JetBrains Mono'; font-size: 13px; color: #fff; letter-spacing: 2px; margin-bottom: 15px; opacity: 0.9; text-transform: uppercase;}\n    .vm-project-title { font-size: 48px; font-weight: 900; color: #fff; margin: 0 0 20px 0; line-height: 1.2; letter-spacing: 1px; }\n    .vm-project-desc { font-size: 16px; color: rgba(255,255,255,0.8); line-height: 1.8; max-width: 550px; margin-bottom: 45px; text-align: justify; font-weight: 300;}\n\n    \/* \u64ad\u653e\u6309\u94ae *\/\n    .vm-btn-play {\n        display: inline-flex; align-items: center; justify-content: center;\n        border: 1px solid #fff; border-radius: 50px; \n        padding: 16px 45px; color: #111; font-size: 15px; font-weight: bold;\n        background: #ffffff; \n        cursor: pointer; pointer-events: auto; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); width: fit-content;\n    }\n    .vm-btn-play:hover { background: transparent; color: #fff; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }\n\n    \/* \u89c6\u9891 iframe \u5c42 *\/\n    .vm-iframe-box { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; display: none; background: #000; }\n    .vm-iframe-box iframe { width: 100%; height: 100%; border: none; }\n    \n    \/* \u60ac\u6d6e\u64cd\u4f5c\u6309\u94ae\u7ec4 (\u5de6\u4e0a\u89d2) *\/\n    .vm-action-bar {\n        position: absolute; top: 25px; left: 25px; z-index: 20;\n        display: flex; gap: 12px; pointer-events: none; \n    }\n    .vm-btn-action {\n        pointer-events: auto; \n        background: rgba(0,0,0,0.7); color: #fff; border: 1px solid rgba(255,255,255,0.3);\n        padding: 10px 22px; border-radius: 50px; font-size: 13px; cursor: pointer;\n        backdrop-filter: blur(8px); transition: 0.3s; font-weight: bold;\n    }\n    .vm-btn-action:hover { background: #fff; color: #000; }\n\n    \/* \u5e95\u90e8\u6ed1\u52a8\u8f68\u9053 *\/\n    .slider-wrapper { width: 100%; margin: 0 auto; }\n    .slider-track {\n        display: flex; gap: 24px; padding: 0 0 60px 0; \n        overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; \n    }\n    .slider-track::-webkit-scrollbar { display: none; }\n\n    \/* \u6ed1\u52a8\u5361\u7247 *\/\n    .slide-card {\n        flex: 0 0 31%; \n        max-width: 450px; height: 24vh; min-height: 220px;\n        border-radius: 16px; scroll-snap-align: start; \n        position: relative; overflow: hidden; cursor: pointer;\n        transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);\n        border: none; background: transparent; \n    }\n    .slide-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,0.15); }\n    .slide-card.active { box-shadow: 0 15px 35px rgba(0,0,0,0.2); }\n\n    .slide-card-img {\n        position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;\n        transition: 0.6s ease; filter: brightness(0.65) grayscale(20%); transform: scale(1.02); \n    }\n    .slide-card:hover .slide-card-img, .slide-card.active .slide-card-img { filter: brightness(0.95) grayscale(0%); transform: scale(1.05); }\n\n    .slide-card-info {\n        position: absolute; bottom: 0; left: 0; width: 100%; padding: 25px 20px; box-sizing: border-box;\n        background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);\n    }\n    .slide-card-title { font-size: 18px; font-weight: bold; margin: 0 0 6px 0; color: #fff; letter-spacing: 1px;}\n    .slide-card-sub { font-size: 12px; color: #ddd; font-family: 'JetBrains Mono', monospace; }\n    \n    .playing-badge {\n        position: absolute; top: 15px; right: 15px; background: rgba(0, 0, 0, 0.85); color: #fff;\n        font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: bold; padding: 6px 12px; \n        border-radius: 6px; opacity: 0; transition: 0.3s; backdrop-filter: blur(4px);\n    }\n    .slide-card.active .playing-badge { opacity: 1; }\n\n    \/* \u79fb\u52a8\u7aef\u9002\u914d *\/\n    @media (max-width: 900px) {\n        .xm-container { width: 92vw !important; }\n        .vm-stage { padding-bottom: 120%; border-radius: 16px; } \n        .cat-title { font-size: 32px; }\n        .vm-project-title { font-size: 34px; }\n        .vm-project-desc { font-size: 14px; margin-bottom: 25px; line-height: 1.6; }\n        .vm-overlay { padding: 12% 8%; justify-content: flex-end; }\n        .vm-btn-play { padding: 12px 30px; font-size: 14px; }\n        .slider-track { padding: 0 0 80px 0; gap: 16px; }\n        .slide-card { flex: 0 0 82%; height: 22vh; min-height: 180px; } \n        .vm-action-bar { top: 15px; left: 15px; gap: 10px; }\n        .vm-btn-action { padding: 8px 16px; font-size: 12px; }\n    }\n<\/style>\n<\/head>\n<body>\n\n    <div class=\"xm-super-wrapper\">\n        <div class=\"xm-container\">\n            \n            <!-- 03 \u5c55\u533a\u6807\u9898 -->\n            <div class=\"section-header\" style=\"margin-top: 80px;\">\n                <span class=\"cat-label\">03 \/ AI DIGITAL VIDEO<\/span>\n                <h2 class=\"cat-title\">AI \u6570\u5b57\u89c6\u9891<\/h2>\n            <\/div>\n\n            <!-- 03 \u4e3b\u821e\u53f0 -->\n            <div class=\"vm-stage\">\n                <!-- \u5c01\u9762\u5c42 -->\n                <div id=\"video-cover\" class=\"vm-cover\">\n                    <img decoding=\"async\" id=\"video-bg\" src=\"\" class=\"vm-bg-img\" alt=\"\u5c01\u9762\u80cc\u666f\">\n                    <div class=\"vm-overlay\">\n                        <div id=\"video-tag\" class=\"vm-tag\">LOADING...<\/div>\n                        <h2 id=\"video-title\" class=\"vm-project-title\">\u8bfb\u53d6\u6570\u636e\u4e2d...<\/h2>\n                        <p id=\"video-desc\" class=\"vm-project-desc\">...<\/p>\n                        <div class=\"vm-btn-play\" onclick=\"playVideo()\">\u70b9\u51fb\u64ad\u653e\u89c6\u9891 \u2197<\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- \u89c6\u9891\u5c42 -->\n                <div id=\"video-iframe-box\" class=\"vm-iframe-box\">\n                    <iframe id=\"video-player\" src=\"\" allow=\"fullscreen\" allowfullscreen=\"true\" scrolling=\"no\" border=\"0\" frameborder=\"no\" framespacing=\"0\"><\/iframe>\n                    \n                    <!-- \u60ac\u6d6e\u64cd\u4f5c\u6309\u94ae\u7ec4 (\u5de6\u4e0a\u89d2) -->\n                    <div class=\"vm-action-bar\">\n                        <div class=\"vm-btn-action\" onclick=\"openFullscreenVideo()\">\u26f6 \u5168\u5c4f\u6a21\u5f0f<\/div>\n                        <div class=\"vm-btn-action\" onclick=\"closeVideo()\">\u2715 \u9000\u51fa\u64ad\u653e<\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- 03 \u5e95\u90e8\u6a2a\u6ed1\u533a -->\n            <div class=\"slider-wrapper\">\n                <div id=\"video-slider-track\" class=\"slider-track\">\n                    <!-- \u5361\u7247\u52a8\u6001\u751f\u6210 -->\n                <\/div>\n            <\/div>\n\n        <\/div> \n    <\/div> \n\n<script>\n\/\/ ============================================\n\/\/ \u301003 \u6570\u636e\u914d\u7f6e\u533a\u3011\u89c6\u9891\u4f5c\u54c1\u5e93\n\/\/ ============================================\nconst videoProjects = [\n    {\n        title: \"\u4e00\u9633\u5343\u8f7d\",\n        tag: \"\u7b2c\u56db\u5c4a\u201c\u4eba\u6587\u793e\u79d1\u4e4b\u5149\u201d\u53c2\u8d5b\u4f5c\u54c1\",\n        desc: \"\u4f5c\u54c1\u4ee5\u201c\u9633\u201d\u5b57\u6f14\u53d8\u4e3a\u65f6\u95f4\u8f74\uff0c\u5168\u7247\u91c7\u7528AI\u751f\u6210\u3001\u5386\u53f2\u573a\u666f\u590d\u539f\u4e0e\u7eaa\u5f55\u7247\u5316\u5f71\u50cf\u8bed\u8a00\uff0c\u63a2\u7d22\u4e00\u4e2a\u6c49\u5b57\u8de8\u8d8a\u56db\u5343\u5e74\u7684\u751f\u547d\u8f68\u8ff9\u4e0e\u7cbe\u795e\u5750\u6807\u3002\u4ece\u7532\u9aa8\u6587\u4e2d\u201c\u5c71\u201d\u4e0e\u201c\u65e5\u201d\u7684\u5f62\u6001\uff0c\u8bb2\u8ff0\u5176\u4e2d\u8574\u542b\u7684\u4e2d\u56fd\u6545\u4e8b\u3002\",\n        \/\/ \u62fc\u63a5\u4e86\u9ad8\u753b\u8d28\u4e0e\u81ea\u52a8\u64ad\u653e\u53c2\u6570\u7684 B\u7ad9\u94fe\u63a5 (\u52a0\u5165\u4e86 https: \u9632\u6b62\u672c\u5730\u9884\u89c8\u62a5\u9519)\n        url: \"https:\/\/player.bilibili.com\/player.html?isOutside=true&aid=116972897568411&bvid=BV1w4gh6pE1S&cid=40243760142&p=1&high_quality=1&danmaku=0&autoplay=1\", \n        \/\/ \u5305\u542b\u7535\u5f71\u8d28\u611f\u955c\u5934\u7684\u793a\u4f8b\u5c01\u9762\u56fe\n        thumb: \"https:\/\/images.unsplash.com\/photo-1492691527719-9d1e07e534b4?q=80&w=1600&auto=format&fit=crop\" \n    },\n    {\n        title: \"\u66f4\u591a\u89c6\u9891\u4f5c\u54c1\",\n        tag: \"COMING SOON\",\n        desc: \"\u6570\u5b57\u7a7a\u95f4\u5b9e\u9a8c\u5ba4\u6301\u7eed\u63a2\u7d22\u5f71\u50cf\u8bed\u8a00\u7684\u89c6\u89c9\u8fb9\u754c\uff0c\u66f4\u591a\u524d\u6cbfAI\u6570\u5b57\u89c6\u9891\u3001\u54c1\u724c\u5148\u950b\u89c6\u89c9\u5185\u5bb9\u6b63\u5728\u5236\u4f5c\u4e2d...\",\n        url: \"\", \n        \/\/ \u79d1\u6280\u611f\u793a\u4f8b\u5c01\u9762\u56fe\n        thumb: \"https:\/\/images.unsplash.com\/photo-1618005182384-a83a8bd57fbe?q=80&w=1600&auto=format&fit=crop\" \n    }\n];\n\nlet currentVideoIndex = 0;\nconst videoCoverEl = document.getElementById('video-cover');\nconst videoBgImgEl = document.getElementById('video-bg');\nconst videoTitleEl = document.getElementById('video-title');\nconst videoDescEl = document.getElementById('video-desc');\nconst videoTagEl = document.getElementById('video-tag');\nconst videoIframeBox = document.getElementById('video-iframe-box');\nconst videoPlayer = document.getElementById('video-player');\nconst videoSliderTrack = document.getElementById('video-slider-track');\n\nfunction loadVideoProject(index) {\n    currentVideoIndex = index;\n    const project = videoProjects[index];\n    \n    closeVideo(); \n    videoBgImgEl.src = project.thumb;\n    videoTitleEl.innerText = project.title;\n    videoDescEl.innerText = project.desc;\n    videoTagEl.innerText = project.tag;\n\n    const playBtn = videoCoverEl.querySelector('.vm-btn-play');\n    if(project.url === \"\") {\n        playBtn.style.display = 'none';\n    } else {\n        playBtn.style.display = 'inline-flex';\n    }\n\n    const items = videoSliderTrack.querySelectorAll('.slide-card');\n    items.forEach(item => item.classList.remove('active'));\n    if(items[index]) items[index].classList.add('active');\n}\n\nfunction playVideo() {\n    const project = videoProjects[currentVideoIndex];\n    if(!project.url) return;\n    videoPlayer.src = project.url;\n    videoCoverEl.style.display = 'none';\n    videoIframeBox.style.display = 'block'; \n}\n\nfunction openFullscreenVideo() {\n    const elem = document.getElementById(\"video-iframe-box\");\n    if (elem.requestFullscreen) {\n        elem.requestFullscreen();\n    } else if (elem.webkitRequestFullscreen) { \n        elem.webkitRequestFullscreen();\n    } else if (elem.msRequestFullscreen) { \n        elem.msRequestFullscreen();\n    }\n}\n\nfunction closeVideo() {\n    if (document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {\n        if (document.exitFullscreen) {\n            document.exitFullscreen();\n        } else if (document.webkitExitFullscreen) {\n            document.webkitExitFullscreen();\n        } else if (document.msExitFullscreen) {\n            document.msExitFullscreen();\n        }\n    }\n    \n    videoPlayer.src = ''; \n    videoCoverEl.style.display = 'block';\n    videoIframeBox.style.display = 'none';\n}\n\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n    if (!videoSliderTrack) return;\n\n    videoProjects.forEach((project, index) => {\n        const card = document.createElement('div');\n        card.className = 'slide-card';\n        card.innerHTML = `\n            <img decoding=\"async\" src=\"${project.thumb}\" alt=\"${project.title}\" class=\"slide-card-img\">\n            <div class=\"playing-badge\">NOW VIEWING<\/div>\n            <div class=\"slide-card-info\">\n                <h3 class=\"slide-card-title\">${project.title}<\/h3>\n                <div class=\"slide-card-sub\">${project.tag}<\/div>\n            <\/div>\n        `;\n        \n        card.onclick = function() {\n            loadVideoProject(index);\n            card.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });\n            videoCoverEl.style.opacity = 0;\n            setTimeout(() => { videoCoverEl.style.opacity = 1; }, 200);\n        };\n        videoSliderTrack.appendChild(card);\n    });\n\n    if(videoProjects.length > 0) loadVideoProject(0);\n});\n<\/script>\n\n<\/body>\n<\/html>\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>XUNMAN LAB | 01 \u6570\u5b57\u5168\u666f [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"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":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","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-581","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.xunmanlab.com\/index.php\/wp-json\/wp\/v2\/pages\/581","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.xunmanlab.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.xunmanlab.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.xunmanlab.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.xunmanlab.com\/index.php\/wp-json\/wp\/v2\/comments?post=581"}],"version-history":[{"count":146,"href":"https:\/\/www.xunmanlab.com\/index.php\/wp-json\/wp\/v2\/pages\/581\/revisions"}],"predecessor-version":[{"id":785,"href":"https:\/\/www.xunmanlab.com\/index.php\/wp-json\/wp\/v2\/pages\/581\/revisions\/785"}],"wp:attachment":[{"href":"https:\/\/www.xunmanlab.com\/index.php\/wp-json\/wp\/v2\/media?parent=581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}