\u4ea7\u54c1\u8be6\u60c5 – [\u4ea7\u54c1\u540d\u79f0] – \u83b2\u82b1\u51c0\u6e90<\/title>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@300;400;700&family=Playfair+Display:wght@700&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Noto Sans SC', sans-serif;\n color: #333;\n background-color: #f8f8f8;\n }\n h1, h2, h3, h4 {\n font-family: 'Playfair Display', serif;\n color: #1a4d2e; \/* Deep green *\/\n }\n .btn-primary {\n background-color: #4a934a; \/* A vibrant green *\/\n color: white;\n padding: 1rem 2rem;\n border-radius: 0.5rem;\n transition: background-color 0.3s ease;\n display: inline-block;\n text-decoration: none;\n }\n .btn-primary:hover {\n background-color: #3b7a3b;\n }\n .btn-secondary {\n background-color: #e2e8f0; \/* Light gray *\/\n color: #4a5568;\n padding: 1rem 2rem;\n border-radius: 0.5rem;\n transition: background-color 0.3s ease, color 0.3s ease;\n display: inline-block;\n text-decoration: none;\n }\n .btn-secondary:hover {\n background-color: #cbd5e0;\n color: #2d3748;\n }\n .section-title {\n position: relative;\n display: inline-block;\n margin-bottom: 2rem;\n }\n .section-title::after {\n content: '';\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n bottom: -10px;\n width: 60px;\n height: 4px;\n background-color: #4a934a;\n border-radius: 2px;\n }\n \/* Product image for direct display (used for content images) *\/\n .content-image {\n width: 100%;\n height: auto;\n object-fit: contain;\n background-color: #f8f8f8;\n border-radius: 0.75rem;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n margin-bottom: 1.5rem; \/* Spacing between content images *\/\n }\n\n \/* Carousel specific styles - UPDATED for display:none\/block *\/\n .carousel-container {\n position: relative;\n width: 100%;\n max-width: 500px; \/* Max width for the carousel *\/\n margin: 0 auto;\n overflow: hidden; \/* Crucial for hiding extra images *\/\n border-radius: 0.75rem;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n height: 350px; \/* Define a height to prevent layout shift if images load slowly *\/\n }\n .carousel-images {\n width: 100%;\n height: 100%;\n \/* Removed position: relative here as images will not be absolutely positioned *\/\n }\n .carousel-images img {\n display: none; \/* Hidden by default *\/\n width: 100%;\n height: 100%;\n object-fit: contain;\n \/* Removed opacity, transition, position, top, left, z-index as they are not needed for display:none\/block *\/\n }\n .carousel-images img.active {\n display: block; \/* Only active image is visible *\/\n }\n .carousel-button {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n background-color: rgba(0,0,0,0.5);\n color: white;\n border: none;\n padding: 0.75rem 0.5rem;\n cursor: pointer;\n z-index: 10;\n font-size: 1.5rem;\n border-radius: 0.5rem;\n transition: background-color 0.3s ease;\n }\n .carousel-button:hover {\n background-color: rgba(0,0,0,0.7);\n }\n .carousel-button.prev {\n left: 10px;\n }\n .carousel-button.next {\n right: 10px;\n }\n .carousel-dots {\n position: absolute;\n bottom: 10px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n gap: 8px;\n z-index: 10;\n }\n .carousel-dot {\n width: 10px;\n height: 10px;\n background-color: rgba(255,255,255,0.5);\n border-radius: 50%;\n cursor: pointer;\n transition: background-color 0.3s ease;\n }\n .carousel-dot.active {\n background-color: white;\n }\n\n table {\n width: 100%;\n border-collapse: collapse;\n margin-bottom: 1.5rem;\n }\n th, td {\n border: 1px solid #e2e8f0;\n padding: 0.75rem;\n text-align: left;\n }\n th {\n background-color: #edf2f7;\n font-weight: 600;\n color: #2d3748;\n }\n \/* Removed sub-nav-link styles as sub-navigation is removed *\/\n <\/style>\n<\/head>\n<body class=\"bg-gray-50\">\n\n <main>\n \n <section id=\"product-overview\" class=\"py-16 md:py-24 bg-white\">\n <div class=\"container mx-auto px-4\">\n <h2 class=\"text-4xl section-title text-center mb-12\">\u91d1\u53d1\u53ef\u751f\u7269\u964d\u89e3\u4e01\u8148\u624b\u5957<\/h2>\n <div class=\"flex flex-col md:flex-row items-center md:items-start gap-12 max-w-5xl mx-auto\">\n <div class=\"md:w-1\/2 flex justify-center\">\n \n <div class=\"carousel-container\">\n <div class=\"carousel-images\" id=\"productCarousel\">\n <img decoding=\"async\" src=\"https:\/\/lotuspure.io\/wp-content\/uploads\/2025\/07\/566f4ab5d6c1457c9d08f326f5803c56.421x300.1.jpg\" alt=\"\u4ea7\u54c1\u56fe\u7247 1\" class=\"active\"> \n <img decoding=\"async\" src=\"https:\/\/lotuspure.io\/wp-content\/uploads\/2025\/07\/2022101155951.jpg\" alt=\"\u4ea7\u54c1\u56fe\u7247 2\">\n <\/div>\n <button class=\"carousel-button prev\" onclick=\"moveSlide(-1)\">❮<\/button>\n <button class=\"carousel-button next\" onclick=\"moveSlide(1)\">❯<\/button>\n <div class=\"carousel-dots\" id=\"carouselDots\">\n <span class=\"carousel-dot active\" onclick=\"currentSlide(0)\"><\/span>\n <span class=\"carousel-dot\" onclick=\"currentSlide(1)\"><\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"md:w-1\/2 text-left\">\n \n <h3 class=\"text-3xl font-bold mb-4 text-green-700\">\u4ea7\u54c1\u89c4\u683c<\/h3>\n <ul class=\"list-disc pl-6 text-gray-700 space-y-2 mb-6\">\n <li><strong>\u4ea7\u54c1\u4ee3\u7801:<\/strong> BIO-G05<\/li>\n <li><strong>\u989c\u8272:<\/strong> \u7eff\u8272<\/li>\n <li><strong>\u6807\u51c6:<\/strong> FDA 510K\/CE, ASTM D6319, ASTM D6978, ASTM D5511, EN 455, EN374<\/li>\n <li><strong>\u7c7b\u578b:<\/strong> AQL 1.5, \u53ef\u751f\u7269\u964d\u89e3<\/li>\n <li><strong>\u5c3a\u5bf8:<\/strong> S, M, L, XL<\/li>\n <li><strong>\u4fdd\u8d28\u671f:<\/strong> 5 \u5e74<\/li>\n <\/ul>\n\n <div class=\"flex gap-4 mt-4\">\n <a href=\"#contact\" class=\"btn-primary inline-block text-lg\">\u83b7\u53d6\u62a5\u4ef7<\/a>\n <a href=\"https:\/\/lotuspure.io\/wp-content\/uploads\/2025\/07\/KINGFABiodegradableNitrileGlovesBrochure.pdf\" class=\"btn-secondary inline-block text-lg\" target=\"_blank\">\u4e0b\u8f7d\u624b\u518c<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-16 md:py-24 bg-gray-100\">\n <div class=\"container mx-auto px-4 text-center max-w-5xl\">\n <h2 class=\"text-4xl section-title mb-12\">\u4ea7\u54c1\u8be6\u60c5<\/h2>\n <div class=\"flex flex-col items-center\">\n <img decoding=\"async\" src=\"https:\/\/lotuspure.io\/wp-content\/uploads\/2025\/07\/1-scaled.jpg\" alt=\"\u4ea7\u54c1\u8be6\u60c5\u56fe 1\" class=\"content-image\">\n <img decoding=\"async\" src=\"https:\/\/lotuspure.io\/wp-content\/uploads\/2025\/07\/2-scaled.jpg\" alt=\"\u4ea7\u54c1\u8be6\u60c5\u56fe 2\" class=\"content-image\">\n <img decoding=\"async\" src=\"https:\/\/lotuspure.io\/wp-content\/uploads\/2025\/07\/3-scaled.jpg\" alt=\"\u4ea7\u54c1\u8be6\u60c5\u56fe 3\" class=\"content-image\">\n <img decoding=\"async\" src=\"https:\/\/lotuspure.io\/wp-content\/uploads\/2025\/07\/4-scaled.jpg\" alt=\"\u4ea7\u54c1\u8be6\u60c5\u56fe 4\" class=\"content-image\">\n <img decoding=\"async\" src=\"https:\/\/lotuspure.io\/wp-content\/uploads\/2025\/07\/5-scaled.jpg\" alt=\"\u4ea7\u54c1\u8be6\u60c5\u56fe 5\" class=\"content-image\">\n <img decoding=\"async\" src=\"https:\/\/lotuspure.io\/wp-content\/uploads\/2025\/07\/6-scaled.jpg\" alt=\"\u4ea7\u54c1\u8be6\u60c5\u56fe 6\" class=\"content-image\">\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"contact\" class=\"py-16 md:py-24 bg-white\">\n <div class=\"container mx-auto px-4 text-center\">\n <h2 class=\"text-4xl section-title mb-12\">\u8054\u7cfb\u6211\u4eec<\/h2>\n <p class=\"text-lg mb-8 text-gray-700\">\u6211\u4eec\u671f\u5f85\u4e0e\u60a8\u643a\u624b\uff0c\u5171\u521b\u6d01\u51c0\u3001\u5065\u5eb7\u3001\u53ef\u6301\u7eed\u7684\u7f8e\u597d\u672a\u6765\u3002<\/p>\n <div class=\"max-w-2xl mx-auto bg-gray-100 p-8 rounded-lg shadow-md\">\n <form class=\"space-y-6\">\n <div>\n <label for=\"name\" class=\"block text-left text-gray-700 font-bold mb-2\">\u60a8\u7684\u59d3\u540d<\/label>\n <input type=\"text\" id=\"name\" name=\"name\" class=\"w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500\" placeholder=\"\u8bf7\u8f93\u5165\u60a8\u7684\u59d3\u540d\">\n <\/div>\n <div>\n <label for=\"email\" class=\"block text-left text-gray-700 font-bold mb-2\">\u60a8\u7684\u90ae\u7bb1<\/label>\n <input type=\"email\" id=\"email\" name=\"email\" class=\"w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500\" placeholder=\"\u8bf7\u8f93\u5165\u60a8\u7684\u90ae\u7bb1\">\n <\/div>\n <div>\n <label for=\"message\" class=\"block text-left text-gray-700 font-bold mb-2\">\u60a8\u7684\u7559\u8a00<\/label>\n <textarea id=\"message\" name=\"message\" rows=\"5\" class=\"w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500\" placeholder=\"\u60a8\u6709\u4ec0\u4e48\u60f3\u5bf9\u6211\u4eec\u8bf4\u7684\u5417\uff1f\"><\/textarea>\n <\/div>\n <button type=\"submit\" class=\"btn-primary w-full\">\u53d1\u9001\u7559\u8a00<\/button>\n <\/form>\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n\n <script>\n \/\/ Carousel JavaScript - UPDATED LOGIC\n let slideIndex = 0;\n const carouselImagesContainer = document.getElementById('productCarousel');\n const slides = carouselImagesContainer.children; \/\/ This will be an HTMLCollection of <img> elements\n const dots = document.getElementById('carouselDots').children;\n\n \/\/ Function to create dots dynamically\n function createDots() {\n dots.innerHTML = ''; \/\/ Clear existing dots\n for (let i = 0; i < slides.length; i++) {\n const dot = document.createElement('span');\n dot.classList.add('carousel-dot');\n dot.onclick = () => currentSlide(i);\n document.getElementById('carouselDots').appendChild(dot);\n }\n }\n\n function showSlides() {\n \/\/ Hide all slides and deactivate all dots\n for (let i = 0; i < slides.length; i++) {\n slides[i].classList.remove('active');\n if (dots[i]) { \/\/ Check if dot exists before trying to access\n dots[i].classList.remove('active');\n }\n }\n \/\/ Show the current slide and activate the corresponding dot\n slides[slideIndex].classList.add('active');\n if (dots[slideIndex]) { \/\/ Check if dot exists before trying to access\n dots[slideIndex].classList.add('active');\n }\n }\n\n function moveSlide(n) {\n slideIndex += n;\n if (slideIndex >= slides.length) {\n slideIndex = 0; \/\/ Loop back to the first slide\n }\n if (slideIndex < 0) {\n slideIndex = slides.length - 1; \/\/ Loop to the last slide\n }\n showSlides();\n }\n\n function currentSlide(n) {\n slideIndex = n;\n showSlides();\n }\n\n \/\/ Initialize carousel on page load\n document.addEventListener('DOMContentLoaded', () => {\n createDots(); \/\/ Create dots when the DOM is loaded\n showSlides();\n });\n <\/script>\n<\/body>\n<\/html>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u4ea7\u54c1\u8be6\u60c5 – [\u4ea7\u54c1\u540d\u79f0] – \u83b2\u82b1\u51c0\u6e90 \u91d1\u53d1\u53ef\u751f\u7269\u964d\u89e3\u4e01\u8148\u624b\u5957 ❮ & […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":165,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-379","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lotuspure.io\/index.php?rest_route=\/wp\/v2\/pages\/379","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lotuspure.io\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lotuspure.io\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lotuspure.io\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lotuspure.io\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=379"}],"version-history":[{"count":14,"href":"https:\/\/lotuspure.io\/index.php?rest_route=\/wp\/v2\/pages\/379\/revisions"}],"predecessor-version":[{"id":430,"href":"https:\/\/lotuspure.io\/index.php?rest_route=\/wp\/v2\/pages\/379\/revisions\/430"}],"up":[{"embeddable":true,"href":"https:\/\/lotuspure.io\/index.php?rest_route=\/wp\/v2\/pages\/165"}],"wp:attachment":[{"href":"https:\/\/lotuspure.io\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=379"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\n\n\n \n \n \u4ea7\u54c1\u8be6\u60c5 – [\u4ea7\u54c1\u540d\u79f0] – \u83b2\u82b1\u51c0\u6e90<\/title>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@300;400;700&family=Playfair+Display:wght@700&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Noto Sans SC', sans-serif;\n color: #333;\n background-color: #f8f8f8;\n }\n h1, h2, h3, h4 {\n font-family: 'Playfair Display', serif;\n color: #1a4d2e; \/* Deep green *\/\n }\n .btn-primary {\n background-color: #4a934a; \/* A vibrant green *\/\n color: white;\n padding: 1rem 2rem;\n border-radius: 0.5rem;\n transition: background-color 0.3s ease;\n display: inline-block;\n text-decoration: none;\n }\n .btn-primary:hover {\n background-color: #3b7a3b;\n }\n .btn-secondary {\n background-color: #e2e8f0; \/* Light gray *\/\n color: #4a5568;\n padding: 1rem 2rem;\n border-radius: 0.5rem;\n transition: background-color 0.3s ease, color 0.3s ease;\n display: inline-block;\n text-decoration: none;\n }\n .btn-secondary:hover {\n background-color: #cbd5e0;\n color: #2d3748;\n }\n .section-title {\n position: relative;\n display: inline-block;\n margin-bottom: 2rem;\n }\n .section-title::after {\n content: '';\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n bottom: -10px;\n width: 60px;\n height: 4px;\n background-color: #4a934a;\n border-radius: 2px;\n }\n \/* Product image for direct display (used for content images) *\/\n .content-image {\n width: 100%;\n height: auto;\n object-fit: contain;\n background-color: #f8f8f8;\n border-radius: 0.75rem;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n margin-bottom: 1.5rem; \/* Spacing between content images *\/\n }\n\n \/* Carousel specific styles - UPDATED for display:none\/block *\/\n .carousel-container {\n position: relative;\n width: 100%;\n max-width: 500px; \/* Max width for the carousel *\/\n margin: 0 auto;\n overflow: hidden; \/* Crucial for hiding extra images *\/\n border-radius: 0.75rem;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n height: 350px; \/* Define a height to prevent layout shift if images load slowly *\/\n }\n .carousel-images {\n width: 100%;\n height: 100%;\n \/* Removed position: relative here as images will not be absolutely positioned *\/\n }\n .carousel-images img {\n display: none; \/* Hidden by default *\/\n width: 100%;\n height: 100%;\n object-fit: contain;\n \/* Removed opacity, transition, position, top, left, z-index as they are not needed for display:none\/block *\/\n }\n .carousel-images img.active {\n display: block; \/* Only active image is visible *\/\n }\n .carousel-button {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n background-color: rgba(0,0,0,0.5);\n color: white;\n border: none;\n padding: 0.75rem 0.5rem;\n cursor: pointer;\n z-index: 10;\n font-size: 1.5rem;\n border-radius: 0.5rem;\n transition: background-color 0.3s ease;\n }\n .carousel-button:hover {\n background-color: rgba(0,0,0,0.7);\n }\n .carousel-button.prev {\n left: 10px;\n }\n .carousel-button.next {\n right: 10px;\n }\n .carousel-dots {\n position: absolute;\n bottom: 10px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n gap: 8px;\n z-index: 10;\n }\n .carousel-dot {\n width: 10px;\n height: 10px;\n background-color: rgba(255,255,255,0.5);\n border-radius: 50%;\n cursor: pointer;\n transition: background-color 0.3s ease;\n }\n .carousel-dot.active {\n background-color: white;\n }\n\n table {\n width: 100%;\n border-collapse: collapse;\n margin-bottom: 1.5rem;\n }\n th, td {\n border: 1px solid #e2e8f0;\n padding: 0.75rem;\n text-align: left;\n }\n th {\n background-color: #edf2f7;\n font-weight: 600;\n color: #2d3748;\n }\n \/* Removed sub-nav-link styles as sub-navigation is removed *\/\n <\/style>\n<\/head>\n<body class=\"bg-gray-50\">\n\n <main>\n \n <section id=\"product-overview\" class=\"py-16 md:py-24 bg-white\">\n <div class=\"container mx-auto px-4\">\n <h2 class=\"text-4xl section-title text-center mb-12\">\u91d1\u53d1\u53ef\u751f\u7269\u964d\u89e3\u4e01\u8148\u624b\u5957<\/h2>\n <div class=\"flex flex-col md:flex-row items-center md:items-start gap-12 max-w-5xl mx-auto\">\n <div class=\"md:w-1\/2 flex justify-center\">\n \n <div class=\"carousel-container\">\n <div class=\"carousel-images\" id=\"productCarousel\">\n <img decoding=\"async\" src=\"https:\/\/lotuspure.io\/wp-content\/uploads\/2025\/07\/566f4ab5d6c1457c9d08f326f5803c56.421x300.1.jpg\" alt=\"\u4ea7\u54c1\u56fe\u7247 1\" class=\"active\"> \n <img decoding=\"async\" src=\"https:\/\/lotuspure.io\/wp-content\/uploads\/2025\/07\/2022101155951.jpg\" alt=\"\u4ea7\u54c1\u56fe\u7247 2\">\n <\/div>\n <button class=\"carousel-button prev\" onclick=\"moveSlide(-1)\">❮<\/button>\n <button class=\"carousel-button next\" onclick=\"moveSlide(1)\">❯<\/button>\n <div class=\"carousel-dots\" id=\"carouselDots\">\n <span class=\"carousel-dot active\" onclick=\"currentSlide(0)\"><\/span>\n <span class=\"carousel-dot\" onclick=\"currentSlide(1)\"><\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"md:w-1\/2 text-left\">\n \n <h3 class=\"text-3xl font-bold mb-4 text-green-700\">\u4ea7\u54c1\u89c4\u683c<\/h3>\n <ul class=\"list-disc pl-6 text-gray-700 space-y-2 mb-6\">\n <li><strong>\u4ea7\u54c1\u4ee3\u7801:<\/strong> BIO-G05<\/li>\n <li><strong>\u989c\u8272:<\/strong> \u7eff\u8272<\/li>\n <li><strong>\u6807\u51c6:<\/strong> FDA 510K\/CE, ASTM D6319, ASTM D6978, ASTM D5511, EN 455, EN374<\/li>\n <li><strong>\u7c7b\u578b:<\/strong> AQL 1.5, \u53ef\u751f\u7269\u964d\u89e3<\/li>\n <li><strong>\u5c3a\u5bf8:<\/strong> S, M, L, XL<\/li>\n <li><strong>\u4fdd\u8d28\u671f:<\/strong> 5 \u5e74<\/li>\n <\/ul>\n\n <div class=\"flex gap-4 mt-4\">\n <a href=\"#contact\" class=\"btn-primary inline-block text-lg\">\u83b7\u53d6\u62a5\u4ef7<\/a>\n <a href=\"https:\/\/lotuspure.io\/wp-content\/uploads\/2025\/07\/KINGFABiodegradableNitrileGlovesBrochure.pdf\" class=\"btn-secondary inline-block text-lg\" target=\"_blank\">\u4e0b\u8f7d\u624b\u518c<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-16 md:py-24 bg-gray-100\">\n <div class=\"container mx-auto px-4 text-center max-w-5xl\">\n <h2 class=\"text-4xl section-title mb-12\">\u4ea7\u54c1\u8be6\u60c5<\/h2>\n <div class=\"flex flex-col items-center\">\n <img decoding=\"async\" src=\"https:\/\/lotuspure.io\/wp-content\/uploads\/2025\/07\/1-scaled.jpg\" alt=\"\u4ea7\u54c1\u8be6\u60c5\u56fe 1\" class=\"content-image\">\n <img decoding=\"async\" src=\"https:\/\/lotuspure.io\/wp-content\/uploads\/2025\/07\/2-scaled.jpg\" alt=\"\u4ea7\u54c1\u8be6\u60c5\u56fe 2\" class=\"content-image\">\n <img decoding=\"async\" src=\"https:\/\/lotuspure.io\/wp-content\/uploads\/2025\/07\/3-scaled.jpg\" alt=\"\u4ea7\u54c1\u8be6\u60c5\u56fe 3\" class=\"content-image\">\n <img decoding=\"async\" src=\"https:\/\/lotuspure.io\/wp-content\/uploads\/2025\/07\/4-scaled.jpg\" alt=\"\u4ea7\u54c1\u8be6\u60c5\u56fe 4\" class=\"content-image\">\n <img decoding=\"async\" src=\"https:\/\/lotuspure.io\/wp-content\/uploads\/2025\/07\/5-scaled.jpg\" alt=\"\u4ea7\u54c1\u8be6\u60c5\u56fe 5\" class=\"content-image\">\n <img decoding=\"async\" src=\"https:\/\/lotuspure.io\/wp-content\/uploads\/2025\/07\/6-scaled.jpg\" alt=\"\u4ea7\u54c1\u8be6\u60c5\u56fe 6\" class=\"content-image\">\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"contact\" class=\"py-16 md:py-24 bg-white\">\n <div class=\"container mx-auto px-4 text-center\">\n <h2 class=\"text-4xl section-title mb-12\">\u8054\u7cfb\u6211\u4eec<\/h2>\n <p class=\"text-lg mb-8 text-gray-700\">\u6211\u4eec\u671f\u5f85\u4e0e\u60a8\u643a\u624b\uff0c\u5171\u521b\u6d01\u51c0\u3001\u5065\u5eb7\u3001\u53ef\u6301\u7eed\u7684\u7f8e\u597d\u672a\u6765\u3002<\/p>\n <div class=\"max-w-2xl mx-auto bg-gray-100 p-8 rounded-lg shadow-md\">\n <form class=\"space-y-6\">\n <div>\n <label for=\"name\" class=\"block text-left text-gray-700 font-bold mb-2\">\u60a8\u7684\u59d3\u540d<\/label>\n <input type=\"text\" id=\"name\" name=\"name\" class=\"w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500\" placeholder=\"\u8bf7\u8f93\u5165\u60a8\u7684\u59d3\u540d\">\n <\/div>\n <div>\n <label for=\"email\" class=\"block text-left text-gray-700 font-bold mb-2\">\u60a8\u7684\u90ae\u7bb1<\/label>\n <input type=\"email\" id=\"email\" name=\"email\" class=\"w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500\" placeholder=\"\u8bf7\u8f93\u5165\u60a8\u7684\u90ae\u7bb1\">\n <\/div>\n <div>\n <label for=\"message\" class=\"block text-left text-gray-700 font-bold mb-2\">\u60a8\u7684\u7559\u8a00<\/label>\n <textarea id=\"message\" name=\"message\" rows=\"5\" class=\"w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500\" placeholder=\"\u60a8\u6709\u4ec0\u4e48\u60f3\u5bf9\u6211\u4eec\u8bf4\u7684\u5417\uff1f\"><\/textarea>\n <\/div>\n <button type=\"submit\" class=\"btn-primary w-full\">\u53d1\u9001\u7559\u8a00<\/button>\n <\/form>\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n\n <script>\n \/\/ Carousel JavaScript - UPDATED LOGIC\n let slideIndex = 0;\n const carouselImagesContainer = document.getElementById('productCarousel');\n const slides = carouselImagesContainer.children; \/\/ This will be an HTMLCollection of <img> elements\n const dots = document.getElementById('carouselDots').children;\n\n \/\/ Function to create dots dynamically\n function createDots() {\n dots.innerHTML = ''; \/\/ Clear existing dots\n for (let i = 0; i < slides.length; i++) {\n const dot = document.createElement('span');\n dot.classList.add('carousel-dot');\n dot.onclick = () => currentSlide(i);\n document.getElementById('carouselDots').appendChild(dot);\n }\n }\n\n function showSlides() {\n \/\/ Hide all slides and deactivate all dots\n for (let i = 0; i < slides.length; i++) {\n slides[i].classList.remove('active');\n if (dots[i]) { \/\/ Check if dot exists before trying to access\n dots[i].classList.remove('active');\n }\n }\n \/\/ Show the current slide and activate the corresponding dot\n slides[slideIndex].classList.add('active');\n if (dots[slideIndex]) { \/\/ Check if dot exists before trying to access\n dots[slideIndex].classList.add('active');\n }\n }\n\n function moveSlide(n) {\n slideIndex += n;\n if (slideIndex >= slides.length) {\n slideIndex = 0; \/\/ Loop back to the first slide\n }\n if (slideIndex < 0) {\n slideIndex = slides.length - 1; \/\/ Loop to the last slide\n }\n showSlides();\n }\n\n function currentSlide(n) {\n slideIndex = n;\n showSlides();\n }\n\n \/\/ Initialize carousel on page load\n document.addEventListener('DOMContentLoaded', () => {\n createDots(); \/\/ Create dots when the DOM is loaded\n showSlides();\n });\n <\/script>\n<\/body>\n<\/html>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u4ea7\u54c1\u8be6\u60c5 – [\u4ea7\u54c1\u540d\u79f0] – \u83b2\u82b1\u51c0\u6e90 \u91d1\u53d1\u53ef\u751f\u7269\u964d\u89e3\u4e01\u8148\u624b\u5957 ❮ & […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":165,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-379","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lotuspure.io\/index.php?rest_route=\/wp\/v2\/pages\/379","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lotuspure.io\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lotuspure.io\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lotuspure.io\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lotuspure.io\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=379"}],"version-history":[{"count":14,"href":"https:\/\/lotuspure.io\/index.php?rest_route=\/wp\/v2\/pages\/379\/revisions"}],"predecessor-version":[{"id":430,"href":"https:\/\/lotuspure.io\/index.php?rest_route=\/wp\/v2\/pages\/379\/revisions\/430"}],"up":[{"embeddable":true,"href":"https:\/\/lotuspure.io\/index.php?rest_route=\/wp\/v2\/pages\/165"}],"wp:attachment":[{"href":"https:\/\/lotuspure.io\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=379"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}