css卡片横线100%宽度

所需样式:

横线不用border, 用单独一个div, 这样就不会影响父组件的padding

<div class="pumpDetailView">
							<div class="pump_title_name">
								<span>{{ pumpInfo.pointname }}</span>
								<div
									class="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;
					}
				}
			}