jobwebsite/src/pages/ScienceTechnologyPark/Home/index.tsx

import { useState, useEffect, useRef } from 'react';
import { ProList, PageContainer } from '@ant-design/pro-components';
import { ConfigProvider, Button, Flex, Input, Space, Image, Carousel, Row, Col, Tabs, Tag, Card, Avatar, Typography, Anchor } from 'antd';
import { ReadOutlined, SyncOutlined, HomeOutlined, TeamOutlined } from '@ant-design/icons';
import { useModel, connect, history, Link, useRoutes } from 'umi';
import { Imageprefix } from '@/constants/index'

import ScienceTechnologyParkHomeIntroduction from '@/components/ScienceTechnologyPark/Home/Introduction'
import ScienceTechnologyParkHomeNews from '@/components/ScienceTechnologyPark/Home/News'
import ScienceTechnologyParkHomeNotice from '@/components/ScienceTechnologyPark/Home/Notice'
import ScienceTechnologyParkHomeCompany from '@/components/ScienceTechnologyPark/Home/Company'
import ScienceTechnologyParkHomeConversion from '@/components/ScienceTechnologyPark/Home/Conversion'
import ScienceTechnologyParkHomeActivity from '@/components/ScienceTechnologyPark/Home/Activity'
import ScienceTechnologyParkHomeConstruct from '@/components/ScienceTechnologyPark/Home/Construct'
import ScienceTechnologyParkHomePartner from '@/components/ScienceTechnologyPark/Home/Partner'



import { GetAdvertscheduleList } from '@/services/apis/advertschedule';

