解决收缩菜单不一致情况

TreeWish

2023-02-24 417e07eebf6313b19ab6d26ebd8e39c7d08516ea

 src/views/Thematic/index.vue

@@ -2,7 +2,11 @@
  <div class="themaic">
    <mapsdk></mapsdk>
    <top class="title" ref="title"></top>
    <left class="mapleft" :style="{ width: leftWidth }" ref="mapleft"></left>
    <left
      class="mapleft"
      :style="{ width: leftWidth, left: leftTree && leftWidth == '20%' ? '-14px' : '0' }"
      ref="mapleft"
    ></left>
    <right
      class="mapright"
      :style="{ width: rightWidth }"
@@ -25,7 +29,9 @@
  data() {
    return {
      leftWidth: "20%",
      rightWidth: "20%",
      rightWidth: "22%",
      leftTree: false,
      currTree: false
    }
  },
  mounted() {},
@@ -35,21 +41,28 @@
    ChangeWidth(parm) {
      if (parm == "left") {
        if (this.leftWidth == "20%") {
          this.leftWidth = "36px"
          this.leftWidth = "8px"
        } else {
          this.leftWidth = "20%"
        }
      }

      if (parm == "leftView" || parm == "leftTree") {
        this.leftWidth = "20%"
        this.rightWidth = "20%"
        this.rightWidth = "22%"
      }
      if (parm == "leftView") {
        this.leftTree = false
      }
      if (parm == "leftTree") {
        this.leftTree = true
      }

      if (parm == "right") {
        if (this.rightWidth == "20%") {
          this.rightWidth = "36px"
        if (this.rightWidth == "22%") {
          this.rightWidth = "45px"
        } else {
          this.rightWidth = "20%"
          this.rightWidth = "22%"
        }
      }
    },
@@ -86,7 +99,7 @@
.mapright {
  position: absolute;
  top: 90px;
  right: 0px;
  right: -20px;
  // width: 20%;
  height: calc(100% - 180px);
  z-index: 999;