明树Git Lab

Skip to content

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

增加隐私协议，修改页面内容结构样式

parent e41a12d5
Show whitespace changes
Inline Side-by-side
Showing with 273 additions and 76 deletions
index.html
View file @ 63a76923
......@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" type="image/svg+xml" href="/logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>明树数据</title>
</head>
......
public/vite.svg deleted 100644 → 0
View file @ e41a12d5
<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.jsx
View file @ 63a76923
......@@ -2046,7 +2046,187 @@ const App = () => {
};
// Render Content based on activeTab
const RadiationCanvas = () => {
const canvasRef = useRef(null);
useEffect(() => {
const canvas = canvasRef.current;
if (!canvas) return;
const ctx = canvas.getContext('2d');
// 城市相对坐标 (0-100)
const cities = [
{ name: "北京", x: 70, y: 25, isCore: true },
{ name: "乌鲁木齐", x: 15, y: 20 },
{ name: "兰州", x: 40, y: 42 },
{ name: "西安", x: 55, y: 48 },
{ name: "石家庄", x: 68, y: 32 },
{ name: "成都", x: 45, y: 60 },
{ name: "武汉", x: 68, y: 62 },
{ name: "南京", x: 80, y: 55 },
{ name: "上海", x: 85, y: 58 }
];
let w, h;
// 粒子系统：用于模拟数据流
let flowParticles = [];
const resizeMap = () => {
w = document.getElementById("radiationCanvas").offsetWidth;
h = document.getElementById("radiationCanvas").offsetHeight;
canvas.width = w;
canvas.height = h - 50;
}
window.addEventListener('resize', resizeMap);
resizeMap();
// 创建流动粒子
const createFlowParticles = () => {
// 每一帧都有几率产生新粒子从北京出发
if (Math.random() > 0.8) {
// 随机选一个目标城市
const targetIndex = Math.floor(Math.random() * cities.length);
if (!cities[targetIndex].isCore) {
flowParticles.push({
target: targetIndex,
progress: 0,
// 降低粒子速度：从 0.01-0.02 降低到 0.005-0.01
speed: 0.005 + Math.random() * 0.005
});
}
}
}
let pulseR = 0;
const drawMap = () => {
ctx.clearRect(0, 0, w, h);
const core = cities.find(c => c.isCore);
// 将相对坐标转换为屏幕坐标 (为了视觉平衡，稍微向左移一点，因为右边空)
const getX = (pct) => pct/100 * w * 0.8;
const getY = (pct) => pct/100 * h * 1.2;
const coreX = getX(core.x);
const coreY = getY(core.y);
// 1. 绘制连线 (静态底线)
cities.forEach(city => {
if (!city.isCore) {
const cx = getX(city.x);
const cy = getY(city.y);
ctx.beginPath();
// 渐变线：核心处亮，远处暗
const grad = ctx.createLinearGradient(coreX, coreY, cx, cy);
grad.addColorStop(0, "rgba(0, 255, 194, 0.5)");
grad.addColorStop(1, "rgba(0, 255, 194, 0.05)");
ctx.strokeStyle = grad;
ctx.lineWidth = 1.5;
ctx.moveTo(coreX, coreY);
ctx.lineTo(cx, cy);
ctx.stroke();
}
});
// 2. 绘制流动数据粒子 (Flow)
createFlowParticles();
for (let i = flowParticles.length - 1; i >= 0; i--) {
const p = flowParticles[i];
const target = cities[p.target];
const tx = getX(target.x);
const ty = getY(target.y);
p.progress += p.speed;
if (p.progress >= 1) {
flowParticles.splice(i, 1); // 到达目的地消失
continue;
}
const currX = coreX + (tx - coreX) * p.progress;
const currY = coreY + (ty - coreY) * p.progress;
// 绘制拖尾效果
const tailX = currX - (tx - coreX) * 0.05; // 简单的反向向量
const tailY = currY - (ty - coreY) * 0.05;
const grad = ctx.createLinearGradient(currX, currY, tailX, tailY);
grad.addColorStop(0, "rgba(255, 255, 255, 1)");
grad.addColorStop(1, "rgba(255, 255, 255, 0)");
ctx.beginPath();
ctx.moveTo(currX, currY);
ctx.lineTo(tailX, tailY);
ctx.strokeStyle = grad;
ctx.lineWidth = 3;
ctx.stroke();
}
// 3. 绘制城市节点
cities.forEach(city => {
const cx = getX(city.x);
const cy = getY(city.y);
if (city.isCore) {
// --- 核心北京 ---
// 扩散波 (Shockwave)
ctx.beginPath();
ctx.arc(cx, cy, pulseR, 0, Math.PI * 2);
ctx.strokeStyle = `rgba(0, 255, 194, ${1 - pulseR/60})`; // 范围更大
ctx.lineWidth = 2;
ctx.stroke();
// 第二圈波
ctx.beginPath();
ctx.arc(cx, cy, pulseR * 0.6, 0, Math.PI * 2);
ctx.strokeStyle = `rgba(0, 255, 194, ${(1 - pulseR/60)*0.5})`;
ctx.stroke();
// 核心高亮实体
ctx.fillStyle = '#00FFC2';
ctx.shadowBlur = 30;
ctx.shadowColor = '#00FFC2';
ctx.beginPath();
ctx.arc(cx, cy, 8, 0, Math.PI * 2);
ctx.fill();
ctx.shadowBlur = 0;
// 城市名
ctx.fillStyle = '#fff';
ctx.font = 'bold 16px sans-serif';
ctx.fillText(city.name, cx + 15, cy + 5);
} else {
// --- 其他城市 ---
ctx.fillStyle = '#fff';
ctx.beginPath();
ctx.arc(cx, cy, 4, 0, Math.PI * 2);
ctx.fill();
// 城市名 (稍微暗一点)
ctx.fillStyle = 'rgba(255,255,255,0.7)';
ctx.font = '12px sans-serif';
ctx.fillText(city.name, cx + 10, cy + 4);
}
});
// 更新动画参数
pulseR += 0.5;
if (pulseR > 60) pulseR = 0;
requestAnimationFrame(drawMap);
}
drawMap();
});
return <canvas ref={canvasRef} className="pointer-events-none z-0 mix-blend-screen" />;
}
const renderContent = () => {
const partners = [
"华为", "宏信建投", "浙江交投", "中建八局", "中建一局",
"中交投资", "远东宏信", "长江生态环保", "首创环保", "北控水务",
"招商证券", "华泰证券", "浦发银行", "中国农业发展银行", "中国建设银行",
"平安银行", "工银科技", "中铁建大桥局", "中铁城市开发研究院", "中交公规院",
"北京绿基投", "甘肃公交建", "深圳市ppp中心", "国家信息中心", "湖北省发改委", "湖南省发改委",
"新疆自治区发改委", "四川省财政厅", "山西省财政厅", "甘肃省交通厅", "江西省交通厅",
"湖北交投", "中建四局", "大连甘井子区发改局"
];
switch (activeTab) {
case 'home':
return <HomeSection setActiveTab={setActiveTab} setSelectedScenario={setSelectedScenario} />;
......@@ -2330,15 +2510,27 @@ const App = () => {
</div>
{/* 现有合作伙伴展示 */}
<div className="mt-16 pt-8 border-t border-white/5">
<div className="mt-16 overflow-hidden pt-8 border-t border-white/5">
<h3 className="text-xl font-bold text-white mb-8 text-center">部分合作伙伴</h3>
<div className="flex flex-wrap justify-center gap-8 opacity-80">
{['华为', '宏信建投', '浙江交投', '中建八局', '中建一局', '中交投资', '远东宏信', '长江生态环保'].map((p,i) => (
<div className="relative">
<div className="absolute top-0 left-0 w-8 h-full bg-gradient-to-r from-[#16181d] to-transparent z-10"></div>
<div className="absolute top-0 right-0 w-8 h-full bg-gradient-to-l from-[#16181d] to-transparent z-10"></div>
<div className="flex gap-8 animate-infinite-scroll min-w-max">
{partners.map((partner, index) => (
<span key={index} className="text-lg md:text-xl font-bold text-gray-300 hover:text-[#00FFC2] transition-colors cursor-default">{partner}</span>
))}
{partners.map((partner, index) => (
<span key={`dup-${index}`} className="text-lg md:text-xl font-bold text-gray-300 hover:text-[#00FFC2] transition-colors cursor-default">{partner}</span>
))}
</div>
</div>
{/* <div className="flex flex-wrap justify-center gap-8 opacity-80">
{partners.map((p,i) => (
<span key={i} className="text-lg md:text-xl font-bold text-gray-300 hover:text-[#00FFC2] transition-colors cursor-default">
{p}
</span>
))}
</div>
</div> */}
</div>
</div>
</section>
......@@ -2361,7 +2553,8 @@ const App = () => {
</div>
{/* Certifications & Associations */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
{/* <div> */}
<div className="bg-[#1a1c23] border border-white/5 rounded p-8 hover:border-[#00FFC2]/30 transition-colors">
<h4 className="text-white font-bold mb-6 flex items-center gap-2"><Award className="w-5 h-5 text-[#00FFC2]"/> 企业资质与荣誉</h4>
<div className="flex flex-wrap gap-2">
......@@ -2383,6 +2576,11 @@ const App = () => {
))}
</ul>
</div>
{/* </div> */}
<div id="radiationCanvas">
<div className="text-gray-400">公司总部位于北京，在上海、南京、武汉、成都、兰州、西安、石家庄、乌鲁木齐、陵水、香港等地设有分支机构。</div>
<RadiationCanvas></RadiationCanvas>
</div>
</div>
{/* Major Awards Highlight - Data Element X (样式已同步首页) */}
......@@ -2695,7 +2893,7 @@ const App = () => {
<h2 className="text-2xl font-bold text-white mb-8 tracking-tight">与明树&#x3000;越山海</h2>
<div className="flex justify-center gap-8 text-xs text-gray-500 mt-12 border-t border-white/5 pt-8">
<span>© 2024 Bridata Inc.</span>
<span>Privacy Policy</span>
<a href="https://custom.bridata.com/yinsizhengce.html" target='_blank'>Privacy Policy</a>
<span>Terms of Service</span>
</div>
</div>
......
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