Kaynağa Gözat

上传文件至 'src/component'

deng 1 yıl önce
ebeveyn
işleme
9c9bcbc364

+ 62 - 0
src/component/Case.js

@@ -0,0 +1,62 @@
+import React, { useState } from "react";
+import Layout from "../Layout";
+import { HeaderImg } from "./Solution";
+import { Tabs, Pagination, Row } from 'antd';
+import { ImgMap } from "../App";
+import { useNavigate } from "react-router-dom";
+import './style/case.less';
+
+const TabsItems = [
+    '经营业',
+    '制造业',
+    '连锁业',
+    '互联网',
+    '门店',
+    '机械重工',
+    '光谷电力',
+]
+
+const Case = () => {
+    const [current, setCurrent] = useState(1);
+    const navigator = useNavigate();
+    const ToDetail = (value) => {
+        navigator('/case/detail', { state: value });
+    }
+    const onChange = (page) => {
+        setCurrent(page);
+    }
+    return (<>
+        <Layout>
+            {<HeaderImg />}
+            <div className="client_case">
+                <div className="title">客户案例</div>
+                <Tabs
+                    defaultActiveKey="1"
+                    centereds='true'
+                    popupClassName='more_list'
+                    items={TabsItems.map((item, i) => {
+                        return {
+                            label: item,
+                            key: i,
+                            children: <>
+                                <ImgMap onClick={() => ToDetail(Math.floor(Math.random() * 20) + 1)} />
+                                <ImgMap onClick={() => ToDetail(Math.floor(Math.random() * 20) + 1)} />
+                                <ImgMap onClick={() => ToDetail(Math.floor(Math.random() * 20) + 1)} />
+                            </>,
+                        };
+                    })}
+                />
+            </div>
+            <div className="pagination">
+                <Row justify='center'>
+                    <Pagination
+                        current={current}
+                        onChange={onChange}
+                        total={50} />
+                </Row>
+            </div>
+        </Layout>
+    </>)
+};
+
+export default Case;

+ 44 - 0
src/component/CaseDetail.js

@@ -0,0 +1,44 @@
+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;

+ 83 - 0
src/component/Form.js

@@ -0,0 +1,83 @@
+import React from "react";
+import MenuHeader from "./Menu";
+import { Row, Col, Image, Form, Input, Button, InputNumber } from "antd";
+import ComputerImg from '../static/web/home/computer.png';
+import './style/form.less';
+
+const ContactUsForm = () => {
+    const onFinish = (values) => {
+        console.log('Success:', values);
+    };
+    return (<>
+        <MenuHeader />
+        <div className="form_container">
+            <Row className="form_row">
+                <Col className="image" span={10} offset={2}>
+                    <Image src={ComputerImg} preview={false} width={500} />
+                </Col>
+                <Col className="value" span={8} offset={2}>
+                    <Form
+                        autoComplete="off"
+                        onFinish={onFinish}
+                        scrollToFirstError={true}
+                        style={{ height: "100%" }}
+                    >
+                        <Form.Item>
+                            <h2>联系我们</h2>
+                        </Form.Item>
+                        <Form.Item
+                            name="company_name"
+                            rules={[
+                                {
+                                    required: true,
+                                    message: '请输入公司名称',
+                                },
+                            ]}
+                        >
+                            <Input placeholder="请输入公司名称" />
+                        </Form.Item>
+                        <Form.Item
+                            name="name"
+                            rules={[
+                                {
+                                    required: true,
+                                    message: '请输入姓名',
+                                },
+                            ]}
+                        >
+                            <Input placeholder="请输入姓名" />
+                        </Form.Item>
+                        <Form.Item
+                            name="phone"
+                            validateTrigger='onChange'
+                            rules={[
+                                {
+                                    required: true,
+                                    message: '请输入正确的手机号码',
+                                    pattern: /^1[3-9]\d{9}$/,
+                                    type: 'number',
+                                    validateTrigger: 'onBlur',
+                                },
+                            ]}
+                        >
+                            <InputNumber placeholder="请输入手机号码"
+                                style={{ width: "100%", boxShadow: 'none' }} controls={false} />
+                        </Form.Item>
+                        <Form.Item
+                            name="e-mail"
+                        >
+                            <Input placeholder="请输入邮箱" />
+                        </Form.Item>
+                        <Form.Item>
+                            <Button type="primary" htmlType="submit" style={{ width: "100%" }}>
+                                立即提交
+                            </Button>
+                        </Form.Item>
+                    </Form>
+                </Col>
+            </Row>
+        </div>
+    </>)
+};
+
+export default ContactUsForm;

+ 90 - 0
src/component/aboutus.js

