digital-map-frontend/src/views/map/XianlinMap.vue

<template>
  <div>
    <div class="map-box">
      <div class="legend">
        <div class="legend_label">
          <div class="color" style="background-color: green;"></div>
          <div class="legend_range"><span>0</span>-<span>25</span></div>
        </div>
        <div class="legend_label">
          <div class="color" style="background-color: yellow;"></div>
          <div class="legend_range"><span>25</span>-<span>50</span></div>
        </div>
        <div class="legend_label">
          <div class="color" style="background-color: red;"></div>
          <div class="legend_range"><span>50</span>-</div>
        </div>
      </div>
    <img
        :src="require('@/assets/xianlin.jpeg')"
        style="width: 30rem; margin: 0 auto"
    />
    <div class="hotArea" v-for="(p, index) in points" :key="index" :style="{ top: p._top + 'rem', left: p._left + 'rem' }">
      <div @click="handleClick(p)" class="clickSpace">
        <el-popover
            placement="top-start"
            :title="p.name"
            width="200"
            trigger="hover"
        >
          成果数量
          <p>{{p.val}}</p>
          <div slot="reference" class="num-info" :class="getLevelClass(p.val)">
            <i class="el-icon-s-finance"></i>
            {{ p.name }}: {{p.val}}
          </div>
        </el-popover>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
import {pointList} from "@/assets/map/xianlin_data";

export default {
  data() {
    return {
      points: pointList
    };
  },
  created() {},
  methods: {
    handleClick(college) {
      console.log(college);
      this.$router.push("/department/1");
    },
    getLevelClass(value) {
      if (value >= 0 && value < 25) {
        return 'level1';
      } else if (value >= 25 && value < 50) {
        return 'level2';
      } else if (value >= 50) {
        return 'level3';
      }
    }

  },
};
</script>

<style scoped>
.map-box {
  position: relative;
  margin: 0 auto;
  display: flex;
  /* background-image: url("https://s1.ax1x.com/2023/05/17/p9WGbKs.jpg");
  background-repeat: no-repeat;
  background-size: 100% auto; */
  /* border: 0.1rem solid black; */
  /* height: 80rem; */
  overflow: visible;
  /* height: fit-content; */
  width: 35rem;
  background-color: #fff;
}

.hotArea {
  position: absolute;
}
.num-info {
  /*position: absolute;*/
   /*left: 1.4rem;*/
  font-size: 0.6rem;
  display: flex;
  align-items: center;
  /*color: red;*/
  background-color: rgba(256,256,256,0.9);
  border-radius: 1rem;
  height: auto;
  padding: 0 10px;
  /*min-width: 2em;*/
  /*justify-content: space-between;*/
  border: solid #59217a 2px;
}
/*.num-info::before {*/
/*  content: "";*/
/*  width: 0.5rem;*/
/*  height: 0.5rem;*/
/*  margin-right: 0.1rem;*/
/*  border-radius: 50%;*/
/*}*/

.clickSpace:hover{
  cursor: pointer;
}
.level1 i {
  color: green;
}
.level2 i {
  color: yellow;
}
.level3 i {
  color: red;
}
.legend {
  width: 5rem;
  margin-top: 1rem;
}

.legend_label {
  display: flex;
  margin-left: 10px;
  align-items: center;
}
.color {
  width: 20px;
  height: 10px;
  margin-right: 5px;
}
.legend_range{
  margin-right: 10px;
  width: 5em;
}
.legend_range span{
  display: inline-block;
  width: 2em;
  text-align: center;
}
</style>