<template>
  <div class="circle-container">
    <div
        v-for="(circle, index) in circles"
        :key="index"
        :style="circle.style as any"
        class="hero-box-circle"
    ></div>
  </div>
</template>

<script lang="ts" setup>
import {computed} from 'vue';

// 定义同心圆的数量
const circleCount = 10;

// 计算每个同心圆的样式
const circles = computed(() => {
  const circlesArray = [];
  for (let i = 0; i < circleCount; i++) {
    const size = 300 + (i + 1) * 300; // 每个圆的大小递增
    const maxOffset = 20 + 7 * (i + 1); // 最大偏移量递增
    const randomOffsetX = Math.random() * (maxOffset + maxOffset) - maxOffset; // 随机偏移量X
    const randomOffsetY = Math.random() * (maxOffset + maxOffset) - maxOffset; // 随机偏移量Y
    circlesArray.push({
      style: {
        width: `${size}px`,
        height: `${size}px`,
        borderRadius: '50%',
        position: 'absolute',
        top: `20%`,
        left: `20%`,
        //设置层级
        transform: `translate(${randomOffsetX - size / 2}px, ${randomOffsetY - size / 2}px)`,
        zIndex: circleCount - i,
      },
    });
  }
  return circlesArray;
});
const {$gsap} = useNuxtApp()
onMounted(() => {
  $gsap.fromTo('.hero-box-circle', {
    opacity: 0,
    scale: 0.8,
  }, {
    opacity: 1,
    scale: 1,
    duration: 0.6,
    delay: 1,
    ease: 'power3.out',
    stagger: {
      each: 0.1, // 每个动画之间的延迟
      from: 'center' // 从中间开始展开
    },
  });
})
</script>

<style lang="scss" scoped>
@import "base";

.circle-container {
  position: relative;
  width: 100%;
  height: 5000px;
  margin: auto;
  //background: radial-gradient(50% 50% at 50% 50%, rgba($primary-color, 0.2) 0%, $primary-color 100%);
  background: radial-gradient(36.28% 150.93% at 50% 50%, #3B8AFF 0%, #0048B2 100%);
}


.hero-box-circle {
  //background: radial-gradient(50% 50% at 50% 50%, rgba($primary-color, 0.2) 0%, $primary-color 100%);
  box-shadow: 24px 32px 184px 24px rgba(6, 8, 89, 0.75) inset;
}
</style>
