修改大屏首页

TreeWish

2023-02-27 27c5590aab433687c58dbf41e9271f71008834f0

 src/views/Thematic/index.vue

@@ -2,14 +2,21 @@
  <div class="themaic">
    <mapsdk></mapsdk>
    <top class="title" ref="title"></top>
    <left class="mapleft" :style="{ width: leftWidth }" ref="mapleft"></left>
    <right class="mapright" :style="{ width: rightWidth }" ref="mapright"></right>
    <left
      class="mapleft"
      :style="{ width: leftWidth, left: leftTree && leftWidth == '20%' ? '-14px' : '0' }"
      ref="mapleft"
    ></left>
    <right
      class="mapright"
      :style="{ width: rightWidth }"
      ref="mapright"
    ></right>
    <bottom class="mapbottom" ref="mapbottom"></bottom>
</div>
  </div>
</template>

<script>

import mapsdk from "@/components/Screen/mapsdk.vue"
import top from "../../components/Screen/top.vue"
import left from "@/components/Screen/left.vue"
@@ -22,31 +29,40 @@
  data() {
    return {
      leftWidth: "20%",
      rightWidth: "20%",
      rightWidth: "22%",
      leftTree: false,
      currTree: false
    }
  },
  mounted() { },
  created() { },
  mounted() {},
  created() {},
  methods: {
    //修改左侧宽度
    ChangeWidth(parm) {
      if (parm == "left") {
        if (this.leftWidth == "20%") {
          this.leftWidth = "36px"
          this.leftWidth = "8px"
        } else {
          this.leftWidth = "20%"
        }
      }
      debugger;
      if (parm == "leftView" || parm == "leftTree") { this.leftWidth = "20%" }


      // if (parm == "leftView" || parm == "leftTree") {
      //   this.leftWidth = "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%"
        }
      }
    },
@@ -83,7 +99,7 @@
.mapright {
  position: absolute;
  top: 90px;
  right: 0px;
  right: -20px;
  // width: 20%;
  height: calc(100% - 180px);
  z-index: 999;
@@ -96,4 +112,28 @@
  height: 90px;
  width: 100%;
  z-index: 999;
}</style>
}
</style>

<style lang="less">
.themaic {
  .aside-title {
    box-sizing: border-box;
    padding-left: 30px;
    // height: 27px;
    // line-height: 27px;
    // background: linear-gradient(0deg, #9cd2ff 0%, #ffffff 100%);
    font-size: 15px;
    font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
    // -webkit-background-clip: text;
    color: #fff;
    width: 100%;

    height: 30px;
    line-height: 30px;
    background: url(~@/assets/img/Screen/asideTitleBg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
}
</style>