<template>

  <div class="ellipse">
    <div :class="`circle circle${i+1}`" v-for="(n,i) in list">
      <div class="ma">
        <img class="iconImg" :src="`@/assets/img/btn0${i+1}.png`">
        <el-statistic class="statistic" :title="n.name" :value="n.num" :value-style="statisticStyle"/>
      </div>
    </div>
  </div>

</template>

<script setup>
import {onMounted, ref} from "vue";
import {Swiper, SwiperSlide} from 'swiper/vue'
import {Autoplay, Navigation} from 'swiper'
import * as api from "@/apiPc/common"
const statisticStyle = ref({'color':'#fff'})
const modules = ref([Autoplay])
const list =ref([])

onMounted(()=>{
  init()
})

function init() {
  api.getBasicInfo().then(res=>{
    list.value = []
    let arr = res.data
    for (let n in arr){
      let obj = {name:n,num:arr[n]}
      list.value.push(obj)
    }
  })
}
//动画的暂停与开始
var svg1 = document.getElementById("svg_an");
function pauseAn() {
  svg1.pauseAnimations();
}
function unpauseAn() {
  svg1.unpauseAnimations();
}

</script>

<style scoped lang="scss">
/* 定义旋转动画 */
@keyframes rotate {
  0%{
    transform: rotate3d(1,1,1,0deg);
  }
  100%{
    transform: rotate3d(1,1,1,360deg);
  }
}
:deep(.el-statistic__head){
  font-family: 'YouSheBiaoTiHei';
  background: linear-gradient(180deg, #fff 10%, #9CD2FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 20px;
}
:deep(.el-statistic__number){
  font-size: 26px;
  font-family: 'DIN Alternate';
  background: linear-gradient(180deg, #fff 20%, #9CD2FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.statistic{--el-statistic-title-color: #fff;text-align: center;position: relative;top: -15px;}
.ellipse {
  position: relative;
  left: -3%;
  width: 100%;margin: auto;
  height: 100%;
  border-radius: 50%;z-index: 10;
  //border: 2px #fff solid;
  transform-style: preserve-3d;
  transform: rotateZ(90deg) rotateY(60deg);
  &:hover .circle{ animation-play-state: paused!important;}
}
.ellipse .circle {
  width: 300px;
  height: 400px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
  text-align: center;opacity: 1;filter: brightness(100%);
  &:hover{
    animation-play-state: paused;
  }
}
.ellipse .circle .ma{
  background: url("@/assets/img/mabg.png") no-repeat center;
  background-size: contain;
  //box-shadow: 0 0 20px #000;
  display: block;
  height: 340px;    width: 290px;
  transform: rotateZ(-90deg);  /* 再次旋转 */
  img{width: 70%;position: relative;top:0px;margin: 0 auto 60px;}
}

.ellipse .circle1{
  animation: moveA 30s linear infinite;
}
.ellipse .circle2{
  animation: moveB 30s linear infinite;
}
.ellipse .circle3{
  animation: moveC 30s linear infinite;
}
.ellipse .circle4{
  animation: moveD 30s linear infinite;
}
.ellipse .circle5{
  animation: moveE 30s linear infinite;
}

@keyframes moveA {
  0% {
    transform: rotateZ(0) translateX(300px) rotateZ(0) rotateY(-70deg) scale(1);
    filter: brightness(100%);
  }
  5% {
    transform: rotateZ(80deg) translateX(300px) rotateZ(-80deg) rotateY(-70deg) scale(0.8);
    filter: brightness(80%);
  }
  20% {
    transform: rotateZ(80deg) translateX(300px) rotateZ(-80deg) rotateY(-70deg) scale(0.8);
    filter: brightness(80%);
  }
  25% {
    transform: rotateZ(160deg) translateX(300px) rotateZ(-160deg) rotateY(-70deg) scale(0.7);
    filter: brightness(60%);
  }
  40% {
    transform: rotateZ(160deg) translateX(300px) rotateZ(-160deg) rotateY(-70deg) scale(0.7);
    filter: brightness(60%);
  }
  45% {
    transform: rotateZ(200deg) translateX(300px) rotateZ(-200deg) rotateY(-70deg) scale(0.7);
    filter: brightness(60%);
  }
  60% {
    transform: rotateZ(200deg) translateX(300px) rotateZ(-200deg) rotateY(-70deg) scale(0.7);
    filter: brightness(60%);
  }
  65% {
    transform: rotateZ(280deg) translateX(300px) rotateZ(-280deg) rotateY(-70deg) scale(0.8);
    filter: brightness(80%);
  }
  80% {
    transform: rotateZ(280deg) translateX(300px) rotateZ(-280deg) rotateY(-70deg) scale(0.8);
    filter: brightness(80%);
  }
  85% {
    transform: rotateZ(360deg) translateX(300px) rotateZ(-360deg) rotateY(-70deg) scale(1);
    filter: brightness(100%);
  }
  100% {
    transform: rotateZ(360deg) translateX(300px) rotateZ(-360deg) rotateY(-70deg) scale(1);
    filter: brightness(100%);
  }
}
@keyframes moveB {
  0% {
    transform: rotateZ(-80deg) translateX(300px) rotateZ(80deg) rotateY(-70deg) scale(0.8);
    filter: brightness(80%);
  }
  5% {
    transform: rotateZ(0deg) translateX(300px) rotateZ(0deg) rotateY(-70deg)  scale(1);
    z-index: 99;filter: brightness(100%);
  }
  20% {
    transform: rotateZ(0deg) translateX(300px) rotateZ(0deg) rotateY(-70deg)  scale(1);
    z-index: 99;filter: brightness(100%);
  }
  25% {
    transform: rotateZ(80deg) translateX(300px) rotateZ(-80deg) rotateY(-70deg) scale(0.8);
    filter: brightness(80%);
  }
  40% {
    transform: rotateZ(80deg) translateX(300px) rotateZ(-80deg) rotateY(-70deg) scale(0.8);
    filter: brightness(80%);
  }
  45% {
    transform: rotateZ(160deg) translateX(300px) rotateZ(-160deg) rotateY(-70deg) scale(0.7);
    filter: brightness(60%);
  }
  60% {
    transform: rotateZ(160deg) translateX(300px) rotateZ(-160deg) rotateY(-70deg) scale(0.7);
    filter: brightness(60%);
  }
  65% {
    transform: rotateZ(200deg) translateX(300px) rotateZ(-200deg) rotateY(-70deg)  scale(0.7);
    filter: brightness(60%);
  }
  80% {
    transform: rotateZ(200deg) translateX(300px) rotateZ(-200deg) rotateY(-70deg)  scale(0.7);
    filter: brightness(60%);
  }
  85% {
    transform: rotateZ(280deg) translateX(300px) rotateZ(-280deg) rotateY(-70deg) scale(0.8);
    filter: brightness(80%);
  }
  100% {
    transform: rotateZ(280deg) translateX(300px) rotateZ(-280deg) rotateY(-70deg) scale(0.8);
    filter: brightness(80%);
  }
}
@keyframes moveC {
  0% {
    transform: rotateZ(-160deg) translateX(300px) rotateZ(160deg) rotateY(-70deg) scale(0.7);
    filter: brightness(60%);
  }
  5% {
    transform: rotateZ(-80deg) translateX(300px) rotateZ(80deg) rotateY(-70deg)  scale(0.8);
    filter: brightness(80%);
  }
  20% {
    transform: rotateZ(-80deg) translateX(300px) rotateZ(80deg) rotateY(-70deg)  scale(0.8);
    filter: brightness(80%);
  }
  25% {
    transform: rotateZ(0deg) translateX(300px) rotateZ(0deg) rotateY(-70deg) scale(1);
    filter: brightness(100%);z-index: 99;
  }
  40% {
    transform: rotateZ(0deg) translateX(300px) rotateZ(0deg) rotateY(-70deg) scale(1);
    filter: brightness(100%);z-index: 99;
  }
  45% {
    transform: rotateZ(80deg) translateX(300px) rotateZ(-80deg) rotateY(-70deg) scale(0.8);
    filter: brightness(80%);
  }
  60% {
    transform: rotateZ(80deg) translateX(300px) rotateZ(-80deg) rotateY(-70deg) scale(0.8);
    filter: brightness(80%);
  }
  65% {
    transform: rotateZ(160deg) translateX(300px) rotateZ(-160deg) rotateY(-70deg)  scale(0.7);
    filter: brightness(60%);
  }
  80% {
    transform: rotateZ(160deg) translateX(300px) rotateZ(-160deg) rotateY(-70deg)  scale(0.7);
    filter: brightness(60%);
  }
  85% {
    transform: rotateZ(200deg) translateX(300px) rotateZ(-200deg) rotateY(-70deg) scale(0.7);
    filter: brightness(60%);
  }
  100% {
    transform: rotateZ(200deg) translateX(300px) rotateZ(-200deg) rotateY(-70deg) scale(0.7);
    filter: brightness(60%);
  }
}
@keyframes moveD {
  0% {
    transform: rotateZ(-200deg) translateX(300px) rotateZ(200deg) rotateY(-70deg) scale(0.7);
    filter: brightness(60%);
  }
  5% {
    transform: rotateZ(-160deg) translateX(300px) rotateZ(160deg) rotateY(-70deg)  scale(0.7);
    filter: brightness(60%);
  }
  20% {
    transform: rotateZ(-160deg) translateX(300px) rotateZ(160deg) rotateY(-70deg)  scale(0.7);
    filter: brightness(60%);
  }
  25% {
    transform: rotateZ(-80deg) translateX(300px) rotateZ(80deg) rotateY(-70deg)  scale(0.8);
    filter: brightness(80%);
  }
  40% {
    transform: rotateZ(-80deg) translateX(300px) rotateZ(80deg) rotateY(-70deg) scale(0.8);
    filter: brightness(80%);
  }
  45% {
    transform: rotateZ(0deg) translateX(300px) rotateZ(0deg) rotateY(-70deg) scale(1);
    filter: brightness(100%);z-index: 99;
  }
  60% {
    transform: rotateZ(0deg) translateX(300px) rotateZ(0deg) rotateY(-70deg) scale(1);
    filter: brightness(100%);z-index: 99;
  }
  65% {
    transform: rotateZ(80deg) translateX(300px) rotateZ(-80deg) rotateY(-70deg) scale(0.8);
    filter: brightness(80%);
  }
  80% {
    transform: rotateZ(80deg) translateX(300px) rotateZ(-80deg) rotateY(-70deg) scale(0.8);
    filter: brightness(80%);
  }
  85% {
    transform: rotateZ(160deg) translateX(300px) rotateZ(-160deg) rotateY(-70deg) scale(0.7);
    filter: brightness(60%);
  }
  100% {
    transform: rotateZ(160deg) translateX(300px) rotateZ(-160deg) rotateY(-70deg) scale(0.7);
    filter: brightness(60%);
  }
}
@keyframes moveE {
  0% {
    transform: rotateZ(-280deg) translateX(300px) rotateZ(280deg) rotateY(-70deg) scale(0.8);
    filter: brightness(80%);
  }
  5% {
    transform: rotateZ(-200deg) translateX(300px) rotateZ(200deg) rotateY(-70deg) scale(0.7);
    filter: brightness(60%);
  }
  20% {
    transform: rotateZ(-200deg) translateX(300px) rotateZ(200deg) rotateY(-70deg) scale(0.7);
    filter: brightness(60%);
  }
  25% {
    transform: rotateZ(-160deg) translateX(300px) rotateZ(160deg) rotateY(-70deg) scale(0.7);
    filter: brightness(60%);
  }
  40% {
    transform: rotateZ(-160deg) translateX(300px) rotateZ(160deg) rotateY(-70deg) scale(0.7);
    filter: brightness(60%);
  }
  45% {
    transform: rotateZ(-80deg) translateX(300px) rotateZ(80deg) rotateY(-70deg) scale(0.7);
    filter: brightness(80%);
  }
  60% {
    transform: rotateZ(-80deg) translateX(300px) rotateZ(80deg) rotateY(-70deg) scale(0.7);
    filter: brightness(80%);
  }
  65% {
    transform: rotateZ(0deg) translateX(300px) rotateZ(0deg) rotateY(-70deg) scale(1);
    filter: brightness(100%);z-index: 99;
  }
  80% {
    transform: rotateZ(0deg) translateX(300px) rotateZ(0deg) rotateY(-70deg) scale(1);
    filter: brightness(100%);z-index: 99;
  }
  85% {
    transform: rotateZ(80deg) translateX(300px) rotateZ(-80deg) rotateY(-70deg) scale(0.8);
    filter: brightness(80%);
  }
  100% {
    transform: rotateZ(80deg) translateX(300px) rotateZ(-80deg) rotateY(-70deg) scale(0.8);
    filter: brightness(80%);
  }
}
</style>