From 208f09ade28eeb3a2111f5f198c2e1ef84ec8069 Mon Sep 17 00:00:00 2001 From: 584911253@qq.com <584911253@qq.com> Date: 星期三, 22 三月 2023 19:37:38 +0800 Subject: [PATCH] 页面修改 --- src/components/mapsdk.vue | 115 ++++++++++++++++++++++++++++++++++++++++----------------- 1 files changed, 80 insertions(+), 35 deletions(-) diff --git a/src/components/mapsdk.vue b/src/components/mapsdk.vue index ebf0113..6dbed95 100644 --- a/src/components/mapsdk.vue +++ b/src/components/mapsdk.vue @@ -297,7 +297,7 @@ </div> </el-card> </div> - <div style="display: flex"> +<!-- <div style="display: flex;">--> <div class="changeTerrain" @click="changeTerrainLayer" @@ -308,9 +308,10 @@ class="mapTerrain" ></div> </div> +<!-- class="center CenDiv"--> <div @click="changeMenulayer" - class="center CenDiv" + class="changeLayer" > <div title="搴曞浘鍒囨崲" @@ -329,7 +330,7 @@ :class="show2DMap ? 'mapTypeTwo' : 'mapTypeThree'" ></div> </div> - </div> +<!-- </div>--> <!-- 鍧″害鍒嗘瀽寮圭獥--> <div class="lengend" @@ -1812,65 +1813,109 @@ .mapBaseMap { width: 100%; height: 100%; - margin-left: 10px; - background-image: url("../assets/img/synthesis/搴曞浘.png"); + //margin-left: 10px; + background-image: url("../assets/img/basemap.png"); + //background-image: url("../assets/img/synthesis/搴曞浘.png"); background-repeat: no-repeat; background-size: contain; } -.changeMapType { - position: absolute; - bottom: 1%; - left: calc(1% + 150px); - height: 40px; - width: 60px; - z-index: 101; - display: flex; - justify-content: center; - align-items: center; - // box-shadow: 3px 3px 6px #666; - //border: 1px solid rgba(204, 204, 204, 0.76); - border-radius: 5px; - - cursor: pointer; -} +//.changeMapType { +// position: absolute; +// bottom: 1%; +// left: calc(1% + 150px); +// height: 40px; +// width: 60px; +// z-index: 101; +// display: flex; +// justify-content: center; +// align-items: center; +// // box-shadow: 3px 3px 6px #666; +// //border: 1px solid rgba(204, 204, 204, 0.76); +// border-radius: 5px; +// +// cursor: pointer; +//} .changeTerrain { position: absolute; - bottom: 1%; - left: 1%; - height: 40px; - width: 60px; + bottom: 84px; + right: 46px; + height: 30px; + width: 30px; z-index: 101; display: flex; justify-content: center; align-items: center; - - border-radius: 5px; cursor: pointer; + border: 1px solid rgba(255,255,255,.5); } +.changeLayer{ + position: absolute; + bottom: 116px; + right: 46px; + height: 30px; + width: 30px; + z-index: 101; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + border: 1px solid rgba(255,255,255,.5); +} +.changeMapType { + position: absolute; + bottom: 52px; + right: 46px; + height: 30px; + width: 30px; + z-index: 101; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + border: 1px solid rgba(255,255,255,.5); +} +//.changeTerrain { +// position: absolute; +// bottom: 1%; +// left: 1%; +// height: 40px; +// width: 60px; +// z-index: 101; +// display: flex; +// justify-content: center; +// align-items: center; +// +// border-radius: 5px; +// cursor: pointer; +//} .mapTypeTwo { width: 100%; height: 100%; margin-left: 10px; - background-image: url("../assets/img/synthesis/3D.png"); + background-image: url("../assets/img/3D.png"); + //background-image: url("../assets/img/synthesis/3D.png"); background-repeat: no-repeat; - background-size: contain; + + //background-size: contain; } .mapTerrain { width: 100%; height: 100%; - margin-left: 10px; - background-image: url("../assets/img/synthesis/鍦板舰.png"); + //margin-left: 10px; + //background-image: url("../assets/img/synthesis/鍦板舰.png"); + //background-image: url("../assets/img/synthesis/鍦板舰.png"); + background-image: url("../assets/img/terrain.png"); background-repeat: no-repeat; - background-size: contain; + //background-size: contain; } .mapTypeThree { width: 100%; height: 100%; - margin-left: 10px; - background-image: url("../assets/img/synthesis/2D 鎷疯礉 2.png"); + //margin-left: 10px; + background-image: url("../assets/img/2D.png"); background-repeat: no-repeat; - background-size: contain; + //background-size: contain; } .pdfClass { -- Gitblit v1.9.3