LOGO 首页 OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 技术文档 其他文档  
 
网站管理员

HTML+CSS实现公司官网!附源码

admin
2026年10月14日 21:48 本文热度 36

   效果展示    



   完整源码   

HTML
<!DOCTYPE html><html lang="zh-CN"><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://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- Tailwind 配置 -->    <script>        tailwind.config = {            theme: {                extend: {                    colors: {                        primary: '#7E22CE', // 主色-紫                        secondary: '#2563EB', // 辅助色-蓝                        dark: '#1E293B',                        light: '#F8FAFC'                    },                    fontFamily: {                        sans: ['Inter', 'system-ui', 'sans-serif'],                    },                }            }        }    </script>
    <!-- 自定义样式 -->    <style type="text/tailwindcss">        @layer utilities {            .content-auto {                content-visibility: auto;            }            .text-gradient {                background-clip: text;                -webkit-background-clip: text;                color: transparent;                background-image: linear-gradient(90deg, #7E22CE, #2563EB);            }            .bg-gradient-primary {                background: linear-gradient(135deg, #7E22CE 0%, #2563EB 100%);            }            .card-hover {                transition: all 0.3s ease;            }            .card-hover:hover {                transform: translateY(-8px);                box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);            }        }    </style></head><body class="font-sans text-dark bg-light">    <!-- 导航栏 -->    <header id="navbar" class="fixed w-full top-0 z-50 transition-all duration-300 bg-white/90 backdrop-blur-sm shadow-sm">        <div class="container mx-auto px-4 sm:px-6 lg:px-8">            <div class="flex justify-between items-center py-4">                <!-- Logo -->                <a href="#" class="flex items-center space-x-2">                    <span class="text-2xl font-bold text-gradient">声动传媒</span>                </a>
                <!-- 桌面导航 -->                <nav class="hidden md:flex space-x-8">                    <a href="#home" class="font-medium hover:text-primary transition-colors">首页</a>                    <a href="#platforms" class="font-medium hover:text-primary transition-colors">直播平台</a>                    <a href="#artists" class="font-medium hover:text-primary transition-colors">旗下经纪人</a>                    <a href="#services" class="font-medium hover:text-primary transition-colors">核心服务</a>                    <a href="#contact" class="font-medium hover:text-primary transition-colors">联系我们</a>                </nav>
                <!-- 联系按钮 -->                <a href="#contact" class="hidden md:block bg-gradient-primary text-white px-6 py-2 rounded-full font-medium hover:opacity-90 transition-opacity">                    商务合作                </a>
                <!-- 移动端菜单按钮 -->                <button id="menuBtn" class="md:hidden text-dark text-xl">                    <i class="fa fa-bars"></i>                </button>            </div>        </div>
        <!-- 移动端导航菜单 -->        <div id="mobileMenu" class="md:hidden hidden bg-white border-t">            <div class="container mx-auto px-4 py-3 flex flex-col space-y-4">                <a href="#home" class="font-medium py-2 hover:text-primary transition-colors">首页</a>                <a href="#platforms" class="font-medium py-2 hover:text-primary transition-colors">直播平台</a>                <a href="#artists" class="font-medium py-2 hover:text-primary transition-colors">旗下经纪人</a>                <a href="#services" class="font-medium py-2 hover:text-primary transition-colors">核心服务</a>                <a href="#contact" class="font-medium py-2 hover:text-primary transition-colors">联系我们</a>                <a href="#contact" class="bg-gradient-primary text-white px-6 py-3 rounded-full font-medium text-center hover:opacity-90 transition-opacity">                    商务合作                </a>            </div>        </div>    </header>
    <!-- 英雄区 -->    <section id="home" class="pt-32 pb-20 md:pt-40 md:pb-32 bg-gradient-to-b from-primary/5 to-white">        <div class="container mx-auto px-4 sm:px-6 lg:px-8">            <div class="flex flex-col md:flex-row items-center">                <div class="md:w-1/2 mb-10 md:mb-0">                    <h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold leading-tight mb-6">                        用<span class="text-gradient">声音</span>创造价值<br>                        用<span class="text-gradient">直播</span>连接世界                    </h1>                    <p class="text-lg text-gray-600 mb-8 max-w-lg">                        声动传媒是国内领先的语音直播MCN机构,专注于抖音、快手、花椒等主流直播平台的艺人孵化与内容运营,打造专业的语音直播生态体系。                    </p>                    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">                        <a href="#contact" class="bg-gradient-primary text-white px-8 py-3 rounded-full font-medium text-center hover:opacity-90 transition-opacity">                            加入我们                        </a>                        <a href="#platforms" class="border border-primary text-primary px-8 py-3 rounded-full font-medium text-center hover:bg-primary/5 transition-colors">                            了解平台                        </a>                    </div>                </div>                <div class="md:w-1/2">                    <img src="https://picsum.photos/id/180/800/600" alt="语音直播场景" class="rounded-2xl shadow-2xl w-full object-cover h-[400px]">                </div>            </div>        </div>    </section>
    <!-- 直播平台展示 -->    <section id="platforms" class="py-20 bg-white">        <div class="container mx-auto px-4 sm:px-6 lg:px-8">            <div class="text-center mb-16">                <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4">合作直播平台</h2>                <p class="text-gray-600 max-w-2xl mx-auto">我们深度布局主流直播平台,为艺人提供多渠道发展机会,实现流量最大化</p>            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-8">                <!-- 抖音 -->                <div class="bg-white rounded-xl shadow-lg p-6 text-center card-hover">                    <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">                        <i class="fa fa-music text-red-500 text-2xl"></i>                    </div>                    <h3 class="text-xl font-bold mb-2">抖音</h3>                    <p class="text-gray-600 text-sm">短视频+直播双轨运营,流量扶持</p>                </div>
                <!-- 快手 -->                <div class="bg-white rounded-xl shadow-lg p-6 text-center card-hover">                    <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">                        <i class="fa fa-video-camera text-blue-500 text-2xl"></i>                    </div>                    <h3 class="text-xl font-bold mb-2">快手</h3>                    <p class="text-gray-600 text-sm">下沉市场全覆盖,私域流量运营</p>                </div>
                <!-- 花椒直播 -->                <div class="bg-white rounded-xl shadow-lg p-6 text-center card-hover">                    <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">                        <i class="fa fa-microphone text-purple-500 text-2xl"></i>                    </div>                    <h3 class="text-xl font-bold mb-2">花椒直播</h3>                    <p class="text-gray-600 text-sm">语音直播头部平台,垂直领域深耕</p>                </div>
                <!-- 捞月狗 -->                <div class="bg-white rounded-xl shadow-lg p-6 text-center card-hover">                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">                        <i class="fa fa-gamepad text-green-500 text-2xl"></i>                    </div>                    <h3 class="text-xl font-bold mb-2">捞月狗</h3>                    <p class="text-gray-600 text-sm">游戏语音直播,精准用户群体</p>                </div>
                <!-- 虎牙 -->                <div class="bg-white rounded-xl shadow-lg p-6 text-center card-hover">                    <div class="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4">                        <i class="fa fa-tv text-orange-500 text-2xl"></i>                    </div>                    <h3 class="text-xl font-bold mb-2">虎牙</h3>                    <p class="text-gray-600 text-sm">游戏直播龙头,专业内容运营</p>                </div>            </div>        </div>    </section>
    <!-- 签约艺人展示 -->    <section id="artists" class="py-20 bg-gray-50">        <div class="container mx-auto px-4 sm:px-6 lg:px-8">            <div class="text-center mb-16">                <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4">旗下经纪人</h2>                <p class="text-gray-600 max-w-2xl mx-auto">汇聚全网顶尖语音主播,多元化风格满足不同用户需求</p>            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">                <!-- 艺人1 -->                <div class="bg-white rounded-xl overflow-hidden shadow-md card-hover">                    <img src="https://picsum.photos/id/64/400/400" alt="艺人头像" class="w-full h-64 object-cover">                    <div class="p-4 text-center">                        <h3 class="font-bold text-lg mb-1">夏语</h3>                        <p class="text-gray-600 text-sm mb-2">情感电台 | 抖音</p>                        <div class="flex justify-center space-x-2 text-yellow-400">                            <i class="fa fa-star"></i>                            <i class="fa fa-star"></i>                            <i class="fa fa-star"></i>                            <i class="fa fa-star"></i>                            <i class="fa fa-star"></i>                        </div>                    </div>                </div>
                <!-- 艺人2 -->                <div class="bg-white rounded-xl overflow-hidden shadow-md card-hover">                    <img src="https://picsum.photos/id/65/400/400" alt="艺人头像" class="w-full h-64 object-cover">                    <div class="p-4 text-center">                        <h3 class="font-bold text-lg mb-1">清风</h3>                        <p class="text-gray-600 text-sm mb-2">游戏解说 | 虎牙</p>                        <div class="flex justify-center space-x-2 text-yellow-400">                            <i class="fa fa-star"></i>                            <i class="fa fa-star"></i>                            <i class="fa fa-star"></i>                            <i class="fa fa-star"></i>                            <i class="fa fa-star-half-o"></i>                        </div>                    </div>                </div>
                <!-- 艺人3 -->                <div class="bg-white rounded-xl overflow-hidden shadow-md card-hover">                    <img src="https://picsum.photos/id/66/400/400" alt="艺人头像" class="w-full h-64 object-cover">                    <div class="p-4 text-center">                        <h3 class="font-bold text-lg mb-1">梦音</h3>                        <p class="text-gray-600 text-sm mb-2">音乐翻唱 | 快手</p>                        <div class="flex justify-center space-x-2 text-yellow-400">                            <i class="fa fa-star"></i>                            <i class="fa fa-star"></i>                            <i class="fa fa-star"></i>                            <i class="fa fa-star"></i>                            <i class="fa fa-star-o"></i>                        </div>                    </div>                </div>
                <!-- 艺人4 -->                <div class="bg-white rounded-xl overflow-hidden shadow-md card-hover">                    <img src="https://picsum.photos/id/67/400/400" alt="艺人头像" class="w-full h-64 object-cover">                    <div class="p-4 text-center">                        <h3 class="font-bold text-lg mb-1">星辰</h3>                        <p class="text-gray-600 text-sm mb-2">脱口秀 | 花椒</p>                        <div class="flex justify-center space-x-2 text-yellow-400">                            <i class="fa fa-star"></i>                            <i class="fa fa-star"></i>                            <i class="fa fa-star"></i>                            <i class="fa fa-star"></i>                            <i class="fa fa-star"></i>                        </div>                    </div>                </div>            </div>
            <div class="text-center mt-10">                <a href="#" class="inline-flex items-center text-primary font-medium hover:underline">                    查看更多 <i class="fa fa-arrow-right ml-2"></i>                </a>            </div>        </div>    </section>
    <!-- 核心服务 -->    <section id="services" class="py-20 bg-white">        <div class="container mx-auto px-4 sm:px-6 lg:px-8">            <div class="text-center mb-16">                <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4">核心服务</h2>                <p class="text-gray-600 max-w-2xl mx-auto">一站式语音直播解决方案,从孵化到变现全流程服务</p>            </div>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">                <!-- 服务1 -->                <div class="bg-gradient-to-br from-primary/5 to-secondary/5 rounded-xl p-8 border border-gray-100 card-hover">                    <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-6">                        <i class="fa fa-user-plus text-primary text-2xl"></i>                    </div>                    <h3 class="text-xl font-bold mb-3">艺人孵化</h3>                    <p class="text-gray-600 mb-4">专业的培训体系,从新人到头部主播的全周期培养,包括声音塑造、直播技巧、内容策划等。</p>                    <ul class="space-y-2 text-gray-600">                        <li class="flex items-center">                            <i class="fa fa-check text-primary mr-2"></i>                            声音训练                        </li>                        <li class="flex items-center">                            <i class="fa fa-check text-primary mr-2"></i>                            直播话术                        </li>                        <li class="flex items-center">                            <i class="fa fa-check text-primary mr-2"></i>                            人设打造                        </li>                    </ul>                </div>
                <!-- 服务2 -->                <div class="bg-gradient-to-br from-primary/5 to-secondary/5 rounded-xl p-8 border border-gray-100 card-hover">                    <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-6">                        <i class="fa fa-line-chart text-primary text-2xl"></i>                    </div>                    <h3 class="text-xl font-bold mb-3">流量运营</h3>                    <p class="text-gray-600 mb-4">多平台流量矩阵搭建,精准定位目标用户,提升直播间曝光和转化效率。</p>                    <ul class="space-y-2 text-gray-600">                        <li class="flex items-center">                            <i class="fa fa-check text-primary mr-2"></i>                            平台推广                        </li>                        <li class="flex items-center">                            <i class="fa fa-check text-primary mr-2"></i>                            数据分析                        </li>                        <li class="flex items-center">                            <i class="fa fa-check text-primary mr-2"></i>                            粉丝维护                        </li>                    </ul>                </div>
                <!-- 服务3 -->                <div class="bg-gradient-to-br from-primary/5 to-secondary/5 rounded-xl p-8 border border-gray-100 card-hover">                    <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-6">                        <i class="fa fa-handshake-o text-primary text-2xl"></i>                    </div>                    <h3 class="text-xl font-bold mb-3">商业变现</h3>                    <p class="text-gray-600 mb-4">多元化的变现渠道,包括礼物打赏、广告合作、商演活动等,最大化艺人收益。</p>                    <ul class="space-y-2 text-gray-600">                        <li class="flex items-center">                            <i class="fa fa-check text-primary mr-2"></i>                            品牌合作                        </li>                        <li class="flex items-center">                            <i class="fa fa-check text-primary mr-2"></i>                            直播带货                        </li>                        <li class="flex items-center">                            <i class="fa fa-check text-primary mr-2"></i>                            内容电商                        </li>                    </ul>                </div>            </div>        </div>    </section>
    <!-- 联系我们 -->    <section id="contact" class="py-20 bg-gradient-primary text-white">        <div class="container mx-auto px-4 sm:px-6 lg:px-8">            <div class="text-center mb-16">                <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4">联系我们</h2>                <p class="max-w-2xl mx-auto opacity-90">无论您是想加入我们的艺人团队,还是寻求商务合作,我们都期待您的咨询</p>            </div>
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-10">                <!-- 联系信息 -->                <div>                    <div class="bg-white/10 backdrop-blur-sm rounded-xl p-8 mb-6">                        <h3 class="text-xl font-bold mb-6">联系方式</h3>                        <div class="space-y-4">                            <div class="flex items-start">                                <div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center mr-4">                                    <i class="fa fa-map-marker"></i>                                </div>                                <div>                                    <h4 class="font-medium mb-1">公司地址</h4>                                    <p class="opacity-80">新疆大学11号楼999室</p>                                </div>                            </div>
                            <div class="flex items-start">                                <div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center mr-4">                                    <i class="fa fa-phone"></i>                                </div>                                <div>                                    <h4 class="font-medium mb-1">联系电话</h4>                                    <p class="opacity-80">000-888-9999</p>                                </div>                            </div>
                            <div class="flex items-start">                                <div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center mr-4">                                    <i class="fa fa-envelope"></i>                                </div>                                <div>                                    <h4 class="font-medium mb-1">邮箱地址</h4>                                    <p class="opacity-80">contact@soundmedia.com</p>                                </div>                            </div>                        </div>                    </div>
                    <div class="bg-white/10 backdrop-blur-sm rounded-xl p-8">                        <h3 class="text-xl font-bold mb-6">社交媒体</h3>                        <div class="flex space-x-4">                            <a href="#" class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center hover:bg-white/30 transition-colors">                                <i class="fa fa-weixin text-xl"></i>                            </a>                            <a href="#" class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center hover:bg-white/30 transition-colors">                                <i class="fa fa-weibo text-xl"></i>                            </a>                            <a href="#" class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center hover:bg-white/30 transition-colors">                                <i class="fa fa-qq text-xl"></i>                            </a>                            <a href="#" class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center hover:bg-white/30 transition-colors">                                <i class="fa fa-youtube-play text-xl"></i>                            </a>                        </div>                    </div>                </div>
                <!-- 联系表单 -->                <div>                    <div class="bg-white rounded-xl p-8 text-dark">                        <h3 class="text-xl font-bold mb-6">在线咨询</h3>                        <form>                            <div class="mb-4">                                <label for="name" class="block text-sm font-medium mb-1">姓名</label>                                <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入您的姓名">                            </div>
                            <div class="mb-4">                                <label for="phone" class="block text-sm font-medium mb-1">电话</label>                                <input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入您的联系电话">                            </div>
                            <div class="mb-4">                                <label for="type" class="block text-sm font-medium mb-1">咨询类型</label>                                <select id="type" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">                                    <option value="">请选择咨询类型</option>                                    <option value="artist">艺人合作</option>                                    <option value="business">商务合作</option>                                    <option value="other">其他咨询</option>                                </select>                            </div>
                            <div class="mb-6">                                <label for="message" class="block text-sm font-medium mb-1">留言内容</label>                                <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入您的留言内容"></textarea>                            </div>
                            <button type="submit" class="w-full bg-gradient-primary text-white px-6 py-3 rounded-lg font-medium hover:opacity-90 transition-opacity">                                提交咨询                            </button>                        </form>                    </div>                </div>            </div>        </div>    </section>
    <!-- 页脚 -->    <footer class="bg-dark text-white py-10">        <div class="container mx-auto px-4 sm:px-6 lg:px-8">            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">                <div>                    <h3 class="text-xl font-bold mb-4 text-gradient">声动传媒</h3>                    <p class="text-gray-400 mb-4">专业的语音直播MCN机构,致力于打造高品质的语音内容生态</p>                    <div class="flex space-x-4">                        <a href="#" class="text-gray-400 hover:text-white transition-colors">                            <i class="fa fa-weixin"></i>                        </a>                        <a href="#" class="text-gray-400 hover:text-white transition-colors">                            <i class="fa fa-weibo"></i>                        </a>                        <a href="#" class="text-gray-400 hover:text-white transition-colors">                            <i class="fa fa-qq"></i>                        </a>                    </div>                </div>
                <div>                    <h4 class="font-bold mb-4">快速链接</h4>                    <ul class="space-y-2">                        <li><a href="#home" class="text-gray-400 hover:text-white transition-colors">首页</a></li>                        <li><a href="#platforms" class="text-gray-400 hover:text-white transition-colors">直播平台</a></li>                        <li><a href="#artists" class="text-gray-400 hover:text-white transition-colors">签约艺人</a></li>                        <li><a href="#services" class="text-gray-400 hover:text-white transition-colors">核心服务</a></li>                    </ul>                </div>
                <div>                    <h4 class="font-bold mb-4">合作平台</h4>                    <ul class="space-y-2">                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">抖音</a></li>                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">快手</a></li>                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">花椒直播</a></li>                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">捞月狗</a></li>                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">虎牙</a></li>                    </ul>                </div>
                <div>                    <h4 class="font-bold mb-4">联系我们</h4>                    <ul class="space-y-2">                        <li class="flex items-center text-gray-400">                            <i class="fa fa-phone mr-2"></i> 000-888-9999                        </li>                        <li class="flex items-center text-gray-400">                            <i class="fa fa-envelope mr-2"></i> contact@xiaohei.com                        </li>                        <li class="flex items-start text-gray-400">                            <i class="fa fa-map-marker mr-2 mt-1"></i>                            <span>新疆大学11号楼999室</span>                        </li>                    </ul>                </div>            </div>
            <div class="border-t border-gray-800 pt-6 text-center text-gray-500 text-sm">                <p>© 2026 声动传媒 版权所有 | xiaohei 备00000000号</p>            </div>        </div>    </footer>
    <!-- 回到顶部按钮 -->    <button id="backToTop" class="fixed bottom-6 right-6 w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center shadow-lg opacity-0 invisible transition-all duration-300 hover:bg-primary/90">        <i class="fa fa-arrow-up"></i>    </button>
    <!-- JavaScript -->    <script>        // 移动端菜单切换        const menuBtn = document.getElementById('menuBtn');        const mobileMenu = document.getElementById('mobileMenu');
        menuBtn.addEventListener('click', () => {            mobileMenu.classList.toggle('hidden');            // 切换图标            const icon = menuBtn.querySelector('i');            if (icon.classList.contains('fa-bars')) {                icon.classList.replace('fa-bars', 'fa-times');            } else {                icon.classList.replace('fa-times', 'fa-bars');            }        });
        // 导航栏滚动效果        const navbar = document.getElementById('navbar');        window.addEventListener('scroll', () => {            if (window.scrollY > 50) {                navbar.classList.add('py-2', 'shadow-md');                navbar.classList.remove('py-4', 'shadow-sm');            } else {                navbar.classList.add('py-4', 'shadow-sm');                navbar.classList.remove('py-2', 'shadow-md');            }        });
        // 平滑滚动        document.querySelectorAll('a[href^="#"]').forEach(anchor => {            anchor.addEventListener('click', function (e) {                e.preventDefault();
                // 关闭移动端菜单                if (!mobileMenu.classList.contains('hidden')) {                    mobileMenu.classList.add('hidden');                    const icon = menuBtn.querySelector('i');                    icon.classList.replace('fa-times', 'fa-bars');                }
                const targetId = this.getAttribute('href');                const targetElement = document.querySelector(targetId);
                if (targetElement) {                    window.scrollTo({                        top: targetElement.offsetTop - 80,                        behavior: 'smooth'                    });                }            });        });
        // 回到顶部按钮        const backToTopBtn = document.getElementById('backToTop');
        window.addEventListener('scroll', () => {            if (window.scrollY > 300) {                backToTopBtn.classList.remove('opacity-0', 'invisible');                backToTopBtn.classList.add('opacity-100', 'visible');            } else {                backToTopBtn.classList.add('opacity-0', 'invisible');                backToTopBtn.classList.remove('opacity-100', 'visible');            }        });
        backToTopBtn.addEventListener('click', () => {            window.scrollTo({                top: 0,                behavior: 'smooth'            });        });    </script></body></html>


阅读原文:原文链接


该文章在 2026/10/16 12:57:59 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2026 ClickSun All Rights Reserved  粤ICP备13012886号-2  粤公网安备44030602007207号