[{"data":1,"prerenderedAt":21},["ShallowReactive",2],{"$f1k0t9wl47szed":3},{"data":4},{"id":5,"slug":6,"title":7,"description":8,"category":9,"tags":10,"author":16,"image":17,"content":18,"publishedAt":19,"createdAt":20,"updatedAt":20},27,"tomde\u002Fnotes\u002Fhtml-template-8","[网站模板]社区桶装水销售点网站、暗黑主题、响应式、纯静态html模板","响应式设计：网站布局会自动适应不同屏幕尺寸，在手机和平板上也有良好的显示效果。 暗黑模式：点击右上角的月亮图标可以切换到暗黑模式，再次点击可恢复明亮模式。 核心内容： 产品展示：展示三种不同类型的桶装水及价格 服务介绍：配送、回收和客户服务 关于我们：品牌故事和服务理念 联系方式：地址、电话和营业时间 交互功能： 平滑滚动导航 移动端汉堡菜单 产品订购按钮 这个设计采用了清新蓝色作为主色调，符合水产品的特性，同时通过精心设计的布局和动画效果，提供了良好的用户体验。","notes",[11,12,13,14,15],"响应式","官网","暗黑模式","html网页模板","纯静态源码","tomde",null,"响应式设计：网站布局会自动适应不同屏幕尺寸，在手机和平板上也有良好的显示效果。\r\n暗黑模式：点击右上角的月亮图标可以切换到暗黑模式，再次点击可恢复明亮模式。\r\n核心内容：\r\n产品展示：展示三种不同类型的桶装水及价格\r\n服务介绍：配送、回收和客户服务\r\n关于我们：品牌故事和服务理念\r\n联系方式：地址、电话和营业时间\r\n交互功能：\r\n平滑滚动导航\r\n移动端汉堡菜单\r\n产品订购按钮\r\n这个设计采用了清新蓝色作为主色调，符合水产品的特性，同时通过精心设计的布局和动画效果，提供了良好的用户体验。\r\n```html\r\n\u003C!DOCTYPE html>\r\n\u003Chtml lang=\"zh-CN\">\r\n\u003Chead>\r\n    \u003Cmeta charset=\"UTF-8\">\r\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    \u003Ctitle>清泉之家 - 社区桶装水销售点\u003C\u002Ftitle>\r\n    \u003Clink rel=\"stylesheet\" href=\"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Ffont-awesome\u002F6.0.0\u002Fcss\u002Fall.min.css\">\r\n    \u003Cstyle>\r\n        :root {\r\n            --primary-color: #3498db;\r\n            --secondary-color: #2ecc71;\r\n            --accent-color: #f39c12;\r\n            --text-color: #333;\r\n            --bg-color: #f8f9fa;\r\n            --card-bg: #ffffff;\r\n            --header-bg: rgba(255, 255, 255, 0.95);\r\n            --footer-bg: #2c3e50;\r\n            --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\r\n            --transition: all 0.3s ease;\r\n        }\r\n\r\n        .dark-mode {\r\n            --primary-color: #5dade2;\r\n            --secondary-color: #58d68d;\r\n            --accent-color: #f8c471;\r\n            --text-color: #ecf0f1;\r\n            --bg-color: #1a1a2e;\r\n            --card-bg: #16213e;\r\n            --header-bg: rgba(26, 26, 46, 0.95);\r\n            --footer-bg: #0f3460;\r\n            --shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\r\n        }\r\n\r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n            transition: var(--transition);\r\n        }\r\n\r\n        body {\r\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n            line-height: 1.6;\r\n            color: var(--text-color);\r\n            background-color: var(--bg-color);\r\n            padding-top: 80px;\r\n        }\r\n\r\n        .container {\r\n            width: 90%;\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n            padding: 0 15px;\r\n        }\r\n\r\n        \u002F* 导航栏样式 *\u002F\r\n        header {\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            background-color: var(--header-bg);\r\n            box-shadow: var(--shadow);\r\n            z-index: 1000;\r\n            padding: 15px 0;\r\n        }\r\n\r\n        .navbar {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n        }\r\n\r\n        .logo {\r\n            display: flex;\r\n            align-items: center;\r\n            font-size: 1.3rem;\r\n            font-weight: bold;\r\n            color: var(--primary-color);\r\n        }\r\n\r\n        .logo i {\r\n            margin-right: 10px;\r\n            font-size: 2rem;\r\n        }\r\n\r\n        .nav-links {\r\n            display: flex;\r\n            list-style: none;\r\n        }\r\n\r\n        .nav-links li {\r\n            margin-left: 25px;\r\n        }\r\n\r\n        .nav-links a {\r\n            text-decoration: none;\r\n            color: var(--text-color);\r\n            font-weight: 500;\r\n            position: relative;\r\n        }\r\n\r\n        .nav-links a:after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: -5px;\r\n            left: 0;\r\n            width: 0;\r\n            height: 2px;\r\n            background-color: var(--primary-color);\r\n            transition: var(--transition);\r\n        }\r\n\r\n        .nav-links a:hover:after {\r\n            width: 100%;\r\n        }\r\n\r\n        .theme-toggle {\r\n            background: none;\r\n            border: none;\r\n            cursor: pointer;\r\n            font-size: 1.5rem;\r\n            color: var(--text-color);\r\n            margin-left: 20px;\r\n        }\r\n\r\n        \u002F* 英雄区域 *\u002F\r\n        .hero {\r\n            padding: 80px 0;\r\n            text-align: center;\r\n            background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)), url('https:\u002F\u002Fcdn.jsdelivr.net\u002Fgh\u002Ftomdehub\u002Fresources\u002Fimg\u002Fsite\u002F2025-09\u002F20250911011457.png') no-repeat;\r\n            background-size: cover;\r\n            color: white;\r\n            border-radius: 12px;\r\n            margin-bottom: 40px;\r\n        }\r\n\r\n        .dark-mode .hero {\r\n            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)), url('https:\u002F\u002Fcdn.jsdelivr.net\u002Fgh\u002Ftomdehub\u002Fresources\u002Fimg\u002Fsite\u002F2025-09\u002F20250911011457.png') no-repeat;\r\n            background-size: cover;\r\n        }\r\n\r\n        .hero h1 {\r\n            font-size: 2.5rem;\r\n            margin-bottom: 20px;\r\n        }\r\n\r\n        .hero p {\r\n            font-size: 1.2rem;\r\n            max-width: 700px;\r\n            margin: 0 auto 30px;\r\n        }\r\n\r\n        .btn {\r\n            display: inline-block;\r\n            padding: 12px 30px;\r\n            background-color: var(--accent-color);\r\n            color: white;\r\n            text-decoration: none;\r\n            border-radius: 50px;\r\n            font-weight: bold;\r\n            transition: var(--transition);\r\n        }\r\n\r\n        .btn:hover {\r\n            transform: translateY(-3px);\r\n            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);\r\n        }\r\n\r\n        \u002F* 产品区域 *\u002F\r\n        .section-title {\r\n            text-align: center;\r\n            margin-bottom: 40px;\r\n            color: var(--primary-color);\r\n        }\r\n\r\n        .products {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\r\n            gap: 30px;\r\n            margin-bottom: 60px;\r\n        }\r\n\r\n        .product-card {\r\n            background-color: var(--card-bg);\r\n            border-radius: 12px;\r\n            overflow: hidden;\r\n            box-shadow: var(--shadow);\r\n            transition: var(--transition);\r\n        }\r\n\r\n        .product-card:hover {\r\n            transform: translateY(-10px);\r\n        }\r\n\r\n        .product-img {\r\n            height: 200px;\r\n            background-color: #3498db;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            color: white;\r\n            font-size: 5rem;\r\n        }\r\n\r\n        .product-info {\r\n            padding: 20px;\r\n        }\r\n\r\n        .product-info h3 {\r\n            margin-bottom: 10px;\r\n            color: var(--primary-color);\r\n        }\r\n\r\n        .price {\r\n            font-size: 1.2rem;\r\n            font-weight: bold;\r\n            color: var(--accent-color);\r\n            margin: 10px 0;\r\n        }\r\n\r\n        \u002F* 服务区域 *\u002F\r\n        .services {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n            gap: 30px;\r\n            margin-bottom: 60px;\r\n        }\r\n\r\n        .service-card {\r\n            background-color: var(--card-bg);\r\n            padding: 30px;\r\n            border-radius: 12px;\r\n            box-shadow: var(--shadow);\r\n            text-align: center;\r\n        }\r\n\r\n        .service-icon {\r\n            font-size: 3rem;\r\n            color: var(--primary-color);\r\n            margin-bottom: 20px;\r\n        }\r\n\r\n        \u002F* 关于我们 *\u002F\r\n        .about {\r\n            display: grid;\r\n            grid-template-columns: 1fr 1fr;\r\n            gap: 40px;\r\n            margin-bottom: 60px;\r\n            align-items: center;\r\n        }\r\n\r\n        .about-image {\r\n            background: linear-gradient(135deg, var(--primary-color) 0%, #1a5f7a 100%);\r\n            height: 400px;\r\n            border-radius: 12px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            color: white;\r\n            font-size: 5rem;\r\n        }\r\n\r\n        \u002F* 页脚 *\u002F\r\n        footer {\r\n            background-color: var(--footer-bg);\r\n            color: white;\r\n            padding: 40px 0 20px;\r\n        }\r\n\r\n        .footer-content {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n            gap: 30px;\r\n            margin-bottom: 30px;\r\n        }\r\n\r\n        .footer-section h3 {\r\n            margin-bottom: 20px;\r\n            font-size: 1.2rem;\r\n        }\r\n\r\n        .footer-section p, .footer-section li {\r\n            margin-bottom: 10px;\r\n        }\r\n\r\n        .footer-section ul {\r\n            list-style: none;\r\n        }\r\n\r\n        .footer-section a {\r\n            color: #ddd;\r\n            text-decoration: none;\r\n        }\r\n\r\n        .footer-section a:hover {\r\n            color: var(--primary-color);\r\n        }\r\n\r\n        .footer-bottom {\r\n            text-align: center;\r\n            padding-top: 20px;\r\n            border-top: 1px solid rgba(255, 255, 255, 0.1);\r\n        }\r\n\r\n        .footer-bottom a {\r\n            color: inherit;\r\n            text-decoration: none;\r\n        }\r\n\r\n        \u002F* 响应式设计 *\u002F\r\n        @media (max-width: 768px) {\r\n            .nav-links {\r\n                display: none;\r\n            }\r\n\r\n            .hero h1 {\r\n                font-size: 2rem;\r\n            }\r\n\r\n            .about {\r\n                grid-template-columns: 1fr;\r\n            }\r\n\r\n            .about-image {\r\n                height: 250px;\r\n            }\r\n        }\r\n\r\n        \u002F* 移动菜单 *\u002F\r\n        .mobile-menu-btn {\r\n            display: none;\r\n            font-size: 1.5rem;\r\n            background: none;\r\n            border: none;\r\n            color: var(--text-color);\r\n            cursor: pointer;\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            .mobile-menu-btn {\r\n                display: block;\r\n            }\r\n\r\n            .nav-links.active {\r\n                display: flex;\r\n                flex-direction: column;\r\n                position: absolute;\r\n                top: 80px;\r\n                left: 0;\r\n                width: 100%;\r\n                background-color: var(--header-bg);\r\n                padding: 20px;\r\n                box-shadow: var(--shadow);\r\n            }\r\n\r\n            .nav-links.active li {\r\n                margin: 10px 0;\r\n            }\r\n        }\r\n    \u003C\u002Fstyle>\r\n\u003C\u002Fhead>\r\n\u003Cbody>\r\n\u003C!-- 导航栏 -->\r\n\u003Cheader>\r\n    \u003Cdiv class=\"container navbar\">\r\n        \u003Cdiv class=\"logo\">\r\n            \u003Ci class=\"fas fa-tint\">\u003C\u002Fi>\r\n            \u003Cspan>清泉之家\u003C\u002Fspan>\r\n        \u003C\u002Fdiv>\r\n        \u003Cbutton class=\"mobile-menu-btn\">\r\n            \u003Ci class=\"fas fa-bars\">\u003C\u002Fi>\r\n        \u003C\u002Fbutton>\r\n        \u003Cul class=\"nav-links\">\r\n            \u003Cli>\u003Ca href=\"#home\">首页\u003C\u002Fa>\u003C\u002Fli>\r\n            \u003Cli>\u003Ca href=\"#products\">产品\u003C\u002Fa>\u003C\u002Fli>\r\n            \u003Cli>\u003Ca href=\"#services\">服务\u003C\u002Fa>\u003C\u002Fli>\r\n            \u003Cli>\u003Ca href=\"#about\">关于我们\u003C\u002Fa>\u003C\u002Fli>\r\n            \u003Cli>\u003Ca href=\"#contact\">联系我们\u003C\u002Fa>\u003C\u002Fli>\r\n            \u003Cli>\r\n                \u003Cbutton class=\"theme-toggle\">\r\n                    \u003Ci class=\"fas fa-moon\">\u003C\u002Fi>\r\n                \u003C\u002Fbutton>\r\n            \u003C\u002Fli>\r\n        \u003C\u002Ful>\r\n    \u003C\u002Fdiv>\r\n\u003C\u002Fheader>\r\n\r\n\u003C!-- 主要内容 -->\r\n\u003Cdiv class=\"container\">\r\n    \u003C!-- 英雄区域 -->\r\n    \u003Csection class=\"hero\" id=\"home\">\r\n        \u003Ch1>优质桶装水，直送到家\u003C\u002Fh1>\r\n        \u003Cp>我们提供各种高品质桶装水，免费配送上门，服务社区十年，值得信赖\u003C\u002Fp>\r\n        \u003Ca href=\"#products\" class=\"btn\">立即订购\u003C\u002Fa>\r\n    \u003C\u002Fsection>\r\n\r\n    \u003C!-- 产品区域 -->\r\n    \u003Csection id=\"products\">\r\n        \u003Ch2 class=\"section-title\">我们的产品\u003C\u002Fh2>\r\n        \u003Cdiv class=\"products\">\r\n\r\n            \u003Cdiv class=\"product-card\">\r\n                \u003Cdiv class=\"product-img\">\r\n                    \u003Ci class=\"fas fa-water\">\u003C\u002Fi>\r\n                \u003C\u002Fdiv>\r\n                \u003Cdiv class=\"product-info\">\r\n                    \u003Ch3>纯净水\u003C\u002Fh3>\r\n                    \u003Cp>经过多道工序净化，口感清爽，适合日常饮用\u003C\u002Fp>\r\n                    \u003Cdiv class=\"price\">¥15\u002F桶\u003C\u002Fdiv>\r\n                    \u003Ca href=\"#\" class=\"btn\">订购\u003C\u002Fa>\r\n                \u003C\u002Fdiv>\r\n            \u003C\u002Fdiv>\r\n\r\n            \u003Cdiv class=\"product-card\">\r\n                \u003Cdiv class=\"product-img\">\r\n                    \u003Ci class=\"fas fa-water\">\u003C\u002Fi>\r\n                \u003C\u002Fdiv>\r\n                \u003Cdiv class=\"product-info\">\r\n                    \u003Ch3>矿泉水\u003C\u002Fh3>\r\n                    \u003Cp>源自天然泉水，富含矿物质，健康养生\u003C\u002Fp>\r\n                    \u003Cdiv class=\"price\">¥20\u002F桶\u003C\u002Fdiv>\r\n                    \u003Ca href=\"#\" class=\"btn\">订购\u003C\u002Fa>\r\n                \u003C\u002Fdiv>\r\n            \u003C\u002Fdiv>\r\n\r\n            \u003Cdiv class=\"product-card\">\r\n                \u003Cdiv class=\"product-img\">\r\n                    \u003Ci class=\"fas fa-water\">\u003C\u002Fi>\r\n                \u003C\u002Fdiv>\r\n                \u003Cdiv class=\"product-info\">\r\n                    \u003Ch3>山泉水\u003C\u002Fh3>\r\n                    \u003Cp>采集自深山泉水，天然无污染，甘甜可口\u003C\u002Fp>\r\n                    \u003Cdiv class=\"price\">¥25\u002F桶\u003C\u002Fdiv>\r\n                    \u003Ca href=\"#\" class=\"btn\">订购\u003C\u002Fa>\r\n                \u003C\u002Fdiv>\r\n            \u003C\u002Fdiv>\r\n\r\n            \u003Cdiv class=\"product-card\">\r\n                \u003Cdiv class=\"product-img\">\r\n                    \u003Ci class=\"fas fa-water\">\u003C\u002Fi>\r\n                \u003C\u002Fdiv>\r\n                \u003Cdiv class=\"product-info\">\r\n                    \u003Ch3>纯净水\u003C\u002Fh3>\r\n                    \u003Cp>经过多道工序净化，口感清爽，适合日常饮用\u003C\u002Fp>\r\n                    \u003Cdiv class=\"price\">¥15\u002F桶\u003C\u002Fdiv>\r\n                    \u003Ca href=\"#\" class=\"btn\">订购\u003C\u002Fa>\r\n                \u003C\u002Fdiv>\r\n            \u003C\u002Fdiv>\r\n\r\n            \u003Cdiv class=\"product-card\">\r\n                \u003Cdiv class=\"product-img\">\r\n                    \u003Ci class=\"fas fa-water\">\u003C\u002Fi>\r\n                \u003C\u002Fdiv>\r\n                \u003Cdiv class=\"product-info\">\r\n                    \u003Ch3>矿泉水\u003C\u002Fh3>\r\n                    \u003Cp>源自天然泉水，富含矿物质，健康养生\u003C\u002Fp>\r\n                    \u003Cdiv class=\"price\">¥20\u002F桶\u003C\u002Fdiv>\r\n                    \u003Ca href=\"#\" class=\"btn\">订购\u003C\u002Fa>\r\n                \u003C\u002Fdiv>\r\n            \u003C\u002Fdiv>\r\n\r\n            \u003Cdiv class=\"product-card\">\r\n                \u003Cdiv class=\"product-img\">\r\n                    \u003Ci class=\"fas fa-water\">\u003C\u002Fi>\r\n                \u003C\u002Fdiv>\r\n                \u003Cdiv class=\"product-info\">\r\n                    \u003Ch3>山泉水\u003C\u002Fh3>\r\n                    \u003Cp>采集自深山泉水，天然无污染，甘甜可口\u003C\u002Fp>\r\n                    \u003Cdiv class=\"price\">¥25\u002F桶\u003C\u002Fdiv>\r\n                    \u003Ca href=\"#\" class=\"btn\">订购\u003C\u002Fa>\r\n                \u003C\u002Fdiv>\r\n            \u003C\u002Fdiv>\r\n        \u003C\u002Fdiv>\r\n    \u003C\u002Fsection>\r\n\r\n    \u003C!-- 服务区域 -->\r\n    \u003Csection id=\"services\">\r\n        \u003Ch2 class=\"section-title\">我们的服务\u003C\u002Fh2>\r\n        \u003Cdiv class=\"services\">\r\n            \u003Cdiv class=\"service-card\">\r\n                \u003Cdiv class=\"service-icon\">\r\n                    \u003Ci class=\"fas fa-truck\">\u003C\u002Fi>\r\n                \u003C\u002Fdiv>\r\n                \u003Ch3>快速配送\u003C\u002Fh3>\r\n                \u003Cp>下单后2小时内送达，确保您及时用水\u003C\u002Fp>\r\n            \u003C\u002Fdiv>\r\n\r\n            \u003Cdiv class=\"service-card\">\r\n                \u003Cdiv class=\"service-icon\">\r\n                    \u003Ci class=\"fas fa-recycle\">\u003C\u002Fi>\r\n                \u003C\u002Fdiv>\r\n                \u003Ch3>空桶回收\u003C\u002Fh3>\r\n                \u003Cp>环保回收空桶，清洗消毒后循环使用\u003C\u002Fp>\r\n            \u003C\u002Fdiv>\r\n\r\n            \u003Cdiv class=\"service-card\">\r\n                \u003Cdiv class=\"service-icon\">\r\n                    \u003Ci class=\"fas fa-headset\">\u003C\u002Fi>\r\n                \u003C\u002Fdiv>\r\n                \u003Ch3>全天候服务\u003C\u002Fh3>\r\n                \u003Cp>全天候客服支持，解决您的用水问题\u003C\u002Fp>\r\n            \u003C\u002Fdiv>\r\n        \u003C\u002Fdiv>\r\n    \u003C\u002Fsection>\r\n\r\n    \u003C!-- 关于我们 -->\r\n    \u003Csection id=\"about\">\r\n        \u003Ch2 class=\"section-title\">关于我们\u003C\u002Fh2>\r\n        \u003Cdiv class=\"about\">\r\n            \u003Cdiv class=\"about-content\">\r\n                \u003Ch3>十年社区服务经验\u003C\u002Fh3>\r\n                \u003Cp>\r\n                    清泉之家成立于2013年，一直致力于为社区居民提供优质桶装水和配送服务。我们与多个优质水源地合作，确保水质安全健康。\u003C\u002Fp>\r\n                \u003Cp>我们的配送团队熟悉社区每个角落，能够快速响应您的订单，确保您及时用上放心水。\u003C\u002Fp>\r\n                \u003Ca href=\"#contact\" class=\"btn\">联系我们\u003C\u002Fa>\r\n            \u003C\u002Fdiv>\r\n            \u003Cdiv class=\"about-image\">\r\n                \u003Ci class=\"fas fa-store\">\u003C\u002Fi>\r\n            \u003C\u002Fdiv>\r\n        \u003C\u002Fdiv>\r\n    \u003C\u002Fsection>\r\n\u003C\u002Fdiv>\r\n\r\n\u003C!-- 页脚 -->\r\n\u003Cfooter id=\"contact\">\r\n    \u003Cdiv class=\"container\">\r\n        \u003Cdiv class=\"footer-content\">\r\n            \u003Cdiv class=\"footer-section\">\r\n                \u003Ch3>联系我们\u003C\u002Fh3>\r\n                \u003Cp>\u003Ci class=\"fas fa-map-marker-alt\">\u003C\u002Fi> 地址：佛山市南海区清泉路123-1号\u003C\u002Fp>\r\n                \u003Cp>\u003Ci class=\"fas fa-phone\">\u003C\u002Fi> 电话：100-8888-6666\u003C\u002Fp>\r\n                \u003Cp>\u003Ci class=\"fab fa-weixin\">\u003C\u002Fi> 微信：wx_8888_6666\u003C\u002Fp>\r\n            \u003C\u002Fdiv>\r\n\r\n            \u003Cdiv class=\"footer-section\">\r\n                \u003Ch3>营业时间\u003C\u002Fh3>\r\n                \u003Cp>周一至周五: 8:00 - 20:00\u003C\u002Fp>\r\n                \u003Cp>周六至周日: 9:00 - 18:00\u003C\u002Fp>\r\n            \u003C\u002Fdiv>\r\n\r\n            \u003Cdiv class=\"footer-section\">\r\n                \u003Ch3>快速链接\u003C\u002Fh3>\r\n                \u003Cul>\r\n                    \u003Cli>\u003Ca href=\"#home\">首页\u003C\u002Fa>\u003C\u002Fli>\r\n                    \u003Cli>\u003Ca href=\"#products\">产品\u003C\u002Fa>\u003C\u002Fli>\r\n                    \u003Cli>\u003Ca href=\"#services\">服务\u003C\u002Fa>\u003C\u002Fli>\r\n                    \u003Cli>\u003Ca href=\"#about\">关于我们\u003C\u002Fa>\u003C\u002Fli>\r\n                \u003C\u002Ful>\r\n            \u003C\u002Fdiv>\r\n        \u003C\u002Fdiv>\r\n\r\n        \u003Cdiv class=\"footer-bottom\">\r\n            \u003Cp>© \u003Ca href=\"https:\u002F\u002Fwww.tomde.cloud\" target=\"_blank\">本站由www.tomde.cloud提供\u003C\u002Fa>\u003C\u002Fp>\r\n        \u003C\u002Fdiv>\r\n    \u003C\u002Fdiv>\r\n\u003C\u002Ffooter>\r\n\r\n\u003Cscript>\r\n    \u002F\u002F 暗黑模式切换\r\n    const dm = localStorage.getItem('dark-mode')\r\n    const themeToggle = document.querySelector('.theme-toggle');\r\n    const themeIcon = document.querySelector('.theme-toggle i');\r\n\r\n    if (dm && dm === 'true') {\r\n        document.body.classList.toggle('dark-mode');\r\n        themeIcon.classList.remove('fa-moon');\r\n        themeIcon.classList.add('fa-sun');\r\n    }\r\n\r\n    themeToggle.addEventListener('click', () => {\r\n        document.body.classList.toggle('dark-mode');\r\n\r\n        if (document.body.classList.contains('dark-mode')) {\r\n            themeIcon.classList.remove('fa-moon');\r\n            themeIcon.classList.add('fa-sun');\r\n            localStorage.setItem('dark-mode', 'true');\r\n        } else {\r\n            themeIcon.classList.remove('fa-sun');\r\n            themeIcon.classList.add('fa-moon');\r\n            localStorage.setItem('dark-mode', 'false');\r\n        }\r\n    });\r\n\r\n    \u002F\u002F 移动端菜单\r\n    const mobileMenuBtn = document.querySelector('.mobile-menu-btn');\r\n    const navLinks = document.querySelector('.nav-links');\r\n\r\n    mobileMenuBtn.addEventListener('click', () => {\r\n        navLinks.classList.toggle('active');\r\n\r\n        if (navLinks.classList.contains('active')) {\r\n            mobileMenuBtn.innerHTML = '\u003Ci class=\"fas fa-times\">\u003C\u002Fi>';\r\n        } else {\r\n            mobileMenuBtn.innerHTML = '\u003Ci class=\"fas fa-bars\">\u003C\u002Fi>';\r\n        }\r\n    });\r\n\r\n    \u002F\u002F 平滑滚动\r\n    document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\r\n        anchor.addEventListener('click', function (e) {\r\n            e.preventDefault();\r\n\r\n            const targetId = this.getAttribute('href');\r\n            if (targetId === '#') return;\r\n\r\n            const targetElement = document.querySelector(targetId);\r\n            if (targetElement) {\r\n                window.scrollTo({\r\n                    top: targetElement.offsetTop - 80,\r\n                    behavior: 'smooth'\r\n                });\r\n\r\n                \u002F\u002F 关闭移动端菜单\r\n                if (navLinks.classList.contains('active')) {\r\n                    navLinks.classList.remove('active');\r\n                    mobileMenuBtn.innerHTML = '\u003Ci class=\"fas fa-bars\">\u003C\u002Fi>';\r\n                }\r\n            }\r\n        });\r\n    });\r\n\u003C\u002Fscript>\r\n\u003C\u002Fbody>\r\n\u003C\u002Fhtml>\r\n```\r\n预览地址：[https:\u002F\u002Fpreview.yunbimo.com\u002F5e78dc39-a4ff-45fe-b6b9-419113e733e1](https:\u002F\u002Fpreview.yunbimo.com\u002F5e78dc39-a4ff-45fe-b6b9-419113e733e1)\r\n","2026-07-08T23:43:40.000Z","2026-07-31T07:40:48.560Z",1785520919183]