"use client";
|
|
import { useEffect, useRef } from 'react';
|
import { motion } from 'framer-motion';
|
|
interface Node {
|
x: number;
|
y: number;
|
label: string;
|
color: string;
|
icon?: string;
|
isAI?: boolean;
|
}
|
|
export default function SupplyChainAIMindMap() {
|
const canvasRef = useRef<HTMLCanvasElement>(null);
|
const nodesRef = useRef<Node[]>([
|
{ x: 0.15, y: 0.3, label: '采购', color: '#6ADBFF', icon: '📦' },
|
{ x: 0.35, y: 0.3, label: '生产', color: '#5E72EB', icon: '🏭' },
|
{ x: 0.65, y: 0.3, label: '配送', color: '#FF6A88', icon: '🚚' },
|
{ x: 0.85, y: 0.3, label: '客户', color: '#FF9D6A', icon: '👥' },
|
{ x: 0.85, y: 0.6, label: '需求预测', color: '#FF6A88', icon: '📊' },
|
{ x: 0.5, y: 0.5, label: '智能分析引擎', color: '#5E72EB', isAI: true },
|
]);
|
|
useEffect(() => {
|
const canvas = canvasRef.current;
|
if (!canvas) return;
|
|
const ctx = canvas.getContext('2d');
|
if (!ctx) return;
|
|
const setCanvasSize = () => {
|
canvas.width = canvas.offsetWidth;
|
canvas.height = canvas.offsetHeight;
|
};
|
|
setCanvasSize();
|
window.addEventListener('resize', setCanvasSize);
|
|
// 量子数据粒子系统
|
interface QuantumParticle {
|
x: number;
|
y: number;
|
targetX: number;
|
targetY: number;
|
size: number;
|
color: string;
|
speed: number;
|
energy: number;
|
phase: number;
|
orbitRadius: number;
|
orbitSpeed: number;
|
pathIndex: number;
|
lifespan: number;
|
maxLifespan: number;
|
}
|
|
interface Point {
|
x: number;
|
y: number;
|
}
|
|
interface Path {
|
start: Point;
|
end: Point;
|
color: string;
|
particles: QuantumParticle[];
|
}
|
|
const particles: QuantumParticle[] = [];
|
|
// 定义数据流路径
|
const paths: Path[] = [
|
{ start: { x: 0.15, y: 0.3 }, end: { x: 0.35, y: 0.3 }, color: '#6ADBFF', particles: [] }, // 采购到生产
|
{ start: { x: 0.35, y: 0.3 }, end: { x: 0.65, y: 0.3 }, color: '#5E72EB', particles: [] }, // 生产到配送
|
{ start: { x: 0.65, y: 0.3 }, end: { x: 0.85, y: 0.3 }, color: '#FF6A88', particles: [] }, // 配送到客户
|
{ start: { x: 0.85, y: 0.3 }, end: { x: 0.85, y: 0.6 }, color: '#FF9D6A', particles: [] }, // 客户到需求预测
|
{ start: { x: 0.85, y: 0.6 }, end: { x: 0.5, y: 0.5 }, color: '#FF6A88', particles: [] }, // 需求预测到AI
|
{ start: { x: 0.5, y: 0.5 }, end: { x: 0.15, y: 0.3 }, color: '#6ADBFF', particles: [] } // AI到采购
|
];
|
|
// 创建量子粒子
|
const createQuantumParticle = () => {
|
const pathIndex = Math.floor(Math.random() * paths.length);
|
const path = paths[pathIndex];
|
const startX = path.start.x * canvas.width;
|
const startY = path.start.y * canvas.height;
|
const endX = path.end.x * canvas.width;
|
const endY = path.end.y * canvas.height;
|
|
const particle: QuantumParticle = {
|
x: startX,
|
y: startY,
|
targetX: endX,
|
targetY: endY,
|
size: Math.random() * 2 + 1,
|
color: path.color,
|
speed: 0.5 + Math.random() * 0.5, // 降低速度
|
energy: 1,
|
phase: Math.random() * Math.PI * 2,
|
orbitRadius: Math.random() * 15 + 5, // 减小轨道半径
|
orbitSpeed: (Math.random() * 0.08 + 0.03) * (Math.random() < 0.5 ? 1 : -1), // 降低轨道速度
|
pathIndex,
|
lifespan: 0,
|
maxLifespan: 150 + Math.random() * 50 // 减少最大寿命
|
};
|
|
particles.push(particle);
|
|
// 限制粒子总数，防止性能问题
|
if (particles.length > 30) {
|
particles.shift();
|
}
|
};
|
|
// 更新量子粒子
|
const updateParticles = () => {
|
const time = Date.now() * 0.001;
|
|
for (let i = particles.length - 1; i >= 0; i--) {
|
const p = particles[i];
|
p.lifespan++;
|
|
if (p.lifespan >= p.maxLifespan) {
|
particles.splice(i, 1);
|
continue;
|
}
|
|
// 计算到目标的方向和距离
|
const dx = p.targetX - p.x;
|
const dy = p.targetY - p.y;
|
const dist = Math.sqrt(dx * dx + dy * dy);
|
|
if (dist < 5) {
|
// 到达目标点，设置新目标
|
const nextPathIndex = (p.pathIndex + 1) % paths.length;
|
const nextPath = paths[nextPathIndex];
|
p.pathIndex = nextPathIndex;
|
p.targetX = nextPath.end.x * canvas.width;
|
p.targetY = nextPath.end.y * canvas.height;
|
p.phase = Math.random() * Math.PI * 2; // 重置相位
|
}
|
|
// 量子轨道运动
|
const progress = p.lifespan / p.maxLifespan;
|
const orbitAmplitude = Math.sin(progress * Math.PI) * p.orbitRadius;
|
const orbitPhase = p.phase + time * p.orbitSpeed;
|
|
// 计算主要移动方向
|
const moveX = dx / dist * p.speed;
|
const moveY = dy / dist * p.speed;
|
|
// 添加量子轨道偏移
|
const perpX = -dy / dist;
|
const perpY = dx / dist;
|
|
p.x += moveX + perpX * Math.sin(orbitPhase) * orbitAmplitude * 0.1;
|
p.y += moveY + perpY * Math.sin(orbitPhase) * orbitAmplitude * 0.1;
|
|
// 更新能量值
|
p.energy = Math.sin(progress * Math.PI);
|
}
|
};
|
|
// 绘制场景
|
const drawScene = () => {
|
if (!ctx) return;
|
|
// 清除画布
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
// 减少重复计算，预先计算常用值
|
const canvasWidth = canvas.width;
|
const canvasHeight = canvas.height;
|
const time = Date.now() * 0.001;
|
|
// 绘制技术背景
|
drawTechBackground(ctx, canvasWidth, canvasHeight, time);
|
|
// 绘制能量场路径
|
drawEnergyFields();
|
|
// 绘制节点
|
drawNodes();
|
|
// 绘制量子粒子
|
drawQuantumParticles();
|
|
// 绘制AI节点
|
const aiNode = nodesRef.current.find(node => node.isAI);
|
if (aiNode) {
|
drawAINode(aiNode.x * canvasWidth, aiNode.y * canvasHeight);
|
}
|
};
|
|
// 绘制科技感背景
|
const drawTechBackground = (ctx: CanvasRenderingContext2D, canvasWidth: number, canvasHeight: number, time: number) => {
|
const gridSize = 40;
|
|
// 降低网格密度，仅绘制较少的线条
|
ctx.strokeStyle = 'rgba(70, 130, 180, 0.05)';
|
ctx.lineWidth = 0.5;
|
|
// 降低网格线频率
|
for (let y = 0; y < canvasHeight; y += gridSize * 1.5) {
|
ctx.beginPath();
|
ctx.moveTo(0, y);
|
ctx.lineTo(canvasWidth, y);
|
ctx.stroke();
|
|
// 对波动效果采样率降低
|
ctx.beginPath();
|
for (let x = 0; x < canvasWidth; x += 10) {
|
const wave = Math.sin(x * 0.01 + time + y * 0.005) * 2;
|
ctx.lineTo(x, y + wave);
|
}
|
ctx.strokeStyle = 'rgba(70, 130, 180, 0.02)';
|
ctx.stroke();
|
}
|
|
for (let x = 0; x < canvasWidth; x += gridSize * 1.5) {
|
ctx.beginPath();
|
ctx.moveTo(x, 0);
|
ctx.lineTo(x, canvasHeight);
|
ctx.strokeStyle = 'rgba(70, 130, 180, 0.05)';
|
ctx.stroke();
|
}
|
|
// 减少光点数量
|
for (let i = 0; i < 10; i++) {
|
const x = Math.random() * canvasWidth;
|
const y = Math.random() * canvasHeight;
|
const size = 2 + Math.sin(time * 1.5 + i) * 1;
|
|
const gradient = ctx.createRadialGradient(x, y, 0, x, y, size * 2);
|
gradient.addColorStop(0, 'rgba(106, 219, 255, 0.2)');
|
gradient.addColorStop(1, 'rgba(106, 219, 255, 0)');
|
|
ctx.beginPath();
|
ctx.fillStyle = gradient;
|
ctx.arc(x, y, size * 2, 0, Math.PI * 2);
|
ctx.fill();
|
}
|
};
|
|
// 绘制能量场
|
const drawEnergyFields = () => {
|
const time = Date.now() * 0.001;
|
|
paths.forEach((path: Path) => {
|
const startX = path.start.x * canvas.width;
|
const startY = path.start.y * canvas.height;
|
const endX = path.end.x * canvas.width;
|
const endY = path.end.y * canvas.height;
|
|
// 创建能量场效果
|
const numPoints = 30;
|
const fieldWidth = 40;
|
|
// 计算路径方向
|
const dx = endX - startX;
|
const dy = endY - startY;
|
const length = Math.sqrt(dx * dx + dy * dy);
|
const dirX = dx / length;
|
const dirY = dy / length;
|
|
// 垂直方向
|
const perpX = -dirY;
|
const perpY = dirX;
|
|
// 绘制能量流动效果
|
for (let i = 0; i < numPoints; i++) {
|
const progress = i / (numPoints - 1);
|
const x = startX + dx * progress;
|
const y = startY + dy * progress;
|
|
// 创建波浪效果
|
const waveAmplitude = Math.sin(progress * Math.PI * 4 + time * 3) * fieldWidth;
|
const waveFrequency = Math.cos(progress * Math.PI * 2 - time * 2) * fieldWidth * 0.3;
|
|
const x1 = x + perpX * waveAmplitude + dirX * waveFrequency;
|
const y1 = y + perpY * waveAmplitude + dirY * waveFrequency;
|
const x2 = x - perpX * waveAmplitude - dirX * waveFrequency;
|
const y2 = y - perpY * waveAmplitude - dirY * waveFrequency;
|
|
const gradient = ctx.createLinearGradient(x1, y1, x2, y2);
|
const alpha = (Math.sin(progress * Math.PI + time) + 1) * 0.3;
|
const alphaHex = Math.floor(alpha * 255).toString(16).padStart(2, '0');
|
|
gradient.addColorStop(0, `${path.color}00`);
|
gradient.addColorStop(0.5, `${path.color}${alphaHex}`);
|
gradient.addColorStop(1, `${path.color}00`);
|
|
ctx.beginPath();
|
ctx.strokeStyle = gradient;
|
ctx.lineWidth = 2;
|
ctx.moveTo(x1, y1);
|
ctx.lineTo(x2, y2);
|
ctx.stroke();
|
}
|
});
|
};
|
|
// 绘制节点
|
const drawNodes = () => {
|
// 使用引用中的节点数据
|
const nodes = nodesRef.current;
|
const time = Date.now() * 0.001;
|
|
nodes.forEach(node => {
|
const x = node.x * canvas.width;
|
const y = node.y * canvas.height;
|
|
if (node.isAI) {
|
drawAINode(x, y);
|
} else {
|
// 节点光环效果
|
const pulseSize = 24 + Math.sin(time * 1.5 + x * 0.05) * 3;
|
|
// 外发光
|
const gradient = ctx.createRadialGradient(x, y, 15, x, y, pulseSize);
|
gradient.addColorStop(0, `${node.color}30`);
|
gradient.addColorStop(1, `${node.color}00`);
|
|
ctx.beginPath();
|
ctx.arc(x, y, pulseSize, 0, Math.PI * 2);
|
ctx.fillStyle = gradient;
|
ctx.fill();
|
|
// 节点主体
|
ctx.beginPath();
|
ctx.arc(x, y, 20, 0, Math.PI * 2);
|
ctx.fillStyle = `${node.color}20`;
|
ctx.fill();
|
|
ctx.beginPath();
|
ctx.arc(x, y, 20, 0, Math.PI * 2);
|
ctx.strokeStyle = node.color;
|
ctx.lineWidth = 2;
|
ctx.stroke();
|
|
// 图标
|
if (node.icon) {
|
ctx.fillStyle = node.color;
|
ctx.font = '16px monospace';
|
ctx.textAlign = 'center';
|
ctx.textBaseline = 'middle';
|
ctx.fillText(node.icon, x, y - 3);
|
}
|
|
// 标签
|
ctx.fillStyle = '#fff';
|
ctx.font = '12px sans-serif';
|
ctx.fillText(node.label, x, y + 25);
|
}
|
});
|
};
|
|
// 绘制AI节点
|
const drawAINode = (x: number, y: number) => {
|
const time = Date.now() * 0.001;
|
|
// 神经网络背景效果
|
const neuronPoints = [
|
{ x: -20, y: -15 }, { x: 20, y: -15 },
|
{ x: -25, y: 0 }, { x: 25, y: 0 },
|
{ x: -20, y: 15 }, { x: 20, y: 15 },
|
{ x: 0, y: -20 }, { x: 0, y: 20 },
|
{ x: -15, y: -25 }, { x: 15, y: -25 },
|
{ x: -15, y: 25 }, { x: 15, y: 25 }
|
];
|
|
// 绘制神经连接
|
ctx.strokeStyle = 'rgba(106, 219, 255, 0.3)';
|
ctx.lineWidth = 1;
|
|
neuronPoints.forEach((point, i) => {
|
for (let j = i + 1; j < neuronPoints.length; j++) {
|
const p1 = { x: x + point.x, y: y + point.y };
|
const p2 = { x: x + neuronPoints[j].x, y: y + neuronPoints[j].y };
|
|
const pulsePhase = (time * 2 + i * 0.5 + j * 0.3) % (Math.PI * 2);
|
const pulseIntensity = (Math.sin(pulsePhase) + 1) * 0.5;
|
|
const gradient = ctx.createLinearGradient(p1.x, p1.y, p2.x, p2.y);
|
gradient.addColorStop(0, `rgba(106, 219, 255, ${0.1 + pulseIntensity * 0.2})`);
|
gradient.addColorStop(0.5, `rgba(94, 114, 235, ${0.2 + pulseIntensity * 0.3})`);
|
gradient.addColorStop(1, `rgba(106, 219, 255, ${0.1 + pulseIntensity * 0.2})`);
|
|
ctx.beginPath();
|
ctx.strokeStyle = gradient;
|
ctx.moveTo(p1.x, p1.y);
|
|
// 创建动态弧形连接
|
const controlPoint = {
|
x: (p1.x + p2.x) / 2 + Math.sin(time + i) * 10,
|
y: (p1.y + p2.y) / 2 + Math.cos(time + j) * 10
|
};
|
|
ctx.quadraticCurveTo(controlPoint.x, controlPoint.y, p2.x, p2.y);
|
ctx.stroke();
|
|
// 在连接线上添加流动粒子
|
const particlePos = Math.sin(time * 2 + i * 0.7 + j * 0.5) * 0.5 + 0.5;
|
const px = p1.x + (p2.x - p1.x) * particlePos;
|
const py = p1.y + (p2.y - p1.y) * particlePos;
|
|
const particleGlow = ctx.createRadialGradient(px, py, 0, px, py, 3);
|
particleGlow.addColorStop(0, 'rgba(255, 255, 255, 0.8)');
|
particleGlow.addColorStop(1, 'rgba(106, 219, 255, 0)');
|
|
ctx.fillStyle = particleGlow;
|
ctx.beginPath();
|
ctx.arc(px, py, 3, 0, Math.PI * 2);
|
ctx.fill();
|
}
|
});
|
|
// 绘制大脑轮廓
|
ctx.beginPath();
|
ctx.moveTo(x - 25, y + 20);
|
|
// 左半边大脑
|
const leftOffset = Math.sin(time * 2) * 2;
|
ctx.bezierCurveTo(
|
x - 40 + leftOffset, y + 10, // 控制点1
|
x - 40 + leftOffset, y - 20, // 控制点2
|
x - 25, y - 25 // 终点
|
);
|
|
// 上部褶皱
|
const topOffset = Math.sin(time * 2.5) * 2;
|
ctx.bezierCurveTo(
|
x - 20, y - 30 + topOffset,
|
x - 10, y - 35 + topOffset,
|
x, y - 25
|
);
|
|
// 右半边大脑
|
const rightOffset = Math.sin(time * 2 + Math.PI) * 2;
|
ctx.bezierCurveTo(
|
x + 10, y - 35 + topOffset,
|
x + 20, y - 30 + topOffset,
|
x + 25, y - 25
|
);
|
|
ctx.bezierCurveTo(
|
x + 40 + rightOffset, y - 20,
|
x + 40 + rightOffset, y + 10,
|
x + 25, y + 20
|
);
|
|
// 底部曲线
|
const bottomOffset = Math.sin(time * 1.5) * 2;
|
ctx.bezierCurveTo(
|
x + 15, y + 25 + bottomOffset,
|
x - 15, y + 25 + bottomOffset,
|
x - 25, y + 20
|
);
|
|
// 创建大脑渐变
|
const brainGradient = ctx.createRadialGradient(x, y, 0, x, y, 40);
|
brainGradient.addColorStop(0, 'rgba(94, 114, 235, 0.8)');
|
brainGradient.addColorStop(0.5, 'rgba(106, 219, 255, 0.6)');
|
brainGradient.addColorStop(1, 'rgba(94, 114, 235, 0.4)');
|
|
ctx.fillStyle = brainGradient;
|
ctx.fill();
|
|
// 添加脑波动画效果
|
for (let i = 0; i < 3; i++) {
|
const waveRadius = 35 + Math.sin(time * 2 + i * Math.PI / 3) * 5;
|
const waveGradient = ctx.createRadialGradient(x, y, waveRadius - 5, x, y, waveRadius + 5);
|
waveGradient.addColorStop(0, 'rgba(106, 219, 255, 0)');
|
waveGradient.addColorStop(0.5, `rgba(94, 114, 235, ${0.1 - i * 0.03})`);
|
waveGradient.addColorStop(1, 'rgba(106, 219, 255, 0)');
|
|
ctx.beginPath();
|
ctx.arc(x, y, waveRadius, 0, Math.PI * 2);
|
ctx.fillStyle = waveGradient;
|
ctx.fill();
|
}
|
|
// 添加神经元闪烁效果
|
neuronPoints.forEach((point, i) => {
|
const neuronX = x + point.x;
|
const neuronY = y + point.y;
|
const pulseScale = Math.sin(time * 3 + i) * 0.5 + 1.5;
|
|
const neuronGlow = ctx.createRadialGradient(
|
neuronX, neuronY, 0,
|
neuronX, neuronY, 4 * pulseScale
|
);
|
neuronGlow.addColorStop(0, 'rgba(255, 255, 255, 0.8)');
|
neuronGlow.addColorStop(0.5, 'rgba(106, 219, 255, 0.4)');
|
neuronGlow.addColorStop(1, 'rgba(94, 114, 235, 0)');
|
|
ctx.beginPath();
|
ctx.arc(neuronX, neuronY, 4 * pulseScale, 0, Math.PI * 2);
|
ctx.fillStyle = neuronGlow;
|
ctx.fill();
|
});
|
|
// 添加脑沟纹理
|
const numFolds = 8;
|
for (let i = 0; i < numFolds; i++) {
|
const angle = (Math.PI * 2 / numFolds) * i;
|
const radius = 25;
|
const x1 = x + Math.cos(angle) * radius;
|
const y1 = y + Math.sin(angle) * radius;
|
const x2 = x + Math.cos(angle + Math.PI / numFolds) * (radius * 0.7);
|
const y2 = y + Math.sin(angle + Math.PI / numFolds) * (radius * 0.7);
|
|
ctx.beginPath();
|
ctx.moveTo(x1, y1);
|
ctx.lineTo(x2, y2);
|
ctx.strokeStyle = 'rgba(94, 114, 235, 0.3)';
|
ctx.lineWidth = 1;
|
ctx.stroke();
|
}
|
|
// 标签
|
ctx.fillStyle = '#FFFFFF';
|
ctx.font = '13px sans-serif';
|
ctx.textAlign = 'center';
|
ctx.textBaseline = 'middle';
|
ctx.fillText('智能分析引擎', x, y + 45);
|
};
|
|
// 绘制量子粒子
|
const drawQuantumParticles = () => {
|
particles.forEach(p => {
|
const time = Date.now() * 0.001;
|
|
// 量子光晕效果
|
const glowSize = p.size * (2 + Math.sin(time * 3 + p.phase) * 0.5);
|
const gradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, glowSize * 2);
|
gradient.addColorStop(0, p.color + 'FF');
|
gradient.addColorStop(0.5, p.color + '40');
|
gradient.addColorStop(1, p.color + '00');
|
|
ctx.beginPath();
|
ctx.arc(p.x, p.y, glowSize, 0, Math.PI * 2);
|
ctx.fillStyle = gradient;
|
ctx.fill();
|
|
// 量子核心
|
ctx.beginPath();
|
ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
|
ctx.fillStyle = '#FFFFFF';
|
ctx.fill();
|
|
// 量子波纹
|
if (Math.random() < 0.1) {
|
const waveGradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.size * 4);
|
waveGradient.addColorStop(0, p.color + '40');
|
waveGradient.addColorStop(1, p.color + '00');
|
|
ctx.beginPath();
|
ctx.arc(p.x, p.y, p.size * 4, 0, Math.PI * 2);
|
ctx.fillStyle = waveGradient;
|
ctx.fill();
|
}
|
});
|
};
|
|
// 初始化粒子
|
const initParticles = () => {
|
// 减少初始粒子数量
|
for (let i = 0; i < 20; i++) {
|
setTimeout(() => createQuantumParticle(), i * 100);
|
}
|
};
|
|
// 定期添加新粒子，降低频率
|
const particleInterval = setInterval(() => {
|
if (particles.length < 30) {
|
createQuantumParticle();
|
}
|
}, 800);
|
|
// 动画循环
|
let lastTime = 0;
|
const targetFPS = 30; // 降低目标FPS以提高性能
|
const frameInterval = 1000 / targetFPS;
|
|
const animate = (timestamp = 0) => {
|
const animationId = requestAnimationFrame(animate);
|
|
// 限制帧率以提高性能
|
const deltaTime = timestamp - lastTime;
|
if (deltaTime < frameInterval) {
|
return animationId;
|
}
|
|
// 记录当前时间
|
lastTime = timestamp - (deltaTime % frameInterval);
|
|
// 更新和绘制
|
updateParticles();
|
drawScene();
|
|
return animationId;
|
};
|
|
initParticles();
|
const animationId = animate();
|
|
return () => {
|
window.removeEventListener('resize', setCanvasSize);
|
clearInterval(particleInterval);
|
// 清理动画帧
|
cancelAnimationFrame(animationId);
|
};
|
}, []);
|
|
return (
|
<div className="w-full py-4">
|
<motion.div
|
initial={{ opacity: 0, y: 20 }}
|
whileInView={{ opacity: 1, y: 0 }}
|
viewport={{ once: false, margin: "-100px" }}
|
transition={{ duration: 0.7, ease: "easeOut" }}
|
className="text-center mb-8"
|
>
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-5">
|
<span className="text-transparent bg-clip-text bg-gradient-to-r from-[#6ADBFF] to-[#5E72EB]">
|
AI赋能APS
|
</span> 优势全景
|
</h2>
|
<p className="text-gray-300 max-w-3xl mx-auto">
|
全局智能协同，从供应链各环节收集数据，基于深度学习与量子启发算法实现端到端的智能决策与优化
|
</p>
|
</motion.div>
|
|
<motion.div
|
initial={{ opacity: 0 }}
|
whileInView={{ opacity: 1 }}
|
viewport={{ once: false, margin: "-100px" }}
|
transition={{ duration: 1, ease: "easeOut" }}
|
className="relative h-[450px] w-full backdrop-blur-sm bg-white/5 rounded-xl border border-[#6ADBFF]/20 overflow-hidden"
|
>
|
<canvas
|
ref={canvasRef}
|
className="absolute inset-0 w-full h-full"
|
/>
|
|
<div className="absolute bottom-0 left-0 right-0 flex justify-center gap-6 p-6 bg-gradient-to-t from-[#0A1033]/90 to-transparent">
|
<motion.div
|
initial={{ opacity: 0, y: 20 }}
|
whileInView={{ opacity: 1, y: 0 }}
|
viewport={{ once: false }}
|
transition={{ duration: 0.7, delay: 0.2 }}
|
className="backdrop-blur-sm bg-white/5 rounded-lg p-4 border border-[#6ADBFF]/20 w-[30%]"
|
>
|
<h3 className="text-lg font-semibold text-[#6ADBFF] mb-2">动态响应</h3>
|
<p className="text-gray-300 text-sm">实时感知供应链变化，智能调整生产计划，提升40%响应速度</p>
|
</motion.div>
|
|
<motion.div
|
initial={{ opacity: 0, y: 20 }}
|
whileInView={{ opacity: 1, y: 0 }}
|
viewport={{ once: false }}
|
transition={{ duration: 0.7, delay: 0.3 }}
|
className="backdrop-blur-sm bg-white/5 rounded-lg p-4 border border-[#5E72EB]/20 w-[30%]"
|
>
|
<h3 className="text-lg font-semibold text-[#5E72EB] mb-2">预测优化</h3>
|
<p className="text-gray-300 text-sm">基于深度学习预测市场需求，降低25%库存成本，提高物料利用率</p>
|
</motion.div>
|
|
<motion.div
|
initial={{ opacity: 0, y: 20 }}
|
whileInView={{ opacity: 1, y: 0 }}
|
viewport={{ once: false }}
|
transition={{ duration: 0.7, delay: 0.4 }}
|
className="backdrop-blur-sm bg-white/5 rounded-lg p-4 border border-[#FF6A88]/20 w-[30%]"
|
>
|
<h3 className="text-lg font-semibold text-[#FF6A88] mb-2">多维决策</h3>
|
<p className="text-gray-300 text-sm">平衡成本、交期、质量多维目标，实现真正全局最优解</p>
|
</motion.div>
|
</div>
|
</motion.div>
|
</div>
|
);
|
}
|
