108 lines
3.7 KiB
JavaScript
108 lines
3.7 KiB
JavaScript
import { Row, Col, Input, Button, Divider } from 'antd';
|
||
import { MailOutlined, QrcodeOutlined } from '@ant-design/icons';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import './Footer.css';
|
||
|
||
const Footer = () => {
|
||
const navigate = useNavigate();
|
||
|
||
const navLinks = [
|
||
{ title: '网站协议', url: '/protocol' },
|
||
{ title: '支付协议', url: '/pay-protocol' },
|
||
{ title: '版权声明', url: '/copyright' },
|
||
];
|
||
|
||
const navLinks2 = [
|
||
{ title: '帮助中心', url: '/help' },
|
||
{ title: '供稿必读', url: '/upload-guide' },
|
||
];
|
||
|
||
const handleLinkClick = (url) => {
|
||
navigate(url);
|
||
};
|
||
|
||
return (
|
||
<footer className="footer">
|
||
<div className="footer-main">
|
||
<div className="footer-container">
|
||
<Row gutter={[48, 24]}>
|
||
<Col xs={24} sm={24} md={8} lg={6}>
|
||
<div className="footer-links-group">
|
||
{navLinks.map(link => (
|
||
<a
|
||
key={link.title}
|
||
onClick={() => handleLinkClick(link.url)}
|
||
className="footer-link"
|
||
>
|
||
{link.title}
|
||
</a>
|
||
))}
|
||
</div>
|
||
<div className="footer-links-group">
|
||
{navLinks2.map(link => (
|
||
<a
|
||
key={link.title}
|
||
onClick={() => handleLinkClick(link.url)}
|
||
className="footer-link"
|
||
>
|
||
{link.title}
|
||
</a>
|
||
))}
|
||
</div>
|
||
</Col>
|
||
|
||
<Col xs={24} sm={24} md={8} lg={10}>
|
||
<div className="footer-contact">
|
||
<h4 className="contact-title">客服邮箱</h4>
|
||
<div className="contact-email">
|
||
<Input
|
||
readOnly
|
||
value="service@aishej.com （工作日9:00-18:00）"
|
||
suffix={<MailOutlined />}
|
||
className="email-input"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</Col>
|
||
|
||
<Col xs={24} sm={24} md={8} lg={8}>
|
||
<div className="footer-qrcodes">
|
||
<div className="qrcode-item">
|
||
<div className="qrcode-placeholder">
|
||
<QrcodeOutlined className="qrcode-icon" />
|
||
</div>
|
||
<span className="qrcode-text">移动端网站</span>
|
||
</div>
|
||
<div className="qrcode-item">
|
||
<div className="qrcode-placeholder">
|
||
<QrcodeOutlined className="qrcode-icon" />
|
||
</div>
|
||
<span className="qrcode-text">微信公众号</span>
|
||
</div>
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="footer-bottom">
|
||
<div className="footer-container">
|
||
<p className="copyright-text">
|
||
图汇作为网络服务平台方，平台上的作品均由供稿设计师上传并发布，若您的权利被侵害，请联系客服邮箱：
|
||
<a href="mailto:service@aishej.com" className="email-link">service@aishej.com</a>
|
||
，我们将及时为您处理 | 本站法律顾问：张明律师
|
||
</p>
|
||
<p className="copyright-links">
|
||
<a href="#">京ICP备2024068521号-1</a> |
|
||
增值电信业务经营许可证：京B2-20240312 |
|
||
<a href="#">京公网安备11010802045678号</a> |
|
||
Copyright © 2024-2026 图汇 AiSheji.com
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
);
|
||
};
|
||
|
||
export default Footer;
|