@@ -0,0 +1,90 @@
+import React from "react";
+import Layout from "../Layout";
+import { Row, Col, Image, Typography } from "antd";
+import { HeaderImg } from "./Solution";
+import { AdvantageTitle } from "../App";
+import { SafeFooter } from "./Product";
+import UsImg from '../static/web/org/arch/16.jpg';
+import RowImg from '../static/web/org/arch/13.jpg';
+import PeopleImg1 from '../static/web/org/hot/16.jpg';
+import PeopleImg2 from '../static/web/org/ppl/18.jpg';
+import PeopleImg3 from '../static/web/org/ppl/13.jpg';
+import CertificateImg from '../static/web/org/arch/16.jpg';
+import TextMore from "../utils/TextMore";
+import './style/about_us.less';
+
+const { Title, Paragraph } = Typography;
+const content = `任务介绍占位任务介绍占位任务介绍占位任务介绍占位任务介绍占位任务介绍占位任务介绍占位任务介绍占位任务介绍占位任务介绍占位任务介绍占位任务介绍占位任务介绍占位任务介绍占位任务介绍占位任务介绍占位任务介绍占位任务介绍占位任务介绍占位任务介绍占位任务介绍占位任务介绍占位任务介绍占位任务介绍占位`;
+const Images = [
+    PeopleImg1,
+    PeopleImg2,
+    PeopleImg3,
+];
+const JobList = [
+    'CEO',
+    'COO',
+    'CMO',
+];
+
+const AboutUs = () => {
+
+    return (<>
+        <Layout>
+            <HeaderImg />
+            <div className="us_title">
+                <Row>
+                    <Col span={12}>
+                        <Image src={UsImg} height={330} width={'100%'} preview={false} />
+                    </Col>
+                    <Col span={11} offset={1}>
+                        <Title level={2} style={{ marginBottom: '48px' }}>关于我们</Title>
+                        <Paragraph ellipsis={{ rows: 4 }} style={{ fontSize: '16px' }}>
+                            {content}
+                        </Paragraph>
+                        <Paragraph ellipsis={{ rows: 4 }} style={{ fontSize: '18px' }}>
+                            {content}
+                        </Paragraph>
+                    </Col>
+                </Row>
+            </div>
+            <AdvantageTitle />
+            <Image preview={false} width='100%' height={320} src={RowImg} />
+            <>
+                <Row justify='center' className="team_title">
+                    <Title level={3}>专业管理团队为您保驾护航</Title>
+                </Row>
+                <Row justify='space-around'>
+                    {new Array(3).fill(null).map((_, i) => <Col span={6} className='people' key={i}>
+                        <Row>
+                            <Col span={12}>
+                                <Image preview={false} height={200} src={Images[i]} />
+                            </Col>
+                            <Col span={12} className='people_name'>
+                                <div>摸鱼大师</div>
+                                <div>{JobList[i]}</div>
+                            </Col>
+                        </Row>
+                        <Row className="prople_desc">
+                            <TextMore text={content} rows={5} />
+                        </Row>
+                    </Col>)}
+                </Row>
+            </>
+            <>
+                <Row justify='center' className="team_title">
+                    <Title level={3}>资质证书</Title>
+                </Row>
+                <Row justify='space-around' className="certificate">
+                    {new Array(4).fill(null).map((_, i) => <Col span={5} key={i}>
+                        <Image
+                            preview={false} src={CertificateImg} height={320}
+                        />
+                    </Col>)}
+                </Row>
+            </>
+            <SafeFooter />
+        </Layout>
+    </>)
+};
+
+export default AboutUs;

+ 39 - 0
src/component/contact.js

@@ -0,0 +1,39 @@
+import { Col, Row } from "antd";
+import React from "react";
+import Layout from "../Layout";
+import { HeaderImg } from "./Solution";
+import Mount from "./Map";
+import { AimOutlined, CustomerServiceOutlined, UnorderedListOutlined } from '@ant-design/icons';
+import './style/about.less';
+
+const ContactUs = () => {
+    return (<>
+        <Layout>
+            <HeaderImg />
+            <div className="about_container">
+                <h2>联系我们</h2>
+                <p>根据您的企业情况为您定制化经营管理解决方案</p>
+                <Row justify='space-around'>
+                    <Col>
+                        <AimOutlined />
+                        <p>地址:四川省成都市武侯区时代晶座3栋1103号</p>
+                    </Col>
+                    <Col>
+                        <CustomerServiceOutlined />
+                        <div className="contact_way">
+                            <p>联系方式:4007-000-000</p>
+                            <p>传真:0755-000-22222-22</p>
+                        </div>
+                    </Col>
+                    <Col>
+                        <UnorderedListOutlined />
+                        <p>在线咨询:有任何疑问或需求可立即在线咨询我们</p>
+                    </Col>
+                </Row>
+                <Mount />
+            </div>
+        </Layout>
+    </>)
+};
+
+export default ContactUs;