上传文件至 'src/component'

src/component/Map.js

@@ -0,0 +1,34 @@
+/* eslint-disable no-undef */
+import React from 'react';
+import { Map, APILoader, ToolBarControl, Marker, InfoWindow } from '@uiw/react-amap';
+
+const MyMaps = () => {
+    const info = [];
+    info.push("<div class='input-card content-window-card'><div><img style=\"float:left;width:67px;height:16px;\" src=\" https://webapi.amap.com/images/autonavi.png \"/></div> ");
+    info.push("<div style=\"padding:7px 0px 0px 0px;\"><h4>高德软件</h4>");
+    info.push("<p class='input-item'>电话 : 028-84107000   邮编 : 610000</p>");
+    info.push("<p class='input-item'>地址 :四川省成都市高新区剑南大道中段时代晶座1537号3栋11层3号</p></div></div>");
+    return (
+        <div style={{ width: '100%', height: '300px', margin: '30px 0' }}>
+            <Map
+                center={[104.046771, 30.542866]}
+                zoom={15}
+            >
+                <Marker title="公司地址" position={new AMap.LngLat(104.046771, 30.542866)} />
+                <ToolBarControl offset={[10, 10]} position="RT" />
+                <InfoWindow visiable={true}
+                    content={info.join('')}
+                    position={[104.046771, 30.542866]}
+                />
+            </Map>
+        </div>
+    )
+};
+
+const Mount = () => (
+    <APILoader akey="a7233fb1f89aba915a57e1c45bee5577">
+        <MyMaps />
+    </APILoader>
+);
+
+export default Mount;

src/component/Menu.js

@@ -0,0 +1,108 @@
+import React, { useState, useEffect } from "react";
+import { Row, Col, Button, Menu } from "antd";
+import { useLocation, useNavigate } from "react-router-dom";
+import './style/menu.less';
+
+export const items = [
+  {
+    label: '首页',
+    key: '/home',
+  },
+  {
+    label: '产品',
+    key: '/product',
+  },
+  {
+    label: '解决方案',
+    key: '/solution',
+  },
+  {
+    label: '客户案例',
+    key: '/case',
+  },
+  {
+    label: '新闻资讯',
+    key: '/news',
+  },
+  {
+    label: '关于我们',
+    key: '/about',
+    children: [
+      {
+        label: '关于我们',
+        key: '/about_us',
+      },
+      {
+        label: '联系我们',
+        key: '/contact_us',
+      }
+    ]
+  }
+]
+export const sj_button = (props) => {
+  return <Col span={4} style={{
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: 'rgba(88,180,112,1)',
+    fontSize: '28px',
+    fontWeight: 'bolder',
+    fontFamily: 'PMZDBiaoTi-regular',
+    ...props,
+  }}>赛久智能</Col>
+}
+export const ToForm = (props) => {
+  const navigator = useNavigate();
+  return <Button className={props.className} type="primary"  onClick={() => navigator('/contact_us_form')}>免费试用</Button>
+}
+
+const MenuHeader = () => {
+  const location = useLocation();
+  const navigator = useNavigate();
+  const [current, setCurrent] = useState('/');
+  const [show, setShow] = useState(true);
+  useEffect(() => {
+    setCurrent(location.pathname)
+    if (location.pathname === '/contact_us_form')
+      setShow(false);
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }, [location, location.pathname]);
+  const ToHeader = (e) => {
+    navigator(e.key);
+  }
+  return (
+    <>
+      <Row justify="space-around" style={{
+        position: 'fixed',
+        top: 0,
+        width: 'calc(100% - 17px)',
+        zIndex: 999,
+        height: '55px',
+        backgroundColor: 'rgba(138, 134, 132,.3)'
+      }}>
+        {sj_button()}
+        <Col span={12}>
+          <Menu onClick={ToHeader} selectedKeys={[current]} mode="horizontal" items={items}
+            style={{
+              fontSize: "16px",
+              color: '#fff',
+              background: 'transparent',
+              alignItems:'center',
+              height: '55px',
+              borderBottom: 'none'
+            }}
+          />
+        </Col>
+        <Col span={4} style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}>
+          {show && <ToForm />}
+        </Col>
+      </Row>
+    </>
+  );
+};
+
+export default MenuHeader;

src/component/PageFooter.js

