<script setup lang="ts"></script>
<template>
  <div class="absolute inset-0 flex items-start gap-[14%]">
    <!-- 左侧元素 -->
    <div class="flex-1 relative h-full flex justify-center">
      <!-- 背景那一根线 -->
      <div class="h-full bg-[var(--color-bg-flow)] w-[5px]">
        <!-- 线底部的小圆球 -->
        <div
          class="absolute bottom-0 left-1/2 transform -translate-x-1/2 bg-[var(--color-bg-flow)] w-[15px] h-[15px] rounded-full"
        ></div>
      </div>
    </div>

    <!-- 右侧元素 -->
    <div class="flex-1 relative h-full flex justify-center">
      <!-- 背景那一根线 -->
      <div class="h-full bg-[var(--color-bg-flow)] w-[5px]">
        <!-- 线底部的小圆球 -->
        <div
          class="absolute bottom-0 left-1/2 transform -translate-x-1/2 bg-[var(--color-bg-flow)] w-[15px] h-[15px] rounded-full"
        ></div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.plus-area:hover .plus-icon {
  opacity: 1;
  border: 1px dashed var(--color-text);
}
</style>
