<template>
    <div className='wrap'>
        <div className='planet'>
            <div className='top_ball center_in'>
                <svg class="arch_icon_star" aria-hidden="true">
                    <defs>
                        <linearGradient id="myGradient" x1="0%" y1="100%" x2="0%" y2="0%">
                            <stop offset="0%" stop-color="rgb(20, 188, 244)" />
                            <stop offset="100%" stop-color="#ffffff" />
                        </linearGradient>
                    </defs>
                    <use xlink:href="#icon-user" fill="url('#myGradient')" />
                </svg>
                <div class="text_star_title">
                    <span class="circle_title_box">测试</span>
                    <span class="circle_num_star">33</span>
                </div>
            </div>
            <div className='right_ball center_in'>
                <svg class="arch_icon_star" aria-hidden="true">
                    <defs>
                        <linearGradient id="myGradient" x1="0%" y1="100%" x2="0%" y2="0%">
                            <stop offset="0%" stop-color="rgb(20, 188, 244)" />
                            <stop offset="100%" stop-color="#ffffff" />
                        </linearGradient>
                    </defs>
                    <use xlink:href="#icon-guide" fill="url('#myGradient')" />
                </svg>
                <div class="text_star_title">
                    <span class="circle_title_box">测试</span>
                    <span class="circle_num_star">33</span>
                </div>
            </div>
            <div className='bottom_ball center_in'>
                <svg class="arch_icon_star" aria-hidden="true">
                    <defs>
                        <linearGradient id="myGradient" x1="0%" y1="100%" x2="0%" y2="0%">
                            <stop offset="0%" stop-color="rgb(20, 188, 244)" />
                            <stop offset="100%" stop-color="#ffffff" />
                        </linearGradient>
                    </defs>
                    <use xlink:href="#icon-park" fill="url('#myGradient')" />
                </svg>
                <div class="text_star_title">
                    <span class="circle_title_box">测试</span>
                    <span class="circle_num_star">33</span>
                </div>
            </div>
            <div className='left_ball center_in'>
                <svg class="arch_icon_star" aria-hidden="true">
                    <defs>
                        <linearGradient id="myGradient" x1="0%" y1="100%" x2="0%" y2="0%">
                            <stop offset="0%" stop-color="rgb(20, 188, 244)" />
                            <stop offset="100%" stop-color="#ffffff" />
                        </linearGradient>
                    </defs>
                    <use xlink:href="#icon-work" fill="url('#myGradient')" />
                </svg>
                <div class="text_star_title">
                    <span class="circle_title_box">测试</span>
                    <span class="circle_num_star">33</span>
                </div>
            </div>
        </div>
        <div class="middle_circle">
            <div class="flex_column">
                <span class="num_circle orange_color_cir">2324</span>
                <span class="num_circle_11 orange_color_cir">测试</span>
            </div>
            <div class="cir_star"></div>
            <div class="flex_column">
                <span class="num_circle blue_color_cir">4599</span>
                <span class="num_circle_11 blue_color_cir">测试</span>
            </div>
        </div>
    </div>
</template>

<script setup>
</script>

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

.planet {
    position: absolute;
    border-top: 3px solid rgb(156, 192, 218);
    border-bottom: 3px solid rgb(156, 192, 218);
    background: radial-gradient(circle,
            rgba(51, 149, 233, 0) 100px,
            rgba(51, 149, 233, 0) 100px);
    transform-style: preserve-3d;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    transform: scaleY(0.5) rotateZ(15deg);
    animation: planet-rotate 20s linear infinite;
}

.middle_circle {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    // top: calc(50% - 25px);
    border: 1px solid rgb(156, 192, 218);
    background: radial-gradient(circle, rgba(0, 0, 0, 0), rgba(30, 144, 255, 0.7));
    border-radius: 50%;
    box-shadow: 0 0 20px 13px rgba(30, 144, 255, 0.5);
}

.flex_column {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cir_star {
    width: 70%;
    height: 1px;
    background-color: rgb(96, 154, 197);
    margin: 3px 0px;
}

.num_circle {
    font-size: 15px;
    font-weight: bold;
}

.num_circle_11 {
    font-size: 10px;
}

.text_star_title {
    position: absolute;
    right: -45px;
    display: flex;
    flex-direction: column;
}

.circle_title_box {
    font-size: 17px;
    font-weight: bold;
    background-image: -webkit-linear-gradient(bottom, rgb(193, 148, 78), rgb(229, 232, 236));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.circle_num_star {
    font-size: 14px;
    color: #DCDFE6;
}

.top_ball {
    width: 50px;
    height: 50px;
    position: absolute;
    border-radius: 50%;
    background-color: rgb(9, 29, 56);
    box-shadow: inset 0px 0px 10px 2px rgb(20, 127, 228);
    left: calc(50% - 25px);
    top: -25px;
    transform: rotateZ(-15deg) scaleY(2);
    animation: self-rotate 20s linear infinite;
    border: 1px solid rgb(156, 192, 218);
}

.right_ball {
    width: 50px;
    height: 50px;
    position: absolute;
    border-radius: 50%;
    background-color: rgb(9, 29, 56);
    box-shadow: inset 0px 0px 10px 2px rgb(20, 127, 228);
    right: -25px;
    top: calc(50% - 25px);
    transform: rotateZ(-15deg) scaleY(2);
    animation: self-rotate 20s linear infinite;
    border: 1px solid rgb(156, 192, 218);
}

.bottom_ball {
    width: 50px;
    height: 50px;
    position: absolute;
    border-radius: 50%;
    background-color: rgb(9, 29, 56);
    box-shadow: inset 0px 0px 10px 2px rgb(20, 127, 228);
    bottom: -25px;
    left: calc(50% - 25px);
    transform: rotateZ(-15deg) scaleY(2);
    animation: self-rotate 20s linear infinite;
    border: 1px solid rgb(156, 192, 218);
}

.left_ball {
    width: 50px;
    height: 50px;
    position: absolute;
    border-radius: 50%;
    background-color: rgb(9, 29, 56);
    box-shadow: inset 0px 0px 10px 2px rgb(20, 127, 228);
    left: -25px;
    top: calc(50% - 25px);
    transform: rotateZ(-15deg) scaleY(2);
    animation: self-rotate 20s linear infinite;
    border: 1px solid rgb(156, 192, 218);
}

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

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

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

    100% {
        transform: rotate(-360deg) scaleY(2) rotate(-15deg);
    }
}

.arch_icon_star {
    width: 25px;
    height: 25px;
}

.orange_color_cir {
    background-image: -webkit-linear-gradient(bottom, rgb(193, 148, 78), rgb(229, 232, 236));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.blue_color_cir {
    background-image: -webkit-linear-gradient(bottom, rgb(20, 127, 228), rgb(229, 232, 236));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
</style>
