chtech-anythingllm/frontend/src/pages/Home/index.jsx

import { useState, useEffect } from "react";
import './home.css'
import videoRef from "./img/bj1.mp4"
import headImg from "./img/head.png"
import { Carousel, message } from 'antd';
import moment from 'moment';
import bg from './img/card.png'
import bgHover from "./img/card_hover.png"
import icon1 from "./img/1.png"
import icon2 from "./img/2.png"
import icon3 from "./img/3.png"
import icon4 from "./img/4.png"
import icon5 from "./img/5.png"
import icon6 from "./img/6.png"
import icon7 from "./img/7.png"
import icon8 from "./img/8.png"


export default function Home() {
    const [data, setData] = useState(false);
    const weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
    const [renderKey, setRenderKey] = useState(1);
    // 链接类型：1-路由 2-链接 3-建设中 4-点击事件
    const list = [
        {
            type: 1,
            url: '/Main',
            name: 'AI问政',
            icon: icon1,
        },
        {
            type: 1,
            url: '/home/DataAnalysis',
            name: '数据分析',
            icon: icon2,
        },
        {
            type: 1,
            url: '/home/Tendency',
            name: '趋势洞察',
            icon: icon4,
        },
        {
            type: 1,
            url: '/home/ReportGeneration',
            name: '报告生成',
            icon: icon3,
        },
        {
            type: 2,
            url: '',
            name: '文件上传',
            icon: icon5,
        },
        {
            type: 1,
            url: '/home/PolicyLibrary',
            name: '政策库',
            icon: icon6,
        },
        {
            type: 2,
            url: '',
            name: '应用管理',
            icon: icon7,
        },
        {
            type: 1,
            url: '/settings/appearance',
            name: '系统管理',
            icon: icon8,
        },
    ]

    // 点击事件
    const bindUrl = (e) => {
        console.log(1234, e);
        if (e.type == 1) {
            window.location = e.url
        } else {
            message.info({
                content: e.name + '开发中...'
            })
        }
    }

    //方法
    useEffect(() => {
        const timer = setInterval(() => {
            setRenderKey(Math.random());
        }, 1000);
        // 组件卸载清除定时器
        return () => clearInterval(timer);
    }, []);

    return (
        <div className='box'>
            {/* 背景视频 */}
            <video autoPlay loop muted>
                <source src={videoRef} type="video/mp4"></source>
            </video>
            <div className="cen_box">
                <div className="head">
                    <div className="head1_1">阿拉善盟AI行政数据分析与决策参考系统</div>
                    <img src={headImg} alt="" />
                    <div className="head2">
                        <div>{moment().format('HH:mm:ss')}</div>
                        <div>{moment().format('YYYY年MM月DD日')} </div>
                        <div>{weeks[moment().day()]}</div>
                    </div>
                </div>
                <div className="content">
                    <Carousel draggable>
                        <div className="lunType">
                            <div className="lunType1_1">
                                {list.map((item, index) => (
                                    <div key={index} className="lunType2" onClick={() => bindUrl(item)}>
                                        <div>{item.name}</div>
                                        <img src={item.icon} alt="" />
                                    </div>
                                ))}
                            </div>
                        </div>
                    </Carousel>
                </div>
            </div>
        </div>
    )

}