soilgd12/src/views/User/HmOutFlux/irrigationWater/crossSection.vue

<template>
  <div class="cross-container">
    <h3 class="table-title">断面数据地图展示</h3>
    <div class="map-holder"><crosssectionmap/></div>

     <h3 class="table-title">断面数据详情</h3>
     <div><CrossSectionSamplelineData/></div>

     <h3 class="table-title"> 各河流Cd的平均浓度柱状图</h3>
     <div><CrossSetionData1/></div>

     <h3 class="table-title">各区县的Cd平均浓度柱状图</h3>
     <div><CrossSetionData2/></div>
  </div>

</template>

<script setup lang="ts">
import CrossSectionSamplelineData from '@/components/irrpollution/crossSectionSamplelineData.vue'
import CrossSetionData1 from '@/components/irrpollution/crossSetionData1.vue';
import CrossSetionData2 from '@/components/irrpollution/crossSetionData2.vue';
import crosssectionmap from '@/components/irrpollution/crosssectionmap.vue';

</script>

<style scoped>
.map-holder {
  position: relative;
  height: 600px; /* 减去标题高度，避免覆盖 */
  overflow: visible;
  z-index: 100;
}
.cross-container {
  position: relative !important; /* 防止被 Leaflet 修改 */
    overflow: visible !important; /* 确保标题不被裁剪 */
}
.table-title {
  /* 基础布局：左对齐 + 紧凑间距 */
  text-align: left;        /* 强制左对齐，告别居中 */
  margin: 12px 0;          /* 上下间距缩小，更紧凑（原16px→12px） */
  padding-left: 24px;      /* 给蓝色方块留空间 */
  position: relative;      /* 为伪元素定位做准备 */
  z-index: 200;

  /* 文字样式：简约但醒目 */
  font-size: 1.5rem;      /* 稍小一号，更克制（原1.5rem→1.25rem） */
  font-weight: 600;        /* 适度加粗，比正文突出但不夸张 */
  color: #1e88e5;          /* 统一蓝色，和方块颜色呼应 */
  line-height: 1.2;        /* 紧凑行高，避免臃肿 */
}

/* 蓝色小方块：用伪元素实现，无额外HTML */
.table-title::before {
  content: "";
  position: absolute;
  left: 0;                /* 靠最左侧 */
  top: 50%;              /* 垂直居中 */
  transform: translateY(-50%);
  width: 12px;           /* 方块大小，适中即可 */
  height: 12px;
  background-color: #1e88e5; /* 和文字同色，统一感 */
  border-radius: 2px;    /* 轻微圆角，比直角更柔和 */
}
</style>