css卡片横线100%宽度

所需样式:
在这里插入图片描述
横线不用border, 用单独一个div, 这样就不会影响父组件的padding

<div class="pumpDetailView"><div class="pump_title_name"><span>{{ pumpInfo.pointname }}</span><divclass="point_state":style="{background:pumpInfo.pointstate == 1? '#1FC26B': pumpInfo.pointstate == 3? '#FABB2D': ''}">{{ changePointsStateHandle(pumpInfo.pointstate) }}</div></div><div class="pump_title_line"></div><ul class="pump_detail_points"><template v-for="(pointItem, pointInd) in pumpInfo.pointDatas"><li><span class="pump_title_label">{{ pointItem.pointname }}：</span><span class="pump_title_value">{{ pointItem.value }}<span v-show="pointItem.unit">{{pointItem.unit}}</span></span></li></template></ul></div>

css样式: pump_title_line是重点

.pumpDetailView {width: 100%;height: 210px;box-sizing: border-box;.pump_title_name {padding-bottom: 12px;> span {margin-left: 0;margin-right: 10px;}.point_state {padding: 2px;font-size: 12px;font-weight: normal;letter-spacing: 0px;font-feature-settings: "kern" on;color: #ffffff;border-radius: 4px;background: #bcc2cc;}}.pump_title_line {width: calc(100% + 24px);height: 1px;background-color: #f0f2f4;margin-left: -12px;}.pump_detail_points {display: flex;flex-wrap: wrap;width: 100%;padding: 8px 0 0;li {width: 50%;line-height: unset;padding: 2px 0;}}}