feat:about,contact,news的全部内容以及product的部分内容
No files matched your search
@@ -0,0 +1,162 @@
|
||||
<!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>
|
||||
<!-- banner -->
|
||||
<div class="relative">
|
||||
<div class="size-full"><img class="size-full object-cover object-center" src="static/images/about-index-bg.jpg" alt=""></div>
|
||||
<div class="absolute top-0 left-0 size-full flex flex-row justify-center items-center px-[15%]">
|
||||
<div class="flex flex-row text-white mt-[.625rem] w-full">
|
||||
<img class="w-[1.25rem] h-[1.25rem] object-cover object-center" src="static/images/location-icon.png" alt=""><div class="ml-[.625rem] font-bold">首页</div>
|
||||
<a> >> </a>
|
||||
<a href="" class="hover:text-[#ff2a2a]">关于我们</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- banner -->
|
||||
<!-- 关于我们 -->
|
||||
<div class="pt-[4rem]">
|
||||
<div class="grid grid-cols-2 gap-[1rem] max-[1344px]:grid-cols-1 min-[1344px]:w-[84rem] min-[1344px]:m-auto max-[1344px]:px-[15%] max-[800px]:px-[10%] py-[4rem]">
|
||||
<div class="col-span-1">
|
||||
<div class="text-[2rem] mb-[1rem]">关于我们</div>
|
||||
<div>
|
||||
<p class="font-bold mb-[.125rem]">鸿福如电子电器有限公司</p>
|
||||
<p class="leading-[2rem]">——点亮城市之美,匠心铸就品质</p>
|
||||
<p class="leading-[2rem]">自2019年6月成立以来,鸿福如电子电器有限公司始终专注于户外灯饰产品的研发与生产。我们的产品广泛应用于公园、小区、旅游景点、城市主干道绿化亮化等领域,以卓越的品质和创新的设计赢得了国内外客户的信赖与赞誉。</p>
|
||||
<p class="leading-[2rem]">以客户需求为导向,以技术创新为驱动</p>
|
||||
<p class="leading-[2rem]">我们深知,每一盏灯不仅是照明的工具,更是城市景观的点睛之笔。因此,我们始终坚持以客户需求为核心,不断革新技术与工艺,用心打造每一款产品。从方案设计到效果图纸呈现,再到产品安装与售后服务,我们为客户提供一站式解决方案,确保每一个项目都能完美落地。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-1">
|
||||
<img class="size-full object-cover object-center" src="static/images/about-img-1.jpg"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-200">
|
||||
<div class="grid grid-cols-4 max-[600px]:grid-cols-2 gap-[1rem] min-[1344px]:w-[84rem] min-[1344px]:m-auto max-[1344px]:px-[10%]">
|
||||
<div class="py-[3rem] max-[600px]:py-[1rem] flex flex-col items-center justify-center gap-[2rem] max-[600px]:gap-[1rem]">
|
||||
<div class="text-[2rem] text-orange-600">20+</div>
|
||||
<div>多年外贸经验</div>
|
||||
</div>
|
||||
<div class="py-[3rem] max-[600px]:py-[1rem] flex flex-col items-center justify-center gap-[2rem] max-[600px]:gap-[1rem]">
|
||||
<div class="text-[2rem] text-orange-600">20+</div>
|
||||
<div>多年外贸经验</div>
|
||||
</div>
|
||||
<div class="py-[3rem] max-[600px]:py-[1rem] flex flex-col items-center justify-center gap-[2rem] max-[600px]:gap-[1rem]">
|
||||
<div class="text-[2rem] text-orange-600">20+</div>
|
||||
<div>多年外贸经验</div>
|
||||
</div>
|
||||
<div class="py-[3rem] max-[600px]:py-[1rem] flex flex-col items-center justify-center gap-[2rem] max-[600px]:gap-[1rem]">
|
||||
<div class="text-[2rem] text-orange-600">20+</div>
|
||||
<div>多年外贸经验</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full h-[30rem] bg-[url(static/images/about-img-2.jpg)] bg-cover bg-center bg-no-repeat flex flex-col justify-between">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<p class="text-white text-[2rem] mt-[4rem]">我们的优势</p>
|
||||
<div class="w-[3rem] h-[0.25rem] bg-orange-500"></div>
|
||||
</div>
|
||||
<div class="px-[15%]">
|
||||
<div class="overflow-hidden translate-y-[70%] px-[1rem]">
|
||||
<div class="swiper about-advantage-swiper w-full h-[14rem] overflow-visible">
|
||||
<div class="swiper-wrapper h-[10rem] py-[1rem]">
|
||||
<div class="swiper-slide about-advantage-swiper-slide bg-white flex flex-col items-center justify-center gap-[1.5rem]">
|
||||
<div class="size-[2.5rem]">
|
||||
<svg t="1746939406055" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3479"><path d="M975.7 188.4H868.9v-68c0-26.7-21.7-48.3-48.3-48.3H203.4c-26.7 0-48.3 21.7-48.3 48.3v68H48.3C21.7 188.4 0 210.1 0 236.8V328c0 48.4 17.9 94.6 50.5 130.2 33.4 36.5 78.3 57.3 126.4 58.8 1.9 0.1 3.7 0.1 5.6 0.1 5.2 0 10.5-0.2 15.7-0.7 14.7 27.7 32.9 53.6 54.4 77.1 47.7 52.1 107.8 88 173.8 104.6V893c0 1.3 0.1 2.6 0.3 3.9h-89.1c-15.2 0-27.5 12.3-27.5 27.5s12.3 27.5 27.5 27.5h348.9c15.2 0 27.5-12.3 27.5-27.5s-12.3-27.5-27.5-27.5h-89.1c0.2-1.3 0.3-2.5 0.3-3.9V698.4c14.1-3.5 28.1-7.8 41.8-13.1 44.4-17 84.4-42.3 118.9-75.2 28.7-27.3 52.2-58.7 70.3-93.5 2.4 0.2 4.8 0.3 7.3 0.4 1.9 0.1 3.8 0.1 5.7 0.1 47.7 0 92.6-18.2 127-51.5 35.8-34.7 55.4-81.2 55.4-131.1v-97.7c-0.1-26.7-21.8-48.4-48.4-48.4zM54.9 328v-84.7H155v99c0 41.1 6.7 81.5 19.6 119.6-66.3-4.1-119.7-63.3-119.7-133.9zM543 897h-62c0.2-1.3 0.3-2.5 0.3-3.9V707.4c4.5 0.4 9 0.7 13.5 0.9 5.8 0.3 11.6 0.4 17.4 0.4 10.2 0 20.4-0.4 30.5-1.3V893c0 1.4 0.1 2.7 0.3 4z m177.4-326.6c-29.2 27.9-63.1 49.3-100.6 63.6-16.9 6.5-34.2 11.3-51.8 14.6-1.8 0.1-3.5 0.4-5.2 0.9-21.4 3.6-43.3 5-65.5 3.9-12.5-0.6-24.8-2-37-4.1-0.9-0.2-1.9-0.4-2.9-0.5-62.5-11.7-119.8-43.6-164.4-92.3-53.5-58.5-83-134.6-83-214.2V127h604v224.6c0 42.1-8.5 82.8-25.2 121-16.1 37-39.1 69.8-68.4 97.8z m248.7-235.9c0 34.8-13.8 67.4-38.8 91.7-21.6 20.9-49.1 33.3-78.6 35.6 11.5-35.4 17.3-72.3 17.3-110.2V243.4h100.1v91.1z" fill="" p-id="3480"></path></svg>
|
||||
</div>
|
||||
<p>专攻产品</p>
|
||||
</div>
|
||||
<div class="swiper-slide about-advantage-swiper-slide bg-white flex flex-col items-center justify-center gap-[1.5rem]">
|
||||
<div class="size-[2.5rem]">
|
||||
<svg t="1746939406055" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3479"><path d="M975.7 188.4H868.9v-68c0-26.7-21.7-48.3-48.3-48.3H203.4c-26.7 0-48.3 21.7-48.3 48.3v68H48.3C21.7 188.4 0 210.1 0 236.8V328c0 48.4 17.9 94.6 50.5 130.2 33.4 36.5 78.3 57.3 126.4 58.8 1.9 0.1 3.7 0.1 5.6 0.1 5.2 0 10.5-0.2 15.7-0.7 14.7 27.7 32.9 53.6 54.4 77.1 47.7 52.1 107.8 88 173.8 104.6V893c0 1.3 0.1 2.6 0.3 3.9h-89.1c-15.2 0-27.5 12.3-27.5 27.5s12.3 27.5 27.5 27.5h348.9c15.2 0 27.5-12.3 27.5-27.5s-12.3-27.5-27.5-27.5h-89.1c0.2-1.3 0.3-2.5 0.3-3.9V698.4c14.1-3.5 28.1-7.8 41.8-13.1 44.4-17 84.4-42.3 118.9-75.2 28.7-27.3 52.2-58.7 70.3-93.5 2.4 0.2 4.8 0.3 7.3 0.4 1.9 0.1 3.8 0.1 5.7 0.1 47.7 0 92.6-18.2 127-51.5 35.8-34.7 55.4-81.2 55.4-131.1v-97.7c-0.1-26.7-21.8-48.4-48.4-48.4zM54.9 328v-84.7H155v99c0 41.1 6.7 81.5 19.6 119.6-66.3-4.1-119.7-63.3-119.7-133.9zM543 897h-62c0.2-1.3 0.3-2.5 0.3-3.9V707.4c4.5 0.4 9 0.7 13.5 0.9 5.8 0.3 11.6 0.4 17.4 0.4 10.2 0 20.4-0.4 30.5-1.3V893c0 1.4 0.1 2.7 0.3 4z m177.4-326.6c-29.2 27.9-63.1 49.3-100.6 63.6-16.9 6.5-34.2 11.3-51.8 14.6-1.8 0.1-3.5 0.4-5.2 0.9-21.4 3.6-43.3 5-65.5 3.9-12.5-0.6-24.8-2-37-4.1-0.9-0.2-1.9-0.4-2.9-0.5-62.5-11.7-119.8-43.6-164.4-92.3-53.5-58.5-83-134.6-83-214.2V127h604v224.6c0 42.1-8.5 82.8-25.2 121-16.1 37-39.1 69.8-68.4 97.8z m248.7-235.9c0 34.8-13.8 67.4-38.8 91.7-21.6 20.9-49.1 33.3-78.6 35.6 11.5-35.4 17.3-72.3 17.3-110.2V243.4h100.1v91.1z" fill="" p-id="3480"></path></svg>
|
||||
</div>
|
||||
<p>专攻产品</p>
|
||||
</div>
|
||||
<div class="swiper-slide about-advantage-swiper-slide bg-white flex flex-col items-center justify-center gap-[1.5rem]">
|
||||
<div class="size-[2.5rem]">
|
||||
<svg t="1746939406055" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3479"><path d="M975.7 188.4H868.9v-68c0-26.7-21.7-48.3-48.3-48.3H203.4c-26.7 0-48.3 21.7-48.3 48.3v68H48.3C21.7 188.4 0 210.1 0 236.8V328c0 48.4 17.9 94.6 50.5 130.2 33.4 36.5 78.3 57.3 126.4 58.8 1.9 0.1 3.7 0.1 5.6 0.1 5.2 0 10.5-0.2 15.7-0.7 14.7 27.7 32.9 53.6 54.4 77.1 47.7 52.1 107.8 88 173.8 104.6V893c0 1.3 0.1 2.6 0.3 3.9h-89.1c-15.2 0-27.5 12.3-27.5 27.5s12.3 27.5 27.5 27.5h348.9c15.2 0 27.5-12.3 27.5-27.5s-12.3-27.5-27.5-27.5h-89.1c0.2-1.3 0.3-2.5 0.3-3.9V698.4c14.1-3.5 28.1-7.8 41.8-13.1 44.4-17 84.4-42.3 118.9-75.2 28.7-27.3 52.2-58.7 70.3-93.5 2.4 0.2 4.8 0.3 7.3 0.4 1.9 0.1 3.8 0.1 5.7 0.1 47.7 0 92.6-18.2 127-51.5 35.8-34.7 55.4-81.2 55.4-131.1v-97.7c-0.1-26.7-21.8-48.4-48.4-48.4zM54.9 328v-84.7H155v99c0 41.1 6.7 81.5 19.6 119.6-66.3-4.1-119.7-63.3-119.7-133.9zM543 897h-62c0.2-1.3 0.3-2.5 0.3-3.9V707.4c4.5 0.4 9 0.7 13.5 0.9 5.8 0.3 11.6 0.4 17.4 0.4 10.2 0 20.4-0.4 30.5-1.3V893c0 1.4 0.1 2.7 0.3 4z m177.4-326.6c-29.2 27.9-63.1 49.3-100.6 63.6-16.9 6.5-34.2 11.3-51.8 14.6-1.8 0.1-3.5 0.4-5.2 0.9-21.4 3.6-43.3 5-65.5 3.9-12.5-0.6-24.8-2-37-4.1-0.9-0.2-1.9-0.4-2.9-0.5-62.5-11.7-119.8-43.6-164.4-92.3-53.5-58.5-83-134.6-83-214.2V127h604v224.6c0 42.1-8.5 82.8-25.2 121-16.1 37-39.1 69.8-68.4 97.8z m248.7-235.9c0 34.8-13.8 67.4-38.8 91.7-21.6 20.9-49.1 33.3-78.6 35.6 11.5-35.4 17.3-72.3 17.3-110.2V243.4h100.1v91.1z" fill="" p-id="3480"></path></svg>
|
||||
</div>
|
||||
<p>专攻产品</p>
|
||||
</div>
|
||||
<div class="swiper-slide about-advantage-swiper-slide bg-white flex flex-col items-center justify-center gap-[1.5rem]">
|
||||
<div class="size-[2.5rem]">
|
||||
<svg t="1746939406055" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3479"><path d="M975.7 188.4H868.9v-68c0-26.7-21.7-48.3-48.3-48.3H203.4c-26.7 0-48.3 21.7-48.3 48.3v68H48.3C21.7 188.4 0 210.1 0 236.8V328c0 48.4 17.9 94.6 50.5 130.2 33.4 36.5 78.3 57.3 126.4 58.8 1.9 0.1 3.7 0.1 5.6 0.1 5.2 0 10.5-0.2 15.7-0.7 14.7 27.7 32.9 53.6 54.4 77.1 47.7 52.1 107.8 88 173.8 104.6V893c0 1.3 0.1 2.6 0.3 3.9h-89.1c-15.2 0-27.5 12.3-27.5 27.5s12.3 27.5 27.5 27.5h348.9c15.2 0 27.5-12.3 27.5-27.5s-12.3-27.5-27.5-27.5h-89.1c0.2-1.3 0.3-2.5 0.3-3.9V698.4c14.1-3.5 28.1-7.8 41.8-13.1 44.4-17 84.4-42.3 118.9-75.2 28.7-27.3 52.2-58.7 70.3-93.5 2.4 0.2 4.8 0.3 7.3 0.4 1.9 0.1 3.8 0.1 5.7 0.1 47.7 0 92.6-18.2 127-51.5 35.8-34.7 55.4-81.2 55.4-131.1v-97.7c-0.1-26.7-21.8-48.4-48.4-48.4zM54.9 328v-84.7H155v99c0 41.1 6.7 81.5 19.6 119.6-66.3-4.1-119.7-63.3-119.7-133.9zM543 897h-62c0.2-1.3 0.3-2.5 0.3-3.9V707.4c4.5 0.4 9 0.7 13.5 0.9 5.8 0.3 11.6 0.4 17.4 0.4 10.2 0 20.4-0.4 30.5-1.3V893c0 1.4 0.1 2.7 0.3 4z m177.4-326.6c-29.2 27.9-63.1 49.3-100.6 63.6-16.9 6.5-34.2 11.3-51.8 14.6-1.8 0.1-3.5 0.4-5.2 0.9-21.4 3.6-43.3 5-65.5 3.9-12.5-0.6-24.8-2-37-4.1-0.9-0.2-1.9-0.4-2.9-0.5-62.5-11.7-119.8-43.6-164.4-92.3-53.5-58.5-83-134.6-83-214.2V127h604v224.6c0 42.1-8.5 82.8-25.2 121-16.1 37-39.1 69.8-68.4 97.8z m248.7-235.9c0 34.8-13.8 67.4-38.8 91.7-21.6 20.9-49.1 33.3-78.6 35.6 11.5-35.4 17.3-72.3 17.3-110.2V243.4h100.1v91.1z" fill="" p-id="3480"></path></svg>
|
||||
</div>
|
||||
<p>专攻产品</p>
|
||||
</div>
|
||||
<div class="swiper-slide about-advantage-swiper-slide bg-white flex flex-col items-center justify-center gap-[1.5rem]">
|
||||
<div class="size-[2.5rem]">
|
||||
<svg t="1746939406055" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3479"><path d="M975.7 188.4H868.9v-68c0-26.7-21.7-48.3-48.3-48.3H203.4c-26.7 0-48.3 21.7-48.3 48.3v68H48.3C21.7 188.4 0 210.1 0 236.8V328c0 48.4 17.9 94.6 50.5 130.2 33.4 36.5 78.3 57.3 126.4 58.8 1.9 0.1 3.7 0.1 5.6 0.1 5.2 0 10.5-0.2 15.7-0.7 14.7 27.7 32.9 53.6 54.4 77.1 47.7 52.1 107.8 88 173.8 104.6V893c0 1.3 0.1 2.6 0.3 3.9h-89.1c-15.2 0-27.5 12.3-27.5 27.5s12.3 27.5 27.5 27.5h348.9c15.2 0 27.5-12.3 27.5-27.5s-12.3-27.5-27.5-27.5h-89.1c0.2-1.3 0.3-2.5 0.3-3.9V698.4c14.1-3.5 28.1-7.8 41.8-13.1 44.4-17 84.4-42.3 118.9-75.2 28.7-27.3 52.2-58.7 70.3-93.5 2.4 0.2 4.8 0.3 7.3 0.4 1.9 0.1 3.8 0.1 5.7 0.1 47.7 0 92.6-18.2 127-51.5 35.8-34.7 55.4-81.2 55.4-131.1v-97.7c-0.1-26.7-21.8-48.4-48.4-48.4zM54.9 328v-84.7H155v99c0 41.1 6.7 81.5 19.6 119.6-66.3-4.1-119.7-63.3-119.7-133.9zM543 897h-62c0.2-1.3 0.3-2.5 0.3-3.9V707.4c4.5 0.4 9 0.7 13.5 0.9 5.8 0.3 11.6 0.4 17.4 0.4 10.2 0 20.4-0.4 30.5-1.3V893c0 1.4 0.1 2.7 0.3 4z m177.4-326.6c-29.2 27.9-63.1 49.3-100.6 63.6-16.9 6.5-34.2 11.3-51.8 14.6-1.8 0.1-3.5 0.4-5.2 0.9-21.4 3.6-43.3 5-65.5 3.9-12.5-0.6-24.8-2-37-4.1-0.9-0.2-1.9-0.4-2.9-0.5-62.5-11.7-119.8-43.6-164.4-92.3-53.5-58.5-83-134.6-83-214.2V127h604v224.6c0 42.1-8.5 82.8-25.2 121-16.1 37-39.1 69.8-68.4 97.8z m248.7-235.9c0 34.8-13.8 67.4-38.8 91.7-21.6 20.9-49.1 33.3-78.6 35.6 11.5-35.4 17.3-72.3 17.3-110.2V243.4h100.1v91.1z" fill="" p-id="3480"></path></svg>
|
||||
</div>
|
||||
<p>专攻产品</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about-advantage-pagination w-full flex flex-row items-center justify-center gap-[1rem]">
|
||||
<div class="about-advantage-pagination-item hover:bg-black cursor-pointer size-[1rem] rounded-[50%] bg-[#888] bg-opacity-70 duration-300"></div>
|
||||
<div class="about-advantage-pagination-item hover:bg-black cursor-pointer size-[1rem] rounded-[50%] bg-[#888] bg-opacity-70 duration-300"></div>
|
||||
<div class="about-advantage-pagination-item hover:bg-black cursor-pointer size-[1rem] rounded-[50%] bg-[#888] bg-opacity-70 duration-300"></div>
|
||||
<div class="about-advantage-pagination-item hover:bg-black cursor-pointer size-[1rem] rounded-[50%] bg-[#888] bg-opacity-70 duration-300"></div>
|
||||
<div class="about-advantage-pagination-item hover:bg-black cursor-pointer size-[1rem] rounded-[50%] bg-[#888] bg-opacity-70 duration-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-100 px-[15%] pt-[10rem] pb-[4rem]">
|
||||
<div>
|
||||
<div class="flex flex-col items-center justify-center mb-[3rem]">
|
||||
<p class="text-[2rem] mt-[4rem]">我们的证书</p>
|
||||
<div class="w-[3rem] h-[0.25rem] bg-orange-500"></div>
|
||||
</div>
|
||||
<div class="swiper about-honor-swiper h-[24rem]">
|
||||
<div class="about-honor-prev-button absolute top-1/2 left-0 transform -translate-y-1/2 z-10 cursor-pointer bg-gray-400 opacity-70">
|
||||
<svg t="1746956649148" class="h-[4rem] w-[2rem]" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4457" width="200" height="200"><path d="M729.6 931.2l-416-425.6 416-416c9.6-9.6 9.6-25.6 0-35.2-9.6-9.6-25.6-9.6-35.2 0l-432 435.2c-9.6 9.6-9.6 25.6 0 35.2l432 441.6c9.6 9.6 25.6 9.6 35.2 0C739.2 956.8 739.2 940.8 729.6 931.2z" p-id="4458" fill="#ffffff"></path></svg>
|
||||
</div>
|
||||
<div class="about-honor-next-button absolute top-1/2 right-0 transform -translate-y-1/2 z-10 cursor-pointer bg-gray-400 opacity-70">
|
||||
<svg t="1746956817891" class="h-[4rem] w-[2rem]" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5696" id="mx_n_1746956817892" width="200" height="200"><path d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z" p-id="5697" fill="#ffffff"></path></svg>
|
||||
</div>
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<div class="size-full">
|
||||
<img class="size-full object-contain object-center" src="static/images/about-honor-img-1.jpg"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="size-full">
|
||||
<img class="size-full object-contain object-center" src="static/images/about-honor-img-1.jpg"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="size-full">
|
||||
<img class="size-full object-contain object-center" src="static/images/about-honor-img-1.jpg"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="size-full">
|
||||
<img class="size-full object-contain object-center" src="static/images/about-honor-img-1.jpg"/>
|
||||
</div>
|
||||
</div>
|
||||
</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,122 @@
|
||||
<!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>
|
||||
<!-- banner -->
|
||||
<div class="relative">
|
||||
<div class="size-full"><img class="size-full object-cover object-center" src="static/images/contact-banner.webp" alt=""></div>
|
||||
<div class="absolute top-0 left-0 size-full flex flex-row justify-center items-center px-[15%]">
|
||||
<div class="flex flex-row text-white mt-[.625rem] w-full">
|
||||
<img class="w-[1.25rem] h-[1.25rem] object-cover object-center" src="static/images/location-icon.png" alt=""><div class="ml-[.625rem] font-bold">首页</div>
|
||||
<a> >> </a>
|
||||
<a href="" class="hover:text-[#ff2a2a]">联系我们</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- banner -->
|
||||
<!-- 联系我们 -->
|
||||
<div class="px-[15%] py-[4rem] max-[800px]:px-[10%]" data-aos="fade-down" data-aos-duration="800" data-aos-delay="100">
|
||||
<div class="grid grid-cols-3 gap-8 mt-[2.5rem] max-[800px]:grid-cols-1 max-[800px]:gap-4 max-[800px]:mt-[1rem] max-[480px]:mt-[0.5rem]">
|
||||
<div class="bg-white px-[1.5rem] relative pt-[5rem] pb-[2rem] border-[0.6rem] group flex flex-col justify-center">
|
||||
<div class=" h-[8rem] w-full flex flex-row items-center justify-center absolute top-0 left-0">
|
||||
<div class="bg-white group-hover:bg-[#13227a] transition duration-[400ms] ease-in-out h-full aspect-square rounded-full translate-y-[-50%] border-[0.6rem] flex flex-row items-center justify-center">
|
||||
<svg t="1746885536401" class="size-[40%] " viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19558" width="" height="">
|
||||
<path class="fill-[#13227a] group-hover:fill-white transition duration-[400ms] ease-in-out" d="M516.320553 65.913723C327.473365 66.759049 174.512778 221.085162 175.350878 409.954025c0.787526 177.21493 282.974557 496.596289 315.154731 532.417865a39.737529 39.737529 0 0 0 59.440119-0.2601c31.862273-36.110576 311.202653-357.991787 310.415127-535.213942-0.838101-188.861638-155.178664-341.822225-344.040302-340.984125z m2.196402 492.860961c-76.483906 0.339575-139.009102-61.614845-139.348677-138.105976-0.339575-76.491131 61.629295-139.001877 138.105976-139.334227 76.512806-0.3468 139.023552 61.60762 139.363127 138.091526 0.339575 76.498356-61.614845 139.001877-138.120426 139.348677z" p-id="19559"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-[1rem]">
|
||||
<p>公司地址:</p>
|
||||
<p>江苏武进经济开发区西湖街道长秀路8号5幢101室</p>
|
||||
</div>
|
||||
<div class="text-[1rem] mt-[0.4rem]">
|
||||
<p>门店地址:</p>
|
||||
<p>江苏省常州市邹区灯具城西大门外鸿福如灯饰</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white px-[1.5rem] relative pt-[5rem] pb-[2rem] border-[0.6rem] group flex flex-col justify-center">
|
||||
<div class=" h-[8rem] w-full flex flex-row items-center justify-center absolute top-0 left-0">
|
||||
<div class="bg-white group-hover:bg-[#13227a] transition duration-[400ms] ease-in-out h-full aspect-square rounded-full translate-y-[-50%] border-[0.6rem] flex flex-row items-center justify-center">
|
||||
<svg t="1746887145135" class="size-[40%]" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23045" id="mx_n_1746887145135" width="200" height="200">
|
||||
<path class="fill-[#13227a] group-hover:fill-white transition duration-[400ms] ease-in-out" d="M419.6 344l-88 89.6c45.8 101.7 143 215 255.7 253.1l76.1-75.8s180.3 31.5 220.8 51.1c35.2 17 46.8 54.8 41.3 101.4-5.8 50.1-71.5 160.5-189.7 161.7-118.2 1.2-292.3-87.9-417-219.2-124.7-131.5-235.9-298.1-218-439.5C118.5 124.9 241.7 99.6 272.5 97.3c31.2-2.3 55.9 6.8 74.7 30.1 24.2 30.1 72.4 216.6 72.4 216.6z" p-id="23046"></path></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-[1rem]">
|
||||
<a>电话:</a>
|
||||
<a>189 2107 9018</a>
|
||||
</div>
|
||||
<div class="text-[1rem] mt-[0.4rem]">
|
||||
<a>姓名:</a>
|
||||
<a>周三妹</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white px-[1.5rem] relative pt-[5rem] pb-[2rem] border-[0.6rem] group flex flex-col justify-center">
|
||||
<div class=" h-[8rem] w-full flex flex-row items-center justify-center absolute top-0 left-0">
|
||||
<div class="bg-white group-hover:bg-[#13227a] transition duration-[400ms] ease-in-out h-full aspect-square rounded-full translate-y-[-50%] border-[0.6rem] flex flex-row items-center justify-center">
|
||||
<svg t="1746887242795" class="size-[40%]" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25791" width="200" height="200">
|
||||
<path class="fill-[#13227a] group-hover:fill-white transition duration-[400ms] ease-in-out" d="M149.6 171.8h691.9c47.2 0 85.9 37.7 86.5 83.9L495.7 493 63.5 256c0.4-46.4 38.8-84.2 86.1-84.2z m-86.1 175l-0.4 419.6c0 46.7 38.9 84.9 86.5 84.9h691.9c47.6 0 86.5-38.2 86.5-84.9V346.6L505.9 572.8c-6.5 3.5-14.3 3.5-20.7 0l-421.7-226z" p-id="25792"></path></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-[1rem]">
|
||||
<a>邮箱:</a>
|
||||
<a>xxxxx@mail.com</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 bg-white mt-[2.5rem] max-[1300px]:grid-cols-1 max-[800px]:mt-[1rem]">
|
||||
<div class="col-span-2 map-box w-full h-full max-[1300px]:h-[24rem]" data-aos="fade-right" data-aos-duration="800" data-aos-delay="100">
|
||||
<div class="map w-full h-full" id="container" tabindex="0"></div>
|
||||
</div>
|
||||
<div class="py-[3rem] px-[2.5rem] max-[500px]:px-0 max-[500px]:py-[2rem] col-span-1" data-aos="fade-left" data-aos-duration="800" data-aos-delay="100">
|
||||
<div class="text-[1.25rem] font-bold max-[480px]:text-[1rem]">联系我们</div>
|
||||
<div class="flex flex-row items-center justify-between gap-[1rem] mt-[1rem] max-[500px]:mt-[0.5rem]">
|
||||
<div class="flex flex-col gap-[0.5rem] w-full">
|
||||
<div>
|
||||
<a class="text-red-600">*</a>
|
||||
<a>邮箱:</a>
|
||||
</div>
|
||||
<input class="border-[.125rem] w-full h-[3.125rem] pl-[1rem] max-[500px]:h-[3rem] max-[640px]:placeholder:text-[.75rem]" type="text" placeholder="您的邮箱"/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-[0.5rem] w-full">
|
||||
<div>
|
||||
<a>姓名:</a>
|
||||
</div>
|
||||
<input class="border-[.125rem] w-full h-[3.125rem] pl-[1rem] max-[500px]:h-[3rem] max-[640px]:placeholder:text-[.75rem]" type="text" placeholder="您的姓名"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-[0.5rem] mt-[1rem] w-full">
|
||||
<div>
|
||||
<a>电话:</a>
|
||||
</div>
|
||||
<input class="border-[.125rem] w-full h-[3.125rem] pl-[1rem] max-[500px]:h-[3rem] max-[640px]:placeholder:text-[.75rem]" type="text" placeholder="您的电话"/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-[0.5rem] mt-[1rem] max-[500px]:mt-[0.5rem]">
|
||||
<div>
|
||||
<a>问题:</a>
|
||||
</div>
|
||||
<textarea class="border-[.125rem] h-[7rem] px-[1rem] pt-[.5rem] w-full max-[500px]:h-[4rem] max-[640px]:placeholder:text-[.75rem]" type="text" placeholder="请详细描述您所需要咨询的问题,我们将及时安排专员与你联系"></textarea>
|
||||
</div>
|
||||
<div class="flex flex-row max-[1300px]:justify-center"><button class="w-[12.5rem] rounded-[6.25rem] py-[0.5rem] bg-[#0c3ba7] text-center text-white mt-[1rem] text-[1rem] max-[500px]:mt-[0.5rem] max-[640px]:text-[.75rem]">提 交</button></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="https://webapi.amap.com/maps?v=1.4.15&key=59d00f0a406aa326d5209dc713810840&callback=init"></script>
|
||||
<script src="./static/js/common.js"></script>
|
||||
<script src="./static/js/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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,24 +120,6 @@
|
||||
<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">
|
||||
@@ -153,23 +128,104 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- {/if}
|
||||
{/foreach} -->
|
||||
<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 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 class="text-center mt-[8rem]">
|
||||
</div>
|
||||
<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>
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
<!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>
|
||||
<!-- banner -->
|
||||
<div class="relative">
|
||||
<div class="size-full"><img class="size-full object-cover object-center" src="static/images/about-index-bg.jpg" alt=""></div>
|
||||
<div class="absolute top-0 left-0 size-full flex flex-row justify-center items-center px-[15%]">
|
||||
<div class="flex flex-row text-white mt-[.625rem] w-full">
|
||||
<img class="w-[1.25rem] h-[1.25rem] object-cover object-center" src="static/images/location-icon.png" alt=""><div class="ml-[.625rem] font-bold">首页</div>
|
||||
<a> >> </a>
|
||||
<a href="" class="hover:text-[#ff2a2a]">新闻资讯</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- banner -->
|
||||
<!-- 新闻资讯 -->
|
||||
<div class="flex flex-col gap-[1rem] min-[1344px]:w-[84rem] min-[1344px]:m-auto max-[1344px]:px-[15%] max-[800px]:px-[10%] py-[4rem]">
|
||||
<div class="grid grid-cols-3 gap-[2rem] group hover:bg-orange-400 p-[0.5rem] transition duration-300 ease-in-out">
|
||||
<div class="h-[15rem] col-span-1"><img class="size-full object-cover object-center" src="static/images/news-img-1.jpg" alt=""></div>
|
||||
<div class="pl-[6rem] pr-[2rem] col-span-2 mt-[1rem]">
|
||||
<p class="font-bold text-[#0a3360] group-hover:text-white transition duration-300 ease-in-out">一般灯具的选购要点</p>
|
||||
<p class="mt-[1rem] group-hover:text-white transition duration-300 ease-in-out">看包装和商标。国家强制要求LED灯具生产厂家在产品外包装上标出以下内容:额定电压、电压范围、额定功率、额定频率。一般说来,优质产品的商标印刷质量好,标志清晰可辨,用软湿布擦拭不易擦掉,且有生产厂家的商标及相关认证标志。</p>
|
||||
<button class="rounded-md px-[1rem] py-[0.5rem] border-[.15rem] group-hover:text-white text-center mt-[3rem] text-[1rem] max-[500px]:mt-[0.5rem] max-[640px]:text-[.75rem] transition duration-300 ease-in-out">更多</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-[2rem] group hover:bg-orange-400 p-[0.5rem] transition duration-300 ease-in-out">
|
||||
<div class="h-[15rem] col-span-1"><img class="size-full object-cover object-center" src="static/images/news-img-1.jpg" alt=""></div>
|
||||
<div class="pl-[6rem] pr-[2rem] col-span-2 mt-[1rem]">
|
||||
<p class="font-bold text-[#0a3360] group-hover:text-white transition duration-300 ease-in-out">一般灯具的选购要点</p>
|
||||
<p class="mt-[1rem] group-hover:text-white transition duration-300 ease-in-out">看包装和商标。国家强制要求LED灯具生产厂家在产品外包装上标出以下内容:额定电压、电压范围、额定功率、额定频率。一般说来,优质产品的商标印刷质量好,标志清晰可辨,用软湿布擦拭不易擦掉,且有生产厂家的商标及相关认证标志。</p>
|
||||
<button class="rounded-md px-[1rem] py-[0.5rem] border-[.15rem] group-hover:text-white text-center mt-[3rem] text-[1rem] max-[500px]:mt-[0.5rem] max-[640px]:text-[.75rem] transition duration-300 ease-in-out">更多</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-[2rem] group hover:bg-orange-400 p-[0.5rem] transition duration-300 ease-in-out">
|
||||
<div class="h-[15rem] col-span-1"><img class="size-full object-cover object-center" src="static/images/news-img-1.jpg" alt=""></div>
|
||||
<div class="pl-[6rem] pr-[2rem] col-span-2 mt-[1rem]">
|
||||
<p class="font-bold text-[#0a3360] group-hover:text-white transition duration-300 ease-in-out">一般灯具的选购要点</p>
|
||||
<p class="mt-[1rem] group-hover:text-white transition duration-300 ease-in-out">看包装和商标。国家强制要求LED灯具生产厂家在产品外包装上标出以下内容:额定电压、电压范围、额定功率、额定频率。一般说来,优质产品的商标印刷质量好,标志清晰可辨,用软湿布擦拭不易擦掉,且有生产厂家的商标及相关认证标志。</p>
|
||||
<button class="rounded-md px-[1rem] py-[0.5rem] border-[.15rem] group-hover:text-white text-center mt-[3rem] text-[1rem] max-[500px]:mt-[0.5rem] max-[640px]:text-[.75rem] transition duration-300 ease-in-out">更多</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-[2rem] group hover:bg-orange-400 p-[0.5rem] transition duration-300 ease-in-out">
|
||||
<div class="h-[15rem] col-span-1"><img class="size-full object-cover object-center" src="static/images/news-img-1.jpg" alt=""></div>
|
||||
<div class="pl-[6rem] pr-[2rem] col-span-2 mt-[1rem]">
|
||||
<p class="font-bold text-[#0a3360] group-hover:text-white transition duration-300 ease-in-out">一般灯具的选购要点</p>
|
||||
<p class="mt-[1rem] group-hover:text-white transition duration-300 ease-in-out">看包装和商标。国家强制要求LED灯具生产厂家在产品外包装上标出以下内容:额定电压、电压范围、额定功率、额定频率。一般说来,优质产品的商标印刷质量好,标志清晰可辨,用软湿布擦拭不易擦掉,且有生产厂家的商标及相关认证标志。</p>
|
||||
<button class="rounded-md px-[1rem] py-[0.5rem] border-[.15rem] group-hover:text-white text-center mt-[3rem] text-[1rem] max-[500px]:mt-[0.5rem] max-[640px]:text-[.75rem] transition duration-300 ease-in-out">更多</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-[2rem] group hover:bg-orange-400 p-[0.5rem] transition duration-300 ease-in-out">
|
||||
<div class="h-[15rem] col-span-1"><img class="size-full object-cover object-center" src="static/images/news-img-1.jpg" alt=""></div>
|
||||
<div class="pl-[6rem] pr-[2rem] col-span-2 mt-[1rem]">
|
||||
<p class="font-bold text-[#0a3360] group-hover:text-white transition duration-300 ease-in-out">一般灯具的选购要点</p>
|
||||
<p class="mt-[1rem] group-hover:text-white transition duration-300 ease-in-out">看包装和商标。国家强制要求LED灯具生产厂家在产品外包装上标出以下内容:额定电压、电压范围、额定功率、额定频率。一般说来,优质产品的商标印刷质量好,标志清晰可辨,用软湿布擦拭不易擦掉,且有生产厂家的商标及相关认证标志。</p>
|
||||
<button class="rounded-md px-[1rem] py-[0.5rem] border-[.15rem] group-hover:text-white text-center mt-[3rem] text-[1rem] max-[500px]:mt-[0.5rem] max-[640px]:text-[.75rem] transition duration-300 ease-in-out">更多</button>
|
||||
</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,46 @@
|
||||
<!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>
|
||||
<!-- banner -->
|
||||
<div class="relative">
|
||||
<div class="size-full"><img class="size-full object-cover object-center" src="static/images/contact-banner.webp" alt=""></div>
|
||||
<div class="absolute top-0 left-0 size-full flex flex-row justify-center items-center px-[15%]">
|
||||
<div class="flex flex-row text-white mt-[.625rem] w-full">
|
||||
<img class="w-[1.25rem] h-[1.25rem] object-cover object-center" src="static/images/location-icon.png" alt=""><div class="ml-[.625rem] font-bold">首页</div>
|
||||
<a> >> </a>
|
||||
<a href="" class="hover:text-[#ff2a2a]">联系我们</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- banner -->
|
||||
<div class="px-[7%] py-[4rem]">
|
||||
<div class="flex flex-row max-[850px]:flex-wrap">
|
||||
<div class="w-[21.25rem] max-[850px]:w-full max-[850px]:mb-[1rem] px-[.25rem] border-[.125rem]">
|
||||
<p class="w-full py-[1rem] border-b-[.0625rem] border-b-black mb-[1rem]">类别</p>
|
||||
<div class="flex flex-col">
|
||||
<a href="#" class="py-[1rem] px-[1rem] cursor-pointer text-[1rem] text-[#333] hover:text-orange-400 transition-colors border-b-[.0625rem] border-[#f0f0f0] product-category-active">
|
||||
● 冰条灯串
|
||||
</a>
|
||||
</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>
|
||||
@@ -1,3 +1,24 @@
|
||||
.about-advantage-swiper-slide:hover {
|
||||
box-shadow: 0 0 10px 2px rgb(187, 187, 187);
|
||||
}
|
||||
|
||||
.about-advantage-swiper-slide {
|
||||
box-shadow: 0 0 4px 1px rgba(187, 187, 187, 0.76);
|
||||
}
|
||||
|
||||
.amap-info {
|
||||
width: 35rem;
|
||||
}
|
||||
|
||||
.amap-info-content {
|
||||
color: white;
|
||||
background-color: rgb(254, 108, 34);
|
||||
}
|
||||
|
||||
.amap-info-sharp {
|
||||
border-top: .5rem solid rgb(254, 108, 34) !important;
|
||||
}
|
||||
|
||||
.navbar-lang-icon > path {
|
||||
stroke: white;
|
||||
stroke-width: 3;
|
||||
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 218 KiB |
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 534 KiB |
|
Before Width: | Height: | Size: 1.5 MiB After Width: | Height: | Size: 123 KiB |
|
After Width: | Height: | Size: 809 KiB |
|
After Width: | Height: | Size: 219 KiB |
|
Before Width: | Height: | Size: 2.2 MiB After Width: | Height: | Size: 935 KiB |
|
Before Width: | Height: | Size: 15 MiB After Width: | Height: | Size: 241 KiB |
|
After Width: | Height: | Size: 456 B |
|
Before Width: | Height: | Size: 19 MiB After Width: | Height: | Size: 150 KiB |
|
Before Width: | Height: | Size: 5.3 MiB After Width: | Height: | Size: 331 KiB |
|
Before Width: | Height: | Size: 4.4 MiB After Width: | Height: | Size: 218 KiB |
|
Before Width: | Height: | Size: 2.5 MiB After Width: | Height: | Size: 925 KiB |
|
Before Width: | Height: | Size: 2.6 MiB After Width: | Height: | Size: 443 KiB |
|
After Width: | Height: | Size: 184 KiB |
|
After Width: | Height: | Size: 7.1 MiB |
|
After Width: | Height: | Size: 12 MiB |
|
After Width: | Height: | Size: 374 KiB |
|
After Width: | Height: | Size: 238 KiB |
|
After Width: | Height: | Size: 449 KiB |
|
After Width: | Height: | Size: 2.6 MiB |
|
After Width: | Height: | Size: 765 KiB |
@@ -1,3 +1,137 @@
|
||||
window.init = function(){
|
||||
// 信息窗体的内容
|
||||
var content = [
|
||||
"<div><div style=\"font-size: 1rem; margin-bottom: .75rem;\">常州市鸿福如电子电器有限公司</div>",
|
||||
"<div style=\"font-size: .75rem;\">联系人:周三妹 电话:189 2107 9018</div>",
|
||||
"<div style=\"font-size: .75rem;\">公司地址:江苏武进经济开发区西湖街道长秀路8号5幢101室</div></div>"
|
||||
];
|
||||
|
||||
var map = new AMap.Map("container", {
|
||||
resizeEnable: true,
|
||||
center: [119.82,31.73],
|
||||
zoom: 16
|
||||
});
|
||||
|
||||
infoWindow = new AMap.InfoWindow({
|
||||
content: content.join("") //使用默认信息窗体框样式,显示信息内容
|
||||
});
|
||||
|
||||
infoWindow.open(map, map.getCenter());
|
||||
}
|
||||
|
||||
var about_advantage_swiper = new Swiper(".about-advantage-swiper", {
|
||||
loop: true,
|
||||
slidesPerView: 5,
|
||||
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: 4,
|
||||
centeredSlides: false,
|
||||
},
|
||||
1450: {
|
||||
slidesPerView: 5,
|
||||
centeredSlides: false,
|
||||
},
|
||||
1920: {
|
||||
slidesPerView: 5,
|
||||
centeredSlides: false,
|
||||
},
|
||||
},
|
||||
on: {
|
||||
resize: function () {
|
||||
updateAboutAdvantagePaginationVisibility();
|
||||
},
|
||||
|
||||
slideChange: function () {
|
||||
$(".about-advantage-pagination-item").each((index, elem) => {
|
||||
if (index == this.realIndex) {
|
||||
$(elem).addClass("bg-black").removeClass("bg-opacity-70")
|
||||
} else {
|
||||
$(elem).removeClass("bg-black").addClass("bg-opacity-70")
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
});
|
||||
function updateAboutAdvantagePaginationVisibility(){
|
||||
let show_slides_number = about_advantage_swiper.params.slidesPerView;
|
||||
console.log(show_slides_number);
|
||||
if (show_slides_number < 5){
|
||||
$(".about-advantage-pagination").show();
|
||||
} else {
|
||||
$(".about-advantage-pagination").hide();
|
||||
}
|
||||
}
|
||||
|
||||
$(document).ready(() => {
|
||||
updateAboutAdvantagePaginationVisibility(),
|
||||
$(".about-advantage-pagination-item").each((index, elem) => {
|
||||
$(elem).click(() => {
|
||||
about_advantage_swiper.slideToLoop(index, 800, false)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
var about_honor_swiper = new Swiper(".about-honor-swiper", {
|
||||
loop: true,
|
||||
slidesPerView: 5,
|
||||
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(() => {
|
||||
$(".about-honor-prev-button").click(() => {
|
||||
about_honor_swiper.slidePrev()
|
||||
})
|
||||
$(".about-honor-next-button").click(() => {
|
||||
about_honor_swiper.slideNext()
|
||||
})
|
||||
})
|
||||
|
||||
var product_swiper = new Swiper(".product-swiper", {
|
||||
loop: true,
|
||||
slidesPerView: 4,
|
||||
@@ -33,16 +167,6 @@ var product_swiper = new Swiper(".product-swiper", {
|
||||
},
|
||||
});
|
||||
|
||||
$(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",
|
||||
|
||||