soilgd12/src/views/User/HmOutFlux/atmosDeposition/airInputFlux.vue

<template>
  <div class="agricultural-input-management">
    <div class="page-container">
      <el-card class="results-card">
        <div class="results-content">
          <!-- 地图区域 -->
          <div class="map-section">
            <h3>大气Cd通量分布图</h3>
            <div class="image-container">
               <img 
                  src="/大气通量(1).jpg" 
                  alt="大气通量分布图" 
                  class="result-image"
                >
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { ElButton, ElCard } from 'element-plus';

export default {
  name: 'AtmosphereFluxMap',
  components: {
    ElButton,
    ElCard
  }
};
</script>

<style scoped>

.page-container {
  width: 100%;
  height: 100%;
}
/* 结果卡片样式 */
.results-card {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  height: 100%;
  box-sizing: border-box;
}

.results-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.map-section {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

h3 {
  margin-bottom: 15px;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

/* 图片容器限定大小 */
.image-container {
  width: 100%;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f9f9f9;
  border-radius: 8px;
  overflow: hidden;
}

.result-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.result-image:hover {
  transform: scale(1.02);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .image-container {
    height: 400px;
  }
}

@media (max-width: 480px) {
  .agricultural-input-management {
    padding: 10px;
  }
  
  .image-container {
    height: 300px;
  }
}
</style>