12/src/views/User/heavyMetalFluxCalculation/inputFluxCalculation/waterdata/point.vue

<template>
  <div class="page-container">
    
   <div class="point-map">
    <div class="component-title">采样点地图展示</div>
   <TencentMapView/>
   </div>

  
   <div class="point-line">
    <div class="component-title">采样点数据列表展示</div>
    <Waterdataline/>
   </div>

   <div class="charts-line">
    <div class="component-title">韶关市各区县重金属平均浓度</div>
    <Waterassaydata2/>
   </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, computed } from 'vue';
import * as echarts from 'echarts';
import TencentMapView from './tencentMapView.vue';
import Waterdataline from './waterdataline.vue';
import Waterassaydata2 from './waterassaydata2.vue';




</script>

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

.point-map {
    flex: 0 0 70%;
    margin-bottom: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,1);
    overflow: hidden;
}

.point-line {
    background-color: white;
    border-radius: 12px;/*圆角 */
    box-shadow: 0 2px 8px rgba(0, 0,0, 0.08);
    padding: 16px;/*内部间距 */
    box-sizing: border-box;
}
.charts-line{
  background-color: white;
  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.7rem;      /* 稍小一号，更克制（原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>