优化界面展示

src/assets/scss/modules/visual/fiveLayerMap.scss

@@ -56,7 +56,7 @@
     .div_tips{
       box-sizing: border-box;
       width: 100%;
-      height: 302px;
+      height: 300px;
       color: #fff;
 
       .div_coverage{
@@ -89,7 +89,7 @@
       .div_category {
         @include scrollBar;
         box-sizing: border-box;
-        height:178px;
+        height:176px;
         padding:0 10px 0;  
         overflow-y: auto;
         overflow-x: hidden;
@@ -162,11 +162,12 @@
       margin-top:10px;
       height: calc(810px - 302px - 10px);
       color: #fff;
+      overflow-x: hidden;
 
       .div_search_list {
         margin: 6px auto;
         text-align: center;
-        width: 590px;
+        width: 570px;
         height: 48px;
         background-color: #011168;
         border-radius: 4px;
@@ -191,14 +192,14 @@
         .btn {
           text-align: center;
           flex: 0 0 113px;
-          height: 48px;
+          height: 52px;
           background: linear-gradient(90deg, #1A5AFD, #26C4FF);
           border-radius: 0px 4px 4px 0px;
           font-size: 20px;
           font-family: PingFang SC;
           font-weight: 400;
           color: #ffffff;
-          line-height: 48px;
+          line-height: 52px;
         }
         .btn:hover {
           cursor: pointer;
@@ -216,6 +217,7 @@
       .m-pagination {
         // position: absolute;
         box-sizing: border-box;
+        margin-top: 2px;
         width: 100%;
         height: 40px;
         display: flex;

src/views/modules/visual/communityGovern/fivelayers/mapIndex.vue

@@ -26,79 +26,81 @@
       </div>
 
       <div class="div_data">
+        <div class="div_tips">
+          <cpt-card>
+            <div class="div_coverage">
+
+              <div class="coverage_item"
+                  @click="handleClickCoverage(index)"
+                  v-for="(item,index) in coverageTypesList"
+                  :key="index">
+                <img :src="item.select?selImg:noSelImg" />
+                <span>{{item.label}}</span>
+              </div>
+            </div>
+            <div class="div_category">
+              <div v-for="(item,index) in categoryListshow"
+                    :key="index"
+                    class="category_item">
 
-        <cpt-card class="div_tips">
+                <div v-for="(colItem,colIndex) in item"
+                      :key="colIndex"
+                      class="list_item"
+                      @click="handleClickCategory(index,colIndex)">
+                  <img :src="colItem.dataIcon"
+                        alt />
+                  <div :class="['item_content',colItem.sel?'item_content_sel':'']">{{colItem.categoryName}}
 
-          <div class="div_coverage">
-
-            <div class="coverage_item"
-                 @click="handleClickCoverage(index)"
-                 v-for="(item,index) in coverageTypesList"
-                 :key="index">
-              <img :src="item.select?selImg:noSelImg" />
-              <span>{{item.label}}</span>
-            </div>
-          </div>
-          <div class="div_category">
-            <div v-for="(item,index) in categoryListshow"
-                  :key="index"
-                  class="category_item">
-
-              <div v-for="(colItem,colIndex) in item"
-                    :key="colIndex"
-                    class="list_item"
-                    @click="handleClickCategory(index,colIndex)">
-                <img :src="colItem.dataIcon"
-                      alt />
-                <div :class="['item_content',colItem.sel?'item_content_sel':'']">{{colItem.categoryName}}
+                  </div>
 
                 </div>
 
               </div>
-
             </div>
-          </div>
-        </cpt-card>
-
-        <cpt-card class="div_info">
-          <div class="div_search_list">
-            <el-input size="mini"
-                      WarningColor='warning'
-                      placeholder="请输入搜索内容"
-                      v-model="search">
-              <i slot="prefix"
-                 class="icon">
-                <img src="../../../../../assets/img/modules/visual/sousuo.png"
-                     alt />
-              </i>
-            </el-input>
-
-            <div class="btn"
-                 @click="handleSearch">搜索</div>
+          </cpt-card>
+        </div>
 
-          </div>
-          <div class="m-tb">
+        <div class="div_info">
+          <cpt-card>
+            <div class="div_search_list">
+              <el-input size="mini"
+                        WarningColor='warning'
+                        placeholder="请输入搜索内容"
+                        v-model="search">
+                <i slot="prefix"
+                  class="icon">
+                  <img src="../../../../../assets/img/modules/visual/sousuo.png"
+                      alt />
+                </i>
+              </el-input>
 
-            <div class="tb">
-              <cpt-tb :col-list="demand.colList"
-                      :loading="demand.loading"
-                      :header="demand.header"
-                      :list="demand.list"
-                      @handleClickRow="handleClickRow"></cpt-tb>
+              <div class="btn"
+                  @click="handleSearch">搜索</div>
 
             </div>
-            <div class="m-pagination">
-              <el-pagination :current-page="demand.pageNo"
-                             :page-size="demand.pageSize"
-                             :total="demand.total"
-                             background
-                             layout="prev, pager, next,total"
-                             @current-change="handlePageNoChange_demand">
-              </el-pagination>
+            <div class="m-tb">
+
+              <div class="tb">
+                <cpt-tb :col-list="demand.colList"
+                        :loading="demand.loading"
+                        :header="demand.header"
+                        :list="demand.list"
+                        @handleClickRow="handleClickRow"></cpt-tb>
+
+              </div>
+              <div class="m-pagination">
+                <el-pagination :current-page="demand.pageNo"
+                              :page-size="demand.pageSize"
+                              :total="demand.total"
+                              background
+                              layout="prev, pager, next,total"
+                              @current-change="handlePageNoChange_demand">
+                </el-pagination>
+              </div>
             </div>
-          </div>
 
-        </cpt-card>
+          </cpt-card>
+        </div>
 
       </div>
     </div>