当前位置：首页 > news >正文

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

news 2025/8/20 10:31:53

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>