soilgd12/src/views/User/heavyMetalFluxCalculation/inputFluxCalculation/waterdata/rivermessage.vue

<template>
  <div>
    <router-view></router-view> <!-- 关键：子路由渲染位置 -->
  </div>
  <div class="container">
    <div class="main-content">
      <section id="sampling" class="section">
        <h3>采样过程</h3>
        
        <!-- 采样设备图片：3张并排展示 -->
        <div class="image-container">
          <div class="image-row">
            <div class="image-item">
              <img :src="samplingDeviceImg1" alt="灌溉水采样设备1">
              <div class="image-caption">图3-1 灌溉水采样设备</div>
            </div>
            <div class="image-item">
              <img :src="samplingDeviceImg2" alt="灌溉水采样设备2">
              <div class="image-caption">图3-2 灌溉水采样设备</div>
            </div>
            <div class="image-item">
              <img :src="samplingDeviceImg3" alt="灌溉水采样设备3">
              <div class="image-caption">图3-3 灌溉水采样设备</div>
            </div>
          </div>
        </div>

        <h4>采样容器均为500mL的白色聚乙烯瓶，采样体积均为500mL，采样过程在不同天气条件下进行，主要天气状况包括多云、阴天和小雨，采样点周边环境主要为河流，只有少数样品采集于水渠或瀑布区域。</h4>
        <br>
        <h4>绝大多数样品状态为无色、无沉淀、无味、无悬浮物，只有少量样品稍显浑浊并含有沉淀物。为了保证样品的完整性和数据的准确性，采样后的保存方式包括了冷藏、避光、确保标签完好以及采取有效的减震措施，以避免运输过程中的振动和损坏。</h4>

        <!-- 工作人员采样现场：3张并排展示 -->
        <div class="image-container">
          <div class="image-row">
            <div class="image-item">
              <img :src="workerSamplingImg1" alt="工作人员采样现场1">
              <div class="image-caption">图4-1 工作人员采样现场</div>
            </div>
            <div class="image-item">
              <img :src="workerSamplingImg2" alt="工作人员采样现场2">
              <div class="image-caption">图4-2 工作人员采样现场</div>
            </div>
            <div class="image-item">
              <img :src="workerSamplingImg3" alt="工作人员采样现场3">
              <div class="image-caption">图4-3 工作人员采样现场</div>
            </div>
          </div>
        </div>
      </section>
    </div>
    
    <footer>
      <p>韶关市环境科学研究院 &copy; 2024 | 水质研究报告</p>
    </footer>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 导入所有图片（确保文件名和路径完全匹配！）
import samplingDeviceImg1 from '@/assets/samplingequipment1.png';
import samplingDeviceImg2 from '@/assets/samplingequipment2.png';
import samplingDeviceImg3 from '@/assets/samplingequipment3.png';
import workerSamplingImg1 from '@/assets/samplingsite1.png';
import workerSamplingImg2 from '@/assets/samplingsite2.png';
import workerSamplingImg3 from '@/assets/samplingsite3.png';
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

onMounted(() => {
  console.log('当前路由参数:', route.params)
  console.log('匹配的子路由:', route.matched)
})
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}

body {
  background-color: #f5f9fc;
  color: #333;
  line-height: 1.6;
  padding: 20px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
}

.main-content {
  width: 100%;
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.section {
  margin-bottom: 40px;
  padding-bottom: 30px;
}

h3 {
  color: #1e5799;
  font-size: 1.6rem;
  margin-bottom: 20px;
  position: relative;
  padding-left: 25px;
}

h3:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  background: #2989d8;
  border-radius: 4px;
}

/* 缩小段落字体 */
p {
  font-size: 0.9rem; /* 原来可能是1rem，现在缩小 */
  color: #444;
  line-height: 1.8;
  text-align: justify;
  margin-bottom: 15px;
}

/* 图片容器：放大图片 + 并排布局 */
.image-container {
  background-color: #f8fbff;
  border: 1px solid #dbe9f5;
  border-radius: 10px;
  margin: 20px auto;
  padding: 20px;
  text-align: center;
  max-width: 90%;
}

/* 图片行：并排展示 */
.image-row {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap; /* 屏幕小的时候自动换行 */
}

/* 单个图片项：放大显示 */
.image-item {
  flex: 1;
  min-width: 250px; /* 保证最小宽度 */
}

.image-item img {
  width: 100%; /* 占满容器，自然放大 */
  height: auto; /* 保持比例 */
  border-radius: 8px;
}

.image-caption {
  font-style: italic;
  color: #666;
  margin-top: 8px;
  font-size: 0.85rem;
}

footer {
  text-align: center;
  margin-top: 30px;
  padding-top: 20px;
  color: #777;
  font-size: 0.9rem;
  border-top: 1px solid #eee;
}
</style>