左侧是各国的城市列表，右侧是点阵地图背景并标记城市的坐标点，标记点会有水波纹动画，屏幕缩放标记点位置相对地图位置保持不变，点击左侧的城市列表，右侧弹出城市的信息，弹出框会有灯闪动的动画，从上到下弹出，用vue实现

好的，你的问题是如何用Vue实现一个城市列表和点阵地图背景，并且点击城市列表能弹出城市信息弹出框，对吧？

首先，你需要准备一些数据，包括城市列表和每个城市的信息。这些数据可以存储在一个JSON文件或者后端API中。

然后，在Vue的模板中，可以使用v-for指令来循环渲染城市列表。示例代码如下：

<template>
  <div class="city-list">
    <ul>
      <li v-for="city in cities" :key="city.id" @click="showCityInfo(city)">
        {{ city.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cities: [
        { id: 1, name: '北京', lat: 39.9042, lng: 116.4074, info: '北京是中国的首都。' },
        { id: 2, name: '上海', lat: 31.2304, lng: 121.4737, info: '上海是中国的经济中心。' },
        { id: 3, name: '广州', lat: 23.1291, lng: 113.2644, info: '广州是中国的南方城市。' },
        // ...
      ]
    }
  },
  methods: {
    showCityInfo(city) {
      // 弹出城市信息弹出框
      // ...
    }
  }
}
</script>

接下来，可以使用Leaflet或者Mapbox等地图库来实现点阵地图背景和标记城市的坐标点。示例代码如下：

<template>
  <div class="map-container">
    <div id="map"></div>
  </div>
</template>

<script>
import L from 'leaflet'

export default {
  mounted() {
    // 初始化地图
    const map = L.map('map').setView([30, 120], 4)

    // 添加点阵地图背景
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
      maxZoom: 18
    }).addTo(map)

    // 添加城市标记点
    this.cities.forEach(city => {
      L.marker([city.lat, city.lng], {
        title: city.name
      }).addTo(map)
    })
  },
  data() {
    return {
      cities: [
        { id: 1, name: '北京', lat: 39.9042, lng: 116.4074, info: '北京是中国的首都。' },
        { id: 2, name: '上海', lat: 31.2304, lng: 121.4737, info: '上海是中国的经济中心。' },
        { id: 3, name: '广州', lat: 23.1291, lng: 113.2644, info: '广州是中国的南方城市。' },
        // ...
      ]
    }
  }
}
</script>

<style>
#map {
  height: 500px;
}
</style>

最后，在showCityInfo方法中可以通过弹出框库（如ElementUI）来实现城市信息弹出框的弹出和填充城市信息。示例代码如下：

<template>
  <div class="city-list">
    <ul>
      <li v-for="city in cities" :key="city.id" @click="showCityInfo(city)">
        {{ city.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import { Message } from 'element-ui'

export default {
  methods: {
    showCityInfo(city) {
      // 弹出城市信息弹出框
      Message({
        message: city.info,
        type: 'info',
        duration: 3000,
        showClose: true
      })
    }
  }
}
</script>

这样，你就可以用Vue实现一个城市列表和点阵地图背景，并且点击城市列表能弹出城市信息弹出框了。