[BugFix]修复bugs.

N/A

Signed-off-by: 高浩然 <14639330+albert2024@user.noreply.gitee.com>
This commit is contained in:
高浩然
2025-09-02 00:06:07 +08:00
parent 9834a8d0d0
commit 75dbf3c723

View File

@@ -1,22 +1,9 @@
import React, { useRef } from 'react';
import React from 'react';
import { motion } from 'framer-motion';
import { Rocket, Eye, Bot, TrendingUp, Play, Pause } from 'lucide-react';
import futureVideo from '../assets/ai_medical_assistant_combined.mp4';
import { Rocket, Eye, Bot, TrendingUp } from 'lucide-react';
import futureImage from '../assets/ai_medical_assistant_scene1.png';
const FutureVision = () => {
const videoRef = useRef(null);
const [isPlaying, setIsPlaying] = React.useState(false);
const toggleVideo = () => {
if (videoRef.current) {
if (isPlaying) {
videoRef.current.pause();
} else {
videoRef.current.play();
}
setIsPlaying(!isPlaying);
}
};
const features = [
{
@@ -63,39 +50,21 @@ const FutureVision = () => {
viewport={{ once: true }}
transition={{ duration: 0.6 }}
>
{/* 视频展示区域 */}
{/* 图片展示区域 */}
<motion.div
className="relative bg-black rounded-xl overflow-hidden mb-8"
whileHover={{ scale: 1.02 }}
transition={{ duration: 0.3 }}
>
<video
ref={videoRef}
<img
src={futureImage}
alt="AI医疗助手场景展示"
className="w-full h-96 object-cover"
poster="/api/placeholder/800/400"
onPlay={() => setIsPlaying(true)}
onPause={() => setIsPlaying(false)}
onEnded={() => setIsPlaying(false)}
>
<source src={futureVideo} type="video/mp4" />
您的浏览器不支持视频播放
</video>
/>
{/* 视频控制覆盖层 */}
<div className="absolute inset-0 bg-black/30 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300">
<motion.button
onClick={toggleVideo}
className="w-20 h-20 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center text-white hover:bg-white/30 transition-colors"
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
>
{isPlaying ? <Pause className="w-8 h-8" /> : <Play className="w-8 h-8 ml-1" />}
</motion.button>
</div>
{/* 视频标题覆盖层 */}
{/* 图片标题覆盖层 */}
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-6">
<h3 className="text-white text-xl font-bold mb-2">AI医疗助手演示视频</h3>
<h3 className="text-white text-xl font-bold mb-2">AI医疗助手场景展示</h3>
<p className="text-white/80 text-sm">展示未来智能医疗系统的三大核心场景</p>
</div>
</motion.div>