修改适配手机

src/components/Header.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="header">
-    <div class="h-left">
+    <div class="h-left" v-if="!isMobile">
       <div class="time">{{ time }}</div>
       <div class="tianqi">
         <div class="tianqiImg" :style="backgroundStyles"> </div>
@@ -17,7 +17,7 @@
 
     </div>
     <div class="h-center">{{ systemName }}</div>
-    <div class="h-right">
+    <div class="h-right" v-if="!isMobile">
       <el-button id="btnMDistance" @click="startMeasureDistance">测距</el-button>
       <el-button id="btnClearAllDistance" @click="stopMeasureDistance">清空测距</el-button>
     </div>
@@ -25,6 +25,7 @@
 </template>
 
 <script>
+import UTIL from '@/utils/util'
 export default {
   data() {
     return {
@@ -33,6 +34,7 @@ export default {
       dming: "",
       temperature: 0,
       time: "",
+      isMobile:false,
       backgroundStyles: {
         backgroundImage: '', // 背景图片
         backgroundPosition: 'center center', // 背景位置
@@ -43,6 +45,7 @@ export default {
   },
   mounted() {
     let that = this;
+    that.isMobile = UTIL.terminalType()
     that.getDayOfWeek();
     setInterval(() => {
       that.getDayOfWeek();

src/utils/util.js

@@ -0,0 +1,10 @@
+
+// 判断是否是移动端
+function terminalType () {
+  const isMobile = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
+  return !!isMobile
+}
+
+export default {
+  terminalType
+}

src/views/HomeView.vue

@@ -2,25 +2,31 @@
   <div class="home">
     <Header></Header>
     <Map />
-    <div :class="{ 'yjdp-btn': true, isActive: yjdpShow }" @click="addyjdp">沿街店铺</div>
-    <div :class="{ 'kzdp-btn': true, isActive: kzdpShow }" @click="addkzdp">空置店铺</div>
-    <div class="yhfk-btn" @click="openYHFK">用户反馈</div>
+
+    <div :class="{ 'yjdp-btn': true, isActive: yjdpShow }" @click="addyjdp" v-if="!isMobile">沿街店铺</div>
+    <div :class="{ 'kzdp-btn': true, isActive: kzdpShow }" @click="addkzdp" v-if="!isMobile">空置店铺</div>
+    <div class="yhfk-btn" @click="openYHFK" v-if="!isMobile">用户反馈</div>
+    <div :class="{ 'yjdp-btn-mb': true, isActive: yjdpShow }" @click="addyjdp" v-if="isMobile">沿街店铺</div>
+    <div :class="{ 'kzdp-btn-mb': true, isActive: kzdpShow }" @click="addkzdp" v-if="isMobile">空置店铺</div>
+    <div class="yhfk-btn-mb" @click="openYHFK" v-if="isMobile">用户反馈</div>
     <!-- 智小青 -->
-    <div class="zxq-btn" @click="openZXQ"></div>
+    <div class="zxq-btn" @click="openZXQ" v-if="!isMobile"></div>
+    <div class="zxq-btn-mb" @click="openZXQ" v-if="isMobile"></div>
 
 
-    <div class="zxqIframeContainer" v-if="isShowZXQ">
+    <div :class="isMobile == true ? zxqIframeContainer:'zxqIframeContainer'" v-if="isShowZXQ">
+      <!-- <div class="wind" @click="tiggerWind" v-if="isMobile">口</div> -->
       <div class="close" @click="closeZXQ">×</div>
-      <iframe :src="zxqUrl" frameborder="0"></iframe>
+      <iframe :src="zxqUrl" frameborder="0" ></iframe>
     </div>
 
     <!-- <div class="control3D">
       <div class="label">三维模型</div>
       <el-switch v-model="isShow3D" size="large" active-text @change="changeModel" />
     </div> -->
-    <div class="changeBaseMap">
+    <div class="changeBaseMap" v-if="!isMobile">
       <div class="container">
-        <div v-for="(item, index) in baseMapArr" :key="index" @click="changeMap(item)">
+        <div v-for="(item, index) in baseMapArr" :key="index" @click="changeMap(item)" >
           <div :class="{ 'content': true, 'active': item.isActive }">
             <div class="label">{{ item.label }}</div>
           </div>
@@ -28,8 +34,13 @@
       </div>
     </div>
 
+    <div class="changeBaseMap-mb" v-if="isMobile" @click="changeBaseMapType()">
+      <div>{{baseMap}}</div>
+    </div>
+
     <div class="heatmapContorl">
-      <div :class="{ 'ckzb-btn': true, isActive: heatmapPanelShow }" @click="handleOpenHeatmapPanelShow">热力图</div>
+      <div :class="{ 'ckzb-btn': true, isActive: heatmapPanelShow }" @click="handleOpenHeatmapPanelShow" v-if="!isMobile">热力图层</div>
+      <div :class="{ 'ckzb-btn-mb': true, isActive: heatmapPanelShow }" @click="handleOpenHeatmapPanelShow" v-if="isMobile">热力图层</div>
       <div class="heatmapPanel" v-show="heatmapPanelShow">
         <el-scrollbar>
           <ul>
@@ -42,14 +53,15 @@
       </div>
     </div>
 
-    <div class="heatmapLegend" v-show="heatmapPanelShow">
+    <div :class="isMobile == true ? 'heatmapLegend-mb':'heatmapLegend'" v-show="heatmapPanelShow">
     </div>
 
     <div :class="{ 'zxq-ckzb-btn': true, isActive: isActiveZXQ }" @click="isActiveZXQ">智小青</div>
 
     <div class="layerContorl">
-      <div :class="{ 'ckzb-btn': true, isActive: layerPanelShow }" @click="handleOpenLayerPanelShow">查看周边</div>
-      <div class="layerPanel" v-show="layerPanelShow">
+      <div :class="{ 'ckzb-btn': true, isActive: layerPanelShow }" @click="handleOpenLayerPanelShow" v-if="!isMobile">查看周边</div>
+      <div :class="{ 'ckzb-btn-mb': true, isActive: layerPanelShow }" @click="handleOpenLayerPanelShow" v-if="isMobile">查看周边</div>
+      <div :class="isMobile == true ? 'layerPanel-mb':'layerPanel'" v-show="layerPanelShow">
         <el-scrollbar>
           <ul>
             <li v-for="(item, index) in layerList" :key="index">
@@ -61,7 +73,7 @@
       </div>
     </div>
 
-    <KDYJS ref="kdyjs"></KDYJS>
+    <KDYJS ref="kdyjs" :message="parentMessage"></KDYJS>
 
     <div class="tips">试运行阶段服务范围：夏阳街道</div>
     <div class="yjdpInfoDialog" v-show="yjdpInfoDialogShow">
@@ -89,7 +101,7 @@
     <!-- 此处弹框样式写在App.vue中 -->
     <el-dialog class="yhfkInfoDialog" title="用户反馈" header-class="yhfkInfoDialogHeader"
       footer-class="yhfkInfoDialogfooter" v-model="yhfkInfoDialogShow" :close="closeKZDP" :close-on-click-modal="false"
-      :append-to-body="true" width="600">
+      :append-to-body="true" :width="isMobile == true ? 'auto':600">
       <el-form ref="yhfkInfoDialogRef" :model="yhfkForm" label-width="auto" :rules="rules" style="max-width: 600px">
         <el-form-item label="姓名" prop="name">
           <el-input v-model="yhfkForm.name" />
@@ -114,7 +126,7 @@
 <script>
 
 
-import { toRaw } from "vue";
+import { toRaw, ref, onMounted, onBeforeUnmount } from "vue";
 
 import { ElMessage } from 'element-plus'
 
@@ -122,6 +134,7 @@ import Map from "@/components/Map.vue";
 import Header from "@/components/Header.vue";
 
 import KDYJS from "@/views/KDYJS.vue";
+import UTIL from '@/utils/util'
 
 export default {
   name: "HomeView",
@@ -144,16 +157,21 @@ export default {
       return item
     })
     return {
+      isMobile:false,
+      baseMap:'影像图层',
+      parentMessage:'',
+      zxqIframeContainer:'zxqIframeContainer-mb-mx',
+
       isShow3D: false,
       baseMapArr: [
         {
           type: "yxt",
-          label: "影像图",
+          label: "影像图层",
           isActive: false
         },
         {
           type: "xht",
-          label: "线划图",
+          label: "线划图层",
           isActive: true
         }
       ],
@@ -195,6 +213,8 @@ export default {
     };
   },
   mounted() {
+    let that = this;
+    that.isMobile = UTIL.terminalType()
     this.$refs.kdyjs.open();
     // 监听message事件
     window.addEventListener('message', this.handleMessage);
@@ -224,7 +244,6 @@ export default {
         status: status
       });
     },
-
     changeMap(item) {
       this.baseMapArr = this.baseMapArr.map(function (item) {
         item.isActive = false;
@@ -240,6 +259,17 @@ export default {
           break;
       }
     },
+    changeBaseMapType(){
+      let that = this;
+      
+      if(that.baseMap == '影像图层'){
+        that.baseMap = '线划图层'
+        mapTriggerEvent("changeBaseMap", { type: "yxt" });
+      }else{
+        that.baseMap = '影像图层'
+        mapTriggerEvent("changeBaseMap", { type: "xht" });
+      }
+    },
     // 打开用户反馈
     openYHFK() {
       this.yhfkInfoDialogShow = true
@@ -313,8 +343,17 @@ export default {
     openZXQ() {
       this.isShowZXQ = true
     },
+    tiggerWind(){
+      if(this.zxqIframeContainer == 'zxqIframeContainer-mb'){
+        this.zxqIframeContainer = 'zxqIframeContainer-mb-mx'
+      }else{
+        this.zxqIframeContainer = 'zxqIframeContainer-mb'
+      }
+      
+    },
     // 关闭智小青
     closeZXQ() {
+      this.zxqIframeContainer ='zxqIframeContainer-mb-mx'
       this.isShowZXQ = false
     },
     // 沿街店铺
@@ -449,6 +488,7 @@ export default {
               lon: entity.info.coor[0],
               lat: entity.info.coor[1]
             })
+            that.parentMessage = that.nowPoint
           } else {
             // console.log('未拾取到实体');
             /**
@@ -532,6 +572,9 @@ export default {
     // 加载wms服务
     addWMSLayer(judge, params) {
       if (judge) {
+        debugger
+        console.log(1111);
+        
         let layer = viewer.imageryLayers.addImageryProvider(
           new SkyScenery.WebMapServiceImageryProvider({
             url: this.layerRoot,
@@ -596,6 +639,7 @@ export default {
     }
   }
 };
+
 </script>
 
 <style lang="less" scoped>
@@ -722,6 +766,21 @@ export default {
       }
     }
   }
+    .changeBaseMap-mb {
+      position: absolute;
+      bottom: 50px;
+      z-index: 9;
+      right: 20px;
+      width: 30px;
+      font-size: 12px;
+      border-radius: 10px;
+      color: #ffffff;
+      cursor: pointer;
+      background: #01346f99;
+      padding: 5px;
+      text-align: center;
+      border: 1px solid #eeeeee;
+    }
 
   @keyframes animation-right {
     from {
@@ -788,6 +847,25 @@ export default {
         background: #005cc6cc;
       }
     }
+    .ckzb-btn-mb {
+      width: 30px;
+      font-size: 12px;
+      border-radius: 10px;
+      color: #ffffff;
+      cursor: pointer;
+      background: #01346f99;
+      padding: 5px;
+      text-align: center;
+      border: 1px solid #eeeeee;
+
+      &.isActive {
+        background: #005cc6cc
+      }
+
+      &:hover {
+        background: #005cc6cc;
+      }
+    }
 
     .layerPanel {
       position: absolute;
@@ -823,6 +901,40 @@ export default {
       }
     }
 
+    .layerPanel-mb {
+      position: absolute;
+      right: 50px;
+      bottom: 0px;
+      background: #01346f99;
+      border-radius: 5px;
+      // padding: 0 10px;
+      padding-left: 10px;
+      height: fit-content;
+      overflow: hidden;
+      overflow-y: auto;
+      height: 240px;
+
+      ul {
+        margin: 0 0;
+        padding: 0 0;
+      }
+
+      li {
+        list-style: none;
+        padding-right: 10px;
+
+        .el-checkbox {
+          color: #ffffff;
+
+          &.is-checked {
+            :deep(.el-checkbox__label) {
+              color: #ffffff;
+            }
+          }
+        }
+      }
+    }
+
   }
 
   .heatmapContorl {
@@ -851,6 +963,26 @@ export default {
       }
     }
 
+    .ckzb-btn-mb {
+      width: 30px;
+      font-size: 12px;
+      border-radius: 10px;
+      color: #ffffff;
+      cursor: pointer;
+      background: #01346f99;
+      padding: 5px;
+      text-align: center;
+      border: 1px solid #eeeeee;
+
+      &.isActive {
+        background: #005cc6cc
+      }
+
+      &:hover {
+        background: #005cc6cc;
+      }
+    }
+
     .heatmapPanel {
       position: absolute;
       right: 0;
@@ -895,6 +1027,15 @@ export default {
     background: url(~@/assets/images/heatmapLegend.png) no-repeat center center/100% 100%;
   }
 
+  .heatmapLegend-mb {
+    position: absolute;
+    left: 10px;
+    bottom: 50px;
+    width: 10px;
+    height: 100px;
+    background: url(~@/assets/images/heatmapLegend.png) no-repeat center center/100% 100%;
+  }
+
 
 
   .tips {
@@ -934,6 +1075,29 @@ export default {
     }
   }
 
+   .yjdp-btn-mb {
+    position: absolute;
+    top: 130px;
+    right: 20px;
+    width: 30px;
+    font-size: 12px;
+    border-radius: 10px;
+    color: #ffffff;
+    cursor: pointer;
+    background: #01346f99;
+    padding: 5px;
+    text-align: center;
+    border: 1px solid #eeeeee;
+
+    &.isActive {
+      background: #005cc6cc;
+    }
+
+    &:hover {
+      background: #005cc6cc;
+    }
+  }
+
   .kzdp-btn {
     position: absolute;
     top: 130px;
@@ -958,6 +1122,29 @@ export default {
     }
   }
 
+  .kzdp-btn-mb {
+    position: absolute;
+    top: 180px;
+    right: 20px;
+    width: 30px;
+    font-size: 12px;
+    border-radius: 10px;
+    color: #ffffff;
+    cursor: pointer;
+    background: #01346f99;
+    padding: 5px;
+    text-align: center;
+    border: 1px solid #eeeeee;
+
+    &.isActive {
+      background: #005cc6cc;
+    }
+
+    &:hover {
+      background: #005cc6cc;
+    }
+  }
+
   .yhfk-btn {
     position: absolute;
     top: 180px;
@@ -978,6 +1165,25 @@ export default {
     }
   }
 
+  .yhfk-btn-mb {
+    position: absolute;
+    top: 230px;
+    right: 20px;
+    width: 30px;
+    font-size: 12px;
+    border-radius: 10px;
+    color: #ffffff;
+    cursor: pointer;
+    background: #01346f99;
+    padding: 5px;
+    text-align: center;
+    border: 1px solid #eeeeee;
+
+    &:hover {
+      background: #005cc6cc;
+    }
+  }
+
   .zxq-btn {
     position: absolute;
     top: 230px;
@@ -1001,6 +1207,26 @@ export default {
       background: #005cc6cc url(~@/assets/images/zxq.png) no-repeat center center /90% 90%;
     }
   }
+  .zxq-btn-mb {
+    position: absolute;
+    top: 280px;
+    right: 10px;
+    width: 60px;
+    height: 60px;
+    border-radius: 10px;
+    color: #ffffff;
+    cursor: pointer;
+    background: url(~@/assets/images/zxq.png) no-repeat center center / 90% 90%;
+    text-align: center;
+
+    &.isActive {
+      background: #005cc6cc url(~@/assets/images/zxq.png) no-repeat center center /90% 90%;
+    }
+
+    &:hover {
+      background: #005cc6cc url(~@/assets/images/zxq.png) no-repeat center center /90% 90%;
+    }
+  }
 
   .yjdpInfoDialog {
     position: absolute;
@@ -1099,5 +1325,91 @@ export default {
       height: 100%;
     }
   }
+
+  .zxqIframeContainer-mb-mx {
+    position: absolute;
+    top: 0px;
+    bottom: 0px;
+    width: 100%;
+    height: 100%; /* iframe高度自适应 */
+    border-radius: 10px;
+    overflow: hidden;
+    background: #01346f99;
+    z-index: 999;
+    .wind {
+      font-size: 16px;
+      font-weight: bold;
+      position: absolute;
+      top: 15px;
+      right: 40px;
+      z-index: 1;
+      cursor: pointer;
+      width: 30px;
+      height: 30px;
+      text-align: center;
+      line-height: 30px;
+    }
+    .close {
+      font-size: 24px;
+      font-weight: bold;
+      position: absolute;
+      top: 15px;
+      right: 15px;
+      z-index: 1;
+      cursor: pointer;
+      width: 30px;
+      height: 30px;
+      text-align: center;
+      line-height: 30px;
+    }
+
+    iframe {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .zxqIframeContainer-mb {
+    position: absolute;
+    //top: 0px;
+    bottom: 0px;
+    width: 100%;
+    height: 30%;
+    border-radius: 10px;
+    overflow: hidden;
+    background: #01346f99;
+    z-index: 999;
+    .wind {
+      font-size: 16px;
+      font-weight: bold;
+      position: absolute;
+      top: 15px;
+      right: 40px;
+      z-index: 1;
+      cursor: pointer;
+      width: 30px;
+      height: 30px;
+      text-align: center;
+      line-height: 30px;
+    }
+    .close {
+      font-size: 24px;
+      font-weight: bold;
+      position: absolute;
+      top: 15px;
+      right: 15px;
+      z-index: 1;
+      cursor: pointer;
+      width: 30px;
+      height: 30px;
+      text-align: center;
+      line-height: 30px;
+    }
+
+    iframe {
+      width: 100%;
+      height: 100%;
+    }
+  }
 }
 </style>

src/views/KDYJS.vue

@@ -8,7 +8,7 @@
         </div>
       </div>
       <div class="left">
-        <div class="content">
+        <div :class="content_css">
           <el-input v-model="searchHZSKeyWord" placeholder="请输入您想开店的地址" class="input-with-select">
             <template #prepend>
               <el-button>
@@ -26,13 +26,15 @@
               <ul>
                 <li v-for="(item, index) in searchResultList" :key="index" @click="judgeHandle(item)">
                   <!-- <div class="name">{{ item.name }}</div> -->
-                  <el-tooltip :content="item.address" placement="right-start" :hide-after="5">
+                  <div class="name" v-if="isMobile">{{ index + 1 }}.&nbsp; &nbsp;{{ item.address }}</div>
+                  <el-tooltip :content="item.address" placement="right-start" :hide-after="5" v-if="!isMobile">
                     <div class="name">{{ index + 1 }}.&nbsp; &nbsp;{{ item.address }}</div>
                   </el-tooltip>
                 </li>
               </ul>
             </el-scrollbar>
           </div>
+
           <!-- v-show="resultPanelShow" -->
           <div class="resultPanel1" v-show="resultPanelShow">
             <el-scrollbar>
@@ -102,8 +104,77 @@
         </div>
       </div>
     </div>
+    <div style="position: relative;">
+      <el-drawer
+            v-model="resultPanelShow_mb"
+            :title= drawer_title
+            style="z-index: 9999;color: #fff;
+            pointer-events: auto;
+            width: 100%;
+            height: 400px;
+            background: #01346f99;
+            padding: 10px 10px;
+            box-sizing: border-box;
+            position: fixed;
+            overflow: hidden;"
+            :direction="direction"
+            :before-close="handleDrawerClose"
+            :modal="false"
+          >
+
+          <el-tabs
+            v-model="drawerActiveName"
+            class="demo-tabs"
+            @tab-click="handleDrawerClick"
+          >
+            <el-tab-pane label="政策" name="1">
+                <div class="resultPanel1-mb">
+                    <div class="JZItem">
+                      <!-- style="color:#00FF00" -->
+                      <div class="detail" style="color:#FFB400">{{ JZText.cy }}</div>
+                      <div class="checkZC" @click="zcIndex = 0; dialogVisible = true">查看相关政策
+                      </div>
+                    </div>
+                    <div class="JZItem">
+                      <div class="detail" v-if="analysisResult['互联网上网服务营业场所']" style="color:#00FF00">{{ allowText.hlw }}</div>
+                      <div class="detail" v-if="!analysisResult['互联网上网服务营业场所']" style="color:#FF0000">{{ JZText.hlw }}</div>
+                      <div class="checkZC" @click="zcIndex = 1; dialogVisible = true">查看相关政策</div>
+                    </div>
+                    <div class="JZItem">
+                      <div class="detail" v-if="analysisResult['娱乐场所']" style="color:#00FF00">{{ allowText.ylcs }}</div>
+                      <div class="detail" v-if="!analysisResult['娱乐场所']" style="color:#FF0000">{{ JZText.ylcs }}</div>
+                      <div class="checkZC" @click="zcIndex = 2; dialogVisible = true">查看相关政策</div>
+                    </div>
+                    <div class="JZItem">
+                      <div class="detail" v-show="analysisResult['烟草制品零售点']" style="color:#00FF00">{{ allowText.yc }}</div>
+                      <div class="detail" v-show="!analysisResult['烟草制品零售点']" style="color:#FF0000">{{ JZText.yc }}</div>
+                      <div class="checkZC" @click="zcIndex = 3; dialogVisible = true">查看相关政策</div>
+                    </div>
+                    <div class="JZItem">
+                      <div class="detail" v-if="analysisResult['噪声污染']" style="color:#00FF00">{{ allowText.zy }}</div>
+                      <div class="detail" v-if="!analysisResult['噪声污染']" style="color:#FF0000">{{ JZText.zy }}</div>
+                      <div class="checkZC" @click="zcIndex = 4; dialogVisible = true">查看相关政策</div>
+                    </div>
+                  </div>
+            </el-tab-pane>
+            <el-tab-pane label="周边500m内" name="2">
+                <div class="resultPanel2-mb">
+                  <div class="resultPanel2content">
+                      <ul v-if="nearShopResult.length > 0">
+                        <li v-for="(item, index) in nearShopResult" :key="index">
+                          <div class="name" v-if="item.name == '周边市民投诉次数'">{{ item.name }}：{{ item.num }}次</div>
+                          <div class="name" v-else>{{ item.name }}：{{ item.num }}家</div>
+                        </li>
+                      </ul>
+                      <div v-else>暂无周边信息</div>
+                  </div>
+                </div>
+            </el-tab-pane>
+          </el-tabs>
+        </el-drawer>
+    </div>
     <div class="kdyjs-overlay" v-if="dialogVisible">
-      <div class="kdyjs-dialog">
+      <div :class="isMobile == true ? 'kdyjs-dialog-mb' : 'kdyjs-dialog'">
         <div class="kdyjs-header">
           <div class="close" @click="handleClose">×</div>
         </div>
@@ -118,7 +189,20 @@
 <script>
 import { toRaw } from "vue";
 import { ElMessage } from 'element-plus';
+import UTIL from '@/utils/util'
 export default {
+  props:{
+     message: {
+   		type: Object
+	 }
+  },
+  // 监听 ref
+  watch: {
+    // 监听 message 属性
+    message(newVal) {
+      this.drawer_title = newVal.properties['店铺名称'];
+    }
+  },
   data() {
     return {
       show: false,
@@ -128,6 +212,14 @@ export default {
       searchHZSKeyWord: "",
       searchResultList: [],
 
+      isMobile:false,
+      content_css:'content-mb',
+      drawer: true,
+      direction:'btt',
+      drawer_title: '',
+      resultPanelShow_mb: false,
+      drawerActiveName: '1',
+
       addressPanelShow: false,
       resultPanelShow: false,
 
@@ -214,6 +306,7 @@ export default {
   },
   mounted() {
     let that = this;
+    that.isMobile = UTIL.terminalType()
     document.onkeydown = function (event) {
       let keycode = event.keyCode;
       if (keycode == 13) {
@@ -244,7 +337,11 @@ export default {
         registerModule("kdyjsyzt");
       }
     },
-
+    handleDrawerClick(param){
+      debugger
+      console.log('[  ] >', param)
+      this.drawerActiveName=param;
+    },
     handleClose() {
       this.dialogVisible = false;
     },
@@ -264,7 +361,9 @@ export default {
             that.nearShopResult = []
             if (result.code == 200) {
               that.addressPanelShow = true;
+              that.resultPanelShow_mb = false;
               that.resultPanelShow = false;
+              
               let obj = {}
               result.content.pois.map(function (item) {
                 if (obj[item.address] == undefined) {
@@ -276,6 +375,7 @@ export default {
               that.addPoints();
             } else {
               that.addressPanelShow = true;
+              that.resultPanelShow_mb = false;
               that.resultPanelShow = false;
               ElMessage({
                 message: '未查到该地址或地址输入不准确！',
@@ -301,6 +401,7 @@ export default {
         this.nearShopResult = []
         this.addressPanelShow = false;
         this.resultPanelShow = false;
+        this.resultPanelShow_mb = false;
       }
     },
 
@@ -382,6 +483,9 @@ export default {
       // filter = "contains(the_geom,point(" + item.lon + "," + item.lat + "))"
 
       // 接口部分仅判断 0 1 2 项
+      
+      this.searchHZSKeyWord = item.address
+      this.drawer_title = item.address
       let interfaceUrl = webConfig.KDYJS_URL + "/kdyjs/shop/bannedThings?address=" + item.address + "&lon=" + item.lon + "&lat=" + item.lat + "&distance=200"
       let interfacePro = fetch(interfaceUrl).then(response => response.json())
       let arr = this.judgeWMSLayer(item)
@@ -584,11 +688,19 @@ export default {
         }
 
         that.nearShopResult = nearShopResult
-        that.resultPanelShow = true
-
+        if(that.isMobile){
+            that.addressPanelShow = false
+            if(that.resultPanelShow_mb != true){
+                that.resultPanelShow_mb = true;
+            }
+        }else{
+          that.resultPanelShow = true
+          
+        }
+       
       }).catch(error => console.log("error", error));
     },
-
+    
     returnWMSTF(result) {
       if (result.features.length == 0) {
         return false; // 无交集
@@ -617,12 +729,44 @@ export default {
         // 旅游路线
         console.log("旅游路线")
       }
+    },
+
+    handleDrawerClose(){
+      console.log('[ eeee ] >')
+      let that = this;
+      that.resultPanelShow = false
+      that.resultPanelShow_mb = false;
     }
   }
 };
 </script>
 
 <style lang="less" scoped>
+
+/deep/ .el-drawer__header{
+  color: #fff;
+  margin: 0;
+  padding: 0;
+}
+/deep/ .el-tabs__item{
+  color: #ffffff;
+}
+/deep/ .el-tabs__content{
+    flex-grow: 1;
+    overflow: auto;
+    position: relative;
+    height: 160px;  
+}
+/deep/ .el-drawer__body{
+  flex: 1;
+  padding: 0;
+  overflow: hidden;
+}
+/deep/ .el-drawer__title{
+  text-align: center;
+  font-weight: bold;
+}
+
 .kdyjs {
   position: absolute;
   top: 0px;
@@ -817,6 +961,216 @@ export default {
     }
   }
 
+
+  .resultPanel1-mb {
+          pointer-events: auto;
+          margin-top: 10px;
+          width: 100%;
+          padding: 5px;
+          padding-right: 0px;
+          box-sizing: border-box;
+          overflow-y: auto;
+          .JZItem {
+            width: 100%;
+            margin-bottom: 15px;
+            cursor: pointer;
+            position: relative;
+            padding-right: 10px;
+            box-sizing: border-box;
+
+            .detail {
+              width: calc(100% - 110px);
+              min-height: 36px;
+              // text-shadow: 0.5px 0.5px 2px #ffffff;
+            }
+
+            .checkZC {
+              position: absolute;
+              top: 0px;
+              right: 10px;
+              border: 1px solid #ffffff;
+              padding: 0px 5px;
+              border-radius: 5px;
+              font-size: 16px;
+
+              &:hover {
+                background: #01346f99;
+              }
+            }
+          }
+        }
+        .resultPanel2-mb {
+          pointer-events: auto;
+          width: 100%;
+          padding: 5px;
+          box-sizing: border-box;
+          overflow-y: auto;
+
+          .title {
+            height: 24px;
+            line-height: 24px;
+            font-size: 20px;
+            margin-bottom: 20px;
+          }
+
+          .resultPanel2content {
+            height: 200px;
+            overflow: hidden;
+            overflow-y: auto;
+
+            ul {
+              margin: 0 0;
+              padding: 0 0;
+
+              li {
+                list-style: none;
+                cursor: pointer;
+                border-bottom: 1px solid #ebebeb2e;
+                padding-bottom: 10px;
+                margin-bottom: 10px;
+
+                .name {
+                  font-size: 16px;
+                }
+              }
+            }
+          }
+        }
+      .content-mb {
+        pointer-events: none;
+        width: 100%;
+        // height: 100%;
+        position: relative;
+        padding-left: 10px;
+        padding-right: 60px;
+        padding-top: 20px;
+        box-sizing: border-box;
+        color: #ffffff;
+
+        .el-input {
+          pointer-events: auto;
+          border: 2px solid #01346f99;
+          border-radius: 5px;
+        }
+
+        .addressPanel {
+          pointer-events: auto;
+          margin-top: 10px;
+          width: 100%;
+          height: 200px;
+          background: #01346f99;
+          padding: 10px 10px;
+          box-sizing: border-box;
+          overflow: hidden;
+          overflow-y: auto;
+
+          ul {
+            margin: 0 0;
+            padding: 0 0;
+
+            li {
+              list-style: none;
+              cursor: pointer;
+              border-bottom: 1px solid #eeeeee;
+              padding-bottom: 10px;
+              margin-bottom: 10px;
+
+              .name {
+                font-size: 18px;
+                width: 100%;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
+
+              .address {
+                font-size: 14px;
+              }
+            }
+          }
+        }
+
+        .resultPanel1 {
+          pointer-events: auto;
+          margin-top: 10px;
+          width: 100%;
+          height: 220px;
+          background: #01346f99;
+          padding: 10px 10px;
+          padding-right: 0px;
+          box-sizing: border-box;
+
+          .JZItem {
+            width: 100%;
+            margin-bottom: 15px;
+            cursor: pointer;
+            position: relative;
+            padding-right: 10px;
+            box-sizing: border-box;
+
+            .detail {
+              width: calc(100% - 110px);
+              min-height: 36px;
+              // text-shadow: 0.5px 0.5px 2px #ffffff;
+            }
+
+            .checkZC {
+              position: absolute;
+              top: 0px;
+              right: 10px;
+              border: 1px solid #ffffff;
+              padding: 0px 5px;
+              border-radius: 5px;
+              font-size: 16px;
+
+              &:hover {
+                background: #01346f99;
+              }
+            }
+          }
+        }
+
+        .resultPanel2 {
+          pointer-events: auto;
+          margin-top: 10px;
+          width: 100%;
+          height: 260px;
+          background: #01346f99;
+          padding: 10px 10px;
+          box-sizing: border-box;
+
+          .title {
+            height: 24px;
+            line-height: 24px;
+            font-size: 20px;
+            margin-bottom: 20px;
+          }
+
+          .resultPanel2content {
+            height: 200px;
+            overflow: hidden;
+            overflow-y: auto;
+
+            ul {
+              margin: 0 0;
+              padding: 0 0;
+
+              li {
+                list-style: none;
+                cursor: pointer;
+                border-bottom: 1px solid #eeeeee;
+                padding-bottom: 10px;
+                margin-bottom: 10px;
+
+                .name {
+                  font-size: 16px;
+                }
+              }
+            }
+          }
+        }
+      }
+
   .kdyjs-overlay {
     pointer-events: auto;
     width: 100%;
@@ -872,6 +1226,49 @@ export default {
         text-indent: 20px;
       }
     }
+
+    .kdyjs-dialog-mb {
+      position: relative;
+      top: calc(50% - 222px);
+      height: 300px;
+      background: url(http://localhost:2118/kdyjs/img/u133.e1a3de44.png) no-repeat center center / 100% 100%;
+      overflow: hidden;
+
+      .kdyjs-header {
+        width: 100%;
+        height: 60px;
+        line-height: 40px;
+        color: #ffffff;
+        text-align: center;
+        font-size: 20px;
+        font-weight: bold;
+
+        .close {
+          position: absolute;
+          top: 0px;
+          right: 0px;
+          float: right;
+          width: 40px;
+          height: 40px;
+          line-height: 40px;
+          text-align: center;
+          color: #00dbff;
+          font-weight: bold;
+          font-size: 20px;
+
+          cursor: pointer;
+        }
+      }
+
+      .kdyjs-body {
+        width: 100%;
+        height: calc(100% - 60px);
+        padding: 10px 26px 36px 26px;
+        box-sizing: border-box;
+        color: #ffffff;
+        text-indent: 20px;
+      }
+    }
   }
 }
 </style>