<template>
  <div class="viewmap">
    <img src="../assets/images/map.png"/>
    <svg class="lines" width="895" height="632">
      <line
        v-for="(item, index) in links"
        :key="index"
        :x2="item[0]"
        :y2="item[1]"
        x1="630"
        y1="288"
        stroke="rgba(45, 199, 170, 0.5)"
        stroke-width="2"
      />
    </svg>
    <div class="icon">
      <div class="dot"></div>
      <div class="pluse"></div>
      <div class="pluse-big"></div>
    </div>
  </div>
</template>
<script>
const links = [
  [185, 275],
  [485, 350],
  [770, 235],
  [785, 155],
  [725, 270],
  [522, 573],
  [676, 498],
  [335, 375],
  [432, 470],
  [405, 575],
  [612, 510],
  [185, 440],
  [497, 528],
]
export default {
  name: 'viewmap',
  data() {
    return {
      links,
      start: [190, 440]
    }
  }
}
</script>
<style lang="less" scoped>
  .viewmap{
    width: 895px;
    margin: auto;
    margin-top: 20px;
    position: relative;
    img{
      max-width: 100%;
    }
    .lines{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .line{
      position: absolute;
    }
    .icon{
      position: absolute;
      z-index: 999;
      width: 26px;
      height: 26px;
      top: 275px;
      left: 615px;
      .dot{
        position: absolute;
        width: 8px;
        height: 8px;
        left: 9px;
        top: 9px;
        border-radius: 50%;
        background: rgba(45, 199, 170, 0.7);
        animation: shink 1.4s ease-out infinite;
      }
      .pluse{
        position: absolute;
        width: 26px;
        height: 26px;
        border: 2px solid #09f;
        border-radius: 50%;
        z-index: 100;
        opacity: 0;
        background: rgba(45, 199, 170, 0.6);
        animation: warn 1.4s ease-out;
        animation-iteration-count: infinite;
        box-shadow: 1px 1px 30px rgba(45, 199, 170, 1);
      }
      .pluse-big{
        position: absolute;
        width: 20px;
        height: 20px;
        border: 2px solid #09f;
        border-radius: 50%;
        z-index: 100;
        opacity: 0;
        background: rgba(45, 199, 170, 0.6);
        animation: warn1 1.4s ease-out;
        animation-iteration-count: infinite;
        box-shadow: 1px 1px 30px #EF2D02;
      }
    }
    @keyframes warn{
        0% {
            -moz-transform: scale(0);
            -webkit-transform: scale(0);
            transform: scale(0);
            opacity: 1;
        }
        100% {
            -moz-transform: scale(1);
            -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 0;
        }
    }
    @-webkit-keyframes warn{
        0% {
            -moz-transform: scale(0);
            -webkit-transform: scale(0);
            transform: scale(0);
            opacity: 1;
        }
        100% {
            -moz-transform: scale(1);
            -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 0;
        }
    }
    @keyframes shink{
        0% {
            opacity: 0;
            transform: scale(0.5);
        }
        100% {
            opacity: 1;
            transform: scale(1);
        }
    }
  }
  line {
    stroke-dashoffset: 0;
    animation: dash 4s;
  }

  @keyframes dash {
    0% {
      stroke-dashoffset: 0;
    }
    1% {
      stroke-dasharray: 800;
      stroke-dashoffset: 800;
    }
    100% {
      stroke-dashoffset: 0;
    }
  }
</style>
