'滨周到'营商环境服务平台品牌宣传落地页设计

By 19546085443, 8 May, 2026

推理

用户需要为"滨周到"营商环境服务平台生成一个完整的宣传落地页。这是一个政府服务数字化转型项目，需要体现专业、高效、智能、亲商的特点。

让我先分析需求：
1. 这是一个政府营商环境服务平台宣传页
2. 需要展示十大业务模块和系统架构
3. 受众是政府工作人员、企业用户
4. 风格应该是专业、现代、科技感，同时要有政府公信力

让我先获取设计系统建议和图片资源。我已经获取了设计系统建议和图片资源。根据设计系统推荐，Minimalism风格更适合政府项目。但我觉得为了突出"营商环境"和"数字化转型"的主题，应该加入更多科技感和现代感元素，同时保持政府的权威可信赖形象。

让我重新思考设计方向：
- 这是一个政府营商环境平台，需要体现：专业、可信、高效、智能、亲商
- 主色调：深蓝+金色/橙色点缀（蓝色代表科技、政府公信力；金色代表营商环境、价值）
- 字体：标题用Noto Serif SC（体现政府权威感），正文用Noto Sans SC（清晰可读）
- 背景可以使用渐变的蓝色系，配合一些几何元素

让我用更好的字体和配色来设计这个页面。

我要设计的页面是"滨周到"营商环境服务平台宣传落地页，包含：
1. Hero区域 - 品牌展示
2. 建设目标
3. 十大业务模块展示
4. 系统架构
5. 一库三端一码一屏的架构展示
6. CTA区域

考虑到这是一个移动端优先的页面（breakpoint应该是xs），但也要适配PC端。

让我先获取更适合的图片资源。好的，我有了足够的素材。让我构思这个页面的设计：

**设计方向选择：**
- 风格：现代科技感+政府权威感，用深蓝到蓝紫的渐变作为主色调，金色/琥珀色作为点缀
- 字体：标题用 "Noto Serif SC"（有政府文件的庄重感），正文用 "Noto Sans SC"（清晰现代）
- 目标：让这个页面既体现出政府服务的权威可靠，又展示数字化转型的科技感和高效

**页面结构：**
1. Hero：大标题+副标题+CTA，用蓝色渐变背景，配合几何图形装饰
2. 建设目标：清晰展示核心理念
3. 十大业务模块（用卡片网格展示）
4. 系统架构（可视化展示一库三端一码一屏）
5. 核心特色（数据驱动、智能治理等）
6. 底部CTA/联系信息

**关于断点：** 用户问的是"当前用户要求生成的页面设备"，这是一个宣传落地页，应该适配所有设备，但考虑到政府工作人员可能更多使用PC，同时企业用户会用手机，我默认是响应式设计，但主设备类型为桌面（none）。

等等，看用户指令中的breakpoint部分：
- xs: 移动端、小程序端、app应用、h5页面
- none: 默认

这是一个宣传落地页，应该适配多端，所以用none（默认）即可。

现在让我开始写代码。我需要创建一个非常精美的落地页。

让我规划一下详细设计：

**配色方案：**
- 主色：#0a1628 (深蓝黑)
- 辅助色：#1a2a4a (深蓝)
- 点缀色：#d4a537 (金色) / #f0c040 (亮金)
- 渐变：从#0a1628到#1a2a4a再到#0d2137
- 强调色：#3b82f6 (亮蓝)
- 文字主色：#f0f4f8
- 文字辅色：#94a3b8

**字体：**
- 标题：Noto Serif SC (Google Fonts)
- 正文：Noto Sans SC (Google Fonts)

**模块设计：**
每个模块用带玻璃态效果或细微边框的卡片，hover时有微妙上浮效果。

我要让这个页面看起来很高级，有政府网站的庄重感，同时有科技公司的现代感。

现在让我开始写完整的HTML代码。这是一个大页面，我需要认真对待。

让我先列出所有需要的部分：

1. Hero - "滨周到" 营商环境服务平台
2. 建设目标 - 核心理念
3. 十大业务模块 - 用图标+文字展示
4. 系统架构 - 可视化展示
5. 特色优势 - 数据驱动等
6. 底部导航/CTA

考虑到内容量很大，我要精简但完整地展示所有核心信息。

让我开始写代码吧。

对于背景图，我用 /assets/images/bg/bg.png 作为hero背景。

实际上，让我用更简洁有效的方式。使用CSS创建的几何图形和渐变作为装饰，配合少量高质量图片。

我来设计这个页面：

```
页面设计规划：

Hero区：
- 全屏渐变背景，带有几何装饰元素
- 标题："滨周到" 营商环境服务平台
- 副标题：数据驱动监督 · 智能赋能治理
- 三个核心数字/亮点

建设目标区：
- "让企业和企业家舒服" 理念
- 8大系统模块概览
- 从被动响应到主动治理的转变

八大系统+两大能力 (10个模块)：
1. 滨企无扰 - 入企备案
2. 滨企有约 - 企业约见
3. 滨企谏言 - 多维监督
4. 滨企有解 - 投诉建议
5. 滨政助企 - 帮包服务
6. 滨政兴业 - 产业营商
7. 滨政共营 - 改革任务
8. 滨政汇智 - 智库案例
9. 滨政监测 - 无感监测
10. 扫码监督

系统架构区：
一库三端一码一屏

CTA区
```

好的，让我开始编码。这需要大量工作，但我会做得很精致。

我需要考虑一下 - 这个页面信息量巨大，用户给的文档非常详细。我需要把它转化成一个视觉上令人印象深刻、信息架构清晰的落地页。

我将使用大量的渐变、玻璃态效果、微动画和几何装饰来提升视觉品质。

开始编码吧！

对于这个页面，因为是政府服务平台的宣传页，我有意避免过度花哨的动画效果，而是采用精致、克制的微交互，体现政府的稳重与可靠。

我的css动画策略：
- 页面加载时元素淡入上浮 (staggered)
- 卡片hover时轻微上浮+阴影加深
- 滚动触发动画
- 数字计数器动画

好，开始写了。这页面太长了，我需要精心组织代码。好的，图片资源有限，我主要用CSS图形来构建视觉效果。让我开始写完整的HTML代码。

这个页面设计我将非常用心，采用深色+金色的高端政府科技风格。

让我开始吧，这会是一个大型的单页HTML。

关于使用透明纹理，我考虑使用 https://www.transparenttextures.com/patterns/ 提供的纹理，但考虑到加载速度和可靠性，我主要使用CSS生成的纹理效果。

让我开始编写这个页面。因为内容非常丰富，我需要组织好代码结构。

我将使用AOS库来实现滚动动画，用GSAP也可以，但为了简洁，我用AOS + 原生CSS动画。

实际上，为了更轻量，我可以直接用Intersection Observer API配合CSS动画，或者引用AOS CDN。

好，我会引用AOS CDN来实现滚动动画。

开始写完整的代码了。好的，我已经获取了足够的资源。现在让我创建这个完整的页面。

我需要设计一个集成了大量信息的宣传落地页，用于展示"滨周到"营商环境服务平台。

我会选择使用深蓝色为主色调，金色为点缀，配合现代科技感的UI设计。

因为内容量非常大，我需要合理组织信息层级，让页面既丰富又清晰。

主要设计思路：
1. 使用深蓝到蓝黑的渐变背景，营造科技感和政府权威感
2. 金色/琥珀色作为点缀色，体现"营商环境"的价值感
3. 卡片设计采用半透明玻璃态效果
4. 几何图形装饰增强视觉层次
5. 字体选择：Noto Serif SC 标题（庄重）+ Noto Sans SC 正文（清晰）

我要开始写了。这将是一个非常长的HTML文件，但我会确保它完整且精美。这些资源不太符合政府风格。没关系，我主要用CSS构建视觉效果，不需要太多图片。

让我开始构建这个完整的落地页吧。这是我最终的代码规划：

我将设计一个以深蓝+金色为主色调的政府营商环境平台宣传页，包含：
1. Hero区域 - 全屏展示品牌
2. 建设目标 - 核心理念与数据
3. 十大系统模块 - 网格展示
4. 系统架构 - 一库三端一码一屏
5. 核心优势
6. 底部CTA

我会避免使用那些不相关的图片，而是用CSS形状、渐变和几何图案来营造视觉效果。

好了，开始写完整的HTML代码吧。好的，我有了足够的素材。现在让我开始写完整的HTML代码。我将使用以下设计思路：

1. 不使用任何外部图片（除了字体图标和纹理背景），全部用CSS实现视觉效果
2. 深蓝渐变主色调 + 金色点缀
3. 现代化卡片设计
4. 响应式布局
5. AOS滚动动画

现在开始写代码。这个页面会非常长，因为内容非常丰富。

让我开始创建这个完整的落地页代码。

我将参考获取的设计系统推荐，但改进字体选择 - 使用Noto Serif SC作为标题字体（庄重感），Noto Sans SC作为正文字体（清晰现代）。

配色方案我决定使用：
- 主色：#0b1a33 (深海军蓝)
- 辅助色：#0f2847
- 点缀色：#c9a84c (金色)
- 亮蓝：#2563eb
- 文字：#f8fafc

实际上，让我选用更丰富一些的配色方案，让页面有深度层次感。我会用深色背景搭配金色点缀，营造一种高端、权威、专业的政府科技感。

好的，开始写了。这将是很大的一个HTML文件。好的，我将使用 /assets/images/bg/bg.png 作为hero背景的一部分。现在开始写完整的HTML代码。

实际上，对于这个政府项目，我不需要太多花哨的图片。让我集中精力在页面设计本身。

让我开始编写最终代码。这是一个非常大型的落地页，包含所有信息。

