multiple-police-situations/src/App.vue

<template>
  <a-config-provider :locale="zhCN">
    <a-spin :spinning="loading" style="z-index: 1001" :tip="loadingMessage">
      <fullScreenContainer>
        <router-view></router-view>
      </fullScreenContainer>
    </a-spin>
  </a-config-provider>
</template>

<script setup lang="ts">
import fullScreenContainer from '@/components/fullScreenContainer.vue'
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import { useLoadingStore } from '@/stores/modules/loadingStore'
import { storeToRefs } from 'pinia'

const loadingStore = useLoadingStore()
const { loading, loadingMessage } = storeToRefs(loadingStore)
</script>

<style lang="scss">
body {
  font-family: AliBaBaPuHuTi, serif;
}

//地图弹框样式
.mapPopInfo {
  width: 450px;
}

.mapPopInfo-top {
  height: 33px;
  line-height: 33px;
  background: linear-gradient(to right, #0d6295, #0872b1, #0872b18c);
  padding: 0 15px;
  border: solid 2px #2d94b5;
  border-bottom: solid 1px #54bbda;
}

.mapPopInfo-top > img {
  float: right;
  margin: 3px 0;
}

.mapPopInfo-top > span > span {
  float: left;
  width: 330px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mapPopInfo-main {
  padding: 15px;
  background: #13213bab;
  box-shadow: inset 1px 1px 14px 2px #32689e;
  border: solid 2px #2d94b5;
  border-top: 0;
}

.mapPopInfo-main > div > p {
  line-height: 30px;
}

.mapPopInfo-main > div > p > span:nth-child(3) {
  margin-left: 10px;
}

.mapPopInfo-main > div > p > button {
  height: 26px;
  line-height: 26px;
  background: #2081c1;
  color: #fff;
  border: 1px solid #2081c1;
  box-shadow: 0 0 3px 3px #244b68;
}

.amap-marker-content {
  white-space: normal !important;
}

.amap-info-contentContainer.bottom-center {
  padding-bottom: 0 !important;
}

.indexMarkerImg {
  width: 32px;
  height: 60px;
  border-radius: 50%;
  position: relative;
}

.indexMarkerImg > img {
  position: absolute;
}

.indexMarkerImg > img {
  width: 100%;
  height: 100%;
  left: 4px;
  top: 4px;
  z-index: 20;
}

@keyframes jumper {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}

.markerClass {
  position: relative;
  left: 28px;
  top: 33px;
  right: 0;
  bottom: 0;
  width: 40px;
  height: 40px;
}

.markerClass > div {
  background-color: #f4090a;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  animation-fill-mode: both;
  position: absolute;
  left: -41px;
  top: -46px;
  opacity: 0;
  margin: 0;
  width: 75px;
  height: 75px;
  animation: jumper 3s 0s linear infinite;
}

.markerClass > div:nth-child(2) {
  -webkit-animation-delay: 0.33333s;
  animation-delay: 0.33333s;
}

.markerClass > div:nth-child(3) {
  -webkit-animation-delay: 0.66666s;
  animation-delay: 0.66666s;
}

.riskMarkerImg {
  overflow: hidden;
  margin-top: 5px;
}

.riskMarkerImg > span {
  float: left;
}

.riskMarkerImg > img {
  float: left;
  width: 120px;
  height: 80px;
  margin: 0 10px;
  border-radius: 4px;
}

.riskMarkerImg > span:last-child {
  width: 120px;
  height: 80px;
  background: #000;
  margin-left: 10px;
  border-radius: 4px;
}
</style>