491 lines
40 KiB
HTML
491 lines
40 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title></title>
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/7.4.1/swiper-bundle.min.css" type="text/css" rel="stylesheet" />
|
|
<link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/aos/3.0.0-beta.6/aos.css" type="text/css" rel="stylesheet" />
|
|
|
|
<link rel="stylesheet" href="./static/css/common.css">
|
|
<link rel="stylesheet" href="./static/css/index.css">
|
|
</head>
|
|
<body>
|
|
<!-- 导航栏 -->
|
|
<div class="navbar navbar-light navbar-mobile-light flex flex-row justify-center items-center fixed w-full h-[4.5rem] max-[1024px]:h-[4rem] px-[7%] z-[500]">
|
|
<div class="flex flex-row items-center h-full w-[80%] max-[1400px]:w-full mx-auto max-[1024px]:w-full">
|
|
<div class="h-full px-[2rem] max-[1400px]:px-[1.5rem] py-[1rem] bg-white rounded-br-[1rem]">
|
|
<img class="size-full object-contain" src="/static/images/logo.png" alt="">
|
|
</div>
|
|
<div class="w-[4rem] max-[1500px]:w-[2rem] max-[1400px]:hidden"></div>
|
|
<div class="h-full flex-1 min-[1024px]:border-b-[.0625rem] min-[1024px]:border-white flex flex-row items-center">
|
|
<div class="flex-1 navbar-items lg:flex hidden flex-row items-center justify-center transition text-[1.125rem] h-full">
|
|
<div data-design="true" data-source="nav" data-sourceid="{$nav['nav_id']}" data-categoryid="{$nav['nav_id']}" class="navbar-item flex justify-center items-center cursor-pointer h-full px-[2rem] max-[1800px]:px-[1rem] hover:bg-black hover:bg-opacity-20">
|
|
<a data-design="true" data-source="nav" data-sourceid="{$nav['nav_id']}" data-categoryid="{$nav['nav_id']}" href="#" class="text-white">网站首页</a>
|
|
</div>
|
|
<div data-design="true" data-source="nav" data-sourceid="{$nav['nav_id']}" data-categoryid="{$nav['nav_id']}" class="navbar-item flex justify-center items-center cursor-pointer h-full px-[2rem] max-[1800px]:px-[1rem] hover:bg-black hover:bg-opacity-20">
|
|
<a data-design="true" data-source="nav" data-sourceid="{$nav['nav_id']}" data-categoryid="{$nav['nav_id']}" href="#" class="text-white">关于我们</a>
|
|
</div>
|
|
<div data-design="true" data-source="nav" data-sourceid="{$nav['nav_id']}" data-categoryid="{$nav['nav_id']}" class="navbar-item flex justify-center items-center cursor-pointer h-full px-[2rem] max-[1800px]:px-[1rem] hover:bg-black hover:bg-opacity-20">
|
|
<a data-design="true" data-source="nav" data-sourceid="{$nav['nav_id']}" data-categoryid="{$nav['nav_id']}" href="#" class="text-white">产品中心</a>
|
|
</div>
|
|
<div data-design="true" data-source="nav" data-sourceid="{$nav['nav_id']}" data-categoryid="{$nav['nav_id']}" class="navbar-item flex justify-center items-center cursor-pointer h-full px-[2rem] max-[1800px]:px-[1rem] hover:bg-black hover:bg-opacity-20">
|
|
<a data-design="true" data-source="nav" data-sourceid="{$nav['nav_id']}" data-categoryid="{$nav['nav_id']}" href="#" class="text-white">应用场景</a>
|
|
</div>
|
|
<div data-design="true" data-source="nav" data-sourceid="{$nav['nav_id']}" data-categoryid="{$nav['nav_id']}" class="navbar-item flex justify-center items-center cursor-pointer h-full px-[2rem] max-[1800px]:px-[1rem] hover:bg-black hover:bg-opacity-20">
|
|
<a data-design="true" data-source="nav" data-sourceid="{$nav['nav_id']}" data-categoryid="{$nav['nav_id']}" href="#" class="text-white">视频中心</a>
|
|
</div>
|
|
<div data-design="true" data-source="nav" data-sourceid="{$nav['nav_id']}" data-categoryid="{$nav['nav_id']}" class="navbar-item flex justify-center items-center cursor-pointer h-full px-[2rem] max-[1800px]:px-[1rem] hover:bg-black hover:bg-opacity-20">
|
|
<a data-design="true" data-source="nav" data-sourceid="{$nav['nav_id']}" data-categoryid="{$nav['nav_id']}" href="#" class="text-white">新闻中心</a>
|
|
</div>
|
|
<div data-design="true" data-source="nav" data-sourceid="{$nav['nav_id']}" data-categoryid="{$nav['nav_id']}" class="navbar-item flex justify-center items-center cursor-pointer h-full px-[2rem] max-[1800px]:px-[1rem] hover:bg-black hover:bg-opacity-20">
|
|
<a data-design="true" data-source="nav" data-sourceid="{$nav['nav_id']}" data-categoryid="{$nav['nav_id']}" href="#" class="text-white">联系我们</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="navbar-toggler-icon lg:hidden flex justify-center items-center cursor-pointer w-12 h-12">
|
|
<svg class="w-full h-full " xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-text-indent-left" viewBox="0 0 16 16">
|
|
<path d="M2 3.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm.646 2.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L4.293 8 2.646 6.354a.5.5 0 0 1 0-.708zM7 6.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 3a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm-5 3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
|
|
</svg>
|
|
</div>
|
|
<div class="navbar-offcanvas-mask hidden fixed h-full w-full top-0 left-0 bg-opacity-30 bg-black"></div>
|
|
<div class="navbar-offcanvas hidden fixed bg-white h-full w-0 top-0 left-0">
|
|
<div class="navbar-offcanvas-body flex flex-col text-gray-900">
|
|
<div class="navbar-offcanvas-close flex cursor-pointer justify-end mb-3 pr-2 pt-2">
|
|
<svg class="navbar-offcanvas-close-icon h-[3.125rem] w-[3.125rem]" xmlns="http://www.w3.org/2000/svg" fill="#888" class="bi bi-x" viewBox="0 0 16 16">
|
|
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
|
|
</svg>
|
|
</div>
|
|
<div class="ml-12 mr-6 mb-2 text-sm">
|
|
<div class="flex flex-row items-center text-grey-900 mb-1">
|
|
<svg class="h-4 w-4 mr-[0.375rem]" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M41.7796 20.6066C42.0324 18.9108 41.9495 17.1747 41.5309 15.5054C40.978 13.3002 39.8392 11.2118 38.1147 9.4873C36.3902 7.76281 34.3018 6.62409 32.0967 6.07115C30.4274 5.65257 28.6912 5.56967 26.9954 5.82245" stroke="#000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M34.1896 19.8035C34.4604 17.9869 33.8966 16.0699 32.4982 14.6715C31.0997 13.2731 29.1827 12.7092 27.3662 12.98" stroke="#000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M14.3755 8.79423C15.1021 8.79423 15.7715 9.18825 16.1241 9.82349L18.5706 14.2303C18.8909 14.8073 18.9059 15.5052 18.6108 16.0955L16.254 20.8091C16.254 20.8091 16.937 24.3206 19.7954 27.179C22.6538 30.0374 26.1535 30.7086 26.1535 30.7086L30.8664 28.3522C31.4571 28.0568 32.1555 28.0721 32.7327 28.393L37.152 30.85C37.7866 31.2028 38.1802 31.8719 38.1802 32.598L38.1802 37.6715C38.1802 40.2552 35.7803 42.1213 33.3322 41.2952C28.3043 39.5987 20.4996 36.3685 15.5528 31.4216C10.6059 26.4748 7.3757 18.6701 5.67916 13.6422C4.85314 11.1941 6.71923 8.79423 9.30288 8.79423L14.3755 8.79423Z" fill="none" stroke="#000" stroke-width="3" stroke-linejoin="round"/></svg>
|
|
<a href="tel:13915039018">电话(工厂): 13915039018</a>
|
|
</div>
|
|
<div class="flex flex-row items-center text-grey-900 mb-1">
|
|
<svg class="h-4 w-4 mr-[0.375rem]" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M41.7796 20.6066C42.0324 18.9108 41.9495 17.1747 41.5309 15.5054C40.978 13.3002 39.8392 11.2118 38.1147 9.4873C36.3902 7.76281 34.3018 6.62409 32.0967 6.07115C30.4274 5.65257 28.6912 5.56967 26.9954 5.82245" stroke="#000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M34.1896 19.8035C34.4604 17.9869 33.8966 16.0699 32.4982 14.6715C31.0997 13.2731 29.1827 12.7092 27.3662 12.98" stroke="#000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M14.3755 8.79423C15.1021 8.79423 15.7715 9.18825 16.1241 9.82349L18.5706 14.2303C18.8909 14.8073 18.9059 15.5052 18.6108 16.0955L16.254 20.8091C16.254 20.8091 16.937 24.3206 19.7954 27.179C22.6538 30.0374 26.1535 30.7086 26.1535 30.7086L30.8664 28.3522C31.4571 28.0568 32.1555 28.0721 32.7327 28.393L37.152 30.85C37.7866 31.2028 38.1802 31.8719 38.1802 32.598L38.1802 37.6715C38.1802 40.2552 35.7803 42.1213 33.3322 41.2952C28.3043 39.5987 20.4996 36.3685 15.5528 31.4216C10.6059 26.4748 7.3757 18.6701 5.67916 13.6422C4.85314 11.1941 6.71923 8.79423 9.30288 8.79423L14.3755 8.79423Z" fill="none" stroke="#000" stroke-width="3" stroke-linejoin="round"/></svg>
|
|
<a href="tel:18921079018">电话(门店): 18921079018</a>
|
|
</div>
|
|
<div class="flex flex-row items-center text-gray-900 mb-1">
|
|
<svg class="h-4 w-4 mr-[0.375rem]" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M44 24V9H24H4V24V39H24" stroke="#000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M44 34L30 34" stroke="#000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M39 29L44 34L39 39" stroke="#000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 9L24 24L44 9" stroke="#000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
<a href="mailto:">邮箱</a>
|
|
</div>
|
|
</div>
|
|
<div class="navbar-offcanvas-items ml-12 mr-6 border-y flex flex-col">
|
|
<div class="text-[16px] py-3 border-b last:border-0">
|
|
<div class="flex flex-row justify-between items-center navbar-offcanvas-inner-button hover:font-bold">
|
|
<a data-design="true" data-source="nav" data-sourceid="{$nav['nav_id']}" data-categoryid="{$nav['nav_id']}" href="">网站首页</a>
|
|
</div>
|
|
</div>
|
|
<div class="text-[16px] py-3 border-b last:border-0">
|
|
<div class="flex flex-row justify-between items-center navbar-offcanvas-inner-button hover:font-bold">
|
|
<a data-design="true" data-source="nav" data-sourceid="{$nav['nav_id']}" data-categoryid="{$nav['nav_id']}" href="">关于我们</a>
|
|
</div>
|
|
</div>
|
|
<div class="text-[16px] py-3 border-b last:border-0">
|
|
<div class="flex flex-row justify-between items-center navbar-offcanvas-inner-button hover:font-bold">
|
|
<a data-design="true" data-source="nav" data-sourceid="{$nav['nav_id']}" data-categoryid="{$nav['nav_id']}" href="">产品中心</a>
|
|
</div>
|
|
</div>
|
|
<div class="text-[16px] py-3 border-b last:border-0">
|
|
<div class="flex flex-row justify-between items-center navbar-offcanvas-inner-button hover:font-bold">
|
|
<a data-design="true" data-source="nav" data-sourceid="{$nav['nav_id']}" data-categoryid="{$nav['nav_id']}" href="">应用场景</a>
|
|
</div>
|
|
</div>
|
|
<div class="text-[16px] py-3 border-b last:border-0">
|
|
<div class="flex flex-row justify-between items-center navbar-offcanvas-inner-button hover:font-bold">
|
|
<a data-design="true" data-source="nav" data-sourceid="{$nav['nav_id']}" data-categoryid="{$nav['nav_id']}" href="">视频中心</a>
|
|
</div>
|
|
</div>
|
|
<div class="text-[16px] py-3 border-b last:border-0">
|
|
<div class="flex flex-row justify-between items-center navbar-offcanvas-inner-button hover:font-bold">
|
|
<a data-design="true" data-source="nav" data-sourceid="{$nav['nav_id']}" data-categoryid="{$nav['nav_id']}" href="">新闻中心</a>
|
|
</div>
|
|
</div>
|
|
<div class="text-[16px] py-3 border-b last:border-0">
|
|
<div class="flex flex-row justify-between items-center navbar-offcanvas-inner-button hover:font-bold">
|
|
<a data-design="true" data-source="nav" data-sourceid="{$nav['nav_id']}" data-categoryid="{$nav['nav_id']}" href="">联系我们</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 导航栏 -->
|
|
|
|
|
|
<!-- 轮播图 -->
|
|
<div class="w-full relative select-none">
|
|
<div class="swiper carousel-swiper w-full h-[100vh]">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<div class="size-full"><img class="size-full object-cover scale-150" src="/static/images/banner1.JPG" alt=""></div>
|
|
<div class="absolute top-0 left-0 size-full flex flex-row justify-center items-center">
|
|
<div class="flex flex-col items-center justify-center size-full">
|
|
<div data-aos="fade-right" data-aos-duration="800" data-aos-delay="200" class="carousel-aos text-center text-white text-[3rem] w-[70%] max-[1380px]:text-[2rem] max-[1380px]:w-[90vw] max-[800px]:text-[1.75rem]">鸿福如电子电器有限公司,愿与您携手,点亮每一座城市的夜晚,共创美好未来!</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<div class="size-full"><img class="size-full object-cover" src="/static/images/banner2.png" alt=""></div>
|
|
<div class="absolute top-0 left-0 size-full flex flex-row justify-center items-center">
|
|
<div class="flex flex-col items-center justify-center size-full">
|
|
<div data-aos="fade-right" data-aos-duration="800" data-aos-delay="200" class="carousel-aos text-center text-white text-[3rem] w-[70%] max-[1380px]:text-[2rem] max-[1380px]:w-[90vw] max-[800px]:text-[1.75rem]">常州鸿福如电子电器专注于户外灯饰产品的研发与生产</br>做值得信赖的LED灯带制造商</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 轮播图 -->
|
|
<!-- 产品系列 -->
|
|
<div class="w-full px-[7%] pt-[4rem] max-[900px]:py-[2rem]">
|
|
<div class="text-1xl flex flex-col items-center" data-aos="fade-down" data-aos-duration="800" data-aos-delay="0">
|
|
PRODUCT SERIES
|
|
</div>
|
|
<div class="mt-[.4rem] mb-[3rem] max-[660px]:mb-[2rem] text-[2.15rem] flex flex-col items-center font-bold" data-aos="fade-down" data-aos-duration="800" data-aos-delay="0">
|
|
产品系列
|
|
</div>
|
|
<div class="w-[80%] mx-auto grid grid-cols-4 gap-[2rem] max-[1400px]:grid-cols-2 max-[880px]:grid-cols-1 max-[880px]:gap-[1rem]" data-aos="fade-down" data-aos-duration="800" data-aos-delay="0">
|
|
<div class="flex flex-row items-center justify-between border-t-[.125rem] border-b-[.125rem] border-gray-300 py-[0.75rem] mx-[1rem]">
|
|
<div class="flex flex-row items-center justify-center">
|
|
<img src="/static/images/product-series-img-1.png" class="size-[3.125rem]">
|
|
<div class="ml-[1rem]">
|
|
冰条灯串
|
|
</div>
|
|
</div>
|
|
<div><svg t="1745333587689" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2605" width="16" height="16"><path d="M534.826667 935.466667a47.36 47.36 0 0 1-66.986667-66.773334L835.413333 501.333333 467.84 133.973333a47.36 47.36 0 1 1 66.986667-66.773333l400.64 400.64a47.36 47.36 0 0 1 0 66.986667z" fill="#707070" p-id="2606"></path></svg></div>
|
|
</div>
|
|
<div class="flex flex-row items-center justify-between border-t-[.125rem] border-b-[.125rem] border-gray-300 py-[0.75rem] mx-[1rem]">
|
|
<div class="flex flex-row items-center justify-center">
|
|
<img src="/static/images/product-series-img-1.png" class="size-[3.125rem]">
|
|
<div class="ml-[1rem]">
|
|
绕树灯串
|
|
</div>
|
|
</div>
|
|
<div><svg t="1745333587689" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2605" width="16" height="16"><path d="M534.826667 935.466667a47.36 47.36 0 0 1-66.986667-66.773334L835.413333 501.333333 467.84 133.973333a47.36 47.36 0 1 1 66.986667-66.773333l400.64 400.64a47.36 47.36 0 0 1 0 66.986667z" fill="#707070" p-id="2606"></path></svg></div>
|
|
</div>
|
|
<div class="flex flex-row items-center justify-between border-t-[.125rem] border-b-[.125rem] border-gray-300 py-[0.75rem] mx-[1rem]">
|
|
<div class="flex flex-row items-center justify-center">
|
|
<img src="/static/images/product-series-img-1.png" class="size-[3.125rem]">
|
|
<div class="ml-[1rem]">
|
|
网灯
|
|
</div>
|
|
</div>
|
|
<div><svg t="1745333587689" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2605" width="16" height="16"><path d="M534.826667 935.466667a47.36 47.36 0 0 1-66.986667-66.773334L835.413333 501.333333 467.84 133.973333a47.36 47.36 0 1 1 66.986667-66.773333l400.64 400.64a47.36 47.36 0 0 1 0 66.986667z" fill="#707070" p-id="2606"></path></svg></div>
|
|
</div>
|
|
<div class="flex flex-row items-center justify-between border-t-[.125rem] border-b-[.125rem] border-gray-300 py-[0.75rem] mx-[1rem]">
|
|
<div class="flex flex-row items-center justify-center">
|
|
<img src="/static/images/product-series-img-1.png" class="size-[3.125rem]">
|
|
<div class="ml-[1rem]">
|
|
挂件灯饰
|
|
</div>
|
|
</div>
|
|
<div><svg t="1745333587689" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2605" width="16" height="16"><path d="M534.826667 935.466667a47.36 47.36 0 0 1-66.986667-66.773334L835.413333 501.333333 467.84 133.973333a47.36 47.36 0 1 1 66.986667-66.773333l400.64 400.64a47.36 47.36 0 0 1 0 66.986667z" fill="#707070" p-id="2606"></path></svg></div>
|
|
</div>
|
|
<div class="flex flex-row items-center justify-between border-t-[.125rem] border-b-[.125rem] border-gray-300 py-[0.75rem] mx-[1rem]">
|
|
<div class="flex flex-row items-center justify-center">
|
|
<img src="/static/images/product-series-img-1.png" class="size-[3.125rem]">
|
|
<div class="ml-[1rem]">
|
|
造型灯饰
|
|
</div>
|
|
</div>
|
|
<div><svg t="1745333587689" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2605" width="16" height="16"><path d="M534.826667 935.466667a47.36 47.36 0 0 1-66.986667-66.773334L835.413333 501.333333 467.84 133.973333a47.36 47.36 0 1 1 66.986667-66.773333l400.64 400.64a47.36 47.36 0 0 1 0 66.986667z" fill="#707070" p-id="2606"></path></svg></div>
|
|
</div>
|
|
<div class="flex flex-row items-center justify-between border-t-[.125rem] border-b-[.125rem] border-gray-300 py-[0.75rem] mx-[1rem]">
|
|
<div class="flex flex-row items-center justify-center">
|
|
<img src="/static/images/product-series-img-1.png" class="size-[3.125rem]">
|
|
<div class="ml-[1rem]">
|
|
皮线灯
|
|
</div>
|
|
</div>
|
|
<div><svg t="1745333587689" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2605" width="16" height="16"><path d="M534.826667 935.466667a47.36 47.36 0 0 1-66.986667-66.773334L835.413333 501.333333 467.84 133.973333a47.36 47.36 0 1 1 66.986667-66.773333l400.64 400.64a47.36 47.36 0 0 1 0 66.986667z" fill="#707070" p-id="2606"></path></svg></div>
|
|
</div>
|
|
<div class="flex flex-row items-center justify-between border-t-[.125rem] border-b-[.125rem] border-gray-300 py-[0.75rem] mx-[1rem]">
|
|
<div class="flex flex-row items-center justify-center">
|
|
<img src="/static/images/product-series-img-1.png" class="size-[3.125rem]">
|
|
<div class="ml-[1rem]">
|
|
灯串
|
|
</div>
|
|
</div>
|
|
<div><svg t="1745333587689" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2605" width="16" height="16"><path d="M534.826667 935.466667a47.36 47.36 0 0 1-66.986667-66.773334L835.413333 501.333333 467.84 133.973333a47.36 47.36 0 1 1 66.986667-66.773333l400.64 400.64a47.36 47.36 0 0 1 0 66.986667z" fill="#707070" p-id="2606"></path></svg></div>
|
|
</div>
|
|
<div class="flex flex-row items-center justify-between border-t-[.125rem] border-b-[.125rem] border-gray-300 py-[0.75rem] mx-[1rem]">
|
|
<div class="flex flex-row items-center justify-center">
|
|
<img src="/static/images/product-series-img-1.png" class="size-[3.125rem]">
|
|
<div class="ml-[1rem]">
|
|
灯串
|
|
</div>
|
|
</div>
|
|
<div><svg t="1745333587689" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2605" width="16" height="16"><path d="M534.826667 935.466667a47.36 47.36 0 0 1-66.986667-66.773334L835.413333 501.333333 467.84 133.973333a47.36 47.36 0 1 1 66.986667-66.773333l400.64 400.64a47.36 47.36 0 0 1 0 66.986667z" fill="#707070" p-id="2606"></path></svg></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 产品系列 -->
|
|
<!-- 产品中心 -->
|
|
<div class="w-full px-[7%] py-[4rem] max-[900px]:py-[2rem]">
|
|
<div class="text-1xl flex flex-col items-center" data-aos="fade-down" data-aos-duration="800" data-aos-delay="0">
|
|
PRODUCT
|
|
</div>
|
|
<div class="mt-[.4rem] mb-[3rem] max-[660px]:mb-[2rem] text-[2.15rem] flex flex-col items-center font-bold" data-aos="fade-down" data-aos-duration="800" data-aos-delay="0">
|
|
产品中心
|
|
</div>
|
|
<div class="swiper product-swiper select-none w-[80%] m-auto">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide" data-aos="fade-left" data-aos-duration="800" data-aos-delay="0">
|
|
<a href="#">
|
|
<div class="w-full h-[20rem]">
|
|
<img class="size-full object-cover object-center" src="static/images/product-img-1.jpg" alt="">
|
|
</div>
|
|
<div class="w-full px-[1rem]">
|
|
<div class="mt-[0.5rem] text-[1.5rem]">网灯</div>
|
|
<div class="text-[1rem] text-gray-400">介绍信息</div>
|
|
<div class="mt-[1rem] ml-[1rem] max-[600px]:ml-0 text-[0.85rem] inline-block mx-auto px-[1rem] py-[0.25rem] bg-gray-50 border-[.0625rem]">查看详情</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="swiper-slide" data-aos="fade-left" data-aos-duration="800" data-aos-delay="0">
|
|
<a href="#">
|
|
<div class="w-full h-[20rem]">
|
|
<img class="size-full object-cover object-center" src="static/images/product-img-2.jpg" alt="">
|
|
</div>
|
|
<div class="w-full px-[1rem]">
|
|
<div class="mt-[0.5rem] text-[1.5rem]">造型灯饰</div>
|
|
<div class="text-[1rem] text-gray-400">介绍信息</div>
|
|
<div class="mt-[1rem] ml-[1rem] max-[600px]:ml-0 text-[0.85rem] inline-block mx-auto px-[1rem] py-[0.25rem] bg-gray-50 border-[.0625rem]">查看详情</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="swiper-slide" data-aos="fade-left" data-aos-duration="800" data-aos-delay="0">
|
|
<a href="#">
|
|
<div class="w-full h-[20rem]">
|
|
<img class="size-full object-cover object-center" src="static/images/product-img-3.jpg" alt="">
|
|
</div>
|
|
<div class="w-full px-[1rem]">
|
|
<div class="mt-[0.5rem] text-[1.5rem]">冰条灯串</div>
|
|
<div class="text-[1rem] text-gray-400">介绍信息</div>
|
|
<div class="mt-[1rem] ml-[1rem] max-[600px]:ml-0 text-[0.85rem] inline-block mx-auto px-[1rem] py-[0.25rem] bg-gray-50 border-[.0625rem]">查看详情</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="swiper-slide" data-aos="fade-left" data-aos-duration="800" data-aos-delay="0">
|
|
<a href="#">
|
|
<div class="w-full h-[20rem]">
|
|
<img class="size-full object-cover object-center" src="static/images/product-img-4.jpg" alt="">
|
|
</div>
|
|
<div class="w-full px-[1rem]">
|
|
<div class="mt-[0.5rem] text-[1.5rem]">绕树灯串</div>
|
|
<div class="text-[1rem] text-gray-400">介绍信息</div>
|
|
<div class="mt-[1rem] ml-[1rem] max-[600px]:ml-0 text-[0.85rem] inline-block mx-auto px-[1rem] py-[0.25rem] bg-gray-50 border-[.0625rem]">查看详情</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="swiper-slide" data-aos="fade-left" data-aos-duration="800" data-aos-delay="0">
|
|
<a href="#">
|
|
<div class="w-full h-[20rem]">
|
|
<img class="size-full object-cover object-center" src="static/images/product-img-6.jpg" alt="">
|
|
</div>
|
|
<div class="w-full px-[1rem]">
|
|
<div class="mt-[0.5rem] text-[1.5rem]">皮线灯</div>
|
|
<div class="text-[1rem] text-gray-400">介绍信息</div>
|
|
<div class="mt-[1rem] ml-[1rem] max-[600px]:ml-0 text-[0.85rem] inline-block mx-auto px-[1rem] py-[0.25rem] bg-gray-50 border-[.0625rem]">查看详情</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="swiper-slide" data-aos="fade-left" data-aos-duration="800" data-aos-delay="0">
|
|
<a href="#">
|
|
<div class="w-full h-[20rem]">
|
|
<img class="size-full object-cover object-center" src="static/images/product-img-7.jpg" alt="">
|
|
</div>
|
|
<div class="w-full px-[1rem]">
|
|
<div class="mt-[0.5rem] text-[1.5rem]">发光字</div>
|
|
<div class="text-[1rem] text-gray-400">介绍信息</div>
|
|
<div class="mt-[1rem] ml-[1rem] max-[600px]:ml-0 text-[0.85rem] inline-block mx-auto px-[1rem] py-[0.25rem] bg-gray-50 border-[.0625rem]">查看详情</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="swiper-slide" data-aos="fade-left" data-aos-duration="800" data-aos-delay="0">
|
|
<a href="#">
|
|
<div class="w-full h-[20rem]">
|
|
<img class="size-full object-cover object-center" src="static/images/product-img-5.jpg" alt="">
|
|
</div>
|
|
<div class="w-full px-[1rem]">
|
|
<div class="mt-[0.5rem] text-[1.5rem]">马尾灯</div>
|
|
<div class="text-[1rem] text-gray-400">介绍信息</div>
|
|
<div class="mt-[1rem] ml-[1rem] max-[600px]:ml-0 text-[0.85rem] inline-block mx-auto px-[1rem] py-[0.25rem] bg-gray-50 border-[.0625rem]">查看详情</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-center mt-[4rem]">
|
|
<button class="py-[0.85rem] px-[3rem] border-[.0625rem]">全部产品</button>
|
|
</div>
|
|
</div>
|
|
<!-- 产品中心 -->
|
|
<!-- 关于我们 -->
|
|
<div class="px-[7%] pt-[4rem] pb-[10rem] bg-[url(static/images/about-index-bg.jpg)] bg-cover bg-center bg-no-repeat">
|
|
<div class="w-[80%] m-auto">
|
|
<div class="text-1xl flex flex-col items-center text-gray-300" data-aos="fade-down" data-aos-duration="800" data-aos-delay="0">
|
|
ABOUT US
|
|
</div>
|
|
<div class="mt-[.4rem] mb-[3rem] max-[660px]:mb-[2rem] text-[2.15rem] flex flex-col items-center font-bold text-white" data-aos="fade-down" data-aos-duration="800" data-aos-delay="0">
|
|
关于我们
|
|
</div>
|
|
<div class="flex flex-row max-[1000px]:justify-center w-full">
|
|
<div class="relative bg-black bg-opacity-30 text-[#fff] px-[5%] py-[5%] w-[60vw] max-[1000px]:w-full" data-aos="fade-left" data-aos-duration="800" data-aos-delay="0">
|
|
<p class="font-bold mb-[.125rem]">鸿福如电子电器有限公司</p>
|
|
<p class="">——点亮城市之美,匠心铸就品质</p>
|
|
<p class="">自2019年6月成立以来,鸿福如电子电器有限公司始终专注于户外灯饰产品的研发与生产。我们的产品广泛应用于公园、小区、旅游景点、城市主干道绿化亮化等领域,以卓越的品质和创新的设计赢得了国内外客户的信赖与赞誉。</p>
|
|
<a href="#">
|
|
<div class="absolute size-[6rem] max-[660px]:size-[5rem] max-[660px]:p-[0.3rem] p-[0.5rem] bg-[#3c5aad] bottom-0 right-0 translate-x-[50%] translate-y-[50%] flex flex-row items-end justify-center">
|
|
<div class="text-[0.8rem] max-[660px]:text-[0.7rem]">了解更多</div>
|
|
</div>
|
|
<div class="absolute bottom-0 right-0 w-[2rem] max-[660px]:w-[1.5rem] translate-x-[50%] translate-y-[50%] h-[.0625rem] bg-[#fff]"></div>
|
|
<div class="absolute bottom-0 right-0 h-[2rem] max-[660px]:h-[1.5rem] translate-x-[50%] translate-y-[50%] w-[.0625rem] bg-[#fff]"></div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 关于我们 -->
|
|
<!-- 应用场景 -->
|
|
<div class="p-[7%]">
|
|
<div class="text-1xl text-gray-500 text-center" data-aos="fade-down" data-aos-duration="800" data-aos-delay="0">
|
|
FIELD
|
|
</div>
|
|
<div class="mt-[.4rem] mb-[3rem] max-[660px]:mb-[2rem] text-[2.15rem] text-center font-bold" data-aos="fade-down" data-aos-duration="800" data-aos-delay="0">
|
|
应用场景
|
|
</div>
|
|
<div class="w-[80%] m-auto max-[1400px]:w-full max-[880px]:grid-cols-2 max-[660px]:px-0 max-[660px]:grid-cols-1 grid grid-row grid-cols-4 ">
|
|
<div class="max-[880px]:h-[25rem]"><img class="size-full object-cover object-center" src="static/images/field-img-1.jpeg" alt=""></div>
|
|
<div class="max-[880px]:h-[25rem]"><img class="size-full object-cover object-center" src="static/images/field-img-2.jpeg" alt=""></div>
|
|
<div class="max-[880px]:h-[25rem]"><img class="size-full object-cover object-left" src="static/images/field-img-3.jpg" alt=""></div>
|
|
<div class="max-[880px]:h-[25rem]"><img class="size-full object-cover object-center" src="static/images/field-img-4.jpg" alt=""></div>
|
|
</div>
|
|
<div class="text-center mt-[3rem]">
|
|
<button class="py-[1rem] px-[3rem] border-[.0625rem]">更多应用场景</button>
|
|
</div>
|
|
</div>
|
|
<!-- 应用场景 -->
|
|
<!-- 新闻中心 -->
|
|
<div class="px-[7%] py-[4%] bg-[url(static/images/news-index-bg.jpg)] bg-contain bg-no-repeat max-[800px]:bg-cover max-[800px]:bg-center">
|
|
<div class="w-[80%] m-auto max-[1400px]:w-full">
|
|
<div class="text-1xl text-gray-100 text-center" data-aos="fade-down" data-aos-duration="800" data-aos-delay="0">
|
|
NEWS
|
|
</div>
|
|
<div class="mt-[.4rem] mb-[3rem] max-[660px]:mb-[2rem] text-[2.15rem] text-center text-white font-bold" data-aos="fade-down" data-aos-duration="800" data-aos-delay="0">
|
|
新闻资讯
|
|
</div>
|
|
<div class="bg-white max-[600px]:p-[2rem] p-[3rem] grid grid-cols-2 max-[1200px]:grid-cols-1 gap-[1.25rem]">
|
|
<div class="col-span-1 w-auto group pr-[3rem] max-[1200px]:pr-0">
|
|
<div class="w-full h-[18.75rem] max-[600px]:h-[12.5rem]" data-aos="fade-right" data-aos-duration="800" data-aos-delay="0">
|
|
<img class="size-full object-cover object-center" src="static/images/news-img-1.jpg" alt="">
|
|
</div>
|
|
<div class="flex flex-col items-start gap-[.2rem] mt-[1rem]" data-aos="fade-right" data-aos-duration="800" data-aos-delay="200">
|
|
<div class="line-clamp-1 text-[1.5rem] font-bold">皮线灯串:点亮生活每一刻的创意之光</div>
|
|
<div class="text-[0.85rem] text-grey-500">2025-4-20</div>
|
|
<div class="line-clamp-2">皮线灯串,也常被称为LED灯串或串灯,是一种装饰性的照明产品,因其便携性、柔软性和易于安装的特点而广受欢迎。无论是营造浪漫氛围,还是装点节日庆典,皮线灯串都能为生活增添一抹温馨和乐趣。</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-1 flex flex-col justify-between gap-[2rem]" data-aos="fade-up" data-aos-duration="800" data-aos-delay="100">
|
|
<div class="w-full group flex flex-row max-[600px]:flex-col gap-[1rem]" data-aos="fade-up" data-aos-duration="800" data-aos-delay="0">
|
|
<div class="flex-none w-[30%] max-[1200px]:w-[20%] h-[6.25rem] max-[600px]:h-[12.5rem] max-[600px]:w-full" data-aos="fade-right" data-aos-duration="800" data-aos-delay="0">
|
|
<img class="size-full object-cover object-center" src="static/images/news-img-2.jpg" alt="">
|
|
</div>
|
|
<div class="flex-grow flex flex-col justify-between">
|
|
<div class="text-[1rem] line-clamp-1">冰条灯串,宛如从冬日仙境中直接摘取的一抹梦幻之光</div>
|
|
<div class="text-[0.85rem] ">2025-4-20</div>
|
|
<div class="line-clamp-2 text-[.9rem]">冰条灯串,宛如从冬日仙境中直接摘取的一抹梦幻之光,它们在寒冷的空气中闪烁着晶莹剔透的光芒,仿佛每一条灯串都被赋予了冰雪的灵魂。这些精致的灯串由一系列模仿冰柱形状的透明或半透明材料制成,内置的LED灯珠散发出柔和而迷人的光辉,既有纯白如雪的纯净之感,也有彩色变幻如同极光般的神秘色彩。</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full group flex flex-row max-[600px]:flex-col gap-[1rem]" data-aos="fade-up" data-aos-duration="800" data-aos-delay="0">
|
|
<div class="flex-none w-[30%] max-[1200px]:w-[20%] h-[6.25rem] max-[600px]:h-[12.5rem] max-[600px]:w-full" data-aos="fade-right" data-aos-duration="800" data-aos-delay="0">
|
|
<img class="size-full object-cover object-center" src="static/images/news-img-3.jpg" alt="">
|
|
</div>
|
|
<div class="flex-grow flex flex-col justify-between">
|
|
<div class="text-[1rem] line-clamp-1">冰条灯串,宛如从冬日仙境中直接摘取的一抹梦幻之光</div>
|
|
<div class="text-[0.85rem] ">2025-4-20</div>
|
|
<div class="line-clamp-2 text-[.9rem]">冰条灯串,宛如从冬日仙境中直接摘取的一抹梦幻之光,它们在寒冷的空气中闪烁着晶莹剔透的光芒,仿佛每一条灯串都被赋予了冰雪的灵魂。这些精致的灯串由一系列模仿冰柱形状的透明或半透明材料制成,内置的LED灯珠散发出柔和而迷人的光辉,既有纯白如雪的纯净之感,也有彩色变幻如同极光般的神秘色彩。</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full group flex flex-row max-[600px]:flex-col gap-[1rem]" data-aos="fade-up" data-aos-duration="800" data-aos-delay="0">
|
|
<div class="flex-none w-[30%] max-[1200px]:w-[20%] h-[6.25rem] max-[600px]:h-[12.5rem] max-[600px]:w-full" data-aos="fade-right" data-aos-duration="800" data-aos-delay="0">
|
|
<img class="size-full object-cover object-center" src="static/images/news-img-4.jpg" alt="">
|
|
</div>
|
|
<div class="flex-grow flex flex-col justify-between">
|
|
<div class="text-[1rem] line-clamp-1">冰条灯串,宛如从冬日仙境中直接摘取的一抹梦幻之光</div>
|
|
<div class="text-[0.85rem] ">2025-4-20</div>
|
|
<div class="line-clamp-2 text-[.9rem]">冰条灯串,宛如从冬日仙境中直接摘取的一抹梦幻之光,它们在寒冷的空气中闪烁着晶莹剔透的光芒,仿佛每一条灯串都被赋予了冰雪的灵魂。这些精致的灯串由一系列模仿冰柱形状的透明或半透明材料制成,内置的LED灯珠散发出柔和而迷人的光辉,既有纯白如雪的纯净之感,也有彩色变幻如同极光般的神秘色彩。</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-center mt-[3rem]">
|
|
<button class="py-[0.85rem] px-[3rem] border-[.0625rem]">更多新闻</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 新闻中心 -->
|
|
<!-- 页脚 -->
|
|
<div class="bg-[rgb(33,33,33)]">
|
|
<div class="w-[80%] mx-auto grid grid-cols-3 max-[800px]:grid-cols-1 py-[2.5rem] max-[1300px]:grid-cols-1">
|
|
<div data-aos="fade-right" data-aos-duration="800" data-aos-delay="0" class="col-span-2 max-[1300px]:col-span-1">
|
|
<div class="w-full flex flex-row items-center max-[1000px]:flex-col max-[1000px]:items-start">
|
|
<div class="text-white text-[2rem]">联系电话:</div>
|
|
<div class="text-white text-[1.5rem] font-bold">13915039018(工厂)</div>
|
|
<div class="text-white text-[1.5rem] font-bold">18921079018(门店)</div>
|
|
</div>
|
|
<div class="text-white text-[1rem] flex flex-row flex-wrap items-center mt-[3rem] gap-[1rem]">
|
|
<a href="#">
|
|
<div class=" text-gray-400 ">网站首页</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="text-gray-400">关于我们</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class=" text-gray-400">产品中心</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class=" text-gray-400">应用场景</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="text-gray-400">视频中心</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class=" text-gray-400">新闻中心</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="text-gray-400">联系我们</div>
|
|
</a>
|
|
</div>
|
|
<div class="flex flex-row max-[780px]:flex-wrap items-center justify-start max-[780px]:justify-center text-[#8f8f8f] text-[.875rem] py-[1.75rem]">
|
|
<div class="flex flex-row max-[780px]:flex-wrap max-[780px]:justify-center">
|
|
<div class="">Copyright©</div>
|
|
<div class=""><a class="hover:text-[#3f96d0]" href="#">备案号:</a></div>
|
|
</div>
|
|
<div>网站建设:<a class="hover:text-[#3f96d0]" href="#">凌壹科技</a></div>
|
|
</div>
|
|
</div>
|
|
<div data-aos="fade-left" data-aos-duration="800" data-aos-delay="0" class="flex flex-row items-center gap-[5rem]">
|
|
<div class="">
|
|
<img class="size-[10rem] max-[800px]:size-[8rem] object-contain rounded-br-[1rem]" src="" alt="">
|
|
<div class="text-white text-center">网站二维码</div>
|
|
</div>
|
|
<div class="">
|
|
<img class="size-[10rem] max-[800px]:size-[8rem] object-contain rounded-br-[1rem]" src="" alt="">
|
|
<div class="text-white text-center">抖音二维码</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 页脚 -->
|
|
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js" type="application/javascript"></script>
|
|
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/7.4.1/swiper-bundle.min.js" type="application/javascript"></script>
|
|
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/aos/3.0.0-beta.6/aos.js" type="application/javascript"></script>
|
|
<script src="./static/js/common.js"></script>
|
|
<script src="./static/js/index.js"></script>
|
|
</body>
|
|
</html> |