<template>
  <!-- 探理楼 -->
  <div class="box icon" @click="test"></div>
  <!-- 探问楼 -->
  <div class="box icon2" @click="test2"></div>
  <!-- 探学楼 -->
  <div class="box icon3" @click="test3"></div>
  <!-- 探真楼 -->
  <div class="box icon4" @click="test4"></div>
</template>

<script setup lang="ts">
const test = () => {
  console.log("楼栋1");
};

const test2 = () => {
  console.log("楼栋2");
};

const test3 = () => {
  console.log("楼栋3");
};

const test4 = () => {
  console.log("楼栋4");
};
</script>

<style scoped>
.box {
  position: absolute;
  width: 170px;
  height: 130px;
  background-size: 100% 100%;
  cursor: pointer;
  animation: float2 3s linear infinite;
}
.icon {
  top: 512px;
  left: 605px;
  background-image: url(@/assets/images/building.png);
}

.icon2 {
  top: 415px;
  left: 784px;
  background-image: url(@/assets/images/building2.png);
}

.icon3 {
  top: 468px;
  left: 1090px;
  background-image: url(@/assets/images/building3.png);
}

.icon4 {
  top: 324px;
  left: 1051px;
  background-image: url(@/assets/images/building4.png);
}
</style>
