From ec065c84d7ee0b7e05efe9b991b528f6a5feb5a0 Mon Sep 17 00:00:00 2001 From: lixuliang <lixuliang_hd@126.com> Date: 星期三, 06 三月 2024 18:10:43 +0800 Subject: [PATCH] 修改 --- src/components/rightMenu/bottom2.vue | 52 ++++++++++++++++++++++++++++++++++++++-------------- 1 files changed, 38 insertions(+), 14 deletions(-) diff --git a/src/components/rightMenu/bottom2.vue b/src/components/rightMenu/bottom2.vue index 2517718..85a6458 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" v-show="test.fwval"> <div class="tool-rotate" @click="zoomIn" title="鏀惧ぇ"> <img src="@/assets/img/collection/add.png" /> </div> @@ -19,23 +24,38 @@ <style scoped> .mapTool { - border-radius: 10px; + width: 51px; + /* border-radius: 10px; */ + /* background: #ffffff; */ + /* margin-bottom: 8px; */ +} +.mapTool .tool-rotate img { + width: 100%; +} +.mapTool2 { + width: 40px; + height: 80px; + margin: 0 auto; background: #ffffff; - margin-bottom: 8px; + box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.21); + border-radius: 13px; + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; } - +.mapTool2 .tool-rotate img { + width: 18px; +} .border { - border: 0.5px solid #efecec; + width: 36px; + height: 1px; + border: 1px solid #e5e5e5; } -.tool-rotate { +/* .tool-rotate { padding: 8px; -} - -.tool-rotate img { - width: 20px; - height: 20px; -} +} */ </style> <script> @@ -45,7 +65,7 @@ props: ["test"], data() { return { - state1:store.mapTools, + state1: store.mapTools, state: store.layerPanel, customStyle: { position: "absolute", @@ -61,7 +81,7 @@ if (newVal) { this.customStyle = { position: "absolute", - top: "2rem", + top: "calc(0.75rem + 51px)", right: "0.1rem", }; } else { @@ -107,6 +127,10 @@ duration: 1000, // 缂╂斁鎸佺画鏃堕棿锛岄粯璁や笉闇�瑕佽缃� }); }, + PointingNorth() { + alert("鎸囧寳閽堝紑鍙戜腑"); + // console.log("鎸囧寳閽堝紑鍙戜腑") + }, }, }; </script> \ No newline at end of file -- Gitblit v1.9.3