From 626003e9beb59cf711f59f3b48087300070f121e Mon Sep 17 00:00:00 2001
From: lixuliang <lixuliang_hd@126.com>
Date: 星期五, 15 三月 2024 09:49:31 +0800
Subject: [PATCH] 优化

---
 src/components/sideMenu/layerMenu/layerPanel2.vue |  142 ++++++++++++++++++++++++++++++++++-------------
 1 files changed, 102 insertions(+), 40 deletions(-)

diff --git a/src/components/sideMenu/layerMenu/layerPanel2.vue b/src/components/sideMenu/layerMenu/layerPanel2.vue
index db3a36f..510946f 100644
--- a/src/components/sideMenu/layerMenu/layerPanel2.vue
+++ b/src/components/sideMenu/layerMenu/layerPanel2.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="layerPanel">
     <div class="mapMode">
-      <div class="title" style="margin-top: 0px">鍦板浘妯″紡</div>
+      <div class="title">鍦板浘妯″紡</div>
       <div class="container">
         <div
           class="layerItem"
@@ -33,8 +33,8 @@
         </div>
       </div>
     </div>
-    <div class="areaType" style="margin-top: 10px">
-      <div class="title">
+    <div class="areaType">
+      <div class="title ZTtitle">
         涓撻搴旂敤
         <!-- 涓嶆樉绀烘洿澶氬浘灞� -->
         <span class="more" v-show="false" @click.stop="showLayerTree"
@@ -53,9 +53,6 @@
             ZTValue.name
           }}</span>
         </div>
-      </div>
-      <div class="title2"></div>
-      <div class="container">
         <div
           class="layerItem"
           v-for="(funcValue, funcIndex) in FuncList"
@@ -70,7 +67,24 @@
             funcValue.name
           }}</span>
         </div>
+        <!-- <div style="height: 0" class="layerItem" v-for="n in 3" :key="n"></div> -->
       </div>
+      <!-- <div class="container">
+        <div
+          class="layerItem"
+          v-for="(funcValue, funcIndex) in FuncList"
+          :key="funcValue.id"
+          @click.stop="handleFuncClick(funcIndex)"
+        >
+          <img
+            :src="funcValue.src"
+            :class="{ active: curFuncIndex == funcIndex }"
+          />
+          <span :class="{ spanActive: curFuncIndex == funcIndex }">{{
+            funcValue.name
+          }}</span>
+        </div>
+      </div> -->
     </div>
 
     <!-- <div class="yjsxt">
@@ -195,7 +209,7 @@
       ],
       zhuantiList: ZTTitem,
       //curMapModelIndex: 1,
-      curEMapModelIndex: 1,
+      curEMapModelIndex: 0,
       curSMapModelIndex: -1,
       curAreaTypeIndex: -1,
       curYjIndex: -1,
@@ -262,11 +276,11 @@
       switch (result.name) {
         case "浜岀淮鍦板浘":
           loadGeoMap();
-          loadBaseMap();
-          addAnnotationLayer();
+          // loadBaseMap();
+          // addAnnotationLayer();
           addHxLayer();
           addYzLayer();
-          window.mapapi.getView().setZoom(14);
+          // window.mapapi.getView().setZoom(14);
           break;
         case "褰卞儚鍦板浘":
           addImageLayer();
@@ -429,7 +443,7 @@
                 url: "https://skyzt.bda.gov.cn/gisserver/wmsserver/chengshiguihua_dikuaibianhao",
                 params: {
                   VERSION: "1.1.1",
-                  SRS: "EPSG:4326",
+                  SRS: "EPSG:3857",
                   FORMAT: "image/png",
                   TILED: true,
                   LAYERS: "",
@@ -532,65 +546,113 @@
 <style scoped>
 .layerPanel {
   width: 100%;
+  /* height: 396px; */
   position: absolute;
   bottom: 0px;
   align-items: center;
-  padding: 0.1rem;
-  background: white;
-  z-index: 1000;
-  padding-left: 0.25rem;
+  /* padding: 0.1rem; */
+  background: #ffffff;
+  /* z-index: 1000; */
+  /* padding-left: 0.25rem; */
+  border-radius: 15px 15px 0px 0px;
+}
+.mapMode {
+  width: 100%;
+  margin-top: 24px;
+  padding-left: 28px;
 }
 
+@font-face {
+  font-family: "YouSheBiaoTiHei";
+  src: url("../../../../static/YouSheBiaoTiHei.ttf");
+}
 .title {
-  height: 25px;
-  font-size: 16px;
-  font-family: Source Han Sans SC;
-  font-weight: 700;
-  color: #181818;
-  line-height: 25px;
-  margin: 10px 0px 10px 0;
+  width: 72px;
+  height: 14px;
+  font-family: "YouSheBiaoTiHei";
+  font-weight: 400;
+  font-size: 19px;
+  color: #2e2e2e;
+  line-height: 15px;
+  margin-bottom: 18px;
 }
-
-.title2 {
-  height: 15px;
-}
-
-.container {
+.mapMode .container {
   display: flex;
   align-items: center;
   text-align: center;
+  flex-wrap: wrap;
 }
 
 .layerItem {
   /* font-size: 14px; */
-  font-family: Source Han Sans SC;
+  font-family: "寰蒋闆呴粦";
   font-weight: 400;
-  margin-right: 30px;
   cursor: pointer;
+  text-align: center;
 }
-
-.active {
-  color: #4187ff;
-  border: 2px solid #4187ff;
+.mapMode .layerItem {
+  width: 0.8rem;
+  margin-right: 24px;
+}
+.mapMode img {
+  display: block;
+  width: 100%;
+  border-radius: 11px;
+  border: 1px dashed #127dff;
+  margin-bottom: 11px;
+}
+span {
+  font-family: "寰蒋闆呴粦";
+  font-size: 0.12rem;
+  color: #6e6969;
+  line-height: 12px;
+}
+.mapMode .active,
+.areaType .active {
+  color: #127dff;
+  border: 2px solid #127dff;
   border-radius: 10px;
 }
 
 .spanActive {
-  color: #4187ff;
+  color: #127dff;
+}
+.areaType {
+  width: 100%;
+  margin-top: 30px;
 }
 
-img {
+.areaType .ZTtitle {
+  margin-left: 28px;
+  margin-bottom: 3px;
+}
+.areaType .container {
+  margin-top: 18px;
+  padding: 0 4%;
+  display: grid;
+  justify-items: center;
+  grid-template-columns: repeat(4, 1fr);
+  overflow: hidden;
+}
+.areaType .layerItem {
+  margin-bottom: 15px;
+}
+
+.areaType img {
+  margin: 0 auto;
+  /* background-color: green; */
   display: block;
-  width: 60px;
-  height: 40px;
-  margin-bottom: 5px;
+  width: 0.5rem;
+  border-radius: 11px;
+  box-shadow: 0 0 5px 5px rgb(196 222 236 / 30%);
+  margin-bottom: 11px;
 }
 
 .more {
   float: right;
   margin-right: 20px;
   font-size: 0.12rem;
-  color: #4187ff;
+  color: #127dff;
   line-height: 25px;
   font-weight: 500;
   font-family: unset;

--
Gitblit v1.9.3