[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 { motion } from 'framer-motion';
|
||||||
import { Rocket, Eye, Bot, TrendingUp, Play, Pause } from 'lucide-react';
|
import { Rocket, Eye, Bot, TrendingUp } from 'lucide-react';
|
||||||
import futureVideo from '../assets/ai_medical_assistant_combined.mp4';
|
import futureImage from '../assets/ai_medical_assistant_scene1.png';
|
||||||
|
|
||||||
const FutureVision = () => {
|
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 = [
|
const features = [
|
||||||
{
|
{
|
||||||
@@ -63,39 +50,21 @@ const FutureVision = () => {
|
|||||||
viewport={{ once: true }}
|
viewport={{ once: true }}
|
||||||
transition={{ duration: 0.6 }}
|
transition={{ duration: 0.6 }}
|
||||||
>
|
>
|
||||||
{/* 视频展示区域 */}
|
{/* 图片展示区域 */}
|
||||||
<motion.div
|
<motion.div
|
||||||
className="relative bg-black rounded-xl overflow-hidden mb-8"
|
className="relative bg-black rounded-xl overflow-hidden mb-8"
|
||||||
whileHover={{ scale: 1.02 }}
|
whileHover={{ scale: 1.02 }}
|
||||||
transition={{ duration: 0.3 }}
|
transition={{ duration: 0.3 }}
|
||||||
>
|
>
|
||||||
<video
|
<img
|
||||||
ref={videoRef}
|
src={futureImage}
|
||||||
|
alt="AI医疗助手场景展示"
|
||||||
className="w-full h-96 object-cover"
|
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">
|
<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>
|
<p className="text-white/80 text-sm">展示未来智能医疗系统的三大核心场景</p>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|||||||
Reference in New Issue
Block a user