396 lines
14 KiB
TypeScript
396 lines
14 KiB
TypeScript
|
"use client";
|
|||
|
|
|
|||
|
|
import React from "react";
|
|||
|
|
import Container from "@mui/material/Container";
|
|||
|
|
import Typography from "@mui/material/Typography";
|
|||
|
|
import Box from "@mui/material/Box";
|
|||
|
|
import Card from "@mui/material/Card";
|
|||
|
|
import CardContent from "@mui/material/CardContent";
|
|||
|
|
import CardHeader from "@mui/material/CardHeader";
|
|||
|
|
import Button from "@mui/material/Button";
|
|||
|
|
import MailIcon from "@mui/icons-material/Mail";
|
|||
|
|
import SupportIcon from "@mui/icons-material/SupportAgent";
|
|||
|
|
import CodeIcon from "@mui/icons-material/Code";
|
|||
|
|
import WorkIcon from "@mui/icons-material/Work";
|
|||
|
|
import useMediaQuery from "@mui/material/useMediaQuery";
|
|||
|
|
import { useTheme } from "@mui/material/styles";
|
|||
|
|
import ClientLayout from "../components/ClientLayout";
|
|||
|
|
|
|||
|
|
export default function SupportPage() {
|
|||
|
|
const theme = useTheme();
|
|||
|
|
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
|
|||
|
|
const isMedium = useMediaQuery(theme.breakpoints.down('md'));
|
|||
|
|
|
|||
|
|
const handleEmailClick = () => {
|
|||
|
|
window.location.href = 'mailto:leonmmcoset@outlook.com';
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div>
|
|||
|
|
<Container maxWidth="lg" sx={{ py: { xs: 8, md: 12 } }}>
|
|||
|
|
{/* 页面标题 */}
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
textAlign: 'center',
|
|||
|
|
mb: { xs: 8, md: 12 },
|
|||
|
|
opacity: 0,
|
|||
|
|
transform: 'translateY(20px)',
|
|||
|
|
animation: 'fadeInUp 0.8s ease-out forwards'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Typography
|
|||
|
|
variant={isMobile ? 'h3' : 'h2'}
|
|||
|
|
component="h1"
|
|||
|
|
gutterBottom
|
|||
|
|
sx={{
|
|||
|
|
fontWeight: 700,
|
|||
|
|
color: theme.palette.primary.main,
|
|||
|
|
mb: 2
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
技术支持服务
|
|||
|
|
</Typography>
|
|||
|
|
<Typography
|
|||
|
|
variant="body1"
|
|||
|
|
sx={{
|
|||
|
|
maxWidth: '700px',
|
|||
|
|
margin: '0 auto',
|
|||
|
|
color: 'text.secondary',
|
|||
|
|
fontSize: { xs: '1rem', md: '1.1rem' },
|
|||
|
|
lineHeight: 1.6
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
如果您在使用开源项目时遇到问题，或者需要外包项目开发，我们随时为您提供专业的技术支持
|
|||
|
|
</Typography>
|
|||
|
|
</Box>
|
|||
|
|
|
|||
|
|
{/* 服务介绍卡片 */}
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
display: 'grid',
|
|||
|
|
gridTemplateColumns: isMobile
|
|||
|
|
? '1fr'
|
|||
|
|
: isMedium
|
|||
|
|
? 'repeat(2, 1fr)'
|
|||
|
|
: 'repeat(3, 1fr)',
|
|||
|
|
gap: { xs: 4, md: 6 },
|
|||
|
|
mb: { xs: 12, md: 16 },
|
|||
|
|
'& > *': {
|
|||
|
|
opacity: 0,
|
|||
|
|
transform: 'translateY(30px)',
|
|||
|
|
animation: 'fadeInUp 0.6s ease-out forwards'
|
|||
|
|
},
|
|||
|
|
'& > *:nth-child(1)': { animationDelay: '0.2s' },
|
|||
|
|
'& > *:nth-child(2)': { animationDelay: '0.4s' },
|
|||
|
|
'& > *:nth-child(3)': { animationDelay: '0.6s' }
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{/* 支持介绍卡片 */}
|
|||
|
|
<Card
|
|||
|
|
elevation={3}
|
|||
|
|
sx={{
|
|||
|
|
borderRadius: '12px',
|
|||
|
|
overflow: 'hidden',
|
|||
|
|
transition: 'all 0.3s ease',
|
|||
|
|
'&:hover': {
|
|||
|
|
transform: 'translateY(-8px)',
|
|||
|
|
boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
|
|||
|
|
elevation: 5
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<CardHeader
|
|||
|
|
avatar={
|
|||
|
|
<Box sx={{ bgcolor: theme.palette.primary.light, p: 2, borderRadius: '50%' }}>
|
|||
|
|
<SupportIcon fontSize="large" color="primary" />
|
|||
|
|
</Box>
|
|||
|
|
}
|
|||
|
|
title="我们的服务"
|
|||
|
|
titleTypographyProps={{
|
|||
|
|
variant: 'h6',
|
|||
|
|
fontWeight: 600
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
<CardContent>
|
|||
|
|
<Typography variant="body1" paragraph sx={{ lineHeight: 1.6 }}>
|
|||
|
|
如果您在使用一些开源项目遇到问题，需要帮助或者是外包项目，欢迎联系我们。
|
|||
|
|
</Typography>
|
|||
|
|
<Typography variant="body1" paragraph sx={{ lineHeight: 1.6 }}>
|
|||
|
|
我们将提供最优质的服务，确保您的问题得到及时解决。
|
|||
|
|
</Typography>
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
{/* 价格卡片 */}
|
|||
|
|
<Card
|
|||
|
|
elevation={3}
|
|||
|
|
sx={{
|
|||
|
|
borderRadius: '12px',
|
|||
|
|
overflow: 'hidden',
|
|||
|
|
transition: 'all 0.3s ease',
|
|||
|
|
'&:hover': {
|
|||
|
|
transform: 'translateY(-8px)',
|
|||
|
|
boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
|
|||
|
|
elevation: 5
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<CardHeader
|
|||
|
|
avatar={
|
|||
|
|
<Box sx={{ bgcolor: theme.palette.primary.light, p: 2, borderRadius: '50%' }}>
|
|||
|
|
<CodeIcon fontSize="large" color="primary" />
|
|||
|
|
</Box>
|
|||
|
|
}
|
|||
|
|
title="支持价格"
|
|||
|
|
titleTypographyProps={{
|
|||
|
|
variant: 'h6',
|
|||
|
|
fontWeight: 600
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
<CardContent>
|
|||
|
|
<Box sx={{ mb: 2, p: 2, bgcolor: 'primary.main', color: 'white', borderRadius: '8px' }}>
|
|||
|
|
<Typography variant="body1" paragraph sx={{ fontWeight: 600 }}>
|
|||
|
|
普通技术支持：￥20每次
|
|||
|
|
</Typography>
|
|||
|
|
</Box>
|
|||
|
|
<Box sx={{ p: 2, bgcolor: 'primary.light', color: "white", borderRadius: '8px' }}>
|
|||
|
|
<Typography variant="body1" paragraph sx={{ fontWeight: 600 }}>
|
|||
|
|
外包项目：￥40/项目（大型项目￥70/项目）
|
|||
|
|
</Typography>
|
|||
|
|
</Box>
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
{/* 联系卡片 */}
|
|||
|
|
<Card
|
|||
|
|
elevation={3}
|
|||
|
|
sx={{
|
|||
|
|
borderRadius: '12px',
|
|||
|
|
overflow: 'hidden',
|
|||
|
|
transition: 'all 0.3s ease',
|
|||
|
|
'&:hover': {
|
|||
|
|
transform: 'translateY(-8px)',
|
|||
|
|
boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
|
|||
|
|
elevation: 5
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<CardHeader
|
|||
|
|
avatar={
|
|||
|
|
<Box sx={{ bgcolor: theme.palette.primary.light, p: 2, borderRadius: '50%' }}>
|
|||
|
|
<MailIcon fontSize="large" color="primary" />
|
|||
|
|
</Box>
|
|||
|
|
}
|
|||
|
|
title="联系我们"
|
|||
|
|
titleTypographyProps={{
|
|||
|
|
variant: 'h6',
|
|||
|
|
fontWeight: 600
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
<CardContent>
|
|||
|
|
<Typography variant="body1" paragraph sx={{ lineHeight: 1.6, mb: 3 }}>
|
|||
|
|
如有需求请通过以下方式联系我们，我们会尽快回复您的咨询。
|
|||
|
|
</Typography>
|
|||
|
|
<Button
|
|||
|
|
variant="contained"
|
|||
|
|
startIcon={<MailIcon />}
|
|||
|
|
onClick={handleEmailClick}
|
|||
|
|
fullWidth
|
|||
|
|
sx={{
|
|||
|
|
py: 1.5,
|
|||
|
|
borderRadius: '8px',
|
|||
|
|
fontWeight: 600,
|
|||
|
|
transition: 'all 0.3s ease',
|
|||
|
|
'&:hover': {
|
|||
|
|
transform: 'translateY(-2px)',
|
|||
|
|
boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
发送邮件咨询
|
|||
|
|
</Button>
|
|||
|
|
<Typography variant="body2" color="text.secondary" align="center" sx={{ mt: 2 }}>
|
|||
|
|
leonmmcoset@outlook.com
|
|||
|
|
</Typography>
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
</Box>
|
|||
|
|
|
|||
|
|
{/* 服务流程部分 */}
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
textAlign: 'center',
|
|||
|
|
mb: { xs: 8, md: 12 }
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Typography
|
|||
|
|
variant={isMobile ? 'h4' : 'h3'}
|
|||
|
|
component="h2"
|
|||
|
|
gutterBottom
|
|||
|
|
sx={{
|
|||
|
|
fontWeight: 700,
|
|||
|
|
mb: 8,
|
|||
|
|
color: theme.palette.primary.main
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
服务流程
|
|||
|
|
</Typography>
|
|||
|
|
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
display: 'flex',
|
|||
|
|
flexDirection: isMobile ? 'column' : 'row',
|
|||
|
|
justifyContent: 'space-around',
|
|||
|
|
alignItems: isMobile ? 'center' : 'flex-start',
|
|||
|
|
gap: { xs: 6, md: 4 },
|
|||
|
|
'& > *': {
|
|||
|
|
opacity: 0,
|
|||
|
|
transform: 'translateY(30px)',
|
|||
|
|
animation: 'fadeInUp 0.6s ease-out forwards'
|
|||
|
|
},
|
|||
|
|
'& > *:nth-child(1)': { animationDelay: '0.2s' },
|
|||
|
|
'& > *:nth-child(2)': { animationDelay: '0.4s' },
|
|||
|
|
'& > *:nth-child(3)': { animationDelay: '0.6s' },
|
|||
|
|
'& > *:nth-child(4)': { animationDelay: '0.8s' }
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{[1, 2, 3, 4].map((step) => {
|
|||
|
|
// 确保stepData始终有值
|
|||
|
|
const getStepData = (stepNum: number) => {
|
|||
|
|
const data = {
|
|||
|
|
1: { title: '提交需求', icon: <MailIcon /> },
|
|||
|
|
2: { title: '确认方案', icon: <CodeIcon /> },
|
|||
|
|
3: { title: '执行服务', icon: <WorkIcon /> },
|
|||
|
|
4: { title: '完成交付', icon: <SupportIcon /> }
|
|||
|
|
};
|
|||
|
|
return data[stepNum as keyof typeof data] || { title: '', icon: <SupportIcon /> };
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const stepData = getStepData(step);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Box
|
|||
|
|
key={step}
|
|||
|
|
sx={{
|
|||
|
|
display: 'flex',
|
|||
|
|
flexDirection: 'column',
|
|||
|
|
alignItems: 'center',
|
|||
|
|
maxWidth: '200px',
|
|||
|
|
textAlign: 'center'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
width: 80,
|
|||
|
|
height: 80,
|
|||
|
|
borderRadius: '50%',
|
|||
|
|
bgcolor: theme.palette.primary.light,
|
|||
|
|
display: 'flex',
|
|||
|
|
alignItems: 'center',
|
|||
|
|
justifyContent: 'center',
|
|||
|
|
mb: 3,
|
|||
|
|
position: 'relative',
|
|||
|
|
'&::before': {
|
|||
|
|
content: `"${step}"`,
|
|||
|
|
position: 'absolute',
|
|||
|
|
top: '-12px',
|
|||
|
|
right: '-12px',
|
|||
|
|
width: 32,
|
|||
|
|
height: 32,
|
|||
|
|
borderRadius: '50%',
|
|||
|
|
bgcolor: theme.palette.primary.main,
|
|||
|
|
color: 'white',
|
|||
|
|
display: 'flex',
|
|||
|
|
alignItems: 'center',
|
|||
|
|
justifyContent: 'center',
|
|||
|
|
fontWeight: 'bold',
|
|||
|
|
fontSize: '1rem'
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{React.cloneElement(stepData.icon as React.ReactElement<{ fontSize?: 'small' | 'medium' | 'large', color?: 'primary' | 'secondary' }>, {
|
|||
|
|
fontSize: "large",
|
|||
|
|
color: "primary"
|
|||
|
|
})}
|
|||
|
|
</Box>
|
|||
|
|
<Typography variant="h6" sx={{ fontWeight: 600, mb: 1 }}>
|
|||
|
|
{stepData.title}
|
|||
|
|
</Typography>
|
|||
|
|
<Typography variant="body2" color="text.secondary">
|
|||
|
|
{step === 1 && '通过邮件描述您的技术问题或外包需求'}
|
|||
|
|
{step === 2 && '我们确认服务细节和价格'}
|
|||
|
|
{step === 3 && '专业团队为您提供技术支持或开发服务'}
|
|||
|
|
{step === 4 && '完成服务并确保您满意'}
|
|||
|
|
</Typography>
|
|||
|
|
</Box>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</Box>
|
|||
|
|
</Box>
|
|||
|
|
|
|||
|
|
{/* CTA 区域 */}
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
textAlign: 'center',
|
|||
|
|
p: { xs: 6, md: 10 },
|
|||
|
|
bgcolor: theme.palette.primary.main,
|
|||
|
|
color: 'white',
|
|||
|
|
borderRadius: '16px',
|
|||
|
|
opacity: 0,
|
|||
|
|
transform: 'translateY(30px)',
|
|||
|
|
animation: 'fadeInUp 0.8s ease-out 1s forwards'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Typography
|
|||
|
|
variant={isMobile ? 'h4' : 'h3'}
|
|||
|
|
component="h2"
|
|||
|
|
gutterBottom
|
|||
|
|
sx={{
|
|||
|
|
fontWeight: 700,
|
|||
|
|
mb: 4
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
准备好获取技术支持了吗？
|
|||
|
|
</Typography>
|
|||
|
|
<Typography variant="body1" sx={{ mb: 6, fontSize: { xs: '1rem', md: '1.1rem' } }}>
|
|||
|
|
联系我们，让专业的技术团队为您解决问题
|
|||
|
|
</Typography>
|
|||
|
|
<Button
|
|||
|
|
variant="contained"
|
|||
|
|
startIcon={<MailIcon />}
|
|||
|
|
onClick={handleEmailClick}
|
|||
|
|
sx={{
|
|||
|
|
bgcolor: 'white',
|
|||
|
|
color: theme.palette.primary.main,
|
|||
|
|
px: 6,
|
|||
|
|
py: 1.5,
|
|||
|
|
borderRadius: '8px',
|
|||
|
|
fontWeight: 700,
|
|||
|
|
fontSize: '1.1rem',
|
|||
|
|
transition: 'all 0.3s ease',
|
|||
|
|
'&:hover': {
|
|||
|
|
bgcolor: 'rgba(255,255,255,0.9)',
|
|||
|
|
transform: 'translateY(-3px)',
|
|||
|
|
boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.2)'
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
立即联系
|
|||
|
|
</Button>
|
|||
|
|
</Box>
|
|||
|
|
</Container>
|
|||
|
|
<style jsx global>{`
|
|||
|
|
@keyframes fadeInUp {
|
|||
|
|
from {
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: translateY(30px);
|
|||
|
|
}
|
|||
|
|
to {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: translateY(0);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
`}</style>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|