<template>
    <div class="bottom_line">
        <!-- 封装样式组件 -->
         <div class="left_big"></div>
         <div class="left_long_line"></div>
         <div class="left_dian"></div>
         <div class="left_short_line "></div>
         <div class="center_short_line animate__animated animate__flash animate__infinite animate__slower"></div>
         <div class="left_short_line"></div>
         <div class="left_dian"></div>
         <div class="left_long_line"></div>
         <div class="left_big"></div>
    </div>
    <div class="both_line">
        <div class="both_line_one"></div>
        <div class="both_line_two"></div>
    </div>
  </template>
  <script setup lang="ts">
   
  </script>
  <style scoped>
  @keyframes both_line_one {
    10% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
    
  }
  @keyframes both_line_two {
    25% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
  }
    .bottom_line{
        width: 98%;
        height: 10%;
        max-height: 20px;
        position: absolute;
        bottom: 0%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .left_big{
            width: 3%;
            height: 2px;
            background-color:#AAE1FF;
        }
        .left_long_line{
            width: 38%;
            height: 1px;
            background-color: #05599C;
        }
        .left_dian{
            width: 2px;
            height: 2px;
            background-color: #fff;
            border-radius: 50%;
        }
        .left_short_line{
            width: 2%;
            height: 1px;
            background-color: #05599C;
        }
        .center_short_line{
            width: 2%;
            height: 1px;
            background-color: #05599C;
        }
    }
    .both_line{
        width: 98%;
        height: 2px;
        position: absolute;
        display: flex;
        justify-content: space-between;
        align-items: center;
        bottom: 0%;
        .both_line_one{
            width: 10%;
            height: 1px;
            background-color: #AAE1FF;
            animation: both_line_one 3s linear infinite;
            transform-origin: left center;
        }
        .both_line_two{
            width: 10%;
            height: 1px;
            background-color: #AAE1FF;
            animation: both_line_two 2s linear infinite;
            transform-origin: right center;
        }
    }
  </style>
  
  