From 61c3846cd8213fe3a7a5580c653936b4cbf0e3ef Mon Sep 17 00:00:00 2001
From: Jin Lei <jinlei_182@163.com>
Date: 星期三, 15 十一月 2023 18:37:08 +0800
Subject: [PATCH] [细节调整] 1.拆分主菜单，修改切换逻辑 2.按钮移动效果添加

---
 src/components/index.vue |   79 ++++++++++++++++++++++++---------------
 1 files changed, 48 insertions(+), 31 deletions(-)

diff --git a/src/components/index.vue b/src/components/index.vue
index cc6fdfb..e6ba270 100644
--- a/src/components/index.vue
+++ b/src/components/index.vue
@@ -1,5 +1,13 @@
 <template>
   <div class="mapViewer">
+    <div class="cacheImage">
+    <img style="display: none;" src="@assets/img/new/rightCircle-y.png" alt="" />
+    <img style="display: none;" src="@assets/img/new/leftCircle-y.png" alt="" />
+    <img style="display: none;" src="@assets/img/new/treeClose-y.png" alt="" />
+    <img style="display: none;" src="@assets/img/new/h1.png" alt="" />
+  </div>
+
+
     <div class="tooltip" :class="{ tooltiphide: !tooltipShow }">
       <span>
         {{ tooltipInfo }}
@@ -11,41 +19,29 @@
           <img class="searchBtn" src="@/assets/img/right/closeinput1.png" />
         </el-button>
       </div>
-      <History />
+
     </div>
-    <viewer1
-      class="mapViewer"
-      v-if="viewer1Show"
-      :style="viewer1Style"
-      @mousemove.native="viewer1MouseMove"
-    />
-    <viewer
-      class="mapViewer"
-      :style="viewerStyle"
-      @mousemove.native="viewerMouseMove"
-    />
-    <div
-      class="controlPanel"
-      :style="{
-        width: `${size}`,
-        height: `${size}`,
-        transform: `scale(${scale}) translate(${offset},${offset})`,
-        '-webkit-transform': `scale(${scale}) translate(${offset},${offset})`,
-        '-moz-transform': `scale(${scale}) translate(${offset},${offset})`,
-        '-o-transform': `scale(${scale}) translate(${offset},${offset})`,
-        '-ms-transform': `scale(${scale}) translate(${offset},${offset})`,
-      }"
-    >
-      <img id="headlog" src="@/assets/img/new/topBar.png" />
+    <viewer1 class="mapViewer" :key="switchKey" v-if="viewer1Show" :style="viewer1Style"
+      @mousemove.native="viewer1MouseMove" />
+    <viewer class="mapViewer" ref="mapViewer" :style="viewerStyle" @mousemove.native="viewerMouseMove" />
+    <div class="controlPanel" :style="{
+      width: `${size}`,
+      height: `${size}`,
+      transform: `scale(${scale}) translate(${offset},${offset})`,
+      '-webkit-transform': `scale(${scale}) translate(${offset},${offset})`,
+      '-moz-transform': `scale(${scale}) translate(${offset},${offset})`,
+      '-o-transform': `scale(${scale}) translate(${offset},${offset})`,
+      '-ms-transform': `scale(${scale}) translate(${offset},${offset})`,
+    }">
+      <img @click="changePwd" id="headlog" src="@/assets/img/new/topBar.png" />
       <img id="bottomBar" src="@/assets/img/new/bottomBar.png" />
-      <el-slider
+      <!-- <el-slider
         class="undergroundAlpha"
         v-if="openUnderGround"
         v-model="undergroundAlpha"
         :show-tooltip="false"
         @input="changeAlpha"
-      ></el-slider>
-
+      ></el-slider> -->
       <right ref="Right" />
       <leftpanel ref="Left" />
       <menupanel />
@@ -70,7 +66,6 @@
 
 import bottommenu from "@/components/menu/bottom-menu";
 import { mapState, mapMutations } from "vuex";
-import History from "@/components/map/history.vue";
 
 export default {
   name: "index",
@@ -91,7 +86,7 @@
     return {
       date: "",
       undergroundAlpha: 50,
-      openUnderGround: false,
+      // openUnderGround: false,
       viewerStyle: "",
       viewer1Style: "",
       size: "100%",
@@ -99,6 +94,7 @@
       offset: "0%",
       tooltipInfo: "璇风◢鍚庛�傘�傘��",
       tooltipShow: false,
+      switchKey: 0,
       // viewer1Show: false,
     };
   },
@@ -109,7 +105,7 @@
     this.size = size + "%";
   },
   computed: {
-    ...mapState(["viewer1Show", "yqfk"]),
+    ...mapState(["viewer1Show", "isLand", "yqfk"]),
     showSetting() {
       return this.$store.state.showSetting;
     },
@@ -135,6 +131,12 @@
     setMessgae(show, msg) {
       this.tooltipShow = show;
       this.tooltipInfo = msg ? msg : "";
+    },
+    changePwd() {
+      console.log(111);
+    },
+    changeMode(mode){
+      this.$refs.mapViewer.changeMode(mode);
     },
     detectZoom() {
       var ratio = 0,
@@ -237,9 +239,19 @@
 };
 </script>
 <style scoped>
+.cacheImage{
+  display: none !important;
+}
 .mapViewer {
   height: 100%;
 }
+
+.userinfo {
+  position: absolute;
+  z-index: 20;
+  top: 10px;
+}
+
 #headlog {
   width: 965px;
   height: 70px;
@@ -248,6 +260,7 @@
   top: 0;
   transform: translate(-50%, 0);
 }
+
 #bottomBar {
   width: 1357px;
   height: 52px;
@@ -256,6 +269,7 @@
   bottom: 0;
   transform: translate(-50%, 0);
 }
+
 .trigger {
   pointer-events: all;
 }
@@ -297,6 +311,7 @@
   border-radius: 10px;
   padding: 10px 30px;
 }
+
 .hisbox {
   position: absolute;
   z-index: 10000002;
@@ -304,11 +319,13 @@
   height: 100%;
   background-color: #fff;
 }
+
 .btnbox {
   position: absolute;
   z-index: 100000003;
   right: 30px;
 }
+
 .btnbox .el-button {
   padding: 0 !important;
   font-size: 24px;

--
Gitblit v1.9.3