修改部分图表显示效果

TreeWish

2023-02-24 bb39cbe30cf530a7554c5813e21ffaba9307a035

 src/views/Thematic/index.vue

@@ -3,8 +3,12 @@
    <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>
    <bottom class="mapbottom"  ref="mapbottom"></bottom>
    <right
      class="mapright"
      :style="{ width: rightWidth }"
      ref="mapright"
    ></right>
    <bottom class="mapbottom" ref="mapbottom"></bottom>
  </div>
</template>

@@ -36,6 +40,11 @@
          this.leftWidth = "20%"
        }
      }
      if (parm == "leftView" || parm == "leftTree") {
        this.leftWidth = "20%"
        this.rightWidth = "20%"
      }

      if (parm == "right") {
        if (this.rightWidth == "20%") {
          this.rightWidth = "36px"
@@ -55,6 +64,7 @@
  position: absolute;
  display: flex;
}

.title {
  position: absolute;
  top: 0;
@@ -63,6 +73,7 @@
  width: 100%;
  z-index: 999;
}

.mapleft {
  position: absolute;
  top: 90px;
@@ -71,6 +82,7 @@
  height: calc(100% - 180px);
  z-index: 999;
}

.mapright {
  position: absolute;
  top: 90px;
@@ -79,6 +91,7 @@
  height: calc(100% - 180px);
  z-index: 999;
}

.mapbottom {
  position: absolute;
  left: 0;
@@ -88,3 +101,26 @@
  z-index: 999;
}
</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>