12/src/views/User/HmOutFlux/irrigationWater/samplingMethodDevice1.vue

<template>
  <div class="sampling-process">
    <!-- 采样容器与过程部分 -->
    <div class="section-container">
      <div class="section-header">
        <div class="section-number">1</div>
        <h2>采样容器与过程</h2>
      </div>
      
      <div class="section-content">
        <div class="description-card">
          <div class="icon">🧪</div>
          <div class="description-text">
            <p>
              采样容器均为500mL的白色聚乙烯瓶，采样体积均为500mL，采样过程在不同天气条件下进行，
              主要天气状况包括多云、阴天和小雨，采样点周边环境主要为河流，只有少数样品采集于水渠或瀑布区域。
            </p>
          </div>
        </div>
        
        <div class="image-gallery">
          <div class="image-card">
            <el-image :src="image1" alt="采样容器" class="sampling-image"></el-image>
            <div class="image-info">
              <h3>采样容器</h3>
              <p>500mL白色聚乙烯瓶，符合水质采样标准</p>
            </div>
          </div>
          
          <div class="image-card">
            <el-image :src="image2" alt="采样现场" class="sampling-image"></el-image>
            <div class="image-info">
              <h3>采样现场</h3>
              <p>河流环境采样，多云天气条件下进行</p>
            </div>
          </div>
          
          <div class="image-card">
            <el-image :src="image3" alt="灌溉水采样设备" class="sampling-image"></el-image>
            <div class="image-info">
              <h3>灌溉水采样设备</h3>
              <p>专业水质采样设备，确保样品完整性</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 样品保存与现场情况部分 -->
    <div class="section-container">
      <div class="section-header">
        <div class="section-number">2</div>
        <h2>样品保存与现场情况</h2>
      </div>
      
      <div class="section-content">
        <div class="preservation-info">
          <div class="preservation-card">
            <div class="preservation-icon">🌡️</div>
            <div>
              <h3>样品保存</h3>
              <ul>
                <li>冷藏保存，温度控制在4℃</li>
                <li>避光处理，防止光化学反应</li>
                <li>标签完好，清晰记录采样信息</li>
                <li>减震措施，防止运输过程损坏</li>
              </ul>
            </div>
          </div>
          
          <div class="preservation-card">
            <div class="preservation-icon">🔍</div>
            <div>
              <h3>样品状态</h3>
              <ul>
                <li>绝大多数样品：无色、无沉淀、无味、无悬浮物</li>
                <li>少数样品：稍显浑浊并含有沉淀物</li>
              </ul>
            </div>
          </div>
        </div>
        
        <div class="field-gallery">
          <div class="field-card">
            <el-image :src="fieldImage1" alt="工作人员采样现场" class="sampling-image"></el-image>
            <div class="field-info">
              <h3>河流采样现场</h3>
              <p>多云天气下的河流采样工作</p>
            </div>
          </div>
          
          <div class="field-card">
            <el-image :src="fieldImage2" alt="工作人员采样现场" class="sampling-image"></el-image>
            <div class="field-info">
              <h3>水渠采样现场</h3>
              <p>小雨天气下的水渠采样工作</p>
            </div>
          </div>
          
          <div class="field-card">
            <el-image :src="fieldImage3" alt="工作人员采样现场" class="sampling-image"></el-image>
            <div class="field-info">
              <h3>瀑布区域采样</h3>
              <p>特殊地形条件下的采样工作</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      image1: '/图1.png',
      image2: '/图片2.png',
      image3: '/图片3.png',
      fieldImage1: '/图片4.jpg',
      fieldImage2: '/图片5.jpg',
      fieldImage3: '/图片6.jpg'
    };
  }
};
</script>

<style scoped>
.sampling-process {
  padding: 30px;
  background: linear-gradient(135deg, rgba(245, 250, 255, 0.85) 0%, rgba(235, 245, 255, 0.85) 100%);
  position: relative;
  overflow: hidden;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.sampling-process::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('https://images.unsplash.com/photo-1518834107812-67b0b7c58434?q=80&w=2070&auto=format&fit=crop') center/cover;
  opacity: 0.12;
  z-index: -1;
  filter: blur(2px);
}

