完整教程：CSS封装大屏自定义组件（标签线）

1. 数据标签线

设计图：

实现效果：

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

<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>

调用：

<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>