\u9694\u79bb\u6eda\u52a8\u8f6e\u64ad \u00b7 \u65e0\u5360\u4f4d\u5757 \u00b7 \u6eda\u8f6e\u5207\u6362<\/title>\r\n <style>\r\n \/* ============================================================\r\n \u5168\u5c40\u96f6\u6c61\u67d3\uff1a\u6240\u6709\u6837\u5f0f\u9650\u5b9a\u5728 .ccc-cover-carousel \u5185\r\n \u540c\u65f6\u963b\u6b62\u9875\u9762\u6eda\u52a8\uff0c\u907f\u514d\u5e72\u6270\r\n ============================================================ *\/\r\n \/* \u9632\u6b62\u9875\u9762\u6eda\u52a8\uff08\u4ec5\u5bf9\u8f6e\u64ad\u6240\u5728\u9875\u9762\u751f\u6548\uff0c\u4e0d\u5f71\u54cd\u5176\u4ed6\u5143\u7d20\uff09 *\/\r\n body {\r\n overflow: hidden;\r\n margin: 0;\r\n height: 100vh;\r\n }\r\n\r\n .ccc-cover-carousel {\r\n display: block;\r\n position: relative;\r\n width: 100%;\r\n height: 100vh;\r\n overflow: hidden;\r\n background-color: #0b0d10;\r\n z-index: 0;\r\n }\r\n\r\n \/* \u4ec5\u91cd\u7f6e\u8f6e\u64ad\u5185\u90e8\u7684\u76d2\u6a21\u578b *\/\r\n .ccc-cover-carousel *,\r\n .ccc-cover-carousel *::before,\r\n .ccc-cover-carousel *::after {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n \/* ---- \u6eda\u52a8\u5bb9\u5668\uff08\u4e0d\u518d\u9700\u8981\u9ad8\u5ea6\u6491\u5f00\uff0c\u4ec5\u4f5c\u903b\u8f91\u5bb9\u5668\uff09 ---- *\/\r\n .ccc-cover-carousel .ccc-container {\r\n position: relative;\r\n width: 100%;\r\n height: 100vh;\r\n pointer-events: none;\r\n user-select: none;\r\n }\r\n\r\n \/* ---- \u6bcf\u4e00\u5f20\u5e7b\u706f\u7247 ---- *\/\r\n .ccc-cover-carousel .ccc-slide {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100vw;\r\n height: 100vh;\r\n overflow: hidden;\r\n will-change: transform;\r\n \/* \u521d\u59cb\u4f4d\u7f6e\u7531 JS \u63a7\u5236\uff0c\u9ed8\u8ba4\u4e3a 0 *\/\r\n transform: translateX(0);\r\n transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n z-index: 1;\r\n }\r\n\r\n \/* \u5c42\u7ea7\u9012\u589e\uff0c\u4f46\u6ed1\u52a8\u65f6\u6240\u6709\u5e7b\u706f\u7247\u5747\u53c2\u4e0e\u8fc7\u6e21 *\/\r\n .ccc-cover-carousel .ccc-slide[data-index=\"0\"] {\r\n z-index: 1;\r\n }\r\n .ccc-cover-carousel .ccc-slide[data-index=\"1\"] {\r\n z-index: 2;\r\n }\r\n .ccc-cover-carousel .ccc-slide[data-index=\"2\"] {\r\n z-index: 3;\r\n }\r\n\r\n \/* ---- \u56fe\u7247 ---- *\/\r\n .ccc-cover-carousel .ccc-slide img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n user-select: none;\r\n pointer-events: none;\r\n -webkit-user-drag: none;\r\n }\r\n\r\n \/* ---- \u6e10\u53d8\u906e\u7f69 + \u6587\u5b57\uff08\u5c45\u4e2d\u5bf9\u9f50\uff09 ---- *\/\r\n .ccc-cover-carousel .ccc-slide .ccc-overlay {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n padding: 60px 40px 50px;\r\n background: linear-gradient(transparent, rgba(0, 0, 0, 0.65) 40%, rgba(0, 0, 0, 0.85));\r\n pointer-events: none;\r\n user-select: none;\r\n color: #fff;\r\n text-align: center;\r\n }\r\n\r\n .ccc-cover-carousel .ccc-slide .ccc-overlay h2 {\r\n font-size: clamp(2.2rem, 6vw, 4.8rem);\r\n font-weight: 700;\r\n letter-spacing: 0.04em;\r\n margin-bottom: 10px;\r\n text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);\r\n color: #fff;\r\n }\r\n\r\n .ccc-cover-carousel .ccc-slide .ccc-overlay p {\r\n font-size: clamp(1rem, 1.6vw, 1.6rem);\r\n font-weight: 300;\r\n opacity: 0.85;\r\n text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);\r\n line-height: 1.6;\r\n color: #fff;\r\n max-width: 600px;\r\n margin: 0 auto;\r\n }\r\n\r\n \/* ---- \u5e8f\u53f7\u89d2\u6807 ---- *\/\r\n .ccc-cover-carousel .ccc-slide .ccc-badge {\r\n position: absolute;\r\n top: 30px;\r\n right: 40px;\r\n font-size: clamp(0.85rem, 1.2vw, 1.2rem);\r\n font-weight: 500;\r\n letter-spacing: 0.1em;\r\n color: rgba(255, 255, 255, 0.5);\r\n background: rgba(0, 0, 0, 0.3);\r\n backdrop-filter: blur(8px);\r\n padding: 8px 18px;\r\n border-radius: 30px;\r\n border: 1px solid rgba(255, 255, 255, 0.08);\r\n pointer-events: none;\r\n user-select: none;\r\n font-family: 'Segoe UI', 'PingFang SC', Roboto, sans-serif;\r\n }\r\n\r\n \/* ---- \u9876\u90e8\u8fdb\u5ea6\u6761 ---- *\/\r\n .ccc-cover-carousel .ccc-progress-bar {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 4px;\r\n background: rgba(255, 255, 255, 0.08);\r\n z-index: 1000;\r\n pointer-events: none;\r\n }\r\n\r\n .ccc-cover-carousel .ccc-progress-bar .ccc-progress-fill {\r\n height: 100%;\r\n width: 0%;\r\n background: linear-gradient(90deg, #f093fb, #f5576c, #4facfe);\r\n border-radius: 0 4px 4px 0;\r\n transition: width 0.3s ease;\r\n }\r\n\r\n \/* ---- \u5e95\u90e8\u6307\u793a\u5706\u70b9 ---- *\/\r\n .ccc-cover-carousel .ccc-dots {\r\n position: fixed;\r\n bottom: 40px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n display: flex;\r\n gap: 14px;\r\n z-index: 1000;\r\n pointer-events: none;\r\n }\r\n\r\n .ccc-cover-carousel .ccc-dots .ccc-dot {\r\n width: 12px;\r\n height: 12px;\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.25);\r\n border: 2px solid rgba(255, 255, 255, 0.1);\r\n transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);\r\n }\r\n\r\n .ccc-cover-carousel .ccc-dots .ccc-dot.ccc-active {\r\n background: #fff;\r\n border-color: #fff;\r\n transform: scale(1.25);\r\n box-shadow: 0 0 30px rgba(255, 255, 255, 0.25);\r\n }\r\n\r\n \/* ---- \u6eda\u52a8\u63d0\u793a\uff08\u5e95\u90e8\u5c0f\u7bad\u5934\uff09 ---- *\/\r\n .ccc-cover-carousel .ccc-scroll-hint {\r\n position: fixed;\r\n bottom: 80px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n z-index: 500;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 8px;\r\n color: rgba(255, 255, 255, 0.3);\r\n font-size: 0.75rem;\r\n letter-spacing: 0.06em;\r\n animation: ccc-bounceDown 2.4s ease-in-out infinite;\r\n pointer-events: none;\r\n user-select: none;\r\n transition: opacity 0.6s ease, transform 0.6s ease;\r\n font-family: 'Segoe UI', 'PingFang SC', Roboto, sans-serif;\r\n }\r\n\r\n .ccc-cover-carousel .ccc-scroll-hint.ccc-hidden {\r\n opacity: 0;\r\n transform: translateX(-50%) translateY(20px);\r\n }\r\n\r\n .ccc-cover-carousel .ccc-scroll-hint svg {\r\n width: 24px;\r\n height: 24px;\r\n fill: none;\r\n stroke: rgba(255, 255, 255, 0.25);\r\n stroke-width: 2;\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n }\r\n\r\n @keyframes ccc-bounceDown {\r\n 0%,\r\n 100% {\r\n transform: translateX(-50%) translateY(0);\r\n opacity: 0.4;\r\n }\r\n 50% {\r\n transform: translateX(-50%) translateY(12px);\r\n opacity: 1;\r\n }\r\n }\r\n\r\n \/* ---- \u54cd\u5e94\u5f0f\u5fae\u8c03 ---- *\/\r\n @media (max-width: 768px) {\r\n .ccc-cover-carousel .ccc-slide .ccc-overlay {\r\n padding: 40px 24px 35px;\r\n }\r\n .ccc-cover-carousel .ccc-slide .ccc-badge {\r\n top: 20px;\r\n right: 20px;\r\n padding: 6px 14px;\r\n font-size: 0.7rem;\r\n }\r\n .ccc-cover-carousel .ccc-dots {\r\n bottom: 28px;\r\n gap: 10px;\r\n }\r\n .ccc-cover-carousel .ccc-dots .ccc-dot {\r\n width: 10px;\r\n height: 10px;\r\n }\r\n .ccc-cover-carousel .ccc-scroll-hint {\r\n bottom: 60px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .ccc-cover-carousel .ccc-slide .ccc-overlay h2 {\r\n font-size: 1.8rem;\r\n }\r\n .ccc-cover-carousel .ccc-slide .ccc-overlay p {\r\n font-size: 0.9rem;\r\n }\r\n .ccc-cover-carousel .ccc-slide .ccc-overlay {\r\n padding: 30px 18px 28px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <div class=\"ccc-cover-carousel\">\r\n\r\n \r\n <div class=\"ccc-progress-bar\" id=\"cccProgressBar\">\r\n <div class=\"ccc-progress-fill\" id=\"cccProgressFill\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"ccc-dots\" id=\"cccDots\">\r\n <span class=\"ccc-dot ccc-active\" data-index=\"0\"><\/span>\r\n <span class=\"ccc-dot\" data-index=\"1\"><\/span>\r\n <span class=\"ccc-dot\" data-index=\"2\"><\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"ccc-scroll-hint\" id=\"cccScrollHint\">\r\n <span>\u6eda\u52a8\u5207\u6362<\/span>\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M7 10l5 5 5-5\" \/>\r\n <\/svg>\r\n <\/div>\r\n\r\n \r\n <div class=\"ccc-container\" id=\"cccContainer\">\r\n\r\n \r\n <div class=\"ccc-slide\" data-index=\"0\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/picsum.photos\/seed\/mountain\/1600\/900\"\r\n alt=\"\u5c71\u5ddd\u58ee\u4e3d\"\r\n loading=\"eager\"\r\n \/>\r\n <div class=\"ccc-badge\">01 \/ 03<\/div>\r\n <div class=\"ccc-overlay\">\r\n <h2>\ud83c\udfd4\ufe0f \u5c71\u5ddd\u58ee\u4e3d<\/h2>\r\n <p>\u5cf0\u5ce6\u53e0\u5d82\uff0c\u4e91\u6d77\u7ffb\u6d8c\uff0c\u5927\u81ea\u7136\u7684\u9b3c\u65a7\u795e\u5de5\u5728\u6b64\u5c3d\u663e\u3002<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"ccc-slide\" data-index=\"1\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/picsum.photos\/seed\/city\/1600\/900\"\r\n alt=\"\u90fd\u5e02\u7e41\u534e\"\r\n loading=\"lazy\"\r\n \/>\r\n <div class=\"ccc-badge\">02 \/ 03<\/div>\r\n <div class=\"ccc-overlay\">\r\n <h2>\ud83c\udf06 \u90fd\u5e02\u7e41\u534e<\/h2>\r\n <p>\u9713\u8679\u95ea\u70c1\uff0c\u8f66\u6d41\u5982\u7ec7\uff0c\u73b0\u4ee3\u6587\u660e\u7684\u8109\u640f\u663c\u591c\u4e0d\u606f\u3002<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"ccc-slide\" data-index=\"2\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/picsum.photos\/seed\/ocean\/1600\/900\"\r\n alt=\"\u6d77\u5929\u4e00\u8272\"\r\n loading=\"lazy\"\r\n \/>\r\n <div class=\"ccc-badge\">03 \/ 03<\/div>\r\n <div class=\"ccc-overlay\">\r\n <h2>\ud83c\udf0a \u6d77\u5929\u4e00\u8272<\/h2>\r\n <p>\u78a7\u6ce2\u4e07\u9877\uff0c\u5929\u9645\u65e0\u57a0\uff0c\u5fc3\u7075\u5728\u6b64\u627e\u5230\u5b81\u9759\u7684\u5f52\u5904\u3002<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n \r\n <\/div>\r\n \r\n\r\n <script>\r\n \/\/ ============================================================\r\n \/\/ \u5b8c\u5168\u9694\u79bb\u7684 JavaScript \u4f5c\u7528\u57df\uff08IIFE\uff09\r\n \/\/ \u65e0\u5360\u4f4d\u5757\uff0c\u6eda\u8f6e\u9a71\u52a8\u5207\u6362\uff0c\u4e0d\u4f9d\u8d56\u9875\u9762\u6eda\u52a8\r\n \/\/ ============================================================\r\n (function() {\r\n 'use strict';\r\n\r\n \/\/ ---------- DOM \u5f15\u7528 ----------\r\n const slides = document.querySelectorAll('.ccc-cover-carousel .ccc-slide');\r\n const dots = document.querySelectorAll('.ccc-cover-carousel .ccc-dot');\r\n const progressFill = document.getElementById('cccProgressFill');\r\n const scrollHint = document.getElementById('cccScrollHint');\r\n const totalSlides = slides.length;\r\n\r\n \/\/ ---------- \u5185\u90e8\u72b6\u6001 ----------\r\n let currentIndex = 0; \/\/ \u5f53\u524d\u663e\u793a\u7684\u5e7b\u706f\u7247\u7d22\u5f15 (0-based)\r\n let isTransitioning = false; \/\/ \u9632\u6b62\u5feb\u901f\u6eda\u8f6e\u5bfc\u81f4\u52a8\u753b\u51b2\u7a81\r\n\r\n \/\/ ---------- \u66f4\u65b0\u6240\u6709\u5e7b\u706f\u7247\u4f4d\u7f6e ----------\r\n function updateSlides(instant = false) {\r\n \/\/ \u4e3a\u6bcf\u5f20\u5e7b\u706f\u7247\u8ba1\u7b97\u504f\u79fb\u91cf\uff1a (i - currentIndex) * 100%\r\n slides.forEach((slide, i) => {\r\n const offset = (i - currentIndex) * 100;\r\n slide.style.transform = 'translateX(' + offset + '%)';\r\n \/\/ \u5982\u679c instant \u4e3a true\uff0c\u4e34\u65f6\u79fb\u9664\u8fc7\u6e21\u4ee5\u5b9e\u73b0\u77ac\u95f4\u8df3\u8f6c\uff08\u4f8b\u5982\u521d\u59cb\u5316\uff09\r\n if (instant) {\r\n slide.style.transition = 'none';\r\n } else {\r\n slide.style.transition = 'transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)';\r\n }\r\n });\r\n \/\/ \u5f3a\u5236\u56de\u6d41\u4ee5\u5e94\u7528\u8fc7\u6e21\uff08\u5982\u679c instant \u4e3a false\uff09\r\n if (!instant) {\r\n \/\/ \u8ba9\u6d4f\u89c8\u5668\u91cd\u7ed8\r\n void document.body.offsetHeight;\r\n }\r\n \/\/ \u6062\u590d\u8fc7\u6e21\uff08\u5982\u679c instant \u4e3a true\uff0c\u540e\u7eed\u5207\u6362\u4f1a\u91cd\u65b0\u52a0\u4e0a\u8fc7\u6e21\uff09\r\n if (instant) {\r\n \/\/ \u5ef6\u8fdf\u6062\u590d\u8fc7\u6e21\uff0c\u786e\u4fdd\u4f4d\u7f6e\u5df2\u8bbe\u5b9a\r\n setTimeout(() => {\r\n slides.forEach(slide => {\r\n slide.style.transition = 'transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)';\r\n });\r\n }, 50);\r\n }\r\n }\r\n\r\n \/\/ ---------- \u66f4\u65b0\u8fdb\u5ea6\u6761\u3001\u5706\u70b9\u548c\u63d0\u793a ----------\r\n function updateUI() {\r\n \/\/ \u8fdb\u5ea6\u6761\r\n const progress = (currentIndex + 1) \/ totalSlides * 100;\r\n progressFill.style.width = progress + '%';\r\n\r\n \/\/ \u5706\u70b9\r\n dots.forEach((dot, idx) => {\r\n dot.classList.toggle('ccc-active', idx === currentIndex);\r\n });\r\n\r\n \/\/ \u6eda\u52a8\u63d0\u793a\uff1a\u6700\u540e\u4e00\u5f20\u9690\u85cf\uff0c\u5426\u5219\u663e\u793a\r\n if (currentIndex === totalSlides - 1) {\r\n scrollHint.classList.add('ccc-hidden');\r\n } else {\r\n scrollHint.classList.remove('ccc-hidden');\r\n }\r\n }\r\n\r\n \/\/ ---------- \u5207\u6362\u5230\u6307\u5b9a\u7d22\u5f15\uff08\u5e26\u8282\u6d41\uff09 ----------\r\n function goToSlide(index) {\r\n if (isTransitioning) return;\r\n if (index < 0 || index >= totalSlides) return;\r\n if (index === currentIndex) return;\r\n\r\n isTransitioning = true;\r\n currentIndex = index;\r\n\r\n \/\/ \u66f4\u65b0\u5e7b\u706f\u7247\u4f4d\u7f6e\uff08\u5e26\u8fc7\u6e21\uff09\r\n updateSlides(false);\r\n\r\n \/\/ \u66f4\u65b0UI\r\n updateUI();\r\n\r\n \/\/ \u89e3\u9501\uff0c\u52a8\u753b\u65f6\u957f\u7ea6\u4e3a 0.5s\r\n setTimeout(() => {\r\n isTransitioning = false;\r\n }, 500);\r\n }\r\n\r\n \/\/ ---------- \u6eda\u8f6e\u4e8b\u4ef6\u5904\u7406 ----------\r\n function onWheel(e) {\r\n e.preventDefault(); \/\/ \u963b\u6b62\u9875\u9762\u6eda\u52a8\r\n const delta = e.deltaY || e.detail || 0;\r\n if (delta > 0) {\r\n \/\/ \u5411\u4e0b\u6eda -> \u4e0b\u4e00\u5f20\r\n if (currentIndex < totalSlides - 1) {\r\n goToSlide(currentIndex + 1);\r\n }\r\n } else if (delta < 0) {\r\n \/\/ \u5411\u4e0a\u6eda -> \u4e0a\u4e00\u5f20\r\n if (currentIndex > 0) {\r\n goToSlide(currentIndex - 1);\r\n }\r\n }\r\n }\r\n\r\n \/\/ ---------- \u952e\u76d8\u652f\u6301\uff08\u53ef\u9009\uff0c\u589e\u52a0\u53ef\u8bbf\u95ee\u6027\uff09 ----------\r\n function onKeyDown(e) {\r\n if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {\r\n e.preventDefault();\r\n if (currentIndex < totalSlides - 1) goToSlide(currentIndex + 1);\r\n } else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {\r\n e.preventDefault();\r\n if (currentIndex > 0) goToSlide(currentIndex - 1);\r\n }\r\n }\r\n\r\n \/\/ ---------- \u7a97\u53e3\u5927\u5c0f\u53d8\u5316\u65f6\uff0c\u786e\u4fdd\u5e7b\u706f\u7247\u94fa\u6ee1\uff08\u65e0\u989d\u5916\u64cd\u4f5c\uff0c\u4f46\u4fdd\u7559\uff09 ----------\r\n function onResize() {\r\n \/\/ \u65e0\u9700\u7279\u6b8a\u5904\u7406\uff0c\u56e0\u4e3a\u5e7b\u706f\u7247\u662f fixed \u5b9a\u4f4d\uff0c\u81ea\u9002\u5e94\r\n }\r\n\r\n \/\/ ============================================================\r\n \/\/ \u521d\u59cb\u5316\uff1a\u9ed8\u8ba4\u663e\u793a Slide 1 (\u7d22\u5f15 0)\r\n \/\/ ============================================================\r\n \/\/ \u7acb\u5373\u8bbe\u7f6e\u4f4d\u7f6e\uff0c\u65e0\u8fc7\u6e21\r\n updateSlides(true);\r\n \/\/ \u8bbe\u7f6e\u5f53\u524d\u7d22\u5f15\u4e3a 0\uff0c\u66f4\u65b0 UI\r\n currentIndex = 0;\r\n updateUI();\r\n\r\n \/\/ ---------- \u6302\u8f7d\u4e8b\u4ef6 ----------\r\n \/\/ \u6eda\u8f6e\u4e8b\u4ef6\uff08\u6ce8\u610f passive: false \u624d\u80fd preventDefault\uff09\r\n window.addEventListener('wheel', onWheel, { passive: false });\r\n \/\/ \u952e\u76d8\u4e8b\u4ef6\r\n window.addEventListener('keydown', onKeyDown);\r\n \/\/ \u7a97\u53e3\u8c03\u6574\r\n window.addEventListener('resize', onResize);\r\n\r\n \/\/ ---------- \u6e05\u7406\uff08\u867d\u7136\u4e0d\u662f\u5fc5\u987b\uff0c\u4f46\u4e3a\u826f\u597d\u4e60\u60ef\uff0c\u53ef\u63d0\u4f9b\u9500\u6bc1\u65b9\u6cd5\uff09 ----------\r\n \/\/ \u4f46\u6b64\u5904\u4e0d\u5b9e\u73b0\uff0c\u56e0\u4e3a\u9875\u9762\u751f\u547d\u5468\u671f\u5185\u901a\u5e38\u4e0d\u4f1a\u5378\u8f7d\r\n\r\n console.log('\u2705 \u9694\u79bb\u8f6e\u64ad\u5df2\u542f\u52a8 | \u65e0\u5360\u4f4d\u5757 | \u6eda\u8f6e\/\u952e\u76d8\u5207\u6362 | \u6587\u5b57\u5c45\u4e2d');\r\n })();\r\n \/\/ ============================================================\r\n \/\/ \u95ed\u5305\u7ed3\u675f\uff0c\u5168\u5c40\u65e0\u4efb\u4f55\u9057\u7559\u53d8\u91cf\r\n \/\/ ============================================================\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-587da87 e-con-full e-flex e-con e-parent\" data-id=\"587da87\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic","sticky":"top","sticky_on":["desktop","tablet","mobile"],"sticky_offset":0,"sticky_effects_offset":0,"sticky_anchor_link_offset":0}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e9ce700 elementor-widget elementor-widget-html\" data-id=\"e9ce700\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/swiper\/swiper-bundle.min.css\" \/>\r\n\r\n<div class=\"gl-wrapper\">\r\n <div class=\"gl-module-container\">\r\n <div class=\"swiper gl-swiper-container\">\r\n <div class=\"swiper-wrapper\">\r\n <div class=\"swiper-slide gl-slide-item\">\r\n <div class=\"gl-card-content\">\r\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/600\/800?random=1\" alt=\"Product\" class=\"gl-product-img\">\r\n <div class=\"gl-product-title\">\u6781\u5149\u7cfb\u5217 \u00b7 01<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"swiper-slide gl-slide-item\">\r\n <div class=\"gl-card-content\">\r\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/600\/800?random=2\" alt=\"Product\" class=\"gl-product-img\">\r\n <div class=\"gl-product-title\">\u6781\u5149\u7cfb\u5217 \u00b7 02<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"swiper-slide gl-slide-item\">\r\n <div class=\"gl-card-content\">\r\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/600\/800?random=3\" alt=\"Product\" class=\"gl-product-img\">\r\n <div class=\"gl-product-title\">\u6781\u5149\u7cfb\u5217 \u00b7 03<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"swiper-slide gl-slide-item\">\r\n <div class=\"gl-card-content\">\r\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/600\/800?random=4\" alt=\"Product\" class=\"gl-product-img\">\r\n <div class=\"gl-product-title\">\u6781\u5149\u7cfb\u5217 \u00b7 04<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"swiper-slide gl-slide-item\">\r\n <div class=\"gl-card-content\">\r\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/600\/800?random=5\" alt=\"Product\" class=\"gl-product-img\">\r\n <div class=\"gl-product-title\">\u6781\u5149\u7cfb\u5217 \u00b7 05<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"swiper-pagination gl-pagination\"><\/div>\r\n <\/div>\r\n\r\n <button class=\"gl-action-btn\">\u7acb\u5373\u63a2\u7d22\u66f4\u591a<\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<style>\r\n \/* \u4f7f\u7528\u552f\u4e00\u7684\u7c7b\u540d\u524d\u7f00 .gl- (Glow Line) \u786e\u4fdd\u4e0d\u5e72\u6270\u5916\u90e8 *\/\r\n .gl-wrapper {\r\n --gl-flow-color: #00f2ff;\r\n --gl-bg-inner: #1e293b;\r\n display: flex;\r\n justify-content: center;\r\n background: #0f172a; \/* \u5982\u679c\u8981\u5d4c\u5165\u73b0\u6709\u7f51\u9875\uff0c\u53ef\u5220\u9664\u6b64\u884c\u6216\u6539\u4e3a transparent *\/\r\n padding: 40px 0;\r\n }\r\n\r\n .gl-module-container {\r\n width: 100%;\r\n max-width: 500px;\r\n position: relative;\r\n }\r\n\r\n \/* \u8f6e\u64ad\u5361\u7247\u57fa\u7840\u6837\u5f0f *\/\r\n .gl-slide-item {\r\n position: relative;\r\n background: var(--gl-bg-inner);\r\n border-radius: 20px;\r\n overflow: hidden;\r\n padding: 4px; \/* \u8fb9\u6846\u539a\u5ea6 *\/\r\n display: flex !important;\r\n flex-direction: column;\r\n box-sizing: border-box;\r\n }\r\n\r\n \/* \u6c34\u6ef4\u6d41\u5149\u52a8\u753b\u5e95\u5c42 *\/\r\n .gl-slide-item::before {\r\n content: '';\r\n position: absolute;\r\n top: -50%;\r\n left: -50%;\r\n width: 200%;\r\n height: 200%;\r\n background: conic-gradient(\r\n transparent, \r\n var(--gl-flow-color), \r\n transparent 25%\r\n );\r\n animation: gl-rotate 3.5s linear infinite;\r\n z-index: 0;\r\n }\r\n\r\n \/* \u906e\u7f69\u5c42\uff0c\u5f62\u6210\u8fb9\u6846\u611f *\/\r\n .gl-slide-item::after {\r\n content: '';\r\n position: absolute;\r\n inset: 4px;\r\n background: var(--gl-bg-inner);\r\n border-radius: 16px;\r\n z-index: 1;\r\n }\r\n\r\n @keyframes gl-rotate {\r\n from { transform: rotate(0deg); }\r\n to { transform: rotate(360deg); }\r\n }\r\n\r\n \/* \u5185\u5bb9\u5c42 *\/\r\n .gl-card-content {\r\n position: relative;\r\n z-index: 2;\r\n width: 100%;\r\n text-align: center;\r\n }\r\n\r\n .gl-product-img {\r\n width: 100%;\r\n height: auto;\r\n aspect-ratio: 3\/4;\r\n object-fit: cover;\r\n border-radius: 14px 14px 0 0;\r\n display: block;\r\n }\r\n\r\n .gl-product-title {\r\n padding: 20px 10px;\r\n color: #ffffff;\r\n font-size: 1.25rem;\r\n font-weight: 600;\r\n letter-spacing: 1px;\r\n text-shadow: 0 0 8px rgba(0, 242, 255, 0.5);\r\n }\r\n\r\n \/* \u6309\u94ae\u6837\u5f0f *\/\r\n .gl-action-btn {\r\n display: block;\r\n margin: 30px auto 0;\r\n padding: 12px 35px;\r\n background: transparent;\r\n color: var(--gl-flow-color);\r\n border: 2px solid var(--gl-flow-color);\r\n border-radius: 50px;\r\n cursor: pointer;\r\n font-weight: bold;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 0 10px rgba(0, 242, 255, 0.2);\r\n }\r\n\r\n .gl-action-btn:hover {\r\n background: var(--gl-flow-color);\r\n color: #000;\r\n box-shadow: 0 0 25px var(--gl-flow-color);\r\n transform: translateY(-2px);\r\n }\r\n\r\n \/* \u81ea\u5b9a\u4e49\u5206\u9875\u5668\u989c\u8272 *\/\r\n .gl-pagination .swiper-pagination-bullet-active {\r\n background: var(--gl-flow-color) !important;\r\n }\r\n<\/style>\r\n\r\n<script src=\"https:\/\/unpkg.com\/swiper\/swiper-bundle.min.js\"><\/script>\r\n<script>\r\n (function() {\r\n \/\/ \u4f7f\u7528\u7acb\u5373\u6267\u884c\u51fd\u6570\u9632\u6b62\u53d8\u91cf\u6c61\u67d3\r\n const glSwiper = new Swiper(\".gl-swiper-container\", {\r\n effect: \"cards\",\r\n grabCursor: true,\r\n autoplay: {\r\n delay: 2500,\r\n disableOnInteraction: false,\r\n },\r\n pagination: {\r\n el: \".gl-pagination\",\r\n clickable: true,\r\n },\r\n });\r\n })();\r\n<\/script>\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>\u9694\u79bb\u6eda\u52a8\u8f6e\u64ad \u00b7 \u65e0\u5360\u4f4d\u5757 \u00b7 \u6eda\u8f6e\u5207\u6362 \u6eda\u52a8\u5207\u6362 01 \/ 03 \ud83c\udfd4\ufe0f \u5c71\u5ddd\u58ee\u4e3d \u5cf0\u5ce6\u53e0\u5d82\uff0c\u4e91\u6d77\u7ffb\u6d8c\uff0c\u5927\u81ea\u7136\u7684\u9b3c\u65a7\u795e\u5de5\u5728\u6b64\u5c3d\u663e\u3002 02 \/ 03 \ud83c\udf06 \u90fd\u5e02\u7e41\u534e \u9713\u8679\u95ea\u70c1\uff0c\u8f66\u6d41\u5982\u7ec7\uff0c\u73b0\u4ee3\u6587\u660e\u7684\u8109\u640f\u663c\u591c\u4e0d\u606f\u3002 03 \/ 03 \ud83c\udf0a \u6d77\u5929\u4e00\u8272 \u78a7\u6ce2\u4e07\u9877\uff0c\u5929\u9645\u65e0\u57a0\uff0c\u5fc3\u7075\u5728\u6b64\u627e\u5230\u5b81\u9759\u7684\u5f52\u5904\u3002 \u6781\u5149\u7cfb\u5217 \u00b7 01 \u6781\u5149\u7cfb\u5217 \u00b7 02 \u6781\u5149\u7cfb\u5217 \u00b7 03 \u6781\u5149\u7cfb\u5217 \u00b7 04 \u6781\u5149\u7cfb\u5217 \u00b7 05 \u7acb\u5373\u63a2\u7d22\u66f4\u591a<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-4024","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/xinyifametal.com\/zh\/wp-json\/wp\/v2\/pages\/4024","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xinyifametal.com\/zh\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/xinyifametal.com\/zh\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/xinyifametal.com\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xinyifametal.com\/zh\/wp-json\/wp\/v2\/comments?post=4024"}],"version-history":[{"count":46,"href":"https:\/\/xinyifametal.com\/zh\/wp-json\/wp\/v2\/pages\/4024\/revisions"}],"predecessor-version":[{"id":5582,"href":"https:\/\/xinyifametal.com\/zh\/wp-json\/wp\/v2\/pages\/4024\/revisions\/5582"}],"wp:attachment":[{"href":"https:\/\/xinyifametal.com\/zh\/wp-json\/wp\/v2\/media?parent=4024"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n \u9694\u79bb\u6eda\u52a8\u8f6e\u64ad \u00b7 \u65e0\u5360\u4f4d\u5757 \u00b7 \u6eda\u8f6e\u5207\u6362<\/title>\r\n <style>\r\n \/* ============================================================\r\n \u5168\u5c40\u96f6\u6c61\u67d3\uff1a\u6240\u6709\u6837\u5f0f\u9650\u5b9a\u5728 .ccc-cover-carousel \u5185\r\n \u540c\u65f6\u963b\u6b62\u9875\u9762\u6eda\u52a8\uff0c\u907f\u514d\u5e72\u6270\r\n ============================================================ *\/\r\n \/* \u9632\u6b62\u9875\u9762\u6eda\u52a8\uff08\u4ec5\u5bf9\u8f6e\u64ad\u6240\u5728\u9875\u9762\u751f\u6548\uff0c\u4e0d\u5f71\u54cd\u5176\u4ed6\u5143\u7d20\uff09 *\/\r\n body {\r\n overflow: hidden;\r\n margin: 0;\r\n height: 100vh;\r\n }\r\n\r\n .ccc-cover-carousel {\r\n display: block;\r\n position: relative;\r\n width: 100%;\r\n height: 100vh;\r\n overflow: hidden;\r\n background-color: #0b0d10;\r\n z-index: 0;\r\n }\r\n\r\n \/* \u4ec5\u91cd\u7f6e\u8f6e\u64ad\u5185\u90e8\u7684\u76d2\u6a21\u578b *\/\r\n .ccc-cover-carousel *,\r\n .ccc-cover-carousel *::before,\r\n .ccc-cover-carousel *::after {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n \/* ---- \u6eda\u52a8\u5bb9\u5668\uff08\u4e0d\u518d\u9700\u8981\u9ad8\u5ea6\u6491\u5f00\uff0c\u4ec5\u4f5c\u903b\u8f91\u5bb9\u5668\uff09 ---- *\/\r\n .ccc-cover-carousel .ccc-container {\r\n position: relative;\r\n width: 100%;\r\n height: 100vh;\r\n pointer-events: none;\r\n user-select: none;\r\n }\r\n\r\n \/* ---- \u6bcf\u4e00\u5f20\u5e7b\u706f\u7247 ---- *\/\r\n .ccc-cover-carousel .ccc-slide {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100vw;\r\n height: 100vh;\r\n overflow: hidden;\r\n will-change: transform;\r\n \/* \u521d\u59cb\u4f4d\u7f6e\u7531 JS \u63a7\u5236\uff0c\u9ed8\u8ba4\u4e3a 0 *\/\r\n transform: translateX(0);\r\n transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n z-index: 1;\r\n }\r\n\r\n \/* \u5c42\u7ea7\u9012\u589e\uff0c\u4f46\u6ed1\u52a8\u65f6\u6240\u6709\u5e7b\u706f\u7247\u5747\u53c2\u4e0e\u8fc7\u6e21 *\/\r\n .ccc-cover-carousel .ccc-slide[data-index=\"0\"] {\r\n z-index: 1;\r\n }\r\n .ccc-cover-carousel .ccc-slide[data-index=\"1\"] {\r\n z-index: 2;\r\n }\r\n .ccc-cover-carousel .ccc-slide[data-index=\"2\"] {\r\n z-index: 3;\r\n }\r\n\r\n \/* ---- \u56fe\u7247 ---- *\/\r\n .ccc-cover-carousel .ccc-slide img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n user-select: none;\r\n pointer-events: none;\r\n -webkit-user-drag: none;\r\n }\r\n\r\n \/* ---- \u6e10\u53d8\u906e\u7f69 + \u6587\u5b57\uff08\u5c45\u4e2d\u5bf9\u9f50\uff09 ---- *\/\r\n .ccc-cover-carousel .ccc-slide .ccc-overlay {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n padding: 60px 40px 50px;\r\n background: linear-gradient(transparent, rgba(0, 0, 0, 0.65) 40%, rgba(0, 0, 0, 0.85));\r\n pointer-events: none;\r\n user-select: none;\r\n color: #fff;\r\n text-align: center;\r\n }\r\n\r\n .ccc-cover-carousel .ccc-slide .ccc-overlay h2 {\r\n font-size: clamp(2.2rem, 6vw, 4.8rem);\r\n font-weight: 700;\r\n letter-spacing: 0.04em;\r\n margin-bottom: 10px;\r\n text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);\r\n color: #fff;\r\n }\r\n\r\n .ccc-cover-carousel .ccc-slide .ccc-overlay p {\r\n font-size: clamp(1rem, 1.6vw, 1.6rem);\r\n font-weight: 300;\r\n opacity: 0.85;\r\n text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);\r\n line-height: 1.6;\r\n color: #fff;\r\n max-width: 600px;\r\n margin: 0 auto;\r\n }\r\n\r\n \/* ---- \u5e8f\u53f7\u89d2\u6807 ---- *\/\r\n .ccc-cover-carousel .ccc-slide .ccc-badge {\r\n position: absolute;\r\n top: 30px;\r\n right: 40px;\r\n font-size: clamp(0.85rem, 1.2vw, 1.2rem);\r\n font-weight: 500;\r\n letter-spacing: 0.1em;\r\n color: rgba(255, 255, 255, 0.5);\r\n background: rgba(0, 0, 0, 0.3);\r\n backdrop-filter: blur(8px);\r\n padding: 8px 18px;\r\n border-radius: 30px;\r\n border: 1px solid rgba(255, 255, 255, 0.08);\r\n pointer-events: none;\r\n user-select: none;\r\n font-family: 'Segoe UI', 'PingFang SC', Roboto, sans-serif;\r\n }\r\n\r\n \/* ---- \u9876\u90e8\u8fdb\u5ea6\u6761 ---- *\/\r\n .ccc-cover-carousel .ccc-progress-bar {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 4px;\r\n background: rgba(255, 255, 255, 0.08);\r\n z-index: 1000;\r\n pointer-events: none;\r\n }\r\n\r\n .ccc-cover-carousel .ccc-progress-bar .ccc-progress-fill {\r\n height: 100%;\r\n width: 0%;\r\n background: linear-gradient(90deg, #f093fb, #f5576c, #4facfe);\r\n border-radius: 0 4px 4px 0;\r\n transition: width 0.3s ease;\r\n }\r\n\r\n \/* ---- \u5e95\u90e8\u6307\u793a\u5706\u70b9 ---- *\/\r\n .ccc-cover-carousel .ccc-dots {\r\n position: fixed;\r\n bottom: 40px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n display: flex;\r\n gap: 14px;\r\n z-index: 1000;\r\n pointer-events: none;\r\n }\r\n\r\n .ccc-cover-carousel .ccc-dots .ccc-dot {\r\n width: 12px;\r\n height: 12px;\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.25);\r\n border: 2px solid rgba(255, 255, 255, 0.1);\r\n transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);\r\n }\r\n\r\n .ccc-cover-carousel .ccc-dots .ccc-dot.ccc-active {\r\n background: #fff;\r\n border-color: #fff;\r\n transform: scale(1.25);\r\n box-shadow: 0 0 30px rgba(255, 255, 255, 0.25);\r\n }\r\n\r\n \/* ---- \u6eda\u52a8\u63d0\u793a\uff08\u5e95\u90e8\u5c0f\u7bad\u5934\uff09 ---- *\/\r\n .ccc-cover-carousel .ccc-scroll-hint {\r\n position: fixed;\r\n bottom: 80px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n z-index: 500;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 8px;\r\n color: rgba(255, 255, 255, 0.3);\r\n font-size: 0.75rem;\r\n letter-spacing: 0.06em;\r\n animation: ccc-bounceDown 2.4s ease-in-out infinite;\r\n pointer-events: none;\r\n user-select: none;\r\n transition: opacity 0.6s ease, transform 0.6s ease;\r\n font-family: 'Segoe UI', 'PingFang SC', Roboto, sans-serif;\r\n }\r\n\r\n .ccc-cover-carousel .ccc-scroll-hint.ccc-hidden {\r\n opacity: 0;\r\n transform: translateX(-50%) translateY(20px);\r\n }\r\n\r\n .ccc-cover-carousel .ccc-scroll-hint svg {\r\n width: 24px;\r\n height: 24px;\r\n fill: none;\r\n stroke: rgba(255, 255, 255, 0.25);\r\n stroke-width: 2;\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n }\r\n\r\n @keyframes ccc-bounceDown {\r\n 0%,\r\n 100% {\r\n transform: translateX(-50%) translateY(0);\r\n opacity: 0.4;\r\n }\r\n 50% {\r\n transform: translateX(-50%) translateY(12px);\r\n opacity: 1;\r\n }\r\n }\r\n\r\n \/* ---- \u54cd\u5e94\u5f0f\u5fae\u8c03 ---- *\/\r\n @media (max-width: 768px) {\r\n .ccc-cover-carousel .ccc-slide .ccc-overlay {\r\n padding: 40px 24px 35px;\r\n }\r\n .ccc-cover-carousel .ccc-slide .ccc-badge {\r\n top: 20px;\r\n right: 20px;\r\n padding: 6px 14px;\r\n font-size: 0.7rem;\r\n }\r\n .ccc-cover-carousel .ccc-dots {\r\n bottom: 28px;\r\n gap: 10px;\r\n }\r\n .ccc-cover-carousel .ccc-dots .ccc-dot {\r\n width: 10px;\r\n height: 10px;\r\n }\r\n .ccc-cover-carousel .ccc-scroll-hint {\r\n bottom: 60px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .ccc-cover-carousel .ccc-slide .ccc-overlay h2 {\r\n font-size: 1.8rem;\r\n }\r\n .ccc-cover-carousel .ccc-slide .ccc-overlay p {\r\n font-size: 0.9rem;\r\n }\r\n .ccc-cover-carousel .ccc-slide .ccc-overlay {\r\n padding: 30px 18px 28px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <div class=\"ccc-cover-carousel\">\r\n\r\n \r\n <div class=\"ccc-progress-bar\" id=\"cccProgressBar\">\r\n <div class=\"ccc-progress-fill\" id=\"cccProgressFill\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"ccc-dots\" id=\"cccDots\">\r\n <span class=\"ccc-dot ccc-active\" data-index=\"0\"><\/span>\r\n <span class=\"ccc-dot\" data-index=\"1\"><\/span>\r\n <span class=\"ccc-dot\" data-index=\"2\"><\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"ccc-scroll-hint\" id=\"cccScrollHint\">\r\n <span>\u6eda\u52a8\u5207\u6362<\/span>\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M7 10l5 5 5-5\" \/>\r\n <\/svg>\r\n <\/div>\r\n\r\n \r\n <div class=\"ccc-container\" id=\"cccContainer\">\r\n\r\n \r\n <div class=\"ccc-slide\" data-index=\"0\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/picsum.photos\/seed\/mountain\/1600\/900\"\r\n alt=\"\u5c71\u5ddd\u58ee\u4e3d\"\r\n loading=\"eager\"\r\n \/>\r\n <div class=\"ccc-badge\">01 \/ 03<\/div>\r\n <div class=\"ccc-overlay\">\r\n <h2>\ud83c\udfd4\ufe0f \u5c71\u5ddd\u58ee\u4e3d<\/h2>\r\n <p>\u5cf0\u5ce6\u53e0\u5d82\uff0c\u4e91\u6d77\u7ffb\u6d8c\uff0c\u5927\u81ea\u7136\u7684\u9b3c\u65a7\u795e\u5de5\u5728\u6b64\u5c3d\u663e\u3002<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"ccc-slide\" data-index=\"1\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/picsum.photos\/seed\/city\/1600\/900\"\r\n alt=\"\u90fd\u5e02\u7e41\u534e\"\r\n loading=\"lazy\"\r\n \/>\r\n <div class=\"ccc-badge\">02 \/ 03<\/div>\r\n <div class=\"ccc-overlay\">\r\n <h2>\ud83c\udf06 \u90fd\u5e02\u7e41\u534e<\/h2>\r\n <p>\u9713\u8679\u95ea\u70c1\uff0c\u8f66\u6d41\u5982\u7ec7\uff0c\u73b0\u4ee3\u6587\u660e\u7684\u8109\u640f\u663c\u591c\u4e0d\u606f\u3002<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"ccc-slide\" data-index=\"2\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/picsum.photos\/seed\/ocean\/1600\/900\"\r\n alt=\"\u6d77\u5929\u4e00\u8272\"\r\n loading=\"lazy\"\r\n \/>\r\n <div class=\"ccc-badge\">03 \/ 03<\/div>\r\n <div class=\"ccc-overlay\">\r\n <h2>\ud83c\udf0a \u6d77\u5929\u4e00\u8272<\/h2>\r\n <p>\u78a7\u6ce2\u4e07\u9877\uff0c\u5929\u9645\u65e0\u57a0\uff0c\u5fc3\u7075\u5728\u6b64\u627e\u5230\u5b81\u9759\u7684\u5f52\u5904\u3002<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n \r\n <\/div>\r\n \r\n\r\n <script>\r\n \/\/ ============================================================\r\n \/\/ \u5b8c\u5168\u9694\u79bb\u7684 JavaScript \u4f5c\u7528\u57df\uff08IIFE\uff09\r\n \/\/ \u65e0\u5360\u4f4d\u5757\uff0c\u6eda\u8f6e\u9a71\u52a8\u5207\u6362\uff0c\u4e0d\u4f9d\u8d56\u9875\u9762\u6eda\u52a8\r\n \/\/ ============================================================\r\n (function() {\r\n 'use strict';\r\n\r\n \/\/ ---------- DOM \u5f15\u7528 ----------\r\n const slides = document.querySelectorAll('.ccc-cover-carousel .ccc-slide');\r\n const dots = document.querySelectorAll('.ccc-cover-carousel .ccc-dot');\r\n const progressFill = document.getElementById('cccProgressFill');\r\n const scrollHint = document.getElementById('cccScrollHint');\r\n const totalSlides = slides.length;\r\n\r\n \/\/ ---------- \u5185\u90e8\u72b6\u6001 ----------\r\n let currentIndex = 0; \/\/ \u5f53\u524d\u663e\u793a\u7684\u5e7b\u706f\u7247\u7d22\u5f15 (0-based)\r\n let isTransitioning = false; \/\/ \u9632\u6b62\u5feb\u901f\u6eda\u8f6e\u5bfc\u81f4\u52a8\u753b\u51b2\u7a81\r\n\r\n \/\/ ---------- \u66f4\u65b0\u6240\u6709\u5e7b\u706f\u7247\u4f4d\u7f6e ----------\r\n function updateSlides(instant = false) {\r\n \/\/ \u4e3a\u6bcf\u5f20\u5e7b\u706f\u7247\u8ba1\u7b97\u504f\u79fb\u91cf\uff1a (i - currentIndex) * 100%\r\n slides.forEach((slide, i) => {\r\n const offset = (i - currentIndex) * 100;\r\n slide.style.transform = 'translateX(' + offset + '%)';\r\n \/\/ \u5982\u679c instant \u4e3a true\uff0c\u4e34\u65f6\u79fb\u9664\u8fc7\u6e21\u4ee5\u5b9e\u73b0\u77ac\u95f4\u8df3\u8f6c\uff08\u4f8b\u5982\u521d\u59cb\u5316\uff09\r\n if (instant) {\r\n slide.style.transition = 'none';\r\n } else {\r\n slide.style.transition = 'transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)';\r\n }\r\n });\r\n \/\/ \u5f3a\u5236\u56de\u6d41\u4ee5\u5e94\u7528\u8fc7\u6e21\uff08\u5982\u679c instant \u4e3a false\uff09\r\n if (!instant) {\r\n \/\/ \u8ba9\u6d4f\u89c8\u5668\u91cd\u7ed8\r\n void document.body.offsetHeight;\r\n }\r\n \/\/ \u6062\u590d\u8fc7\u6e21\uff08\u5982\u679c instant \u4e3a true\uff0c\u540e\u7eed\u5207\u6362\u4f1a\u91cd\u65b0\u52a0\u4e0a\u8fc7\u6e21\uff09\r\n if (instant) {\r\n \/\/ \u5ef6\u8fdf\u6062\u590d\u8fc7\u6e21\uff0c\u786e\u4fdd\u4f4d\u7f6e\u5df2\u8bbe\u5b9a\r\n setTimeout(() => {\r\n slides.forEach(slide => {\r\n slide.style.transition = 'transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)';\r\n });\r\n }, 50);\r\n }\r\n }\r\n\r\n \/\/ ---------- \u66f4\u65b0\u8fdb\u5ea6\u6761\u3001\u5706\u70b9\u548c\u63d0\u793a ----------\r\n function updateUI() {\r\n \/\/ \u8fdb\u5ea6\u6761\r\n const progress = (currentIndex + 1) \/ totalSlides * 100;\r\n progressFill.style.width = progress + '%';\r\n\r\n \/\/ \u5706\u70b9\r\n dots.forEach((dot, idx) => {\r\n dot.classList.toggle('ccc-active', idx === currentIndex);\r\n });\r\n\r\n \/\/ \u6eda\u52a8\u63d0\u793a\uff1a\u6700\u540e\u4e00\u5f20\u9690\u85cf\uff0c\u5426\u5219\u663e\u793a\r\n if (currentIndex === totalSlides - 1) {\r\n scrollHint.classList.add('ccc-hidden');\r\n } else {\r\n scrollHint.classList.remove('ccc-hidden');\r\n }\r\n }\r\n\r\n \/\/ ---------- \u5207\u6362\u5230\u6307\u5b9a\u7d22\u5f15\uff08\u5e26\u8282\u6d41\uff09 ----------\r\n function goToSlide(index) {\r\n if (isTransitioning) return;\r\n if (index < 0 || index >= totalSlides) return;\r\n if (index === currentIndex) return;\r\n\r\n isTransitioning = true;\r\n currentIndex = index;\r\n\r\n \/\/ \u66f4\u65b0\u5e7b\u706f\u7247\u4f4d\u7f6e\uff08\u5e26\u8fc7\u6e21\uff09\r\n updateSlides(false);\r\n\r\n \/\/ \u66f4\u65b0UI\r\n updateUI();\r\n\r\n \/\/ \u89e3\u9501\uff0c\u52a8\u753b\u65f6\u957f\u7ea6\u4e3a 0.5s\r\n setTimeout(() => {\r\n isTransitioning = false;\r\n }, 500);\r\n }\r\n\r\n \/\/ ---------- \u6eda\u8f6e\u4e8b\u4ef6\u5904\u7406 ----------\r\n function onWheel(e) {\r\n e.preventDefault(); \/\/ \u963b\u6b62\u9875\u9762\u6eda\u52a8\r\n const delta = e.deltaY || e.detail || 0;\r\n if (delta > 0) {\r\n \/\/ \u5411\u4e0b\u6eda -> \u4e0b\u4e00\u5f20\r\n if (currentIndex < totalSlides - 1) {\r\n goToSlide(currentIndex + 1);\r\n }\r\n } else if (delta < 0) {\r\n \/\/ \u5411\u4e0a\u6eda -> \u4e0a\u4e00\u5f20\r\n if (currentIndex > 0) {\r\n goToSlide(currentIndex - 1);\r\n }\r\n }\r\n }\r\n\r\n \/\/ ---------- \u952e\u76d8\u652f\u6301\uff08\u53ef\u9009\uff0c\u589e\u52a0\u53ef\u8bbf\u95ee\u6027\uff09 ----------\r\n function onKeyDown(e) {\r\n if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {\r\n e.preventDefault();\r\n if (currentIndex < totalSlides - 1) goToSlide(currentIndex + 1);\r\n } else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {\r\n e.preventDefault();\r\n if (currentIndex > 0) goToSlide(currentIndex - 1);\r\n }\r\n }\r\n\r\n \/\/ ---------- \u7a97\u53e3\u5927\u5c0f\u53d8\u5316\u65f6\uff0c\u786e\u4fdd\u5e7b\u706f\u7247\u94fa\u6ee1\uff08\u65e0\u989d\u5916\u64cd\u4f5c\uff0c\u4f46\u4fdd\u7559\uff09 ----------\r\n function onResize() {\r\n \/\/ \u65e0\u9700\u7279\u6b8a\u5904\u7406\uff0c\u56e0\u4e3a\u5e7b\u706f\u7247\u662f fixed \u5b9a\u4f4d\uff0c\u81ea\u9002\u5e94\r\n }\r\n\r\n \/\/ ============================================================\r\n \/\/ \u521d\u59cb\u5316\uff1a\u9ed8\u8ba4\u663e\u793a Slide 1 (\u7d22\u5f15 0)\r\n \/\/ ============================================================\r\n \/\/ \u7acb\u5373\u8bbe\u7f6e\u4f4d\u7f6e\uff0c\u65e0\u8fc7\u6e21\r\n updateSlides(true);\r\n \/\/ \u8bbe\u7f6e\u5f53\u524d\u7d22\u5f15\u4e3a 0\uff0c\u66f4\u65b0 UI\r\n currentIndex = 0;\r\n updateUI();\r\n\r\n \/\/ ---------- \u6302\u8f7d\u4e8b\u4ef6 ----------\r\n \/\/ \u6eda\u8f6e\u4e8b\u4ef6\uff08\u6ce8\u610f passive: false \u624d\u80fd preventDefault\uff09\r\n window.addEventListener('wheel', onWheel, { passive: false });\r\n \/\/ \u952e\u76d8\u4e8b\u4ef6\r\n window.addEventListener('keydown', onKeyDown);\r\n \/\/ \u7a97\u53e3\u8c03\u6574\r\n window.addEventListener('resize', onResize);\r\n\r\n \/\/ ---------- \u6e05\u7406\uff08\u867d\u7136\u4e0d\u662f\u5fc5\u987b\uff0c\u4f46\u4e3a\u826f\u597d\u4e60\u60ef\uff0c\u53ef\u63d0\u4f9b\u9500\u6bc1\u65b9\u6cd5\uff09 ----------\r\n \/\/ \u4f46\u6b64\u5904\u4e0d\u5b9e\u73b0\uff0c\u56e0\u4e3a\u9875\u9762\u751f\u547d\u5468\u671f\u5185\u901a\u5e38\u4e0d\u4f1a\u5378\u8f7d\r\n\r\n console.log('\u2705 \u9694\u79bb\u8f6e\u64ad\u5df2\u542f\u52a8 | \u65e0\u5360\u4f4d\u5757 | \u6eda\u8f6e\/\u952e\u76d8\u5207\u6362 | \u6587\u5b57\u5c45\u4e2d');\r\n })();\r\n \/\/ ============================================================\r\n \/\/ \u95ed\u5305\u7ed3\u675f\uff0c\u5168\u5c40\u65e0\u4efb\u4f55\u9057\u7559\u53d8\u91cf\r\n \/\/ ============================================================\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-587da87 e-con-full e-flex e-con e-parent\" data-id=\"587da87\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic","sticky":"top","sticky_on":["desktop","tablet","mobile"],"sticky_offset":0,"sticky_effects_offset":0,"sticky_anchor_link_offset":0}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e9ce700 elementor-widget elementor-widget-html\" data-id=\"e9ce700\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/swiper\/swiper-bundle.min.css\" \/>\r\n\r\n<div class=\"gl-wrapper\">\r\n <div class=\"gl-module-container\">\r\n <div class=\"swiper gl-swiper-container\">\r\n <div class=\"swiper-wrapper\">\r\n <div class=\"swiper-slide gl-slide-item\">\r\n <div class=\"gl-card-content\">\r\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/600\/800?random=1\" alt=\"Product\" class=\"gl-product-img\">\r\n <div class=\"gl-product-title\">\u6781\u5149\u7cfb\u5217 \u00b7 01<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"swiper-slide gl-slide-item\">\r\n <div class=\"gl-card-content\">\r\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/600\/800?random=2\" alt=\"Product\" class=\"gl-product-img\">\r\n <div class=\"gl-product-title\">\u6781\u5149\u7cfb\u5217 \u00b7 02<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"swiper-slide gl-slide-item\">\r\n <div class=\"gl-card-content\">\r\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/600\/800?random=3\" alt=\"Product\" class=\"gl-product-img\">\r\n <div class=\"gl-product-title\">\u6781\u5149\u7cfb\u5217 \u00b7 03<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"swiper-slide gl-slide-item\">\r\n <div class=\"gl-card-content\">\r\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/600\/800?random=4\" alt=\"Product\" class=\"gl-product-img\">\r\n <div class=\"gl-product-title\">\u6781\u5149\u7cfb\u5217 \u00b7 04<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"swiper-slide gl-slide-item\">\r\n <div class=\"gl-card-content\">\r\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/600\/800?random=5\" alt=\"Product\" class=\"gl-product-img\">\r\n <div class=\"gl-product-title\">\u6781\u5149\u7cfb\u5217 \u00b7 05<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"swiper-pagination gl-pagination\"><\/div>\r\n <\/div>\r\n\r\n <button class=\"gl-action-btn\">\u7acb\u5373\u63a2\u7d22\u66f4\u591a<\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<style>\r\n \/* \u4f7f\u7528\u552f\u4e00\u7684\u7c7b\u540d\u524d\u7f00 .gl- (Glow Line) \u786e\u4fdd\u4e0d\u5e72\u6270\u5916\u90e8 *\/\r\n .gl-wrapper {\r\n --gl-flow-color: #00f2ff;\r\n --gl-bg-inner: #1e293b;\r\n display: flex;\r\n justify-content: center;\r\n background: #0f172a; \/* \u5982\u679c\u8981\u5d4c\u5165\u73b0\u6709\u7f51\u9875\uff0c\u53ef\u5220\u9664\u6b64\u884c\u6216\u6539\u4e3a transparent *\/\r\n padding: 40px 0;\r\n }\r\n\r\n .gl-module-container {\r\n width: 100%;\r\n max-width: 500px;\r\n position: relative;\r\n }\r\n\r\n \/* \u8f6e\u64ad\u5361\u7247\u57fa\u7840\u6837\u5f0f *\/\r\n .gl-slide-item {\r\n position: relative;\r\n background: var(--gl-bg-inner);\r\n border-radius: 20px;\r\n overflow: hidden;\r\n padding: 4px; \/* \u8fb9\u6846\u539a\u5ea6 *\/\r\n display: flex !important;\r\n flex-direction: column;\r\n box-sizing: border-box;\r\n }\r\n\r\n \/* \u6c34\u6ef4\u6d41\u5149\u52a8\u753b\u5e95\u5c42 *\/\r\n .gl-slide-item::before {\r\n content: '';\r\n position: absolute;\r\n top: -50%;\r\n left: -50%;\r\n width: 200%;\r\n height: 200%;\r\n background: conic-gradient(\r\n transparent, \r\n var(--gl-flow-color), \r\n transparent 25%\r\n );\r\n animation: gl-rotate 3.5s linear infinite;\r\n z-index: 0;\r\n }\r\n\r\n \/* \u906e\u7f69\u5c42\uff0c\u5f62\u6210\u8fb9\u6846\u611f *\/\r\n .gl-slide-item::after {\r\n content: '';\r\n position: absolute;\r\n inset: 4px;\r\n background: var(--gl-bg-inner);\r\n border-radius: 16px;\r\n z-index: 1;\r\n }\r\n\r\n @keyframes gl-rotate {\r\n from { transform: rotate(0deg); }\r\n to { transform: rotate(360deg); }\r\n }\r\n\r\n \/* \u5185\u5bb9\u5c42 *\/\r\n .gl-card-content {\r\n position: relative;\r\n z-index: 2;\r\n width: 100%;\r\n text-align: center;\r\n }\r\n\r\n .gl-product-img {\r\n width: 100%;\r\n height: auto;\r\n aspect-ratio: 3\/4;\r\n object-fit: cover;\r\n border-radius: 14px 14px 0 0;\r\n display: block;\r\n }\r\n\r\n .gl-product-title {\r\n padding: 20px 10px;\r\n color: #ffffff;\r\n font-size: 1.25rem;\r\n font-weight: 600;\r\n letter-spacing: 1px;\r\n text-shadow: 0 0 8px rgba(0, 242, 255, 0.5);\r\n }\r\n\r\n \/* \u6309\u94ae\u6837\u5f0f *\/\r\n .gl-action-btn {\r\n display: block;\r\n margin: 30px auto 0;\r\n padding: 12px 35px;\r\n background: transparent;\r\n color: var(--gl-flow-color);\r\n border: 2px solid var(--gl-flow-color);\r\n border-radius: 50px;\r\n cursor: pointer;\r\n font-weight: bold;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 0 10px rgba(0, 242, 255, 0.2);\r\n }\r\n\r\n .gl-action-btn:hover {\r\n background: var(--gl-flow-color);\r\n color: #000;\r\n box-shadow: 0 0 25px var(--gl-flow-color);\r\n transform: translateY(-2px);\r\n }\r\n\r\n \/* \u81ea\u5b9a\u4e49\u5206\u9875\u5668\u989c\u8272 *\/\r\n .gl-pagination .swiper-pagination-bullet-active {\r\n background: var(--gl-flow-color) !important;\r\n }\r\n<\/style>\r\n\r\n<script src=\"https:\/\/unpkg.com\/swiper\/swiper-bundle.min.js\"><\/script>\r\n<script>\r\n (function() {\r\n \/\/ \u4f7f\u7528\u7acb\u5373\u6267\u884c\u51fd\u6570\u9632\u6b62\u53d8\u91cf\u6c61\u67d3\r\n const glSwiper = new Swiper(\".gl-swiper-container\", {\r\n effect: \"cards\",\r\n grabCursor: true,\r\n autoplay: {\r\n delay: 2500,\r\n disableOnInteraction: false,\r\n },\r\n pagination: {\r\n el: \".gl-pagination\",\r\n clickable: true,\r\n },\r\n });\r\n })();\r\n<\/script>\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>\u9694\u79bb\u6eda\u52a8\u8f6e\u64ad \u00b7 \u65e0\u5360\u4f4d\u5757 \u00b7 \u6eda\u8f6e\u5207\u6362 \u6eda\u52a8\u5207\u6362 01 \/ 03 \ud83c\udfd4\ufe0f \u5c71\u5ddd\u58ee\u4e3d \u5cf0\u5ce6\u53e0\u5d82\uff0c\u4e91\u6d77\u7ffb\u6d8c\uff0c\u5927\u81ea\u7136\u7684\u9b3c\u65a7\u795e\u5de5\u5728\u6b64\u5c3d\u663e\u3002 02 \/ 03 \ud83c\udf06 \u90fd\u5e02\u7e41\u534e \u9713\u8679\u95ea\u70c1\uff0c\u8f66\u6d41\u5982\u7ec7\uff0c\u73b0\u4ee3\u6587\u660e\u7684\u8109\u640f\u663c\u591c\u4e0d\u606f\u3002 03 \/ 03 \ud83c\udf0a \u6d77\u5929\u4e00\u8272 \u78a7\u6ce2\u4e07\u9877\uff0c\u5929\u9645\u65e0\u57a0\uff0c\u5fc3\u7075\u5728\u6b64\u627e\u5230\u5b81\u9759\u7684\u5f52\u5904\u3002 \u6781\u5149\u7cfb\u5217 \u00b7 01 \u6781\u5149\u7cfb\u5217 \u00b7 02 \u6781\u5149\u7cfb\u5217 \u00b7 03 \u6781\u5149\u7cfb\u5217 \u00b7 04 \u6781\u5149\u7cfb\u5217 \u00b7 05 \u7acb\u5373\u63a2\u7d22\u66f4\u591a<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-4024","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/xinyifametal.com\/zh\/wp-json\/wp\/v2\/pages\/4024","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xinyifametal.com\/zh\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/xinyifametal.com\/zh\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/xinyifametal.com\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xinyifametal.com\/zh\/wp-json\/wp\/v2\/comments?post=4024"}],"version-history":[{"count":46,"href":"https:\/\/xinyifametal.com\/zh\/wp-json\/wp\/v2\/pages\/4024\/revisions"}],"predecessor-version":[{"id":5582,"href":"https:\/\/xinyifametal.com\/zh\/wp-json\/wp\/v2\/pages\/4024\/revisions\/5582"}],"wp:attachment":[{"href":"https:\/\/xinyifametal.com\/zh\/wp-json\/wp\/v2\/media?parent=4024"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}