👈 编写高德地图组件

kicc-ui/src/components/AMap/src/Amap.vue

@@ -5,19 +5,15 @@
                fixedHeight
                dense
   >
-    <div id="mapview"
-         ref="mapview"
-         style="margin-right: 342px;"
-         class="w-3/4 xl:w-5/5"
-    >
+    <div id="mapview" ref="mapview">
       <div id="mapPanel" ref="mapPanel"/>
     </div>
-    <div id="operatePanel" ref="operatePanel" class="w-1/4 xl:w-1/5">
-      操作面板
-      <div class="operatePanel-arrow" :class="mapState.toggleOperatePanelClass" @click="toggleOperatePanel()">
+    <div class="operatePanel">
+      <div class="operatePanel-arrow" @click="toggleOperatePanel()">
         <span title="展开">‹</span>
         <p title="隐藏">›</p>
       </div>
+
     </div>
   </PageWrapper>
 </template>
@@ -40,9 +36,11 @@
   const mapState = reactive({
     loading: true,
     toggleOperatePanelClass: {
-      'go-back': false
+      span: 'none',
+      p: 'block',
+      siderWidth: 371
     },
-    toggleStatus: false
+    toggleStatus: true
   });
   /** 地图创建完成(动画关闭) */
   const complete = (): void => {
@@ -323,16 +321,26 @@
   function toggleOperatePanel() {
     mapState.toggleStatus = !mapState.toggleStatus;
     if (mapState.toggleStatus) {
-      mapState.toggleOperatePanelClass['go-back'] = true;
+      mapState.toggleOperatePanelClass.span='none';
+      mapState.toggleOperatePanelClass.p = 'block';
+      mapState.toggleOperatePanelClass.siderWidth = 371;
     } else {
-      mapState.toggleOperatePanelClass['go-back'] = false;
+      mapState.toggleOperatePanelClass.span='block';
+      mapState.toggleOperatePanelClass.p = 'none';
+      mapState.toggleOperatePanelClass.siderWidth = 0;
     }
   }
 
 </script>
 <style lang="less" scoped>
+
 #mapview {
-  height: calc(100vh - 86px);
+  margin-right: v-bind('mapState.toggleOperatePanelClass.siderWidth + "px"');
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
 
   #mapPanel {
     position: absolute;
@@ -352,24 +360,22 @@
   }
 }
 
-#operatePanel {
+.operatePanel {
+  width: v-bind('mapState.toggleOperatePanelClass.siderWidth + "px"');
   height: 100%;
   background: #fff;
+  position: absolute;
   top: 0;
   right: 0;
-  position: absolute;
   z-index: 2;
-  margin: 0;
-  visibility: hidden;
-  opacity: 1;
 
   .operatePanel-arrow {
     width: 15px;
     height: 94px;
+    margin: -48px 0 0 -15px;
     background: #15a3fa;
     position: absolute;
     top: 50%;
-    margin: -48px 0 0 -15px;
     cursor: pointer;
     line-height: 88px;
     font-size: 36px;
@@ -380,23 +386,15 @@
     color: #fff;
     visibility: visible;
     left: 0;
-    display: none;
     box-shadow: 0 2px 10px rgba(0,0,0,.2);
     display: block;
     span {
-      display: block;
+      display: v-bind('mapState.toggleOperatePanelClass.span');
     }
     p {
-      display: none;
-      margin: 0;
+      display: v-bind('mapState.toggleOperatePanelClass.p');
     }
   }
-
-  .go-back {
-    span { display: none; }
-    p { display: block; }
-  }
-
 }
 
 :deep(.amap-marker-label) {