明树Git Lab

Skip to content

B
bridata-website-frontend
Commit ad574e36 authored by zhangqi's avatar zhangqi
Browse files
Options

bridata administrator push

parent cdf4176a
Pipeline #104734 canceled with stages
      Show whitespace changes
      Inline Side-by-side
      Showing with 7947 additions and 1 deletion
      .gitignore 0 → 100644
      View file @ ad574e36
      # Logs
      logs
      *.log
      npm-debug.log*
      yarn-debug.log*
      yarn-error.log*
      pnpm-debug.log*
      lerna-debug.log*
      node_modules
      dist
      dist-ssr
      *.local
      # Editor directories and files
      .vscode/*
      !.vscode/extensions.json
      .idea
      .DS_Store
      *.suo
      *.ntvs*
      *.njsproj
      *.sln
      *.sw?
      README.md
      View file @ ad574e36
      明树官网前端： https://www.bridata.com/ # React + Vite
      \ No newline at end of file
      This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
      Currently, two official plugins are available:
      - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
      - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
      ## React Compiler
      The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
      ## Expanding the ESLint configuration
      If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
      eslint.config.js 0 → 100644
      View file @ ad574e36
      import js from '@eslint/js'
      import globals from 'globals'
      import reactHooks from 'eslint-plugin-react-hooks'
      import reactRefresh from 'eslint-plugin-react-refresh'
      import { defineConfig, globalIgnores } from 'eslint/config'
      export default defineConfig([
      globalIgnores(['dist']),
      {
      files: ['**/*.{js,jsx}'],
      extends: [
      js.configs.recommended,
      reactHooks.configs.flat.recommended,
      reactRefresh.configs.vite,
      ],
      languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
      parserOptions: {
      ecmaVersion: 'latest',
      ecmaFeatures: { jsx: true },
      sourceType: 'module',
      },
      },
      rules: {
      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
      },
      },
      ])
      index.html 0 → 100644
      View file @ ad574e36
      <!doctype html>
      <html lang="en">
      <head>
      <meta charset="UTF-8" />
      <link rel="icon" type="image/svg+xml" href="/vite.svg" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>明树数据</title>
      </head>
      <body>
      <div id="root"></div>
      <script type="module" src="/src/main.jsx"></script>
      </body>
      </html>
      package-lock.json 0 → 100644
      View file @ ad574e36
      This source diff could not be displayed because it is too large. You can view the blob instead.
      package.json 0 → 100644
      View file @ ad574e36
      {
      "name": "mingshu-react",
      "private": true,
      "version": "0.0.0",
      "type": "module",
      "scripts": {
      "dev": "vite",
      "build": "vite build",
      "lint": "eslint .",
      "preview": "vite preview"
      },
      "dependencies": {
      "html2canvas": "^1.4.1",
      "lucide-react": "^0.555.0",
      "react": "^19.2.0",
      "react-dom": "^19.2.0"
      },
      "devDependencies": {
      "@eslint/js": "^9.39.1",
      "@types/react": "^19.2.5",
      "@types/react-dom": "^19.2.3",
      "@vitejs/plugin-react": "^5.1.1",
      "autoprefixer": "^10.4.22",
      "eslint": "^9.39.1",
      "eslint-plugin-react-hooks": "^7.0.1",
      "eslint-plugin-react-refresh": "^0.4.24",
      "globals": "^16.5.0",
      "postcss": "^8.5.6",
      "tailwindcss": "^3.4.18",
      "vite": "^7.2.4"
      }
      }
      postcss.config.js 0 → 100644
      View file @ ad574e36
      export default {
      plugins: {
      tailwindcss: {},
      autoprefixer: {},
      },
      }
      public/data.html 0 → 100644
      View file @ ad574e36
      <!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">
      <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
      <!-- Tailwind配置 -->
      <script>
      tailwind.config = {
      theme: {
      extend: {
      colors: {
      primary: '#165DFF',
      secondary: '#36CFC9',
      accent: '#722ED1',
      dark: '#1D2129',
      light: '#F2F3F5'
      },
      fontFamily: {
      sans: ['Inter', 'system-ui', 'sans-serif'],
      },
      animation: {
      'float': 'float 3s ease-in-out infinite',
      'count-up': 'countUp 2s ease-out forwards',
      'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
      'scroll-text': 'scrollText 8s linear infinite',
      },
      keyframes: {
      float: {
      '0%, 100%': { transform: 'translateY(0)' },
      '50%': { transform: 'translateY(-10px)' },
      },
      countUp: {
      '0%': { opacity: '0', transform: 'translateY(20px)' },
      '100%': { opacity: '1', transform: 'translateY(0)' },
      },
      scrollText: {
      '0%': { transform: 'translateY(0)' },
      '100%': { transform: 'translateY(-50%)' },
      }
      }
      }
      }
      }
      </script>
      <!-- 自定义工具类 -->
      <style type="text/tailwindcss">
      @layer utilities {
      .content-auto {
      content-visibility: auto;
      }
      .text-shadow {
      text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .card-hover {
      @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
      }
      .gradient-bg {
      background: linear-gradient(135deg, #165DFF 0%, #722ED1 100%);
      }
      .data-particle {
      background-image: radial-gradient(rgba(22, 93, 255, 0.15) 1px, transparent 1px);
      background-size: 20px 20px;
      }
      .scroll-container {
      height: 120px;
      overflow: hidden;
      position: relative;
      }
      .scroll-content {
      position: absolute;
      width: 100%;
      animation: scrollText 8s linear infinite;
      }
      .scroll-content:hover {
      animation-play-state: paused;
      }
      }
      </style>
      </head>
      <body class="font-sans text-dark bg-white overflow-x-hidden">
      <!-- 顶部导航栏 (Global Header) -->
      <header id="header" class="fixed w-full top-0 z-50 transition-all duration-300 bg-white/95 backdrop-blur-sm shadow-sm">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex items-center justify-between h-16 md:h-20">
      <!-- Logo -->
      <a href="#" class="flex items-center space-x-2">
      <div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center">
      <i class="fa fa-database text-white text-xl"></i>
      </div>
      <span class="text-xl font-bold text-primary">明树数据</span>
      </a>
      <!-- 中间菜单 - 桌面端 -->
      <nav class="hidden md:flex items-center space-x-8">
      <a href="#hero" class="text-dark hover:text-primary font-medium transition-colors">首页</a>
      <a href="#data-store" class="text-dark hover:text-primary font-medium transition-colors">数据商城</a>
      <a href="#supply-demand" class="text-dark hover:text-primary font-medium transition-colors">供需大厅</a>
      <a href="#solutions" class="text-dark hover:text-primary font-medium transition-colors">解决方案</a>
      <a href="#cases" class="text-dark hover:text-primary font-medium transition-colors">成功案例</a>
      <a href="#about" class="text-dark hover:text-primary font-medium transition-colors">关于我们</a>
      </nav>
      <!-- 右侧操作区 -->
      <div class="flex items-center space-x-4">
      <!-- 搜索框 -->
      <div class="relative hidden md:block">
      <input type="text" placeholder="输入关键词找数据"
      class="pl-10 pr-4 py-2 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary w-48 lg:w-64 transition-all">
      <i class="fa fa-search absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
      </div>
      <!-- 登录/注册 -->
      <a href="#" class="hidden md:inline-block text-dark hover:text-primary font-medium transition-colors">登录/注册</a>
      <!-- 成为服务商按钮 -->
      <a href="#" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-full font-medium transition-all shadow-md hover:shadow-lg hidden sm:inline-block">
      成为服务商
      </a>
      <!-- 移动端菜单按钮 -->
      <button id="menuBtn" class="md:hidden text-dark hover:text-primary text-xl">
      <i class="fa fa-bars"></i>
      </button>
      </div>
      </div>
      </div>
      <!-- 移动端菜单 -->
      <div id="mobileMenu" class="md:hidden bg-white shadow-lg absolute w-full left-0 top-full transform -translate-y-full opacity-0 transition-all duration-300 pointer-events-none">
      <div class="container mx-auto px-4 py-4 space-y-4">
      <div class="relative">
      <input type="text" placeholder="输入关键词找数据"
      class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
      <i class="fa fa-search absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
      </div>
      <nav class="flex flex-col space-y-3">
      <a href="#hero" class="text-dark hover:text-primary font-medium py-2 transition-colors">首页</a>
      <a href="#data-store" class="text-dark hover:text-primary font-medium py-2 transition-colors">数据商城</a>
      <a href="#supply-demand" class="text-dark hover:text-primary font-medium py-2 transition-colors">供需大厅</a>
      <a href="#solutions" class="text-dark hover:text-primary font-medium py-2 transition-colors">解决方案</a>
      <a href="#cases" class="text-dark hover:text-primary font-medium py-2 transition-colors">成功案例</a>
      <a href="#about" class="text-dark hover:text-primary font-medium py-2 transition-colors">关于我们</a>
      <a href="#" class="text-dark hover:text-primary font-medium py-2 transition-colors">登录/注册</a>
      </nav>
      </div>
      </div>
      </header>
      <main>
      <!-- 首屏展示区 (Hero Section) -->
      <section id="hero" class="pt-24 md:pt-32 pb-16 md:pb-24 data-particle relative overflow-hidden">
      <!-- 动态数据流背景 -->
      <div class="absolute inset-0 overflow-hidden opacity-30 pointer-events-none">
      <div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-primary/20 blur-3xl animate-pulse-slow"></div>
      <div class="absolute bottom-1/4 right-1/4 w-80 h-80 rounded-full bg-accent/20 blur-3xl animate-pulse-slow" style="animation-delay: 1s"></div>
      </div>
      <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
      <div class="flex flex-col lg:flex-row items-center">
      <div class="lg:w-2/3 mb-10 lg:mb-0">
      <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight text-dark mb-4">
      数据新通道：<br>
      <span class="text-primary">构建全链路价值转化体系</span>
      </h1>
      <p class="text-[clamp(1rem,2vw,1.25rem)] text-gray-600 mb-8 max-w-2xl leading-relaxed">
      构建“资源整合 - 精准对接 - 价值落地”全链路体系，覆盖12大核心领域，破解行业“找数难、变现难”困局。
      </p>
      <!-- 核心行动点 (CTA) -->
      <div class="flex flex-col sm:flex-row gap-4 mb-8 flex-wrap">
      <a href="#match" class="bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-full font-semibold text-lg shadow-lg hover:shadow-xl transition-all flex items-center justify-center">
      <i class="fa fa-search mr-2"></i> 我是需求方，我要找数据
      </a>
      <a href="#match" class="bg-white hover:bg-gray-50 text-primary border border-primary px-8 py-3 rounded-full font-semibold text-lg shadow-md hover:shadow-lg transition-all flex items-center justify-center">
      <i class="fa fa-line-chart mr-2"></i> 我是服务商，我要卖数据
      </a>
      <a href="#match" class="bg-white hover:bg-gray-50 text-accent border border-accent px-8 py-3 rounded-full font-semibold text-lg shadow-md hover:shadow-lg transition-all flex items-center justify-center">
      <i class="fa fa-sitemap mr-2"></i> 我是平台，我要找产业
      </a>
      </div>
      <!-- 首屏搜索框 -->
      <div class="relative max-w-2xl w-full">
      <input type="text" placeholder="例如：我要找2023年环保水质数据"
      class="w-full pl-12 pr-4 py-4 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary shadow-lg transition-all">
      <i class="fa fa-search absolute left-5 top-1/2 -translate-y-1/2 text-gray-400 text-xl"></i>
      <button class="absolute right-2 top-1/2 -translate-y-1/2 bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-full font-medium transition-all">
      搜索
      </button>
      </div>
      </div>
      <!-- 数据浮层 - 动态滚动卡片 -->
      <div class="lg:w-1/3 flex justify-center lg:justify-end">
      <div class="bg-white rounded-2xl shadow-2xl p-6 border border-gray-100 animate-float max-w-sm w-full">
      <div class="flex items-center mb-4">
      <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4">
      <i class="fa fa-line-chart text-primary text-xl"></i>
      </div>
      <h3 class="text-xl font-bold text-dark">实时数据动态</h3>
      </div>
      <div class="scroll-container">
      <div class="scroll-content text-center">
      <div class="py-6">
      <p class="text-gray-500 text-sm mb-2">数据库数据总量</p>
      <p class="text-4xl font-bold text-primary">100,000,000+</p>
      <p class="text-lg font-normal text-gray-600">条</p>
      </div>
      <div class="py-6">
      <p class="text-gray-500 text-sm mb-2">近日数据更新</p>
      <p class="text-4xl font-bold text-accent">5,000+</p>
      <p class="text-lg font-normal text-gray-600">条</p>
      </div>
      </div>
      </div>
      <div class="mt-4 pt-4 border-t border-gray-100">
      <p class="text-sm text-gray-500 text-center">数据实时更新中...</p>
      </div>
      </div>
      </div>
      </div>
      </div>
      </section>
      <!-- 核心数据实力 (Data Stats Banner) -->
      <section class="py-16">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
      <!-- 数据1 -->
      <div class="bg-white rounded-xl p-8 text-center card-hover border border-gray-100">
      <p class="text-5xl md:text-6xl font-bold text-primary mb-3 counter" data-target="110000000">0</p>
      <p class="text-gray-600 font-medium text-lg">累计数据体量</p>
      </div>
      <!-- 数据2 -->
      <div class="bg-white rounded-xl p-8 text-center card-hover border border-gray-100">
      <p class="text-5xl md:text-6xl font-bold text-primary mb-3 counter" data-target="12">0</p>
      <p class="text-gray-600 font-medium text-lg">全行业核心覆盖</p>
      </div>
      <!-- 数据3 -->
      <div class="bg-white rounded-xl p-8 text-center card-hover border border-gray-100">
      <p class="text-5xl md:text-6xl font-bold text-primary mb-3 counter" data-target="5000000">0</p>
      <p class="text-gray-600 font-medium text-lg">覆盖企业及机构需求</p>
      </div>
      <!-- 数据4 -->
      <div class="bg-white rounded-xl p-8 text-center card-hover border border-gray-100">
      <p class="text-5xl md:text-6xl font-bold text-primary mb-3 counter" data-target="10">0</p>
      <p class="text-gray-600 font-medium text-lg">最高回溯历史数据(年)</p>
      </div>
      </div>
      </div>
      </section>
      <!-- 行业痛点与解决方案 (Problem & Solution) -->
      <section id="solutions" class="py-20 md:py-28 bg-light">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center mb-16">
      <h2 class="text-[clamp(1.75rem,3vw,2.5rem)] font-bold text-dark 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 mb-16">
      <!-- 需求端痛点 -->
      <div class="bg-white rounded-2xl shadow-lg p-8 border border-gray-100 card-hover">
      <div class="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mx-auto mb-6">
      <i class="fa fa-search text-gray-500 text-3xl"></i>
      </div>
      <h3 class="text-xl font-bold text-dark mb-3 text-center">需求端</h3>
      <p class="text-gray-600 text-center mb-4 text-lg font-medium">找数据如“大海捞针”</p>
      <p class="text-gray-500 text-center">数据分散、质量参差不齐，难以快速找到精准匹配的数据源</p>
      </div>
      <!-- 供给端痛点 -->
      <div class="bg-white rounded-2xl shadow-lg p-8 border border-gray-100 card-hover">
      <div class="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mx-auto mb-6">
      <i class="fa fa-money text-gray-500 text-3xl"></i>
      </div>
      <h3 class="text-xl font-bold text-dark mb-3 text-center">供给端</h3>
      <p class="text-gray-600 text-center mb-4 text-lg font-medium">数据变现“无门可入”</p>
      <p class="text-gray-500 text-center">优质数据资源缺乏有效流通渠道，难以实现商业价值转化</p>
      </div>
      <!-- 产业端痛点 -->
      <div class="bg-white rounded-2xl shadow-lg p-8 border border-gray-100 card-hover">
      <div class="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mx-auto mb-6">
      <i class="fa fa-cogs text-gray-500 text-3xl"></i>
      </div>
      <h3 class="text-xl font-bold text-dark mb-3 text-center">产业端</h3>
      <p class="text-gray-600 text-center mb-4 text-lg font-medium">模型落地“卡壳数据源”</p>
      <p class="text-gray-500 text-center">AI模型、业务系统缺乏高质量数据源支撑，落地应用效果不佳</p>
      </div>
      </div>
      <!-- 明树解决方案 -->
      <div class="bg-white rounded-2xl shadow-xl p-8 md:p-12 border border-primary/20">
      <h3 class="text-2xl font-bold text-primary mb-8 text-center">明树全链路解决方案</h3>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <div class="flex flex-col items-center text-center">
      <div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-6">
      <i class="fa fa-diamond text-primary text-3xl"></i>
      </div>
      <h4 class="font-bold text-dark mb-3 text-xl">数据资产化</h4>
      <p class="text-gray-600">从资源到资产的转化，标准化数据治理，建立数据资产目录，实现数据价值化管理</p>
      </div>
      <div class="flex flex-col items-center text-center">
      <div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-6">
      <i class="fa fa-link text-primary text-3xl"></i>
      </div>
      <h4 class="font-bold text-dark mb-3 text-xl">供需精准匹配</h4>
      <p class="text-gray-600">每一份数据找到适配场景，智能算法匹配，快速连接供需双方，提高数据流通效率</p>
      </div>
      <div class="flex flex-col items-center text-center">
      <div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-6">
      <i class="fa fa-life-ring text-primary text-3xl"></i>
      </div>
      <h4 class="font-bold text-dark mb-3 text-xl">全流程支撑</h4>
      <p class="text-gray-600">定制化源+治理+顾问，提供从数据采集、治理到应用落地的全流程专业服务</p>
      </div>
      </div>
      </div>
      </div>
      </section>
      <!-- 核心资源矩阵 (Resource Matrix) -->
      <section id="resource-matrix" class="py-20 md:py-28">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center mb-16">
      <h2 class="text-[clamp(1.75rem,3vw,2.5rem)] font-bold text-dark mb-4">12大领域全覆盖的数据资源“超级入口”</h2>
      <p class="text-gray-600 max-w-2xl mx-auto">官方渠道（发改委/工信部等）+ 市场一手经营数据 + 交叉验证，确保数据权威性与准确性</p>
      </div>
      <!-- 12宫格图标卡片 -->
      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4 md:gap-6">
      <!-- 工业制造 -->
      <div class="bg-white rounded-xl p-6 text-center card-hover flex flex-col items-center justify-center border border-gray-100">
      <div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center mb-4">
      <i class="fa fa-industry text-primary text-xl"></i>
      </div>
      <h3 class="font-medium text-dark">工业制造</h3>
      </div>
      <!-- 现代农业 -->
      <div class="bg-white rounded-xl p-6 text-center card-hover flex flex-col items-center justify-center border border-gray-100">
      <div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center mb-4">
      <i class="fa fa-leaf text-primary text-xl"></i>
      </div>
      <h3 class="font-medium text-dark">现代农业</h3>
      </div>
      <!-- 商贸流通 -->
      <div class="bg-white rounded-xl p-6 text-center card-hover flex flex-col items-center justify-center border border-gray-100">
      <div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center mb-4">
      <i class="fa fa-shopping-cart text-primary text-xl"></i>
      </div>
      <h3 class="font-medium text-dark">商贸流通</h3>
      </div>
      <!-- 交通运输 -->
      <div class="bg-white rounded-xl p-6 text-center card-hover flex flex-col items-center justify-center border border-gray-100">
      <div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center mb-4">
      <i class="fa fa-truck text-primary text-xl"></i>
      </div>
      <h3 class="font-medium text-dark">交通运输</h3>
      </div>
      <!-- 金融服务 -->
      <div class="bg-white rounded-xl p-6 text-center card-hover flex flex-col items-center justify-center border border-gray-100">
      <div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center mb-4">
      <i class="fa fa-university text-primary text-xl"></i>
      </div>
      <h3 class="font-medium text-dark">金融服务</h3>
      </div>
      <!-- 科技创新 -->
      <div class="bg-white rounded-xl p-6 text-center card-hover flex flex-col items-center justify-center border border-gray-100">
      <div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center mb-4">
      <i class="fa fa-lightbulb-o text-primary text-xl"></i>
      </div>
      <h3 class="font-medium text-dark">科技创新</h3>
      </div>
      <!-- 文化旅游 -->
      <div class="bg-white rounded-xl p-6 text-center card-hover flex flex-col items-center justify-center border border-gray-100">
      <div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center mb-4">
      <i class="fa fa-plane text-primary text-xl"></i>
      </div>
      <h3 class="font-medium text-dark">文化旅游</h3>
      </div>
      <!-- 医疗健康 -->
      <div class="bg-white rounded-xl p-6 text-center card-hover flex flex-col items-center justify-center border border-gray-100">
      <div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center mb-4">
      <i class="fa fa-heartbeat text-primary text-xl"></i>
      </div>
      <h3 class="font-medium text-dark">医疗健康</h3>
      </div>
      <!-- 绿色低碳 -->
      <div class="bg-white rounded-xl p-6 text-center card-hover flex flex-col items-center justify-center border border-gray-100">
      <div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center mb-4">
      <i class="fa fa-tree text-primary text-xl"></i>
      </div>
      <h3 class="font-medium text-dark">绿色低碳</h3>
      </div>
      <!-- 应急管理 -->
      <div class="bg-white rounded-xl p-6 text-center card-hover flex flex-col items-center justify-center border border-gray-100">
      <div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center mb-4">
      <i class="fa fa-ambulance text-primary text-xl"></i>
      </div>
      <h3 class="font-medium text-dark">应急管理</h3>
      </div>
      <!-- 气象服务 -->
      <div class="bg-white rounded-xl p-6 text-center card-hover flex flex-col items-center justify-center border border-gray-100">
      <div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center mb-4">
      <i class="fa fa-cloud text-primary text-xl"></i>
      </div>
      <h3 class="font-medium text-dark">气象服务</h3>
      </div>
      <!-- 城市治理 -->
      <div class="bg-white rounded-xl p-6 text-center card-hover flex flex-col items-center justify-center border border-gray-100">
      <div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center mb-4">
      <i class="fa fa-building text-primary text-xl"></i>
      </div>
      <h3 class="font-medium text-dark">城市治理</h3>
      </div>
      </div>
      </div>
      </section>
      <!-- 三大核心引擎 (Core Features) -->
      <section class="py-20 md:py-28">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center mb-16">
      <h2 class="text-[clamp(1.75rem,3vw,2.5rem)] font-bold text-dark 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-white rounded-2xl shadow-lg overflow-hidden card-hover border border-gray-100">
      <div class="h-48 bg-gradient-to-r from-primary/90 to-primary flex items-center justify-center">
      <i class="fa fa-hand-holding-usd text-white text-6xl opacity-80"></i>
      </div>
      <div class="p-6">
      <h3 class="text-xl font-bold text-dark mb-3">供应商专属变现</h3>
      <p class="text-primary font-medium mb-4">让“沉睡数据”变“现金流”</p>
      <ul class="space-y-3">
      <li class="flex items-start">
      <i class="fa fa-check text-green-500 mt-1 mr-2"></i>
      <span class="text-gray-600">资质/质量/服务三重审核</span>
      </li>
      <li class="flex items-start">
      <i class="fa fa-check text-green-500 mt-1 mr-2"></i>
      <span class="text-gray-600">精准推送降低获客成本</span>
      </li>
      <li class="flex items-start">
      <i class="fa fa-check text-green-500 mt-1 mr-2"></i>
      <span class="text-gray-600">交易保障收益结算</span>
      </li>
      </ul>
      </div>
      </div>
      <!-- 卡片 2：全产业链整合 -->
      <div class="bg-white rounded-2xl shadow-lg overflow-hidden card-hover border border-gray-100">
      <div class="h-48 bg-gradient-to-r from-accent/90 to-accent flex items-center justify-center">
      <i class="fa fa-sitemap text-white text-6xl opacity-80"></i>
      </div>
      <div class="p-6">
      <h3 class="text-xl font-bold text-dark mb-3">全产业链整合</h3>
      <p class="text-accent font-medium mb-4">打破“数据孤岛”建生态</p>
      <ul class="space-y-3">
      <li class="flex items-start">
      <i class="fa fa-check text-green-500 mt-1 mr-2"></i>
      <span class="text-gray-600">串联采集、治理、分析全环节</span>
      </li>
      <li class="flex items-start">
      <i class="fa fa-check text-green-500 mt-1 mr-2"></i>
      <span class="text-gray-600">100+服务商生态</span>
      </li>
      <li class="flex items-start">
      <i class="fa fa-check text-green-500 mt-1 mr-2"></i>
      <span class="text-gray-600">跨行业数据资源整合</span>
      </li>
      </ul>
      </div>
      </div>
      <!-- 卡片 3：模型落地支撑 -->
      <div class="bg-white rounded-2xl shadow-lg overflow-hidden card-hover border border-gray-100">
      <div class="h-48 bg-gradient-to-r from-secondary/90 to-secondary flex items-center justify-center">
      <i class="fa fa-cogs text-white text-6xl opacity-80"></i>
      </div>
      <div class="p-6">
      <h3 class="text-xl font-bold text-dark mb-3">模型落地支撑</h3>
      <p class="text-secondary font-medium mb-4">让技术“能用、好用”</p>
      <ul class="space-y-3">
      <li class="flex items-start">
      <i class="fa fa-check text-green-500 mt-1 mr-2"></i>
      <span class="text-gray-600">定制化数据源</span>
      </li>
      <li class="flex items-start">
      <i class="fa fa-check text-green-500 mt-1 mr-2"></i>
      <span class="text-gray-600">专业数据治理服务</span>
      </li>
      <li class="flex items-start">
      <i class="fa fa-check text-green-500 mt-1 mr-2"></i>
      <span class="text-gray-600">落地实施顾问支持</span>
      </li>
      </ul>
      </div>
      </div>
      </div>
      </div>
      </section>
      <!-- 产品与服务体系 (Products & Services) -->
      <section id="data-store" class="py-20 md:py-28 bg-light">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center mb-16">
      <h2 class="text-[clamp(1.75rem,3vw,2.5rem)] font-bold text-dark mb-4">明树云聚合平台与服务</h2>
      <p class="text-gray-600 max-w-2xl mx-auto">标准化产品与定制化服务结合，满足不同场景数据需求</p>
      </div>
      <!-- Tab切换 -->
      <div class="max-w-3xl mx-auto mb-10">
      <div class="flex bg-white rounded-full p-1 shadow-md">
      <button class="tab-btn active flex-1 py-3 px-4 rounded-full font-medium text-primary transition-all" data-tab="standard">
      标准化应用
      </button>
      <button class="tab-btn flex-1 py-3 px-4 rounded-full font-medium text-gray-600 hover:text-primary transition-all" data-tab="custom">
      定制化服务
      </button>
      </div>
      </div>
      <!-- 标准化应用 -->
      <div id="standard-tab" class="tab-content active">
      <div class="bg-white rounded-2xl shadow-lg overflow-hidden">
      <div class="grid grid-cols-1 lg:grid-cols-2">
      <div class="p-8 md:p-12 flex flex-col justify-center">
      <h3 class="text-2xl font-bold text-dark mb-4">标准化数据应用商城</h3>
      <p class="text-gray-600 mb-6">上架各类数据包100+，热门工具10多款，满足快速数据查询与分析需求</p>
      <ul class="space-y-4 mb-8">
      <li class="flex items-center">
      <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-4">
      <i class="fa fa-bell text-primary"></i>
      </div>
      <span class="text-dark font-medium">每日中标速递</span>
      </li>
      <li class="flex items-center">
      <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-4">
      <i class="fa fa-bar-chart text-primary"></i>
      </div>
      <span class="text-dark font-medium">企业ESG查询</span>
      </li>
      <li class="flex items-center">
      <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-4">
      <i class="fa fa-comments text-primary"></i>
      </div>
      <span class="text-dark font-medium">ChatGPT对接服务</span>
      </li>
      <li class="flex items-center">
      <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-4">
      <i class="fa fa-line-chart text-primary"></i>
      </div>
      <span class="text-dark font-medium">行业趋势分析报告</span>
      </li>
      </ul>
      <a href="#" class="inline-block bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-full font-semibold transition-all shadow-md hover:shadow-lg self-start">
      进入数据商城
      </a>
      </div>
      <div class="bg-gray-50 flex items-center justify-center p-8">
      <div class="relative">
      <div class="w-64 h-128 bg-white rounded-3xl shadow-2xl overflow-hidden border border-gray-200 relative z-20">
      <div class="h-12 bg-primary flex items-center px-4">
      <div class="w-3 h-3 rounded-full bg-white/50 mr-2"></div>
      <div class="w-3 h-3 rounded-full bg-white/50 mr-2"></div>
      <div class="w-3 h-3 rounded-full bg-white/50"></div>
      </div>
      <div class="p-4">
      <div class="relative mb-3">
      <input type="text" placeholder="搜索数据..." class="w-full px-3 py-2 rounded-lg border border-gray-200 text-sm">
      </div>
      <div class="space-y-2">
      <div class="p-2 bg-gray-50 rounded-lg text-sm">
      <p class="font-medium text-dark">2023年环保水质数据</p>
      <p class="text-xs text-gray-500">更新于 2023-12-15</p>
      </div>
      <div class="p-2 bg-gray-50 rounded-lg text-sm">
      <p class="font-medium text-dark">新能源汽车销售数据</p>
      <p class="text-xs text-gray-500">更新于 2023-12-14</p>
      </div>
      <div class="p-2 bg-gray-50 rounded-lg text-sm">
      <p class="font-medium text-dark">城市空气质量报告</p>
      <p class="text-xs text-gray-500">更新于 2023-12-13</p>
      </div>
      </div>
      </div>
      </div>
      <div class="w-64 h-128 bg-primary/10 rounded-3xl absolute top-6 right-6 z-10"></div>
      </div>
      </div>
      </div>
      </div>
      </div>
      <!-- 定制化服务 -->
      <div id="custom-tab" class="tab-content hidden">
      <div class="bg-white rounded-2xl shadow-lg overflow-hidden">
      <div class="grid grid-cols-1 lg:grid-cols-2">
      <div class="bg-gray-50 flex items-center justify-center p-8">
      <div class="w-full max-w-md">
      <div class="relative">
      <div class="bg-white rounded-2xl shadow-xl p-8 border border-gray-200 relative z-20">
      <h4 class="font-bold text-dark mb-8 text-center text-xl">定制化服务流程</h4>
      <!-- 流程图 -->
      <div class="relative">
      <!-- 连接线 -->
      <div class="absolute left-6 top-12 bottom-12 w-0.5 bg-gray-200"></div>
      <!-- 步骤1 -->
      <div class="flex items-start mb-8 relative">
      <div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center text-white font-bold z-10 relative">1</div>
      <div class="ml-6 flex-1">
      <h5 class="font-medium text-dark text-lg">数据采集处理</h5>
      <p class="text-gray-600">多源数据采集与清洗，确保数据质量</p>
      </div>
      </div>
      <!-- 步骤2 -->
      <div class="flex items-start mb-8 relative">
      <div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center text-white font-bold z-10 relative">2</div>
      <div class="ml-6 flex-1">
      <h5 class="font-medium text-dark text-lg">数据传输</h5>
      <p class="text-gray-600">安全加密传输通道，保障数据安全</p>
      </div>
      </div>
      <!-- 步骤3 -->
      <div class="flex items-start mb-8 relative">
      <div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center text-white font-bold z-10 relative">3</div>
      <div class="ml-6 flex-1">
      <h5 class="font-medium text-dark text-lg">数据研究</h5>
      <p class="text-gray-600">深度分析与建模，挖掘数据价值</p>
      </div>
      </div>
      <!-- 步骤4 -->
      <div class="flex items-start relative">
      <div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center text-white font-bold z-10 relative">4</div>
      <div class="ml-6 flex-1">
      <h5 class="font-medium text-dark text-lg">定制化系统</h5>
      <p class="text-gray-600">专属系统开发部署，满足个性化需求</p>
      </div>
      </div>
      </div>
      <!-- 强调低代码开发 -->
      <div class="mt-10 bg-primary/10 rounded-xl p-4">
      <div class="flex items-start">
      <div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center mr-3 flex-shrink-0">
      <i class="fa fa-code text-primary"></i>
      </div>
      <div>
      <h5 class="font-bold text-dark">低代码开发平台支持</h5>
      <p class="text-gray-600 text-sm">可视化配置，快速搭建专属数据系统，降低开发成本，缩短交付周期</p>
      </div>
      </div>
      </div>
      </div>
      <div class="bg-primary/10 rounded-2xl absolute top-6 right-6 bottom-6 left-6 z-10"></div>
      </div>
      </div>
      </div>
      <div class="p-8 md:p-12 flex flex-col justify-center">
      <h3 class="text-2xl font-bold text-dark mb-4">定制化数据服务</h3>
      <p class="text-gray-600 mb-6">针对企业特定需求，提供从数据采集、治理到系统开发的全流程定制化服务，低代码开发平台支持，快速交付</p>
      <ul class="space-y-4 mb-8">
      <li class="flex items-start">
      <i class="fa fa-check-circle text-green-500 mt-1 mr-2 text-xl"></i>
      <span class="text-gray-600">专属数据采集方案设计</span>
      </li>
      <li class="flex items-start">
      <i class="fa fa-check-circle text-green-500 mt-1 mr-2 text-xl"></i>
      <span class="text-gray-600">企业级数据治理服务</span>
      </li>
      <li class="flex items-start">
      <i class="fa fa-check-circle text-green-500 mt-1 mr-2 text-xl"></i>
      <span class="text-gray-600">定制化数据分析模型</span>
      </li>
      <li class="flex items-start">
      <i class="fa fa-check-circle text-green-500 mt-1 mr-2 text-xl"></i>
      <span class="text-gray-600">私有化部署与安全保障</span>
      </li>
      <li class="flex items-start">
      <i class="fa fa-check-circle text-green-500 mt-1 mr-2 text-xl"></i>
      <span class="text-gray-600">低代码开发，快速交付</span>
      </li>
      </ul>
      <a href="#" class="inline-block bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-full font-semibold transition-all shadow-md hover:shadow-lg self-start">
      咨询定制服务
      </a>
      </div>
      </div>
      </div>
      </div>
      </div>
      </section>
      <!-- 数据资产全周期方法论 (Methodology) -->
      <section class="py-20 md:py-28">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center mb-16">
      <h2 class="text-[clamp(1.75rem,3vw,2.5rem)] font-bold text-dark mb-4">全周期政企数据资产服务</h2>
      <p class="text-gray-600 max-w-2xl mx-auto">从数据资源化到资产化，再到价值化、资本化的全流程服务体系</p>
      </div>
      <div class="relative">
      <!-- 连接线 -->
      <div class="hidden md:block absolute top-1/2 left-0 right-0 h-1 bg-gray-200 -translate-y-1/2 z-0"></div>
      <div class="grid grid-cols-1 md:grid-cols-5 gap-4 md:gap-8 relative z-10">
      <!-- 步骤1 -->
      <div class="bg-white rounded-xl p-6 shadow-md card-hover border-t-4 border-primary">
      <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
      <i class="fa fa-lightbulb-o text-primary text-xl"></i>
      </div>
      <h3 class="text-lg font-bold text-dark text-center mb-2">数字化转型</h3>
      <p class="text-gray-600 text-center text-sm">咨询/低代码</p>
      </div>
      <!-- 步骤2 -->
      <div class="bg-white rounded-xl p-6 shadow-md card-hover border-t-4 border-primary">
      <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
      <i class="fa fa-database text-primary text-xl"></i>
      </div>
      <h3 class="text-lg font-bold text-dark text-center mb-2">数据资源化</h3>
      <p class="text-gray-600 text-center text-sm">清洗/加工/目录</p>
      </div>
      <!-- 步骤3 -->
      <div class="bg-white rounded-xl p-6 shadow-md card-hover border-t-4 border-primary">
      <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
      <i class="fa fa-diamond text-primary text-xl"></i>
      </div>
      <h3 class="text-lg font-bold text-dark text-center mb-2">数据资产化</h3>
      <p class="text-gray-600 text-center text-sm">确权/入表/合规</p>
      </div>
      <!-- 步骤4 -->
      <div class="bg-white rounded-xl p-6 shadow-md card-hover border-t-4 border-primary">
      <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
      <i class="fa fa-line-chart text-primary text-xl"></i>
      </div>
      <h3 class="text-lg font-bold text-dark text-center mb-2">资产价值化</h3>
      <p class="text-gray-600 text-center text-sm">场景挖掘/挂牌</p>
      </div>
      <!-- 步骤5 -->
      <div class="bg-white rounded-xl p-6 shadow-md card-hover border-t-4 border-primary">
      <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
      <i class="fa fa-university text-primary text-xl"></i>
      </div>
      <h3 class="text-lg font-bold text-dark text-center mb-2">数据资本化</h3>
      <p class="text-gray-600 text-center text-sm">金融创新/质押/证券化</p>
      </div>
      </div>
      </div>
      </div>
      </section>
      <!-- 成功案例 (Case Studies) -->
      <section id="cases" class="py-20 md:py-28 bg-light">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center mb-16">
      <h2 class="text-[clamp(1.75rem,3vw,2.5rem)] font-bold text-dark mb-4">头部机构的共同选择</h2>
      <p class="text-gray-600 max-w-2xl mx-auto">已为众多知名企业和机构提供专业的数据服务，获得行业广泛认可</p>
      </div>
      <!-- Logo墙 -->
      <div class="bg-white rounded-2xl shadow-lg p-8 mb-16">
      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-8 items-center justify-items-center">
      <div class="grayscale hover:grayscale-0 transition-all duration-300 opacity-70 hover:opacity-100">
      <img src="https://picsum.photos/id/1/120/40" alt="华为" class="h-8 object-contain">
      </div>
      <div class="grayscale hover:grayscale-0 transition-all duration-300 opacity-70 hover:opacity-100">
      <img src="https://picsum.photos/id/2/120/40" alt="中国建设银行" class="h-8 object-contain">
      </div>
      <div class="grayscale hover:grayscale-0 transition-all duration-300 opacity-70 hover:opacity-100">
      <img src="https://picsum.photos/id/3/120/40" alt="招商证券" class="h-8 object-contain">
      </div>
      <div class="grayscale hover:grayscale-0 transition-all duration-300 opacity-70 hover:opacity-100">
      <img src="https://picsum.photos/id/4/120/40" alt="中建八局" class="h-8 object-contain">
      </div>
      </div>
      </div>
      <!-- 案例分类展示 -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <!-- 标准化案例 -->
      <div class="bg-white rounded-2xl shadow-lg p-8 card-hover">
      <h3 class="text-xl font-bold text-dark mb-6 flex items-center">
      <i class="fa fa-th-large text-primary mr-3"></i> 标准化案例
      </h3>
      <div class="space-y-6">
      <div class="flex items-start">
      <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-4 flex-shrink-0">
      <i class="fa fa-building text-primary"></i>
      </div>
      <div>
      <h4 class="font-bold text-dark mb-1">华为基建投融资数据服务</h4>
      <p class="text-gray-600">提供基建行业投融资数据查询、分析服务，支持华为全球基建项目决策</p>
      </div>
      </div>
      <div class="flex items-start">
      <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-4 flex-shrink-0">
      <i class="fa fa-line-chart text-primary"></i>
      </div>
      <div>
      <h4 class="font-bold text-dark mb-1">招商证券数据服务</h4>
      <p class="text-gray-600">提供多行业数据支持，助力招商证券投资分析与风险控制</p>
      </div>
      </div>
      </div>
      </div>
      <!-- 定制化案例 -->
      <div class="bg-white rounded-2xl shadow-lg p-8 card-hover">
      <h3 class="text-xl font-bold text-dark mb-6 flex items-center">
      <i class="fa fa-cogs text-primary mr-3"></i> 定制化案例
      </h3>
      <div class="space-y-6">
      <div class="flex items-start">
      <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-4 flex-shrink-0">
      <i class="fa fa-university text-primary"></i>
      </div>
      <div>
      <h4 class="font-bold text-dark mb-1">中国农业发展银行项目（连续4年）</h4>
      <p class="text-gray-600">定制化农业农村数据服务平台，支持信贷决策与风险控制</p>
      </div>
      </div>
      <div class="flex items-start">
      <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-4 flex-shrink-0">
      <i class="fa fa-code text-primary"></i>
      </div>
      <div>
      <h4 class="font-bold text-dark mb-1">工银科技外部数据采购（连续3年）</h4>
      <p class="text-gray-600">提供多维度外部数据整合服务，支持金融科技产品创新</p>
      </div>
      </div>
      </div>
      </div>
      </div>
      </div>
      </section>
      <!-- 底部行动区 (Call to Action) -->
      <section id="match" class="py-20 md:py-28">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="bg-white rounded-3xl shadow-xl overflow-hidden">
      <div class="grid grid-cols-1 lg:grid-cols-5">
      <div class="lg:col-span-2 gradient-bg p-8 md:p-12 flex flex-col justify-center text-white">
      <h2 class="text-2xl md:text-3xl font-bold mb-4">想获取数据一手资料？<br>或是寻求服务商合作？</h2>
      <p class="opacity-90 mb-6">填写需求，我们将为您快速匹配最合适的资源与服务</p>
      <div class="hidden lg:block">
      <div class="bg-white/20 rounded-xl p-4 mb-4">
      <p class="text-sm">对于服务商：</p>
      <p class="text-sm font-medium">点击发送「数据对接」，提交服务商介绍</p>
      </div>
      <div class="flex items-center space-x-2 text-sm opacity-90">
      <i class="fa fa-envelope"></i>
      <span>contact@mingshu.com</span>
      </div>
      </div>
      </div>
      <div class="lg:col-span-3 p-8 md:p-12">
      <form class="space-y-6">
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
      <div>
      <label for="name" class="block text-gray-700 font-medium mb-2">联系人</label>
      <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all" placeholder="请输入您的姓名">
      </div>
      <div>
      <label for="phone" class="block text-gray-700 font-medium mb-2">联系电话</label>
      <input type="tel" id="phone" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all" placeholder="请输入您的电话">
      </div>
      </div>
      <div>
      <label for="demand" class="block text-gray-700 font-medium mb-2">核心需求</label>
      <textarea id="demand" rows="4" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all" placeholder="请简要描述您的需求（例如：我需要2023年环保水质数据）"></textarea>
      </div>
      <div class="flex items-start">
      <input type="checkbox" id="agreement" class="mt-1 mr-2">
      <label for="agreement" class="text-sm text-gray-600">我同意<a href="#" class="text-primary hover:underline">《用户服务协议》</a>和<a href="#" class="text-primary hover:underline">《隐私政策》</a></label>
      </div>
      <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg font-semibold transition-all shadow-md hover:shadow-lg">
      免费匹配资源
      </button>
      <div class="text-center text-sm text-gray-500 lg:hidden">
      <p>对于服务商：点击发送「数据对接」，提交服务商介绍</p>
      </div>
      </form>
      </div>
      </div>
      </div>
      </div>
      </section>
      </main>
      <!-- 页脚 (Footer) -->
      <footer class="bg-dark text-white py-16">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-12">
      <!-- 公司信息 -->
      <div>
      <div class="flex items-center space-x-2 mb-6">
      <div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center">
      <i class="fa fa-database text-white text-xl"></i>
      </div>
      <span class="text-xl font-bold text-white">明树数据</span>
      </div>
      <p class="text-gray-400 mb-6">全域智慧数据库，打破数据孤岛，激活要素价值</p>
      <div class="flex space-x-4">
      <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-colors">
      <i class="fa fa-weixin text-white"></i>
      </a>
      <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-colors">
      <i class="fa fa-weibo text-white"></i>
      </a>
      <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-colors">
      <i class="fa fa-linkedin text-white"></i>
      </a>
      </div>
      </div>
      <!-- 快速链接 -->
      <div>
      <h3 class="text-lg font-bold mb-6">快速链接</h3>
      <ul class="space-y-3">
      <li><a href="#hero" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
      <li><a href="#data-store" class="text-gray-400 hover:text-white transition-colors">数据商城</a></li>
      <li><a href="#supply-demand" class="text-gray-400 hover:text-white transition-colors">供需大厅</a></li>
      <li><a href="#solutions" class="text-gray-400 hover:text-white transition-colors">解决方案</a></li>
      <li><a href="#cases" class="text-gray-400 hover:text-white transition-colors">成功案例</a></li>
      <li><a href="#about" class="text-gray-400 hover:text-white transition-colors">关于我们</a></li>
      </ul>
      </div>
      <!-- 联系我们 -->
      <div>
      <h3 class="text-lg font-bold mb-6">联系我们</h3>
      <ul class="space-y-3">
      <li class="flex items-start">
      <i class="fa fa-map-marker text-primary mt-1 mr-3"></i>
      <span class="text-gray-400">北京市朝阳区建国路88号明树大厦</span>
      </li>
      <li class="flex items-start">
      <i class="fa fa-phone text-primary mt-1 mr-3"></i>
      <span class="text-gray-400">400-888-9999</span>
      </li>
      <li class="flex items-start">
      <i class="fa fa-envelope text-primary mt-1 mr-3"></i>
      <span class="text-gray-400">contact@mingshu.com</span>
      </li>
      <li class="flex items-start">
      <i class="fa fa-clock-o text-primary mt-1 mr-3"></i>
      <span class="text-gray-400">周一至周五 9:00-18:00</span>
      </li>
      </ul>
      </div>
      <!-- 订阅 -->
      <div>
      <h3 class="text-lg font-bold mb-6">订阅最新资讯</h3>
      <p class="text-gray-400 mb-4">订阅我们的 newsletter，获取数据行业最新动态</p>
      <form class="space-y-3">
      <input type="email" placeholder="您的邮箱地址" class="w-full px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
      <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white px-4 py-3 rounded-lg font-medium transition-all">
      立即订阅
      </button>
      </form>
      </div>
      </div>
      <div class="border-t border-white/10 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
      <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2025 明树数据. 保留所有权利.</p>
      <div class="flex space-x-6">
      <a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">隐私政策</a>
      <a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">服务条款</a>
      <a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">法律声明</a>
      </div>
      </div>
      </div>
      </footer>
      <!-- 返回顶部按钮 -->
      <button id="backToTop" class="fixed bottom-8 right-8 w-12 h-12 rounded-full bg-primary text-white shadow-lg flex items-center justify-center opacity-0 invisible transition-all duration-300 hover:bg-primary/90">
      <i class="fa fa-arrow-up"></i>
      </button>
      <!-- JavaScript -->
      <script>
      // 导航栏滚动效果
      const header = document.getElementById('header');
      window.addEventListener('scroll', () => {
      if (window.scrollY > 50) {
      header.classList.add('shadow-md');
      header.classList.remove('shadow-sm');
      } else {
      header.classList.remove('shadow-md');
      header.classList.add('shadow-sm');
      }
      });
      // 移动端菜单
      const menuBtn = document.getElementById('menuBtn');
      const mobileMenu = document.getElementById('mobileMenu');
      menuBtn.addEventListener('click', () => {
      if (mobileMenu.classList.contains('opacity-0')) {
      mobileMenu.classList.remove('opacity-0', '-translate-y-full', 'pointer-events-none');
      mobileMenu.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
      menuBtn.innerHTML = '<i class="fa fa-times"></i>';
      } else {
      mobileMenu.classList.add('opacity-0', '-translate-y-full', 'pointer-events-none');
      mobileMenu.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
      menuBtn.innerHTML = '<i class="fa fa-bars"></i>';
      }
      });
      // Tab切换
      const tabBtns = document.querySelectorAll('.tab-btn');
      const tabContents = document.querySelectorAll('.tab-content');
      tabBtns.forEach(btn => {
      btn.addEventListener('click', () => {
      // 移除所有active类
      tabBtns.forEach(b => {
      b.classList.remove('active', 'text-primary');
      b.classList.add('text-gray-600');
      });
      tabContents.forEach(c => {
      c.classList.add('hidden');
      c.classList.remove('active');
      });
      // 添加当前active类
      btn.classList.add('active', 'text-primary');
      btn.classList.remove('text-gray-600');
      const tabId = btn.getAttribute('data-tab');
      document.getElementById(`${tabId}-tab`).classList.remove('hidden');
      document.getElementById(`${tabId}-tab`).classList.add('active');
      });
      });
      // 数字增长动画
      const counters = document.querySelectorAll('.counter');
      const observerOptions = {
      threshold: 0.5
      };
      const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
      if (entry.isIntersecting) {
      const counter = entry.target;
      const target = parseInt(counter.getAttribute('data-target'));
      const duration = 2000; // 2秒
      const stepTime = 20; // 每20毫秒更新一次
      const totalSteps = duration / stepTime;
      const stepSize = target / totalSteps;
      let current = 0;
      const updateCounter = () => {
      current += stepSize;
      if (current < target) {
      if (target >= 10000) {
      counter.innerText = Math.ceil(current).toLocaleString();
      } else {
      counter.innerText = Math.ceil(current);
      }
      requestAnimationFrame(updateCounter);
      } else {
      if (target >= 10000) {
      counter.innerText = target.toLocaleString();
      } else {
      counter.innerText = target;
      }
      }
      };
      updateCounter();
      observer.unobserve(counter);
      }
      });
      }, observerOptions);
      counters.forEach(counter => {
      observer.observe(counter);
      });
      // 平滑滚动
      document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
      e.preventDefault();
      const targetId = this.getAttribute('href');
      if (target
      public/vite.svg 0 → 100644
      View file @ ad574e36
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
      \ No newline at end of file
      src/App.css 0 → 100644
      View file @ ad574e36
      #root {
      max-width: 1280px;
      margin: 0 auto;
      padding: 2rem;
      text-align: center;
      }
      .logo {
      height: 6em;
      padding: 1.5em;
      will-change: filter;
      transition: filter 300ms;
      }
      .logo:hover {
      filter: drop-shadow(0 0 2em #646cffaa);
      }
      .logo.react:hover {
      filter: drop-shadow(0 0 2em #61dafbaa);
      }
      @keyframes logo-spin {
      from {
      transform: rotate(0deg);
      }
      to {
      transform: rotate(360deg);
      }
      }
      @media (prefers-reduced-motion: no-preference) {
      a:nth-of-type(2) .logo {
      animation: logo-spin infinite 20s linear;
      }
      }
      .card {
      padding: 2em;
      }
      .read-the-docs {
      color: #888;
      }
      src/App.jsx 0 → 100644
      View file @ ad574e36
      This source diff could not be displayed because it is too large. You can view the blob instead.
      src/assets/react.svg 0 → 100644
      View file @ ad574e36
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
      \ No newline at end of file
      src/index.css 0 → 100644
      View file @ ad574e36
      @tailwind base;
      @tailwind components;
      @tailwind utilities;
      * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      }
      body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      }
      @media (max-width: 800px) {
      .logo-name{
      font-size: 1rem;
      }
      }
      src/main.jsx 0 → 100644
      View file @ ad574e36
      import { StrictMode } from 'react'
      import { createRoot } from 'react-dom/client'
      import './index.css'
      import App from './App.jsx'
      createRoot(document.getElementById('root')).render(
      <StrictMode>
      <App />
      </StrictMode>,
      )
      start.bat 0 → 100644
      View file @ ad574e36
      @echo off
      chcp 65001 >nul
      title 明树数据 (Bridata) React 项目
      echo ==========================================
      echo 明树数据 (Bridata) React 项目
      echo ==========================================
      echo.
      cd /d "%~dp0"
      :: 检查是否已安装依赖
      if not exist "node_modules" (
      echo 📦 正在安装依赖...
      call npm install
      echo.
      )
      echo 🚀 正在启动开发服务器...
      echo.
      echo 访问地址: http://localhost:5173/
      echo.
      echo 按 Ctrl+C 停止服务器
      echo ==========================================
      echo.
      call npm run dev
      pause
      start.sh 0 → 100644
      View file @ ad574e36
      #!/bin/bash
      # 明树数据 React 项目启动脚本
      # Bridata React Project Startup Script
      cd "$(dirname "$0")"
      echo "=========================================="
      echo " 明树数据 (Bridata) React 项目"
      echo "=========================================="
      echo ""
      # 检查是否已安装依赖
      if [ ! -d "node_modules" ]; then
      echo "📦 正在安装依赖..."
      npm install
      echo ""
      fi
      echo "🚀 正在启动开发服务器..."
      echo ""
      echo "访问地址: http://localhost:5173/"
      echo ""
      echo "按 Ctrl+C 停止服务器"
      echo "=========================================="
      echo ""
      npm run dev
      tailwind.config.js 0 → 100644
      View file @ ad574e36
      /** @type {import('tailwindcss').Config} */
      export default {
      content: [
      "./index.html",
      "./src/**/*.{js,ts,jsx,tsx}",
      ],
      theme: {
      extend: {},
      },
      plugins: [],
      }
      vite.config.js 0 → 100644
      View file @ ad574e36
      import { defineConfig } from 'vite'
      import react from '@vitejs/plugin-react'
      // https://vite.dev/config/
      export default defineConfig({
      plugins: [react()],
      })
      Markdown is supported
      0% or
      You are about to add 0 people to the discussion. Proceed with caution.
      Finish editing this message first!
      Please register or to comment