\u963f\u8d5b\u5c0f\u9762 – \u91cd\u5e86\u5927\u9aa8\u5c0f\u9762\u5f00\u521b\u8005<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/font-awesome@4.7.0\/css\/font-awesome.min.css\" rel=\"stylesheet\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n primary: '#E63946', \/\/ \u4e3b\u8272\u8c03\uff1a\u6e29\u6696\u7ea2\u8272\uff0c\u4ee3\u8868\u8fa3\u6912\u548c\u70ed\u60c5\n secondary: '#F1C40F', \/\/ \u8f85\u52a9\u8272\uff1a\u91d1\u9ec4\u8272\uff0c\u4ee3\u8868\u5c0f\u9ea6\u548c\u98df\u6b32\n tertiary: '#8D99AE', \/\/ \u7b2c\u4e09\u8272\uff1a\u67d4\u548c\u84dd\u7070\u8272\uff0c\u63d0\u4f9b\u5bf9\u6bd4\n dark: '#1D3557', \/\/ \u6df1\u8272\uff1a\u6df1\u84dd\u7070\u8272\uff0c\u7528\u4e8e\u6587\u672c\n light: '#F1FAEE', \/\/ \u6d45\u8272\uff1a\u7c73\u767d\u8272\uff0c\u7528\u4e8e\u80cc\u666f\n },\n fontFamily: {\n inter: ['Inter', 'sans-serif'],\n },\n }\n }\n }\n <\/script>\n \n <style type=\"text\/tailwindcss\">\n @layer utilities {\n .content-auto {\n content-visibility: auto;\n }\n .text-shadow {\n text-shadow: 0 2px 4px rgba(0,0,0,0.3);\n }\n .text-shadow-lg {\n text-shadow: 0 4px 8px rgba(0,0,0,0.5);\n }\n .bg-blur {\n backdrop-filter: blur(8px);\n }\n .animate-fade-in {\n animation: fadeIn 0.8s ease-in-out;\n }\n .animate-slide-up {\n animation: slideUp 0.8s ease-out;\n }\n .animate-pulse-slow {\n animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n }\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n @keyframes slideUp {\n from { transform: translateY(30px); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n }\n @keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.7; }\n }\n .carousel-item {\n transition: transform 0.5s ease-in-out;\n }\n .carousel-indicator {\n transition: all 0.3s ease;\n }\n .carousel-indicator.active {\n background-color: #E63946;\n width: 2rem;\n }\n .product-card {\n transition: all 0.3s ease;\n }\n .product-card:hover {\n transform: translateY(-10px);\n }\n .news-card {\n transition: all 0.3s ease;\n }\n .news-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);\n }\n .product-card-hover {\n @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-2 hover:shadow-primary\/10;\n }\n .badge {\n @apply absolute top-4 left-4 bg-primary text-white text-sm font-bold px-3 py-1 rounded-full shadow-md z-10;\n }\n .card-badge {\n @apply absolute top-4 right-4 bg-secondary text-dark text-sm font-bold px-3 py-1 rounded-full shadow-md z-10;\n }\n .product-image {\n @apply w-full h-64 object-cover transition-transform duration-500 hover:scale-105;\n }\n .product-desc {\n @apply text-gray-600 leading-relaxed;\n }\n .card-footer {\n @apply mt-4 pt-4 border-t border-gray-100 flex justify-between items-center;\n }\n .price-tag {\n @apply text-primary font-bold text-lg;\n }\n .add-to-cart {\n @apply bg-primary text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-primary\/90 transition-colors;\n }\n .section-title-bold {\n @apply text-[clamp(1.8rem,4vw,3rem)] font-bold text-dark mb-4;\n }\n }\n <\/style>\n \n <style>\n html {\n scroll-behavior: smooth;\n }\n \n .fade-in {\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n }\n \n .fade-in.appear {\n opacity: 1;\n transform: translateY(0);\n }\n \n \/* \u4ea7\u54c1\u5361\u7247\u5c3a\u5bf8\u8c03\u6574 *\/\n .product-card {\n min-height: 450px;\n }\n <\/style>\n<\/head>\n<body class=\"font-inter bg-light text-dark antialiased\">\n\n \n <section class=\"pt-20 pb-16 md:pb-24 bg-cover bg-center relative\" style=\"background-image: url('\/image\/banner2.jpg');\">\n <div class=\"absolute inset-0 bg-gradient-to-r from-dark\/90 to-dark\/70\"><\/div>\n <div class=\"container mx-auto px-4 relative z-10\">\n <div class=\"max-w-3xl\">\n <p class=\"text-[clamp(1rem,2vw,1.25rem)] text-white\/90 mb-8 max-w-2xl\">\n \u963f\u8d5b\u5c0f\u9762<br>\u91cd\u5e86\u5927\u9aa8\u5c0f\u9762\u5f00\u521b\u8005<br> \n 10\u5e74\u4e13\u6ce8\u4e00\u7897\u5c0f\u9762\uff0c\u8ba9\u4e2d\u56fd\u4eba\u4eab\u7528\u4f4e\u4ef7\u4f18\u8d28\u7684\u7f8e\u98df\n <\/p>\n <\/a>\n <\/div>\n <\/div>\n <\/section>\n <script>\n \/\/ \u6eda\u52a8\u52a8\u753b\n document.addEventListener('DOMContentLoaded', () => {\n const fadeElements = document.querySelectorAll('.fade-in');\n \n const fadeInObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('appear');\n fadeInObserver.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1 });\n \n fadeElements.forEach(element => {\n fadeInObserver.observe(element);\n });\n });\n <\/script>\n<\/body>\n\n\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>\u963f\u8d5b\u5c0f\u9762 – \u62db\u724c\u4ea7\u54c1<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/font-awesome@4.7.0\/css\/font-awesome.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=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n primary: '#E63946', \/\/ \u4e3b\u8272\u8c03\uff1a\u6e29\u6696\u7ea2\u8272\uff0c\u4ee3\u8868\u8fa3\u6912\u548c\u70ed\u60c5\n secondary: '#F1C40F', \/\/ \u8f85\u52a9\u8272\uff1a\u91d1\u9ec4\u8272\uff0c\u4ee3\u8868\u5c0f\u9ea6\u548c\u98df\u6b32\n tertiary: '#8D99AE', \/\/ \u7b2c\u4e09\u8272\uff1a\u67d4\u548c\u84dd\u7070\u8272\uff0c\u63d0\u4f9b\u5bf9\u6bd4\n dark: '#1D3557', \/\/ \u6df1\u8272\uff1a\u6df1\u84dd\u7070\u8272\uff0c\u7528\u4e8e\u6587\u672c\n light: '#F1FAEE', \/\/ \u6d45\u8272\uff1a\u7c73\u767d\u8272\uff0c\u7528\u4e8e\u80cc\u666f\n },\n fontFamily: {\n inter: ['Inter', 'sans-serif'],\n },\n }\n }\n }\n <\/script>\n \n <style type=\"text\/tailwindcss\">\n @layer utilities {\n .content-auto {\n content-visibility: auto;\n }\n .text-shadow {\n text-shadow: 0 2px 4px rgba(0,0,0,0.1);\n }\n .transition-transform-opacity {\n transition-property: transform, opacity;\n }\n .scrollbar-hide::-webkit-scrollbar {\n display: none;\n }\n .scrollbar-hide {\n -ms-overflow-style: none;\n scrollbar-width: none;\n }\n }\n <\/style>\n \n <style>\n html {\n scroll-behavior: smooth;\n }\n \n .story-image {\n @apply rounded-xl shadow-lg object-cover;\n }\n \n .timeline-item {\n @apply relative pl-8 pb-10;\n }\n \n .timeline-item::before {\n content: '';\n @apply absolute left-0 top-2 w-1 h-full bg-primary\/30;\n }\n \n .timeline-dot {\n @apply absolute left-[-10px] top-2 w-5 h-5 rounded-full bg-primary;\n }\n \n .fade-in {\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n }\n \n .fade-in.appear {\n opacity: 1;\n transform: translateY(0);\n }\n \n .feature-card {\n transition: all 0.3s ease;\n }\n \n .feature-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n }\n \n .number-card {\n transition: all 0.3s ease;\n }\n \n .number-card:hover {\n transform: scale(1.03);\n }\n <\/style>\n<\/head>\n<body class=\"font-inter bg-light text-dark\">\n \n <section id=\"about\" class=\"py-16 md:py-24 bg-white\">\n <div class=\"container mx-auto px-4\">\n <div class=\"text-center mb-16\">\n <h2 class=\"text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4\">\n \u4ea7\u54c1\u7406\u5ff5\n <\/h2>\n <div class=\"w-20 h-1 bg-primary mx-auto mb-6\"><\/div>\n <p class=\"text-gray-600 text-lg max-w-3xl mx-auto\">\n <\/p>\n <\/div>\n \n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-12 items-center\">\n <div class=\"fade-in\">\n <p class=\"text-gray-600 mb-6 leading-relaxed\">\n \u963f\u8d5b\u5c0f\u9762\u8d4b\u4e88\u4e86\u91cd\u5e86\u5c0f\u9762\u65b0\u7684\u5b9a\u4e49\u3002\u6253\u7834 \u201c\u5403\u7684\u662f\u4f50\u6599\uff0c\u6c64\u5e76\u4e0d\u91cd\u8981\u201d \u7684\u56fa\u6709\u8ba4\u77e5\uff0c\u575a\u6301 \u201c\u5341\u65a4\u5927\u7b52\u9aa8\uff0c\u71ac\u597d\u4e00\u9505\u6c64\u201d \u7684\u4ea7\u54c1\u7ecf\u8425\u7406\u5ff5\u3002\n <\/p>\n <p class=\"text-gray-600 mb-6 leading-relaxed\">\n \u5305\u542b\u91cd\u5e86\u5c0f\u9762\u3001\u9aa8\u6c64\u6284\u624b\u3001\u963f\u8d5b\u7802\u9505\u83dc\u3001\u9aa8\u6c64\u7c73\u7ebf\u3001\u7279\u8272\u62cc\u9762\u3001\u9178\u8fa3\u7c89\u3001\u73b0\u505a\u751c\u54c1\u3001\u963f\u8d5b\u5c0f\u5403\u516b\u5927\u54c1\u7c7b\u3002 \n <\/p>\n <p class=\"text-gray-600 mb-6 leading-relaxed\">\n \u4ea7\u54c1\u5b9a\u65f6\u4e0a\u65b0\uff0c\u4ea7\u54c1\u4e30\u5bcc\uff0c\u53e3\u5473\u591a\u6837\uff0c\u8986\u76d6\u5168\u65b9\u4f4d\u4eba\u7fa4\u3002\n <\/p>\n <div class=\"mt-8\">\n <\/a>\n <\/div>\n <\/div>\n <div class=\"relative fade-in\">\n <img decoding=\"async\" src=\"\/image\/chanpin.jpg\" alt=\"\u963f\u8d5b\u5c0f\u9762\" class=\"story-image w-full h-[500px]\">\n <div class=\"absolute -bottom-6 -left-6 w-32 h-32 bg-secondary\/20 rounded-lg -z-10\"><\/div>\n <div class=\"absolute -top-6 -right-6 w-24 h-24 bg-primary\/20 rounded-lg -z-10\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <script>\n \/\/ \u6eda\u52a8\u52a8\u753b\n document.addEventListener('DOMContentLoaded', () => {\n const fadeElements = document.querySelectorAll('.fade-in');\n \n const fadeInObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('appear');\n fadeInObserver.unobserve(entry.target);\n }\n });\n }, {\n threshold: 0.1\n });\n \n fadeElements.forEach(element => {\n fadeInObserver.observe(element);\n });\n });\n <\/script>\n<\/body>\n\n\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>\u963f\u8d5b\u5c0f\u9762 – \u91cd\u5e86\u5927\u9aa8\u5c0f\u9762\u5f00\u521b\u8005<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/font-awesome@4.7.0\/css\/font-awesome.min.css\" rel=\"stylesheet\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n primary: '#E63946', \/\/ \u4e3b\u8272\u8c03\uff1a\u6e29\u6696\u7ea2\u8272\uff0c\u4ee3\u8868\u8fa3\u6912\u548c\u70ed\u60c5\n secondary: '#F1C40F', \/\/ \u8f85\u52a9\u8272\uff1a\u91d1\u9ec4\u8272\uff0c\u4ee3\u8868\u5c0f\u9ea6\u548c\u98df\u6b32\n tertiary: '#8D99AE', \/\/ \u7b2c\u4e09\u8272\uff1a\u67d4\u548c\u84dd\u7070\u8272\uff0c\u63d0\u4f9b\u5bf9\u6bd4\n dark: '#1D3557', \/\/ \u6df1\u8272\uff1a\u6df1\u84dd\u7070\u8272\uff0c\u7528\u4e8e\u6587\u672c\n light: '#F1FAEE', \/\/ \u6d45\u8272\uff1a\u7c73\u767d\u8272\uff0c\u7528\u4e8e\u80cc\u666f\n },\n fontFamily: {\n inter: ['Inter', 'sans-serif'],\n },\n }\n }\n }\n <\/script>\n \n <style type=\"text\/tailwindcss\">\n @layer utilities {\n .content-auto {\n content-visibility: auto;\n }\n .text-shadow {\n text-shadow: 0 2px 4px rgba(0,0,0,0.3);\n }\n .text-shadow-lg {\n text-shadow: 0 4px 8px rgba(0,0,0,0.5);\n }\n .bg-blur {\n backdrop-filter: blur(8px);\n }\n .animate-fade-in {\n animation: fadeIn 0.8s ease-in-out;\n }\n .animate-slide-up {\n animation: slideUp 0.8s ease-out;\n }\n .animate-pulse-slow {\n animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n }\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n @keyframes slideUp {\n from { transform: translateY(30px); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n }\n @keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.7; }\n }\n .carousel-item {\n transition: transform 0.5s ease-in-out;\n }\n .carousel-indicator {\n transition: all 0.3s ease;\n }\n .carousel-indicator.active {\n background-color: #E63946;\n width: 2rem;\n }\n .product-card {\n transition: all 0.3s ease;\n }\n .product-card:hover {\n transform: translateY(-10px);\n }\n .news-card {\n transition: all 0.3s ease;\n }\n .news-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);\n }\n .product-card-hover {\n @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-2 hover:shadow-primary\/10;\n }\n .badge {\n @apply absolute top-4 left-4 bg-primary text-white text-sm font-bold px-3 py-1 rounded-full shadow-md z-10;\n }\n .card-badge {\n @apply absolute top-4 right-4 bg-secondary text-dark text-sm font-bold px-3 py-1 rounded-full shadow-md z-10;\n }\n .product-image {\n @apply w-full h-64 object-cover transition-transform duration-500 hover:scale-105;\n }\n .product-desc {\n @apply text-gray-600 leading-relaxed;\n }\n .card-footer {\n @apply mt-4 pt-4 border-t border-gray-100 flex justify-between items-center;\n }\n .price-tag {\n @apply text-primary font-bold text-lg;\n }\n .add-to-cart {\n @apply bg-primary text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-primary\/90 transition-colors;\n }\n .section-title-bold {\n @apply text-[clamp(1.8rem,4vw,3rem)] font-bold text-dark mb-4;\n }\n }\n <\/style>\n \n <style>\n html {\n scroll-behavior: smooth;\n }\n \n .fade-in {\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n }\n \n .fade-in.appear {\n opacity: 1;\n transform: translateY(0);\n }\n \n \/* \u4ea7\u54c1\u5361\u7247\u5c3a\u5bf8\u8c03\u6574 *\/\n .product-card {\n min-height: 450px;\n }\n <\/style>\n<\/head>\n<body class=\"font-inter bg-light text-dark antialiased\">\n \n \n <section id=\"craft\" class=\"py-16 md:py-24 bg-light\">\n <div class=\"container mx-auto px-4\">\n <div class=\"text-center mb-16\">\n <h2 class=\"section-title-bold\">\u4ea7\u54c1\u6838\u5fc3\u5de5\u827a<\/h2>\n <div class=\"w-20 h-1 bg-primary mx-auto mb-6\"><\/div>\n <\/div>\n \n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n <div class=\"product-card fade-in relative\">\n <span class=\"badge\">\u5de5\u827a<\/span>\n <img decoding=\"async\" src=\"\/image\/gy1.png\" alt=\"\u73b0\u71ac\u6c64\u5e95\" class=\"product-image\">\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-3\">\u73b0\u71ac\u6c64\u5e95<\/h3>\n <p class=\"product-desc\">\n \u5341\u65a4\u5927\u7b52\u9aa8\u71ac\u597d\u4e00\u9505\u6c64\uff0c\u79d8\u5236\u6c64\u5e95\u71ac\u8db3 2 \u5c0f\u65f6\uff0c\u9aa8\u6c64\u6bcf\u5929\u73b0\u71ac\u4e0d\u8fc7\u591c\u3002\n <\/p>\n\n <\/div>\n <\/div>\n \n <div class=\"product-card fade-in relative\">\n <span class=\"badge\">\u5de5\u827a<\/span>\n <img decoding=\"async\" src=\"\/image\/gy2.png\" alt=\"\u963f\u8d5b\u5b9a\u5236\u9c9c\u9762\" class=\"product-image\">\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-3\">\u963f\u8d5b\u5b9a\u5236\u9c9c\u9762<\/h3>\n <p class=\"product-desc\">\n \u91c7\u7528 AS7 \u5b9a\u5236\u9762\u7c89\uff0c\u597d\u9762\u6761\u65b0\u9c9c\u3001\u987a\u6ed1\u3001\u52b2\u9053\u3001Q \u5f39\uff0c\u4e00\u65a4\u9762\u7c89\u4e09\u4e2a\u86cb\uff0c\u516b\u9053\u4f20\u7edf\u5236\u9762\u5de5\u827a\u3002\n <\/p>\n <\/div>\n <\/div>\n \n <div class=\"product-card fade-in relative\">\n <span class=\"badge\">\u5de5\u827a<\/span>\n <img decoding=\"async\" src=\"\/image\/gy3.png\" alt=\"\u53e4\u6cd5\u8fa3\u6912\u6cb9\" class=\"product-image\">\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-3\">\u53e4\u6cd5\u8fa3\u6912\u6cb9<\/h3>\n <p class=\"product-desc\">\n \u7504\u9009\u597d\u8fa3\u6912\uff0c\u519c\u5bb6\u571f\u69a8\u83dc\u6cb9\uff0c\u7cbe\u51c6\u63a7\u6e29\uff0c\u6fc0\u53d1\u8fa3\u6912\u672c\u5473\u3002\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n \n <div class=\"py-12\"><\/div>\n\n <script>\n \/\/ \u6eda\u52a8\u52a8\u753b\n document.addEventListener('DOMContentLoaded', () => {\n const fadeElements = document.querySelectorAll('.fade-in');\n \n const fadeInObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('appear');\n fadeInObserver.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1 });\n \n fadeElements.forEach(element => {\n fadeInObserver.observe(element);\n });\n });\n <\/script>\n<\/body>\n\n\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>\u963f\u8d5b\u5c0f\u9762 – \u91cd\u5e86\u5927\u9aa8\u5c0f\u9762\u5f00\u521b\u8005<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/font-awesome@4.7.0\/css\/font-awesome.min.css\" rel=\"stylesheet\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n primary: '#E63946', \/\/ \u4e3b\u8272\u8c03\uff1a\u6e29\u6696\u7ea2\u8272\uff0c\u4ee3\u8868\u8fa3\u6912\u548c\u70ed\u60c5\n secondary: '#F1C40F', \/\/ \u8f85\u52a9\u8272\uff1a\u91d1\u9ec4\u8272\uff0c\u4ee3\u8868\u5c0f\u9ea6\u548c\u98df\u6b32\n tertiary: '#8D99AE', \/\/ \u7b2c\u4e09\u8272\uff1a\u67d4\u548c\u84dd\u7070\u8272\uff0c\u63d0\u4f9b\u5bf9\u6bd4\n dark: '#1D3557', \/\/ \u6df1\u8272\uff1a\u6df1\u84dd\u7070\u8272\uff0c\u7528\u4e8e\u6587\u672c\n light: '#F1FAEE', \/\/ \u6d45\u8272\uff1a\u7c73\u767d\u8272\uff0c\u7528\u4e8e\u80cc\u666f\n },\n fontFamily: {\n inter: ['Inter', 'sans-serif'],\n },\n }\n }\n }\n <\/script>\n \n <style type=\"text\/tailwindcss\">\n @layer utilities {\n .content-auto {\n content-visibility: auto;\n }\n .text-shadow {\n text-shadow: 0 2px 4px rgba(0,0,0,0.3);\n }\n .text-shadow-lg {\n text-shadow: 0 4px 8px rgba(0,0,0,0.5);\n }\n .bg-blur {\n backdrop-filter: blur(8px);\n }\n .animate-fade-in {\n animation: fadeIn 0.8s ease-in-out;\n }\n .animate-slide-up {\n animation: slideUp 0.8s ease-out;\n }\n .animate-pulse-slow {\n animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n }\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n @keyframes slideUp {\n from { transform: translateY(30px); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n }\n @keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.7; }\n }\n .carousel-item {\n transition: transform 0.5s ease-in-out;\n }\n .carousel-indicator {\n transition: all 0.3s ease;\n }\n .carousel-indicator.active {\n background-color: #E63946;\n width: 2rem;\n }\n .product-card {\n transition: all 0.3s ease;\n }\n .product-card:hover {\n transform: translateY(-10px);\n }\n .news-card {\n transition: all 0.3s ease;\n }\n .news-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);\n }\n .product-card-hover {\n @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-2 hover:shadow-primary\/10;\n }\n .badge {\n @apply absolute top-4 left-4 bg-primary text-white text-sm font-bold px-3 py-1 rounded-full shadow-md z-10;\n }\n .card-badge {\n @apply absolute top-4 right-4 bg-secondary text-dark text-sm font-bold px-3 py-1 rounded-full shadow-md z-10;\n }\n .product-image {\n @apply w-full h-64 object-cover transition-transform duration-500 hover:scale-105;\n }\n .product-desc {\n @apply text-gray-600 leading-relaxed;\n }\n .card-footer {\n @apply mt-4 pt-4 border-t border-gray-100 flex justify-between items-center;\n }\n .price-tag {\n @apply text-primary font-bold text-lg;\n }\n .add-to-cart {\n @apply bg-primary text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-primary\/90 transition-colors;\n }\n .section-title-bold {\n @apply text-[clamp(1.8rem,4vw,3rem)] font-bold text-dark mb-4;\n }\n }\n <\/style>\n \n <style>\n html {\n scroll-behavior: smooth;\n }\n \n .fade-in {\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n }\n \n .fade-in.appear {\n opacity: 1;\n transform: translateY(0);\n }\n \n \/* \u4ea7\u54c1\u5361\u7247\u5c3a\u5bf8\u8c03\u6574 *\/\n .product-card {\n min-height: 450px;\n }\n <\/style>\n<\/head>\n<body class=\"font-inter bg-light text-dark antialiased\">\n \n <section id=\"signature\" class=\"py-20 bg-white\">\n <div class=\"container mx-auto px-4\">\n <div class=\"text-center mb-12\">\n <h2 class=\"section-title-bold\">\u62db\u724c\u4ea7\u54c1<\/h2>\n <p class=\"text-gray-600 text-lg max-w-3xl mx-auto\">\n \u7cbe\u9009\u963f\u8d5b\u5c0f\u9762\u6700\u5177\u4ee3\u8868\u6027\u7684\u6838\u5fc3\u4ea7\u54c1\uff0c\u6bcf\u4e00\u6b3e\u90fd\u72ec\u5177\u7279\u8272\n <\/p>\n <\/div>\n \n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8\">\n \n <div class=\"product-card bg-white rounded-xl overflow-hidden shadow-lg product-card-hover\">\n <div class=\"relative\">\n <span class=\"badge\">\u62db\u724c<\/span>\n <img decoding=\"async\" src=\"\/image\/daguxiaomian.jpg\" alt=\"\u62db\u724c\u5927\u9aa8\u5c0f\u9762(\u8fa3)\" class=\"product-image\">\n <\/div>\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-2\">\u62db\u724c\u5927\u9aa8\u5c0f\u9762(\u8fa3)<\/h3>\n <p class=\"product-desc mb-4\">\n \u5c0f\u9762\u597d\u5403\uff0c\u6c64\u66f4\u9c9c\u7f8e\uff0c\u6709\u4e00\u5927\u5757\u8fde\u7b4b\u5e26\u8089\u7684\u5927\u9aa8\uff0c\u4e00\u4e2a\u4eba\u5c31\u80fd\u5403\u5f97\u9971\u9971\u7684\u3002\u5206\u8fa3\u4e0e\u4e0d\u8fa3\u53e3\u5473\u3002\n <\/p>\n <\/div>\n <\/div>\n \n \n <div class=\"product-card bg-white rounded-xl overflow-hidden shadow-lg product-card-hover\">\n <div class=\"relative\">\n <span class=\"badge\">\u62db\u724c<\/span>\n <img decoding=\"async\" src=\"\/image\/daguxiaomian2.jpg\" alt=\"\u62db\u724c\u5927\u9aa8\u5c0f\u9762(\u514d\u8fa3)\" class=\"product-image\">\n <\/div>\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-2\">\u62db\u724c\u5927\u9aa8\u5c0f\u9762(\u514d\u8fa3)<\/h3>\n <p class=\"product-desc mb-4\">\n \u5c0f\u9762\u597d\u5403\uff0c\u6c64\u66f4\u9c9c\u7f8e\uff0c\u6709\u4e00\u5927\u5757\u8fde\u7b4b\u5e26\u8089\u7684\u5927\u9aa8\uff0c\u4e00\u4e2a\u4eba\u5c31\u80fd\u5403\u5f97\u9971\u9971\u7684\u3002\u5206\u8fa3\u4e0e\u4e0d\u8fa3\u53e3\u5473\u3002\n <\/p>\n <\/div>\n <\/div>\n \n \n <div class=\"product-card bg-white rounded-xl overflow-hidden shadow-lg product-card-hover\">\n <div class=\"relative\">\n <span class=\"badge\">\u62db\u724c<\/span>\n <img decoding=\"async\" src=\"\/image\/wanzamian.jpg\" alt=\"\u62db\u724c\u8c4c\u6742\u9762\" class=\"product-image\">\n <\/div>\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-2\">\u62db\u724c\u8c4c\u6742\u9762<\/h3>\n <p class=\"product-desc mb-4\">\n \u5c0f\u9762\u7684\u7075\u9b42\u6d77\u6912\uff0c\u52b2\u9053\u7684\u9c9c\u9762\u6761\uff0c\u8c4c\u8c46\u7c92\u7c92\u6210\u578b\u9897\u9897\u7ef5\u8f6f\uff0c\u70b9\u775b\u6d47\u5934\u9171\u9999\u8089\u54e8\u5b50 \uff0c\u53e3\u53f7\u4e3a \u201c\u8c4c\u8c46\u563f\u8019\uff0c\u8fa3\u6912\u563f\u9999\u201d\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <script>\n \/\/ \u6eda\u52a8\u52a8\u753b\n document.addEventListener('DOMContentLoaded', () => {\n const fadeElements = document.querySelectorAll('.fade-in');\n \n const fadeInObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('appear');\n fadeInObserver.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1 });\n \n fadeElements.forEach(element => {\n fadeInObserver.observe(element);\n });\n });\n <\/script>\n<\/body>\n\n\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>\u963f\u8d5b\u5c0f\u9762 – \u91cd\u5e86\u5927\u9aa8\u5c0f\u9762\u5f00\u521b\u8005<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/font-awesome@4.7.0\/css\/font-awesome.min.css\" rel=\"stylesheet\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n primary: '#E63946', \/\/ \u4e3b\u8272\u8c03\uff1a\u6e29\u6696\u7ea2\u8272\uff0c\u4ee3\u8868\u8fa3\u6912\u548c\u70ed\u60c5\n secondary: '#F1C40F', \/\/ \u8f85\u52a9\u8272\uff1a\u91d1\u9ec4\u8272\uff0c\u4ee3\u8868\u5c0f\u9ea6\u548c\u98df\u6b32\n tertiary: '#8D99AE', \/\/ \u7b2c\u4e09\u8272\uff1a\u67d4\u548c\u84dd\u7070\u8272\uff0c\u63d0\u4f9b\u5bf9\u6bd4\n dark: '#1D3557', \/\/ \u6df1\u8272\uff1a\u6df1\u84dd\u7070\u8272\uff0c\u7528\u4e8e\u6587\u672c\n light: '#F1FAEE', \/\/ \u6d45\u8272\uff1a\u7c73\u767d\u8272\uff0c\u7528\u4e8e\u80cc\u666f\n },\n fontFamily: {\n inter: ['Inter', 'sans-serif'],\n },\n }\n }\n }\n <\/script>\n \n <style type=\"text\/tailwindcss\">\n @layer utilities {\n .content-auto {\n content-visibility: auto;\n }\n .text-shadow {\n text-shadow: 0 2px 4px rgba(0,0,0,0.3);\n }\n .text-shadow-lg {\n text-shadow: 0 4px 8px rgba(0,0,0,0.5);\n }\n .bg-blur {\n backdrop-filter: blur(8px);\n }\n .animate-fade-in {\n animation: fadeIn 0.8s ease-in-out;\n }\n .animate-slide-up {\n animation: slideUp 0.8s ease-out;\n }\n .animate-pulse-slow {\n animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n }\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n @keyframes slideUp {\n from { transform: translateY(30px); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n }\n @keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.7; }\n }\n .carousel-item {\n transition: transform 0.5s ease-in-out;\n }\n .carousel-indicator {\n transition: all 0.3s ease;\n }\n .carousel-indicator.active {\n background-color: #E63946;\n width: 2rem;\n }\n .product-card {\n transition: all 0.3s ease;\n }\n .product-card:hover {\n transform: translateY(-10px);\n }\n .news-card {\n transition: all 0.3s ease;\n }\n .news-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);\n }\n .product-card-hover {\n @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-2 hover:shadow-primary\/10;\n }\n .badge {\n @apply absolute top-4 left-4 bg-primary text-white text-sm font-bold px-3 py-1 rounded-full shadow-md z-10;\n }\n .card-badge {\n @apply absolute top-4 right-4 bg-secondary text-dark text-sm font-bold px-3 py-1 rounded-full shadow-md z-10;\n }\n .product-image {\n @apply w-full h-64 object-cover transition-transform duration-500 hover:scale-105;\n }\n .product-desc {\n @apply text-gray-600 leading-relaxed;\n }\n .card-footer {\n @apply mt-4 pt-4 border-t border-gray-100 flex justify-between items-center;\n }\n .price-tag {\n @apply text-primary font-bold text-lg;\n }\n .add-to-cart {\n @apply bg-primary text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-primary\/90 transition-colors;\n }\n .section-title-bold {\n @apply text-[clamp(1.8rem,4vw,3rem)] font-bold text-dark mb-4;\n }\n }\n <\/style>\n \n <style>\n html {\n scroll-behavior: smooth;\n }\n \n .fade-in {\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n }\n \n .fade-in.appear {\n opacity: 1;\n transform: translateY(0);\n }\n \n \/* \u4ea7\u54c1\u5361\u7247\u5c3a\u5bf8\u8c03\u6574 *\/\n .product-card {\n min-height: 450px;\n }\n <\/style>\n<\/head>\n<body class=\"font-inter bg-light text-dark antialiased\">\n \n <section id=\"popular\" class=\"py-16 md:py-24 bg-light\">\n <div class=\"container mx-auto px-4\">\n <div class=\"text-center mb-16\">\n <h2 class=\"section-title-bold\">\u70ed\u9500\u4ea7\u54c1<\/h2>\n <div class=\"w-20 h-1 bg-primary mx-auto mb-6\"><\/div>\n <\/div>\n \n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8\">\n <div class=\"product-card fade-in relative\">\n <span class=\"card-badge\">\u70ed\u9500<\/span>\n <img decoding=\"async\" src=\"\/image\/niuroumian.jpg\" alt=\"\u7ea2\u70e7\u725b\u8089\u9762\" class=\"product-image\">\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-3\">\u7ea2\u70e7\u725b\u8089\u9762<\/h3>\n <p class=\"product-desc\">\n \u725b\u8089\u8f6f\u7cef\u5316\u6e23\u4e0d\u7c98\u7259\u3002\n <\/p>\n <\/div>\n <\/div>\n \n <div class=\"product-card fade-in relative\">\n <span class=\"card-badge\">\u70ed\u9500<\/span>\n <img decoding=\"async\" src=\"\/image\/feichangmian.jpg\" alt=\"\u7ea2\u70e7\u80a5\u80a0\u9762\" class=\"product-image\">\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-3\">\u7ea2\u70e7\u80a5\u80a0\u9762<\/h3>\n <p class=\"product-desc\">\n \u7206\u7092\u9c9c\u80a5\u80a0\u53e3\u53e3\u8106\u3002\n <\/p>\n <\/div>\n <\/div>\n \n <div class=\"product-card fade-in relative\">\n <span class=\"card-badge\">\u70ed\u9500<\/span>\n <img decoding=\"async\" src=\"\/image\/paojiaojiza.jpg\" alt=\"\u6ce1\u6912\u9e21\u6742\u9762\" class=\"product-image\">\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-3\">\u6ce1\u6912\u9e21\u6742\u9762<\/h3>\n <p class=\"product-desc\">\n \u6ce1\u6912\u9e21\u6742\uff0c\u9178\u8fa3\u723d\u8106\uff0c\u8fa3\u800c\u4e0d\u71e5\uff0c\u9999\u800c\u4e0d\u817b\u3002\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <script>\n \/\/ \u6eda\u52a8\u52a8\u753b\n document.addEventListener('DOMContentLoaded', () => {\n const fadeElements = document.querySelectorAll('.fade-in');\n \n const fadeInObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('appear');\n fadeInObserver.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1 });\n \n fadeElements.forEach(element => {\n fadeInObserver.observe(element);\n });\n });\n <\/script>\n<\/body>\n\n\n\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>\u963f\u8d5b\u5c0f\u9762 – \u62db\u724c\u4ea7\u54c1<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/font-awesome@4.7.0\/css\/font-awesome.min.css\" rel=\"stylesheet\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n primary: '#E63946', \/\/ \u4e3b\u8272\u8c03\uff1a\u6e29\u6696\u7ea2\u8272\uff0c\u4ee3\u8868\u8fa3\u6912\u548c\u70ed\u60c5\n secondary: '#F1C40F', \/\/ \u8f85\u52a9\u8272\uff1a\u91d1\u9ec4\u8272\uff0c\u4ee3\u8868\u5c0f\u9ea6\u548c\u98df\u6b32\n tertiary: '#8D99AE', \/\/ \u7b2c\u4e09\u8272\uff1a\u67d4\u548c\u84dd\u7070\u8272\uff0c\u63d0\u4f9b\u5bf9\u6bd4\n dark: '#1D3557', \/\/ \u6df1\u8272\uff1a\u6df1\u84dd\u7070\u8272\uff0c\u7528\u4e8e\u6587\u672c\n light: '#F1FAEE', \/\/ \u6d45\u8272\uff1a\u7c73\u767d\u8272\uff0c\u7528\u4e8e\u80cc\u666f\n },\n fontFamily: {\n inter: ['Inter', 'sans-serif'],\n },\n }\n }\n }\n <\/script>\n \n <style type=\"text\/tailwindcss\">\n @layer utilities {\n .content-auto {\n content-visibility: auto;\n }\n .text-shadow {\n text-shadow: 0 2px 4px rgba(0,0,0,0.3);\n }\n .text-shadow-lg {\n text-shadow: 0 4px 8px rgba(0,0,0,0.5);\n }\n .bg-blur {\n backdrop-filter: blur(8px);\n }\n .animate-fade-in {\n animation: fadeIn 0.8s ease-in-out;\n }\n .animate-slide-up {\n animation: slideUp 0.8s ease-out;\n }\n .animate-pulse-slow {\n animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n }\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n @keyframes slideUp {\n from { transform: translateY(30px); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n }\n @keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.7; }\n }\n .carousel-item {\n transition: transform 0.5s ease-in-out;\n }\n .carousel-indicator {\n transition: all 0.3s ease;\n }\n .carousel-indicator.active {\n background-color: #E63946;\n width: 2rem;\n }\n .product-card {\n transition: all 0.3s ease;\n }\n .product-card:hover {\n transform: translateY(-10px);\n }\n .news-card {\n transition: all 0.3s ease;\n }\n .news-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);\n }\n .product-card-hover {\n @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-2 hover:shadow-primary\/10;\n }\n .badge {\n @apply absolute top-4 left-4 bg-primary text-white text-sm font-bold px-3 py-1 rounded-full shadow-md z-10;\n }\n .card-badge {\n @apply absolute top-4 right-4 bg-secondary text-dark text-sm font-bold px-3 py-1 rounded-full shadow-md z-10;\n }\n .product-image {\n @apply w-full h-64 object-cover transition-transform duration-500 hover:scale-105;\n }\n .product-desc {\n @apply text-gray-600 leading-relaxed;\n }\n .card-footer {\n @apply mt-4 pt-4 border-t border-gray-100 flex justify-between items-center;\n }\n .price-tag {\n @apply text-primary font-bold text-lg;\n }\n .add-to-cart {\n @apply bg-primary text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-primary\/90 transition-colors;\n }\n .section-title-bold {\n @apply text-[clamp(1.8rem,4vw,3rem)] font-bold text-dark mb-4;\n }\n }\n <\/style>\n \n <style>\n html {\n scroll-behavior: smooth;\n }\n \n .fade-in {\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n }\n \n .fade-in.appear {\n opacity: 1;\n transform: translateY(0);\n }\n \n \/* \u4ea7\u54c1\u5361\u7247\u5c3a\u5bf8\u8c03\u6574 *\/\n .product-card {\n min-height: 450px;\n }\n \n \/* \u4f7f\u56fe\u7247\u9ad8\u5ea6\u4e0e\u6587\u5b57\u533a\u57df\u4e00\u81f4 *\/\n .text-content {\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n <\/style>\n<\/head>\n<body class=\"font-inter bg-light text-dark antialiased\">\n\n \n <section id=\"signature\" class=\"py-20 bg-white\">\n <div class=\"container mx-auto px-4\">\n <div class=\"text-center mb-12\">\n <h2 class=\"section-title-bold\">\u6284\u624b<\/h2>\n <p class=\"text-gray-600 text-lg max-w-3xl mx-auto\">\n \u7cbe\u9009\u963f\u8d5b\u5c0f\u9762\u6700\u5177\u4ee3\u8868\u6027\u7684\u6284\u624b\u4ea7\u54c1\uff0c\u6bcf\u4e00\u6b3e\u90fd\u72ec\u5177\u7279\u8272\n <\/p>\n <\/div>\n \n <div class=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6\">\n \n <div class=\"product-card bg-white rounded-xl overflow-hidden shadow-lg product-card-hover\">\n <div class=\"relative\">\n <span class=\"badge\">\u7279\u8272<\/span>\n <img decoding=\"async\" src=\"\/image\/laomachaoshou.jpg\" alt=\"\u8001\u9ebb\u6284\u624b\" class=\"product-image\">\n <\/div>\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-2\">\u8001\u9ebb\u6284\u624b<\/h3>\n <p class=\"product-desc mb-4\">\n \u624b\u5de5\u5305\u5236\u7684\u6284\u624b\uff0c\u76ae\u8584\u9985\u5927\uff0c\u914d\u4ee5\u7279\u5236\u7684\u9ebb\u8fa3\u6c64\u5e95\uff0c\u9ebb\u800c\u4e0d\u71e5\uff0c\u8fa3\u800c\u4e0d\u4f24\u3002\n <\/p>\n <\/div>\n <\/div>\n \n \n <div class=\"product-card bg-white rounded-xl overflow-hidden shadow-lg product-card-hover\">\n <div class=\"relative\">\n <span class=\"badge\">\u7279\u8272<\/span>\n <img decoding=\"async\" src=\"\/image\/hongyouchaoshou.jpg\" alt=\"\u7ea2\u6cb9\u5e72\u62cc\u6284\u624b\" class=\"product-image\">\n <\/div>\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-2\">\u7ea2\u6cb9\u5e72\u62cc\u6284\u624b<\/h3>\n <p class=\"product-desc mb-4\">\n \u7ea2\u6cb9\u9999\u6c14\u6d53\u90c1\uff0c\u6284\u624b\u53e3\u611f\u4e30\u5bcc\u3002\n <\/p>\n <\/div>\n <\/div>\n \n \n <div class=\"product-card bg-white rounded-xl overflow-hidden shadow-lg product-card-hover\">\n <div class=\"relative\">\n <span class=\"badge\">\u7279\u8272<\/span>\n <img decoding=\"async\" src=\"\/image\/fanqiechaoshou.jpg\" alt=\"\u756a\u8304\u9aa8\u6c64\u6284\u624b\" class=\"product-image\">\n <\/div>\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-2\">\u756a\u8304\u9aa8\u6c64\u6284\u624b<\/h3>\n <p class=\"product-desc mb-4\">\n \u9178\u751c\u53ef\u53e3\u7684\u756a\u8304\u6c64\u5e95\uff0c\u8425\u517b\u4e30\u5bcc\u3002\n <\/p>\n <\/div>\n <\/div>\n \n \n <div class=\"product-card bg-white rounded-xl overflow-hidden shadow-lg product-card-hover\">\n <div class=\"relative\">\n <span class=\"badge\">\u7279\u8272<\/span>\n <img decoding=\"async\" src=\"\/image\/gutangchaoshou.jpg\" alt=\"\u9aa8\u6c64\u6284\u624b\" class=\"product-image\">\n <\/div>\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-2\">\u9aa8\u6c64\u6284\u624b<\/h3>\n <p class=\"product-desc mb-4\">\n \u539f\u6c41\u539f\u5473\u7684\u9aa8\u6c64\uff0c\u9c9c\u7f8e\u53ef\u53e3\u3002\n <\/p>\n <\/div>\n <\/div>\n \n \n <div class=\"product-card bg-white rounded-xl overflow-hidden shadow-lg product-card-hover\">\n <div class=\"relative\">\n <span class=\"badge\">\u7279\u8272<\/span>\n <img decoding=\"async\" src=\"\/image\/zhachaoshou.jpg\" alt=\"\u70b8\u6284\u624b\" class=\"product-image\">\n <\/div>\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-2\">\u70b8\u6284\u624b<\/h3>\n <p class=\"product-desc mb-4\">\n \u5916\u9165\u91cc\u5ae9\uff0c\u53e3\u611f\u72ec\u7279\u3002\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <script>\n \/\/ \u6eda\u52a8\u52a8\u753b\n document.addEventListener('DOMContentLoaded', () => {\n const fadeElements = document.querySelectorAll('.fade-in');\n \n const fadeInObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('appear');\n fadeInObserver.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1 });\n \n fadeElements.forEach(element => {\n fadeInObserver.observe(element);\n });\n });\n <\/script> \n\n\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>\u963f\u8d5b\u5c0f\u9762 – \u91cd\u5e86\u5927\u9aa8\u5c0f\u9762\u5f00\u521b\u8005<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/font-awesome@4.7.0\/css\/font-awesome.min.css\" rel=\"stylesheet\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n primary: '#E63946', \/\/ \u4e3b\u8272\u8c03\uff1a\u6e29\u6696\u7ea2\u8272\uff0c\u4ee3\u8868\u8fa3\u6912\u548c\u70ed\u60c5\n secondary: '#F1C40F', \/\/ \u8f85\u52a9\u8272\uff1a\u91d1\u9ec4\u8272\uff0c\u4ee3\u8868\u5c0f\u9ea6\u548c\u98df\u6b32\n tertiary: '#8D99AE', \/\/ \u7b2c\u4e09\u8272\uff1a\u67d4\u548c\u84dd\u7070\u8272\uff0c\u63d0\u4f9b\u5bf9\u6bd4\n dark: '#1D3557', \/\/ \u6df1\u8272\uff1a\u6df1\u84dd\u7070\u8272\uff0c\u7528\u4e8e\u6587\u672c\n light: '#F1FAEE', \/\/ \u6d45\u8272\uff1a\u7c73\u767d\u8272\uff0c\u7528\u4e8e\u80cc\u666f\n },\n fontFamily: {\n inter: ['Inter', 'sans-serif'],\n },\n }\n }\n }\n <\/script>\n \n <style type=\"text\/tailwindcss\">\n @layer utilities {\n .content-auto {\n content-visibility: auto;\n }\n .text-shadow {\n text-shadow: 0 2px 4px rgba(0,0,0,0.3);\n }\n .text-shadow-lg {\n text-shadow: 0 4px 8px rgba(0,0,0,0.5);\n }\n .bg-blur {\n backdrop-filter: blur(8px);\n }\n .animate-fade-in {\n animation: fadeIn 0.8s ease-in-out;\n }\n .animate-slide-up {\n animation: slideUp 0.8s ease-out;\n }\n .animate-pulse-slow {\n animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n }\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n @keyframes slideUp {\n from { transform: translateY(30px); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n }\n @keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.7; }\n }\n .carousel-item {\n transition: transform 0.5s ease-in-out;\n }\n .carousel-indicator {\n transition: all 0.3s ease;\n }\n .carousel-indicator.active {\n background-color: #E63946;\n width: 2rem;\n }\n .product-card {\n transition: all 0.3s ease;\n }\n .product-card:hover {\n transform: translateY(-10px);\n }\n .news-card {\n transition: all 0.3s ease;\n }\n .news-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);\n }\n .product-card-hover {\n @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-2 hover:shadow-primary\/10;\n }\n .badge {\n @apply absolute top-4 left-4 bg-primary text-white text-sm font-bold px-3 py-1 rounded-full shadow-md z-10;\n }\n .card-badge {\n @apply absolute top-4 right-4 bg-secondary text-dark text-sm font-bold px-3 py-1 rounded-full shadow-md z-10;\n }\n .product-image {\n @apply w-full h-64 object-cover transition-transform duration-500 hover:scale-105;\n }\n .product-desc {\n @apply text-gray-600 leading-relaxed;\n }\n .card-footer {\n @apply mt-4 pt-4 border-t border-gray-100 flex justify-between items-center;\n }\n .price-tag {\n @apply text-primary font-bold text-lg;\n }\n .add-to-cart {\n @apply bg-primary text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-primary\/90 transition-colors;\n }\n .section-title-bold {\n @apply text-[clamp(1.8rem,4vw,3rem)] font-bold text-dark mb-4;\n }\n }\n <\/style>\n \n <style>\n html {\n scroll-behavior: smooth;\n }\n \n .fade-in {\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n }\n \n .fade-in.appear {\n opacity: 1;\n transform: translateY(0);\n }\n \n \/* \u4ea7\u54c1\u5361\u7247\u5c3a\u5bf8\u8c03\u6574 *\/\n .product-card {\n min-height: 450px;\n }\n <\/style>\n<\/head>\n<body class=\"font-inter bg-light text-dark antialiased\">\n \n \n <section id=\"sandpot\" class=\"py-16 md:py-24 bg-light\">\n <div class=\"container mx-auto px-4\">\n <div class=\"text-center mb-16\">\n <h2 class=\"section-title-bold\">\u7802\u9505\u81fb\u5473<\/h2>\n <div class=\"w-20 h-1 bg-primary mx-auto mb-6\"><\/div>\n <\/div>\n \n <div class=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6\">\n <div class=\"product-card fade-in relative\">\n <span class=\"card-badge\">\u7ecf\u5178<\/span>\n <img decoding=\"async\" src=\"\/image\/mapodoufu.jpg\" alt=\"\u9ebb\u5a46\u8c46\u8150\" class=\"product-image\">\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-3\">\u9ebb\u5a46\u8c46\u8150<\/h3>\n <p class=\"product-desc\">\n \u9ebb\u8fa3\u9c9c\u9999\uff0c\u8c46\u8150\u5ae9\u6ed1\u3002\n <\/p>\n <\/div>\n <\/div>\n \n <div class=\"product-card fade-in relative\">\n <span class=\"card-badge\">\u7ecf\u5178<\/span>\n <img decoding=\"async\" src=\"\/image\/dundagu.jpg\" alt=\"\u7096\u5927\u9aa8\" class=\"product-image\">\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-3\">\u7096\u5927\u9aa8<\/h3>\n <p class=\"product-desc\">\n \u8089\u8d28\u9c9c\u5ae9\uff0c\u6c64\u6c41\u6d53\u90c1\u3002\n <\/p>\n <\/div>\n <\/div>\n \n <div class=\"product-card fade-in relative\">\n <span class=\"card-badge\">\u7ecf\u5178<\/span>\n <img decoding=\"async\" src=\"\/image\/gutangsanxian.jpg\" alt=\"\u9aa8\u6c64\u4e09\u9c9c\u9505\" class=\"product-image\">\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-3\">\u9aa8\u6c64\u4e09\u9c9c\u9505<\/h3>\n <p class=\"product-desc\">\n \u591a\u79cd\u98df\u6750\u642d\u914d\uff0c\u8425\u517b\u4e30\u5bcc\u3002\n <\/p>\n <\/div>\n <\/div>\n \n <div class=\"product-card fade-in relative\">\n <span class=\"card-badge\">\u7ecf\u5178<\/span>\n <img decoding=\"async\" src=\"\/image\/shuizhuroupian.jpg\" alt=\"\u6c34\u716e\u8089\u7247\" class=\"product-image\">\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-3\">\u6c34\u716e\u8089\u7247<\/h3>\n <p class=\"product-desc\">\n \u8089\u7247\u6ed1\u5ae9\uff0c\u9ebb\u8fa3\u8fc7\u763e\u3002\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <script>\n \/\/ \u6eda\u52a8\u52a8\u753b\n document.addEventListener('DOMContentLoaded', () => {\n const fadeElements = document.querySelectorAll('.fade-in');\n \n const fadeInObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('appear');\n fadeInObserver.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1 });\n \n fadeElements.forEach(element => {\n fadeInObserver.observe(element);\n });\n });\n <\/script>\n<\/body>\n\n\n\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>\u963f\u8d5b\u5c0f\u9762 – \u62db\u724c\u4ea7\u54c1<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/font-awesome@4.7.0\/css\/font-awesome.min.css\" rel=\"stylesheet\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n primary: '#E63946', \/\/ \u4e3b\u8272\u8c03\uff1a\u6e29\u6696\u7ea2\u8272\uff0c\u4ee3\u8868\u8fa3\u6912\u548c\u70ed\u60c5\n secondary: '#F1C40F', \/\/ \u8f85\u52a9\u8272\uff1a\u91d1\u9ec4\u8272\uff0c\u4ee3\u8868\u5c0f\u9ea6\u548c\u98df\u6b32\n tertiary: '#8D99AE', \/\/ \u7b2c\u4e09\u8272\uff1a\u67d4\u548c\u84dd\u7070\u8272\uff0c\u63d0\u4f9b\u5bf9\u6bd4\n dark: '#1D3557', \/\/ \u6df1\u8272\uff1a\u6df1\u84dd\u7070\u8272\uff0c\u7528\u4e8e\u6587\u672c\n light: '#F1FAEE', \/\/ \u6d45\u8272\uff1a\u7c73\u767d\u8272\uff0c\u7528\u4e8e\u80cc\u666f\n },\n fontFamily: {\n inter: ['Inter', 'sans-serif'],\n },\n }\n }\n }\n <\/script>\n \n <style type=\"text\/tailwindcss\">\n @layer utilities {\n .content-auto {\n content-visibility: auto;\n }\n .text-shadow {\n text-shadow: 0 2px 4px rgba(0,0,0,0.3);\n }\n .text-shadow-lg {\n text-shadow: 0 4px 8px rgba(0,0,0,0.5);\n }\n .bg-blur {\n backdrop-filter: blur(8px);\n }\n .animate-fade-in {\n animation: fadeIn 0.8s ease-in-out;\n }\n .animate-slide-up {\n animation: slideUp 0.8s ease-out;\n }\n .animate-pulse-slow {\n animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n }\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n @keyframes slideUp {\n from { transform: translateY(30px); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n }\n @keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.7; }\n }\n .carousel-item {\n transition: transform 0.5s ease-in-out;\n }\n .carousel-indicator {\n transition: all 0.3s ease;\n }\n .carousel-indicator.active {\n background-color: #E63946;\n width: 2rem;\n }\n .product-card {\n transition: all 0.3s ease;\n }\n .product-card:hover {\n transform: translateY(-10px);\n }\n .news-card {\n transition: all 0.3s ease;\n }\n .news-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);\n }\n .product-card-hover {\n @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-2 hover:shadow-primary\/10;\n }\n .badge {\n @apply absolute top-4 left-4 bg-primary text-white text-sm font-bold px-3 py-1 rounded-full shadow-md z-10;\n }\n .card-badge {\n @apply absolute top-4 right-4 bg-secondary text-dark text-sm font-bold px-3 py-1 rounded-full shadow-md z-10;\n }\n .product-image {\n @apply w-full h-64 object-cover transition-transform duration-500 hover:scale-105;\n }\n .product-desc {\n @apply text-gray-600 leading-relaxed;\n }\n .card-footer {\n @apply mt-4 pt-4 border-t border-gray-100 flex justify-between items-center;\n }\n .price-tag {\n @apply text-primary font-bold text-lg;\n }\n .add-to-cart {\n @apply bg-primary text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-primary\/90 transition-colors;\n }\n .section-title-bold {\n @apply text-[clamp(1.8rem,4vw,3rem)] font-bold text-dark mb-4;\n }\n }\n <\/style>\n \n <style>\n html {\n scroll-behavior: smooth;\n }\n \n .fade-in {\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n }\n \n .fade-in.appear {\n opacity: 1;\n transform: translateY(0);\n }\n \n \/* \u4ea7\u54c1\u5361\u7247\u5c3a\u5bf8\u8c03\u6574 *\/\n .product-card {\n min-height: 450px;\n }\n \n \/* \u4f7f\u56fe\u7247\u9ad8\u5ea6\u4e0e\u6587\u5b57\u533a\u57df\u4e00\u81f4 *\/\n .text-content {\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n <\/style>\n<\/head>\n<body class=\"font-inter bg-light text-dark antialiased\">\n\n \n <section id=\"signature\" class=\"py-20 bg-white\">\n <div class=\"container mx-auto px-4\">\n <div class=\"text-center mb-12\">\n <h2 class=\"section-title-bold\">\u7279\u8272\u63a8\u8350<\/h2>\n <p class=\"text-gray-600 text-lg max-w-3xl mx-auto\">\n \u7cbe\u9009\u963f\u8d5b\u5c0f\u9762\u7279\u8272\u4ea7\u54c1\uff0c\u6bcf\u4e00\u6b3e\u90fd\u503c\u5f97\u5c1d\u4e00\u5c1d\n <\/p>\n <\/div>\n \n <div class=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6\">\n \n <div class=\"product-card bg-white rounded-xl overflow-hidden shadow-lg product-card-hover\">\n <div class=\"relative\">\n <span class=\"badge\">\u63a8\u8350<\/span>\n <img decoding=\"async\" src=\"\/image\/dagusaunlafen.jpg\" alt=\"\u62db\u724c\u5927\u9aa8\u9178\u8fa3\u7c89\" class=\"product-image\">\n <\/div>\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-2\">\u62db\u724c\u5927\u9aa8\u9178\u8fa3\u7c89<\/h3>\n <p class=\"product-desc mb-4\">\n \u9178\u8fa3\u5f00\u80c3\uff0c\u914d\u4ee5\u5927\u9aa8\uff0c\u8425\u517b\u4e30\u5bcc\u3002\n <\/p>\n <\/div>\n <\/div>\n \n \n <div class=\"product-card bg-white rounded-xl overflow-hidden shadow-lg product-card-hover\">\n <div class=\"relative\">\n <span class=\"badge\">\u63a8\u8350<\/span>\n <img decoding=\"async\" src=\"\/image\/zajiangsuanlafen.jpg\" alt=\"\u6742\u9171\u9178\u8fa3\u7c89\" class=\"product-image\">\n <\/div>\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-2\">\u6742\u9171\u9178\u8fa3\u7c89<\/h3>\n <p class=\"product-desc mb-4\">\n \u5305\u62ec\u725b\u8089\u9178\u8fa3\u7c89\u3001\u80a5\u80a0\u9178\u8fa3\u7c89\u3001\u9178\u83dc\u8089\u4e1d\u9178\u8fa3\u7c89\u3001\u6ce1\u6912\u9e21\u6742\u9178\u8fa3\u7c89\u3002\n <\/p>\n <\/div>\n <\/div>\n \n \n <div class=\"product-card bg-white rounded-xl overflow-hidden shadow-lg product-card-hover\">\n <div class=\"relative\">\n <span class=\"badge\">\u63a8\u8350<\/span>\n <img decoding=\"async\" src=\"\/image\/asaidagu.jpg\" alt=\"\u963f\u8d5b\u5927\u9aa8\" class=\"product-image\">\n <\/div>\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-2\">\u963f\u8d5b\u5927\u9aa8<\/h3>\n <p class=\"product-desc mb-4\">\n \u62db\u724c\u5c0f\u5403\u963f\u8d5b\u5927\u9aa8\uff0c\u55e6\u9762\u7edd\u914d\uff0c\u6bcf\u65e5\u9650\u91cf\u3002\n <\/p>\n <\/div>\n <\/div>\n \n \n <div class=\"product-card bg-white rounded-xl overflow-hidden shadow-lg product-card-hover\">\n <div class=\"relative\">\n <span class=\"badge\">\u63a8\u8350<\/span>\n <img decoding=\"async\" src=\"\/image\/hongtangbingfen.jpg\" alt=\"\u7ea2\u7cd6\u51b0\u7c89\" class=\"product-image\">\n <\/div>\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-2\">\u7ea2\u7cd6\u51b0\u7c89<\/h3>\n <p class=\"product-desc mb-4\">\n \u91cd\u5e86\u5730\u9053\u7279\u8272\u751c\u54c1\uff0c\u89e3\u8fa3\u5fc5\u5907\u3002\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <script>\n \/\/ \u6eda\u52a8\u52a8\u753b\n document.addEventListener('DOMContentLoaded', () => {\n const fadeElements = document.querySelectorAll('.fade-in');\n \n const fadeInObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('appear');\n fadeInObserver.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1 });\n \n fadeElements.forEach(element => {\n fadeInObserver.observe(element);\n });\n });\n <\/script>\n<\/body>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u963f\u8d5b\u5c0f\u9762 – \u91cd\u5e86\u5927\u9aa8\u5c0f\u9762\u5f00 […]<\/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":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","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-15","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.asaixiaomian.com\/index.php?rest_route=\/wp\/v2\/pages\/15","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.asaixiaomian.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.asaixiaomian.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.asaixiaomian.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.asaixiaomian.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=15"}],"version-history":[{"count":30,"href":"https:\/\/www.asaixiaomian.com\/index.php?rest_route=\/wp\/v2\/pages\/15\/revisions"}],"predecessor-version":[{"id":515,"href":"https:\/\/www.asaixiaomian.com\/index.php?rest_route=\/wp\/v2\/pages\/15\/revisions\/515"}],"wp:attachment":[{"href":"https:\/\/www.asaixiaomian.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":15,"date":"2025-03-07T11:46:24","date_gmt":"2025-03-07T03:46:24","guid":{"rendered":"http:\/\/8.148.226.92\/?page_id=15"},"modified":"2025-05-29T11:55:36","modified_gmt":"2025-05-29T03:55:36","slug":"%e8%81%94%e7%b3%bb%e6%88%91%e4%bb%ac","status":"publish","type":"page","link":"https:\/\/www.asaixiaomian.com\/?page_id=15","title":{"rendered":"\u62db\u724c\u4ea7\u54c1"},"content":{"rendered":"\n\n \n \n \u963f\u8d5b\u5c0f\u9762 – \u91cd\u5e86\u5927\u9aa8\u5c0f\u9762\u5f00\u521b\u8005<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/font-awesome@4.7.0\/css\/font-awesome.min.css\" rel=\"stylesheet\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n primary: '#E63946', \/\/ \u4e3b\u8272\u8c03\uff1a\u6e29\u6696\u7ea2\u8272\uff0c\u4ee3\u8868\u8fa3\u6912\u548c\u70ed\u60c5\n secondary: '#F1C40F', \/\/ \u8f85\u52a9\u8272\uff1a\u91d1\u9ec4\u8272\uff0c\u4ee3\u8868\u5c0f\u9ea6\u548c\u98df\u6b32\n tertiary: '#8D99AE', \/\/ \u7b2c\u4e09\u8272\uff1a\u67d4\u548c\u84dd\u7070\u8272\uff0c\u63d0\u4f9b\u5bf9\u6bd4\n dark: '#1D3557', \/\/ \u6df1\u8272\uff1a\u6df1\u84dd\u7070\u8272\uff0c\u7528\u4e8e\u6587\u672c\n light: '#F1FAEE', \/\/ \u6d45\u8272\uff1a\u7c73\u767d\u8272\uff0c\u7528\u4e8e\u80cc\u666f\n },\n fontFamily: {\n inter: ['Inter', 'sans-serif'],\n },\n }\n }\n }\n <\/script>\n \n <style type=\"text\/tailwindcss\">\n @layer utilities {\n .content-auto {\n content-visibility: auto;\n }\n .text-shadow {\n text-shadow: 0 2px 4px rgba(0,0,0,0.3);\n }\n .text-shadow-lg {\n text-shadow: 0 4px 8px rgba(0,0,0,0.5);\n }\n .bg-blur {\n backdrop-filter: blur(8px);\n }\n .animate-fade-in {\n animation: fadeIn 0.8s ease-in-out;\n }\n .animate-slide-up {\n animation: slideUp 0.8s ease-out;\n }\n .animate-pulse-slow {\n animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n }\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n @keyframes slideUp {\n from { transform: translateY(30px); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n }\n @keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.7; }\n }\n .carousel-item {\n transition: transform 0.5s ease-in-out;\n }\n .carousel-indicator {\n transition: all 0.3s ease;\n }\n .carousel-indicator.active {\n background-color: #E63946;\n width: 2rem;\n }\n .product-card {\n transition: all 0.3s ease;\n }\n .product-card:hover {\n transform: translateY(-10px);\n }\n .news-card {\n transition: all 0.3s ease;\n }\n .news-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);\n }\n .product-card-hover {\n @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-2 hover:shadow-primary\/10;\n }\n .badge {\n @apply absolute top-4 left-4 bg-primary text-white text-sm font-bold px-3 py-1 rounded-full shadow-md z-10;\n }\n .card-badge {\n @apply absolute top-4 right-4 bg-secondary text-dark text-sm font-bold px-3 py-1 rounded-full shadow-md z-10;\n }\n .product-image {\n @apply w-full h-64 object-cover transition-transform duration-500 hover:scale-105;\n }\n .product-desc {\n @apply text-gray-600 leading-relaxed;\n }\n .card-footer {\n @apply mt-4 pt-4 border-t border-gray-100 flex justify-between items-center;\n }\n .price-tag {\n @apply text-primary font-bold text-lg;\n }\n .add-to-cart {\n @apply bg-primary text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-primary\/90 transition-colors;\n }\n .section-title-bold {\n @apply text-[clamp(1.8rem,4vw,3rem)] font-bold text-dark mb-4;\n }\n }\n <\/style>\n \n <style>\n html {\n scroll-behavior: smooth;\n }\n \n .fade-in {\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n }\n \n .fade-in.appear {\n opacity: 1;\n transform: translateY(0);\n }\n \n \/* \u4ea7\u54c1\u5361\u7247\u5c3a\u5bf8\u8c03\u6574 *\/\n .product-card {\n min-height: 450px;\n }\n <\/style>\n<\/head>\n<body class=\"font-inter bg-light text-dark antialiased\">\n\n \n <section class=\"pt-20 pb-16 md:pb-24 bg-cover bg-center relative\" style=\"background-image: url('\/image\/banner2.jpg');\">\n <div class=\"absolute inset-0 bg-gradient-to-r from-dark\/90 to-dark\/70\"><\/div>\n <div class=\"container mx-auto px-4 relative z-10\">\n <div class=\"max-w-3xl\">\n <p class=\"text-[clamp(1rem,2vw,1.25rem)] text-white\/90 mb-8 max-w-2xl\">\n \u963f\u8d5b\u5c0f\u9762<br>\u91cd\u5e86\u5927\u9aa8\u5c0f\u9762\u5f00\u521b\u8005<br> \n 10\u5e74\u4e13\u6ce8\u4e00\u7897\u5c0f\u9762\uff0c\u8ba9\u4e2d\u56fd\u4eba\u4eab\u7528\u4f4e\u4ef7\u4f18\u8d28\u7684\u7f8e\u98df\n <\/p>\n <\/a>\n <\/div>\n <\/div>\n <\/section>\n <script>\n \/\/ \u6eda\u52a8\u52a8\u753b\n document.addEventListener('DOMContentLoaded', () => {\n const fadeElements = document.querySelectorAll('.fade-in');\n \n const fadeInObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('appear');\n fadeInObserver.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1 });\n \n fadeElements.forEach(element => {\n fadeInObserver.observe(element);\n });\n });\n <\/script>\n<\/body>\n\n\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>\u963f\u8d5b\u5c0f\u9762 – \u62db\u724c\u4ea7\u54c1<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/font-awesome@4.7.0\/css\/font-awesome.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=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n primary: '#E63946', \/\/ \u4e3b\u8272\u8c03\uff1a\u6e29\u6696\u7ea2\u8272\uff0c\u4ee3\u8868\u8fa3\u6912\u548c\u70ed\u60c5\n secondary: '#F1C40F', \/\/ \u8f85\u52a9\u8272\uff1a\u91d1\u9ec4\u8272\uff0c\u4ee3\u8868\u5c0f\u9ea6\u548c\u98df\u6b32\n tertiary: '#8D99AE', \/\/ \u7b2c\u4e09\u8272\uff1a\u67d4\u548c\u84dd\u7070\u8272\uff0c\u63d0\u4f9b\u5bf9\u6bd4\n dark: '#1D3557', \/\/ \u6df1\u8272\uff1a\u6df1\u84dd\u7070\u8272\uff0c\u7528\u4e8e\u6587\u672c\n light: '#F1FAEE', \/\/ \u6d45\u8272\uff1a\u7c73\u767d\u8272\uff0c\u7528\u4e8e\u80cc\u666f\n },\n fontFamily: {\n inter: ['Inter', 'sans-serif'],\n },\n }\n }\n }\n <\/script>\n \n <style type=\"text\/tailwindcss\">\n @layer utilities {\n .content-auto {\n content-visibility: auto;\n }\n .text-shadow {\n text-shadow: 0 2px 4px rgba(0,0,0,0.1);\n }\n .transition-transform-opacity {\n transition-property: transform, opacity;\n }\n .scrollbar-hide::-webkit-scrollbar {\n display: none;\n }\n .scrollbar-hide {\n -ms-overflow-style: none;\n scrollbar-width: none;\n }\n }\n <\/style>\n \n <style>\n html {\n scroll-behavior: smooth;\n }\n \n .story-image {\n @apply rounded-xl shadow-lg object-cover;\n }\n \n .timeline-item {\n @apply relative pl-8 pb-10;\n }\n \n .timeline-item::before {\n content: '';\n @apply absolute left-0 top-2 w-1 h-full bg-primary\/30;\n }\n \n .timeline-dot {\n @apply absolute left-[-10px] top-2 w-5 h-5 rounded-full bg-primary;\n }\n \n .fade-in {\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n }\n \n .fade-in.appear {\n opacity: 1;\n transform: translateY(0);\n }\n \n .feature-card {\n transition: all 0.3s ease;\n }\n \n .feature-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n }\n \n .number-card {\n transition: all 0.3s ease;\n }\n \n .number-card:hover {\n transform: scale(1.03);\n }\n <\/style>\n<\/head>\n<body class=\"font-inter bg-light text-dark\">\n \n <section id=\"about\" class=\"py-16 md:py-24 bg-white\">\n <div class=\"container mx-auto px-4\">\n <div class=\"text-center mb-16\">\n <h2 class=\"text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4\">\n \u4ea7\u54c1\u7406\u5ff5\n <\/h2>\n <div class=\"w-20 h-1 bg-primary mx-auto mb-6\"><\/div>\n <p class=\"text-gray-600 text-lg max-w-3xl mx-auto\">\n <\/p>\n <\/div>\n \n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-12 items-center\">\n <div class=\"fade-in\">\n <p class=\"text-gray-600 mb-6 leading-relaxed\">\n \u963f\u8d5b\u5c0f\u9762\u8d4b\u4e88\u4e86\u91cd\u5e86\u5c0f\u9762\u65b0\u7684\u5b9a\u4e49\u3002\u6253\u7834 \u201c\u5403\u7684\u662f\u4f50\u6599\uff0c\u6c64\u5e76\u4e0d\u91cd\u8981\u201d \u7684\u56fa\u6709\u8ba4\u77e5\uff0c\u575a\u6301 \u201c\u5341\u65a4\u5927\u7b52\u9aa8\uff0c\u71ac\u597d\u4e00\u9505\u6c64\u201d \u7684\u4ea7\u54c1\u7ecf\u8425\u7406\u5ff5\u3002\n <\/p>\n <p class=\"text-gray-600 mb-6 leading-relaxed\">\n \u5305\u542b\u91cd\u5e86\u5c0f\u9762\u3001\u9aa8\u6c64\u6284\u624b\u3001\u963f\u8d5b\u7802\u9505\u83dc\u3001\u9aa8\u6c64\u7c73\u7ebf\u3001\u7279\u8272\u62cc\u9762\u3001\u9178\u8fa3\u7c89\u3001\u73b0\u505a\u751c\u54c1\u3001\u963f\u8d5b\u5c0f\u5403\u516b\u5927\u54c1\u7c7b\u3002 \n <\/p>\n <p class=\"text-gray-600 mb-6 leading-relaxed\">\n \u4ea7\u54c1\u5b9a\u65f6\u4e0a\u65b0\uff0c\u4ea7\u54c1\u4e30\u5bcc\uff0c\u53e3\u5473\u591a\u6837\uff0c\u8986\u76d6\u5168\u65b9\u4f4d\u4eba\u7fa4\u3002\n <\/p>\n <div class=\"mt-8\">\n <\/a>\n <\/div>\n <\/div>\n <div class=\"relative fade-in\">\n <img decoding=\"async\" src=\"\/image\/chanpin.jpg\" alt=\"\u963f\u8d5b\u5c0f\u9762\" class=\"story-image w-full h-[500px]\">\n <div class=\"absolute -bottom-6 -left-6 w-32 h-32 bg-secondary\/20 rounded-lg -z-10\"><\/div>\n <div class=\"absolute -top-6 -right-6 w-24 h-24 bg-primary\/20 rounded-lg -z-10\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <script>\n \/\/ \u6eda\u52a8\u52a8\u753b\n document.addEventListener('DOMContentLoaded', () => {\n const fadeElements = document.querySelectorAll('.fade-in');\n \n const fadeInObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('appear');\n fadeInObserver.unobserve(entry.target);\n }\n });\n }, {\n threshold: 0.1\n });\n \n fadeElements.forEach(element => {\n fadeInObserver.observe(element);\n });\n });\n <\/script>\n<\/body>\n\n\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>\u963f\u8d5b\u5c0f\u9762 – \u91cd\u5e86\u5927\u9aa8\u5c0f\u9762\u5f00\u521b\u8005<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/font-awesome@4.7.0\/css\/font-awesome.min.css\" rel=\"stylesheet\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n primary: '#E63946', \/\/ \u4e3b\u8272\u8c03\uff1a\u6e29\u6696\u7ea2\u8272\uff0c\u4ee3\u8868\u8fa3\u6912\u548c\u70ed\u60c5\n secondary: '#F1C40F', \/\/ \u8f85\u52a9\u8272\uff1a\u91d1\u9ec4\u8272\uff0c\u4ee3\u8868\u5c0f\u9ea6\u548c\u98df\u6b32\n tertiary: '#8D99AE', \/\/ \u7b2c\u4e09\u8272\uff1a\u67d4\u548c\u84dd\u7070\u8272\uff0c\u63d0\u4f9b\u5bf9\u6bd4\n dark: '#1D3557', \/\/ \u6df1\u8272\uff1a\u6df1\u84dd\u7070\u8272\uff0c\u7528\u4e8e\u6587\u672c\n light: '#F1FAEE', \/\/ \u6d45\u8272\uff1a\u7c73\u767d\u8272\uff0c\u7528\u4e8e\u80cc\u666f\n },\n fontFamily: {\n inter: ['Inter', 'sans-serif'],\n },\n }\n }\n }\n <\/script>\n \n <style type=\"text\/tailwindcss\">\n @layer utilities {\n .content-auto {\n content-visibility: auto;\n }\n .text-shadow {\n text-shadow: 0 2px 4px rgba(0,0,0,0.3);\n }\n .text-shadow-lg {\n text-shadow: 0 4px 8px rgba(0,0,0,0.5);\n }\n .bg-blur {\n backdrop-filter: blur(8px);\n }\n .animate-fade-in {\n animation: fadeIn 0.8s ease-in-out;\n }\n .animate-slide-up {\n animation: slideUp 0.8s ease-out;\n }\n .animate-pulse-slow {\n animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n }\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n @keyframes slideUp {\n from { transform: translateY(30px); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n }\n @keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.7; }\n }\n .carousel-item {\n transition: transform 0.5s ease-in-out;\n }\n .carousel-indicator {\n transition: all 0.3s ease;\n }\n .carousel-indicator.active {\n background-color: #E63946;\n width: 2rem;\n }\n .product-card {\n transition: all 0.3s ease;\n }\n .product-card:hover {\n transform: translateY(-10px);\n }\n .news-card {\n transition: all 0.3s ease;\n }\n .news-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);\n }\n .product-card-hover {\n @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-2 hover:shadow-primary\/10;\n }\n .badge {\n @apply absolute top-4 left-4 bg-primary text-white text-sm font-bold px-3 py-1 rounded-full shadow-md z-10;\n }\n .card-badge {\n @apply absolute top-4 right-4 bg-secondary text-dark text-sm font-bold px-3 py-1 rounded-full shadow-md z-10;\n }\n .product-image {\n @apply w-full h-64 object-cover transition-transform duration-500 hover:scale-105;\n }\n .product-desc {\n @apply text-gray-600 leading-relaxed;\n }\n .card-footer {\n @apply mt-4 pt-4 border-t border-gray-100 flex justify-between items-center;\n }\n .price-tag {\n @apply text-primary font-bold text-lg;\n }\n .add-to-cart {\n @apply bg-primary text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-primary\/90 transition-colors;\n }\n .section-title-bold {\n @apply text-[clamp(1.8rem,4vw,3rem)] font-bold text-dark mb-4;\n }\n }\n <\/style>\n \n <style>\n html {\n scroll-behavior: smooth;\n }\n \n .fade-in {\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n }\n \n .fade-in.appear {\n opacity: 1;\n transform: translateY(0);\n }\n \n \/* \u4ea7\u54c1\u5361\u7247\u5c3a\u5bf8\u8c03\u6574 *\/\n .product-card {\n min-height: 450px;\n }\n <\/style>\n<\/head>\n<body class=\"font-inter bg-light text-dark antialiased\">\n \n \n <section id=\"craft\" class=\"py-16 md:py-24 bg-light\">\n <div class=\"container mx-auto px-4\">\n <div class=\"text-center mb-16\">\n <h2 class=\"section-title-bold\">\u4ea7\u54c1\u6838\u5fc3\u5de5\u827a<\/h2>\n <div class=\"w-20 h-1 bg-primary mx-auto mb-6\"><\/div>\n <\/div>\n \n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n <div class=\"product-card fade-in relative\">\n <span class=\"badge\">\u5de5\u827a<\/span>\n <img decoding=\"async\" src=\"\/image\/gy1.png\" alt=\"\u73b0\u71ac\u6c64\u5e95\" class=\"product-image\">\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-3\">\u73b0\u71ac\u6c64\u5e95<\/h3>\n <p class=\"product-desc\">\n \u5341\u65a4\u5927\u7b52\u9aa8\u71ac\u597d\u4e00\u9505\u6c64\uff0c\u79d8\u5236\u6c64\u5e95\u71ac\u8db3 2 \u5c0f\u65f6\uff0c\u9aa8\u6c64\u6bcf\u5929\u73b0\u71ac\u4e0d\u8fc7\u591c\u3002\n <\/p>\n\n <\/div>\n <\/div>\n \n <div class=\"product-card fade-in relative\">\n <span class=\"badge\">\u5de5\u827a<\/span>\n <img decoding=\"async\" src=\"\/image\/gy2.png\" alt=\"\u963f\u8d5b\u5b9a\u5236\u9c9c\u9762\" class=\"product-image\">\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-3\">\u963f\u8d5b\u5b9a\u5236\u9c9c\u9762<\/h3>\n <p class=\"product-desc\">\n \u91c7\u7528 AS7 \u5b9a\u5236\u9762\u7c89\uff0c\u597d\u9762\u6761\u65b0\u9c9c\u3001\u987a\u6ed1\u3001\u52b2\u9053\u3001Q \u5f39\uff0c\u4e00\u65a4\u9762\u7c89\u4e09\u4e2a\u86cb\uff0c\u516b\u9053\u4f20\u7edf\u5236\u9762\u5de5\u827a\u3002\n <\/p>\n <\/div>\n <\/div>\n \n <div class=\"product-card fade-in relative\">\n <span class=\"badge\">\u5de5\u827a<\/span>\n <img decoding=\"async\" src=\"\/image\/gy3.png\" alt=\"\u53e4\u6cd5\u8fa3\u6912\u6cb9\" class=\"product-image\">\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-3\">\u53e4\u6cd5\u8fa3\u6912\u6cb9<\/h3>\n <p class=\"product-desc\">\n \u7504\u9009\u597d\u8fa3\u6912\uff0c\u519c\u5bb6\u571f\u69a8\u83dc\u6cb9\uff0c\u7cbe\u51c6\u63a7\u6e29\uff0c\u6fc0\u53d1\u8fa3\u6912\u672c\u5473\u3002\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n \n <div class=\"py-12\"><\/div>\n\n <script>\n \/\/ \u6eda\u52a8\u52a8\u753b\n document.addEventListener('DOMContentLoaded', () => {\n const fadeElements = document.querySelectorAll('.fade-in');\n \n const fadeInObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('appear');\n fadeInObserver.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1 });\n \n fadeElements.forEach(element => {\n fadeInObserver.observe(element);\n });\n });\n <\/script>\n<\/body>\n\n\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>\u963f\u8d5b\u5c0f\u9762 – \u91cd\u5e86\u5927\u9aa8\u5c0f\u9762\u5f00\u521b\u8005<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/font-awesome@4.7.0\/css\/font-awesome.min.css\" rel=\"stylesheet\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n primary: '#E63946', \/\/ \u4e3b\u8272\u8c03\uff1a\u6e29\u6696\u7ea2\u8272\uff0c\u4ee3\u8868\u8fa3\u6912\u548c\u70ed\u60c5\n secondary: '#F1C40F', \/\/ \u8f85\u52a9\u8272\uff1a\u91d1\u9ec4\u8272\uff0c\u4ee3\u8868\u5c0f\u9ea6\u548c\u98df\u6b32\n tertiary: '#8D99AE', \/\/ \u7b2c\u4e09\u8272\uff1a\u67d4\u548c\u84dd\u7070\u8272\uff0c\u63d0\u4f9b\u5bf9\u6bd4\n dark: '#1D3557', \/\/ \u6df1\u8272\uff1a\u6df1\u84dd\u7070\u8272\uff0c\u7528\u4e8e\u6587\u672c\n light: '#F1FAEE', \/\/ \u6d45\u8272\uff1a\u7c73\u767d\u8272\uff0c\u7528\u4e8e\u80cc\u666f\n },\n fontFamily: {\n inter: ['Inter', 'sans-serif'],\n },\n }\n }\n }\n <\/script>\n \n <style type=\"text\/tailwindcss\">\n @layer utilities {\n .content-auto {\n content-visibility: auto;\n }\n .text-shadow {\n text-shadow: 0 2px 4px rgba(0,0,0,0.3);\n }\n .text-shadow-lg {\n text-shadow: 0 4px 8px rgba(0,0,0,0.5);\n }\n .bg-blur {\n backdrop-filter: blur(8px);\n }\n .animate-fade-in {\n animation: fadeIn 0.8s ease-in-out;\n }\n .animate-slide-up {\n animation: slideUp 0.8s ease-out;\n }\n .animate-pulse-slow {\n animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n }\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n @keyframes slideUp {\n from { transform: translateY(30px); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n }\n @keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.7; }\n }\n .carousel-item {\n transition: transform 0.5s ease-in-out;\n }\n .carousel-indicator {\n transition: all 0.3s ease;\n }\n .carousel-indicator.active {\n background-color: #E63946;\n width: 2rem;\n }\n .product-card {\n transition: all 0.3s ease;\n }\n .product-card:hover {\n transform: translateY(-10px);\n }\n .news-card {\n transition: all 0.3s ease;\n }\n .news-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);\n }\n .product-card-hover {\n @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-2 hover:shadow-primary\/10;\n }\n .badge {\n @apply absolute top-4 left-4 bg-primary text-white text-sm font-bold px-3 py-1 rounded-full shadow-md z-10;\n }\n .card-badge {\n @apply absolute top-4 right-4 bg-secondary text-dark text-sm font-bold px-3 py-1 rounded-full shadow-md z-10;\n }\n .product-image {\n @apply w-full h-64 object-cover transition-transform duration-500 hover:scale-105;\n }\n .product-desc {\n @apply text-gray-600 leading-relaxed;\n }\n .card-footer {\n @apply mt-4 pt-4 border-t border-gray-100 flex justify-between items-center;\n }\n .price-tag {\n @apply text-primary font-bold text-lg;\n }\n .add-to-cart {\n @apply bg-primary text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-primary\/90 transition-colors;\n }\n .section-title-bold {\n @apply text-[clamp(1.8rem,4vw,3rem)] font-bold text-dark mb-4;\n }\n }\n <\/style>\n \n <style>\n html {\n scroll-behavior: smooth;\n }\n \n .fade-in {\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n }\n \n .fade-in.appear {\n opacity: 1;\n transform: translateY(0);\n }\n \n \/* \u4ea7\u54c1\u5361\u7247\u5c3a\u5bf8\u8c03\u6574 *\/\n .product-card {\n min-height: 450px;\n }\n <\/style>\n<\/head>\n<body class=\"font-inter bg-light text-dark antialiased\">\n \n <section id=\"signature\" class=\"py-20 bg-white\">\n <div class=\"container mx-auto px-4\">\n <div class=\"text-center mb-12\">\n <h2 class=\"section-title-bold\">\u62db\u724c\u4ea7\u54c1<\/h2>\n <p class=\"text-gray-600 text-lg max-w-3xl mx-auto\">\n \u7cbe\u9009\u963f\u8d5b\u5c0f\u9762\u6700\u5177\u4ee3\u8868\u6027\u7684\u6838\u5fc3\u4ea7\u54c1\uff0c\u6bcf\u4e00\u6b3e\u90fd\u72ec\u5177\u7279\u8272\n <\/p>\n <\/div>\n \n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8\">\n \n <div class=\"product-card bg-white rounded-xl overflow-hidden shadow-lg product-card-hover\">\n <div class=\"relative\">\n <span class=\"badge\">\u62db\u724c<\/span>\n <img decoding=\"async\" src=\"\/image\/daguxiaomian.jpg\" alt=\"\u62db\u724c\u5927\u9aa8\u5c0f\u9762(\u8fa3)\" class=\"product-image\">\n <\/div>\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-2\">\u62db\u724c\u5927\u9aa8\u5c0f\u9762(\u8fa3)<\/h3>\n <p class=\"product-desc mb-4\">\n \u5c0f\u9762\u597d\u5403\uff0c\u6c64\u66f4\u9c9c\u7f8e\uff0c\u6709\u4e00\u5927\u5757\u8fde\u7b4b\u5e26\u8089\u7684\u5927\u9aa8\uff0c\u4e00\u4e2a\u4eba\u5c31\u80fd\u5403\u5f97\u9971\u9971\u7684\u3002\u5206\u8fa3\u4e0e\u4e0d\u8fa3\u53e3\u5473\u3002\n <\/p>\n <\/div>\n <\/div>\n \n \n <div class=\"product-card bg-white rounded-xl overflow-hidden shadow-lg product-card-hover\">\n <div class=\"relative\">\n <span class=\"badge\">\u62db\u724c<\/span>\n <img decoding=\"async\" src=\"\/image\/daguxiaomian2.jpg\" alt=\"\u62db\u724c\u5927\u9aa8\u5c0f\u9762(\u514d\u8fa3)\" class=\"product-image\">\n <\/div>\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-2\">\u62db\u724c\u5927\u9aa8\u5c0f\u9762(\u514d\u8fa3)<\/h3>\n <p class=\"product-desc mb-4\">\n \u5c0f\u9762\u597d\u5403\uff0c\u6c64\u66f4\u9c9c\u7f8e\uff0c\u6709\u4e00\u5927\u5757\u8fde\u7b4b\u5e26\u8089\u7684\u5927\u9aa8\uff0c\u4e00\u4e2a\u4eba\u5c31\u80fd\u5403\u5f97\u9971\u9971\u7684\u3002\u5206\u8fa3\u4e0e\u4e0d\u8fa3\u53e3\u5473\u3002\n <\/p>\n <\/div>\n <\/div>\n \n \n <div class=\"product-card bg-white rounded-xl overflow-hidden shadow-lg product-card-hover\">\n <div class=\"relative\">\n <span class=\"badge\">\u62db\u724c<\/span>\n <img decoding=\"async\" src=\"\/image\/wanzamian.jpg\" alt=\"\u62db\u724c\u8c4c\u6742\u9762\" class=\"product-image\">\n <\/div>\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-2\">\u62db\u724c\u8c4c\u6742\u9762<\/h3>\n <p class=\"product-desc mb-4\">\n \u5c0f\u9762\u7684\u7075\u9b42\u6d77\u6912\uff0c\u52b2\u9053\u7684\u9c9c\u9762\u6761\uff0c\u8c4c\u8c46\u7c92\u7c92\u6210\u578b\u9897\u9897\u7ef5\u8f6f\uff0c\u70b9\u775b\u6d47\u5934\u9171\u9999\u8089\u54e8\u5b50 \uff0c\u53e3\u53f7\u4e3a \u201c\u8c4c\u8c46\u563f\u8019\uff0c\u8fa3\u6912\u563f\u9999\u201d\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <script>\n \/\/ \u6eda\u52a8\u52a8\u753b\n document.addEventListener('DOMContentLoaded', () => {\n const fadeElements = document.querySelectorAll('.fade-in');\n \n const fadeInObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('appear');\n fadeInObserver.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1 });\n \n fadeElements.forEach(element => {\n fadeInObserver.observe(element);\n });\n });\n <\/script>\n<\/body>\n\n\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>\u963f\u8d5b\u5c0f\u9762 – \u91cd\u5e86\u5927\u9aa8\u5c0f\u9762\u5f00\u521b\u8005<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/font-awesome@4.7.0\/css\/font-awesome.min.css\" rel=\"stylesheet\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n primary: '#E63946', \/\/ \u4e3b\u8272\u8c03\uff1a\u6e29\u6696\u7ea2\u8272\uff0c\u4ee3\u8868\u8fa3\u6912\u548c\u70ed\u60c5\n secondary: '#F1C40F', \/\/ \u8f85\u52a9\u8272\uff1a\u91d1\u9ec4\u8272\uff0c\u4ee3\u8868\u5c0f\u9ea6\u548c\u98df\u6b32\n tertiary: '#8D99AE', \/\/ \u7b2c\u4e09\u8272\uff1a\u67d4\u548c\u84dd\u7070\u8272\uff0c\u63d0\u4f9b\u5bf9\u6bd4\n dark: '#1D3557', \/\/ \u6df1\u8272\uff1a\u6df1\u84dd\u7070\u8272\uff0c\u7528\u4e8e\u6587\u672c\n light: '#F1FAEE', \/\/ \u6d45\u8272\uff1a\u7c73\u767d\u8272\uff0c\u7528\u4e8e\u80cc\u666f\n },\n fontFamily: {\n inter: ['Inter', 'sans-serif'],\n },\n }\n }\n }\n <\/script>\n \n <style type=\"text\/tailwindcss\">\n @layer utilities {\n .content-auto {\n content-visibility: auto;\n }\n .text-shadow {\n text-shadow: 0 2px 4px rgba(0,0,0,0.3);\n }\n .text-shadow-lg {\n text-shadow: 0 4px 8px rgba(0,0,0,0.5);\n }\n .bg-blur {\n backdrop-filter: blur(8px);\n }\n .animate-fade-in {\n animation: fadeIn 0.8s ease-in-out;\n }\n .animate-slide-up {\n animation: slideUp 0.8s ease-out;\n }\n .animate-pulse-slow {\n animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n }\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n @keyframes slideUp {\n from { transform: translateY(30px); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n }\n @keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.7; }\n }\n .carousel-item {\n transition: transform 0.5s ease-in-out;\n }\n .carousel-indicator {\n transition: all 0.3s ease;\n }\n .carousel-indicator.active {\n background-color: #E63946;\n width: 2rem;\n }\n .product-card {\n transition: all 0.3s ease;\n }\n .product-card:hover {\n transform: translateY(-10px);\n }\n .news-card {\n transition: all 0.3s ease;\n }\n .news-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);\n }\n .product-card-hover {\n @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-2 hover:shadow-primary\/10;\n }\n .badge {\n @apply absolute top-4 left-4 bg-primary text-white text-sm font-bold px-3 py-1 rounded-full shadow-md z-10;\n }\n .card-badge {\n @apply absolute top-4 right-4 bg-secondary text-dark text-sm font-bold px-3 py-1 rounded-full shadow-md z-10;\n }\n .product-image {\n @apply w-full h-64 object-cover transition-transform duration-500 hover:scale-105;\n }\n .product-desc {\n @apply text-gray-600 leading-relaxed;\n }\n .card-footer {\n @apply mt-4 pt-4 border-t border-gray-100 flex justify-between items-center;\n }\n .price-tag {\n @apply text-primary font-bold text-lg;\n }\n .add-to-cart {\n @apply bg-primary text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-primary\/90 transition-colors;\n }\n .section-title-bold {\n @apply text-[clamp(1.8rem,4vw,3rem)] font-bold text-dark mb-4;\n }\n }\n <\/style>\n \n <style>\n html {\n scroll-behavior: smooth;\n }\n \n .fade-in {\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n }\n \n .fade-in.appear {\n opacity: 1;\n transform: translateY(0);\n }\n \n \/* \u4ea7\u54c1\u5361\u7247\u5c3a\u5bf8\u8c03\u6574 *\/\n .product-card {\n min-height: 450px;\n }\n <\/style>\n<\/head>\n<body class=\"font-inter bg-light text-dark antialiased\">\n \n <section id=\"popular\" class=\"py-16 md:py-24 bg-light\">\n <div class=\"container mx-auto px-4\">\n <div class=\"text-center mb-16\">\n <h2 class=\"section-title-bold\">\u70ed\u9500\u4ea7\u54c1<\/h2>\n <div class=\"w-20 h-1 bg-primary mx-auto mb-6\"><\/div>\n <\/div>\n \n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8\">\n <div class=\"product-card fade-in relative\">\n <span class=\"card-badge\">\u70ed\u9500<\/span>\n <img decoding=\"async\" src=\"\/image\/niuroumian.jpg\" alt=\"\u7ea2\u70e7\u725b\u8089\u9762\" class=\"product-image\">\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-3\">\u7ea2\u70e7\u725b\u8089\u9762<\/h3>\n <p class=\"product-desc\">\n \u725b\u8089\u8f6f\u7cef\u5316\u6e23\u4e0d\u7c98\u7259\u3002\n <\/p>\n <\/div>\n <\/div>\n \n <div class=\"product-card fade-in relative\">\n <span class=\"card-badge\">\u70ed\u9500<\/span>\n <img decoding=\"async\" src=\"\/image\/feichangmian.jpg\" alt=\"\u7ea2\u70e7\u80a5\u80a0\u9762\" class=\"product-image\">\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-3\">\u7ea2\u70e7\u80a5\u80a0\u9762<\/h3>\n <p class=\"product-desc\">\n \u7206\u7092\u9c9c\u80a5\u80a0\u53e3\u53e3\u8106\u3002\n <\/p>\n <\/div>\n <\/div>\n \n <div class=\"product-card fade-in relative\">\n <span class=\"card-badge\">\u70ed\u9500<\/span>\n <img decoding=\"async\" src=\"\/image\/paojiaojiza.jpg\" alt=\"\u6ce1\u6912\u9e21\u6742\u9762\" class=\"product-image\">\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-3\">\u6ce1\u6912\u9e21\u6742\u9762<\/h3>\n <p class=\"product-desc\">\n \u6ce1\u6912\u9e21\u6742\uff0c\u9178\u8fa3\u723d\u8106\uff0c\u8fa3\u800c\u4e0d\u71e5\uff0c\u9999\u800c\u4e0d\u817b\u3002\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <script>\n \/\/ \u6eda\u52a8\u52a8\u753b\n document.addEventListener('DOMContentLoaded', () => {\n const fadeElements = document.querySelectorAll('.fade-in');\n \n const fadeInObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('appear');\n fadeInObserver.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1 });\n \n fadeElements.forEach(element => {\n fadeInObserver.observe(element);\n });\n });\n <\/script>\n<\/body>\n\n\n\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>\u963f\u8d5b\u5c0f\u9762 – \u62db\u724c\u4ea7\u54c1<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/font-awesome@4.7.0\/css\/font-awesome.min.css\" rel=\"stylesheet\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n primary: '#E63946', \/\/ \u4e3b\u8272\u8c03\uff1a\u6e29\u6696\u7ea2\u8272\uff0c\u4ee3\u8868\u8fa3\u6912\u548c\u70ed\u60c5\n secondary: '#F1C40F', \/\/ \u8f85\u52a9\u8272\uff1a\u91d1\u9ec4\u8272\uff0c\u4ee3\u8868\u5c0f\u9ea6\u548c\u98df\u6b32\n tertiary: '#8D99AE', \/\/ \u7b2c\u4e09\u8272\uff1a\u67d4\u548c\u84dd\u7070\u8272\uff0c\u63d0\u4f9b\u5bf9\u6bd4\n dark: '#1D3557', \/\/ \u6df1\u8272\uff1a\u6df1\u84dd\u7070\u8272\uff0c\u7528\u4e8e\u6587\u672c\n light: '#F1FAEE', \/\/ \u6d45\u8272\uff1a\u7c73\u767d\u8272\uff0c\u7528\u4e8e\u80cc\u666f\n },\n fontFamily: {\n inter: ['Inter', 'sans-serif'],\n },\n }\n }\n }\n <\/script>\n \n <style type=\"text\/tailwindcss\">\n @layer utilities {\n .content-auto {\n content-visibility: auto;\n }\n .text-shadow {\n text-shadow: 0 2px 4px rgba(0,0,0,0.3);\n }\n .text-shadow-lg {\n text-shadow: 0 4px 8px rgba(0,0,0,0.5);\n }\n .bg-blur {\n backdrop-filter: blur(8px);\n }\n .animate-fade-in {\n animation: fadeIn 0.8s ease-in-out;\n }\n .animate-slide-up {\n animation: slideUp 0.8s ease-out;\n }\n .animate-pulse-slow {\n animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n }\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n @keyframes slideUp {\n from { transform: translateY(30px); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n }\n @keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.7; }\n }\n .carousel-item {\n transition: transform 0.5s ease-in-out;\n }\n .carousel-indicator {\n transition: all 0.3s ease;\n }\n .carousel-indicator.active {\n background-color: #E63946;\n width: 2rem;\n }\n .product-card {\n transition: all 0.3s ease;\n }\n .product-card:hover {\n transform: translateY(-10px);\n }\n .news-card {\n transition: all 0.3s ease;\n }\n .news-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);\n }\n .product-card-hover {\n @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-2 hover:shadow-primary\/10;\n }\n .badge {\n @apply absolute top-4 left-4 bg-primary text-white text-sm font-bold px-3 py-1 rounded-full shadow-md z-10;\n }\n .card-badge {\n @apply absolute top-4 right-4 bg-secondary text-dark text-sm font-bold px-3 py-1 rounded-full shadow-md z-10;\n }\n .product-image {\n @apply w-full h-64 object-cover transition-transform duration-500 hover:scale-105;\n }\n .product-desc {\n @apply text-gray-600 leading-relaxed;\n }\n .card-footer {\n @apply mt-4 pt-4 border-t border-gray-100 flex justify-between items-center;\n }\n .price-tag {\n @apply text-primary font-bold text-lg;\n }\n .add-to-cart {\n @apply bg-primary text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-primary\/90 transition-colors;\n }\n .section-title-bold {\n @apply text-[clamp(1.8rem,4vw,3rem)] font-bold text-dark mb-4;\n }\n }\n <\/style>\n \n <style>\n html {\n scroll-behavior: smooth;\n }\n \n .fade-in {\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n }\n \n .fade-in.appear {\n opacity: 1;\n transform: translateY(0);\n }\n \n \/* \u4ea7\u54c1\u5361\u7247\u5c3a\u5bf8\u8c03\u6574 *\/\n .product-card {\n min-height: 450px;\n }\n \n \/* \u4f7f\u56fe\u7247\u9ad8\u5ea6\u4e0e\u6587\u5b57\u533a\u57df\u4e00\u81f4 *\/\n .text-content {\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n <\/style>\n<\/head>\n<body class=\"font-inter bg-light text-dark antialiased\">\n\n \n <section id=\"signature\" class=\"py-20 bg-white\">\n <div class=\"container mx-auto px-4\">\n <div class=\"text-center mb-12\">\n <h2 class=\"section-title-bold\">\u6284\u624b<\/h2>\n <p class=\"text-gray-600 text-lg max-w-3xl mx-auto\">\n \u7cbe\u9009\u963f\u8d5b\u5c0f\u9762\u6700\u5177\u4ee3\u8868\u6027\u7684\u6284\u624b\u4ea7\u54c1\uff0c\u6bcf\u4e00\u6b3e\u90fd\u72ec\u5177\u7279\u8272\n <\/p>\n <\/div>\n \n <div class=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6\">\n \n <div class=\"product-card bg-white rounded-xl overflow-hidden shadow-lg product-card-hover\">\n <div class=\"relative\">\n <span class=\"badge\">\u7279\u8272<\/span>\n <img decoding=\"async\" src=\"\/image\/laomachaoshou.jpg\" alt=\"\u8001\u9ebb\u6284\u624b\" class=\"product-image\">\n <\/div>\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-2\">\u8001\u9ebb\u6284\u624b<\/h3>\n <p class=\"product-desc mb-4\">\n \u624b\u5de5\u5305\u5236\u7684\u6284\u624b\uff0c\u76ae\u8584\u9985\u5927\uff0c\u914d\u4ee5\u7279\u5236\u7684\u9ebb\u8fa3\u6c64\u5e95\uff0c\u9ebb\u800c\u4e0d\u71e5\uff0c\u8fa3\u800c\u4e0d\u4f24\u3002\n <\/p>\n <\/div>\n <\/div>\n \n \n <div class=\"product-card bg-white rounded-xl overflow-hidden shadow-lg product-card-hover\">\n <div class=\"relative\">\n <span class=\"badge\">\u7279\u8272<\/span>\n <img decoding=\"async\" src=\"\/image\/hongyouchaoshou.jpg\" alt=\"\u7ea2\u6cb9\u5e72\u62cc\u6284\u624b\" class=\"product-image\">\n <\/div>\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-2\">\u7ea2\u6cb9\u5e72\u62cc\u6284\u624b<\/h3>\n <p class=\"product-desc mb-4\">\n \u7ea2\u6cb9\u9999\u6c14\u6d53\u90c1\uff0c\u6284\u624b\u53e3\u611f\u4e30\u5bcc\u3002\n <\/p>\n <\/div>\n <\/div>\n \n \n <div class=\"product-card bg-white rounded-xl overflow-hidden shadow-lg product-card-hover\">\n <div class=\"relative\">\n <span class=\"badge\">\u7279\u8272<\/span>\n <img decoding=\"async\" src=\"\/image\/fanqiechaoshou.jpg\" alt=\"\u756a\u8304\u9aa8\u6c64\u6284\u624b\" class=\"product-image\">\n <\/div>\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-2\">\u756a\u8304\u9aa8\u6c64\u6284\u624b<\/h3>\n <p class=\"product-desc mb-4\">\n \u9178\u751c\u53ef\u53e3\u7684\u756a\u8304\u6c64\u5e95\uff0c\u8425\u517b\u4e30\u5bcc\u3002\n <\/p>\n <\/div>\n <\/div>\n \n \n <div class=\"product-card bg-white rounded-xl overflow-hidden shadow-lg product-card-hover\">\n <div class=\"relative\">\n <span class=\"badge\">\u7279\u8272<\/span>\n <img decoding=\"async\" src=\"\/image\/gutangchaoshou.jpg\" alt=\"\u9aa8\u6c64\u6284\u624b\" class=\"product-image\">\n <\/div>\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-2\">\u9aa8\u6c64\u6284\u624b<\/h3>\n <p class=\"product-desc mb-4\">\n \u539f\u6c41\u539f\u5473\u7684\u9aa8\u6c64\uff0c\u9c9c\u7f8e\u53ef\u53e3\u3002\n <\/p>\n <\/div>\n <\/div>\n \n \n <div class=\"product-card bg-white rounded-xl overflow-hidden shadow-lg product-card-hover\">\n <div class=\"relative\">\n <span class=\"badge\">\u7279\u8272<\/span>\n <img decoding=\"async\" src=\"\/image\/zhachaoshou.jpg\" alt=\"\u70b8\u6284\u624b\" class=\"product-image\">\n <\/div>\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-2\">\u70b8\u6284\u624b<\/h3>\n <p class=\"product-desc mb-4\">\n \u5916\u9165\u91cc\u5ae9\uff0c\u53e3\u611f\u72ec\u7279\u3002\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <script>\n \/\/ \u6eda\u52a8\u52a8\u753b\n document.addEventListener('DOMContentLoaded', () => {\n const fadeElements = document.querySelectorAll('.fade-in');\n \n const fadeInObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('appear');\n fadeInObserver.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1 });\n \n fadeElements.forEach(element => {\n fadeInObserver.observe(element);\n });\n });\n <\/script> \n\n\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>\u963f\u8d5b\u5c0f\u9762 – \u91cd\u5e86\u5927\u9aa8\u5c0f\u9762\u5f00\u521b\u8005<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/font-awesome@4.7.0\/css\/font-awesome.min.css\" rel=\"stylesheet\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n primary: '#E63946', \/\/ \u4e3b\u8272\u8c03\uff1a\u6e29\u6696\u7ea2\u8272\uff0c\u4ee3\u8868\u8fa3\u6912\u548c\u70ed\u60c5\n secondary: '#F1C40F', \/\/ \u8f85\u52a9\u8272\uff1a\u91d1\u9ec4\u8272\uff0c\u4ee3\u8868\u5c0f\u9ea6\u548c\u98df\u6b32\n tertiary: '#8D99AE', \/\/ \u7b2c\u4e09\u8272\uff1a\u67d4\u548c\u84dd\u7070\u8272\uff0c\u63d0\u4f9b\u5bf9\u6bd4\n dark: '#1D3557', \/\/ \u6df1\u8272\uff1a\u6df1\u84dd\u7070\u8272\uff0c\u7528\u4e8e\u6587\u672c\n light: '#F1FAEE', \/\/ \u6d45\u8272\uff1a\u7c73\u767d\u8272\uff0c\u7528\u4e8e\u80cc\u666f\n },\n fontFamily: {\n inter: ['Inter', 'sans-serif'],\n },\n }\n }\n }\n <\/script>\n \n <style type=\"text\/tailwindcss\">\n @layer utilities {\n .content-auto {\n content-visibility: auto;\n }\n .text-shadow {\n text-shadow: 0 2px 4px rgba(0,0,0,0.3);\n }\n .text-shadow-lg {\n text-shadow: 0 4px 8px rgba(0,0,0,0.5);\n }\n .bg-blur {\n backdrop-filter: blur(8px);\n }\n .animate-fade-in {\n animation: fadeIn 0.8s ease-in-out;\n }\n .animate-slide-up {\n animation: slideUp 0.8s ease-out;\n }\n .animate-pulse-slow {\n animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n }\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n @keyframes slideUp {\n from { transform: translateY(30px); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n }\n @keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.7; }\n }\n .carousel-item {\n transition: transform 0.5s ease-in-out;\n }\n .carousel-indicator {\n transition: all 0.3s ease;\n }\n .carousel-indicator.active {\n background-color: #E63946;\n width: 2rem;\n }\n .product-card {\n transition: all 0.3s ease;\n }\n .product-card:hover {\n transform: translateY(-10px);\n }\n .news-card {\n transition: all 0.3s ease;\n }\n .news-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);\n }\n .product-card-hover {\n @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-2 hover:shadow-primary\/10;\n }\n .badge {\n @apply absolute top-4 left-4 bg-primary text-white text-sm font-bold px-3 py-1 rounded-full shadow-md z-10;\n }\n .card-badge {\n @apply absolute top-4 right-4 bg-secondary text-dark text-sm font-bold px-3 py-1 rounded-full shadow-md z-10;\n }\n .product-image {\n @apply w-full h-64 object-cover transition-transform duration-500 hover:scale-105;\n }\n .product-desc {\n @apply text-gray-600 leading-relaxed;\n }\n .card-footer {\n @apply mt-4 pt-4 border-t border-gray-100 flex justify-between items-center;\n }\n .price-tag {\n @apply text-primary font-bold text-lg;\n }\n .add-to-cart {\n @apply bg-primary text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-primary\/90 transition-colors;\n }\n .section-title-bold {\n @apply text-[clamp(1.8rem,4vw,3rem)] font-bold text-dark mb-4;\n }\n }\n <\/style>\n \n <style>\n html {\n scroll-behavior: smooth;\n }\n \n .fade-in {\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n }\n \n .fade-in.appear {\n opacity: 1;\n transform: translateY(0);\n }\n \n \/* \u4ea7\u54c1\u5361\u7247\u5c3a\u5bf8\u8c03\u6574 *\/\n .product-card {\n min-height: 450px;\n }\n <\/style>\n<\/head>\n<body class=\"font-inter bg-light text-dark antialiased\">\n \n \n <section id=\"sandpot\" class=\"py-16 md:py-24 bg-light\">\n <div class=\"container mx-auto px-4\">\n <div class=\"text-center mb-16\">\n <h2 class=\"section-title-bold\">\u7802\u9505\u81fb\u5473<\/h2>\n <div class=\"w-20 h-1 bg-primary mx-auto mb-6\"><\/div>\n <\/div>\n \n <div class=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6\">\n <div class=\"product-card fade-in relative\">\n <span class=\"card-badge\">\u7ecf\u5178<\/span>\n <img decoding=\"async\" src=\"\/image\/mapodoufu.jpg\" alt=\"\u9ebb\u5a46\u8c46\u8150\" class=\"product-image\">\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-3\">\u9ebb\u5a46\u8c46\u8150<\/h3>\n <p class=\"product-desc\">\n \u9ebb\u8fa3\u9c9c\u9999\uff0c\u8c46\u8150\u5ae9\u6ed1\u3002\n <\/p>\n <\/div>\n <\/div>\n \n <div class=\"product-card fade-in relative\">\n <span class=\"card-badge\">\u7ecf\u5178<\/span>\n <img decoding=\"async\" src=\"\/image\/dundagu.jpg\" alt=\"\u7096\u5927\u9aa8\" class=\"product-image\">\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-3\">\u7096\u5927\u9aa8<\/h3>\n <p class=\"product-desc\">\n \u8089\u8d28\u9c9c\u5ae9\uff0c\u6c64\u6c41\u6d53\u90c1\u3002\n <\/p>\n <\/div>\n <\/div>\n \n <div class=\"product-card fade-in relative\">\n <span class=\"card-badge\">\u7ecf\u5178<\/span>\n <img decoding=\"async\" src=\"\/image\/gutangsanxian.jpg\" alt=\"\u9aa8\u6c64\u4e09\u9c9c\u9505\" class=\"product-image\">\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-3\">\u9aa8\u6c64\u4e09\u9c9c\u9505<\/h3>\n <p class=\"product-desc\">\n \u591a\u79cd\u98df\u6750\u642d\u914d\uff0c\u8425\u517b\u4e30\u5bcc\u3002\n <\/p>\n <\/div>\n <\/div>\n \n <div class=\"product-card fade-in relative\">\n <span class=\"card-badge\">\u7ecf\u5178<\/span>\n <img decoding=\"async\" src=\"\/image\/shuizhuroupian.jpg\" alt=\"\u6c34\u716e\u8089\u7247\" class=\"product-image\">\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-3\">\u6c34\u716e\u8089\u7247<\/h3>\n <p class=\"product-desc\">\n \u8089\u7247\u6ed1\u5ae9\uff0c\u9ebb\u8fa3\u8fc7\u763e\u3002\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <script>\n \/\/ \u6eda\u52a8\u52a8\u753b\n document.addEventListener('DOMContentLoaded', () => {\n const fadeElements = document.querySelectorAll('.fade-in');\n \n const fadeInObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('appear');\n fadeInObserver.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1 });\n \n fadeElements.forEach(element => {\n fadeInObserver.observe(element);\n });\n });\n <\/script>\n<\/body>\n\n\n\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>\u963f\u8d5b\u5c0f\u9762 – \u62db\u724c\u4ea7\u54c1<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/font-awesome@4.7.0\/css\/font-awesome.min.css\" rel=\"stylesheet\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n primary: '#E63946', \/\/ \u4e3b\u8272\u8c03\uff1a\u6e29\u6696\u7ea2\u8272\uff0c\u4ee3\u8868\u8fa3\u6912\u548c\u70ed\u60c5\n secondary: '#F1C40F', \/\/ \u8f85\u52a9\u8272\uff1a\u91d1\u9ec4\u8272\uff0c\u4ee3\u8868\u5c0f\u9ea6\u548c\u98df\u6b32\n tertiary: '#8D99AE', \/\/ \u7b2c\u4e09\u8272\uff1a\u67d4\u548c\u84dd\u7070\u8272\uff0c\u63d0\u4f9b\u5bf9\u6bd4\n dark: '#1D3557', \/\/ \u6df1\u8272\uff1a\u6df1\u84dd\u7070\u8272\uff0c\u7528\u4e8e\u6587\u672c\n light: '#F1FAEE', \/\/ \u6d45\u8272\uff1a\u7c73\u767d\u8272\uff0c\u7528\u4e8e\u80cc\u666f\n },\n fontFamily: {\n inter: ['Inter', 'sans-serif'],\n },\n }\n }\n }\n <\/script>\n \n <style type=\"text\/tailwindcss\">\n @layer utilities {\n .content-auto {\n content-visibility: auto;\n }\n .text-shadow {\n text-shadow: 0 2px 4px rgba(0,0,0,0.3);\n }\n .text-shadow-lg {\n text-shadow: 0 4px 8px rgba(0,0,0,0.5);\n }\n .bg-blur {\n backdrop-filter: blur(8px);\n }\n .animate-fade-in {\n animation: fadeIn 0.8s ease-in-out;\n }\n .animate-slide-up {\n animation: slideUp 0.8s ease-out;\n }\n .animate-pulse-slow {\n animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n }\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n @keyframes slideUp {\n from { transform: translateY(30px); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n }\n @keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.7; }\n }\n .carousel-item {\n transition: transform 0.5s ease-in-out;\n }\n .carousel-indicator {\n transition: all 0.3s ease;\n }\n .carousel-indicator.active {\n background-color: #E63946;\n width: 2rem;\n }\n .product-card {\n transition: all 0.3s ease;\n }\n .product-card:hover {\n transform: translateY(-10px);\n }\n .news-card {\n transition: all 0.3s ease;\n }\n .news-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);\n }\n .product-card-hover {\n @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-2 hover:shadow-primary\/10;\n }\n .badge {\n @apply absolute top-4 left-4 bg-primary text-white text-sm font-bold px-3 py-1 rounded-full shadow-md z-10;\n }\n .card-badge {\n @apply absolute top-4 right-4 bg-secondary text-dark text-sm font-bold px-3 py-1 rounded-full shadow-md z-10;\n }\n .product-image {\n @apply w-full h-64 object-cover transition-transform duration-500 hover:scale-105;\n }\n .product-desc {\n @apply text-gray-600 leading-relaxed;\n }\n .card-footer {\n @apply mt-4 pt-4 border-t border-gray-100 flex justify-between items-center;\n }\n .price-tag {\n @apply text-primary font-bold text-lg;\n }\n .add-to-cart {\n @apply bg-primary text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-primary\/90 transition-colors;\n }\n .section-title-bold {\n @apply text-[clamp(1.8rem,4vw,3rem)] font-bold text-dark mb-4;\n }\n }\n <\/style>\n \n <style>\n html {\n scroll-behavior: smooth;\n }\n \n .fade-in {\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n }\n \n .fade-in.appear {\n opacity: 1;\n transform: translateY(0);\n }\n \n \/* \u4ea7\u54c1\u5361\u7247\u5c3a\u5bf8\u8c03\u6574 *\/\n .product-card {\n min-height: 450px;\n }\n \n \/* \u4f7f\u56fe\u7247\u9ad8\u5ea6\u4e0e\u6587\u5b57\u533a\u57df\u4e00\u81f4 *\/\n .text-content {\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n <\/style>\n<\/head>\n<body class=\"font-inter bg-light text-dark antialiased\">\n\n \n <section id=\"signature\" class=\"py-20 bg-white\">\n <div class=\"container mx-auto px-4\">\n <div class=\"text-center mb-12\">\n <h2 class=\"section-title-bold\">\u7279\u8272\u63a8\u8350<\/h2>\n <p class=\"text-gray-600 text-lg max-w-3xl mx-auto\">\n \u7cbe\u9009\u963f\u8d5b\u5c0f\u9762\u7279\u8272\u4ea7\u54c1\uff0c\u6bcf\u4e00\u6b3e\u90fd\u503c\u5f97\u5c1d\u4e00\u5c1d\n <\/p>\n <\/div>\n \n <div class=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6\">\n \n <div class=\"product-card bg-white rounded-xl overflow-hidden shadow-lg product-card-hover\">\n <div class=\"relative\">\n <span class=\"badge\">\u63a8\u8350<\/span>\n <img decoding=\"async\" src=\"\/image\/dagusaunlafen.jpg\" alt=\"\u62db\u724c\u5927\u9aa8\u9178\u8fa3\u7c89\" class=\"product-image\">\n <\/div>\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-2\">\u62db\u724c\u5927\u9aa8\u9178\u8fa3\u7c89<\/h3>\n <p class=\"product-desc mb-4\">\n \u9178\u8fa3\u5f00\u80c3\uff0c\u914d\u4ee5\u5927\u9aa8\uff0c\u8425\u517b\u4e30\u5bcc\u3002\n <\/p>\n <\/div>\n <\/div>\n \n \n <div class=\"product-card bg-white rounded-xl overflow-hidden shadow-lg product-card-hover\">\n <div class=\"relative\">\n <span class=\"badge\">\u63a8\u8350<\/span>\n <img decoding=\"async\" src=\"\/image\/zajiangsuanlafen.jpg\" alt=\"\u6742\u9171\u9178\u8fa3\u7c89\" class=\"product-image\">\n <\/div>\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-2\">\u6742\u9171\u9178\u8fa3\u7c89<\/h3>\n <p class=\"product-desc mb-4\">\n \u5305\u62ec\u725b\u8089\u9178\u8fa3\u7c89\u3001\u80a5\u80a0\u9178\u8fa3\u7c89\u3001\u9178\u83dc\u8089\u4e1d\u9178\u8fa3\u7c89\u3001\u6ce1\u6912\u9e21\u6742\u9178\u8fa3\u7c89\u3002\n <\/p>\n <\/div>\n <\/div>\n \n \n <div class=\"product-card bg-white rounded-xl overflow-hidden shadow-lg product-card-hover\">\n <div class=\"relative\">\n <span class=\"badge\">\u63a8\u8350<\/span>\n <img decoding=\"async\" src=\"\/image\/asaidagu.jpg\" alt=\"\u963f\u8d5b\u5927\u9aa8\" class=\"product-image\">\n <\/div>\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-2\">\u963f\u8d5b\u5927\u9aa8<\/h3>\n <p class=\"product-desc mb-4\">\n \u62db\u724c\u5c0f\u5403\u963f\u8d5b\u5927\u9aa8\uff0c\u55e6\u9762\u7edd\u914d\uff0c\u6bcf\u65e5\u9650\u91cf\u3002\n <\/p>\n <\/div>\n <\/div>\n \n \n <div class=\"product-card bg-white rounded-xl overflow-hidden shadow-lg product-card-hover\">\n <div class=\"relative\">\n <span class=\"badge\">\u63a8\u8350<\/span>\n <img decoding=\"async\" src=\"\/image\/hongtangbingfen.jpg\" alt=\"\u7ea2\u7cd6\u51b0\u7c89\" class=\"product-image\">\n <\/div>\n <div class=\"p-6\">\n <h3 class=\"text-xl font-bold text-dark mb-2\">\u7ea2\u7cd6\u51b0\u7c89<\/h3>\n <p class=\"product-desc mb-4\">\n \u91cd\u5e86\u5730\u9053\u7279\u8272\u751c\u54c1\uff0c\u89e3\u8fa3\u5fc5\u5907\u3002\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <script>\n \/\/ \u6eda\u52a8\u52a8\u753b\n document.addEventListener('DOMContentLoaded', () => {\n const fadeElements = document.querySelectorAll('.fade-in');\n \n const fadeInObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('appear');\n fadeInObserver.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1 });\n \n fadeElements.forEach(element => {\n fadeInObserver.observe(element);\n });\n });\n <\/script>\n<\/body>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u963f\u8d5b\u5c0f\u9762 – \u91cd\u5e86\u5927\u9aa8\u5c0f\u9762\u5f00 […]<\/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":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","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-15","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.asaixiaomian.com\/index.php?rest_route=\/wp\/v2\/pages\/15","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.asaixiaomian.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.asaixiaomian.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.asaixiaomian.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.asaixiaomian.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=15"}],"version-history":[{"count":30,"href":"https:\/\/www.asaixiaomian.com\/index.php?rest_route=\/wp\/v2\/pages\/15\/revisions"}],"predecessor-version":[{"id":515,"href":"https:\/\/www.asaixiaomian.com\/index.php?rest_route=\/wp\/v2\/pages\/15\/revisions\/515"}],"wp:attachment":[{"href":"https:\/\/www.asaixiaomian.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}