明树Git Lab

Skip to content

B
bridata-website-frontend
Commit e02787f0 authored by yangyajing's avatar yangyajing
Browse files
Options

修改内容结构样式

parent 63a76923
Hide whitespace changes
Inline Side-by-side
Showing with 761 additions and 19 deletions
public/channel.html 0 → 100644
View file @ e02787f0
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据新通道 - DataSphere</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<!-- Custom Fonts: Inter for tech feel, Noto Sans SC for Chinese (Matching Bridata style) -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
<style>
/* CSS variables based on Bridata's dark blue/cyan theme */
:root {
--color-primary: #00CFFF; /* Bright Cyan - Accent */
--color-dark-bg: #0d1117; /* Deep Charcoal - Main BG */
--color-card-bg: #10131d; /* Slightly lighter card BG */
--color-secondary-blue: #3b82f6; /* Medium Blue - Gradient secondary */
--color-text-light: #e5e7eb; /* Gray 100 - Primary text */
--color-text-subtle: #9ca3af; /* Gray 400 - Subtle text */
--color-border: #1f2937; /* Gray 800 - Borders */
}
body {
font-family: 'Noto Sans SC', 'Inter', sans-serif;
background-color: var(--color-dark-bg);
color: var(--color-text-light);
line-height: 1.6;
}
/* Gradient Text Helper (Matching Bridata's blue-cyan gradient) */
.text-accent-gradient {
background: linear-gradient(90deg, var(--color-primary), var(--color-secondary-blue));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent; /* Fallback for browsers */
}
/* Primary Accent Color Utility */
.text-primary { color: var(--color-primary); }
.bg-card { background-color: var(--color-card-bg); }
.border-primary { border-color: var(--color-primary); }
/* Custom Callout Button Style */
.btn-callout {
background: linear-gradient(90deg, #00CFFF, #3b82f6);
box-shadow: 0 4px 15px rgba(0, 207, 255, 0.4);
transition: transform 0.2s, box-shadow 0.2s;
}
.btn-callout:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 207, 255, 0.7);
}
/* Card Hover Effect */
.card-hover {
transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 207, 255, 0.15);
border-color: var(--color-primary);
}
/* Modal specific styling for backdrop blur */
.modal {
background-color: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
/* Custom Logo Design: DataSphere */
.logo-text {
font-size: 1.875rem; /* 30px */
font-weight: 900; /* Extra bold */
letter-spacing: -0.05em;
}
</style>
</head>
<body class="min-h-screen">
<!-- Custom Contact/Ecosystem Modal Structure -->
<div id="contactModal" class="modal fixed inset-0 z-50 hidden flex items-center justify-center p-4" onclick="closeModal(event)">
<div class="bg-card rounded-xl shadow-2xl w-full max-w-lg p-6 md:p-8 relative border border-gray-700" onclick="event.stopPropagation()">
<!-- Close Button -->
<button onclick="hideModal()" class="absolute top-4 right-4 text-gray-500 hover:text-white transition">
<i class="fas fa-times text-2xl"></i>
</button>
<h3 id="modalTitle" class="text-2xl font-bold text-primary mb-2 border-b border-gray-700 pb-2">提交您的需求</h3>
<p id="modalSubtitle" class="text-sm text-gray-400 mb-6"></p>
<form id="contactForm" class="space-y-4">
<!-- Dynamic Role Selection -->
<div id="roleSelection" class="flex space-x-4 mb-4 flex-wrap gap-y-2">
<!-- Roles will be inserted here dynamically -->
</div>
<!-- Common Fields -->
<div>
<label for="name" class="block text-sm font-medium text-gray-400">您的姓名</label>
<input type="text" id="name" name="name" required class="mt-1 block w-full bg-[#181a20] border border-[#374151] rounded-lg p-3 text-white focus:ring-primary focus:border-primary">
</div>
<div>
<label for="contact" class="block text-sm font-medium text-gray-400">联系方式 (电话/邮箱)</label>
<input type="text" id="contact" name="contact" required class="mt-1 block w-full bg-[#181a20] border border-[#374151] rounded-lg p-3 text-white focus:ring-primary focus:border-primary">
</div>
<div>
<label for="description" class="block text-sm font-medium text-gray-400">主要需求描述</label>
<textarea id="description" name="description" rows="4" required class="mt-1 block w-full bg-[#181a20] border border-[#374151] rounded-lg p-3 text-white focus:ring-primary focus:border-primary"></textarea>
</div>
<button type="submit" class="w-full btn-callout text-white font-bold py-3 rounded-lg mt-6">
提交信息
</button>
</form>
<div id="successMessage" class="hidden text-center mt-4 text-green-400">
<i class="fas fa-check-circle mr-2"></i> 提交成功！我们将尽快与您联系。
</div>
</div>
</div>
<!-- Navigation Bar -->
<header class="sticky top-0 z-40 bg-dark-bg/90 backdrop-blur-sm shadow-xl border-b border-gray-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
<!-- Logo: 数据新通道 -->
<a href="#hero" class="flex items-center space-x-2">
<!-- Simple Logo Icon: Abstract Data Flow/Sphere -->
<svg class="w-8 h-8 text-primary" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2L2 7V17L12 22L22 17V7L12 2ZM12 4.148L19.782 8.5L12 12.852L4.218 8.5L12 4.148ZM4 16.5L12 20.852L20 16.5V9.5L12 13.852L4 9.5V16.5Z" fill="currentColor"/>
</svg>
<span class="logo-text text-white">数据<span class="text-primary">新通道</span></span>
</a>
<!-- Navigation Links -->
<nav class="hidden md:flex space-x-8 text-sm font-medium">
<a href="#metrics" class="text-gray-400 hover:text-primary transition duration-300">核心指标</a>
<a href="#scenarios" class="text-gray-400 hover:text-primary transition duration-300">核心场景</a>
<a href="#process" class="text-gray-400 hover:text-primary transition duration-300">服务体系</a>
<a href="#ecosystem" class="text-gray-400 hover:text-primary transition duration-300">生态共建</a>
</nav>
<button onclick="showModal('customize_demand')" class="hidden sm:inline-flex px-4 py-2 bg-primary text-white text-sm font-semibold rounded-lg hover:bg-opacity-90 transition">
定制解决方案 <i class="fas fa-arrow-right ml-2 self-center"></i>
</button>
</div>
</header>
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- 1. Hero Section -->
<section id="hero" class="py-20 md:py-32 text-center relative overflow-hidden">
<!-- Abstract Background Lines -->
<div class="absolute inset-0 z-0 opacity-10" style="background-image: repeating-linear-gradient(45deg, var(--color-border) 1px, transparent 1px, transparent 15px); background-size: 30px 30px;"></div>
<div class="relative z-10">
<!-- Product Tagline -->
<p class="text-xl font-semibold mb-4 text-primary tracking-widest uppercase">
场景驱动型数据价值共生平台
</p>
<!-- Slogan -->
<h1 class="text-5xl md:text-7xl font-extrabold mb-6 leading-tight">
场景驱动 <span class="text-accent-gradient">释放数据价值</span>
</h1>
<!-- Core Value -->
<p class="max-w-4xl mx-auto text-xl text-gray-400 mb-10">
告别传统的“货架式”交易。数域以业务场景为核心，提供从数据要素匹配、治理、隐私计算到资产化融资的全生命周期服务生态新通道。
</p>
<!-- 3. Interactive Button: Custom Solution -->
<button onclick="showModal('customize_demand')" class="btn-callout text-white font-bold text-lg px-8 py-4 rounded-xl">
提交您的需求，获取定制化解决方案 <i class="fas fa-arrow-circle-right ml-3"></i>
</button>
</div>
</section>
<!-- 4. Platform Metrics -->
<section id="metrics" class="py-20 md:py-24 border-t border-gray-800">
<h2 class="text-4xl font-extrabold text-center mb-16">
<span class="text-primary">平台能力</span>核心指标
</h2>
<div class="grid grid-cols-1 md:grid-cols-2">
<div class="grid grid-cols-2 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
<!-- Metric 1: 链接外部生态数据 -->
<div class="p-6 bg-card rounded-xl text-center border border-gray-700 shadow-lg card-hover">
<i class="fas fa-link text-3xl text-primary mb-2"></i>
<span class="block text-4xl font-extrabold text-accent-gradient mb-1">100亿+</span>
<span class="block text-sm text-gray-400">链接外部生态数据</span>
</div>
<!-- Metric 2: 优质数据源渠道 -->
<div class="p-6 bg-card rounded-xl text-center border border-gray-700 shadow-lg card-hover">
<i class="fas fa-cubes text-3xl text-primary mb-2"></i>
<span class="block text-4xl font-extrabold text-accent-gradient mb-1">50000+</span>
<span class="block text-sm text-gray-400">优质数据源渠道</span>
</div>
<!-- Metric 3: 数据服务商生态 -->
<div class="p-6 bg-card rounded-xl text-center border border-gray-700 shadow-lg card-hover">
<i class="fas fa-users-gear text-3xl text-primary mb-2"></i>
<span class="block text-4xl font-extrabold text-accent-gradient mb-1">3000+</span>
<span class="block text-sm text-gray-400">数据服务商生态</span>
</div>
<!-- Metric 4: 数据交易经验 -->
<div class="p-6 bg-card rounded-xl text-center border border-gray-700 shadow-lg card-hover">
<i class="fas fa-clock-rotate-left text-3xl text-primary mb-2"></i>
<span class="block text-4xl font-extrabold text-accent-gradient mb-1">8年</span>
<span class="block text-sm text-gray-400">数据交易经验</span>
</div>
<!-- Metric 5: 服务各类数据客户 -->
<div class="p-6 bg-card rounded-xl text-center border border-gray-700 shadow-lg card-hover">
<i class="fas fa-handshake text-3xl text-primary mb-2"></i>
<span class="block text-4xl font-extrabold text-accent-gradient mb-1">1万+</span>
<span class="block text-sm text-gray-400">服务各类数据客户</span>
</div>
<!-- Metric 6: 服务数据资产 -->
<div class="p-6 bg-card rounded-xl text-center border border-gray-700 shadow-lg card-hover">
<i class="fas fa-sack-dollar text-3xl text-primary mb-2"></i>
<span class="block text-4xl font-extrabold text-accent-gradient mb-1">1亿+</span>
<span class="block text-sm text-gray-400">服务数据资产</span>
</div>
</div>
<div class="w-full h-[400px] flex justify-center items-center relative overflow-hidden perspective-container">
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[300px] h-[300px] bg-[#00FFC2]/10 blur-[80px] rounded-full pointer-events-none"></div>
<div class="carousel-spinner">
<div
class="carousel-item absolute top-1/2 left-1/2 -ml-[80px] -mt-[110px] w-[160px] h-[220px]"
style="transform: rotateY(0deg) translateZ(180px)"
>
<img src="./imgs/gss.jpg" />
</div>
<div
class="carousel-item absolute top-1/2 left-1/2 -ml-[80px] -mt-[110px] w-[160px] h-[220px]"
style="transform: rotateY(60deg) translateZ(180px)"
>
<img src="./imgs/bf.png" />
</div>
<div
class="carousel-item absolute top-1/2 left-1/2 -ml-[80px] -mt-[110px] w-[160px] h-[220px]"
style="transform: rotateY(120deg) translateZ(180px)"
>
<img src="./imgs/guiss.png" />
</div>
<div
class="carousel-item absolute top-1/2 left-1/2 -ml-[80px] -mt-[110px] w-[160px] h-[220px]"
style="transform: rotateY(180deg) translateZ(180px)"
>
<img src="./imgs/hnsjs.JPEG" />
</div>
<div
class="carousel-item absolute top-1/2 left-1/2 -ml-[80px] -mt-[110px] w-[160px] h-[220px]"
style="transform: rotateY(240deg) translateZ(180px)"
>
<img src="./imgs/sss.jpg" />
</div>
<div
class="carousel-item absolute top-1/2 left-1/2 -ml-[80px] -mt-[110px] w-[160px] h-[220px]"
style="transform: rotateY(300deg) translateZ(180px)"
>
<img src="./imgs/shenss.png" />
</div>
</div>
</div>
</div>
</div>
<style>
.perspective-container {
perspective: 1000px;
}
.carousel-spinner {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
animation: spin 20s infinite linear;
}
.carousel-item {
backface-visibility: visible; /* Make visible from back for 3D effect or hidden if preferred */
}
@keyframes spin {
from { transform: rotateY(0deg); }
to { transform: rotateY(-360deg); }
}
</style>
</section>
<!-- 5. Core Scenarios -->
<section id="scenarios" class="py-20 md:py-24 border-t border-gray-800">
<div class="text-center mb-12">
<h2 class="text-4xl font-extrabold mb-3">
赋能行业 <span class="text-primary">核心场景</span>
</h2>
<p class="max-w-3xl mx-auto text-lg text-gray-500">
数域平台致力于连接数据和业务，驱动定制化场景创新，实现数据的最大价值。
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Scenario 1: 信贷风控与资产安全 -->
<div class="card-hover bg-card p-6 rounded-xl border border-gray-700">
<h3 class="text-xl font-bold text-primary mb-2 flex items-center"><i class="fas fa-shield-halved mr-3"></i>信贷风控与资产安全</h3>
<p class="text-sm text-gray-400 mb-4">以穿透式视角提供多维数据，降低信贷不良率，保障资产安全。</p>
<div class="space-y-2 text-sm">
<p><strong class="text-white">要素来源:</strong> 主体业绩、财政债务、项目多维数据</p>
<p><strong class="text-white">场景效果:</strong> 贷前尽调、贷中预警、贷后核查</p>
</div>
<div class="mt-4 flex flex-wrap gap-2">
<span class="text-xs bg-red-900/50 text-red-300 px-2 py-0.5 rounded-full">#金融</span>
<span class="text-xs bg-yellow-900/50 text-yellow-300 px-2 py-0.5 rounded-full">#风控</span>
</div>
</div>
<!-- Scenario 2: 数据资产ABS/证券化 -->
<div class="card-hover bg-card p-6 rounded-xl border border-gray-700">
<h3 class="text-xl font-bold text-primary mb-2 flex items-center"><i class="fas fa-chart-line mr-3"></i>数据资产ABS/证券化</h3>
<p class="text-sm text-gray-400 mb-4">将合规优质数据转化为稳定现金流，发行标准化证券，实现数据价值显性化。</p>
<div class="space-y-2 text-sm">
<p><strong class="text-white">要素来源:</strong> 合规数据资产、运营数据、确权信息</p>
<p><strong class="text-white">场景效果:</strong> 低成本融资、优化企业财务结构</p>
</div>
<div class="mt-4 flex flex-wrap gap-2">
<span class="text-xs bg-green-900/50 text-green-300 px-2 py-0.5 rounded-full">#资产化</span>
<span class="text-xs bg-blue-900/50 text-blue-300 px-2 py-0.5 rounded-full">#融资</span>
</div>
</div>
<!-- Scenario 3: 数据资产+融资租赁 -->
<div class="card-hover bg-card p-6 rounded-xl border border-gray-700">
<h3 class="text-xl font-bold text-primary mb-2 flex items-center"><i class="fas fa-file-invoice-dollar mr-3"></i>数据资产+融资租赁</h3>
<p class="text-sm text-gray-400 mb-4">通过“售后回租”等模式，协助城投公司将沉睡数据转化为经营性资产。</p>
<div class="space-y-2 text-sm">
<p><strong class="text-white">要素来源:</strong> 公共数据资源、政府运营数据</p>
<p><strong class="text-white">场景效果:</strong> 盘活隐形资产、获取合规资金支持</p>
</div>
<div class="mt-4 flex flex-wrap gap-2">
<span class="text-xs bg-purple-900/50 text-purple-300 px-2 py-0.5 rounded-full">#城投</span>
<span class="text-xs bg-teal-900/50 text-teal-300 px-2 py-0.5 rounded-full">#租赁</span>
</div>
</div>
<!-- Scenario 4: 交通量预测和OD分析 -->
<div class="card-hover bg-card p-6 rounded-xl border border-gray-700">
<h3 class="text-xl font-bold text-primary mb-2 flex items-center"><i class="fas fa-route mr-3"></i>交通量预测和OD分析</h3>
<p class="text-sm text-gray-400 mb-4">融合多源交通数据，构建基于竞争路径的预测体系，支撑公路新建与改扩建。</p>
<div class="space-y-2 text-sm">
<p><strong class="text-white">要素来源:</strong> 货车轨迹、门架、信令、收费站数据</p>
<p><strong class="text-white">场景效果:</strong> 精准预测交通量、辅助投资决策</p>
</div>
<div class="mt-4 flex flex-wrap gap-2">
<span class="text-xs bg-indigo-900/50 text-indigo-300 px-2 py-0.5 rounded-full">#交通</span>
<span class="text-xs bg-pink-900/50 text-pink-300 px-2 py-0.5 rounded-full">#预测</span>
</div>
</div>
<!-- Scenario 5: 高速公路引流增收 -->
<div class="card-hover bg-card p-6 rounded-xl border border-gray-700">
<h3 class="text-xl font-bold text-primary mb-2 flex items-center"><i class="fas fa-car-side mr-3"></i>高速公路引流增收</h3>
<p class="text-sm text-gray-400 mb-4">通过大数据分析周边车流和潜在客群，制定精准营销策略，提升收费站收入。</p>
<div class="space-y-2 text-sm">
<p><strong class="text-white">要素来源:</strong> 车辆画像、客群分布、消费行为数据</p>
<p><strong class="text-white">场景效果:</strong> 提升通行量、增加非现金流收入</p>
</div>
<div class="mt-4 flex flex-wrap gap-2">
<span class="text-xs bg-yellow-900/50 text-yellow-300 px-2 py-0.5 rounded-full">#增收</span>
<span class="text-xs bg-orange-900/50 text-orange-300 px-2 py-0.5 rounded-full">#营销</span>
</div>
</div>
<!-- Scenario 6: 智能风险预警与管理 -->
<div class="card-hover bg-card p-6 rounded-xl border border-gray-700">
<h3 class="text-xl font-bold text-primary mb-2 flex items-center"><i class="fas fa-bell mr-3"></i>智能风险预警与管理</h3>
<p class="text-sm text-gray-400 mb-4">基于实时数据流和AI模型，对项目进度、财务、环境等风险进行动态监控和预警。</p>
<div class="space-y-2 text-sm">
<p><strong class="text-white">要素来源:</strong> 实时运营数据、公共舆情、监管数据</p>
<p><strong class="text-white">场景效果:</strong> 风险事件提前干预、降低损失</p>
</div>
<div class="mt-4 flex flex-wrap gap-2">
<span class="text-xs bg-red-900/50 text-red-300 px-2 py-0.5 rounded-full">#管理</span>
<span class="text-xs bg-gray-900/50 text-gray-300 px-2 py-0.5 rounded-full">#监控</span>
</div>
</div>
<!-- Scenario 7: 精准营销与客户洞察 -->
<div class="card-hover bg-card p-6 rounded-xl border border-gray-700">
<h3 class="text-xl font-bold text-primary mb-2 flex items-center"><i class="fas fa-bullseye mr-3"></i>精准营销与客户洞察</h3>
<p class="text-sm text-gray-400 mb-4">通过客户画像、行为轨迹、兴趣偏好数据，实现高效率、低成本的个性化营销活动。</p>
<div class="space-y-2 text-sm">
<p><strong class="text-white">要素来源:</strong> 消费行为、地理位置、App使用数据</p>
<p><strong class="text-white">场景效果:</strong> 提高营销转化率、优化客户体验</p>
</div>
<div class="mt-4 flex flex-wrap gap-2">
<span class="text-xs bg-green-900/50 text-green-300 px-2 py-0.5 rounded-full">#营销</span>
<span class="text-xs bg-teal-900/50 text-teal-300 px-2 py-0.5 rounded-full">#洞察</span>
</div>
</div>
<!-- Scenario 8: 供应链优化与追溯 -->
<div class="card-hover bg-card p-6 rounded-xl border border-gray-700">
<h3 class="text-xl font-bold text-primary mb-2 flex items-center"><i class="fas fa-truck-moving mr-3"></i>供应链优化与追溯</h3>
<p class="text-sm text-gray-400 mb-4">整合物流、仓储、交易数据，实现供应链全流程可视化、风险预警和效率提升。</p>
<div class="space-y-2 text-sm">
<p><strong class="text-white">要素来源:</strong> 仓储记录、物流轨迹、交易订单数据</p>
<p><strong class="text-white">场景效果:</strong> 降低库存成本、提高物流效率、实现商品溯源</p>
</div>
<div class="mt-4 flex flex-wrap gap-2">
<span class="text-xs bg-indigo-900/50 text-indigo-300 px-2 py-0.5 rounded-full">#供应链</span>
<span class="text-xs bg-orange-900/50 text-orange-300 px-2 py-0.5 rounded-full">#物流</span>
</div>
</div>
<!-- Scenario 9: 医疗健康与疾病预测 -->
<div class="card-hover bg-card p-6 rounded-xl border border-gray-700">
<h3 class="text-xl font-bold text-primary mb-2 flex items-center"><i class="fas fa-notes-medical mr-3"></i>医疗健康与疾病预测</h3>
<p class="text-sm text-gray-400 mb-4">利用医疗病例、公共卫生、环境数据，辅助疾病风险评估、公共卫生决策和医疗资源合理分配。</p>
<div class="space-y-2 text-sm">
<p><strong class="text-white">要素来源:</strong> 电子病历、公共卫生数据、环境监测</p>
<p><strong class="text-white">场景效果:</strong> 辅助诊疗决策、提升公共卫生管理水平</p>
</div>
<div class="mt-4 flex flex-wrap gap-2">
<span class="text-xs bg-purple-900/50 text-purple-300 px-2 py-0.5 rounded-full">#医疗</span>
<span class="text-xs bg-blue-900/50 text-blue-300 px-2 py-0.5 rounded-full">#公共服务</span>
</div>
</div>
</div>
<!-- Interactive Button: Exclusive Scenario -->
<div class="text-center mt-16">
<button onclick="showModal('customize_scenario')" class="btn-callout text-white font-bold text-lg px-10 py-4 rounded-xl">
定制专属场景需求 <i class="fas fa-arrow-alt-circle-right ml-3"></i>
</button>
</div>
</section>
<!-- 6. Service Lifecycle (Process) -->
<section id="process" class="py-20 md:py-24 border-t border-gray-800">
<div class="text-center mb-16">
<h2 class="text-4xl font-extrabold mb-3">
场景驱动，<span class="text-primary">全流程服务体系</span>
</h2>
<p class="max-w-3xl mx-auto text-lg text-gray-500">
不仅是交易，更是全生命周期赋能。
</p>
</div>
<div class="relative max-w-6xl mx-auto">
<!-- Flow Line/Path (Zigzag for visual interest) -->
<div class="hidden md:block absolute top-1/2 left-0 w-full h-1 bg-gray-700 transform -translate-y-1/2"></div>
<div class="grid grid-cols-1 md:grid-cols-5 gap-8">
<!-- Step 1: 场景挖掘 -->
<div class="process-step-card text-center relative md:pt-10 bg-card p-6 rounded-xl border border-gray-700 shadow-lg hover:border-primary/50 transition">
<div class="p-4 rounded-full bg-primary-dark border-2 border-primary inline-flex text-2xl mb-4 text-primary"><i class="fas fa-search"></i></div>
<h3 class="text-xl font-bold text-white mb-2">场景挖掘</h3>
<p class="text-sm text-gray-400">洞察业务痛点，转化为高效、可落地的数据化解决方案，明确价值目标。</p>
<span class="hidden md:block absolute top-0 left-1/2 transform -translate-x-1/2 text-5xl font-extrabold text-primary opacity-10">01</span>
</div>
<!-- Step 2: 数据要素匹配 -->
<div class="process-step-card text-center relative md:pt-10 bg-card p-6 rounded-xl border border-gray-700 shadow-lg hover:border-primary/50 transition">
<div class="p-4 rounded-full bg-primary-dark border-2 border-primary inline-flex text-2xl mb-4 text-primary"><i class="fas fa-sitemap"></i></div>
<h3 class="text-xl font-bold text-white mb-2">数据要素匹配</h3>
<p class="text-sm text-gray-400">聚合多源数据资源，通过AI算法实现要素与业务场景的毫秒级精准对接。</p>
<span class="hidden md:block absolute top-0 left-1/2 transform -translate-x-1/2 text-5xl font-extrabold text-primary opacity-10">02</span>
</div>
<!-- Step 3: 隐私技术 -->
<div class="process-step-card text-center relative md:pt-10 bg-card p-6 rounded-xl border border-gray-700 shadow-lg hover:border-primary/50 transition">
<div class="p-4 rounded-full bg-primary-dark border-2 border-primary inline-flex text-2xl mb-4 text-primary"><i class="fas fa-fingerprint"></i></div>
<h3 class="text-xl font-bold text-white mb-2">隐私技术</h3>
<p class="text-sm text-gray-400">采用隐私计算、联邦学习等先进技术，确保数据**可用不可见**，合规高效应用。</p>
<span class="hidden md:block absolute top-0 left-1/2 transform -translate-x-1/2 text-5xl font-extrabold text-primary opacity-10">03</span>
</div>
<!-- Step 4: 可信安全计算应用 -->
<div class="process-step-card text-center relative md:pt-10 bg-card p-6 rounded-xl border border-gray-700 shadow-lg hover:border-primary/50 transition">
<div class="p-4 rounded-full bg-primary-dark border-2 border-primary inline-flex text-2xl mb-4 text-primary"><i class="fas fa-cogs"></i></div>
<h3 class="text-xl font-bold text-white mb-2">可信安全计算应用</h3>
<p class="text-sm text-gray-400">构建可信应用环境，将数据能力深度融入客户业务流，实现安全与效率的平衡。</p>
<span class="hidden md:block absolute top-0 left-1/2 transform -translate-x-1/2 text-5xl font-extrabold text-primary opacity-10">04</span>
</div>
<!-- Step 5: 资产赋能 -->
<div class="process-step-card text-center relative md:pt-10 bg-card p-6 rounded-xl border border-gray-700 shadow-lg hover:border-primary/50 transition">
<div class="p-4 rounded-full bg-primary-dark border-2 border-primary inline-flex text-2xl mb-4 text-primary"><i class="fas fa-sack-dollar"></i></div>
<h3 class="text-xl font-bold text-white mb-2">资产赋能</h3>
<p class="text-sm text-gray-400">辅助数据资产确权、登记，高效对接金融资本，实现数据资产价值最大化。</p>
<span class="hidden md:block absolute top-0 left-1/2 transform -translate-x-1/2 text-5xl font-extrabold text-primary opacity-10">05</span>
</div>
</div>
</div>
</section>
<!-- 7. Ecosystem Section -->
<section id="ecosystem" class="py-20 md:py-24 border-t border-gray-800">
<div class="text-center mb-12">
<h2 class="text-4xl font-extrabold mb-3">
共建 <span class="text-accent-gradient">数据价值共生</span> 生态
</h2>
<p class="max-w-3xl mx-auto text-lg text-gray-500">
数域 DataSphere 诚邀三类核心合作伙伴加入，共同为客户创造卓越的数据服务和解决方案。
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
<!-- Partner 1: 数据源提供方 -->
<div class="bg-card p-6 rounded-xl border border-gray-700 text-center hover:shadow-2xl hover:shadow-primary/20 transition duration-300 card-hover">
<i class="fas fa-server text-4xl text-primary mb-4"></i>
<h3 class="text-xl font-bold text-white mb-2">数据源提供方</h3>
<p class="text-sm text-gray-400">将您的合规数据资产转化为持续、稳定的收益。</p>
<button onclick="showModal('partner_data_source')" class="mt-4 px-6 py-2 bg-primary text-white text-sm font-semibold rounded-lg hover:bg-opacity-90 transition">
加入成为生态伙伴
</button>
</div>
<!-- Partner 2: 数据技术服务商 -->
<div class="bg-card p-6 rounded-xl border border-gray-700 text-center hover:shadow-2xl hover:shadow-primary/20 transition duration-300 card-hover">
<i class="fas fa-cogs text-4xl text-primary mb-4"></i>
<h3 class="text-xl font-bold text-white mb-2">数据技术服务商</h3>
<p class="text-sm text-gray-400">结合平台资源，加速技术产品化，拓展市场应用边界。</p>
<button onclick="showModal('partner_tech_service')" class="mt-4 px-6 py-2 bg-primary text-white text-sm font-semibold rounded-lg hover:bg-opacity-90 transition">
加入成为生态伙伴
</button>
</div>
<!-- Partner 3: 业务合作方 -->
<div class="bg-card p-6 rounded-xl border border-gray-700 text-center hover:shadow-2xl hover:shadow-primary/20 transition duration-300 card-hover">
<i class="fas fa-handshake text-4xl text-primary mb-4"></i>
<h3 class="text-xl font-bold text-white mb-2">业务合作方</h3>
<p class="text-sm text-gray-400">利用数域能力，为您的终端客户提供卓越的定制化解决方案。</p>
<button onclick="showModal('partner_business')" class="mt-4 px-6 py-2 bg-primary text-white text-sm font-semibold rounded-lg hover:bg-opacity-90 transition">
加入成为生态伙伴
</button>
</div>
</div>
</section>
</main>
<footer class="bg-gray-900 border-t border-gray-800 mt-10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 text-center text-sm text-gray-500">
&copy; 2025 北京明树数据科技有限公司. All Rights Reserved. | <a href="http://www.bridata.com" target="_blank" class="hover:text-primary">www.bridata.com</a>
</div>
</footer>
<script>
const modal = document.getElementById('contactModal');
const modalTitle = document.getElementById('modalTitle');
const modalSubtitle = document.getElementById('modalSubtitle');
const roleSelection = document.getElementById('roleSelection');
const descriptionTextarea = document.getElementById('description');
const successMessage = document.getElementById('successMessage');
const contactForm = document.getElementById('contactForm');
// Configuration for different modal types
const modalConfigs = {
// --- 1. 定制化解决方案 (3 Roles) ---
'customize_demand': {
title: '需求定制：获取解决方案',
subtitle: '请选择您的角色，我们将为您匹配最合适的服务。',
roles: [
{ id: 'roleDemand', label: '我是需求方', placeholder: '描述您的业务痛点和期望达到的效果' },
{ id: 'roleSupply', label: '我是供给方', placeholder: '描述您能提供的核心数据或服务资源' },
{ id: 'roleIndustry', label: '我是产业伙伴', placeholder: '描述您所在行业的数据需求或合作意向' }
],
defaultRole: 'roleDemand'
},
// --- 2. 定制专属场景需求 (Fixed Scenario) ---
'customize_scenario': {
title: '专属场景定制',
subtitle: '请填写您的具体需求，我们将为您提供定制化场景创新方案。',
roles: [], // No roles selection
defaultPlaceholder: '我需要选址开店，请提供基于交通/消费数据的分析方案。'
},
// --- 3. 成为生态合作伙伴 (Data Source) ---
'partner_data_source': {
title: '成为生态伙伴：【数据源提供方】',
subtitle: '欢迎加入数据价值共生生态，请详细描述您的数据资产。',
roles: [], // No role selection
defaultPlaceholder: '描述您持有的数据资产类型及规模（如：车辆轨迹、信令数据等）。'
},
// --- 4. 成为生态合作伙伴 (Tech Service) ---
'partner_tech_service': {
title: '成为生态伙伴：【技术服务商】',
subtitle: '欢迎加入数据价值共生生态，请详细描述您的技术能力。',
roles: [], // No role selection
defaultPlaceholder: '描述您的核心技术能力（如：隐私计算、AI算法、数据治理工具等）。'
},
// --- 5. 成为生态合作伙伴 (Business Partner) ---
'partner_business': {
title: '成为生态伙伴：【业务合作方】',
subtitle: '欢迎加入数据价值共生生态，请描述您的合作意向。',
roles: [], // No role selection
defaultPlaceholder: '描述您的市场覆盖范围及业务合作模式（如：行业渠道合作、联合解决方案推广等）。'
}
};
let currentConfigKey = '';
/**
* Shows and initializes the modal based on the configuration key.
* @param {string} configKey - Key from modalConfigs.
*/
function showModal(configKey) {
currentConfigKey = configKey;
const config = modalConfigs[configKey];
// Reset form and status
contactForm.reset();
contactForm.classList.remove('hidden');
successMessage.classList.add('hidden');
roleSelection.innerHTML = ''; // Clear previous roles
roleSelection.classList.add('hidden'); // Hide by default
modalTitle.textContent = config.title;
modalSubtitle.textContent = config.subtitle;
// Handle role selection
if (config.roles.length > 0) {
roleSelection.classList.remove('hidden');
config.roles.forEach(role => {
const isChecked = role.id === config.defaultRole;
const radioHtml = `
<label class="flex items-center cursor-pointer flex-1 min-w-[45%]">
<input type="radio" name="role" value="${role.id}" id="${role.id}" class="form-radio text-primary h-4 w-4" ${isChecked ? 'checked' : ''} onchange="updatePlaceholder('${role.placeholder}')">
<span class="ml-2 text-white text-sm">${role.label}</span>
</label>
`;
roleSelection.insertAdjacentHTML('beforeend', radioHtml);
});
// Set initial placeholder for the default role
const defaultRoleConfig = config.roles.find(r => r.id === config.defaultRole);
updatePlaceholder(defaultRoleConfig ? defaultRoleConfig.placeholder : '');
} else {
// Handle fixed placeholders for other buttons
roleSelection.classList.add('hidden');
updatePlaceholder(config.defaultPlaceholder || '');
}
modal.classList.remove('hidden');
}
/**
* Updates the placeholder text for the main description area.
* @param {string} text - The new placeholder text.
*/
function updatePlaceholder(text) {
descriptionTextarea.placeholder = text;
// Also set the initial value if it's the specific "选址开店" scenario
if (currentConfigKey === 'customize_scenario') {
descriptionTextarea.value = text;
} else {
// Clear value for other dynamic input types to show placeholder clearly
descriptionTextarea.value = '';
}
}
/**
* Hides the modal.
*/
function hideModal() {
modal.classList.add('hidden');
}
/**
* Handles clicking outside the modal content to close it.
* @param {Event} event - The click event.
*/
function closeModal(event) {
if (event.target === modal) {
hideModal();
}
}
// Form Submission Handler (Mock)
contactForm.addEventListener('submit', function(e) {
e.preventDefault();
// **MOCK DATA COLLECTION LOGIC**
const formData = {
type: currentConfigKey,
name: document.getElementById('name').value,
contact: document.getElementById('contact').value,
description: document.getElementById('description').value,
// Capture role title for partner submissions, or the checked radio value for demand submissions
role: currentConfigKey === 'customize_demand'
? document.querySelector('input[name="role"]:checked')?.value
: modalTitle.textContent.replace('成为生态伙伴：', '').trim()
};
// You would typically send 'formData' to a server here (e.g., using fetch).
console.log("Mock Form Submission Data:", formData);
// Show success message and hide form
contactForm.classList.add('hidden');
successMessage.classList.remove('hidden');
// Optionally close the modal after a delay
setTimeout(hideModal, 3000);
});
</script>
</body>
</html>
\ No newline at end of file
src/App.jsx
View file @ e02787f0
......@@ -565,7 +565,7 @@ const products = [
}
];
const newsItems = [
const newsTotal = [
{
title: "首批创新伙伴+牵头专题组！明树双身份亮相横琴 以 “数据 + AI” 赋能交通高质量发展",
date: "2025-11-30",
......@@ -793,6 +793,7 @@ DCMM（数据管理能力成熟度模型）作为我国数据管理领域的首
}
];
const newsItems = newsTotal.slice(0, 4);
// --- Mock Case Data for Services (New function) ---
const getServiceCases = (serviceName) => {
const specificCases = {
......@@ -1815,7 +1816,7 @@ const HomeSection = ({ setActiveTab, setSelectedScenario }) => {
key={i}
onClick={() => setSelectedScenario(item)}
className="min-w-[280px] md:min-w-[320px] snap-center h-[380px] group p-6
bg-gradient-to-b from-[#062C24] to-[#050505] hover:from-[#1c1f26] hover:to-[#1c1f26] backdrop-blur-md
hover:from-[#1c1f26] hover:to-[#1c1f26] backdrop-blur-md
border border-white/5
hover:border-[#00FFC2]/40
rounded-sm transition-all duration-500 ease-out
......@@ -1975,6 +1976,7 @@ const App = () => {
const [activeServiceTab, setActiveServiceTab] = useState('consulting');
const [showCopyToast, setShowCopyToast] = useState(false);
const scrollContainerRef = useRef(null);
const [showNewsTotal, setShownewsTotal] = useState(false);
useEffect(() => {
const handleScroll = () => {
......@@ -2013,11 +2015,11 @@ const App = () => {
buttons.forEach(button => button.remove());
// 临时修改样式避免截图不全2
const rightContent = modalElement.querySelector('.md\\:overflow-y-auto');
const rightContent = modalElement.querySelector('.overflow-y-auto');
modalElement.style.overflow = 'visible';
if (rightContent) rightContent.style.overflow = 'visible';
modalElement.classList.remove("animate-fade-in-up")
modalElement.classList.remove("animate-fade-in-up", "h-[100dvh]", "md:max-h-[90vh]");
document.body.appendChild(modalElement);
// DOM转Canvas
const canvas = await html2canvas(modalElement);
......@@ -2030,7 +2032,11 @@ const App = () => {
}
const clipboardItem = new ClipboardItem({ 'image/png': blob });
await navigator.clipboard.write([clipboardItem]);
alert('🎉 产品弹窗已转为图片并复制到剪贴板！\n可直接粘贴到微信聊天/朋友圈～');
setShowCopyToast(true);
setTimeout(() => {
setShowCopyToast(false);
}, 1500);
// alert('🎉 产品弹窗已转为图片并复制到剪贴板！\n可直接粘贴到微信聊天/朋友圈～');
}, 'image/png', 1.0);
} catch (error) {
......@@ -2232,17 +2238,19 @@ const App = () => {
return <HomeSection setActiveTab={setActiveTab} setSelectedScenario={setSelectedScenario} />;
case 'data':
return (
<div className="animate-fade-in-up pt-24 pb-16">
<div className="container mx-auto px-6">
<div className="mb-12 text-center">
<h2 className="text-3xl font-bold text-white mb-4">全链路数据要素服务</h2>
</div>
<DataPositioningSection />
<DataResourceGraph />
</div>
</div>
);
location.href = "/channel.html";
return ;
// return (
// <div className="animate-fade-in-up pt-24 pb-16">
// <div className="container mx-auto px-6">
// <div className="mb-12 text-center">
// <h2 className="text-3xl font-bold text-white mb-4">全链路数据要素服务</h2>
// </div>
// <DataPositioningSection />
// <DataResourceGraph />
// </div>
// </div>
// );
case 'scenarios':
return (
......@@ -2257,7 +2265,7 @@ const App = () => {
key={i}
onClick={() => setSelectedScenario(item)}
className="min-w-[220px] h-[380px] group p-6
bg-gradient-to-b from-[#062C24] to-[#050505] hover:from-[#1c1f26] hover:to-[#1c1f26] backdrop-blur-md
hover:from-[#1c1f26] hover:to-[#1c1f26] backdrop-blur-md
border border-white/5
hover:border-[#00FFC2]/40
rounded-sm transition-all duration-500 ease-out
......@@ -2537,7 +2545,32 @@ const App = () => {
);
case 'about':
return (
return showNewsTotal ? (
<div className="pt-24 pb-16 container mx-auto px-6 max-w-5xl animate-fade-in-up">
<div>
<h2 className="text-3xl font-bold text-white mb-12 text-center">公司动态</h2>
<div className="mb-5 flex justify-end">
<button onClick={() => setShownewsTotal(false)} className="text-gray-400 hover:text-[#00FFC2] text-sm flex items-center gap-1 transition-colors group">
返回 <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform"/>
</button>
</div>
<div className="grid grid-cols-2 gap-8">
{newsTotal.map((news, i) => (
<div key={i} onClick={() => setSelectedNews(news)} className="flex flex-col md:flex-row gap-6 bg-[#16181d] border border-white/5 p-6 rounded-lg hover:border-[#00FFC2]/30 transition-all group cursor-pointer">
<div className="flex-1 flex flex-col justify-center">
<h3 className="text-xl font-bold text-white mb-3 group-hover:text-[#00FFC2] transition-colors">{news.title}</h3>
<div className="flex items-center gap-3 mb-2">
<span className="text-[#00FFC2] text-xs border border-[#00FFC2]/30 px-2 py-0.5 rounded">{news.category}</span>
<span className="text-gray-500 text-xs">{news.date}</span>
</div>
<p className="text-gray-400 text-sm line-clamp-2">{news.content}</p>
</div>
</div>
))}
</div>
</div>
</div>
) : (
<div className="pt-24 pb-16 container mx-auto px-6 max-w-5xl animate-fade-in-up">
<div className="text-center mb-16">
<h2 className="text-3xl font-bold text-white mb-8">关于我们</h2>
......@@ -2619,6 +2652,11 @@ const App = () => {
{/* News Section */}
<div>
<h2 className="text-3xl font-bold text-white mb-12 text-center">公司动态</h2>
<div className="mb-5 flex justify-end">
<button onClick={() => setShownewsTotal(true)} className="text-gray-400 hover:text-[#00FFC2] text-sm flex items-center gap-1 transition-colors group">
查看更多 <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform"/>
</button>
</div>
<div className="grid gap-8">
{newsItems.map((news, i) => (
<div key={i} onClick={() => setSelectedNews(news)} className="flex flex-col md:flex-row gap-6 bg-[#16181d] border border-white/5 p-6 rounded-lg hover:border-[#00FFC2]/30 transition-all group cursor-pointer">
......@@ -2871,7 +2909,7 @@ const App = () => {
<div className="p-4 md:p-6 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-3 md:gap-4 shrink-0">
<div className="flex items-center gap-3 md:gap-4">
<img src="https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=BridataNews" alt="QR" className="w-9 h-9 md:w-12 md:h-12 bg-white p-0.5 md:p-1 rounded-sm" />
<img src={codeImg} alt="QR" className="w-9 h-9 md:w-12 md:h-12 bg-white p-0.5 md:p-1 rounded-sm" />
<div>
<div className="text-white font-bold text-xs md:text-sm">关注明树数据</div>
<div className="text-gray-500 text-xs">获取更多资讯</div>
......
src/assets/gscx.png
View replaced file @ 63a76923 View file @ e02787f0
src/assets/gscx.png

3.43 MB | W: | H:

src/assets/gscx.png

532 KB | W: | H:

src/assets/gscx.png
src/assets/gscx.png
src/assets/gscx.png
src/assets/gscx.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/jtlw.png
View replaced file @ 63a76923 View file @ e02787f0
src/assets/jtlw.png

4.87 MB | W: | H:

src/assets/jtlw.png

399 KB | W: | H:

src/assets/jtlw.png
src/assets/jtlw.png
src/assets/jtlw.png
src/assets/jtlw.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/kxsjkj.png
View replaced file @ 63a76923 View file @ e02787f0
src/assets/kxsjkj.png

1.5 MB | W: | H:

src/assets/kxsjkj.png

372 KB | W: | H:

src/assets/kxsjkj.png
src/assets/kxsjkj.png
src/assets/kxsjkj.png
src/assets/kxsjkj.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/sjzcgl.png
View replaced file @ 63a76923 View file @ e02787f0
src/assets/sjzcgl.png

2.86 MB | W: | H:

src/assets/sjzcgl.png

626 KB | W: | H:

src/assets/sjzcgl.png
src/assets/sjzcgl.png
src/assets/sjzcgl.png
src/assets/sjzcgl.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/szjhxt.png
View replaced file @ 63a76923 View file @ e02787f0
src/assets/szjhxt.png

3.84 MB | W: | H:

src/assets/szjhxt.png

409 KB | W: | H:

src/assets/szjhxt.png
src/assets/szjhxt.png
src/assets/szjhxt.png
src/assets/szjhxt.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/zhgypt.png
View replaced file @ 63a76923 View file @ e02787f0
src/assets/zhgypt.png

2.8 MB | W: | H:

src/assets/zhgypt.png

777 KB | W: | H:

src/assets/zhgypt.png
src/assets/zhgypt.png
src/assets/zhgypt.png
src/assets/zhgypt.png
  • 2-up
  • Swipe
  • Onion skin
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