97 lines
2.7 KiB
TypeScript
97 lines
2.7 KiB
TypeScript
'use client';
|
||
|
||
import React from 'react';
|
||
import { Container, Typography, Button, Box, useMediaQuery } from '@mui/material';
|
||
import { useTheme } from '@mui/material/styles';
|
||
import { ArrowBack } from '@mui/icons-material';
|
||
import Link from 'next/link';
|
||
import ClientLayout from './components/ClientLayout';
|
||
|
||
const NotFoundPage: React.FC = () => {
|
||
const theme = useTheme();
|
||
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
|
||
const isMedium = useMediaQuery(theme.breakpoints.down('md'));
|
||
|
||
return (
|
||
<Container maxWidth="md" sx={{ py: { xs: 8, md: 16 }, textAlign: 'center' }}>
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
minHeight: '60vh',
|
||
gap: { xs: 4, md: 6 },
|
||
}}
|
||
>
|
||
{/* 404 大号数字 */}
|
||
<Typography
|
||
variant={isMobile ? 'h1' : 'h1'}
|
||
component="h1"
|
||
sx={{
|
||
fontWeight: 700,
|
||
fontSize: isMobile ? '5rem' : isMedium ? '8rem' : '10rem',
|
||
color: theme.palette.primary.main,
|
||
opacity: 0.8,
|
||
lineHeight: 1,
|
||
letterSpacing: '-0.05em',
|
||
textShadow: '2px 2px 4px rgba(0,0,0,0.1)',
|
||
}}
|
||
>
|
||
404
|
||
</Typography>
|
||
|
||
{/* 错误标题 */}
|
||
<Typography
|
||
variant={isMobile ? 'h5' : 'h4'}
|
||
component="h2"
|
||
sx={{
|
||
fontWeight: 600,
|
||
color: theme.palette.text.primary,
|
||
mb: 2,
|
||
}}
|
||
>
|
||
页面未找到
|
||
</Typography>
|
||
|
||
{/* 错误描述 */}
|
||
<Typography
|
||
variant="body1"
|
||
sx={{
|
||
maxWidth: '600px',
|
||
color: theme.palette.text.secondary,
|
||
mb: 6,
|
||
fontSize: isMobile ? '1rem' : '1.125rem',
|
||
}}
|
||
>
|
||
抱歉，您访问的页面不存在或已被移除。请检查您的链接是否正确，或返回首页继续浏览。
|
||
</Typography>
|
||
|
||
{/* 返回首页按钮 */}
|
||
<Button
|
||
component={Link}
|
||
href="/"
|
||
variant="contained"
|
||
startIcon={<ArrowBack />}
|
||
sx={{
|
||
px: { xs: 4, md: 6 },
|
||
py: { xs: 1.5, md: 2 },
|
||
borderRadius: '9999px',
|
||
fontSize: { xs: '0.9rem', md: '1rem' },
|
||
fontWeight: 600,
|
||
textTransform: 'none',
|
||
transition: 'all 0.3s ease',
|
||
'&:hover': {
|
||
transform: 'translateY(-2px)',
|
||
boxShadow: '0 10px 20px rgba(0,0,0,0.1)',
|
||
},
|
||
}}
|
||
>
|
||
返回首页
|
||
</Button>
|
||
</Box>
|
||
</Container>
|
||
);
|
||
};
|
||
|
||
export default NotFoundPage; |