CSS封装大屏自定义组件（标签线）

1. 数据标签线

设计图：

实现效果：

封装：

DataLine.vue （单位根据实际项目使用进行转换）

bash 复制代码

<template>
  <div class="data-line">
    <span class="dot" aria-hidden="true"></span>
    <span class="line">
        <span class="line-main" aria-hidden="true"></span>
        <span class="line-fold" aria-hidden="true"></span>
    </span>
  </div>
</template>

<script>
export default {
  name: "DataLine"
}
</script>

<style scoped>
.data-line {
    display: inline-flex;
    align-items: center;
    gap: 0px; /* 圆点与直线之间的间距，可按需调整 */
    font-size: 0; /* 防止行高影响像素对齐 */
}

/* 圆点：5px，实心圆 */
.data-line .dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #749BED;
    flex: 0 0 5px;
    /* 为了在高分屏或缩放下更清晰，可使用 translateY 精细调整 */
    transform: translateY(0.5px);
}

/* 整条线的包装，用于放两段 */
.data-line .line {
    display: inline-flex;
    align-items: center;
    position: relative;
    height: 1px; /* 基线高度（线条粗细） */
    /* 禁止被拉伸 */
    flex: 0 0 auto;
}

/* 水平主段：86px 长，厚度 1px */
.data-line .line-main {
    display: inline-block;
    width: 86px;        /* 110 - 24 */
    height: 1px;
    background: #749BED;
    flex: 0 0 86px;
    vertical-align: middle;
    opacity: 0.5;
}

/* 折角段：24px, 旋转 -60deg 使其向右下斜，夹角与主段为 120deg */
.data-line .line-fold {
    display: inline-block;
    width: 24px;
    height: 1px;
    background: #749BED;
    transform-origin: left center;
    transform: rotate(60deg) translateY(-0.5px); /* translateY 用来微调像素对齐 */
    flex: 0 0 24px;
    /* 为了避免旋转后影响布局，设置 margin-left 负值把折角的起点与主段衔接 */
    margin-left: -1px;
    opacity: 0.5;
}
</style>

调用：

bash 复制代码

<template>
  <div class="page">
    <!-- 多次调用 -->
    <DataLine style="position: absolute;left: 0.08rem;top: 0.56rem;"/>
    <DataLine style="position: absolute;right: 0.08rem;top: 0.56rem;transform: rotateY(180deg)"/>
    <DataLine style="position: absolute;left: 0.08rem;bottom: 0.76rem;"/>
    <DataLine style="position: absolute;right: 0.08rem;bottom: 0.76rem;transform: rotateY(180deg)"/>
  </div>
</template>

<script>
import DataLine from "@/components/DataLine.vue";

export default {
  components: { DataLine }
}
</script>