@@ -0,0 +1,56 @@
+import React from "react";
+import { Space, Row, Col, Image } from "antd";
+import { useNavigate } from "react-router-dom";
+import { sj_button } from "./Menu";
+import Path from "./path/path";
+import QRcode from '../static/web/home/code.png';
+import "./path/path.css";
+import './style/pagefooter.less';
+
+const PageFooter = () => {
+  const navigator = useNavigate();
+  const Goto = (url) => {
+    navigator(url);
+  }
+  return (
+    <>
+      <div className="page_footer">
+        <Row>
+          {sj_button({ alignItems: 'start' })}
+          <Col span={2}>
+            <Space direction="vertical">
+              <h3 onClick={() => Goto('/product')}>产品</h3>
+              <p onClick={() => Goto('/oa')}>OA</p>
+              <p onClick={() => Goto('/finance')}>财务</p>
+            </Space>
+          </Col>
+          <Col span={2}>
+            <Space direction="vertical">
+              <h3 onClick={() => Goto('/solution')}>解决方案</h3>
+            </Space>
+          </Col>
+          <Col span={2}>
+            <Space direction="vertical">
+              <h3 onClick={() => Goto('/about')}>关于我们</h3>
+              <p onClick={() => Goto('/contact_us')}>联系我们</p>
+            </Space>
+          </Col>
+          <Col span={5} offset={9}>
+            <Space
+              direction="vertical"
+              align="center"
+            >
+              <Image src={QRcode} preview={false} width={100} height={100} />
+              <span style={{ color: '#fff' }}>关注微信公众号第一时间掌握企业动态</span>
+            </Space>
+          </Col>
+        </Row>
+        <Row justify='center' style={{ marginTop: 20 }}>
+          <Path />
+        </Row>
+      </div>
+    </>
+  );
+};
+
+export default PageFooter;

src/component/Product.js

@@ -0,0 +1,221 @@
+import React from "react";
+import Layout from "../Layout";
+import { Image, Row, Col, Divider, Button, Space } from "antd";
+import ProductHomeImg from '../static/web/org/bsns/18.jpg';
+import ProductFooterImg from '../static/web/org/bsns/3.jpg';
+import {
+    CheckCircleTwoTone,
+    BarsOutlined,
+    AppstoreOutlined,
+    ShoppingOutlined,
+    MenuOutlined,
+} from '@ant-design/icons';
+import ComputerImg from '../static/web/home/computer.png';
+import { ToForm } from "./Menu";
+import styled from 'styled-components';
+import './style/product.less';
+
+// 自定义样式组件
+const MyDivider = styled.div`
+  position: relative;
+`;
+
+const LeftLine = styled.div`
+  position: absolute;
+  height: 1px;
+  width: calc(60%); 
+  background-color: #fff; 
+  top: 50%;
+  right: 100%;
+  margin-right:8px;
+  transform-origin: right center;
+  transform: rotate(-20deg); 
+`;
+const RightLine = styled.div`
+position: absolute;
+height: 1px;
+width: calc(60%); 
+background-color: #fff; 
+top: 50%;
+right: 100%;
+margin-right:8px;
+transform-origin: right center;
+transform: rotate(20deg); 
+`;
+
+export const BtnTips = (title) => <div className="software_container">
+    <div className="software_bcg">
+        <div className="title">
+            {title}
+        </div>
+        <div className="btn">
+            <Row justify='space-between' style={{ alignItems: 'center', height: '100%' }}>
+                <Col span={4}>
+                    <Button type="primary" size="largre" className="divider_left">
+                        主功能1
+                    </Button>
+                </Col>
+                <Col span={4}>
+                    <Space direction="vertical" size='large'>
+                        <MyDivider>
+                            <LeftLine />
+                            <Button type="primary" size="largre">
+                                主功能1
+                            </Button>
+                        </MyDivider>
+                        <MyDivider>
+                            <RightLine />
+                            <Button type="primary" size="largre">主功能1</Button>
+                        </MyDivider>
+                    </Space>
+                </Col>
+                <Col span={4}>
+                    <Space direction="vertical" size='large'>
+                        <Button type="primary" size="largre">主功能1</Button>
+                        <Button type="primary" size="largre">主功能1</Button>
+                        <Button type="primary" size="largre">主功能1</Button>
+                        <Button type="primary" size="largre">主功能1</Button>
+                    </Space>
+                </Col>
+                <Col span={4}>
+                    <Space direction="vertical" size='large'>
+                        <Button type="primary" size="largre">主功能1</Button>
+                        <Button type="primary" size="largre">主功能1</Button>
+                        <Button type="primary" size="largre">主功能1</Button>
+                        <Button type="primary" size="largre">主功能1</Button>
+                        <Button type="primary" size="largre">主功能1</Button>
+                    </Space>
+                </Col>
+            </Row>
+        </div>
+    </div>
+</div>
+export const ColLeft = () => <Col span={11}>
+    <Image src={ComputerImg} preview={false} />
+</Col>;
+export const ColRight = () => <Col span={11} offset={2}>
+    <Space direction="vertical" className='core_right'>
+        <div className="title">功能名称</div>
+        <Divider />
+        <p>占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位</p>
+        <p>占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位</p>
+        <p>占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位</p>
+        <ToForm />
+    </Space>
+</Col>;
+export const SafeFooter = () => <div className="prduct_container">
+    <div className="prduct_background" />
+    <Image
+        src={ProductFooterImg}
+        preview={false}
+        width='100%'
+        height='470px'
+    />
+    <div className="image_text">
+        <Row justify='space-around'>
+            <Col className="left_text">
+                <Space direction="vertical">
+                    <p>安全可靠权威</p>
+                    <p>多重保障体系，全面守护您的信息安全</p>
+                    <span>ISO27001权威认证</span>
+                    <span>银行级别AES256加密技术保存</span>
+                    <span>信息安全管理体系认证</span>
+                    <span>信息系统安全公安局三级备案</span>
+                    <span>24小时实时监控预警</span>
+                </Space>
+            </Col>
+            <Col className='right_text'>
+                <span>安全可靠权威</span>
+                <span>客户成功助力</span>
+                <span>20年行业背书</span>
+            </Col>
+        </Row>
+    </div>
+</div>
+const LightList = [
+    <BarsOutlined className="advantage_detail_1" />,
+    <AppstoreOutlined className="advantage_detail_1" />,
+    <ShoppingOutlined className="advantage_detail_1" />,
+    <MenuOutlined className="advantage_detail_1" rotate={90} />,
+]
+
+const ProductHome = () => {
+    return (<>
+        <Layout>
+            <div className="main">
+                <div className="prduct_container">
+                    <div className="prduct_background" />
+                    <Image
+                        src={ProductHomeImg}
+                        preview={false}
+                        width='100%'
+                        height='470px'
+                    />
+                    <div className="image_text">
+                        <div className="text_value">
+                            <div>
+                                <p>功能全面覆盖HR全业务流程</p>
+                                <p>基于全新互联网技术打造一站式人力资源管理软件,以大数据、云计算等技术为核心能力,通过sass软件进行前端标准化或定制化展现,后端开放、数据融合,协助企业打造一体化、敏捷化、轻量化的人力资源管理系统,助力企业人力资源管理标准化、智能化、数据化!</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div className="lightspot_container">
+                    <div className="light_title">产品亮点</div>
+                    <Row style={{ marginBottom: 80 }} justify='space-around'>
+                        {new Array(4).fill(null).map((_, i) =>
+                            <Col span={4} className='advantage_detail' key={i}>
+                                {LightList[i]}
+                                <Divider style={{
+                                    borderColor: '#03BB7A',
+                                    minWidth: "80%",
+                                    width: '80%',
+                                }} />
+                                <div className="advantage_detail_3">
+                                    <p>
+                                        <CheckCircleTwoTone twoToneColor='#58BE70' />
+                                        <span>占位占位占位占位占位占位</span>
+                                    </p>
+                                    <p>
+                                        <CheckCircleTwoTone twoToneColor='#58BE70' />
+                                        <span>占位占位占位占位占位占位</span>
+                                    </p>
+                                    <p>
+                                        <CheckCircleTwoTone twoToneColor='#58BE70' />
+                                        <span>占位占位占位占位占位占位</span>
+                                    </p>
+                                </div>
+                            </Col>
+                        )}
+                    </Row>
+                </div>
+                {BtnTips('全新智能化管理软件')}
+                <div className="core_function">
+                    <div className="core_title">六大核心功能打造一体化管理软件</div>
+                    {new Array(6).fill(null).map((_, i) => {
+                        if (i % 2 === 0) {
+                            return <div key={i} style={{ backgroundColor: '#fff' }}>
+                                <div className="core_container">
+                                    <Row>
+                                        <ColLeft />
+                                        <ColRight />
+                                    </Row>
+                                </div>
+                            </div>
+                        } else {
+                            return <div className="core_container" key={i}>
+                                <Row>
+                                    <ColRight />
+                                    <ColLeft />
+                                </Row>
+                            </div>
+                        }
+                    })}
+                </div>
+                <SafeFooter />
+            </div>
+        </Layout>
+    </>)
+};
+
+export default ProductHome;