const HomePage: React.FC = () => {
    const [advertscheduleList, setAdvertscheduleList] = useState<object[]>([])
    const [keyModel, setKeyModel] = useState<object[]>([
        { title1: '企业', title2: '服务', content: '提供包括政策咨询、资金对接、技术转移和市场拓展在内的全方位企业服务。', icon: <> <HomeOutlined style={{ fontSize: 36, color: '#ffffff' }} /> </> },
        { title: '产业', title2: '孵化', content: '重点支持电子信息、人工智能、新能源等高新技术产业的发展，推动产业升级。', icon: <> <SyncOutlined style={{ fontSize: 36, color: '#ffffff' }} /> </> },
        { title: '技术', title2: '支持', content: '为企业提供研发支持和技术解决方案，帮助企业解决技术难题，实现快速发展。', icon: <> <ReadOutlined style={{ fontSize: 36, color: '#ffffff' }} /> </> },
        { title: '产学研', title2: '合作', content: '构建开放共享的创新平台，促进产学研之间的深度合作，加速科技成果的转化。', icon: <> <TeamOutlined style={{ fontSize: 36, color: '#ffffff' }} /> </> }
    ])

    useEffect(() => {
        GetAdvertscheduleList({ page: 1, pagesize: 4, code: 'kcysylbt' }).then(res => {
            setAdvertscheduleList(res.data.advertschedules)
        })
    }, []);

    return (
        <>
            <ConfigProvider
                theme={{
                    token: {
                        colorPrimary: '#19be6e',
                    },
                    components: {
                        Button: {
                            colorText: '#19be6e'
                        }
                    }
                }}
            >
                <Carousel arrows style={{ width: '100%' }}>
                    {/*  16:9比例 */}
                    <div style={{ borderRadius: 8 }}>
                        <div style={{
                            width: '100%',
                            position: 'relative',
                            paddingTop: '33.33%',
                            overflow: 'hidden'
                        }}>
                            <video src={`${Imageprefix}park/661_1740982607.mp4`} controls style={{
                                position: 'absolute',
                                top: 0,
                                left: 0,
                                width: '100%',
                                height: '100%',
                                objectFit: 'cover',
                                overflowClipMargin: 'content-box',
                                overflow: 'clip'
                            }} ></video>

                        </div>
                    </div>

                    {
                        advertscheduleList && advertscheduleList.length && advertscheduleList.map((item, index) => (
                            <>
                                <div style={{ borderRadius: 8 }}>
                                    <div style={{
                                        width: '100%',
                                        position: 'relative',
                                        paddingTop: '33.33%',
                                        overflow: 'hidden'
                                    }}>
                                        <Link to={{ pathname: item.target_url }} target='_blank'>
                                            <img src={Imageprefix + item.image_url} style={{
                                                position: 'absolute',
                                                top: 0,
                                                left: 0,
                                                width: '100%',
                                                height: '100%',
                                            }} />
                                        </Link>

                                    </div>
                                </div>

                            </>
                        ))
                    }

                </Carousel>

                <Flex justify='space-around' align='center' style={{ width: '100%', background: '#ffffff', padding: 20 }}>
                    {keyModel && keyModel.length && keyModel.map((item, index) => (
                        <>
                            <Flex justify='space-between' align='center' style={{ marginBottom: 20 }}>
                                <Flex justify='center' align='center' style={{
                                    backgroundColor: '#ffc100',
                                    borderRadius: '50%',
                                    boxShadow: '0 0 10px rgba(0, 0, 0, 0.2)',
                                    border: '12px solid #fff',
                                    padding: 30,
                                    position: 'relative',
                                    width: 140,
                                    height: 140
                                }}>
                                    {item.icon}
                                    <Flex vertical justify='center' align='center' style={{
                                        backgroundColor: '#a6a6a6',
                                        borderRadius: '100%',
                                        boxShadow: '0 0 10px rgba(0, 0, 0, 0.2)',
                                        border: '8px solid #fff',
                                        padding: 10,
                                        position: 'absolute',
                                        bottom: '-30%',
                                        right: '-30%',
                                        width: 88,
                                        height: 88,
                                        color: '#ffffff'
                                    }}>
                                        <div>
                                            {item.title1}
                                        </div>
                                        <div>
                                            {item.title2}
                                        </div>
                                    </Flex>
                                </Flex>
                                <Flex  style={{
                                    width: 200,
                                    height: 140, 
                                    paddingTop: 30,
                                    paddingLeft: 10
                                }}>
                                    {item.content}
                                </Flex>
                            </Flex>
                        </>
                    ))
                    }
                </Flex>

                <PageContainer
                    header={{ title: '', }}
                    style={{ minHeight: 800 }}
                >

                    <Space direction='vertical' size={40} style={{ width: '100%' }}>
                        <ScienceTechnologyParkHomeIntroduction></ScienceTechnologyParkHomeIntroduction>
                        <Row gutter={[40, 20]}>
                            <Col span={12}>
                                <ScienceTechnologyParkHomeNews></ScienceTechnologyParkHomeNews>
                            </Col>
                            <Col span={12}>
                                <ScienceTechnologyParkHomeNotice></ScienceTechnologyParkHomeNotice>
                            </Col>
                        </Row>

                        {/* 园区企业 */}
                        <Row gutter={[40, 20]}>
                            <Col span={24}>
                                <ScienceTechnologyParkHomeCompany></ScienceTechnologyParkHomeCompany>
                            </Col>

                        </Row>

                        <Row gutter={[40, 20]}>
                            <Col span={12}>
                                <ScienceTechnologyParkHomeConversion></ScienceTechnologyParkHomeConversion>
                            </Col>
                            <Col span={12}>
                                <ScienceTechnologyParkHomeActivity></ScienceTechnologyParkHomeActivity>

                            </Col>
                        </Row>
                        {/* 党建工作 */}
                        <Row gutter={[40, 20]}>
                            <Col span={24}>
                                <ScienceTechnologyParkHomeConstruct></ScienceTechnologyParkHomeConstruct>
                            </Col>
                        </Row>
                        {/* 合作伙伴 */}
                        <ScienceTechnologyParkHomePartner></ScienceTechnologyParkHomePartner>
                        <div style={{
                            width: '100%',
                            position: 'relative',
                            paddingTop: '12%', /* 16:9 的比例 */
                            overflow: 'hidden'
                        }}>
                            <Link to={{ pathname: '/talent/home' }} target='_blank'>
                                <img src='/images/qiuzhitiao.jpg' style={{
                                    position: 'absolute',
                                    top: 0,
                                    left: 0,
                                    width: '100%',
                                    height: '100%',
                                    borderRadius: 6
                                }} />
                            </Link>

                        </div>
                    </Space>
                </PageContainer >
            </ConfigProvider >
        </>
    );
};

export default HomePage;