Wuchuan/src/views/gui/ModeSelectorMobile.vue

<template>
  <div class="mode-selector-mobile">
    <button
      @click="onClickQuanjingmanyou"
    >
      <img
        class="manyou"
        src="@/assets/images/quanjingmanyou-sub.png"
        alt=""
        draggable="false"
      >
      <span>漫游</span>
    </button>
    <button
      @click="onClickDingbufushi"
    >
      <img
        class="pingmian"
        src="@/assets/images/dingbufushi-mobile.png"
        alt=""
        draggable="false"
      >
      <span>平面</span>
    </button>
    <button
      @click="onClickMinimoxing"
    >
      <img
        class="sanwei"
        src="@/assets/images/minimoxing-mobile.png"
        alt=""
        draggable="false"
      >
      <span>三维</span>
    </button>
  </div>
</template>

<script>
export default {
  methods: {
    onClickQuanjingmanyou(e) {
      document.onMousedownInside(e)
    },
    onClickMinimoxing(e) {
      document.onClickDollHouse(e)
    },
    onClickDingbufushi(e) {
      document.onClickFloorPlain(e)
    },
  }
}
</script>

<style lang="less" scoped>
.mode-selector-mobile {
  padding: 3px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px 5px 5px 5px;
  display: flex;
  align-items: center;
  > button {
    width: 75px;
    height: 37px;
    // background: rgba(161,14,12,0.7);
    border-radius: 2px 2px 2px 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    > img.manyou {
      width: 8px;
      height: 20px;
      margin-right: 6px;
    }
    > img.pingmian {
      width: 19px;
      height: 19px;
      margin-right: 4px;
    }
    > img.sanwei {
      width: 23px;
      height: 22px;
      margin-right: 4px;
    }
    > span {
      font-size: 14px;
      color: #FFF1BD;
    }
  }
}

.mobile[view-mode='panorama'] {
  .mode-selector-mobile {
    > button:nth-of-type(1) {
      background: rgba(161,14,12,0.7);
    }
  }
}
.mobile[view-mode='floor-plain'] {
  .mode-selector-mobile {
    > button:nth-of-type(2) {
      background: rgba(161,14,12,0.7);
    }
  }
}
.mobile[view-mode='doll-house'] {
  .mode-selector-mobile {
    > button:nth-of-type(3) {
      background: rgba(161,14,12,0.7);
    }
  }
}
</style>