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

<template>
  <div class="sampling-process">
    <!-- 第一部分：建立大气污染源清单 -->
    <div class="content-section">
      <div class="section-header">
        <div class="step-number">1</div>
        <h2>建立大气污染源清单</h2>
      </div>
      
      <div class="process-steps">
        <div class="step-card">
          <div class="step-icon">📊</div>
          <div class="step-content">
            <h3>污染源统计</h3>
            <p>根据韶关市环保部门或政府官方网站公开资料及全国排污许可证管理信息平台，对韶关具有排污许可证的企业进行数据统计与调查分析</p>
          </div>
        </div>
        
        <div class="step-card">
          <div class="step-icon">🔍</div>
          <div class="step-content">
            <h3>行业调查与筛选</h3>
            <p>针对可能存在重金属排放的行业进行全面调查和筛选。这些行业包括燃煤电厂、蓄电池制造、危险废物治理、矿山采选、有色金属冶炼、化工、电子电路制造等</p>
          </div>
        </div>
        
        <div class="step-card">
          <div class="step-icon">🏭</div>
          <div class="step-content">
            <h3>企业调查与统计分析</h3>
            <p>对所有重金属排放企业进行详细调查和统计分析，包括但不限于企业名称、地址坐标、生产工艺、主要产品、排放设施、排放标准等信息，建立源清单的详细数据库</p>
          </div>
        </div>
        
        <div class="step-card">
          <div class="step-icon">📥</div>
          <div class="step-content">
            <h3>排放数据收集</h3>
            <p>收集以上所有企业的大气排放数据，包括但不限于污染物排放许可值、重金属排放总量、大气颗粒物排放总量、氮氧化物排放总量、硫化物排放总量等大气污染物</p>
          </div>
        </div>
        
        <div class="step-card">
          <div class="step-icon">✅</div>
          <div class="step-content">
            <h3>数据验证与质量控制</h3>
            <p>对收集到的排放数据进行查找验证和质量控制，确保数据的准确性和可靠性。检查数据的完整性和一致性，排除可能存在的错误和异常数据</p>
          </div>
        </div>
      </div>
      
      <div class="compact-image-container">
        <el-image :src="image1" alt="大气干湿沉降示意图" class="sampling-image"></el-image>
        <p class="image-caption">图1 大气干湿沉降示意图</p>
      </div>
    </div>
    
    <!-- 第二部分：现场调研 -->
    <div class="content-section">
      <div class="section-header">
        <div class="step-number">2</div>
        <h2>现场调研</h2>
      </div>
      
      <div class="text-content">
        <p>制定重金属排放源的详细调研计划，包括调研时间、地点、人员分工、调研方法等。根据研究目的和问题，选择合适的调研方法，如问卷调查、访谈、观察法等。</p>
        <p>按照调研计划，前往现场进行调研，对企业进行前期的实地考察，了解能源使用、生产工艺及废气排放情况。对企业所在区域进行调查，大气排放是否会对周围区域产生影响。</p>
        <p>在调研过程中，注意信息的获取与保存，比如拍照、排污口测距、风向记录等等。</p>
      </div>
      
      <div class="compact-image-container">
        <el-image :src="image2" alt="干湿沉降收集装置" class="sampling-image"></el-image>
        <p class="image-caption">图2 干湿沉降收集装置</p>
      </div>
    </div>
    
    <!-- 第三部分：样品分析 -->
    <div class="content-section">
      <div class="section-header">
        <div class="step-number">3</div>
        <h2>样品分析</h2>
      </div>
      
      <div class="analysis-methods">
        <div class="method-card">
          <h3>重金属检测技术</h3>
          <ul>
            <li>原子吸收光谱法（AAS）</li>
            <li>电感耦合等离子体质谱法（ICP-MS）</li>
            <li>X射线荧光光谱法（XRF）</li>
          </ul>
        </div>
        
        <div class="method-card">
          <h3>数据处理与分析</h3>
          <ul>
            <li>质量控制方法</li>
            <li>统计分析技术</li>
            <li>数据可视化工具</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      image1: '/大气干湿沉降示意图.png',
      image2: '/干湿沉降收集装置.png',
    };
  }
};
</script>

<style scoped>
.sampling-process {
  padding: 30px;
  background: linear-gradient(135deg, rgba(240, 248, 255, 0.8) 0%, rgba(230, 247, 255, 0.8) 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.15;
  z-index: -1;
  filter: blur(2px);
}

.content-section {
  margin-bottom: 50px;
  padding: 25px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.4s ease;
  overflow: hidden;
  position: relative;
}

.content-section:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

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

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

h2 {
  color: #1a365d;
  font-size: 1.8rem;
  margin: 0;
  font-weight: 600;
}

.text-content {
  margin-bottom: 25px;
}

p {
  margin: 15px 0;
  line-height: 1.8;
  color: #2d3748;
  font-size: 1.05rem;
}

/* 步骤卡片样式 */
.process-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 30px;
}

.step-card {
  display: flex;
  background: rgba(245, 249, 255, 0.6);
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
  border-left: 4px solid #4a9ef7;
}

.step-card:hover {
  background: rgba(230, 242, 255, 0.8);
  transform: translateX(5px);
}

.step-icon {
  font-size: 2rem;
  margin-right: 20px;
  color: #3acfd5;
}

.step-content {
  flex: 1;
}

.step-content h3 {
  color: #1a365d;
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 1.3rem;
}

/* 分析方法卡片 */
.analysis-methods {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.method-card {
  flex: 1;
  background: rgba(245, 249, 255, 0.6);
  border-radius: 12px;
  padding: 20px;
  border-top: 3px solid #3acfd5;
}

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

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

.method-card li {
  margin-bottom: 8px;
  line-height: 1.6;
}

/* 紧凑图片容器 */
.compact-image-container {
  max-width: 700px;
  margin: 0 auto;
  margin-top: 25px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease;
}

.compact-image-container:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

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

.compact-image-container:hover .sampling-image {
  transform: scale(1.03);
}

.image-caption {
  text-align: center;
  font-size: 16px;
  color: #2d3748;
  padding: 15px;
  font-weight: 500;
  background: rgba(248, 250, 252, 0.8);
  margin: 0;
  border-top: 1px dashed #cbd5e0;
}

/* 响应式设计 */
@media (max-width: 900px) {
  .sampling-process {
    padding: 20px;
  }
  
  .content-section {
    padding: 20px;
  }
  
  .analysis-methods {
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .sampling-process {
    padding: 15px;
  }
  
  h2 {
    font-size: 1.6rem;
  }
  
  .step-number {
    width: 40px;
    height: 40px;
    font-size: 1.4rem;
  }
  
  .compact-image-container {
    max-width: 90%;
  }
}

@media (max-width: 480px) {
  .sampling-process {
    padding: 12px;
  }
  
  .content-section {
    padding: 18px;
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .step-number {
    margin-right: 0;
    margin-bottom: 15px;
  }
  
  h2 {
    font-size: 1.5rem;
  }
  
  .step-card {
    flex-direction: column;
  }
  
  .step-icon {
    margin-right: 0;
    margin-bottom: 15px;
    text-align: center;
  }
}
</style>