<template>
    <div class="line_left">
        <!-- 封装样式组件 -->
        <div v-for="item in lineList" :key="item" :style="{ width: item % 3 == 0 ? '5px' : '3px' }" class="line"></div>
    </div>
</template>
<script setup lang="ts">
import { ref, toRef, onUpdated } from 'vue';
const props = defineProps({
    // 传入的参数
    lineHeight: {
        type: Number,
        default: 0
    },
});
const lineHeight = toRef(props, 'lineHeight');
const lineList = ref(0);
onUpdated(() => {
    // 可以画几条线是父级高度/3 ，子级高度是1，间隔为2px，子级第一条长度为5px,后两个自己为3px,然后为5px
    lineList.value = parseInt((lineHeight.value / 3).toString());
});
</script>
<style scoped>
.line_left {
    height: 100%;
    position: absolute;
    right: 5px;
    top: 0;
    /* Added top property for positioning */
    /* 水平翻转 */
    transform: scaleX(-1);
    /* Added to flip the lines horizontally */
}

.line {
    width: 5px;
    height: 1px;
    background: rgb(39, 87, 140);
    margin: 2px 0;
}
</style>