feat:about,contact,news的全部内容以及product的部分内容

This commit is contained in:
luoxiaolu committed 2025-05-11 21:20:30 +08:00
1 parent 2b9da624fa
commit c383c42ed6
30 files changed
+747 -121

No files matched your search

+184 -111
View File
@@ -14,43 +14,36 @@
</head>
<body>
<!-- 导航栏 -->
<div class="navbar navbar-light navbar-mobile-light flex flex-row justify-center items-center fixed w-full h-[6rem] max-[1024px]:h-[4rem] xl:px-6 lg:px-4 px-8 z-[500]">
<div class="flex flex-row items-center size-full">
<div class="h-full">
<img class="size-full object-contain rounded-br-[1rem]" src="/static/images/logo.png" alt="">
<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-[1200px]:hidden"></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]">
<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-[6rem] px-[2rem] max-[1400px]:px-[1rem] hover:bg-black hover:bg-opacity-20">
<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-[6rem] px-[2rem] max-[1400px]:px-[1rem] hover:bg-black hover:bg-opacity-20">
<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-[6rem] px-[2rem] max-[1400px]:px-[1rem] hover:bg-black hover:bg-opacity-20">
<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-[6rem] px-[2rem] max-[1400px]:px-[1rem] hover:bg-black hover:bg-opacity-20">
<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-[6rem] px-[2rem] max-[1400px]:px-[1rem] hover:bg-black hover:bg-opacity-20">
<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-[6rem] px-[2rem] max-[1400px]:px-[1rem] hover:bg-black hover:bg-opacity-20">
<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-[6rem] px-[2rem] max-[1400px]:px-[1rem] hover:bg-black hover:bg-opacity-20">
<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 class="flex items-center justify-center ml-[1rem] max-[1024px]:hidden">
<input
type="text"
placeholder="请输入搜索内容"
class="flex-grow pl-[2rem] h-[2rem] max-[1600px]:w-[10rem] bg-transparent border-l-[.0625rem] border-white text-white placeholder-white focus:outline-none"
/>
</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">
@@ -127,49 +120,112 @@
<div class="w-full relative select-none">
<div class="swiper carousel-swiper w-full h-[100vh]">
<div class="swiper-wrapper">
<!-- {foreach $data['carousels'] as $carousel}
{if $carousel['carousel_position'] == '轮播图'} -->
<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 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 scale-150" src="/static/images/banner1.JPG" alt=""></div>
<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]">做值得信赖的LED灯带制造商</div>
<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 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>
<!-- {/if}
{/foreach} -->
</div>
</div>
<div class="absolute left-0 bottom-0 flex items-end z-40 w-full">
<div class="flex flex-row justify-center items-center w-full py-5 transition">
<!-- {foreach $data['carousels'] as $carousel}
{if $carousel['carousel_position'] == '轮播图'} -->
<div class="carousel-pagination-item cursor-pointer size-[1rem] rounded-[50%] bg-[#888] bg-opacity-70 mr-4 last:mr-0 duration-300 carousel-active"></div>
<!-- {/if}
{/foreach} -->
</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-[6rem] max-[900px]:py-[2rem]">
<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>
@@ -178,30 +234,6 @@
</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-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]">
@@ -217,19 +249,7 @@
<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-1.jpg" alt="">
<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>
@@ -238,9 +258,69 @@
</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-[8rem]">
<div class="text-center mt-[4rem]">
<button class="py-[0.85rem] px-[3rem] border-[.0625rem]">全部产品</button>
</div>
</div>
@@ -248,26 +328,19 @@
<!-- 关于我们 -->
<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" data-aos="fade-down" data-aos-duration="800" data-aos-delay="0">
<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" data-aos="fade-down" data-aos-duration="800" data-aos-delay="0">
<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="">鸿福如电子电器有限公司</p>
<p class="font-bold mb-[.125rem]">鸿福如电子电器有限公司</p>
<p class="">——点亮城市之美,匠心铸就品质</p>
<p class="">自2019年6月成立以来,鸿福如电子电器有限公司始终专注于户外灯饰产品的研发与生产。我们的产品广泛应用于公园、小区、旅游景点、城市主干道绿化亮化等领域,以卓越的品质和创新的设计赢得了国内外客户的信赖与赞誉。</p>
<p class="">以客户需求为导向,以技术创新为驱动</p>
<p class="">我们深知,每一盏灯不仅是照明的工具,更是城市景观的点睛之笔。因此,我们始终坚持以客户需求为核心,不断革新技术与工艺,用心打造每一款产品。从方案设计到效果图纸呈现,再到产品安装与售后服务,我们为客户提供一站式解决方案,确保每一个项目都能完美落地。</p>
<p class="">品质为本,服务至上</p>
<p class="">多年来,鸿福如秉承“诚信经营,用心服务”的理念,在激烈的市场竞争中始终坚守品质第一的原则。我们与客户携手共进,追求合作共赢,以专业的技术水平和卓越的服务能力,赢得了广泛的市场认可。</p>
<p class="">立足常州,服务全球</p>
<p class="">公司总部位于江苏省常州市武进区西湖街道长秀路8号坤鼎创新产业园5栋-1,门市地址为常州市邹区灯具城西大门外7栋11号鸿福如灯饰。我们以常州为起点,将高品质的灯饰产品和服务带向全国乃至全球,为城市亮化工程贡献我们的力量。</p>
<p class="">鸿福如电子电器有限公司,愿与您携手,点亮每一座城市的夜晚,共创美好未来!</p>
<a href="#">
<div class="absolute size-[6rem] max-[660px]:size-[5rem] max-[660px]:p-[0.3rem] p-[0.5rem] bg-[#abe46b] bottom-0 right-0 translate-x-[50%] translate-y-[50%] flex flex-row items-end justify-center">
<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>
@@ -278,32 +351,32 @@
</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
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-center" src="static/images/field-img-3.jpg" 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>
<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-500 text-center" data-aos="fade-down" data-aos-duration="800" data-aos-delay="0">
Field
<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 font-bold" data-aos="fade-down" data-aos-duration="800" data-aos-delay="0">
<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]">
@@ -312,9 +385,9 @@
<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] group-hover:text-[#ff2a2a] font-bold">XXXXXXXXXXXXXXXX</div>
<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 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">
@@ -323,8 +396,8 @@
<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-[1.1rem] group-hover:font-bold">XXXXXXXXXXXXXXXX</div>
<div class="text-[0.85rem] ">2021/09/28</div>
<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>
@@ -333,8 +406,8 @@
<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-[1.1rem] group-hover:font-bold">XXXXXXXXXXXXXXXX</div>
<div class="text-[0.85rem] ">2021/09/28</div>
<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>
@@ -343,8 +416,8 @@
<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-[1.1rem] group-hover:font-bold">XXXXXXXXXXXXXXXX</div>
<div class="text-[0.85rem] ">2021/09/28</div>
<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>