hongfuru/contact.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>

    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/7.4.1/swiper-bundle.min.css" type="text/css" rel="stylesheet" />
    <link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/aos/3.0.0-beta.6/aos.css" type="text/css" rel="stylesheet" />

    <link rel="stylesheet" href="./static/css/common.css">
    <link rel="stylesheet" href="./static/css/index.css">
</head>
<body>
    <!-- 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>&nbsp;>>&nbsp;</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>