[BugFix]修复bugs.
N/A Signed-off-by: 高浩然 <14639330+albert2024@user.noreply.gitee.com>
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user