Pārlūkot izejas kodu

适配移动端样式调整

mork 3 nedēļas atpakaļ
vecāks
revīzija
0a16efc304
4 mainītis faili ar 73 papildinājumiem un 24 dzēšanām
  1. 3 1
      public/index.html
  2. 5 2
      src/components/Map.vue
  3. 45 10
      src/views/HomeView.vue
  4. 20 11
      src/views/KDYJS.vue

+ 3 - 1
public/index.html

@@ -3,7 +3,9 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
 

+ 5 - 2
src/components/Map.vue

@@ -148,9 +148,12 @@ export default {
         navigationHelpButton: false, //是否显示右上角的帮助按钮
         scene3DOnly: true, //如果设置为true,则所有几何图形以3D模式绘制以节约GPU资源
         infoBox: false, //是否显示点击要素之后显示的信息
-        shouldAnimate: false //是否自动播放
+        shouldAnimate: false, //是否自动播放
       });
-      this.mapLoaded = true;
+      // 移动端禁止旋转
+      viewer.scene.screenSpaceCameraController.tiltEventTypes = [];
+      // 禁止地图拖动
+      // viewer.scene.screenSpaceCameraController.enableRotate=false;
       this.addBaseMap();
       this.changeBaseMap({ type: "xht" });
       this.setDefaultMapView(viewer, "setView");

+ 45 - 10
src/views/HomeView.vue

@@ -41,7 +41,7 @@
     <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="heatmapPanel" v-show="heatmapPanelShow">
+      <div :class="isMobile == true ? 'heatmapPanel-mb':'heatmapPanel'" v-show="heatmapPanelShow">
         <el-scrollbar>
           <ul>
             <li v-for="(item, index) in heatmapList" :key="index">
@@ -113,13 +113,13 @@
       footer-class="yhfkInfoDialogfooter" v-model="yhfkInfoDialogShow" :close="closeKZDP" :close-on-click-modal="false"
       :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-form-item label="用户姓名" prop="name" :style="isMobile == true ? 'display: grid !important;':''">
           <el-input v-model="yhfkForm.name" />
         </el-form-item>
-        <el-form-item label="联系方式" prop="tele">
+        <el-form-item label="联系方式" prop="tele" :style="isMobile == true ? 'display: grid !important;':''">
           <el-input v-model="yhfkForm.tele" />
         </el-form-item>
-        <el-form-item label="问题描述" prop="desc">
+        <el-form-item label="问题描述" prop="desc" :style="isMobile == true ? 'display: grid !important;':''">
           <el-input v-model="yhfkForm.desc" type="textarea" />
         </el-form-item>
       </el-form>
