首页
No files matched your search
@@ -0,0 +1,418 @@
|
|||||||
|
<!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-[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>
|
||||||
|
<div class="w-[4rem] max-[1200px]: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">
|
||||||
|
<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">
|
||||||
|
<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">
|
||||||
|
<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">
|
||||||
|
<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">
|
||||||
|
<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">
|
||||||
|
<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">
|
||||||
|
<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">
|
||||||
|
<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">
|
||||||
|
<!-- {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>
|
||||||
|
</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]">做值得信赖的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%] py-[6rem] 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-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]">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<div class="text-center mt-[8rem]">
|
||||||
|
<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" 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>
|
||||||
|
<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="">——点亮城市之美,匠心铸就品质</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="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-center" 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-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="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] group-hover:text-[#ff2a2a] font-bold">XXXXXXXXXXXXXXXX</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-[1.1rem] group-hover:font-bold">XXXXXXXXXXXXXXXX</div>
|
||||||
|
<div class="text-[0.85rem] ">2021/09/28</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-[1.1rem] group-hover:font-bold">XXXXXXXXXXXXXXXX</div>
|
||||||
|
<div class="text-[0.85rem] ">2021/09/28</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-[1.1rem] group-hover:font-bold">XXXXXXXXXXXXXXXX</div>
|
||||||
|
<div class="text-[0.85rem] ">2021/09/28</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>
|
||||||
@@ -0,0 +1,39 @@
|
|||||||
|
body {
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 0rem;
|
||||||
|
margin: 0rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
overflow-y: auto;
|
||||||
|
scrollbar-width: none;
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
|
||||||
|
font-size: 0.835vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1920px) {
|
||||||
|
html {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
background-color: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
-webkit-box-shadow: inset 0 0 .375rem rgba(255, 255, 255, 0.3);
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: #F5F5F5;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
border-radius: 10px;
|
||||||
|
-webkit-box-shadow: inset 0 0 .375rem rgba(255, 255, 255, 0.3);
|
||||||
|
background-color: #b3b3b3;
|
||||||
|
}
|
||||||
@@ -0,0 +1,99 @@
|
|||||||
|
.navbar-lang-icon > path {
|
||||||
|
stroke: white;
|
||||||
|
stroke-width: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
transition: all .3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar:hover .navbar-brand > div {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar:hover .navbar-item {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar:hover .navbar-lang-icon > path {
|
||||||
|
stroke: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.navbar-light {
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-light .navbar-brand > div {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-light .navbar-brand > .brand-dark {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-light .navbar-brand > .brand-light {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-light .navbar-item {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-light .navbar-lang-icon > path {
|
||||||
|
stroke: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-item > .banner-inner {
|
||||||
|
transition: all .3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-item:hover > .banner-inner {
|
||||||
|
display: flex;
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.navbar-mobile-light .navbar-brand > div {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-mobile-light .navbar-brand > .brand-dark {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-mobile-light .navbar-brand > .brand-light {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-mobile-light .navbar-item {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-mobile-light .navbar-lang-icon > path {
|
||||||
|
stroke: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-item > .banner-inner {
|
||||||
|
transition: all .3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-item:hover > .banner-inner {
|
||||||
|
display: flex;
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 996px) {
|
||||||
|
.navbar-items {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-toggler {
|
||||||
|
display: flex !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 1.1 MiB |
|
After Width: | Height: | Size: 1.5 MiB |
|
After Width: | Height: | Size: 522 KiB |
|
After Width: | Height: | Size: 681 KiB |
|
After Width: | Height: | Size: 2.2 MiB |
|
After Width: | Height: | Size: 15 MiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 19 MiB |
|
After Width: | Height: | Size: 5.3 MiB |
|
After Width: | Height: | Size: 4.4 MiB |
|
After Width: | Height: | Size: 2.5 MiB |
|
After Width: | Height: | Size: 336 KiB |
|
After Width: | Height: | Size: 2.6 MiB |
@@ -0,0 +1,3 @@
|
|||||||
|
AOS.init({
|
||||||
|
once: true
|
||||||
|
})
|
||||||
@@ -0,0 +1,167 @@
|
|||||||
|
var product_swiper = new Swiper(".product-swiper", {
|
||||||
|
loop: true,
|
||||||
|
slidesPerView: 4,
|
||||||
|
spaceBetween: 20,
|
||||||
|
centeredSlides: true,
|
||||||
|
grabCursor: true,
|
||||||
|
speed: 800,
|
||||||
|
autoplay: {
|
||||||
|
delay: 3000, // 自动切换的时间间隔(单位:毫秒)
|
||||||
|
disableOnInteraction: false, // 用户操作后是否停止自动播放(false 表示不停止)
|
||||||
|
},
|
||||||
|
breakpoints: {
|
||||||
|
0: {
|
||||||
|
slidesPerView: 1,
|
||||||
|
centeredSlides: true,
|
||||||
|
},
|
||||||
|
700: {
|
||||||
|
slidesPerView: 2,
|
||||||
|
centeredSlides: true,
|
||||||
|
},
|
||||||
|
1050: {
|
||||||
|
slidesPerView: 3,
|
||||||
|
centeredSlides: false,
|
||||||
|
},
|
||||||
|
1450: {
|
||||||
|
slidesPerView: 4,
|
||||||
|
centeredSlides: false,
|
||||||
|
},
|
||||||
|
1920: {
|
||||||
|
slidesPerView: 4,
|
||||||
|
centeredSlides: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
$(document).ready(() => {
|
||||||
|
$(".product-prev-button").click(() => {
|
||||||
|
console.log("1")
|
||||||
|
product_swiper.slidePrev()
|
||||||
|
})
|
||||||
|
$(".product-next-button").click(() => {
|
||||||
|
product_swiper.slideNext()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
const carousel_swiper = new Swiper(".carousel-swiper", {
|
||||||
|
loop: true,
|
||||||
|
effect: "fade",
|
||||||
|
autoplay: {
|
||||||
|
delay: 4000,
|
||||||
|
disableOnInteraction: false,
|
||||||
|
},
|
||||||
|
snpeed: 300,
|
||||||
|
on: {
|
||||||
|
slideChangeTransitionStart: function () {
|
||||||
|
$('.carousel-aos').hide(0);
|
||||||
|
$('.carousel-aos').removeClass('aos-init').removeClass('aos-animate');
|
||||||
|
},
|
||||||
|
slideChangeTransitionEnd: function () {
|
||||||
|
$('.carousel-aos').show(0);
|
||||||
|
$('.carousel-aos').addClass('aos-init').addClass('aos-animate');
|
||||||
|
},
|
||||||
|
slideChange: function () {
|
||||||
|
$(".carousel-pagination-item").each((index, elem) => {
|
||||||
|
if (index == this.realIndex) {
|
||||||
|
$(elem).addClass("carousel-pagination-item-active")
|
||||||
|
} else {
|
||||||
|
$(elem).removeClass("carousel-pagination-item-active")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
$(document).ready(() => {
|
||||||
|
$(".carousel-pagination-item").each((index, elem) => {
|
||||||
|
$(elem).click(() => {
|
||||||
|
carousel_swiper.slideToLoop(index, 800, false)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
$('#contactus-submit-button').click(() => {
|
||||||
|
let comment_title = $('#contactus-first').val() + $('#contactus-last').val()
|
||||||
|
let comment_contact = $('#contactus-phone').val() + '|' + $('#contactus-address').val()
|
||||||
|
let comment_content = $('#contactus-content').val()
|
||||||
|
if ($('#contactus-first').val().length < 1) {
|
||||||
|
alert('请输入姓')
|
||||||
|
} else if ($('#contactus-last').val().length < 1) {
|
||||||
|
alert('请输入名')
|
||||||
|
} else if ($('#contactus-phone').val().length < 1) {
|
||||||
|
alert('请输入电话')
|
||||||
|
} else if ($('#contactus-address').val().length < 1) {
|
||||||
|
alert('请输入地址')
|
||||||
|
} else if ($('#contactus-content').val().length < 1) {
|
||||||
|
alert('请输入您的需求内容')
|
||||||
|
} else {
|
||||||
|
$.ajax({
|
||||||
|
"url": base_url + "/site/comment/add?auth_id=" + "1" + "&auth_key=" + "97a73b7e-9fde-474f-ba2b-ae4703d1e7bb",
|
||||||
|
"method": "POST",
|
||||||
|
"timeout": 0,
|
||||||
|
"headers": {
|
||||||
|
"Content-Type": "application/json"
|
||||||
|
},
|
||||||
|
"data": JSON.stringify({
|
||||||
|
comment_title: comment_title,
|
||||||
|
comment_contact: comment_contact,
|
||||||
|
comment_content: comment_content
|
||||||
|
}),
|
||||||
|
}).done(function (response) {
|
||||||
|
alert(response.errorMessage)
|
||||||
|
}).catch(() => {
|
||||||
|
alert('网络错误')
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
$(document).ready(() => {
|
||||||
|
$('.navbar-offcanvas-body').hide()
|
||||||
|
$('.navbar-toggler-icon').click(() => {
|
||||||
|
$('.navbar-offcanvas').show()
|
||||||
|
$('.navbar-offcanvas-mask').show()
|
||||||
|
$('.navbar-offcanvas').animate({ width: '300px' }, () => {
|
||||||
|
$('.navbar-offcanvas-body').show()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
$('.navbar-offcanvas-close-icon').click(() => {
|
||||||
|
$('.navbar-offcanvas-body').hide()
|
||||||
|
$('.navbar-offcanvas').animate({ width: '0px' }, () => {
|
||||||
|
$('.navbar-offcanvas-mask').hide()
|
||||||
|
$('.navbar-offcanvas').hide()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
$('.navbar-offcanvas-mask').click(() => {
|
||||||
|
$('.navbar-offcanvas-body').hide()
|
||||||
|
$('.navbar-offcanvas').animate({ width: '0px' }, () => {
|
||||||
|
$('.navbar-offcanvas-mask').hide()
|
||||||
|
$('.navbar-offcanvas').hide()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
$('.navbar-offcanvas-inner-button').each((index, item) => {
|
||||||
|
$(item).click(() => {
|
||||||
|
if ($(item).parent().children('.navbar-offcanvas-inner').css('display') == 'block') {
|
||||||
|
$(item).children('.navbar-offcanvas-inner-icon').animate({ 'rotate': '0deg' })
|
||||||
|
$(item).parent().children('.navbar-offcanvas-inner').hide()
|
||||||
|
} else {
|
||||||
|
$(item).children('.navbar-offcanvas-inner-icon').animate({ 'rotate': '-90deg' })
|
||||||
|
$(item).parent().children('.navbar-offcanvas-inner').show()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
$(document).ready(function () {
|
||||||
|
$(window).on('scroll', function () {
|
||||||
|
// 检查页面滚动的距离
|
||||||
|
if ($(window).scrollTop() > 100) { // 当滚动距离超过 50px 时
|
||||||
|
$('.navbar').addClass('bg-white').removeClass('bg-transparent');
|
||||||
|
$('.navbar a').removeClass('text-white');
|
||||||
|
$('.navbar input').removeClass('border-white').removeClass('text-white').removeClass('placeholder-white');
|
||||||
|
} else {
|
||||||
|
$('.navbar').addClass('bg-transparent').removeClass('bg-white');
|
||||||
|
$('.navbar a').addClass('text-white');
|
||||||
|
$('.navbar input').addClass('border-white').addClass('text-white').addClass('placeholder-white');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
export default {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
//
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
<!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>
|
||||||
|
<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>
|
||||||