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