src/component/ScrollTop.js

@@ -0,0 +1,56 @@
+import React, { useState, useEffect } from "react";
+import { VerticalAlignTopOutlined } from '@ant-design/icons';
+
+const ScrollToTop = () => {
+    const [show, setShow] = useState(false);
+    // 返回顶部
+    const backTop = () => {
+        const s = document.body.scrollTop;
+        if (s > 0) {
+            // 要求浏览器在下次重绘之前调用 backTop 回调函数更新动画
+            window.requestAnimationFrame(backTop)
+            document.body.scrollTop = document.documentElement.scrollTop = s - s / 8;
+        }
+    }
+    // 是否显示返回顶部
+    useEffect(() => {
+        const handleScroll = (e) => {
+            if (e.target.scrollTop > 400) {
+                setShow(true)
+            } else {
+                setShow(false)
+            }
+        }
+        document.addEventListener('scroll', handleScroll, true)
+        return () => document.removeEventListener('scroll', handleScroll)
+    }, [show])
+    return (<>
+        {show && (
+            <div
+                style={{
+                    position: 'fixed',
+                    width: 40,
+                    height: 40,
+                    right: 100,
+                    bottom: 50,
+                    zIndex: 9999,
+                    backgroundColor: '#58BE70',
+                    borderRadius: '50%',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    cursor: 'pointer',
+                }}
+                onClick={backTop}
+            >
+                <VerticalAlignTopOutlined
+                    style={{
+                        fontSize: '24px',
+                        color: '#fff',
+                    }}
+                />
+            </div>
+        )}
+    </>)
+}
+export default ScrollToTop;