soilgd12/src/views/User/dataStatistics/SoilacidificationStatistics.vue

<template>
  <div class="layout-container">
    <!-- 第一列：酸化缓解数据组件 -->
    <div class="column column-1"> 
      <div class="component-container">
        <ReducedataStatistics />
      </div>
    </div>

    <!-- 第二列：酸化加剧数据组件 -->
    <div class="column column-2">
      <div class="component-container">
        <refluxcedataStatictics />
      </div>
    </div>
  </div>
</template>

<script>

import ReducedataStatistics from '@/components/soilStatictics/reducedataStatistics.vue';
import refluxcedataStatictics from '@/components/soilStatictics/refluxcedataStatictics.vue'

export default {
  components: {
    ReducedataStatistics,
    refluxcedataStatictics
  }
}
</script>

<style scoped>
/* 核心：网格布局统一控制尺寸 
.layout-container {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* 两列等宽 
  height: 400px;
  gap: 16px;                      /* 列/行间距 
  padding: 16px;                  /* 内边距 
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
}*/

/* 统一子组件外层容器：确保填充网格单元格 */
.component-container {
  width: 1000px;
  height: 500px;
  padding: 16px;
  margin: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}

/* 区分两列背景色（保留原有视觉差异） */
.column-1 .component-container {
  background: #f9fafc;
}
.column-2 .component-container {
  background: #f3f4f6;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .layout-container {
    grid-template-columns: 1fr; /* 小屏幕下单列布局 */
  }
}
</style>