From 065669d31914a2f65c48d351417f48e49bd79c0c Mon Sep 17 00:00:00 2001 From: lixuliang <lixuliang_hd@126.com> Date: 星期三, 13 三月 2024 11:30:46 +0800 Subject: [PATCH] Merge branch 'master' of http://103.135.160.14:9034/r/PM20221203225_MobileWeb --- src/components/rightMenu/bottom2.vue | 64 +++++++++++++++++++++++--------- 1 files changed, 46 insertions(+), 18 deletions(-) diff --git a/src/components/rightMenu/bottom2.vue b/src/components/rightMenu/bottom2.vue index 2517718..56874b4 100644 --- a/src/components/rightMenu/bottom2.vue +++ b/src/components/rightMenu/bottom2.vue @@ -1,11 +1,16 @@ <template> <div class="bottom" id="bottom" :style="customStyle" v-if="state1.show"> + <!-- <div class="mapTool"> + <div class="tool-rotate" @click="PointingNorth" title="鎸囧寳"> + <img src="@/assets/img/collection/compass.png" /> + </div> + </div> --> <div class="mapTool"> <div class="tool-rotate" @click="flyBack" title="澶嶄綅"> <img src="@/assets/img/collection/recover.png" /> </div> </div> - <div class="mapTool" v-show="test.fwval"> + <div class="mapTool2"> <div class="tool-rotate" @click="zoomIn" title="鏀惧ぇ"> <img src="@/assets/img/collection/add.png" /> </div> @@ -18,26 +23,45 @@ </template> <style scoped> + .mapTool { - border-radius: 10px; + width: 0.42rem; + /* border-radius: 10px; */ + /* background: #ffffff; */ + /* margin-bottom: 8px; */ +} + +.mapTool .tool-rotate img { + width: 100%; +} + +.mapTool2 { + width: 0.32rem; + margin: auto; background: #ffffff; - margin-bottom: 8px; + box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.21); + border-radius: 10px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} +.mapTool2 .tool-rotate{ + height: 0.33rem; + line-height: 0.33rem; +} + +.mapTool2 .tool-rotate img { + width: 0.17rem; } .border { - border: 0.5px solid #efecec; -} - -.tool-rotate { - padding: 8px; -} - -.tool-rotate img { - width: 20px; - height: 20px; + width: 100%; + height: 1px; + border: 0.005rem solid #f3f3f3; } </style> - + <script> import Bus from "../../js/bus.js"; import store from "@/utils/store2"; @@ -45,7 +69,7 @@ props: ["test"], data() { return { - state1:store.mapTools, + state1: store.mapTools, state: store.layerPanel, customStyle: { position: "absolute", @@ -54,14 +78,14 @@ }, }; }, - mounted() {}, + mounted() { }, watch: { "state.show": { handler(newVal) { if (newVal) { this.customStyle = { position: "absolute", - top: "2rem", + top: "calc(0.75rem + 51px)", right: "0.1rem", }; } else { @@ -101,12 +125,16 @@ flyBack() { window.mapapi.getView().animate({ // 鍙缃渶瑕佺殑灞炴�у嵆鍙� - center: [116.52217697339846, 39.75979421847914], // 涓績鐐� + center: ol.proj.fromLonLat([116.52217697339846, 39.75979421847914]), // 涓績鐐� zoom: 12, // 缂╂斁绾у埆 rotation: undefined, // 缂╂斁瀹屾垚view瑙嗗浘鏃嬭浆寮у害 duration: 1000, // 缂╂斁鎸佺画鏃堕棿锛岄粯璁や笉闇�瑕佽缃� }); }, + PointingNorth() { + alert("鎸囧寳閽堝紑鍙戜腑"); + // console.log("鎸囧寳閽堝紑鍙戜腑") + }, }, }; </script> \ No newline at end of file -- Gitblit v1.9.3