AnhuiDaily2/src/components/MiniMapDecorator.vue

<template>
  <div
    class="mini-map-dec"
    :class="{
      mobile: isMobile,
    }"
  >
    <img class="roof" src="@/assets/images/mini-map-pc.png" alt="" draggable="false">
    <div
      v-if="isMobile"
      class="bottom-bar"
    >
      <button
        class="plain"
        @click="onClickPlain"
      >
        <img
          class=""
          src="@/assets/images/dingbufushi-mobile.png"
          alt=""
          draggable="false"
        >
        <span>平面</span>
      </button>
      <button
        class="model"
        @click="onClick3D"
      >
        <img
          class=""
          src="@/assets/images/minimoxing-mobile.png"
          alt=""
          draggable="false"
        >
        <span>三维</span>
      </button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    onClickPlain(e) {
      document.onClickFloorPlain(e)
    },
    onClick3D(e) {
      document.onClickDollHouse(e)
    }
  }
}
</script>

<style lang="less" scoped>
.mini-map-dec {
  position: fixed;
  top: 28px;
  right: 20px;
  width: 237px !important;
  height: 149px !important;
  background: rgba(86,86,86,0.2);
  backdrop-filter: blur(10px);
  z-index: 998;
  .roof {
    position: absolute;
    left: 50%;
    top: 0;
    width: 254px;
    height: 18px;
    transform: translate(-50%, -100%);
  }
  .bottom-bar {
    position: absolute;
    left: 50%;
    bottom: 13px;
    transform: translateX(-50%);
    width: 100%;
    height: 18px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    > button.plain {
      display: flex;
      align-items: center;
      > img {
        width: 19px;
        height: 19px;
        margin-right: 4px;
      }
      > span {
        font-size: 16px;
        color: #FFF0BD;
      }
    }
    > button.model {
      display: flex;
      align-items: center;
      > img {
        width: 23px;
        height: 22px;
        margin-right: 4px;
      }
      > span {
        font-size: 16px;
        color: #FFF0BD;
      }
    }
  }
}

.mobile.mini-map-dec {
  width: 159px !important;
  height: 142px !important;
  .roof {
    width: 170px;
    height: 12px;
  }
}
</style>