<template>
  <div class="bomRight">
    <div class="a">
      <span>广州</span>
      <span class="num">62,256</span>
    </div>
    <div class="b">
      <span>香港</span>
      <span class="num">9,256</span>
    </div>
    <div class="c">
      <span>珠海</span>
      <span class="num">823</span>
    </div>
    <div class="d">
      <span>深圳</span>
      <span class="num">4,958</span>
    </div>
    <div class="e">
      <span>佛山</span>
      <span class="num">94</span>
    </div>
  </div>
</template>
<script></script>
<style lang="scss" scoped>
.bomRight {
  width: 100%;
  height: 100%;
  position: relative;
  div {
    display: flex;
    justify-content: center;
    flex-direction: column;
    background-size: 100% 100%;
    position: absolute;
    border-radius: 50%;
    span {
      margin-bottom: 4px;
      color: #fff;
      text-align: center;
    }
    .num {
      font-size: 18px;
      text-shadow: 0 0 4px #fff;
      color: rgba($color: #fff, $alpha: 0.8);
      font-weight: bold;
    }
  }
  .a {
    top: 5px;
    left: 175px;
    width: 160px;
    height: 160px;
    background: url('../img/27.png') no-repeat center/cover;
  }
  .b {
    bottom: 18px;
    left: 50px;
    width: 140px;
    height: 140px;
    background: url('../img/26.png') no-repeat center/cover;
  }
  .c {
    bottom: 0px;
    left: 300px;
    width: 110px;
    height: 110px;
    background: url('../img/25.png') no-repeat center/cover;
  }
  .d {
    top: 32px;
    right: 110px;
    width: 120px;
    height: 120px;
    background: url('../img/26.png') no-repeat center/cover;
  }
  .e {
    bottom: 28px;
    right: 58px;
    width: 90px;
    height: 90px;
    background: url('../img/25.png') no-repeat center/cover;
  }
}
</style>