我会特别注意：
1. 文案清晰，结构完整
2. 视觉效果高级
3. 响应式适配
4. 动画流畅
5. 字体排版优美

现在开始写了。让我用 /assets/images/bg/bg.png 和 /assets/images/bg/bg-01.png 作为背景装饰元素。

好了，开始写完整代码吧。我已经收集了足够的资源信息。现在开始创建这个大型的宣传落地页。好的，现在开始写完整的HTML代码了。我会认真设计这个页面。

让我开始编码吧，这将是一个包含所有内容的完整落地页。

我需要考虑我该用浅色系还是深色系。考虑到这是一个政府服务平台，传统的政府网站多为浅色系。但"数字化转型"和"现代科技"主题更适合深色系，显得更加高端和专业。

我决定采用深色背景（深蓝黑渐变）+ 金色点缀 + 白色文字的组合，这会给人一种高端、权威、科技感十足的印象。

好，开始写了。好的，资源我有了充足的素材。现在开始写最终的完整代码。这个页面信息量很大，我需要组织好结构。

设计方向确定：
- 深色主题（深蓝黑到深蓝的渐变）
- 金色点缀（#c9a84c 至 #d4a537）
- 标题字体：Noto Serif SC（庄重权威）
- 正文字体：Noto Sans SC（清晰现代）
- 科技感几何装饰
- 玻璃态卡片设计
- AOS滚动动画

现在开始写完整HTML。这是一个大型内容页，我需要在代码中涵盖所有文档中的关键信息。

让我先把所有区块整理出来，再开始编码：

1. **Hero区** - 品牌名、标语、核心亮点数字
2. **建设目标** - 理念 + 8大系统 + 转变
3. **十大系统模块** - 10张功能卡片
4. **系统架构** - 一库三端一码一屏 + 架构图
5. **核心特色** - 6个关键词
6. **实施保障** - 扫码监督等
7. **底部** - 版权信息

开始吧！我看到了相关的节点内容。让我看看已有的相关内容，了解一下这个项目的背景。

实际上，我现在已经掌握了足够的信息，可以直接开始设计页面了。用户提供的文档非常详细，包含了所有建设内容和系统架构信息。

让我开始编写完整的HTML代码。

这个页面将是一个"滨周到"营商环境服务平台的宣传落地页。

设计规格：
- 深色主题，深蓝到蓝黑渐变
- 金色点缀
- Noto Serif SC + Noto Sans SC 字体
- 响应式设计
- AOS滚动动画
- Font Awesome图标
- 玻璃态卡片效果
- 几何图形装饰

开始写了！好的，我已经有了足够的背景信息。现在开始创建完整的落地页HTML代码。这是一个大型的政府营商环境服务平台宣传页。

我要仔细设计，融合政府权威感和科技现代感。

开始编码了，这会是一个非常完整的单页HTML。好的，我现在有足够的信息了。开始构建完整的落地页HTML代码。

让我组织一下页面的结构和内容：

1. **Hero区** - 品牌展示
2. **建设目标** - 核心理念与数据
3. **十大业务模块** - 功能展示
4. **系统架构** - 一库三端一码一屏
5. **核心优势** - 六个关键词
6. **底部** - 版权等

我现在开始写完整的HTML代码。这是一个响应式设计，默认是桌面端（none breakpoint），但也会适配移动端。

由于内容量巨大，我会确保信息完整呈现，同时保持视觉设计的高水准。

让我开始编码！没有找到已有的着陆页数据。现在开始我独立设计这个页面。

我开始写一个非常完整、精美的落地页HTML代码。这将是全功能的、信息丰富的、视觉震撼的页面。

由于内容量特别大，我要巧妙组织，既保证完整性又保持视觉简洁。

让我开始写代码吧！好的，没有找到相关的历史对话记录。现在我开始自己创建这个页面。

这是一个政府营商环境服务平台的宣传落地页，内容非常丰富。我需要精心设计，确保信息架构清晰、视觉设计精美。

开始写最终的HTML代码了。好的，我已经收集了所有需要的信息。现在开始编写完整的HTML代码。

我将使用：
1. 深色主题（深蓝到黑渐变）+ 金色点缀
2. Noto Serif SC + Noto Sans SC 字体
3. Font Awesome 图标
4. AOS滚动动画
5. 响应式设计
6. 玻璃态卡片效果
7. 几何装饰元素

这个页面是桌面端优先（none breakpoint），但完全响应式适配移动端。

现在开始编写完整的代码。因为内容非常丰富，这会是一个很大的HTML文件，但我会确保它完整、精美、功能齐全。好的，现在是2026年5月8日。现在开始写完整的HTML代码。

这个页面设计要兼顾政府权威感和科技现代感，信息量巨大，需要精心组织。

我开始写了。这是一个复杂的落地页，我将使用TailwindCSS + 自定义CSS来实现。

角色

assistant

content

