106 lines
3.4 KiB
JavaScript
106 lines
3.4 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
||
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
|
||
import { motion, AnimatePresence } from 'framer-motion';
|
||
import { ArrowUp } from 'lucide-react';
|
||
import './App.css';
|
||
|
||
// 组件导入
|
||
import Header from './components/Header';
|
||
import Hero from './components/Hero';
|
||
import CompanyIntro from './components/CompanyIntro';
|
||
import Mission from './components/Mission';
|
||
import ProductMatrix from './components/ProductMatrix';
|
||
import VascularScenarios from './components/VascularScenarios';
|
||
import Architecture from './components/Architecture';
|
||
import FutureVision from './components/FutureVision';
|
||
import Conclusion from './components/Conclusion';
|
||
|
||
function App() {
|
||
const [showScrollButton, setShowScrollButton] = useState(false);
|
||
|
||
useEffect(() => {
|
||
const handleScroll = () => {
|
||
// 获取第一个section（Hero）的高度来判断是否显示按钮
|
||
const heroSection = document.getElementById('hero');
|
||
if (heroSection) {
|
||
const heroHeight = heroSection.offsetHeight;
|
||
const scrollY = window.scrollY;
|
||
|
||
// 当滚动超过Hero区域的50%时显示按钮（即进入第二页）
|
||
setShowScrollButton(scrollY > heroHeight * 0.5);
|
||
}
|
||
};
|
||
|
||
window.addEventListener('scroll', handleScroll);
|
||
handleScroll(); // 初始检查
|
||
|
||
return () => window.removeEventListener('scroll', handleScroll);
|
||
}, []);
|
||
|
||
const scrollToTop = () => {
|
||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||
};
|
||
|
||
return (
|
||
<Router>
|
||
<div className="min-h-screen bg-background relative">
|
||
<Header />
|
||
<main>
|
||
<Routes>
|
||
<Route path="/" element={
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ duration: 0.5 }}
|
||
>
|
||
<Hero />
|
||
<CompanyIntro />
|
||
<Mission />
|
||
<ProductMatrix />
|
||
<VascularScenarios />
|
||
<Architecture />
|
||
<FutureVision />
|
||
<Conclusion />
|
||
</motion.div>
|
||
} />
|
||
</Routes>
|
||
</main>
|
||
|
||
{/* 全局回到首页按钮 */}
|
||
<AnimatePresence>
|
||
{showScrollButton && (
|
||
<motion.button
|
||
onClick={scrollToTop}
|
||
className="fixed bottom-19 right-8 px-2 py-1 rounded-full flex items-center justify-center gap-1 transition-all duration-300 z-50 bg-white border text-gray-400 hover:bg-gray-50 hover:shadow-lg backdrop-blur-sm font-medium text-xs"
|
||
style={{
|
||
borderColor: '#9ca3af',
|
||
color: '#9ca3af'
|
||
}}
|
||
initial={{ opacity: 0, scale: 0, y: 100 }}
|
||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||
exit={{ opacity: 0, scale: 0, y: 100 }}
|
||
transition={{
|
||
type: "spring",
|
||
stiffness: 300,
|
||
damping: 25
|
||
}}
|
||
whileHover={{
|
||
scale: 1.1,
|
||
transition: { duration: 0.2 }
|
||
}}
|
||
whileTap={{ scale: 0.9 }}
|
||
title="回到顶部"
|
||
>
|
||
<ArrowUp className="w-3 h-3" />
|
||
回到顶部
|
||
</motion.button>
|
||
)}
|
||
</AnimatePresence>
|
||
</div>
|
||
</Router>
|
||
);
|
||
}
|
||
|
||
export default App;
|
||
|