<template>
<div class="line" :class="`type_${type}`"></div>
</template>

<script>
export default {
  name: "CustomLine",
  props: {
    type: {
      type: String,
      default: '1'
    }
  }
}
</script>

<style scoped lang="less">
  .line {
    height: 1px;
    width: 100%;
    position: relative;
    background-image: linear-gradient(-89deg, rgba(8,235,245,0.30) 0%, rgba(8,235,245,0.20) 39%, rgba(8,235,245,0.30) 97%);
    &.type_2 {
      width: 1px;
      height: 100%;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      &:before {
        top: 0;
        left: -1px;
        width: 2px;
        height: 6px;
      }
      &:after {
        top: 100%;
        right: 0px;
        width: 2px;
        height: 6px;
      }
    }
    &:before {
      position: absolute;
      left: 0;
      top: -1px;
      height: 2px;
      width: 6px;
      display: table;
      content: " ";
      background-color: #08EBF5;
    }
    &:after {
      position: absolute;
      right: 0;
      top: -1px;
      height: 2px;
      width: 6px;
      display: table;
      content: " ";
      background-color: #08EBF5;
    }
  }
</style>