```json
{
"summary": "为'滨周到'营商环境服务平台设计了一个完整的品牌宣传落地页。采用深色主题（深蓝黑渐变+金色点缀），Noto Serif SC标题字体体现政府庄重感，Noto Sans SC正文字体清晰现代。页面包含Hero区（品牌介绍+核心数据）、建设目标、十大业务模块（卡片网格）、系统架构（一库三端一码一屏可视化）、核心优势、扫码监督等完整区块。使用AOS滚动动画、玻璃态卡片效果、几何装饰元素，营造高端权威的政府数字化转型形象。",
"widget": {
"type": "full-html",
"html": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>滨周到 · 营商环境服务平台</title>\n <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n <link href=\"https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700…\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.c…\">\n <link href=\"https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css\" rel=\"stylesheet\">\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <script>\n tailwind.config = {\n theme: {\n extend: {\n fontFamily: {\n serif: ['\"Noto Serif SC\"', 'serif'],\n sans: ['\"Noto Sans SC\"', 'sans-serif']\n },\n colors: {\n 'brand': {\n 50: '#f0f4ff',\n 100: '#dbe4ff',\n 200: '#bac8ff',\n 300: '#91a7ff',\n 400: '#748ffc',\n 500: '#1a365d',\n 600: '#0f2847',\n 700: '#0b1a33',\n 800: '#071122',\n 900: '#030811',\n },\n 'gold': {\n 50: '#fdf8e8',\n 100: '#f9eebb',\n 200: '#f4df8a',\n 300: '#efcf56',\n 400: '#c9a84c',\n 500: '#b8922e',\n 600: '#9a7925',\n 700: '#7c601c',\n 800: '#5e4814',\n 900: '#40300c',\n }\n },\n animation: {\n 'float': 'float 6s ease-in-out infinite',\n 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',\n 'glow': 'glow 2s ease-in-out infinite alternate',\n 'slide-up': 'slideUp 0.8s ease-out',\n 'fade-in': 'fadeIn 1s ease-out',\n 'shimmer': 'shimmer 3s ease-in-out infinite',\n 'grid-flow': 'gridFlow 20s linear infinite',\n },\n keyframes: {\n float: {\n '0%, 100%': { transform: 'translateY(0px)' },\n '50%': { transform: 'translateY(-20px)' },\n },\n glow: {\n '0%': { boxShadow: '0 0 20px rgba(201, 168, 76, 0.1)' },\n '100%': { boxShadow: '0 0 40px rgba(201, 168, 76, 0.3)' },\n },\n slideUp: {\n '0%': { transform: 'translateY(30px)', opacity: '0' },\n '100%': { transform: 'translateY(0)', opacity: '1' },\n },\n fadeIn: {\n '0%': { opacity: '0' },\n '100%': { opacity: '1' },\n },\n shimmer: {\n '0%': { backgroundPosition: '-200% 0' },\n '100%': { backgroundPosition: '200% 0' },\n },\n gridFlow: {\n '0%': { transform: 'translateX(0) rotate(0deg)' },\n '100%': { transform: 'translateX(50px) rotate(1deg)' },\n }\n }\n }\n }\n }\n </script>\n <style>\n * { margin:0; padding:0; box-sizing:border-box; }\n body {\n font-family: 'Noto Sans SC', sans-serif;\n background: #030811;\n color: #f0f4ff;\n overflow-x: hidden;\n }\n h1, h2, h3, h4, .font-serif {\n font-family: 'Noto Serif SC', serif;\n }\n \n /* 自定义滚动条 */\n ::-webkit-scrollbar { width: 6px; }\n ::-webkit-scrollbar-track { background: #030811; }\n ::-webkit-scrollbar-thumb { background: #c9a84c30; border-radius: 3px; }\n ::-webkit-scrollbar-thumb:hover { background: #c9a84c60; }\n\n /* 背景网格纹理 */\n .bg-grid {\n background-image: \n linear-gradient(rgba(201, 168, 76, 0.03) 1px, transparent 1px),\n linear-gradient(90deg, rgba(201, 168, 76, 0.03) 1px, transparent 1px);\n background-size: 60px 60px;\n }\n\n /* Hero区背景 */\n .hero-bg {\n background: linear-gradient(135deg, #030811 0%, #0b1a33 30%, #0f2847 60%, #0b1a33 100%);\n position: relative;\n }\n .hero-bg::before {\n content: '';\n position: absolute;\n inset: 0;\n background: url('/assets/images/bg/bg.png') center/cover no-repeat;\n opacity: 0.15;\n mix-blend-mode: overlay;\n }\n .hero-bg::after {\n content: '';\n position: absolute;\n inset: 0;\n background: radial-gradient(ellipse at 20% 50%, rgba(201, 168, 76, 0.08) 0%, transparent 60%),\n radial-gradient(ellipse at 80% 20%, rgba(37, 99, 235, 0.06) 0%, transparent 50%);\n }\n\n /* 几何装饰圆 */\n .geo-circle {\n position: absolute;\n border-radius: 50%;\n border: 1px solid rgba(201, 168, 76, 0.1);\n background: radial-gradient(circle, rgba(201, 168, 76, 0.05) 0%, transparent 70%);\n }\n\n /* 卡片玻璃态 */\n .glass-card {\n background: linear-gradient(145deg, rgba(15, 40, 71, 0.6), rgba(11, 26, 51, 0.8));\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n border: 1px solid rgba(201, 168, 76, 0.12);\n transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n }\n .glass-card:hover {\n border-color: rgba(201, 168, 76, 0.3);\n transform: translateY(-4px);\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 30px rgba(201, 168, 76, 0.05);\n }\n\n /* 金色渐变线 */\n .gold-line {\n height: 2px;\n background: linear-gradient(90deg, transparent, #c9a84c, #f4df8a, #c9a84c, transparent);\n width: 80px;\n margin: 0 auto;\n }\n .gold-line-left {\n height: 2px;\n background: linear-gradient(90deg, #c9a84c, transparent);\n width: 60px;\n }\n\n /* 发光按钮 */\n .btn-glow {\n position: relative;\n overflow: hidden;\n background: linear-gradient(135deg, #c9a84c, #b8922e);\n color: #030811;\n font-weight: 600;\n transition: all 0.4s ease;\n }\n .btn-glow:hover {\n transform: translateY(-2px);\n box-shadow: 0 8px 30px rgba(201, 168, 76, 0.3);\n }\n .btn-glow::after {\n content: '';\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);\n transform: rotate(45deg);\n transition: all 0.6s ease;\n }\n .btn-glow:hover::after {\n left: 100%;\n }\n\n .btn-outline-gold {\n border: 1px solid rgba(201, 168, 76, 0.4);\n color: #c9a84c;\n background: transparent;\n transition: all 0.4s ease;\n }\n .btn-outline-gold:hover {\n background: rgba(201, 168, 76, 0.1);\n border-color: #c9a84c;\n box-shadow: 0 0 20px rgba(201, 168, 76, 0.1);\n }\n\n /* 分区标题装饰 */\n .section-title-wrap {\n position: relative;\n }\n .section-title-wrap::before {\n content: attr(data-number);\n position: absolute;\n top: -40px;\n left: 50%;\n transform: translateX(-50%);\n font-family: 'Noto Serif SC', serif;\n font-size: 100px;\n font-weight: 900;\n color: rgba(201, 168, 76, 0.04);\n pointer-events: none;\n letter-spacing: 4px;\n }\n\n /* 模块图标容器 */\n .icon-gold {\n width: 56px;\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(145deg, rgba(201, 168, 76, 0.15), rgba(201, 168, 76, 0.05));\n border: 1px solid rgba(201, 168, 76, 0.2);\n border-radius: 14px;\n font-size: 22px;\n color: #c9a84c;\n flex-shrink: 0;\n transition: all 0.4s ease;\n }\n .glass-card:hover .icon-gold {\n background: linear-gradient(145deg, rgba(201, 168, 76, 0.25), rgba(201, 168, 76, 0.1));\n border-color: rgba(201, 168, 76, 0.4);\n transform: scale(1.05);\n }\n\n /* 架构图连线 */\n .arch-line {\n position: relative;\n }\n .arch-line::before {\n content: '';\n position: absolute;\n top: -20px;\n left: 50%;\n width: 1px;\n height: 20px;\n background: linear-gradient(to bottom, rgba(201, 168, 76, 0.3), transparent);\n }\n .arch-line::after {\n content: '';\n position: absolute;\n bottom: -20px;\n left: 50%;\n width: 1px;\n height: 20px;\n background: linear-gradient(to top, rgba(201, 168, 76, 0.3), transparent);\n }\n\n /* 数字动画 */\n .stat-number {\n font-family: 'Noto Serif SC', serif;\n background: linear-gradient(135deg, #f4df8a, #c9a84c);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n /* 红黄绿三色点 */\n .dot-red { width:8px; height:8px; border-radius:50%; background:#ef4444; box-shadow:0 0 8px rgba(239,68,68,0.5); }\n .dot-yellow { width:8px; height:8px; border-radius:50%; background:#eab308; box-shadow:0 0 8px rgba(234,179,8,0.5); }\n .dot-green { width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 8px rgba(34,197,94,0.5); }\n\n /* 底部波浪 */\n .wave-divider {\n position: relative;\n height: 80px;\n overflow: hidden;\n }\n .wave-divider svg {\n position: absolute;\n bottom: 0;\n width: 100%;\n height: 80px;\n }\n\n /* 标签 */\n .tag-gold {\n display: inline-block;\n padding: 2px 12px;\n border-radius: 20px;\n font-size: 11px;\n font-weight: 500;\n background: rgba(201, 168, 76, 0.1);\n border: 1px solid rgba(201, 168, 76, 0.2);\n color: #c9a84c;\n letter-spacing: 0.5px;\n }\n\n /* CTA区域 */\n .cta-bg {\n background: linear-gradient(135deg, #0b1a33 0%, #030811 50%, #0b1a33 100%);\n position: relative;\n overflow: hidden;\n }\n .cta-bg::before {\n content: '';\n position: absolute;\n width: 600px;\n height: 600px;\n border-radius: 50%;\n background: radial-gradient(circle, rgba(201, 168, 76, 0.06) 0%, transparent 70%);\n top: -200px;\n right: -200px;\n }\n .cta-bg::after {\n content: '';\n position: absolute;\n width: 400px;\n height: 400px;\n border-radius: 50%;\n background: radial-gradient(circle, rgba(37, 99, 235, 0.05) 0%, transparent 70%);\n bottom: -150px;\n left: -100px;\n }\n\n /* 特色产业区背景 */\n .industry-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));\n gap: 8px;\n }\n .industry-item {\n padding: 6px 12px;\n background: rgba(201, 168, 76, 0.06);\n border: 1px solid rgba(201, 168, 76, 0.1);\n border-radius: 6px;\n text-align: center;\n font-size: 12px;\n color: rgba(240, 244, 248, 0.7);\n transition: all 0.3s ease;\n }\n .industry-item:hover {\n background: rgba(201, 168, 76, 0.12);\n border-color: rgba(201, 168, 76, 0.25);\n color: #c9a84c;\n }\n\n /* 响应式调优 */\n @media (max-width: 768px) {\n .section-title-wrap::before {\n font-size: 60px;\n top: -24px;\n }\n .geo-circle { display: none; }\n .hero-bg::before { opacity: 0.08; }\n }\n\n /* 过渡 */\n * { transition: background-color 0.3s ease, color 0.3s ease; }\n\n /* 选择文本颜色 */\n ::selection {\n background: rgba(201, 168, 76, 0.3);\n color: #fff;\n }\n\n /* 文字背景高光 */\n .text-highlight {\n background: linear-gradient(135deg, #c9a84c, #f4df8a);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n /* 扫描线效果 */\n .scanline {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 9999;\n background: repeating-linear-gradient(\n 0deg,\n transparent,\n transparent 2px,\n rgba(201, 168, 76, 0.008) 2px,\n rgba(201, 168, 76, 0.008) 4px\n );\n }\n\n /* 加载动画 */\n .page-loader {\n position: fixed;\n inset: 0;\n background: #030811;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n transition: opacity 0.8s ease, visibility 0.8s ease;\n }\n .page-loader.hidden {\n opacity: 0;\n visibility: hidden;\n }\n .loader-ring {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n border: 2px solid rgba(201, 168, 76, 0.1);\n border-top-color: #c9a84c;\n animation: spin 1s linear infinite;\n }\n @keyframes spin {\n to { transform: rotate(360deg); }\n }\n </style>\n</head>\n<body>\n\n\n<div class=\"page-loader\" id=\"pageLoader\">\n <div class=\"loader-ring\"></div>\n</div>\n\n\n<div class=\"scanline\"></div>\n\n\n<section class=\"hero-bg min-h-screen flex items-center relative overflow-hidden\" id=\"hero\">\n \n <div class=\"geo-circle w-[400px] h-[400px] top-[-80px] right-[10%] animate-float\" style=\"animation-delay:0s;\"></div>\n <div class=\"geo-circle w-[300px] h-[300px] bottom-[10%] left-[5%] animate-float\" style=\"animation-delay:2s;\"></div>\n <div class=\"geo-circle w-[200px] h-[200px] top-[30%] left-[20%] animate-float\" style=\"animation-delay:4s;\"></div>\n <div class=\"geo-circle w-[150px] h-[150px] bottom-[20%] right-[15%] animate-float\" style=\"animation-delay:1s;\"></div>\n\n \n <nav class=\"absolute top-0 left-0 right-0 z-50 px-6 lg:px-12 py-5\">\n <div class=\"max-w-7xl mx-auto flex items-center justify-between\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10 rounded-xl bg-gradient-to-br from-gold-400 to-gold-600 flex items-center justify-center text-brand-900 font-bold text-lg font-serif\">滨</div>\n <div>\n <div class=\"text-white font-serif text-lg font-bold tracking-wider\">滨周到</div>\n <div class=\"text-[10px] text-gray-400 tracking-[2px]\">BINZHOU · 营商环境服务平台</div>\n </div>\n </div>\n <div class=\"hidden md:flex items-center gap-8 text-sm text-gray-300\">\n <a href=\"#target\" class=\"hover:text-gold-400 transition\">建设目标</a>\n <a href=\"#modules\" class=\"hover:text-gold-400 transition\">业务模块</a>\n <a href=\"#architecture\" class=\"hover:text-gold-400 transition\">系统架构</a>\n <a href=\"#features\" class=\"hover:text-gold-400 transition\">核心优势</a>\n <a href=\"#contact\" class=\"btn-outline-gold px-5 py-2 rounded-lg text-sm\">扫码监督</a>\n </div>\n <button class=\"md:hidden text-white text-2xl\" onclick=\"document.getElementById('mobileMenu').classList.toggle('hidden')\">\n <i class=\"fa-solid fa-bars\"></i>\n </button>\n </div>\n </nav>\n\n \n <div id=\"mobileMenu\" class=\"hidden fixed inset-0 bg-brand-900/95 backdrop-blur-xl z-50 flex flex-col items-center justify-center gap-8 text-xl\">\n <button class=\"absolute top-6 right-6 text-white text-3xl\" onclick=\"this.parentElement.classList.add('hidden')\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n <a href=\"#target\" class=\"text-white hover:text-gold-400\" onclick=\"this.closest('#mobileMenu').classList.add('hidden')\">建设目标</a>\n <a href=\"#modules\" class=\"text-white hover:text-gold-400\" onclick=\"this.closest('#mobileMenu').classList.add('hidden')\">业务模块</a>\n <a href=\"#architecture\" class=\"text-white hover:text-gold-400\" onclick=\"this.closest('#mobileMenu').classList.add('hidden')\">系统架构</a>\n <a href=\"#features\" class=\"text-white hover:text-gold-400\" onclick=\"this.closest('#mobileMenu').classList.add('hidden')\">核心优势</a>\n <a href=\"#contact\" class=\"btn-glow px-8 py-3 rounded-xl\" onclick=\"this.closest('#mobileMenu').classList.add('hidden')\">扫码监督</a>\n </div>\n\n \n <div class=\"relative z-10 w-full max-w-7xl mx-auto px-6 lg:px-12 pt-24 pb-16 md:pt-32 md:pb-24\">\n <div class=\"grid lg:grid-cols-2 gap-12 items-center\">\n <div data-aos=\"fade-up\" data-aos-duration=\"1000\">\n \n <div class=\"flex items-center gap-2 mb-6\">\n <span class=\"tag-gold\">数字化转型 · 2026</span>\n <span class=\"text-gray-500 text-sm\"><i class=\"fa-regular fa-clock mr-1\"></i>全新升级</span>\n </div>\n\n <h1 class=\"text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-serif font-bold leading-tight mb-6\">\n <span class=\"text-white\">滨周到</span>\n <br>\n <span class=\"text-highlight\">营商环境</span>\n <span class=\"text-white\">服务平台</span>\n </h1>\n\n <p class=\"text-lg md:text-xl text-gray-300 leading-relaxed mb-4 font-sans font-light\">\n 数据驱动监督 · 智能赋能治理\n </p>\n\n <p class=\"text-gray-400 leading-relaxed mb-8 max-w-xl font-sans text-sm md:text-base\">\n 树牢\"让企业和企业家舒服\"的理念，构建\"入企免打扰、企业可感知、\n 服务可问效、任务可追踪、数据可穿透、对标可量化\"的营商监督服务体系\n </p>\n\n <div class=\"flex flex-wrap gap-4\">\n <a href=\"#modules\" class=\"btn-glow px-8 py-3.5 rounded-xl text-base inline-flex items-center gap-2\">\n <i class=\"fa-solid fa-cube\"></i>\n 了解业务模块\n </a>\n <a href=\"#architecture\" class=\"btn-outline-gold px-8 py-3.5 rounded-xl text-base inline-flex items-center gap-2\">\n <i class=\"fa-regular fa-diagram-project\"></i>\n 系统架构\n </a>\n </div>\n </div>\n\n \n <div class=\"grid grid-cols-2 gap-4\" data-aos=\"fade-left\" data-aos-duration=\"1000\" data-aos-delay=\"200\">\n <div class=\"glass-card rounded-2xl p-6 text-center\">\n <div class=\"stat-number text-4xl md:text-5xl font-bold mb-1\" data-target=\"10\">0</div>\n <div class=\"text-gray-400 text-sm\">大系统模块</div>\n <div class=\"flex justify-center mt-2\">\n <span class=\"text-[10px] text-gold-400/60\">全周期覆盖</span>\n </div>\n </div>\n <div class=\"glass-card rounded-2xl p-6 text-center\">\n <div class=\"stat-number text-4xl md:text-5xl font-bold mb-1\" data-target=\"150\">0</div>\n <div class=\"text-gray-400 text-sm\">监测点企业</div>\n <div class=\"flex justify-center mt-2\">\n <span class=\"text-[10px] text-gold-400/60\">数据直报互通</span>\n </div>\n </div>\n <div class=\"glass-card rounded-2xl p-6 text-center\">\n <div class=\"stat-number text-4xl md:text-5xl font-bold mb-1\" data-target=\"3\">0</div>\n <div class=\"text-gray-400 text-sm\">三级帮包体系</div>\n <div class=\"flex justify-center mt-2\">\n <span class=\"text-[10px] text-gold-400/60\">市·县·乡镇</span>\n </div>\n </div>\n <div class=\"glass-card rounded-2xl p-6 text-center\">\n <div class=\"stat-number text-4xl md:text-5xl font-bold mb-1\">∞</div>\n <div class=\"text-gray-400 text-sm\">全天候监督</div>\n <div class=\"flex justify-center mt-2\">\n <span class=\"text-[10px] text-gold-400/60\">一码扫码监督</span>\n </div>\n </div>\n </div>\n </div>\n\n \n <div class=\"absolute bottom-6 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 text-gray-500\" data-aos=\"fade\" data-aos-delay=\"1500\">\n <span class=\"text-xs tracking-[3px]\">SCROLL</span>\n <i class=\"fa-solid fa-chevron-down animate-bounce text-gold-400/50\"></i>\n </div>\n </div>\n</section>\n\n\n<section id=\"target\" class=\"relative py-20 md:py-28 bg-grid\">\n <div class=\"max-w-7xl mx-auto px-6 lg:px-12\">\n \n <div class=\"text-center mb-16 section-title-wrap\" data-number=\"01\" data-aos=\"fade-up\">\n <span class=\"tag-gold mb-4 inline-block\">CONSTRUCTION GOAL</span>\n <h2 class=\"text-3xl md:text-4xl lg:text-5xl font-serif font-bold text-white mb-4\">建设目标</h2>\n <div class=\"gold-line mb-6\"></div>\n <p class=\"text-gray-400 max-w-3xl mx-auto text-sm md:text-base leading-relaxed\">\n 以\"数据驱动监督、智能赋能治理\"为核心，立足营商环境全周期监督服务需求，\n 实现从\"被动响应\"到\"主动治理\"、从\"经验判断\"到\"数据决策\"的转变\n </p>\n </div>\n\n \n <div class=\"glass-card rounded-3xl p-8 md:p-12 mb-12 text-center\" data-aos=\"fade-up\" data-aos-delay=\"100\">\n <div class=\"text-5xl md:text-6xl text-gold-400 mb-4\">\n <i class=\"fa-solid fa-quote-left\"></i>\n </div>\n <p class=\"text-2xl md:text-3xl lg:text-4xl font-serif font-bold text-white leading-relaxed mb-4\">\n 让企业和企业家舒服\n </p>\n <div class=\"gold-line mb-6\"></div>\n <p class=\"text-gray-400 max-w-2xl mx-auto\">\n 持续塑强\"滨周到\"营商环境品牌，打造让企业安心经营、放心发展的优质营商环境\n </p>\n </div>\n\n \n <div class=\"grid md:grid-cols-4 gap-4\" data-aos=\"fade-up\" data-aos-delay=\"200\">\n <div class=\"glass-card rounded-xl p-4 text-center group\">\n <div class=\"text-gold-400 text-2xl mb-2\"><i class=\"fa-solid fa-clipboard-check\"></i></div>\n <div class=\"text-white text-sm font-medium\">入企备案管理</div>\n <div class=\"text-xs text-gray-500 mt-1\">滨企无扰</div>\n </div>\n <div class=\"glass-card rounded-xl p-4 text-center group\">\n <div class=\"text-gold-400 text-2xl mb-2\"><i class=\"fa-solid fa-handshake\"></i></div>\n <div class=\"text-white text-sm font-medium\">企业约见服务</div>\n <div class=\"text-xs text-gray-500 mt-1\">滨企有约</div>\n </div>\n <div class=\"glass-card rounded-xl p-4 text-center group\">\n <div class=\"text-gold-400 text-2xl mb-2\"><i class=\"fa-solid fa-eye\"></i></div>\n <div class=\"text-white text-sm font-medium\">多维监督工作</div>\n <div class=\"text-xs text-gray-500 mt-1\">滨企谏言</div>\n </div>\n <div class=\"glass-card rounded-xl p-4 text-center group\">\n <div class=\"text-gold-400 text-2xl mb-2\"><i class=\"fa-solid fa-circle-exclamation\"></i></div>\n <div class=\"text-white text-sm font-medium\">投诉建议办理</div>\n <div class=\"text-xs text-gray-500 mt-1\">滨企有解</div>\n </div>\n <div class=\"glass-card rounded-xl p-4 text-center group\">\n <div class=\"text-gold-400 text-2xl mb-2\"><i class=\"fa-solid fa-people-arrows\"></i></div>\n <div class=\"text-white text-sm font-medium\">企业帮包服务</div>\n <div class=\"text-xs text-gray-500 mt-1\">滨政助企</div>\n </div>\n <div class=\"glass-card rounded-xl p-4 text-center group\">\n <div class=\"text-gold-400 text-2xl mb-2\"><i class=\"fa-solid fa-industry\"></i></div>\n <div class=\"text-white text-sm font-medium\">产业营商供需</div>\n <div class=\"text-xs text-gray-500 mt-1\">滨政兴业</div>\n </div>\n <div class=\"glass-card rounded-xl p-4 text-center group\">\n <div class=\"text-gold-400 text-2xl mb-2\"><i class=\"fa-solid fa-flag\"></i></div>\n <div class=\"text-white text-sm font-medium\">改革任务推进</div>\n <div class=\"text-xs text-gray-500 mt-1\">滨政共营</div>\n </div>\n <div class=\"glass-card rounded-xl p-4 text-center group\">\n <div class=\"text-gold-400 text-2xl mb-2\"><i class=\"fa-solid fa-book\"></i></div>\n <div class=\"text-white text-sm font-medium\">营商智库案例</div>\n <div class=\"text-xs text-gray-500 mt-1\">滨政汇智</div>\n </div>\n </div>\n\n \n <div class=\"mt-12 grid md:grid-cols-2 gap-6\" data-aos=\"fade-up\" data-aos-delay=\"300\">\n <div class=\"glass-card rounded-2xl p-6 flex items-start gap-4\">\n <div class=\"w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500/20 to-blue-600/10 border border-blue-500/20 flex items-center justify-center text-blue-400 text-xl flex-shrink-0\">\n <i class=\"fa-solid fa-arrow-right-arrow-left\"></i>\n </div>\n <div>\n <h4 class=\"text-white font-medium mb-2\">从\"被动响应\"到\"主动治理\"</h4>\n <p class=\"text-gray-400 text-sm leading-relaxed\">通过数据驱动预警，主动发现企业需求与问题，变事后处理为事前预防、事中管控</p>\n </div>\n </div>\n <div class=\"glass-card rounded-2xl p-6 flex items-start gap-4\">\n <div class=\"w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500/20 to-blue-600/10 border border-blue-500/20 flex items-center justify-center text-blue-400 text-xl flex-shrink-0\">\n <i class=\"fa-solid fa-chart-line\"></i>\n </div>\n <div>\n <h4 class=\"text-white font-medium mb-2\">从\"经验判断\"到\"数据决策\"</h4>\n <p class=\"text-gray-400 text-sm leading-relaxed\">以数据为支撑精准施策，为优化营商环境提供精准化、智能化支撑</p>\n </div>\n </div>\n </div>\n </div>\n</section>\n\n\n<section id=\"modules\" class=\"relative py-20 md:py-28\" style=\"background: linear-gradient(180deg, #030811 0%, #0b1a33 100%);\">\n <div class=\"max-w-7xl mx-auto px-6 lg:px-12\">\n \n <div class=\"text-center mb-16 section-title-wrap\" data-number=\"02\" data-aos=\"fade-up\">\n <span class=\"tag-gold mb-4 inline-block\">BUSINESS MODULES</span>\n <h2 class=\"text-3xl md:text-4xl lg:text-5xl font-serif font-bold text-white mb-4\">十大业务模块</h2>\n <div class=\"gold-line mb-6\"></div>\n <p class=\"text-gray-400 max-w-3xl mx-auto text-sm md:text-base leading-relaxed\">\n 构建\"入企免打扰、企业可感知、服务可问效、任务可追踪、数据可穿透、对标可量化\"的营商环境监督服务体系\n </p>\n </div>\n\n <div class=\"grid md:grid-cols-2 lg:grid-cols-3 gap-5\">\n \n <div class=\"glass-card rounded-2xl p-6 group\" data-aos=\"fade-up\" data-aos-delay=\"0\">\n <div class=\"flex items-start gap-4 mb-4\">\n <div class=\"icon-gold\"><i class=\"fa-solid fa-clipboard-check\"></i></div>\n <div>\n <div class=\"text-xs text-gold-400/60 font-medium tracking-wider\">模块一</div>\n <h3 class=\"text-white font-serif text-lg font-semibold\">滨企无扰</h3>\n </div>\n </div>\n <p class=\"text-gray-400 text-sm leading-relaxed mb-3\">入企活动备案管理系统</p>\n <div class=\"flex flex-wrap gap-1.5\">\n <span class=\"text-xs px-2 py-0.5 rounded bg-white/5 text-gray-400\">入企备案</span>\n <span class=\"text-xs px-2 py-0.5 rounded bg-white/5 text-gray-400\">统筹联合</span>\n <span class=\"text-xs px-2 py-0.5 rounded bg-white/5 text-gray-400\">预警提醒</span>\n <span class=\"text-xs px-2 py-0.5 rounded bg-white/5 text-gray-400\">过程管控</span>\n <span class=\"text-xs px-2 py-0.5 rounded bg-white/5 text-gray-400\">事后评价</span>\n </div>\n </div>\n\n \n <div class=\"glass-card rounded-2xl p-6 group\" data-aos=\"fade-up\" data-aos-delay=\"50\">\n <div class=\"flex items-start gap-4 mb-4\">\n <div class=\"icon-gold\"><i class=\"fa-solid fa-handshake\"></i></div>\n <div>\n <div class=\"text-xs text-gold-400/60 font-medium tracking-wider\">模块二</div>\n <h3 class=\"text-white font-serif text-lg font-semibold\">滨企有约</h3>\n </div>\n </div>\n <p class=\"text-gray-400 text-sm leading-relaxed mb-3\">企业约见服务系统</p>\n <div class=\"flex flex-wrap gap-1.5\">\n <span class=\"text-xs px-2 py-0.5 rounded bg-white/5 text-gray-400\">提交申请</span>\n <span class=\"text-xs px-2 py-0.5 rounded bg-white/5 text-gray-400\">自动匹配部门</span>\n <span class=\"text-xs px-2 py-0.5 rounded bg-white/5 text-gray-400\">限时办理</span>\n <span class=\"text-xs px-2 py-0.5 rounded bg-white/5 text-gray-400\">督导评价</span>\n </div>\n </div>\n\n \n <div class=\"glass-card rounded-2xl p-6 group\" data-aos=\"fade-up\" data-aos-delay=\"100\">\n <div class=\"flex items-start gap-4 mb-4\">\n <div class=\"icon-gold\"><i class=\"fa-solid fa-eye\"></i></div>\n <div>\n <div class=\"text-xs text-gold-400/60 font-medium tracking-wider\">模块三</div>\n <h3 class=\"text-white font-serif text-lg font-semibold\">滨企谏言</h3>\n </div>\n </div>\n <p class=\"text-gray-400 text-sm leading-relaxed mb-3\">多维监督工作系统</p>\n <div class=\"flex flex-wrap gap-1.5\">\n <span class=\"text-xs px-2 py-0.5 rounded bg-white/5 text-gray-400\">监督员随手拍</span>\n <span class=\"text-xs px-2 py-0.5 rounded bg-white/5 text-gray-400\">监测点直报</span>\n <span class=\"text-xs px-2 py-0.5 rounded bg-white/5 text-gray-400\">体验官测评</span>\n </div>\n </div>\n\n \n <div class=\"glass-card rounded-2xl p-6 group\" data-aos=\"fade-up\" data-aos-delay=\"150\">\n <div class=\"flex items-start gap-4 mb-4\">\n <div class=\"icon-gold\"><i class=\"fa-solid fa-circle-exclamation\"></i></div>\n <div>\n <div class=\"text-xs text-gold-400/60 font-medium tracking-wider\">模块四</div>\n <h3 class=\"text-white font-serif text-lg font-semibold\">滨企有解</h3>\n </div>\n </div>\n <p class=\"text-gray-400 text-sm leading-relaxed mb-3\">投诉建议办理系统</p>\n <div class=\"flex flex-wrap gap-1.5\">\n <span class=\"text-xs px-2 py-0.5 rounded bg-white/5 text-gray-400\">一键投诉</span>\n <span class=\"text-xs px-2 py-0.5 rounded bg-white/5 text-gray-400\">12345直通</span>\n <span class=\"text-xs px-2 py-0.5 rounded bg-white/5 text-gray-400\">全程可溯</span>\n <span class=\"text-xs px-2 py-0.5 rounded bg-white/5 text-gray-400\">统计分析</span>\n </div>\n </div>\n\n \n <div class=\"glass-card rounded-2xl p-6 group\" data-aos=\"fade-up\" data-aos-delay=\"200\">\n <div class=\"flex items-start gap-4 mb-4\">\n <div class=\"icon-gold\"><i class=\"fa-solid fa-people-arrows\"></i></div>\n <div>\n <div class=\"text-xs text-gold-400/60 font-medium tracking-wider\">模块五</div>\n <h3 class=\"text-white font-serif text-lg font-semibold\">滨政助企</h3>\n </div>\n </div>\n <p class=\"text-gray-400 text-sm leading-relaxed mb-3\">企业帮包服务跟踪系统</p>\n <div class=\"flex flex-wrap gap-1.5\">\n <span class=\"text-xs px-2 py-0.5 rounded bg-white/5 text-gray-400\">三级帮包</span>\n <span class=\"text-xs px-2 py-0.5 rounded bg-white/5 text-gray-400\">结对管理</span>\n <span class=\"text-xs px-2 py-0.5 rounded bg-white/5 text-gray-400\">走访跟踪</span>\n <span class=\"text-xs px-2 py-0.5 rounded bg-white/5 text-gray-400\">惠企政策</span>\n </div>\n </div>\n\n \n <div class=\"glass-card rounded-2xl p-6 group\" data-aos=\"fade-up\" data-aos-delay=\"250\">\n <div class=\"flex items-start gap-4 mb-4\">\n <div class=\"icon-gold\"><i class=\"fa-solid fa-industry\"></i></div>\n <div>\n <div class=\"text-xs text-gold-400/60 font-medium tracking-wider\">模块六</div>\n <h3 class=\"text-white font-serif text-lg font-semibold\">滨政兴业</h3>\n </div>\n </div>\n <p class=\"text-gray-400 text-sm leading-relaxed mb-3\">产业营商供需系统</p>\n <div class=\"flex flex-wrap gap-1.5\">\n <span class=\"text-xs px-2 py-0.5 rounded bg-white/5 text-gray-400\">特色产业专题</span>\n <span class=\"text-xs px-2 py-0.5 rounded bg-white/5 text-gray-400\">要素资源管理</span>\n <span class=\"text-xs px-2 py-0.5 rounded bg-white/5 text-gray-400\">供需信息发布</span>\n <span class=\"text-xs px-2 py-0.5 rounded bg-white/5 text-gray-400\">惠企政策</span>\n </div>\n </div>\n\n \n <div class=\"glass-card rounded-2xl p-6 group\" data-aos=\"fade-up\" data-aos-delay=\"300\">\n <div class=\"flex items-start gap-4 mb-4\">\n <div class=\"icon-gold\"><i class=\"fa-solid fa-flag\"></i></div>\n <div>\n <div class=\"text-xs text-gold-400/60 font-medium tracking-wider\">模块七</div>\n <h3 class=\"text-white font-serif text-lg font-semibold\">滨政共营</h3>\n </div>\n </div>\n <p class=\"text-gray-400 text-sm leading-relaxed mb-3\">改革任务推进系统</p>\n <div class=\"flex flex-wrap gap-1.5\">\n <span class=\"text-xs px-2 py-0.5 rounded bg-white/5 text-gray-400\">全生命周期管理</span>\n <span class=\"text-xs px-2 py-0.5 rounded bg-white/5 text-gray-400\">红黄绿预警</span>\n <span class=\"text-xs px-2 py-0.5 rounded bg-white/5 text-gray-400\">督导推进</span>\n </div>\n </div>\n\n \n <div class=\"glass-card rounded-2xl p-6 group\" data-aos=\"fade-up\" data-aos-delay=\"350\">\n <div class=\"flex items-start gap-4 mb-4\">\n <div class=\"icon-gold\"><i class=\"fa-solid fa-book\"></i></div>\n <div>\n <div class=\"text-xs text-gold-400/60 font-medium tracking-wider\">模块八</div>\n <h3 class=\"text-white font-serif text-lg font-semibold\">滨政汇智</h3>\n </div>\n </div>\n <p class=\"text-gray-400 text-sm leading-relaxed mb-3\">营商智库案例系统</p>\n <div class=\"flex flex-wrap gap-1.5\">\n <span class=\"text-xs px-2 py-0.5 rounded bg-white/5 text-gray-400\">省级案例对接</span>\n <span class=\"text-xs px-2 py-0.5 rounded bg-white/5 text-gray-400\">案例报送遴选</span>\n <span class=\"text-xs px-2 py-0.5 rounded bg-white/5 text-gray-400\">学术资料库</span>\n </div>\n </div>\n\n \n <div class=\"glass-card rounded-2xl p-6 group\" data-aos=\"fade-up\" data-aos-delay=\"400\">\n <div class=\"flex items-start gap-4 mb-4\">\n <div class=\"icon-gold\"><i class=\"fa-solid fa-chart-simple\"></i></div>\n <div>\n <div class=\"text-xs text-gold-400/60 font-medium tracking-wider\">模块九</div>\n <h3 class=\"text-white font-serif text-lg font-semibold\">滨政监测</h3>\n </div>\n </div>\n <p class=\"text-gray-400 text-sm leading-relaxed mb-3\">省无感监测对接</p>\n <div class=\"flex flex-wrap gap-1.5\">\n <span class=\"text-xs px-2 py-0.5 rounded bg-white/5 text-gray-400\">指标监测</span>\n <span class=\"text-xs px-2 py-0.5 rounded bg-white/5 text-gray-400\">问卷调查</span>\n <span class=\"text-xs px-2 py-0.5 rounded bg-white/5 text-gray-400\">风险预警</span>\n </div>\n </div>\n\n \n <div class=\"glass-card rounded-2xl p-6 group lg:col-span-1 md:col-span-2\" data-aos=\"fade-up\" data-aos-delay=\"450\">\n <div class=\"flex items-start gap-4 mb-4\">\n <div class=\"icon-gold\"><i class=\"fa-solid fa-qrcode\"></i></div>\n <div>\n <div class=\"text-xs text-gold-400/60 font-medium tracking-wider\">模块十</div>\n <h3 class=\"text-white font-serif text-lg font-semibold\">扫码监督</h3>\n </div>\n </div>\n <p class=\"text-gray-400 text-sm leading-relaxed mb-3\">\"滨周到\"扫码监督平台</p>\n <div class=\"flex flex-wrap gap-1.5\">\n <span class=\"text-xs px-2 py-0.5 rounded bg-white/5 text-gray-400\">部门端</span>\n <span class=\"text-xs px-2 py-0.5 rounded bg-white/5 text-gray-400\">企业端</span>\n <span class=\"text-xs px-2 py-0.5 rounded bg-white/5 text-gray-400\">政府端</span>\n <span class=\"text-xs px-2 py-0.5 rounded bg-white/5 text-gray-400\">一码通行</span>\n </div>\n </div>\n </div>\n\n \n <div class=\"mt-12 glass-card rounded-3xl p-6 md:p-8\" data-aos=\"fade-up\" data-aos-delay=\"300\">\n <div class=\"flex items-center gap-3 mb-4\">\n <i class=\"fa-solid fa-map-location-dot text-gold-400 text-xl\"></i>\n <h3 class=\"text-white font-serif text-lg font-semibold\">滨州特色产业矩阵</h3>\n </div>\n <div class=\"industry-grid\">\n <span class=\"industry-item\">滨城 · 粮食加工</span>\n <span class=\"industry-item\">沾化 · 冬枣</span>\n <span class=\"industry-item\">邹平 · 高端铝业</span>\n <span class=\"industry-item\">惠民 · 绳网</span>\n <span class=\"industry-item\">阳信 · 肉牛</span>\n <span class=\"industry-item\">无棣 · 精细化工</span>\n <span class=\"industry-item\">博兴 · 商用厨具</span>\n </div>\n </div>\n </div>\n</section>\n\n\n<section id=\"architecture\" class=\"relative py-20 md:py-28 bg-grid overflow-hidden\">\n <div class=\"max-w-7xl mx-auto px-6 lg:px-12\">\n \n <div class=\"text-center mb-16 section-title-wrap\" data-number=\"03\" data-aos=\"fade-up\">\n <span class=\"tag-gold mb-4 inline-block\">SYSTEM ARCHITECTURE</span>\n <h2 class=\"text-3xl md:text-4xl lg:text-5xl font-serif font-bold text-white mb-4\">一库三端一码一屏</h2>\n <div class=\"gold-line mb-6\"></div>\n <p class=\"text-gray-400 max-w-3xl mx-auto text-sm md:text-base leading-relaxed\">\n 覆盖PC端、移动端（小程序/公众号）和后台大数据看板，打造全方位营商环境监督服务体系\n </p>\n </div>\n\n \n <div class=\"relative\" data-aos=\"fade-up\" data-aos-delay=\"100\">\n \n <div class=\"flex justify-center mb-8\">\n <div class=\"glass-card rounded-2xl p-6 md:p-8 text-center max-w-md w-full animate-glow\">\n <div class=\"text-gold-400 text-3xl mb-2\"><i class=\"fa-solid fa-database\"></i></div>\n <h3 class=\"text-white font-serif text-xl font-bold mb-1\">全市营商环境中心数据库</h3>\n <div class=\"text-gray-500 text-xs\">一库 · 数据中枢</div>\n <div class=\"gold-line mt-3 mx-auto\"></div>\n <p class=\"text-gray-400 text-xs mt-2\">汇聚全市涉企数据，实现数据穿透与智能分析</p>\n </div>\n </div>\n\n \n <div class=\"flex justify-center mb-8\">\n <div class=\"w-0.5 h-10 bg-gradient-to-b from-gold-400/30 to-transparent\"></div>\n </div>\n\n \n <div class=\"grid md:grid-cols-3 gap-5 mb-8\">\n <div class=\"glass-card rounded-2xl p-6 text-center group\" data-aos=\"fade-up\" data-aos-delay=\"200\">\n <div class=\"w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500/20 to-blue-600/10 border border-blue-500/20 flex items-center justify-center text-blue-400 text-2xl mx-auto mb-3 group-hover:scale-110 transition-transform\">\n <i class=\"fa-solid fa-building\"></i>\n </div>\n <h4 class=\"text-white font-serif font-semibold mb-1\">部门端</h4>\n <p class=\"text-gray-400 text-xs leading-relaxed\">入企计划·扫码打卡·<br>走访记录·诉求办理</p>\n </div>\n <div class=\"glass-card rounded-2xl p-6 text-center group\" data-aos=\"fade-up\" data-aos-delay=\"300\">\n <div class=\"w-14 h-14 rounded-2xl bg-gradient-to-br from-gold-400/20 to-gold-500/10 border border-gold-400/20 flex items-center justify-center text-gold-400 text-2xl mx-auto mb-3 group-hover:scale-110 transition-transform\">\n <i class=\"fa-solid fa-store\"></i>\n </div>\n <h4 class=\"text-white font-serif font-semibold mb-1\">企业端</h4>\n <p class=\"text-gray-400 text-xs leading-relaxed\">政策需求·活动邀约·<br>投诉建议·评价反馈</p>\n </div>\n <div class=\"glass-card rounded-2xl p-6 text-center group\" data-aos=\"fade-up\" data-aos-delay=\"400\">\n <div class=\"w-14 h-14 rounded-2xl bg-gradient-to-br from-emerald-500/20 to-emerald-600/10 border border-emerald-500/20 flex items-center justify-center text-emerald-400 text-2xl mx-auto mb-3 group-hover:scale-110 transition-transform\">\n <i class=\"fa-solid fa-landmark\"></i>\n </div>\n <h4 class=\"text-white font-serif font-semibold mb-1\">政府端</h4>\n <p class=\"text-gray-400 text-xs leading-relaxed\">监控调度·预警督办·<br>数据分析·决策支持</p>\n </div>\n </div>\n\n \n <div class=\"flex justify-center mb-8\">\n <div class=\"w-0.5 h-8 bg-gradient-to-b from-transparent to-gold-400/30\"></div>\n </div>\n\n <div class=\"grid md:grid-cols-2 gap-5\" data-aos=\"fade-up\" data-aos-delay=\"400\">\n <div class=\"glass-card rounded-2xl p-6 text-center group\">\n <div class=\"text-gold-400 text-3xl mb-3\"><i class=\"fa-solid fa-qrcode\"></i></div>\n <h4 class=\"text-white font-serif font-semibold mb-1\">营商监督平台码</h4>\n <p class=\"text-gray-400 text-xs mb-3\">一码通行 · 扫码登记 / 监督 / 评议</p>\n <div class=\"flex justify-center gap-3\">\n <span class=\"text-xs px-3 py-1 rounded-full bg-gold-400/10 text-gold-400 border border-gold-400/20\">部门扫码</span>\n <span class=\"text-xs px-3 py-1 rounded-full bg-gold-400/10 text-gold-400 border border-gold-400/20\">企业扫码</span>\n </div>\n </div>\n <div class=\"glass-card rounded-2xl p-6 text-center group\">\n <div class=\"text-gold-400 text-3xl mb-3\"><i class=\"fa-solid fa-chart-pie\"></i></div>\n <h4 class=\"text-white font-serif font-semibold mb-1\">营商环境可视化大屏</h4>\n <p class=\"text-gray-400 text-xs mb-3\">一屏统览 · 涉企活动热度 / 需求预约 / 任务成效</p>\n <div class=\"flex justify-center gap-3\">\n <span class=\"text-xs px-3 py-1 rounded-full bg-blue-500/10 text-blue-400 border border-blue-500/20\">入企频次</span>\n <span class=\"text-xs px-3 py-1 rounded-full bg-blue-500/10 text-blue-400 border border-blue-500/20\">诉求办理</span>\n <span class=\"text-xs px-3 py-1 rounded-full bg-blue-500/10 text-blue-400 border border-blue-500/20\">产业服务</span>\n </div>\n </div>\n </div>\n </div>\n\n \n <div class=\"mt-12 glass-card rounded-3xl p-6 md:p-10\" data-aos=\"fade-up\" data-aos-delay=\"500\">\n <h4 class=\"text-center text-white font-serif text-lg font-semibold mb-6\">系统分层架构</h4>\n <div class=\"space-y-3\">\n <div class=\"flex items-center gap-3 p-3 rounded-xl bg-white/5 border border-white/5\">\n <span class=\"text-xs text-gold-400 font-medium w-20\">用户入口层</span>\n <div class=\"flex-1 flex flex-wrap gap-2\">\n <span class=\"text-xs px-3 py-1 rounded-md bg-blue-500/10 text-blue-400\">PC端</span>\n <span class=\"text-xs px-3 py-1 rounded-md bg-gold-400/10 text-gold-400\">小程序</span>\n <span class=\"text-xs px-3 py-1 rounded-md bg-gold-400/10 text-gold-400\">公众号</span>\n <span class=\"text-xs px-3 py-1 rounded-md bg-emerald-500/10 text-emerald-400\">营商码</span>\n </div>\n </div>\n <div class=\"flex items-center gap-3 p-3 rounded-xl bg-white/5 border border-white/5\">\n <span class=\"text-xs text-gold-400 font-medium w-20\">应用服务层</span>\n <div class=\"flex-1 flex flex-wrap gap-2\">\n <span class=\"text-xs px-3 py-1 rounded-md bg-white/5 text-gray-300\">十大业务模块</span>\n </div>\n </div>\n <div class=\"flex items-center gap-3 p-3 rounded-xl bg-white/5 border border-white/5\">\n <span class=\"text-xs text-gold-400 font-medium w-20\">中台能力层</span>\n <div class=\"flex-1 flex flex-wrap gap-2\">\n <span class=\"text-xs px-3 py-1 rounded-md bg-white/5 text-gray-300\">统一认证</span>\n <span class=\"text-xs px-3 py-1 rounded-md bg-white/5 text-gray-300\">工单流转</span>\n <span class=\"text-xs px-3 py-1 rounded-md bg-red-500/10 text-red-400\">预警督办</span>\n <span class=\"text-xs px-3 py-1 rounded-md bg-white/5 text-gray-300\">统计分析</span>\n <span class=\"text-xs px-3 py-1 rounded-md bg-white/5 text-gray-300\">日志审计</span>\n </div>\n </div>\n <div class=\"flex items-center gap-3 p-3 rounded-xl bg-white/5 border border-white/5\">\n <span class=\"text-xs text-gold-400 font-medium w-20\">数据集成层</span>\n <div class=\"flex-1 flex flex-wrap gap-2\">\n <span class=\"text-xs px-3 py-1 rounded-md bg-blue-500/10 text-blue-400\">省无感监测</span>\n <span class=\"text-xs px-3 py-1 rounded-md bg-purple-500/10 text-purple-400\">12345热线</span>\n <span class=\"text-xs px-3 py-1 rounded-md bg-emerald-500/10 text-emerald-400\">鲁执法APP</span>\n <span class=\"text-xs px-3 py-1 rounded-md bg-white/5 text-gray-300\">短信通道</span>\n </div>\n </div>\n <div class=\"flex items-center gap-3 p-3 rounded-xl bg-gradient-to-r from-gold-400/10 to-transparent border border-gold-400/10\">\n <span class=\"text-xs text-gold-400 font-medium w-20\">展示决策层</span>\n <div class=\"flex-1 flex flex-wrap gap-2\">\n <span class=\"text-xs px-3 py-1 rounded-md bg-gold-400/10 text-gold-400\">大数据看板 · 专题分析</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n</section>\n\n\n<section id=\"features\" class=\"relative py-20 md:py-28\" style=\"background: linear-gradient(180deg, #0b1a33 0%, #030811 100%);\">\n <div class=\"max-w-7xl mx-auto px-6 lg:px-12\">\n \n <div class=\"text-center mb-16 section-title-wrap\" data-number=\"04\" data-aos=\"fade-up\">\n <span class=\"tag-gold mb-4 inline-block\">CORE ADVANTAGES</span>\n <h2 class=\"text-3xl md:text-4xl lg:text-5xl font-serif font-bold text-white mb-4\">核心优势</h2>\n <div class=\"gold-line mb-6\"></div>\n </div>\n\n <div class=\"grid md:grid-cols-2 lg:grid-cols-3 gap-5\">\n <div class=\"glass-card rounded-2xl p-6\" data-aos=\"fade-up\" data-aos-delay=\"0\">\n <div class=\"text-gold-400 text-3xl mb-4\"><i class=\"fa-solid fa-door-open\"></i></div>\n <h4 class=\"text-white font-serif font-semibold text-lg mb-2\">入企免打扰</h4>\n <p class=\"text-gray-400 text-sm leading-relaxed\">备案统筹、频次预警、扫码核验，最大限度减少对企业正常经营的干扰</p>\n </div>\n <div class=\"glass-card rounded-2xl p-6\" data-aos=\"fade-up\" data-aos-delay=\"100\">\n <div class=\"text-gold-400 text-3xl mb-4\"><i class=\"fa-solid fa-heart\"></i></div>\n <h4 class=\"text-white font-serif font-semibold text-lg mb-2\">企业可感知</h4>\n <p class=\"text-gray-400 text-sm leading-relaxed\">扫码评价、约见直通、诉求直达，让企业切实感受到服务温度</p>\n </div>\n <div class=\"glass-card rounded-2xl p-6\" data-aos=\"fade-up\" data-aos-delay=\"200\">\n <div class=\"text-gold-400 text-3xl mb-4\"><i class=\"fa-solid fa-circle-check\"></i></div>\n <h4 class=\"text-white font-serif font-semibold text-lg mb-2\">服务可问效</h4>\n <p class=\"text-gray-400 text-sm leading-relaxed\">全流程闭环管理，事后评价、督导督办，确保服务落到实处</p>\n </div>\n <div class=\"glass-card rounded-2xl p-6\" data-aos=\"fade-up\" data-aos-delay=\"300\">\n <div class=\"text-gold-400 text-3xl mb-4\"><i class=\"fa-solid fa-map-location\"></i></div>\n <h4 class=\"text-white font-serif font-semibold text-lg mb-2\">任务可追踪</h4>\n <p class=\"text-gray-400 text-sm leading-relaxed\">改革任务全生命周期管理，红黄绿三色预警，进度可视化追踪</p>\n </div>\n <div class=\"glass-card rounded-2xl p-6\" data-aos=\"fade-up\" data-aos-delay=\"400\">\n <div class=\"text-gold-400 text-3xl mb-4\"><i class=\"fa-solid fa-arrow-up-from-bracket\"></i></div>\n <h4 class=\"text-white font-serif font-semibold text-lg mb-2\">数据可穿透</h4>\n <p class=\"text-gray-400 text-sm leading-relaxed\">中心数据库汇聚全量数据，支持多维度钻取分析，数据驱动决策</p>\n </div>\n <div class=\"glass-card rounded-2xl p-6\" data-aos=\"fade-up\" data-aos-delay=\"500\">\n <div class=\"text-gold-400 text-3xl mb-4\"><i class=\"fa-solid fa-chart-bar\"></i></div>\n <h4 class=\"text-white font-serif font-semibold text-lg mb-2\">对标可量化</h4>\n <p class=\"text-gray-400 text-sm leading-relaxed\">对接省无感监测系统，指标实时监测，对标提升有据可依</p>\n </div>\n </div>\n\n \n <div class=\"mt-10 glass-card rounded-2xl p-6 md:p-8\" data-aos=\"fade-up\" data-aos-delay=\"300\">\n <div class=\"flex items-center gap-3 mb-4\">\n <i class=\"fa-solid fa-traffic-light text-gold-400 text-xl\"></i>\n <h4 class=\"text-white font-serif font-semibold\">\"红黄绿\"三色预警机制</h4>\n </div>\n <div class=\"grid md:grid-cols-3 gap-4\">\n <div class=\"flex items-center gap-3 p-3 rounded-xl bg-red-500/5 border border-red-500/10\">\n <span class=\"dot-red flex-shrink-0\"></span>\n <div>\n <div class=\"text-white text-sm font-medium\">红色 · 超期</div>\n <div class=\"text-gray-500 text-xs\">自动触发预警，限期整改</div>\n </div>\n </div>\n <div class=\"flex items-center gap-3 p-3 rounded-xl bg-yellow-500/5 border border-yellow-500/10\">\n <span class=\"dot-yellow flex-shrink-0\"></span>\n <div>\n <div class=\"text-white text-sm font-medium\">黄色 · 即将到期</div>\n <div class=\"text-gray-500 text-xs\">短信/弹窗提醒加紧办理</div>\n </div>\n </div>\n <div class=\"flex items-center gap-3 p-3 rounded-xl bg-green-500/5 border border-green-500/10\">\n <span class=\"dot-green flex-shrink-0\"></span>\n <div>\n <div class=\"text-white text-sm font-medium\">绿色 · 正常推进</div>\n <div class=\"text-gray-500 text-xs\">按计划稳步推进中</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</section>\n\n\n<section id=\"contact\" class=\"relative py-20 md:py-28 cta-bg\">\n <div class=\"max-w-7xl mx-auto px-6 lg:px-12 relative z-10\">\n <div class=\"grid md:grid-cols-2 gap-12 items-center\">\n <div data-aos=\"fade-right\">\n <span class=\"tag-gold mb-4 inline-block\">SCAN CODE</span>\n <h2 class=\"text-3xl md:text-4xl lg:text-5xl font-serif font-bold text-white mb-6\">\n 实行<br class=\"hidden md:block\">\n <span class=\"text-highlight\">\"滨周到\"</span> 扫码监督\n </h2>\n <p class=\"text-gray-400 leading-relaxed mb-6\">\n 生成全市\"营商监督平台码\"，在政务服务中心、产业园区、\n 街道便民中心等场所设置展示牌，实现\n <span class=\"text-gold-400\">扫码登记、扫码监督、扫码评议</span>。\n </p>\n <div class=\"flex flex-wrap gap-3 mb-6\">\n <span class=\"text-xs px-4 py-2 rounded-full bg-blue-500/10 text-blue-400 border border-blue-500/20\">\n <i class=\"fa-solid fa-building mr-1\"></i>部门端\n </span>\n <span class=\"text-xs px-4 py-2 rounded-full bg-gold-400/10 text-gold-400 border border-gold-400/20\">\n <i class=\"fa-solid fa-store mr-1\"></i>企业端\n </span>\n <span class=\"text-xs px-4 py-2 rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20\">\n <i class=\"fa-solid fa-landmark mr-1\"></i>政府端\n </span>\n </div>\n <a href=\"#\" class=\"btn-glow px-8 py-3.5 rounded-xl inline-flex items-center gap-2\">\n <i class=\"fa-solid fa-qrcode\"></i>\n 扫码体验\n </a>\n </div>\n <div class=\"flex justify-center\" data-aos=\"fade-left\" data-aos-delay=\"200\">\n <div class=\"glass-card rounded-3xl p-8 text-center max-w-xs w-full\">\n <div class=\"w-36 h-36 mx-auto mb-4 rounded-2xl bg-white/5 border-2 border-gold-400/20 flex items-center justify-center relative overflow-hidden\">\n <div class=\"absolute inset-0 bg-gradient-to-br from-gold-400/5 to-transparent\"></div>\n <div class=\"relative\">\n <i class=\"fa-solid fa-qrcode text-7xl text-gold-400/80\"></i>\n </div>\n </div>\n <h4 class=\"text-white font-serif font-semibold mb-1\">营商监督平台码</h4>\n <p class=\"text-gray-500 text-xs\">微信扫码 · 一键监督</p>\n <div class=\"mt-4 flex justify-center gap-3\">\n <span class=\"text-xs text-gray-500\"><i class=\"fa-brands fa-weixin mr-1 text-gold-400\"></i>小程序</span>\n <span class=\"text-xs text-gray-500\"><i class=\"fa-brands fa-weixin mr-1 text-gold-400\"></i>公众号</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n</section>\n\n\n<footer class=\"relative border-t border-white/5 bg-brand-900\">\n <div class=\"max-w-7xl mx-auto px-6 lg:px-12 py-12\">\n <div class=\"grid md:grid-cols-4 gap-8 mb-8\">\n <div class=\"md:col-span-2\">\n <div class=\"flex items-center gap-3 mb-4\">\n <div class=\"w-9 h-9 rounded-xl bg-gradient-to-br from-gold-400 to-gold-600 flex items-center justify-center text-brand-900 font-bold text-base font-serif\">滨</div>\n <div>\n <div class=\"text-white font-serif font-semibold\">滨周到</div>\n <div class=\"text-[10px] text-gray-500 tracking-[2px]\">营商环境服务平台</div>\n </div>\n </div>\n <p class=\"text-gray-500 text-sm leading-relaxed max-w-md\">\n 以\"让企业和企业家舒服\"为理念，数据驱动监督、智能赋能治理，\n 持续塑强\"滨周到\"营商环境品牌。\n </p>\n </div>\n <div>\n <h5 class=\"text-white text-sm font-medium mb-4\">快速导航</h5>\n <ul class=\"space-y-2 text-sm text-gray-500\">\n <li><a href=\"#target\" class=\"hover:text-gold-400 transition\">建设目标</a></li>\n <li><a href=\"#modules\" class=\"hover:text-gold-400 transition\">业务模块</a></li>\n <li><a href=\"#architecture\" class=\"hover:text-gold-400 transition\">系统架构</a></li>\n <li><a href=\"#features\" class=\"hover:text-gold-400 transition\">核心优势</a></li>\n </ul>\n </div>\n <div>\n <h5 class=\"text-white text-sm font-medium mb-4\">联系方式</h5>\n <ul class=\"space-y-2 text-sm text-gray-500\">\n <li><i class=\"fa-regular fa-building mr-2 w-4\"></i>滨州市营商环境</li>\n <li><i class=\"fa-regular fa-envelope mr-2 w-4\"></i>bzzhou@binzhou.gov.cn</li>\n <li><i class=\"fa-regular fa-phone mr-2 w-4\"></i>0543-12345</li>\n </ul>\n </div>\n </div>\n <div class=\"border-t border-white/5 pt-6 flex flex-col md:flex-row justify-between items-center gap-4\">\n <p class=\"text-gray-600 text-xs\">\n © 2026 滨州市营商环境服务平台 · 持续塑强\"滨周到\"品牌\n </p>\n <div class=\"flex gap-4 text-gray-600 text-xs\">\n <a href=\"#\" class=\"hover:text-gold-400 transition\">隐私政策</a>\n <a href=\"#\" class=\"hover:text-gold-400 transition\">服务条款</a>\n <a href=\"#\" class=\"hover:text-gold-400 transition\">鲁ICP备XXXXXX号</a>\n </div>\n </div>\n </div>\n</footer>\n\n\n<script src=\"https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js\"></script>\n<script>\n // 初始化 AOS\n AOS.init({\n duration: 800,\n once: true,\n offset: 100,\n });\n\n // 页面加载器\n window.addEventListener('load', function() {\n setTimeout(function() {\n document.getElementById('pageLoader').classList.add('hidden');\n }, 600);\n });\n\n // 数字滚动动画\n function animateCounters() {\n const counters = document.querySelectorAll('[data-target]');\n counters.forEach(counter => {\n const target = parseInt(counter.getAttribute('data-target'));\n const duration = 2000;\n const step = Math.max(1, Math.floor(target / 60));\n let current = 0;\n \n const updateCounter = () => {\n current += step;\n if (current >= target) {\n counter.textContent = target;\n return;\n }\n counter.textContent = current;\n requestAnimationFrame(updateCounter);\n };\n \n // 用 IntersectionObserver 触发\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n updateCounter();\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.5 });\n observer.observe(counter);\n });\n }\n animateCounters();\n\n // 平滑滚动\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n if (target) {\n target.scrollIntoView({ behavior: 'smooth', block: 'start' });\n }\n });\n });\n</script>\n\n</body>\n</html>"
},
"next": [
"对接12345热线",
"优化移动端体验",
"增加产业数据",
"深化用户权限",
"可视化大屏增强"
],
"breakpoint": "none"
}
```

total_tokens

39111

summary

为'滨周到'营商环境服务平台设计了一个完整的品牌宣传落地页。采用深色主题（深蓝黑渐变+金色点缀），Noto Serif SC标题字体体现政府庄重感，Noto Sans SC正文字体清晰现代。页面包含Hero区（品牌介绍+核心数据）、建设目标、十大业务模块（卡片网格）、系统架构（一库三端一码一屏可视化）、核心优势、扫码监督等完整区块。使用AOS滚动动画、玻璃态卡片效果、几何装饰元素，营造高端权威的政府数字化转型形象。

uiParsing

关闭