<template>
  <div class="bottom-header">
    <el-checkbox v-model="mapParmas.sd" label="三维图层"></el-checkbox>
    <el-tooltip
      placement="left-start"
      popper-class="popperclass"
      :visible-arrow="false"
    >
      <div slot="content" class="legend-img"></div>
      <imageButton
        size="medium"
        v-show="
          queryParamsXiaoqu.buildingId && queryParamsXiaoqu.xiaoquId != 267
        "
        >查看图例</imageButton
      >
    </el-tooltip>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["queryParamsXiaoqu", "mapParmas"]),
  },
};
</script>

<style lang="scss" scoped>
.bottom-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
}
::v-deep .el-checkbox {
  margin-right: 0;
  font-size: 14px;
  color: #cdfbff;
  background: url("~@/assets/images/ui/btn_bg.png");
  background-size: 100% 100%;
  padding: 9px 13px 10px 13px;
  .el-checkbox__label {
    padding-left: 3px;
  }
}
::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #cdfbff;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background: #fff;
}
::v-deep .el-checkbox__inner::after {
  border-color: #16aa2d;
}
.legend-img {
  height: 400px;
  width: 320px;
  background: url("~@/assets/images/ui/legend.png");
  background-size: 100% 100%;
}
</style>
