footer.jsx

import React, { useState } from 'react';
import { Col, Row } from 'antd';
import { history } from 'umi';

const ContentList = ({ title, listData }) => {
  return (
    <div className="footer-content">
      <h2>{title}</h2>
      <div>
        {listData.map((item, index) => (
          <li
            onClick={() => {
              history.replace({
                pathname: item.link,
                query: item?.query ?? {},
              });
            }}
          >
            <a>{item.text}</a>
          </li>
        ))}
      </div>
    </div>
  );
};

export default () => {
  const list1 = [
    {
      link: '/about/insert',
      text: '走进南高',
    },
    {
      link: '/about/honer',
      text: '南高荣誉',
    },
    {
      link: '/about/news',
      text: '南高资讯',
    },
    {
      link: '/about/join',
      text: '加入南高',
    },
  ];

  const list2 = [
    {
      link: '/factory/typea/mes',
      text: 'MES智能制造管理系统',
    },
    {
      link: '/factory/typea/wms',
      text: 'WMS智能仓储管理系统',
    },
    {
      link: '/factory/typea/ems',
      text: 'EMS设备运维管理系统',
    },
    {
      link: '/factory/typea/iot',
      text: 'IoT数据采集系统',
    },
    {
      link: '/factory/typea/plm',
      text: 'PLM产品生命周期管理系统',
    },
    {
      link: '/factory/typea/pdm',
      text: 'PDM产品数据管理系统',
    },
    {
      link: '/factory/typeb/datagate',
      text: '智能网关',
    },
  ];

  const list3 = [
    {
      link: '/download',
      query: {
        key: '1',
      },
      text: '硬件产品资料',
    },
    {
      link: '/download',
      query: {
        key: '2',
      },
      text: '软件产品资料',
    },
    {
      link: '/download',
      query: {
        key: '3',
      },
      text: '宣传画册及其他',
    },
  ];
  return (
    <div id="webFooter">
      <div>
        <Row style={{ display: 'flex', justifyContent: 'space-around' }}>
          <Col xs={24} sm={8} xl={8} xxl={6}>
            <ContentList key="12" title="关于南高" listData={list1} />
          </Col>
          <Col xs={24} sm={8} xl={8} xxl={6}>
            <ContentList key="13" title="智能工厂解决方案" listData={list2} />
          </Col>
          <Col xs={24} sm={8} xl={8} xxl={6}>
            <ContentList key="14" title="下载中心" listData={list3} />
          </Col>
          <Col xs={24} sm={24} xl={24} xxl={6}>
            <div className="footer-content">
              <button
                onClick={() => {
                  history.push('/about/contact');
                }}
              >
                联系我们
              </button>
              <div className="contact">
                <li>电话&nbsp;&nbsp;&nbsp;&nbsp;025-86111901</li>
                <li>邮箱&nbsp;&nbsp;&nbsp;&nbsp;center@jsnangao.com</li>
                <li>地址&nbsp;&nbsp;&nbsp;&nbsp;南京市江宁区东南大学路33号</li>
                <div>
                  <div className="nangao">
                    <img
                      src={
                        'https://ng-website.oss-cn-hangzhou.aliyuncs.com/assets/code1.jpg'
                      }
                    />
                    <span>南高公众号</span>
                  </div>
                  <div className="nangao">
                    <img
                      src={
                        'https://ng-website.oss-cn-hangzhou.aliyuncs.com/assets/code2.jpg'
                      }
                    />
                    <span>联盟公众号</span>
                  </div>
                  <div className="nangao">
                    <img
                      src={
                        'https://ng-website.oss-cn-hangzhou.aliyuncs.com/assets/code3.jpg'
                      }
                    />
                    <span>促进会公众号</span>
                  </div>
                </div>
              </div>
            </div>
          </Col>
        </Row>
      </div>
      <div className="footer-copyright">
        Copyright © {new Date().getFullYear()} &nbsp;
        江苏南高智能装备创新中心有限公司&nbsp;&nbsp;&nbsp;版权所有&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="https://beian.miit.gov.cn" target="_blank">
          备案号:苏ICP备18015471号-1
        </a>
      </div>
    </div>
  );
};