contact.jsx 2.58 KB
Newer Older
wuhao's avatar
wuhao committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97
import React, { useState, useEffect, Fragment } from 'react';
import { Map, Marker, InfoWindow } from 'react-amap';

import styles from './index.less';
import { Row, Col, Image, Pagination, Card, Tag, Grid } from 'antd';
import { useRequest } from 'ahooks';
import { doFetch } from '@/utils/doFetch';
import { EyeFilled } from '@ant-design/icons';
import { history } from 'umi';
const { useBreakpoint } = Grid;

const col = { xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 6 };
const { Meta } = Card;

const MyGps = () => {
  const [dragEnable, setDragEnable] = useState(true);
  const [display, setDisplay] = useState(true);
  const [zoom, setZoom] = useState(16);
  const [viewMode, setViewMode] = useState('2D');

  return (
    <div style={{ height: '500px', padding: 18, backgroundColor: '#f9f9f9' }}>
      <Fragment>
        <div style={{ width: '100%', height: 500 }}>
          {display && (
            <Map
              dragEnable={dragEnable}
              zoom={zoom}
              viewMode={viewMode}
              pitch={viewMode === '2D' ? 0 : 70}
              center={[118.820014, 31.87894]}
            >
              <InfoWindow
                position={[118.820014, 31.87895]}
                offset={[0, -34]}
                visible={true}
                isCustom
              >
                <img
                  src={require('@/assets/logo.png')}
                  style={{ height: 37 }}
                  alt=""
                />
              </InfoWindow>
              <Marker
                position={[118.820014, 31.87894]}
                title="南京智能制造装备产业促进会"
              ></Marker>
            </Map>
          )}
        </div>
      </Fragment>
    </div>
  );
};

const arr = [
  {
    title: '公司地址',
    desc: '南京市江宁区东南大学路33号',
  },
  {
    title: '联系电话',
    desc: '025-86111901',
  },
  {
    title: '电子邮箱',
    desc: 'center@jsnangao.com',
  },
];

function Contact({ location: { query } }) {
  return (
    <div className="container">
      <div className="section">
        <h2 className="title">联系我们</h2>
        <div
          className="center"
          style={{ justifyContent: 'space-around', margin: '2rem 0' }}
        >
          {arr.map((it, i) => {
            return (
              <div className="itemlo">
                <img src={require(`@/assets/lo${i + 1}.png`)} alt="" />
                <p>{it?.title}</p>
                <p>{it?.desc}</p>
              </div>
            );
          })}
        </div>
        <MyGps></MyGps>
      </div>
    </div>
  );
}

export default Contact;