import React from "react";
import Layout from "../Layout";
import { HeaderImg } from "./Solution";
import { FootImg } from "../App";
import { useLocation } from "react-router-dom";
import { Typography, Image, Divider } from "antd";
import Case1 from '../static/web/home/case1.png';
import Case2 from '../static/web/home/case2.jpg';
import { TipsArticle } from "./news/news_detail";

const { Title, Paragraph, } = Typography;

const CaseDetail = () => {
    const location = useLocation();
    return (<>
        <Layout>
            <HeaderImg />
            <div style={{
                width: '90%',
                margin: '20px auto',
            }}>
                <Title level={3} style={{ color: '#58BE70' }}>成都{location.state}xxxxx</Title>
                <Paragraph>时间：2023-06-07 来源：xxx</Paragraph>
                <Divider style={{ minWidth: '20%', width: '20%', borderTop: '1px solid rgba(88,190,112,.6)' }} />
                <Title level={5}>客户背景</Title>
                <Paragraph style={{ lineHeight: 2 }}>占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位</Paragraph>
                <Image src={Case1} width={350} height={192} style={{ padding: '30px 0' }} />
                <Title level={5}>客户痛点</Title>
                <Paragraph>1、占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位</Paragraph>
                <Paragraph>2、占位占位占位占位占位占位占位占位占位</Paragraph>
                <Paragraph>3、占位占位占位占位占位占位</Paragraph>
                <Paragraph>4、占位占位占位占位占位占位占位占位占位占位占位占位</Paragraph>
                <Title level={5} style={{ marginTop: 30 }}>解决方案</Title>
                <Paragraph>⚫占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位</Paragraph>
                <Paragraph>⚫占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占</Paragraph>
                <Paragraph>⚫占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占占位占位</Paragraph>
                <Image src={Case2} width={500} height={340} style={{ padding: '30px 0' }} />
                <TipsArticle />
            </div>
            <FootImg />
        </Layout>
    </>)
};
export default CaseDetail;