缺陷修复方案 · Excel第81行 · 批次标签按钮右侧数字角标遮挡文字

① 基本信息

问题描述	项目资料信息页面，批次标签按钮右边的数字遮挡了文字，按钮需要加宽
一级模块	并网资料信息
二级模块	并网资料信息
涉及类型	全部类型
台账标注区域	五区
严重性	严重
当前状态	2.1.待开发
研发处理人	王献梓
处理状态	待调整

② 问题截图

批次标签数字角标遮挡文字 — "第一批"标签上的蓝色数字角标"3"覆盖压住了"第一"两字，标签按钮宽度未随角标预留空间

③ 旧代码涉及的项目文件及行数（backup730 分支）

xnybw5f / src/approval/projectData/component/batchInfo.vue 第 3-24 行（el-tab-pane 标签模板，badge-box 角标结构）

xnybw5f / src/approval/projectData/component/batchInfo.vue 第 4811-4834 行（.badge-box / .badge-item-red / .badge-item-blue 样式定义）

④ 代码现状与修复方案

批次 Tab 标签的模板结构（el-tab-pane 的 slot="label"）里，文字 infoItem.batchText（如"第一批"）和数字角标 badge-box 是写在同一个 span.tab-item-label 里的：

<span slot="label" style="bottom: -14px;">
  <span class="tab-item-label">
    {{ infoItem.batchText }}
    ...
    <span class="badge-box">
      <span v-if="getFlowCount(infoIndex) > 0"><span class="badge-item-red">{{ getFlowCount(infoIndex) }}</span></span>
      <span v-if="infoItem.informationStatusList['待审核'] > 0">
        <span class="badge-item-blue">{{ infoItem.informationStatusList['待审核'] }}</span>   // 截图中显示的蓝色"3"
      </span>
    </span>
  </span>
</span>

问题出在角标的 CSS 定位方式——.badge-box 用的是 position: absolute 脱离文档流悬浮显示，而不是跟在文字后面按正常流排布：

.badge-box {
  position: absolute;   // 脱离文档流，不占用标签宽度
  top: -20px;
  right: 28px;           // 用固定right值贴在标签右侧
}
.badge-item-red, .badge-item-blue {
  width: 25px; height: 25px; line-height: 25px;
  border-radius: 50%;
  ...
}

因为角标是绝对定位、脱离文档流的，Element UI 的 el-tabs__item 标签宽度只根据"第一批"这几个字的文字宽度自动撑开，完全没有为角标预留额外空间；当角标（固定 right: 28px）比标签文字本身还宽，或者标签文字较短（如截图中的"第一"）时，角标就会直接压在文字上面。

示意（角标绝对定位悬浮在文字右上方，未撑开按钮宽度）：

第一3

建议修复方式：不再用 position: absolute 让角标悬浮，改为角标跟随文字按正常inline流排布（用 display:inline-flex + 文字和角标之间加 margin-left），并给 .el-tabs__item 增加固定的右侧内边距为角标预留空间：

.badge-box {
  position: absolute;
  top: -20px;
  right: 28px;
}
.badge-box {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 8px;   // 跟随文字正常排布，自动撑开tab宽度
}
.el-tabs__item {
  padding-right: 34px !important; // 额外为角标预留空间，避免和相邻tab拥挤
}