<template>
  <div class="bodys">
    <div class="info">
      <div class="round">
        <div style="left: 0">[</div>
        <div style="right: 0">]</div>
        <div class="box"></div>
      </div>
      <div class="text">{{ title }}</div>
    </div>
    <div class="nextline">
      <div class="dian1">
        <div class="lines"></div>
      </div>
      <div class="line">
        <div class="lines"></div>
      </div>
      <div class="dian2">
        <div class="lines"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
defineProps({
  title: {
    type: String,
    default: "",
  },
  color: {
    type: String,
    default: "#18FEFE",
  },
});
</script>

<style lang="scss" scoped>
.bodys {
  text-align: center;
  display: flex;
  flex-direction: column;
  height: 4.1vh;
  width: 100%;
  .nextline {
    display: flex;
    align-items: center;
  }
  .info {
    display: flex;
    align-items: center;
    .text {
      color: white;
      font-size: 2.5vh;
      margin-left: 0.3vw;
    }
    .round {
      height: 2.4vh;
      width: 2vw;
      font-size: 2.6vh;
      line-height: 2.6vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 0.3vw;
      color: white;
      position: relative;
      transform: translateY(-0.31vh);
      div {
        color: #18fefe;
        position: absolute;
      }
      .box {
        width: 0.5vw;
        height: 0.5vw;
        background-color: #18fefe;
      }
    }
  }
  .line {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.5vw;
    .lines {
      width: 100%;
      border: 1px solid rgba(255, 255, 255, 0.2);
      height: 0vh;
      border-top: 0;
      border-right: 0;
      border-left: 0;
    }
  }
  .dian1 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2vw;
    .lines {
      width: 2vw;
      border: 0.4vh solid rgba(255, 255, 255, 1);
      height: 0vh;
      border-top: 0;
      border-right: 0;
      border-left: 0;
    }
  }
  .dian2 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.5vw;
    .lines {
      width: 0.5vw;
      border: 0.3vh solid rgb(24, 254, 254);
      height: 0vh;
      border-top: 0;
      border-right: 0;
      border-left: 0;
    }
  }
}
</style>
