update BdMap.vue, 将地图放到 card 中

src/views/home/BdMap.vue

@@ -1,39 +1,45 @@
 <template>
-  <div>
-    <label>
-      <el-select v-model="form" placeholder="选择标签" @change="onChange">
-        <el-option label="全部" value="0" />
-        <el-option label="分类1" value="1" />
-        <el-option label="分类2" value="2" />
-        <el-option label="分类3" value="3" />
-      </el-select>
-    </label>
-    <!-- zoom=7 的比例尺为 100km   -->
-    <baidu-map
-      :center="mapCenter"
-      :scroll-wheel-zoom="true"
-      :zoom="7"
-      class="bm-view"
-      @click="getClickInfo"
-      @ready="onBaiduMapReady"
-    >
-      <!--比例尺控件左上角-->
-      <bm-scale anchor="BMAP_ANCHOR_TOP_LEFT" />
-      <!--缩放控件右下角-->
-      <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" />
-      <bm-marker
-        v-for="(item,index) in markers"
-        :key="index"
-        :position="item.position"
-        @click="getMarkerInfoWrapper(item)"
-      >
-        <bm-label
-          :content="item.title"
-          :label-style="{color: 'blue', fontSize : '12px'}"
-          :offset="{width: 0, height: 0}"
-        />
-      </bm-marker>
-    </baidu-map>
+  <el-row class="movie-list">
+    <el-col :md="24">
+      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <el-card class="box-card">
+          <div class="text item amap-wrapper">
+            <el-select v-model="form" placeholder="选择标签" @change="onChange">
+              <el-option label="全部" value="0" />
+              <el-option label="分类1" value="1" />
+              <el-option label="分类2" value="2" />
+              <el-option label="分类3" value="3" />
+            </el-select>
+            <!-- zoom=7 的比例尺为 100km   -->
+            <baidu-map
+              :center="mapCenter"
+              :scroll-wheel-zoom="true"
+              :zoom="7"
+              class="bm-view"
+              @click="getClickInfo"
+              @ready="onBaiduMapReady"
+            >
+              <!--比例尺控件左上角-->
+              <bm-scale anchor="BMAP_ANCHOR_TOP_LEFT" />
+              <!--缩放控件右下角-->
+              <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" />
+              <bm-marker
+                v-for="(item,index) in markers"
+                :key="index"
+                :position="item.position"
+                @click="getMarkerInfoWrapper(item)"
+              >
+                <bm-label
+                  :content="item.title"
+                  :label-style="{color: 'blue', fontSize : '12px'}"
+                  :offset="{width: 0, height: 0}"
+                />
+              </bm-marker>
+            </baidu-map>
+          </div>
+        </el-card>
+      </el-row>
+    </el-col>
 
     <!-- marker 内容弹窗   -->
     <el-dialog
@@ -67,13 +73,13 @@
             评论 <span style="color: blue" v-text="markerInfo.replyContent"/>
           </label>
           <br>
-<!--          <label v-if="markerInfo.appendContent !== undefined || markerInfo.appendContent !== null">
-            追加 <span style="color: blue" v-text="markerInfo.appendContent"/>
-          </label>-->
+          <!--          <label v-if="markerInfo.appendContent !== undefined || markerInfo.appendContent !== null">
+                      追加 <span style="color: blue" v-text="markerInfo.appendContent"/>
+                    </label>-->
         </div>
       </el-card>
     </el-dialog>
-  </div>
+  </el-row>
 </template>
 
 <script>
@@ -247,4 +253,10 @@ export default {
   width: 100%;
   height: 600px;
 }
+
+.movie-list {
+  padding-top: 15px;
+  padding-left: 1%;
+  padding-right: 1%;
+}
 </style>