698 lines
28 KiB
JavaScript
698 lines
28 KiB
JavaScript
import React, { useEffect, useState, useRef } from 'react';
|
||
import { Card, Row, Col, Tag, Button, Spin, Typography, Carousel } from 'antd';
|
||
import { RocketOutlined, RightOutlined, LeftOutlined } from '@ant-design/icons';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import { motion } from 'framer-motion';
|
||
import { getConfigs, getHomePageConfig, getCompetitions, getActivities } from '../api';
|
||
import './Home.css';
|
||
|
||
const { Title, Paragraph } = Typography;
|
||
|
||
// 获取完整图片 URL
|
||
const getImageUrl = (url) => {
|
||
if (!url) return '';
|
||
if (url.startsWith('http') || url.startsWith('//')) return url;
|
||
return `http://localhost:8876${url}`;
|
||
};
|
||
|
||
const Home = () => {
|
||
const [products, setProducts] = useState([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [typedText, setTypedText] = useState('');
|
||
const [isTypingComplete, setIsTypingComplete] = useState(false);
|
||
const [currentSlide, setCurrentSlide] = useState(0);
|
||
const [currentSlide2, setCurrentSlide2] = useState(0);
|
||
const [currentSlide3, setCurrentSlide3] = useState(0);
|
||
const [homeConfig, setHomeConfig] = useState(null);
|
||
const [carousel1Items, setCarousel1Items] = useState([]);
|
||
const [competitions, setCompetitions] = useState([]);
|
||
const [activities, setActivities] = useState([]);
|
||
const fullText = "未来已来 AI 核心驱动";
|
||
const defaultMainTitle = '"创赢未来"云南2026创业大赛';
|
||
const [mainTitleText, setMainTitleText] = useState(defaultMainTitle);
|
||
const navigate = useNavigate();
|
||
const carouselRef = useRef(null);
|
||
const carouselRef2 = useRef(null);
|
||
const carouselRef3 = useRef(null);
|
||
|
||
useEffect(() => {
|
||
fetchProducts();
|
||
fetchHomePageConfig();
|
||
fetchCompetitions();
|
||
fetchActivities();
|
||
}, []);
|
||
|
||
// 主标题打字机效果 - 在获取到配置后执行
|
||
useEffect(() => {
|
||
const title = homeConfig?.main_title || defaultMainTitle;
|
||
setMainTitleText(title);
|
||
setTypedText('');
|
||
setIsTypingComplete(false);
|
||
|
||
let mainIndex = 0;
|
||
const mainTypingInterval = setInterval(() => {
|
||
mainIndex++;
|
||
setTypedText(title.slice(0, mainIndex));
|
||
if (mainIndex >= title.length) {
|
||
clearInterval(mainTypingInterval);
|
||
setIsTypingComplete(true);
|
||
}
|
||
}, 120);
|
||
|
||
return () => clearInterval(mainTypingInterval);
|
||
}, [homeConfig?.main_title]);
|
||
|
||
const fetchProducts = async () => {
|
||
try {
|
||
const response = await getConfigs();
|
||
setProducts(response.data);
|
||
} catch (error) {
|
||
console.error('Failed to fetch products:', error);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const fetchHomePageConfig = async () => {
|
||
try {
|
||
const response = await getHomePageConfig();
|
||
const data = response.data;
|
||
setHomeConfig(data);
|
||
setCarousel1Items(data.carousel1_items || []);
|
||
} catch (error) {
|
||
console.error('Failed to fetch homepage config:', error);
|
||
}
|
||
};
|
||
|
||
const fetchCompetitions = async () => {
|
||
try {
|
||
const response = await getCompetitions({ page: 1, page_size: 10 });
|
||
setCompetitions(response.data.results || []);
|
||
} catch (error) {
|
||
console.error('Failed to fetch competitions:', error);
|
||
}
|
||
};
|
||
|
||
const fetchActivities = async () => {
|
||
try {
|
||
const response = await getActivities();
|
||
const data = Array.isArray(response.data) ? response.data : (response.data?.results || []);
|
||
setActivities(data);
|
||
} catch (error) {
|
||
console.error('Failed to fetch activities:', error);
|
||
}
|
||
};
|
||
|
||
const cardVariants = {
|
||
hidden: { opacity: 0, y: 50 },
|
||
visible: (i) => ({
|
||
opacity: 1,
|
||
y: 0,
|
||
transition: {
|
||
delay: i * 0.1,
|
||
duration: 0.5,
|
||
type: "spring",
|
||
stiffness: 100
|
||
}
|
||
}),
|
||
hover: {
|
||
scale: 1.05,
|
||
rotateX: 5,
|
||
rotateY: 5,
|
||
transition: { duration: 0.3 }
|
||
}
|
||
};
|
||
|
||
if (loading) {
|
||
return (
|
||
<div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
|
||
<Spin size="large" />
|
||
<div style={{ marginTop: 20, color: '#00b96b' }}>加载中...</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div>
|
||
<div style={{ textAlign: 'center', marginBottom: 80 }}>
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
style={{ marginBottom: 50 }}
|
||
>
|
||
<Title level={1} style={{
|
||
color: '#fff',
|
||
fontSize: 'clamp(2.5rem, 6vw, 5rem)',
|
||
marginBottom: 30,
|
||
minHeight: '80px'
|
||
}}>
|
||
<span className="gold-text">{typedText}</span>
|
||
{!isTypingComplete && <span className="cursor-blink-gold">|</span>}
|
||
</Title>
|
||
</motion.div>
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.9 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 0.8, delay: 0.3 }}
|
||
>
|
||
<img
|
||
src={getImageUrl(homeConfig?.display_banner) || '/shouye.png'}
|
||
alt="首页Banner"
|
||
style={{
|
||
width: '100%',
|
||
maxWidth: 1200,
|
||
height: 'auto',
|
||
borderRadius: 12,
|
||
boxShadow: '0 8px 32px rgba(24, 144, 255, 0.3)'
|
||
}}
|
||
/>
|
||
</motion.div>
|
||
|
||
{/* 轮播图 */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.5 }}
|
||
style={{ marginTop: 40, maxWidth: 1200, marginLeft: 'auto', marginRight: 'auto' }}
|
||
>
|
||
{/* 轮播图主体 */}
|
||
<div style={{
|
||
position: 'relative',
|
||
borderRadius: 16,
|
||
overflow: 'hidden',
|
||
boxShadow: '0 8px 32px rgba(24, 144, 255, 0.2)',
|
||
}}>
|
||
<Carousel
|
||
ref={carouselRef}
|
||
autoplay
|
||
dots={false}
|
||
beforeChange={(_, next) => setCurrentSlide(next)}
|
||
>
|
||
{(carousel1Items.length > 0 ? carousel1Items : []).map((image, index) => (
|
||
<div key={index}>
|
||
<div style={{
|
||
height: 450,
|
||
position: 'relative',
|
||
overflow: 'hidden',
|
||
background: 'linear-gradient(135deg, #1890ff 0%, #69c0ff 100%)',
|
||
}}>
|
||
<img
|
||
src={getImageUrl(image.display_image) || image.image_url}
|
||
alt={image.title}
|
||
style={{
|
||
width: '100%',
|
||
height: '100%',
|
||
objectFit: 'cover'
|
||
}}
|
||
onError={(e) => {
|
||
e.target.style.display = 'none';
|
||
}}
|
||
/>
|
||
{/* 渐变遮罩 */}
|
||
<div style={{
|
||
position: 'absolute',
|
||
top: 0,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
background: 'linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.6) 100%)',
|
||
}} />
|
||
{/* 标题区域 - 图片上方 */}
|
||
<div style={{
|
||
position: 'absolute',
|
||
top: 40,
|
||
left: 40,
|
||
textAlign: 'left',
|
||
}}>
|
||
<h2 style={{ fontSize: 36, fontWeight: 'bold', color: '#fff', margin: 0, textShadow: '2px 2px 4px rgba(0,0,0,0.3)' }}>
|
||
{image.title}
|
||
</h2>
|
||
<p style={{ fontSize: 18, color: 'rgba(255,255,255,0.9)', margin: '8px 0 0 0', textShadow: '1px 1px 2px rgba(0,0,0,0.3)' }}>
|
||
{image.subtitle}
|
||
</p>
|
||
</div>
|
||
{/* 底部信息 */}
|
||
<div style={{
|
||
position: 'absolute',
|
||
bottom: 0,
|
||
left: 0,
|
||
right: 0,
|
||
padding: '24px 40px',
|
||
background: 'linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%)',
|
||
}}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
|
||
<Tag style={{
|
||
background: image.status_color,
|
||
color: '#fff',
|
||
border: 'none',
|
||
fontSize: 14,
|
||
padding: '4px 16px',
|
||
borderRadius: 20,
|
||
}}>
|
||
{image.status}
|
||
</Tag>
|
||
<span style={{ color: 'rgba(255,255,255,0.8)', fontSize: 14 }}>{image.location}</span>
|
||
</div>
|
||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||
<div>
|
||
<h3 style={{ color: '#fff', fontSize: 24, fontWeight: 'bold', margin: 0 }}>{image.title}</h3>
|
||
<p style={{ color: 'rgba(255,255,255,0.8)', fontSize: 14, margin: '8px 0 0 0' }}>
|
||
<span style={{ marginRight: 20 }}>📅 {image.date}</span>
|
||
<span>📍 {image.location}</span>
|
||
</p>
|
||
</div>
|
||
<Button type="primary" size="large" style={{ borderRadius: 24, paddingLeft: 24, paddingRight: 24 }} onClick={() => navigate('/competitions')}>
|
||
立即报名
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</Carousel>
|
||
|
||
{/* 自定义分页指示器 */}
|
||
<div style={{
|
||
position: 'absolute',
|
||
bottom: 100,
|
||
right: 40,
|
||
display: 'flex',
|
||
gap: 8,
|
||
}}>
|
||
{(carousel1Items.length > 0 ? carousel1Items : []).map((_, index) => (
|
||
<div
|
||
key={index}
|
||
onClick={() => carouselRef.current?.goTo(index)}
|
||
style={{
|
||
width: currentSlide === index ? 32 : 10,
|
||
height: 10,
|
||
borderRadius: 5,
|
||
background: currentSlide === index ? '#fff' : 'rgba(255,255,255,0.4)',
|
||
cursor: 'pointer',
|
||
transition: 'all 0.3s',
|
||
}}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* 赛事中心轮播图 */}
|
||
{competitions.length > 0 && (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.5 }}
|
||
style={{ marginTop: 40, maxWidth: 1200, marginLeft: 'auto', marginRight: 'auto' }}
|
||
>
|
||
{/* 标题区域 */}
|
||
<div style={{ display: 'flex', alignItems: 'center', marginBottom: 24, justifyContent: 'space-between' }}>
|
||
<div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
|
||
<span style={{ fontSize: 32, fontWeight: 'bold', color: '#fff', paddingLeft: 16, borderLeft: '4px solid #1890ff' }}>赛事中心</span>
|
||
<span style={{ fontSize: 16, color: 'rgba(255,255,255,0.6)', letterSpacing: 2 }}>COMPETITIONS</span>
|
||
</div>
|
||
{/* 箭头导航 */}
|
||
<div style={{ display: 'flex', gap: 12 }}>
|
||
<div
|
||
onClick={() => carouselRef3.current?.prev()}
|
||
onMouseEnter={(e) => { e.currentTarget.style.background = '#1890ff'; e.currentTarget.querySelector('svg').style.color = '#fff'; }}
|
||
onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.querySelector('svg').style.color = '#1890ff'; }}
|
||
style={{
|
||
width: 44,
|
||
height: 44,
|
||
borderRadius: '50%',
|
||
background: 'transparent',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
cursor: 'pointer',
|
||
border: '2px solid #1890ff',
|
||
transition: 'all 0.3s'
|
||
}}
|
||
>
|
||
<LeftOutlined style={{ fontSize: 18, color: '#1890ff', transition: 'color 0.3s' }} />
|
||
</div>
|
||
<div
|
||
onClick={() => carouselRef3.current?.next()}
|
||
onMouseEnter={(e) => { e.currentTarget.style.background = '#1890ff'; e.currentTarget.querySelector('svg').style.color = '#fff'; }}
|
||
onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.querySelector('svg').style.color = '#1890ff'; }}
|
||
style={{
|
||
width: 44,
|
||
height: 44,
|
||
borderRadius: '50%',
|
||
background: 'transparent',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
cursor: 'pointer',
|
||
border: '2px solid #1890ff',
|
||
transition: 'all 0.3s'
|
||
}}
|
||
>
|
||
<RightOutlined style={{ fontSize: 18, color: '#1890ff', transition: 'color 0.3s' }} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 轮播图主体 */}
|
||
<div style={{
|
||
position: 'relative',
|
||
borderRadius: 16,
|
||
overflow: 'hidden',
|
||
boxShadow: '0 8px 32px rgba(24, 144, 255, 0.2)',
|
||
}}>
|
||
<Carousel
|
||
ref={carouselRef3}
|
||
autoplay
|
||
dots={false}
|
||
beforeChange={(_, next) => setCurrentSlide3(next)}
|
||
>
|
||
{competitions.map((competition, index) => (
|
||
<div key={competition.id}>
|
||
<div style={{
|
||
height: 450,
|
||
position: 'relative',
|
||
overflow: 'hidden',
|
||
background: 'linear-gradient(135deg, #1890ff 0%, #69c0ff 100%)',
|
||
}}>
|
||
<img
|
||
src={getImageUrl(competition.display_cover_image) || competition.cover_image}
|
||
alt={competition.title}
|
||
style={{
|
||
width: '100%',
|
||
height: '100%',
|
||
objectFit: 'cover'
|
||
}}
|
||
onError={(e) => {
|
||
e.target.style.display = 'none';
|
||
}}
|
||
/>
|
||
{/* 渐变遮罩 */}
|
||
<div style={{
|
||
position: 'absolute',
|
||
top: 0,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
background: 'linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.6) 100%)',
|
||
}} />
|
||
{/* 标题区域 - 图片上方 */}
|
||
<div style={{
|
||
position: 'absolute',
|
||
top: 40,
|
||
left: 40,
|
||
textAlign: 'left',
|
||
}}>
|
||
<h2 style={{ fontSize: 36, fontWeight: 'bold', color: '#fff', margin: 0, textShadow: '2px 2px 4px rgba(0,0,0,0.3)' }}>
|
||
{competition.title}
|
||
</h2>
|
||
</div>
|
||
{/* 底部信息 */}
|
||
<div style={{
|
||
position: 'absolute',
|
||
bottom: 0,
|
||
left: 0,
|
||
right: 0,
|
||
padding: '24px 40px',
|
||
background: 'linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%)',
|
||
}}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
|
||
<Tag color={competition.status === 'registration' ? 'green' : 'default'} style={{ fontSize: 14, padding: '4px 16px', borderRadius: 20 }}>
|
||
{competition.status_display}
|
||
</Tag>
|
||
</div>
|
||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||
<div>
|
||
<h3 style={{ color: '#fff', fontSize: 24, fontWeight: 'bold', margin: 0 }}>{competition.title}</h3>
|
||
<p style={{ color: 'rgba(255,255,255,0.8)', fontSize: 14, margin: '8px 0 0 0' }}>
|
||
<span style={{ marginRight: 20 }}>📅 {competition.start_time?.split('T')[0]} ~ {competition.end_time?.split('T')[0]}</span>
|
||
</p>
|
||
</div>
|
||
<Button type="primary" size="large" style={{ borderRadius: 24, paddingLeft: 24, paddingRight: 24 }} onClick={() => navigate(`/competitions/${competition.id}`)}>
|
||
查看详情
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</Carousel>
|
||
|
||
{/* 自定义分页指示器 */}
|
||
<div style={{
|
||
position: 'absolute',
|
||
bottom: 100,
|
||
right: 40,
|
||
display: 'flex',
|
||
gap: 8,
|
||
}}>
|
||
{competitions.map((_, index) => (
|
||
<div
|
||
key={index}
|
||
onClick={() => carouselRef3.current?.goTo(index)}
|
||
style={{
|
||
width: currentSlide3 === index ? 32 : 10,
|
||
height: 10,
|
||
borderRadius: 5,
|
||
background: currentSlide3 === index ? '#fff' : 'rgba(255,255,255,0.4)',
|
||
cursor: 'pointer',
|
||
transition: 'all 0.3s',
|
||
}}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
|
||
{/* 系列活动轮播图 */}
|
||
{activities.length > 0 && (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.7 }}
|
||
style={{ marginTop: 40, maxWidth: 1200, marginLeft: 'auto', marginRight: 'auto' }}
|
||
>
|
||
{/* 标题区域 */}
|
||
<div style={{ display: 'flex', alignItems: 'center', marginBottom: 24, justifyContent: 'space-between' }}>
|
||
<div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
|
||
<span style={{ fontSize: 32, fontWeight: 'bold', color: '#fff', paddingLeft: 16, borderLeft: '4px solid #1890ff' }}>系列活动</span>
|
||
<span style={{ fontSize: 16, color: 'rgba(255,255,255,0.6)', letterSpacing: 2 }}>ACTIVITIES</span>
|
||
</div>
|
||
{/* 箭头导航 */}
|
||
<div style={{ display: 'flex', gap: 12 }}>
|
||
<div
|
||
onClick={() => carouselRef2.current?.prev()}
|
||
onMouseEnter={(e) => { e.currentTarget.style.background = '#1890ff'; e.currentTarget.querySelector('svg').style.color = '#fff'; }}
|
||
onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.querySelector('svg').style.color = '#1890ff'; }}
|
||
style={{
|
||
width: 44,
|
||
height: 44,
|
||
borderRadius: '50%',
|
||
background: 'transparent',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
cursor: 'pointer',
|
||
border: '2px solid #1890ff',
|
||
transition: 'all 0.3s'
|
||
}}
|
||
>
|
||
<LeftOutlined style={{ fontSize: 18, color: '#1890ff', transition: 'color 0.3s' }} />
|
||
</div>
|
||
<div
|
||
onClick={() => carouselRef2.current?.next()}
|
||
onMouseEnter={(e) => { e.currentTarget.style.background = '#1890ff'; e.currentTarget.querySelector('svg').style.color = '#fff'; }}
|
||
onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.querySelector('svg').style.color = '#1890ff'; }}
|
||
style={{
|
||
width: 44,
|
||
height: 44,
|
||
borderRadius: '50%',
|
||
background: 'transparent',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
cursor: 'pointer',
|
||
border: '2px solid #1890ff',
|
||
transition: 'all 0.3s'
|
||
}}
|
||
>
|
||
<RightOutlined style={{ fontSize: 18, color: '#1890ff', transition: 'color 0.3s' }} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 轮播图主体 */}
|
||
<div style={{
|
||
position: 'relative',
|
||
borderRadius: 16,
|
||
overflow: 'hidden',
|
||
boxShadow: '0 8px 32px rgba(24, 144, 255, 0.2)',
|
||
}}>
|
||
<Carousel
|
||
ref={carouselRef2}
|
||
autoplay
|
||
dots={false}
|
||
beforeChange={(_, next) => setCurrentSlide2(next)}
|
||
>
|
||
{activities.map((activity, index) => (
|
||
<div key={activity.id}>
|
||
<div style={{
|
||
height: 450,
|
||
position: 'relative',
|
||
overflow: 'hidden',
|
||
background: 'linear-gradient(135deg, #1890ff 0%, #69c0ff 100%)',
|
||
}}>
|
||
<img
|
||
src={getImageUrl(activity.display_banner_url || activity.banner_url || activity.cover_image)}
|
||
alt={activity.title}
|
||
style={{
|
||
width: '100%',
|
||
height: '100%',
|
||
objectFit: 'cover'
|
||
}}
|
||
onError={(e) => {
|
||
e.target.style.display = 'none';
|
||
}}
|
||
/>
|
||
{/* 渐变遮罩 */}
|
||
<div style={{
|
||
position: 'absolute',
|
||
top: 0,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
background: 'linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.6) 100%)',
|
||
}} />
|
||
{/* 标题区域 - 图片上方 */}
|
||
<div style={{
|
||
position: 'absolute',
|
||
top: 40,
|
||
left: 40,
|
||
textAlign: 'left',
|
||
}}>
|
||
<h2 style={{ fontSize: 36, fontWeight: 'bold', color: '#fff', margin: 0, textShadow: '2px 2px 4px rgba(0,0,0,0.3)' }}>
|
||
{activity.title}
|
||
</h2>
|
||
{activity.subtitle && (
|
||
<p style={{ fontSize: 18, color: 'rgba(255,255,255,0.9)', margin: '8px 0 0 0', textShadow: '1px 1px 2px rgba(0,0,0,0.3)' }}>
|
||
{activity.subtitle}
|
||
</p>
|
||
)}
|
||
</div>
|
||
{/* 底部信息 */}
|
||
<div style={{
|
||
position: 'absolute',
|
||
bottom: 0,
|
||
left: 0,
|
||
right: 0,
|
||
padding: '24px 40px',
|
||
background: 'linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%)',
|
||
}}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
|
||
<Tag style={{
|
||
background: activity.status_color || '#1890ff',
|
||
color: '#fff',
|
||
border: 'none',
|
||
fontSize: 14,
|
||
padding: '4px 16px',
|
||
borderRadius: 20,
|
||
}}>
|
||
{activity.status || activity.status_display || '进行中'}
|
||
</Tag>
|
||
<span style={{ color: 'rgba(255,255,255,0.8)', fontSize: 14 }}>{activity.location}</span>
|
||
</div>
|
||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||
<div>
|
||
<h3 style={{ color: '#fff', fontSize: 24, fontWeight: 'bold', margin: 0 }}>{activity.title}</h3>
|
||
<p style={{ color: 'rgba(255,255,255,0.8)', fontSize: 14, margin: '8px 0 0 0' }}>
|
||
<span style={{ marginRight: 20 }}>📅 {activity.date || activity.start_time?.split('T')[0]}</span>
|
||
{activity.location && <span>📍 {activity.location}</span>}
|
||
</p>
|
||
</div>
|
||
<Button type="primary" size="large" style={{ borderRadius: 24, paddingLeft: 24, paddingRight: 24 }} onClick={() => navigate('/activities')}>
|
||
查看详情
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</Carousel>
|
||
|
||
{/* 自定义分页指示器 */}
|
||
<div style={{
|
||
position: 'absolute',
|
||
bottom: 100,
|
||
right: 40,
|
||
display: 'flex',
|
||
gap: 8,
|
||
}}>
|
||
{activities.map((_, index) => (
|
||
<div
|
||
key={index}
|
||
onClick={() => carouselRef2.current?.goTo(index)}
|
||
style={{
|
||
width: currentSlide2 === index ? 32 : 10,
|
||
height: 10,
|
||
borderRadius: 5,
|
||
background: currentSlide2 === index ? '#fff' : 'rgba(255,255,255,0.4)',
|
||
cursor: 'pointer',
|
||
transition: 'all 0.3s',
|
||
}}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
</div>
|
||
|
||
{/* 主办单位信息 */}
|
||
<div style={{ maxWidth: 1200, margin: '40px auto 0', padding: '0 24px', textAlign: 'center' }}>
|
||
<div style={{
|
||
background: 'rgba(255, 255, 255, 0.1)',
|
||
borderRadius: 16,
|
||
padding: '24px 40px',
|
||
backdropFilter: 'blur(10px)',
|
||
border: '1px solid rgba(255, 255, 255, 0.2)',
|
||
}}>
|
||
<p style={{
|
||
fontSize: 18,
|
||
color: '#fff',
|
||
margin: 0,
|
||
lineHeight: 2,
|
||
}}>
|
||
<span style={{ fontWeight: 'bold', marginRight: 8 }}>主办单位：</span>{homeConfig?.organizer || '云南省人力资源和社会保障厅'}
|
||
<span style={{ margin: '0 20px' }}>|</span>
|
||
<span style={{ fontWeight: 'bold', marginRight: 8 }}>承办单位：</span>{homeConfig?.undertaker || '云南省就业局'}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<style>{`
|
||
.cursor-blink {
|
||
animation: blink 1s step-end infinite;
|
||
}
|
||
.cursor-blink-gold {
|
||
animation: blink-gold 1s step-end infinite;
|
||
color: #FFD700;
|
||
}
|
||
@keyframes blink {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0; }
|
||
}
|
||
@keyframes blink-gold {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0; }
|
||
}
|
||
.gold-text {
|
||
color: #FFD700;
|
||
}
|
||
`}</style>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Home; |