开店一件事移动端整体调整

src/components/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="header">
+  <div class="header" v-if="!isMobile">
     <div class="h-title-left-time" v-if="!isMobile">
       <div class="time"><span>{{ time.split(' ')[1] }}</span> <span style="padding: 0 10px;color: #ffffff73;">|</span><span> {{ time.split(' ')[2] }}&nbsp;&nbsp;{{ time.split(' ')[0] }}</span></div>
       <div class="tianqi">
@@ -104,6 +104,7 @@ export default {
           that.backgroundStyles = JSON.parse(JSON.stringify(that.backgroundStyles))
           that.dming = result.now.text
           that.temperature = result.now.temperature
+          sessionStorage.setItem("mb-tq", that.dming+that.temperature)
         },
         error: function (error) {
           console.log(error)

src/components/Map.vue

@@ -251,15 +251,19 @@ export default {
     },
     // TDT
     addTDT(type) {
+      let matrixIds = [];
+      for (let i = 0; i < 19; i++) {
+        matrixIds[i] = i + 1;
+      }
       return viewer.imageryLayers.addImageryProvider(
         new SkyScenery.WebMapTileServiceImageryProvider({
           url: webConfig.TDT_URL + type + "_w/wmts?tk=f74e6c0cc247c42af05f7053e0b5fb9b",
           layer: type,
           style: "default",
-          // format: "tiles",
-          format:"image/png",
+          format: "tiles",
+          // format:"image/png",
           tileMatrixSetID: "w",
-          // TileMatrixLabels:"EPSG:4326:0",
+          TileMatrixLabels: matrixIds,
           subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
           minimumLevel: 1,
           maximumLevel: 18,

src/views/HomeView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="home">
-    <Header></Header>
+    <Header v-if="!isMobile"></Header>
     <Map />
 
     <div :class="{ 'yjdp-btn': true, isActive: yjdpShow }" @click="addyjdp" v-if="!isMobile">沿街店铺</div>
@@ -8,7 +8,22 @@
     <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="yhfk-btn-mb" @click="openYHFKMB" v-if="isMobile"><img src="../../public/static/image/fk.png"/></div>
+    <div class="tq-btn-mb" v-if="isMobile">
+       <el-popover
+          ref="popover"
+          placement="right"
+          title=""
+          trigger="click"
+          content=""
+          :width="122"
+        >
+        <span>天气</span><span style="color: #4a78ff;">&nbsp;&nbsp;{{tq_content}}℃</span>
+        <template #reference>
+          <img src="../../public/static/image/tq.png"/>
+        </template>
+      </el-popover>
+      </div>
     <!-- 智小青 -->
     <div class="zxq-btn" @click="openZXQ" v-if="!isMobile"></div>
     <div class="zxq-btn-mb" @click="openZXQ" v-if="isMobile"></div>
@@ -35,12 +50,24 @@
     </div>
 
     <div class="changeBaseMap-mb" v-if="isMobile" @click="changeBaseMapType()">
-      <div>{{baseMap}}</div>
+      <img :src="baseMapPopupImg" />
+      <!-- <div>{{baseMap}}</div> -->
     </div>
 
+    <div class="changeBaseMap-mb-popup" v-if="baseMapPopupShow" >
+      <div class="container">
+        <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>
+        </div>
+      </div>
+    </div>
+
+
     <div class="heatmapContorl">
       <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="{ 'ckzb-btn-mb': true, isActive: heatInfoDrawerShow }" @click="handleOpenHeatmapPanelShowMb" v-if="isMobile">热力图层</div>
       <div :class="isMobile == true ? 'heatmapPanel-mb':'heatmapPanel'" v-show="heatmapPanelShow">
         <el-scrollbar>
           <ul>
@@ -53,14 +80,14 @@
       </div>
     </div>
 
-    <div :class="isMobile == true ? 'heatmapLegend-mb':'heatmapLegend'" v-show="heatmapPanelShow">
+    <div :class="isMobile == true ? 'heatmapLegend-mb':'heatmapLegend'" v-show="heatmapPanelShow || heatInfoDrawerShow">
     </div>
 
     <!-- <div :class="{ 'zxq-ckzb-btn': true, isActive: isActiveZXQ }" @click="isActiveZXQ">智小青</div> -->
 
     <div class="layerContorl">
       <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="{ 'ckzb-btn-mb': true, isActive: layerInfoDrawerShow }" @click="handleOpenLayerPanelShowMB" v-if="isMobile">查看周边</div>
       <div :class="isMobile == true ? 'layerPanel-mb':'layerPanel'" v-show="layerPanelShow">
         <el-scrollbar>
           <ul>
@@ -73,11 +100,7 @@
       </div>
     </div>
 
-    <div v-if="!isMobile" style="position: absolute;
-    right: 20px;
-    bottom: 170px;
-    background: #ffffff;
-    border-radius: 5px;">
+    <div :class="isMobile == true ? 'zoombtn-mb':'zoombtn'">
       <div style="padding: 10px;
     padding-bottom: 5px;
     cursor: pointer;"
@@ -147,6 +170,123 @@
         </div>
       </template>
     </el-dialog>
+    <div style="">
+      <el-drawer
+              v-model="yhfkInfoDrawerShow"
+              title= "用户反馈"
+              style="z-index: 9999;
+              color: #000000;
+              pointer-events: auto;
+              width: 100%;
+              background: #ffffff;
+              padding: 10px;
+              box-sizing: border-box;
+              position: fixed;
+              text-align: center;
+              font-weight: bold;
+              overflow: hidden;
+              border-top-left-radius: 10px;
+              border-top-right-radius: 10px;"
+              size="38%"
+              direction="btt"
+              :before-close="closeYHFKMB"
+              :modal="false"
+              modal-class="mask-layer"
+            >
+
+            <el-form ref="yhfkInfoDrawerRef" :model="yhfkForm" label-width="auto" :rules="rules" style="max-width: 600px">
+            <el-form-item label="用户姓名" prop="name">
+              <el-input v-model="yhfkForm.name" placeholder="请输入您的用户姓名" />
+            </el-form-item>
+            <el-form-item label="联系方式" prop="tele">
+              <el-input v-model="yhfkForm.tele" placeholder="请输入您的联系方式" />
+            </el-form-item>
+            <el-form-item label="问题描述" prop="desc">
+              <el-input v-model="yhfkForm.desc" type="textarea" placeholder="请输入您的问题描述" />
+            </el-form-item>
+          </el-form>
+          <template #footer>
+            <div class="dialog-footer">
+              <el-button round @click="closeYHFKMB" style="width: 40%;margin: 0px 10px;">取消</el-button>
+              <el-button type="primary" round style="width: 40%;margin: 0px 10px;" @click="yhfkSubmit">提交</el-button>
+            </div>
+          </template>
+      </el-drawer>
+    </div>
+
+    <div style="">
+      <el-drawer
+              v-model="heatInfoDrawerShow"
+              title= ""
+              style="z-index: 9999;
+              color: #000000;
+              pointer-events: auto;
+              width: 100%;
+              background: #ffffff;
+              padding: 10px;
+              box-sizing: border-box;
+              /* position: fixed; */
+              text-align: left;
+              font-weight: bold;
+              overflow: hidden;
+              border-top-left-radius: 10px;
+              border-top-right-radius: 10px;"
+              size="30%"
+              direction="btt"
+              :before-close="handleCloseheatDrawer"
+              :modal="false"
+              modal-class="mask-layer"
+            >
+            <el-button :type="item.btnType" round v-for="(item, index) in heatmapList" :key="index" :value="item" style="margin: 0px 10px 10px 0px;width: 150px;"  @click="judgeLayerType($event, item)">{{item.name}}</el-button>
+         </el-drawer>
+    </div>
+
+    <div style="">
+      <el-drawer
+              v-model="layerInfoDrawerShow"
+              title= ""
+              style="z-index: 9999;
+              color: #000000;
+              pointer-events: auto;
+              width: 100%;
+              background: #ffffff;
+              padding: 10px;
+              box-sizing: border-box;
+              /* position: fixed; */
+              text-align: left;
+              font-weight: bold;
+              overflow: hidden;
+              border-top-left-radius: 10px;
+              border-top-right-radius: 10px;"
+              size="30%"
+              direction="btt"
+              :before-close="handleCloseLayerDrawer"
+              :modal="false"
+              modal-class="mask-layer"
+            >
+            <el-button :type="item.btnType" round v-for="(item, index) in layerList" :key="index" :value="item" style="margin: 0px 10px 10px 0px;width: 150px;"  @click="judgeLayerType($event, item)">{{item.name}}</el-button>
+         </el-drawer>
+    </div>
+
+    <el-dialog
+      v-model="submitDialogVisible"
+      :title="submitDialogTitle"
+      width="300"
+      top="40vh"
+      :center="true"
+      :before-close="closeDialogBtn"
+    >
+      <span>{{submitDialogContent}}</span>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" round style="width: 90%;" @click="closeDialogBtn">
+            知道了
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+
   </div>
 </template>
 <script>
@@ -174,12 +314,14 @@ export default {
     arr = arr.map(function (item, index) {
       item.id = index;
       item.isAdd = false
+      item.btnType = ''
       return item
     })
     let arrHeatmap = webConfig.heatmapList;
     arrHeatmap = arrHeatmap.map(function (item, index) {
       item.id = index;
-      item.isAdd = false
+      item.isAdd = false,
+      item.btnType = ''
       return item
     })
     return {
@@ -201,13 +343,22 @@ export default {
           isActive: true
         }
       ],
+      baseMapPopupImg:require('../../public/static/image/tc.png'),
+      baseMapPopupShow:false,
       yjdpShow: false,
       kzdpShow: false,
       mapHandle: null,
       yjdpInfoDialogShow: false,
       kzdpInfoDialogShow: false,
       yhfkInfoDialogShow: false,
+      yhfkInfoDrawerShow: false,
+      submitDialogVisible:false,
+      heatInfoDrawerShow:false,
+      layerInfoDrawerShow:false,
+      submitDialogTitle:'提交成功',
+      submitDialogContent:'',
       nowPoint: null,
+      tq_content:'',
 
       layerPanelShow: false,
       layerRoot: webConfig.GEOSERVER_URL_WMS,
@@ -246,6 +397,13 @@ export default {
     this.$refs.kdyjs.open();
     // 监听message事件
     window.addEventListener('message', this.handleMessage);
+    let timer = setInterval(function() {
+        if(sessionStorage.getItem("mb-tq")){
+            that.tq_content = sessionStorage.getItem("mb-tq")
+            clearInterval(timer)
+        }
+       
+    }, 1000);
   },
   beforeDestroy() {
     // 在组件销毁前移除事件监听器
@@ -304,22 +462,48 @@ export default {
     },
     changeBaseMapType(){
       let that = this;
+      that.baseMapPopupShow = that.baseMapPopupShow == true ? false : true;
+
+      that.baseMapPopupImg= that.baseMapPopupShow == true ? require('../../public/static/image/tc_check.png') : require('../../public/static/image/tc.png');
       
-      if(that.baseMap == '影像图层'){
-        that.baseMap = '线划图层'
-        mapTriggerEvent("changeBaseMap", { type: "yxt" });
-      }else{
-        that.baseMap = '影像图层'
-        mapTriggerEvent("changeBaseMap", { type: "xht" });
-      }
+      // if(that.baseMap == '影像图层'){
+      //   that.baseMap = '线划图层'
+      //   mapTriggerEvent("changeBaseMap", { type: "yxt" });
+      // }else{
+      //   that.baseMap = '影像图层'
+      //   mapTriggerEvent("changeBaseMap", { type: "xht" });
+      // }
     },
     // 打开用户反馈
     openYHFK() {
       this.yhfkInfoDialogShow = true
+      this.yhfkForm = {
+        name: "",
+        tele: "",
+        desc: ""
+      }
     },
     // 关闭用户反馈
     closeYHFK() {
-      this.yhfkInfoDialogShow = false;
+      this.yhfkInfoDialogShow = false
+      this.yhfkForm = {
+        name: "",
+        tele: "",
+        desc: ""
+      }
+    },
+    // 打开用户反馈
+    openYHFKMB() {
+      this.yhfkInfoDrawerShow = true;
+      this.yhfkForm = {
+        name: "",
+        tele: "",
+        desc: ""
+      }
+    },
+    // 关闭用户反馈
+    closeYHFKMB() {
+      this.yhfkInfoDrawerShow = false;
       this.yhfkForm = {
         name: "",
         tele: "",
@@ -329,7 +513,14 @@ export default {
     // 提交用户反馈
     yhfkSubmit() {
       let that = this;
-      this.$refs.yhfkInfoDialogRef.validate((valid, fields) => {
+      let result = undefined;
+      if(this.yhfkInfoDrawerShow = true){
+        result = this.$refs.yhfkInfoDrawerRef;
+      }else{
+        result = this.$refs.yhfkInfoDialogRef;
+      }
+
+      result.validate((valid, fields) => {
         if (valid) {
           let formData = new FormData();
           let obj = {
@@ -360,28 +551,47 @@ export default {
             .then(data => {
               // 处理返回的数据，例如更新页面等
               if (data.code == 200) {
-                ElMessage({
-                  message: '您的反馈已提交，后续我们将与您联系确认问题，感谢您的反馈！',
-                  type: 'success',
-                  plain: true,
-                })
-                setTimeout(() => {
-                  that.yhfkInfoDialogShow = false
-                }, 500);
+                if(this.yhfkInfoDrawerShow = true){
+                    this.submitDialogVisible = true;
+                    this.submitDialogTitle='提交成功';
+                    this.submitDialogContent='您的反馈已提交，后续我们将与您联系确认问题，感谢您的反馈！';
+                }else{
+                  ElMessage({
+                    message: '您的反馈已提交，后续我们将与您联系确认问题，感谢您的反馈！',
+                    type: 'success',
+                    plain: true,
+                  })
+                  setTimeout(() => {
+                    that.yhfkInfoDialogShow = false
+                  }, 500);
+                }
+                
               }
             })
             .catch((error) => {
               // console.error('Error:', error);
             });
         } else {
-          ElMessage({
-            message: '请您完善反馈的问题后再尝试提交！',
-            type: 'warning',
-            plain: true,
-          })
+          if(this.yhfkInfoDrawerShow = true){
+              this.submitDialogVisible = true;
+              this.submitDialogTitle='提交失败';
+              this.submitDialogContent='请您完善反馈的问题后再尝试提交！';
+          }else{
+            ElMessage({
+              message: '请您完善反馈的问题后再尝试提交！',
+              type: 'warning',
+              plain: true,
+            })
+          }
         }
       })
     },
+    closeDialogBtn(){
+        if(this.submitDialogTitle == '提交成功'){
+          this.yhfkInfoDrawerShow = false
+        }
+        this.submitDialogVisible = false;
+    },
     // 打开智小青
     openZXQ() {
       this.isShowZXQ = true
@@ -649,7 +859,17 @@ export default {
       var canvasCoordinates = viewer.scene.cartesianToCanvasCoordinates(cartesian);
       return canvasCoordinates
     },
-
+    // 热力图列表展示-MB
+    handleOpenHeatmapPanelShowMb(){
+        console.log(111);
+        
+        this.layerInfoDrawerShow = false
+        if(this.heatInfoDrawerShow){
+          this.heatInfoDrawerShow = false
+        }else{
+          this.heatInfoDrawerShow = true
+        }
+    },
     // 热力图列表展示
     handleOpenHeatmapPanelShow() {
       this.heatmapPanelShow = !toRaw(this.heatmapPanelShow)
@@ -660,9 +880,27 @@ export default {
       this.layerPanelShow = !toRaw(this.layerPanelShow)
       this.heatmapPanelShow = false
     },
+    // 图层列表展示-MB
+    handleOpenLayerPanelShowMB(){
+      console.log(2222);
+       this.heatInfoDrawerShow = false
+       if(this.layerInfoDrawerShow){
+          this.layerInfoDrawerShow = false
+       }else{
+          this.layerInfoDrawerShow = true
+       }
+    },
 
     // 区分图层类型后按照不同类型加载
     judgeLayerType(judge, params) {
+      //用于移动端使用
+      if(params.btnType == ''){
+        params.btnType = 'primary'
+        judge = true
+      }else{
+        params.btnType = ''
+        judge = false
+      }
       if (params.type == "heatmap") {
         this.addHeatMapLayer(judge, params);
       } else {
@@ -733,6 +971,12 @@ export default {
           delete this.heatmapLayer[params.name]
         }
       }
+    },
+    handleCloseheatDrawer(){
+      this.heatInfoDrawerShow = false
+    },
+    handleCloseLayerDrawer(){
+      this.layerInfoDrawerShow = false
     }
   }
 };
@@ -740,6 +984,23 @@ export default {
 </script>
 
 <style lang="less" scoped>
+/deep/ .el-drawer__header{
+  color: #000000;
+  margin: 0;
+  padding: 0;
+}
+/deep/ .el-drawer__footer {
+  text-align: center;
+}
+/deep/ .el-dialog__footer{
+  text-align: center;
+}
+/deep/ .el-button+.el-button{
+  margin-left: 0;
+}
+/deep/ .mask-layer{
+  position: inherit !important;
+}
 .home {
   width: 100%;
   height: 100%;
@@ -864,20 +1125,108 @@ export default {
       }
     }
   }
+
+  .changeBaseMap-mb-popup {
+    position: absolute;
+    bottom: 50px;
+    right: 50px;
+    background: #ffffff;
+    padding: 0px 10px;
+    color: #000000;
+    padding: 10px 10px;
+    cursor: pointer;
+    border-radius: 10px;
+    z-index: 9;
+
+    .container {
+      position: relative;
+      height: 80px;
+      width: 122px;
+      animation: animation-wdith-back 0.5s ease-in-out 1;
+
+      div .content {
+        height: 80px;
+        width: 100px;
+        border-radius: 10px;
+        border: 2px solid #ffffff;
+      }
+
+      div .content.active {
+        border-color: #00bbff;
+        .label {
+          color: #00bbff;
+        }
+      }
+
+      div .content:hover {
+        border-color: #00bbff;
+
+        .label {
+          color: #00bbff;
+        }
+      }
+
+      >div {
+        width: 100px;
+        height: 80px;
+        position: absolute;
+        // border: 1px solid #ffffff;
+        border-radius: 10px;
+
+        .label {
+          width: 100%;
+          height: 24px;
+          position: absolute;
+          bottom: 0px;
+          text-align: center;
+          font-size: 16px;
+          background: #ffffffe3;
+          border-bottom-right-radius: 10px;
+          border-bottom-left-radius: 10px;
+        }
+      }
+
+      >div:nth-child(1) {
+        z-index: 1;
+        right: 20px;
+        background: url(~@/assets/images/base2.png) no-repeat center center/100% 100%;
+        animation: animation-right-back 0.5s ease-in-out 1;
+      }
+
+      >div:nth-child(2) {
+        z-index: 2;
+        right: 0px;
+        background: url(~@/assets/images/base1.png) no-repeat center center/100% 100%;
+      }
+    }
+
+    &:hover {
+      .container {
+        width: 220px;
+        animation: animation-wdith 0.5s ease-in-out 1;
+
+        >div:nth-child(1) {
+          right: 120px;
+          animation: animation-right 0.5s ease-in-out 1;
+        }
+      }
+    }
+  }
+
     .changeBaseMap-mb {
       position: absolute;
       bottom: 50px;
-      z-index: 9;
-      right: 20px;
-      width: 30px;
+      right: 10px;
+      width: 20px;
+      height: 20px;
       font-size: 12px;
-      border-radius: 10px;
-      color: #ffffff;
+      border-radius: 5px;
       cursor: pointer;
-      background: #01346f99;
-      padding: 5px;
+      padding: 8px;
       text-align: center;
-      // border: 1px solid #eeeeee;
+      background: #ffffff;
+      display: flex;
+      box-shadow: 0px 2px 4px 0px #0000001A;
     }
 
   @keyframes animation-right {
@@ -919,7 +1268,20 @@ export default {
       width: 122px;
     }
   }
-
+  .zoombtn {
+    position: absolute;
+    right: 20px;
+    bottom: 170px;
+    background: #ffffff;
+    border-radius: 5px;
+  }
+  .zoombtn-mb {
+    position: absolute;
+    right: 10px;
+    bottom: 100px;
+    background: #ffffff;
+    border-radius: 5px;
+  }
   .layerContorl {
     // position: absolute;
     // right: 20px;
@@ -953,25 +1315,26 @@ export default {
       }
     }
     .ckzb-btn-mb {
+      position: absolute;
+      top: 152px;
+      right: 10px;
       width: 30px;
-      font-size: 12px;
-      border-radius: 10px;
+      height: 30px;
+      font-size: 11px;
+      border-radius: 50%;
       color: #ffffff;
       cursor: pointer;
-      background: #01346f99;
       padding: 5px;
       text-align: center;
-      // border: 1px solid #eeeeee;
-      position: absolute;
-      right: 20px;
-      bottom: 214px;
-
+      box-shadow: 2px -4px 4px 0px #FFFFFF40 inset;
+      background: linear-gradient(140deg, rgba(41, 234, 255, 0.9) 12.11%, rgba(28, 92, 255, 0.9) 50.51%, rgba(64, 140, 255, 0.9) 85.39%);
+      
       &.isActive {
-        background: #005cc6cc
+        background: linear-gradient(330deg, rgb(239 143 197 / 90%) 12.11%, rgb(1 101 251 / 90%) 85.39%) !important;
       }
 
       &:hover {
-        background: #005cc6cc;
+        // background: #005cc6cc;
       }
     }
 
@@ -1079,25 +1442,26 @@ export default {
     }
 
     .ckzb-btn-mb {
+      position: absolute;
+      top: 198px;
+      right: 10px;
       width: 30px;
-      font-size: 12px;
-      border-radius: 10px;
+      height: 30px;
+      font-size: 11px;
+      border-radius: 50%;
       color: #ffffff;
       cursor: pointer;
-      background: #01346f99;
       padding: 5px;
       text-align: center;
-      // border: 1px solid #eeeeee;
-      position: absolute;
-      right: 20px;
-      bottom: 160px;
+      box-shadow: 2px -4px 4px 0px #FFFFFF40 inset;
+      background: linear-gradient(140deg, rgba(41, 234, 255, 0.9) 12.11%, rgba(28, 92, 255, 0.9) 50.51%, rgba(64, 140, 255, 0.9) 85.39%);
 
       &.isActive {
-        background: #005cc6cc
+        background: linear-gradient(330deg, rgb(239 143 197 / 90%) 12.11%, rgb(1 101 251 / 90%) 85.39%) !important;
       }
 
       &:hover {
-        background: #005cc6cc;
+        // background: #005cc6cc;
       }
     }
 
@@ -1181,8 +1545,9 @@ export default {
 
   .heatmapLegend-mb {
     position: absolute;
-    left: 10px;
-    bottom: 50px;
+    right: 10px;
+    bottom: 265px;
+    border-radius: 10px;
     width: 10px;
     height: 100px;
     background: url(~@/assets/images/heatmapLegend.png) no-repeat center center/100% 100%;
@@ -1230,26 +1595,26 @@ export default {
   }
 
    .yjdp-btn-mb {
-    position: absolute;
-    // top: 130px;
-    bottom: 326px;
-    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;
+      position: absolute;
+      top: 60px;
+      right: 10px;
+      width: 30px;
+      height: 30px;
+      font-size: 11px;
+      border-radius: 50%;
+      color: #ffffff;
+      cursor: pointer;
+      padding: 5px;
+      text-align: center;
+      box-shadow: 2px -4px 4px 0px #FFFFFF40 inset;
+      background: linear-gradient(140deg, rgba(41, 234, 255, 0.9) 12.11%, rgba(28, 92, 255, 0.9) 50.51%, rgba(64, 140, 255, 0.9) 85.39%);
 
     &.isActive {
-      background: #005cc6cc;
+      background: linear-gradient(330deg, rgb(239 143 197 / 90%) 12.11%, rgb(1 101 251 / 90%) 85.39%) !important;
     }
 
     &:hover {
-      background: #005cc6cc;
+      // background: linear-gradient(360deg, rgba(41, 234, 255, 0.9) 12.11%, rgba(28, 92, 255, 0.9) 50.51%, rgba(64, 140, 255, 0.9) 85.39%);
     }
   }
 
@@ -1281,25 +1646,25 @@ export default {
 
   .kzdp-btn-mb {
     position: absolute;
-    // top: 180px;
-    bottom: 270px;
-    right: 20px;
+    top:106px;
+    right: 10px;
     width: 30px;
-    font-size: 12px;
-    border-radius: 10px;
+    height: 30px;
+    font-size: 11px;
+    border-radius: 50%;
     color: #ffffff;
     cursor: pointer;
-    background: #01346f99;
     padding: 5px;
     text-align: center;
-    // border: 1px solid #eeeeee;
+    box-shadow: 2px -4px 4px 0px #FFFFFF40 inset;
+    background: linear-gradient(140deg, rgba(41, 234, 255, 0.9) 12.11%, rgba(28, 92, 255, 0.9) 50.51%, rgba(64, 140, 255, 0.9) 85.39%);
 
     &.isActive {
-      background: #005cc6cc;
+      background: linear-gradient(330deg, rgb(239 143 197 / 90%) 12.11%, rgb(1 101 251 / 90%) 85.39%) !important;
     }
 
     &:hover {
-      background: #005cc6cc;
+      // background: #005cc6cc;
     }
   }
 
@@ -1326,18 +1691,38 @@ export default {
 
   .yhfk-btn-mb {
     position: absolute;
-    // top: 230px;
-    bottom: 105px;
-    right: 20px;
-    width: 30px;
+    bottom: 50px;
+    left: 10px;
+    width: 20px;
+    height: 20px;
     font-size: 12px;
-    border-radius: 10px;
-    color: #ffffff;
+    border-radius: 5px;
     cursor: pointer;
-    background: #01346f99;
-    padding: 5px;
+    padding: 8px;
     text-align: center;
-    // border: 1px solid #eeeeee;
+    background: #ffffff;
+    display: flex;
+    box-shadow: 0px 2px 4px 0px #0000001A;
+
+    &:hover {
+      background: #005cc6cc;
+    }
+  }
+  
+  .tq-btn-mb {
+    position: absolute;
+    bottom: 100px;
+    left: 10px;
+    width: 20px;
+    height: 20px;
+    font-size: 12px;
+    border-radius: 5px;
+    cursor: pointer;
+    padding: 8px;
+    text-align: center;
+    background: #ffffff;
+    display: flex;
+    box-shadow: 0px 2px 4px 0px #0000001A;
 
     &:hover {
       background: #005cc6cc;
@@ -1370,10 +1755,10 @@ export default {
   }
   .zxq-btn-mb {
     position: absolute;
-    top: 130px;
-    right: 10px;
-    width: 60px;
-    height: 60px;
+    top: 246px;
+    right: 5px;
+    width: 50px;
+    height: 50px;
     border-radius: 10px;
     color: #ffffff;
     cursor: pointer;

src/views/KDYJS.vue

@@ -7,7 +7,7 @@
           <div :class="{ 'switchItem': true, active: !switchValue }" @click="changeModel">开店选址</div>
         </div>
       </div>
-      <div class="left">
+      <div :class="isMobile == true ? 'left left-mb' : 'left'">
         <div :class="content_css">
           <el-input v-model="searchHZSKeyWord" placeholder="请输入您想开店的地址" class="input-with-select">
             <!-- <template #prepend>
@@ -31,7 +31,7 @@
               <ul>
                 <li v-for="(item, index) in searchResultList" :key="index" :class="searchSelect == index ? 'active' : ''" @click="judgeHandle(item,index)">
                   <!-- <div class="name">{{ item.name }}</div> -->
-                  <div class="name" v-if="isMobile">{{ index + 1 }}.&nbsp; &nbsp;{{ item.address }}</div>
+                  <div class="name" v-if="isMobile"><img style="width: 20px;vertical-align: bottom;" :src="item.image"/>&nbsp;{{ item.address }}</div>
                   <el-tooltip :content="item.address" placement="right-start" :hide-after="5" v-if="!isMobile">
                     
                     <div class="name"><img style="width: 24px;vertical-align: bottom;" :src="item.image"/>&nbsp;{{ item.address }}</div>
@@ -112,8 +112,8 @@
               <el-scrollbar>
                 <ul v-if="nearShopResult.length > 0">
                   <li v-for="(item, index) in nearShopResult" :key="index">
-                    <div class="name" v-if="item.name == '周边市民投诉次数'"><span style="color: #0ab3f5;">{{ item.name }}：</span>{{ item.num }}次</div>
-                    <div class="name" v-else><span style="color: #0ab3f5;">{{ item.name }}：</span>{{ item.num }}家</div>
+                    <div class="name" v-if="item.name == '周边市民投诉次数'"><span style="color: #3165FF;">{{ item.name }}：</span>{{ item.num }}次</div>
+                    <div class="name" v-else><span style="color: #3165FF;">{{ item.name }}：</span>{{ item.num }}家</div>
                   </li>
                 </ul>
                 <div v-else>暂无周边信息</div>
@@ -127,14 +127,17 @@
       <el-drawer
             v-model="resultPanelShow_mb"
             :title= drawer_title
-            style="z-index: 9999;color: #fff;
+            style="z-index: 9999;
+            color: #000000;
             pointer-events: auto;
             width: 100%;
-            background: #021e3ecc;
+            background: #ffffff;
             padding: 10px 10px;
             box-sizing: border-box;
             position: fixed;
-            overflow: hidden;"
+            overflow: hidden;
+            border-top-left-radius: 10px;
+            border-top-right-radius: 10px;"
             size="50%"
             :direction="direction"
             :before-close="handleDrawerClose"
@@ -148,32 +151,36 @@
           >
             <el-tab-pane label="政策" name="1">
                 <div class="resultPanel1-mb">
-                    <div class="JZItem">
+                    <div :class="analysisResult['餐饮服务项目'] ? 'JZItem backGColor' : 'JZItem backYColor'" @click="zcIndex = 0; dialogVisible = true">
                       <!-- style="color:#00FF00" -->
-                       <div class="detail" v-if="analysisResult['餐饮服务项目']" style="color:#00AD34 ">{{ allowText.cy }}</div>
+                      <div class="checkZC"><img :src="analysisResult['餐饮服务项目'] ? bggImg : bgyImg" style="width: 15px;"></div>
+                      <div class="detail" v-if="analysisResult['餐饮服务项目']" style="color:#00AD34 ">{{ allowText.cy }}</div>
                       <div class="detail" v-if="!analysisResult['餐饮服务项目']" style="color: #FF6600">{{ JZText.cy }}</div>
-                      <div class="checkZC" @click="zcIndex = 0; dialogVisible = true">查看相关政策
-                      </div>
+                      <!-- <div class="checkZC" @click="zcIndex = 0; dialogVisible = true">查看相关政策</div> -->
                     </div>
-                    <div class="JZItem">
+                    <div :class="analysisResult['互联网上网服务营业场所'] ? 'JZItem backGColor' : 'JZItem backRColor'" @click="zcIndex = 1; dialogVisible = true">
+                      <div class="checkZC"><img :src="analysisResult['互联网上网服务营业场所'] ? bggImg : bgrImg" style="width: 15px;"></div>
                       <div class="detail" v-if="analysisResult['互联网上网服务营业场所']" style="color:#00AD34">{{ allowText.hlw }}</div>
                       <div class="detail" v-if="!analysisResult['互联网上网服务营业场所']" style="color:#E62011">{{ JZText.hlw }}</div>
-                      <div class="checkZC" @click="zcIndex = 1; dialogVisible = true">查看相关政策</div>
+                      <!-- <div class="checkZC" @click="zcIndex = 1; dialogVisible = true">查看相关政策</div> -->
                     </div>
-                    <div class="JZItem">
+                    <div :class="analysisResult['娱乐场所'] ? 'JZItem backGColor' : 'JZItem backRColor'" @click="zcIndex = 2; dialogVisible = true">
+                      <div class="checkZC"><img :src="analysisResult['娱乐场所'] ? bggImg : bgrImg" style="width: 15px;"></div>
                       <div class="detail" v-if="analysisResult['娱乐场所']" style="color:#00AD34">{{ allowText.ylcs }}</div>
                       <div class="detail" v-if="!analysisResult['娱乐场所']" style="color:#E62011">{{ JZText.ylcs }}</div>
-                      <div class="checkZC" @click="zcIndex = 2; dialogVisible = true">查看相关政策</div>
+                      <!-- <div class="checkZC" @click="zcIndex = 2; dialogVisible = true">查看相关政策</div> -->
                     </div>
-                    <div class="JZItem">
+                    <div :class="analysisResult['烟草制品零售点'] ? 'JZItem backGColor' : 'JZItem backRColor'" @click="zcIndex = 3; dialogVisible = true">
+                      <div class="checkZC"><img :src="analysisResult['烟草制品零售点'] ? bggImg : bgrImg" style="width: 15px;"></div>
                       <div class="detail" v-show="analysisResult['烟草制品零售点']" style="color:#00AD34">{{ allowText.yc }}</div>
                       <div class="detail" v-show="!analysisResult['烟草制品零售点']" style="color:#E62011">{{ JZText.yc }}</div>
-                      <div class="checkZC" @click="zcIndex = 3; dialogVisible = true">查看相关政策</div>
+                      <!-- <div class="checkZC" @click="zcIndex = 3; dialogVisible = true">查看相关政策</div> -->
                     </div>
-                    <div class="JZItem">
+                    <div :class="analysisResult['噪声污染'] ? 'JZItem backGColor' : 'JZItem backRColor'" @click="zcIndex = 4; dialogVisible = true">
+                      <div class="checkZC"><img :src="analysisResult['噪声污染'] ? bggImg : bgrImg" style="width: 15px;"></div>
                       <div class="detail" v-if="analysisResult['噪声污染']" style="color:#00AD34">{{ allowText.zy }}</div>
                       <div class="detail" v-if="!analysisResult['噪声污染']" style="color:#E62011">{{ JZText.zy }}</div>
-                      <div class="checkZC" @click="zcIndex = 4; dialogVisible = true">查看相关政策</div>
+                      <!-- <div class="checkZC" @click="zcIndex = 4; dialogVisible = true">查看相关政策</div> -->
                     </div>
                   </div>
             </el-tab-pane>
@@ -182,8 +189,8 @@
                   <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 == '周边市民投诉次数'"><span style="color: #0ab3f5;">{{ item.name }}：</span>{{ item.num }}次</div>
-                          <div class="name" v-else><span style="color: #0ab3f5;">{{ item.name }}：</span>{{ item.num }}家</div>
+                          <div class="name" v-if="item.name == '周边市民投诉次数'"><span style="color: #3165FF;">{{ item.name }}：</span>{{ item.num }}次</div>
+                          <div class="name" v-else><span style="color: #3165FF;">{{ item.name }}：</span>{{ item.num }}家</div>
                         </li>
                       </ul>
                       <div v-else>暂无周边信息</div>
@@ -201,6 +208,9 @@
         <div class="kdyjs-body">
           {{ zcText[zcIndex] }}
         </div>
+        <div style="padding-bottom: 20px;text-align: center;">
+          <el-button type="primary" :round="isMobile == true ? true : false" :style="isMobile == true ? 'width: 90%' : ''" @click="handleClose">我已知悉</el-button>
+        </div>
       </div>
     </div>
   </div>
@@ -776,12 +786,12 @@ export default {
 <style lang="less" scoped>
 
 /deep/ .el-drawer__header{
-  color: #fff;
+  color: #000000;
   margin: 0;
   padding: 0;
 }
 /deep/ .el-tabs__item{
-  color: #ffffff;
+  color: #000000;
 }
 /deep/ .el-tabs__content{
     flex-grow: 1;
@@ -855,7 +865,9 @@ export default {
         }
       }
     }
-
+    .left-mb {
+      margin-top: 10px !important;
+    }
     .left {
       pointer-events: none;
       position: absolute;
@@ -1013,28 +1025,59 @@ export default {
           padding-right: 0px;
           box-sizing: border-box;
           overflow-y: auto;
+
+          .backRColor{
+            background-image: linear-gradient(92deg, #FDEDEC, transparent);
+            // border-left: 1px solid #E62011;
+            border-radius: 50px;
+          }
+          .backGColor{
+            background-image: linear-gradient(92deg, #EBF9EF, transparent);
+            // border-left: 1px solid #00AD34;
+            border-radius: 50px;
+          }
+          .backYColor{
+            background-image: linear-gradient(92deg, #FFF2ED, transparent);
+            // border-left: 1px solid #FF6600;
+            border-radius: 50px;
+          }
           .JZItem {
             width: 100%;
-            margin-bottom: 15px;
+            margin-bottom: 10px;
             cursor: pointer;
             position: relative;
+            padding-left: 10px;
             padding-right: 10px;
             box-sizing: border-box;
+            display: flex;
+            align-items: center;
 
             .detail {
-              width: calc(100% - 110px);
-              min-height: 36px;
+              // width: calc(100% - 110px);
+              // min-height: 36px;
               // text-shadow: 0.5px 0.5px 2px #ffffff;
+              font-size: 14px;
+              vertical-align: middle;
+              padding: 10px 0px 10px 30px;
             }
 
             .checkZC {
+              // position: absolute;
+              // top: 0px;
+              // right: 10px;
+              // border: 1px solid #ffffff;
+              // padding: 0px 5px;
+              // border-radius: 5px;
+              // font-size: 16px;
+
               position: absolute;
-              top: 0px;
-              right: 10px;
-              border: 1px solid #ffffff;
-              padding: 0px 5px;
+              left: 5px;
               border-radius: 5px;
               font-size: 16px;
+              vertical-align: middle;
+              padding: 10px;
+              display: flex;
+              justify-items: center;
 
               &:hover {
                 background: #01346f99;
@@ -1067,13 +1110,15 @@ export default {
 
               li {
                 list-style: none;
-                cursor: pointer;
-                border-bottom: 1px solid #ebebeb8f;
-                padding-bottom: 10px;
+                // cursor: pointer;
+                /* border-bottom: 1px solid #ebebeb8f; */
+                padding: 10px 20px;
                 margin-bottom: 10px;
+                border-radius: 50px;
+                background: linear-gradient(90deg, #E6E6E6, transparent);
 
                 .name {
-                  font-size: 16px;
+                  font-size: 14px;
                 }
               }
             }
@@ -1086,7 +1131,7 @@ export default {
         position: relative;
         padding-left: 10px;
         padding-right: 60px;
-        padding-top: 20px;
+        padding-top: 0px;
         box-sizing: border-box;
         color: #ffffff;
 
@@ -1273,7 +1318,7 @@ export default {
     position: absolute;
     top: 0px;
     left: 0px;
-    z-index: 2006;
+    z-index: 9999;
     background: #00000080;
     user-select: none;
 
@@ -1320,7 +1365,7 @@ export default {
       .kdyjs-body {
         width: 100%;
         height: calc(100% - 60px);
-        padding: 10px 26px 36px 26px;
+        padding: 10px 20px;
         box-sizing: border-box;
         // color: #ffffff;
         color: #000000;
@@ -1329,11 +1374,19 @@ export default {
     }
 
     .kdyjs-dialog-mb {
+      // position: relative;
+      // top: calc(50% - 222px);
+      // height: 300px;
+      // background: url(~@/assets/images/u133.png) no-repeat center center/100% 100%;
+      // overflow: hidden;
+
+      background: #ffffff;
       position: relative;
       top: calc(50% - 222px);
-      height: 300px;
-      background: url(~@/assets/images/u133.png) no-repeat center center/100% 100%;
       overflow: hidden;
+      text-align: center;
+      margin: 20px;
+      border-radius: 10px;
 
       .kdyjs-header {
         width: 100%;
@@ -1353,7 +1406,7 @@ export default {
           height: 40px;
           line-height: 40px;
           text-align: center;
-          color: #00dbff;
+          color: #353535;
           font-weight: bold;
           font-size: 20px;
 
@@ -1364,10 +1417,11 @@ export default {
       .kdyjs-body {
         width: 100%;
         height: calc(100% - 60px);
-        padding: 10px 26px 36px 26px;
+        padding: 10px 20px;
         box-sizing: border-box;
-        color: #ffffff;
+        color: #000000;
         text-indent: 20px;
+        text-align: left;
       }
     }
   }