.section-container {
  margin-bottom: 50px;
  padding: 30px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 25px rgba(0, 60, 120, 0.08);
  transition: all 0.4s ease;
  overflow: hidden;
  position: relative;
}

.section-container:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 35px rgba(0, 60, 120, 0.15);
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  position: relative;
  padding-bottom: 15px;
  border-bottom: 2px solid rgba(58, 160, 207, 0.25);
}

.section-number {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #4a9ef7, #3a9fd3);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: bold;
  margin-right: 20px;
  box-shadow: 0 5px 12px rgba(74, 158, 247, 0.25);
}

h2 {
  color: #1a365d;
  font-size: 1.9rem;
  margin: 0;
  font-weight: 650;
  letter-spacing: 0.5px;
}

.section-content {
  padding: 0 10px;
}

.description-card {
  display: flex;
  align-items: flex-start;
  margin-bottom: 30px;
  padding: 20px;
  background: rgba(235, 245, 255, 0.6);
  border-radius: 15px;
}

.icon {
  font-size: 2.5rem;
  margin-right: 25px;
  color: #3a9fd3;
}

.description-text p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #2d3748;
  margin: 0;
}

/* 图片画廊样式 */
.image-gallery, .field-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin-top: 20px;
}

.image-card, .field-card {
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease;
  background: white;
}

.image-card:hover, .field-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.sampling-image {
  width: 100%;
  height: 230px;
  display: block;
  object-fit: cover;
  transition: transform 0.4s ease;
  background: rgba(245, 249, 255, 0.4);
}

.image-card:hover .sampling-image, .field-card:hover .sampling-image {
  transform: scale(1.05);
}

.image-info, .field-info {
  padding: 20px;
}

.image-info h3, .field-info h3 {
  color: #1a365d;
  font-size: 1.25rem;
  margin-top: 0;
  margin-bottom: 10px;
}

.image-info p, .field-info p {
  font-size: 0.95rem;
  color: #4a5568;
  margin: 0;
  line-height: 1.6;
}

/* 样品保存信息 */
.preservation-info {
  display: flex;
  gap: 25px;
  margin-bottom: 35px;
}

.preservation-card {
  flex: 1;
  display: flex;
  padding: 20px;
  background: rgba(245, 252, 255, 0.7);
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  border-left: 4px solid #3a9fd3;
}

.preservation-icon {
  font-size: 2.2rem;
  margin-right: 20px;
  color: #3a9fd3;
}

.preservation-card h3 {
  color: #1a365d;
  font-size: 1.3rem;
  margin-top: 0;
  margin-bottom: 15px;
}

.preservation-card ul {
  padding-left: 20px;
  margin: 0;
}

.preservation-card li {
  margin-bottom: 10px;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #2d3748;
}

/* 响应式设计 */
@media (max-width: 1100px) {
  .image-gallery, .field-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .preservation-info {
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .image-gallery, .field-gallery {
    grid-template-columns: 1fr;
  }
  
  .section-container {
    padding: 25px;
  }
  
  .section-number {
    width: 45px;
    height: 45px;
    font-size: 1.6rem;
  }
  
  h2 {
    font-size: 1.7rem;
  }
  
  .description-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .icon {
    margin-right: 0;
    margin-bottom: 15px;
  }
  
  .preservation-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .preservation-icon {
    margin-right: 0;
    margin-bottom: 15px;
  }
}

@media (max-width: 480px) {
  .sampling-process {
    padding: 20px;
  }
  
  .section-container {
    padding: 20px;
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .section-number {
    margin-right: 0;
    margin-bottom: 15px;
  }
  
  h2 {
    font-size: 1.6rem;
  }
  
  .sampling-image {
    height: 200px;
  }
}
</style>