@@ -1064,8 +1064,40 @@ export default {
 
     .heatmapPanel {
       position: absolute;
-      right: 0;
-      bottom: 50px;
+      right: 110px;
+      bottom: 0;
+      background: #01346f99;
+      border-radius: 5px;
+      padding-left: 10px;
+      height: fit-content;
+      overflow: hidden;
+      overflow-y: auto;
+      height: 280px;
+
+      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;
+            }
+          }
+        }
+      }
+    }
+    .heatmapPanel-mb {
+      position: absolute;
+      right: 50px;
+      bottom: 0;
       background: #01346f99;
       border-radius: 5px;
       padding-left: 10px;
@@ -1156,7 +1188,8 @@ export default {
 
    .yjdp-btn-mb {
     position: absolute;
-    top: 130px;
+    // top: 130px;
+    bottom: 340px;
     right: 20px;
     width: 30px;
     font-size: 12px;
@@ -1203,7 +1236,8 @@ export default {
 
   .kzdp-btn-mb {
     position: absolute;
-    top: 180px;
+    // top: 180px;
+    bottom: 280px;
     right: 20px;
     width: 30px;
     font-size: 12px;
@@ -1246,7 +1280,8 @@ export default {
 
   .yhfk-btn-mb {
     position: absolute;
-    top: 230px;
+    // top: 230px;
+    bottom: 105px;
     right: 20px;
     width: 30px;
     font-size: 12px;
@@ -1288,7 +1323,7 @@ export default {
   }
   .zxq-btn-mb {
     position: absolute;
-    top: 280px;
+    top: 130px;
     right: 10px;
     width: 60px;
     height: 60px;

+ 20 - 11
src/views/KDYJS.vue

@@ -61,8 +61,8 @@
               <!-- #FFB400 -->
               <div class="JZItem">
                 <!-- style="color:#00FF00" -->
-                <div class="detail" v-if="analysisResult['餐饮服务项目']"  style="color:#00FF00">{{ allowText.cy }}</div>
-                <div class="detail" v-if="!analysisResult['餐饮服务项目']" style="color:#FFB400">{{ JZText.cy }}</div>
+                 <div class="detail" v-if="analysisResult['餐饮服务项目']" style="color:#00FF00 ">{{ allowText.cy }}</div>
+                <div class="detail" v-if="!analysisResult['餐饮服务项目']" style="color: #FFB400">{{ JZText.cy }}</div>
                 <div class="checkZC" @click="zcIndex = 0; dialogVisible = true">查看相关政策
                 </div>
               </div>
@@ -112,12 +112,12 @@
             style="z-index: 9999;color: #fff;
             pointer-events: auto;
             width: 100%;
-            height: 400px;
-            background: #01346f99;
+            background: #021e3ecc;
             padding: 10px 10px;
             box-sizing: border-box;
             position: fixed;
             overflow: hidden;"
+            size="50%"
             :direction="direction"
             :before-close="handleDrawerClose"
             :modal="false"
@@ -132,7 +132,8 @@
                 <div class="resultPanel1-mb">
                     <div class="JZItem">
                       <!-- style="color:#00FF00" -->
-                      <div class="detail" style="color:#FFB400">{{ JZText.cy }}</div>
+                       <div class="detail" v-if="analysisResult['餐饮服务项目']" style="color:#00FF00 ">{{ allowText.cy }}</div>
+                      <div class="detail" v-if="!analysisResult['餐饮服务项目']" style="color: #FFB400">{{ JZText.cy }}</div>
                       <div class="checkZC" @click="zcIndex = 0; dialogVisible = true">查看相关政策
                       </div>
                     </div>
@@ -615,7 +616,9 @@ export default {
         // that.analysisResult["娱乐场所"]
         // that.analysisResult["烟草制品零售点"]
         // that.analysisResult["噪声污染"]
+        console.log('[ rrr ] >', interfaceResult)
         if (interfaceResult.content.foundPlace != undefined) {
+          
           let arr = interfaceResult.content.foundPlace.banned.split(",").map(num => Number(num))
           // 餐饮
           if (arr.indexOf(0) > -1) that.analysisResult["餐饮服务项目"] = false;
@@ -756,7 +759,7 @@ export default {
     flex-grow: 1;
     overflow: auto;
     position: relative;
-    height: 160px;  
+    height: 240px;  
 }
 /deep/ .el-drawer__body{
   flex: 1;
@@ -768,6 +771,12 @@ export default {
   font-weight: bold;
 }
 
+ @media screen and (max-width: 800px) {
+      input,textarea,.ivu-select{
+          font-size: 16px !important;
+      }
+  }
+
 .kdyjs {
   position: absolute;
   top: 0px;
@@ -1005,7 +1014,7 @@ export default {
           width: 100%;
           padding: 5px;
           box-sizing: border-box;
-          overflow-y: auto;
+          // overflow-y: auto;
 
           .title {
             height: 24px;
@@ -1015,9 +1024,9 @@ export default {
           }
 
           .resultPanel2content {
-            height: 200px;
+            // height: 200px;
             overflow: hidden;
-            overflow-y: auto;
+            // overflow-y: auto;
 
             ul {
               margin: 0 0;
@@ -1026,7 +1035,7 @@ export default {
               li {
                 list-style: none;
                 cursor: pointer;
-                border-bottom: 1px solid #ebebeb2e;
+                border-bottom: 1px solid #ebebeb8f;
                 padding-bottom: 10px;
                 margin-bottom: 10px;
 
@@ -1179,7 +1188,7 @@ export default {
     position: absolute;
     top: 0px;
     left: 0px;
-    z-index: 6;
+    z-index: 2006;
     background: #00000080;
     user-select: none;