amap

src/pages/building/list/add/amap.less

@@ -219,20 +219,23 @@ h4 {
   border-top-color: grey;
 }
 
-.info {
+.infoBox {
   padding: .75rem 1.25rem;
-  margin-bottom: 1rem;
-  border-radius: .25rem;
-  position: fixed;
+  position: absolute;
   top: 1rem;
   background-color: white;
   width: auto;
   min-width: 22rem;
-  border-width: 0;
-  right: 1rem;
+  left: 1rem;
   box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
-  position: absolute;
   z-index: 100;
+  .inputText{
+    margin-right: 10px;
+  }
+  .input{
+    width: 200px;
+  }
+ 
 }
 
 .code {

src/pages/building/list/add/components/amap.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Map, Marker } from 'react-amap';
-import '../amap.less'
+import styles from '../amap.less'
 
 class Amap extends React.Component {
   constructor(props) {
@@ -54,7 +54,7 @@ class Amap extends React.Component {
                 // document.getElementById('info').innerHTML = '您当前所在城市：'+cityinfo;
                 // 地图显示当前城市
                 mapInstance.setBounds(citybounds);
-            }
+              }
             }
           })
         })
@@ -86,20 +86,16 @@ class Amap extends React.Component {
 
     return (
       <>
-        <div style={{ width: '100%', height: '400px' }}>
+        <div style={{ width: '100%', height: '400px', position: 'relative' }}>
           <Map events={this.amapEvents} amapkey="f0d1d4f82432504003ebf46e5e36ff03">
             <Marker position={this.markerPosition} events={this.markerEvents} />
           </Map>
           {
-              <div className="info">
-                <div className="input-item">
-                  <div className="input-item-prepend">
-                    <span className="input-item-text" style={{ width: '8rem' }}>请输入关键字</span>
-                  </div>
-                  <input id="amapInput" type="text" />
-                </div>
-            </div>
-            }
+          <div className={styles.infoBox}>
+            <span className={styles.inputText}>请输入关键字</span>
+            <input id="amapInput" className={styles.input} type="text" />
+          </div>
+          }
         </div>
       </>
     )