<template>
  <div>
    <div style="width: 400px;padding-top: 50px;">
      <HeadlineTag value="会议系统"></HeadlineTag>
      <div className='wrap'>
        <div className='planet'>
          <div className='top_ball center_in'>
            <div>
              <span>测试</span>
              <span>123</span>
            </div>
          </div>
          <div className='right_ball center_in'>2</div>
          <div className='bottom_ball center_in'>3</div>
          <div className='left_ball center_in'>4</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import HeadlineTag from '@/components/HeadlineTag'
const type = 'right'
</script>

<style scoped lang="scss">
.wrap {
  display: flex;
  width: 600px;
  height: 600px;
  align-items: center;
  justify-content: center;
}

.planet {
  position: absolute;
  border: 2px solid #fff;
  transform-style: preserve-3d;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  transform: scaleY(0.5) rotateZ(198deg);
  animation: planet-rotate 20s linear infinite;
}

.top_ball {
  width: 50px;
  height: 50px;
  position: absolute;
  border-radius: 50%;
  background-color: yellowgreen;
  left: calc(50% - 25px);
  top: -25px;
  transform: rotateZ(-198deg) scaleY(2);
  animation: self-rotate 20s linear infinite;
}

.right_ball {
  width: 50px;
  height: 50px;
  position: absolute;
  border-radius: 50%;
  background-color: yellowgreen;
  right: -25px;
  top: calc(50% - 25px);
  transform: rotateZ(-198deg) scaleY(2);
  animation: self-rotate 20s linear infinite;
}

.bottom_ball {
  width: 50px;
  height: 50px;
  position: absolute;
  border-radius: 50%;
  background-color: yellowgreen;
  bottom: -25px;
  left: calc(50% - 25px);
  transform: rotateZ(-198deg) scaleY(2);
  animation: self-rotate 20s linear infinite;
}

.left_ball {
  width: 50px;
  height: 50px;
  position: absolute;
  border-radius: 50%;
  background-color: yellowgreen;
  left: -25px;
  top: calc(50% - 25px);
  transform: rotateZ(-198deg) scaleY(2);
  animation: self-rotate 20s linear infinite;
}

@keyframes planet-rotate {
  0% {
    transform: rotate(198deg) scaleY(0.5) rotate(0);
  }

  100% {
    transform: rotate(198deg) scaleY(0.5) rotate(360deg);
  }
}

@keyframes self-rotate {
  0% {
    transform: rotate(0) scaleY(2) rotate(-198deg);
  }

  100% {
    transform: rotate(-360deg) scaleY(2) rotate(-198deg);
  }
}
</style>
