12/src/views/User/HmOutFlux/atmosDeposition/airSampleData.vue

<template>
  <div class="page-container">
    
   <div class="calculation-selector">
    <span class="selector-title">计算方式：</span>
    <select 
      v-model="calculationMethod" 
      class="calculation-select"
    >
      <option value="weight">按重量计算</option>
      <option value="volume">按体积计算</option>
    </select>
  </div>

   <div class="point-map">
    <div class="component-title">采样点地图展示</div>
    <div class="map-holder">
      <atmsamplemap :calculation-method="calculationMethod"/>
     </div>
   </div>

  
   <div class="point-line">
    <div class="component-title">采样点数据列表展示</div>
    <AirsampleLine :calculation-method="calculationMethod"/>
   </div>

   <div>
    <div class="component-title">各区县平均大气重金属污染柱状图</div>
    <AirsampleChart :calculation-method="calculationMethod"/>
   </div>
  </div>
</template>
<!--污染企业-->

<script setup>
import {ref} from 'vue'
import AirsampleLine from '@/components/atmpollution/airsampleLine.vue';
import atmsamplemap from '@/components/atmpollution/atmsamplemap.vue';
import AirsampleChart from '@/components/atmpollution/airsampleChart.vue';

const calculationMethod = ref('weight')


</script>

<style scoped>
.page-container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 整屏高度 */
  padding: 0;
  box-sizing: border-box;
  
  gap: 20px;
  margin: 0;
}

.calculation-select {
  padding: 12px 24px;
  border: 2px solid #ddd;
  border-radius: 6px;
  font-size: 16px;
  color: #333;
  background-color: #fff;
  cursor: pointer;
}
.calculation-select:focus {
  outline: none;
  border-color: #1e88e5;
}


.map-holder {
  position: relative;
  height: 450px;
  z-index: 100; /* 保持地图在中间层级 */
  overflow: visible; /* 允许内容溢出 */
}
.point-map {
    flex: 0 0 70%;
    margin-bottom: 20px;
    
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,1);
    overflow: visible;
}

.point-line {
    border-radius: 12px;/*圆角 */
    box-shadow: 0 2px 8px rgba(0, 0,0, 0.08);
    padding: 16px;/*内部间距 */
    box-sizing: border-box;
}
.charts-line{
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 16px;
  box-sizing: border-box;
  max-width: 1800px;
  width: 100%;
  margin: 20px auto;
}
.component-title {
  /* 基础布局：左对齐 + 紧凑间距 */
  text-align: left;        /* 强制左对齐，告别居中 */
  margin: 12px 0;          /* 上下间距缩小，更紧凑（原16px→12px） */
  padding-left: 24px;      /* 给蓝色方块留空间 */
  position: relative;      /* 为伪元素定位做准备 */

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

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

</style>