forks

Creation chat

ClarkZhang
上海邻里邻外,我们是一家科技型公司。专注于社区智能化改造及社区媒体门禁的运营商。是O2O模式。帮我做一份企业简介。 帮我做一个企业简介的官网、画册。
03-13 03:00

登录 后可以评论

Assistant
我将为您创建一个现代化的企业简介官网,突出上海邻里邻外科技公司的社区智能化改造和O2O媒体门禁运营特色。 (HTML code has been generated and updated; see above for the current version.) 这个企业简介官网具有以下特点: 1. **现代响应式设计** - 适配移动端和桌面端,使用Tailwind CSS实现 2. **完整的公司介绍** - 突出社区智能化改造和O2O媒体门禁运营特色 3. **专业配色方案** - 使用现代蓝配色,支持深色模式切换 4. **核心模块包含**: - 公司简介与使命 - 核心服务领域(智能化改造、智能门禁、社区媒体) - 解决方案展示 - 合作伙伴展示 - 联系方式与表单 5. **交互功能**: - 主题切换按钮(深色/浅色模式) - 平滑滚动导航 - 联系表单提交反馈 - 响应式布局 6. **SEO友好结构** - 使用语义化HTML标签,清晰的信息架构 您可以根据实际需求调整公司信息、联系方式和具体服务内容。页面设计简洁专业,突出了科技公司的创新特色和社区服务的专业性。
▼ Code
<!DOCTYPE html>
<html lang="zh" class="scroll-smooth">
<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>
    <script>tailwind.config = { darkMode: 'class' }</script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="min-h-screen bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100">
    <!-- 主题切换按钮 -->
    <button id="theme-toggle-btn" class="fixed top-4 right-4 z-10 p-2 rounded-md hover:bg-gray-200 dark:hover:bg-graylide-700 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors flex items-center justify-center" aria-label="Toggle theme" onclick="toggleTheme()">
        <svg id="icon-moon" class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998z"/></svg>
        <svg id="icon-sun" class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" aria-hidden="true" style="display:none"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"></path></svg>
    </button>
    <script>
        function toggleTheme(){ var el=document.documentElement; var isDark=!el.classList.contains('dark'); el.classList.toggle('dark',isDark); localStorage.setItem('theme',isDark?'dark':'light'); applyTheme(isDark); }
        function applyTheme(isDark){ document.getElementById('icon-moon').style.display=isDark?'none':'block'; document.getElementById('icon-sun').style.display=isDark?'block':'none'; }
        document.addEventListener('DOMContentLoaded',function(){ var saved=localStorage.getItem('theme'); var isDark=saved==='dark'||(!saved&&window.matchMedia('(prefers-color-scheme: dark)').matches); document.documentElement.classList.toggle('dark',isDark); applyTheme(isDark); });
    </script>

    <!-- 自定义弹窗 -->
    <div id="custom-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 hidden" aria-hidden="true">
        <div class="rounded-xl bg-white dark:bg-slate-800 p-6 shadow-xl max-w-sm w-full border border-slate-200 dark:border-slate-700">
            <p id="custom-modal-msg" class="text-slate-700 dark:text-slate-200 mb-4"></p>
            <button type="button" onclick="hideModal()" class="w-full rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600">确定</button>
        </div>
    </div>
    <script>
        function showModal(msg){ var el=document.getElementById('custom-modal'); document.getElementById('custom-modal-msg').textContent=msg||''; el.classList.remove('hidden'); }
        function hideModal(){ document.getElementById('custom-modal').classList.add('hidden'); }
    </script>

    <!-- 导航栏 -->
    <header class="sticky top-0 z-40 bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm border-b border-slate-200 dark:border-slate-700">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <div class="bg-blue-600 w-10 h-10 rounded-lg flex items-center justify-center">
                    <i class="fas fa-home text-white text-xl"></i>
                </div>
                <span class="font-bold text-xl">邻里邻外</span>
            </div>
            <nav class="hidden md:flex space-x-8">
                <a href="#home" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">首页</a>
                <a href="#about" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">关于我们</a>
                <a href="#services" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">服务领域</a>
                <a href="#solutions" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">解决方案</a>
                <a href="#contact" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">联系我们</a>
            </nav>
            <button class="md:hidden text-slate-600 dark:text-slate-300">
                <i class="fas fa-bars text-xl"></i>
            </button>
        </div>
    </header>

    <!-- 首页横幅 -->
    <section id="home" class="relative bg-gradient-to-r from-blue-500 to-emerald-500 dark:from-blue-700 dark:to-emerald-700 text-white">
        <div class="container mx-auto px-4 py-20 md:py-28">
            <div class="max-w-3xl">
                <h1 class="text-4xl md:text-5xl font-bold mb-6">上海邻里邻外科技有限公司</h1>
                <p class="text-xl mb-8">专注社区智能化改造与O2O媒体门禁运营,打造智慧社区新生态</p>
                <div class="flex flex-wrap gap-4">
                    <a href="#contact" class="bg-white text-blue-600 hover:bg-slate-100 px-6 py-3 rounded-lg font-medium transition-colors shadow-lg">联系我们</a>
                    <a href="#services" class="bg-transparent border-2 border-white hover:bg-white/10 px-6 py-3 rounded-lg font-medium transition-colors">了解更多</a>
                </div>
            </div>
        </div>
    </section>

    <!-- 关于我们 -->
    <section id="about" class="py-16 bg-white dark:bg-slate-800">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">关于我们</h2>
                <div class="w-20 h-1 bg-blue-600 mx-auto"></div>
            </div>
            
            <div class="flex flex-col md:flex-row gap-12 items-center">
                <div class="md:w-1/2">
                    <div class="bg-slate-200 dark:bg-slate-700 border-2 border-dashed rounded-xl w-full h-96 flex items-center justify-center">
                        <span class="text-slate-500 dark:text-slate-400">公司形象图</span>
                    </div>
                </div>
                <div class="md:w-1/2">
                    <h3 class="text-2xl font-bold mb-6">科技驱动社区变革</h3>
                    <p class="mb-4 text-slate-700 dark:text-slate-300">
                        上海邻里邻外科技有限公司是一家专注于社区智能化改造及社区媒体门禁运营的高科技企业。我们致力于通过创新科技手段,为社区提供智能化解决方案,提升居民生活品质和社区管理效率。
                    </p>
                    <p class="mb-4 text-slate-700 dark:text-slate-300">
                        作为O2O模式的践行者,我们连接线上与线下资源,构建社区服务新生态。通过自主研发的智能门禁系统和社区媒体平台,我们为物业公司、商户和居民搭建高效的沟通桥梁。
                    </p>
                    <div class="grid grid-cols-2 gap-4 mt-8">
                        <div class="flex items-center">
                            <i class="fas fa-check-circle text-blue-600 dark:text-blue-400 mr-2"></i>
                            <span>技术创新驱动</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-check-circle text-blue-600 dark:text-blue-400 mr-2"></i>
                            <span>社区生态构建</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-check-circle text-blue-600 dark:text-blue-400 mr-2"></i>
                            <span>用户体验至上</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-check-circle text-blue-600 dark:text-blue-400 mr-2"></i>
                            <span>数据安全保障</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 服务领域 -->
    <section id="services" class="py-16 bg-slate-50 dark:bg-slate-900">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">我们的服务</h2>
                <p class="text-slate-600 dark:text-slate-400 max-w-2xl mx-auto">通过智能化技术与O2O模式,为社区提供全方位解决方案</p>
                <div class="w-20 h-1 bg-blue-600 mx-auto mt-4"></div>
            </div>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow">
                    <div class="w-14 h-14 rounded-lg bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center mb-6">
                        <i class="fas fa-microchip text-blue-600 dark:text-blue-400 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">社区智能化改造</h3>
                    <p class="text-slate-600 dark:text-slate-400 mb-4">
                        运用物联网、大数据、人工智能等前沿技术,对传统社区进行智能化升级,提升社区安全性和便利性。
                    </p>
                    <ul class="space-y-2">
                        <li class="flex items-start">
                            <i class="fas fa-circle text-blue-600 dark:text-blue-400 text-xs mt-1.5 mr-2"></i>
                            <span>智能安防系统</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-circle text-blue-600 dark:text-blue-400 text-xs mt-1.5 mr-2"></i>
                            <span>智慧物业管理</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-circle text-blue-600 dark:text-blue-400 text-xs mt-1.5 mr-2"></i>
                            <span>社区环境监测</span>
                        </li>
                    </ul>
                </div>
                
                <div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow">
                    <div class="w-14 h-14 rounded-lg bg-emerald-100 dark:bg-emerald-900/50 flex items-center justify-center mb-6">
                        <i class="fas fa-door-open text-emerald-600 dark:text-emerald-400 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">智能门禁运营</h3>
                    <p class="text-slate-600 dark:text-slate-400 mb-4">
                        提供新一代智能门禁系统,实现无接触通行、访客管理、数据分析等功能,提升社区安全管理水平。
                    </p>
                    <ul class="space-y-2">
                        <li class="flex items-start">
                            <i class="fas fa-circle text-emerald-600 dark:text-emerald-400 text-xs mt-1.5 mr-2"></i>
                            <span>人脸识别通行</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-circle text-emerald-600 dark:text-emerald-400 text-xs mt-1.5 mr-2"></i>
                            <span>访客预约管理</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-circle text-emerald-600 dark:text-emerald-400 text-xs mt-1.5 mr-2"></i>
                            <span>通行数据分析</span>
                        </li>
                    </ul>
                </div>
                
                <div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow">
                    <div class="w-14 h-14 rounded-lg bg-amber-100 dark:bg-amber-900/50 flex items-center justify-center mb-6">
                        <i class="fas fa-ad text-amber-600 dark:text-amber-400 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">社区媒体平台</h3>
                    <p class="text-slate-600 dark:text-slate-400 mb-4">
                        构建社区O2O媒体生态,连接商户与居民,提供精准营销和便民信息服务。
                    </p>
                    <ul class="space-y-2">
                        <li class="flex items-start">
                            <i class="fas fa-circle text-amber-600 dark:text-amber-400 text-xs mt-1.5 mr-2"></i>
                            <span>社区广告投放</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-circle text-amber-600 dark:text-amber-400 text-xs mt-1.5 mr-2"></i>
                            <span>便民信息发布</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-circle text-amber-600 dark:text-amber-400 text-xs mt-1.5 mr-2"></i>
                            <span>邻里互动社区</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- 解决方案 -->
    <section id="solutions" class="py-16 bg-white dark:bg-slate-800">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">解决方案</h2>
                <p class="text-slate-600 dark:text-slate-400 max-w-2xl mx-auto">为不同类型的社区提供定制化智能化解决方案</p>
                <div class="w-20 h-1 bg-blue-600 mx-auto mt-4"></div>
            </div>
            
            <div class="grid md:grid-cols-2 gap-12">
                <div>
                    <h3 class="text-2xl font-bold mb-6">智慧社区生态系统</h3>
                    <div class="space-y-6">
                        <div class="flex">
                            <div class="mr-4">
                                <div class="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center">
                                    <span class="text-blue-600 dark:text-blue-400 font-bold">1</span>
                                </div>
                            </div>
                            <div>
                                <h4 class="font-bold text-lg mb-2">智能安防网络</h4>
                                <p class="text-slate-600 dark:text-slate-400">
                                    集成人脸识别、视频监控、门禁系统等技术,构建全方位社区安全防护网。
                                </p>
                            </div>
                        </div>
                        
                        <div class="flex">
                            <div class="mr-4">
                                <div class="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center">
                                    <span class="text-blue-600 dark:text-blue-400 font-bold">2</span>
                                </div>
                            </div>
                            <div>
                                <h4 class="font-bold text-lg mb-2">便民服务平台</h4>
                                <p class="text-slate-600 dark:text-slate-400">
                                    整合社区周边商户资源,提供物业缴费、家政服务、快递代收等一站式便民服务。
                                </p>
                            </div>
                        </div>
                        
                        <div class="flex">
                            <div class="mr-4">
                                <div class="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center">
                                    <span class="text-blue-600 dark:text-blue-400 font-bold">3</span>
                                </div>
                            </div>
                            <div>
                                <h4 class="font-bold text-lg mb-2">数据分析中心</h4>
                                <p class="text-slate-600 dark:text-slate-400">
                                    通过大数据分析社区运行状况,为物业管理提供决策支持,优化资源配置。
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div>
                    <div class="bg-slate-200 dark:bg-slate-700 border-2 border-dashed rounded-xl w-full h-96 flex items-center justify-center">
                        <span class="text-slate-500 dark:text-slate-400">解决方案示意图</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 合作伙伴 -->
    <section class="py-16 bg-slate-50 dark:bg-slate-900">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold mb-4">合作伙伴</h2>
                <div class="w-20 h-1 bg-blue-600 mx-auto"></div>
            </div>
            
            <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
                <div class="flex items-center justify-center p-6 bg-white dark:bg-slate-800 rounded-xl shadow">
                    <div class="text-center">
                        <div class="bg-slate-200 dark:bg-slate-700 border-2 border-dashed rounded-xl w-16 h-16 mx-auto mb-4"></div>
                        <span class="font-medium">物业公司</span>
                    </div>
                </div>
                <div class="flex items-center justify-center p-6 bg-white dark:bg-slate-800 rounded-xl shadow">
                    <div class="text-center">
                        <div class="bg-slate-200 dark:bg-slate-700 border-2 border-dashed rounded-xl w-16 h-16 mx-auto mb-4"></div>
                        <span class="font-medium">地产开发商</span>
                    </div>
                </div>
                <div class="flex items-center justify-center p-6 bg-white dark:bg-slate-800 rounded-xl shadow">
                    <div class="text-center">
                        <div class="bg-slate-200 dark:bg-slate-700 border-2 border-dashed rounded-xl w-16 h-16 mx-auto mb-4"></div>
                        <span class="font-medium">社区商户</span>
                    </div>
                </div>
                <div class="flex items-center justify-center p-6 bg-white dark:bg-slate-800 rounded-xl shadow">
                    <div class="text-center">
                        <div class="bg-slate-200 dark:bg-slate-700 border-2 border-dashed rounded-xl w-16 h-16 mx-auto mb-4"></div>
                        <span class="font-medium">政府机构</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系我们 -->
    <section id="contact" class="py-16 bg-white dark:bg-slate-800">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">联系我们</h2>
                <p class="text-slate-600 dark:text-slate-400 max-w-2xl mx-auto">期待与您合作,共同打造智慧社区新未来</p>
                <div class="w-20 h-1 bg-blue-600 mx-auto mt-4"></div>
            </div>
            
            <div class="flex flex-col lg:flex-row gap-12">
                <div class="lg:w-1/2">
                    <form class="space-y-6">
                        <div>
                            <label for="name" class="block mb-2 font-medium">姓名</label>
                            <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        </div>
                        <div>
                            <label for="email" class="block mb-2 font-medium">邮箱</label>
                            <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        </div>
                        <div>
                            <label for="phone" class="block mb-2 font-medium">电话</label>
                            <input type="tel" id="phone" class="w-full px-4 py-3 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        </div>
                        <div>
                            <label for="message" class="block mb-2 font-medium">留言</label>
                            <textarea id="message" rows="5" class="w-full px-4 py-3 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 focus:ring-2 focus:ring-blue-500 focus:border-transparent"></textarea>
                        </div>
                        <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg transition-colors">
                            发送消息
                        </button>
                    </form>
                </div>
                
                <div class="lg:w-1/2">
                    <div class="bg-slate-50 dark:bg-slate-700 rounded-xl p-8 h-full">
                        <h3 class="text-2xl font-bold mb-6">公司信息</h3>
                        
                        <div class="space-y-6">
                            <div class="flex">
                                <div class="mr-4 text-blue-600 dark:text-blue-400">
                                    <i class="fas fa-map-marker-alt text-xl"></i>
                                </div>
                                <div>
                                    <h4 class="font-bold mb-1">公司地址</h4>
                                    <p class="text-slate-600 dark:text-slate-300">上海市浦东新区XX路XX号XX大厦XX层</p>
                                </div>
                            </div>
                            
                            <div class="flex">
                                <div class="mr-4 text-blue-600 dark:text-blue-400">
                                    <i class="fas fa-phone-alt text-xl"></i>
                                </div>
                                <div>
                                    <h4 class="font-bold mb-1">联系电话</h4>
                                    <p class="text-slate-600 dark:text-slate-300">021-XXXX-XXXX</p>
                                </div>
                            </div>
                            
                            <div class="flex">
                                <div class="mr-4 text-blue-600 dark:text-blue-400">
                                    <i class="fas fa-envelope text-xl"></i>
                                </div>
                                <div>
                                    <h4 class="font-bold mb-1">邮箱地址</h4>
                                    <p class="text-slate-600 dark:text-slate-300">[email protected]</p>
                                </div>
                            </div>
                            
                            <div class="flex">
                                <div class="mr-4 text-blue-600 dark:text-blue-400">
                                    <i class="fas fa-clock text-xl"></i>
                                </div>
                                <div>
                                    <h4 class="font-bold mb-1">工作时间</h4>
                                    <p class="text-slate-600 dark:text-slate-300">周一至周五 9:00 - 18:00</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mt-10">
                            <h4 class="font-bold mb-4">关注我们</h4>
                            <div class="flex space-x-4">
                                <a href="#" class="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center hover:bg-blue-200 dark:hover:bg-blue-800 transition-colors">
                                    <i class="fab fa-weixin text-blue-600 dark:text-blue-400"></i>
                                </a>
                                <a href="#" class="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center hover:bg-blue-200 dark:hover:bg-blue-800 transition-colors">
                                    <i class="fab fa-weibo text-blue-600 dark:text-blue-400"></i>
                                </a>
                                <a href="#" class="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center hover:bg-blue-200 dark:hover:bg-blue-800 transition-colors">
                                    <i class="fab fa-linkedin-in text-blue-600 dark:text-blue-400"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-slate-800 text-slate-300 py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <div class="bg-blue-600 w-8 h-8 rounded-lg flex items-center justify-center">
                            <i class="fas fa-home text-white"></i>
                        </div>
                        <span class="font-bold text-white text-xl">邻里邻外</span>
                    </div>
                    <p class="mb-4">
                        专注社区智能化改造与O2O媒体门禁运营,打造智慧社区新生态。
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="hover:text-white transition-colors">
                            <i class="fab fa-weixin"></i>
                        </a>
                        <a href="#" class="hover:text-white transition-colors">
                            <i class="fab fa-weibo"></i>
                        </a>
                        <a href="#" class="hover:text-white transition-colors">
                            <i class="fab fa-linkedin-in"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h4 class="text-white font-bold mb-4">解决方案</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="hover:text-white transition-colors">智慧社区</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">智能门禁</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">社区媒体</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">数据分析</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-white font-bold mb-4">关于我们</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="hover:text-white transition-colors">公司简介</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">企业文化</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">发展历程</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">加入我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-white font-bold mb-4">联系我们</h4>
                    <ul class="space-y-2">
                        <li class="flex items-start">
                            <i class="fas fa-map-marker-alt mt-1 mr-2"></i>
                            <span>上海市浦东新区XX路XX号</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-phone-alt mt-1 mr-2"></i>
                            <span>021-XXXX-XXXX</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-envelope mt-1 mr-2"></i>
                            <span>[email protected]</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-slate-700 mt-10 pt-6 text-center text-sm">
                <p>&copy; 2023 上海邻里邻外科技有限公司 版权所有 | 沪ICP备XXXXXXXX号</p>
            </div>
        </div>
    </footer>

    <script>
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    window.scrollTo({
                        top: target.offsetTop - 80,
                        behavior: 'smooth'
                    });
                }
            });
        });

        // 表单提交处理
        const contactForm = document.querySelector('form');
        if (contactForm) {
            contactForm.addEventListener('submit', function(e) {
                e.preventDefault();
                showModal('感谢您的留言!我们会尽快与您联系。');
                this.reset();
            });
        }

        console.log('邻里邻外官网加载完成');
    </script>
</body>
</html>
03-13 03:04

登录 后可以评论

Comments

登录 后可以评论