<template>
  <div class="environment-data">
    <h3>环境数据</h3>
    <ul>
      <li v-for="(item, index) in data" :key="index">
        <span class="data-name">{{ item.name }}:</span>
        <span class="data-value">{{ item.value }}</span>
        <span class="data-unit">{{ item.unit }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'EnvironmentData',
  props: {
    data: {
      type: Array,
      required: true,
      default: () => []
    }
  }
}
</script>

<style scoped>
.environment-data {
  background: white;
  border-radius: 4px;
  padding: 15px;
}

.environment-data h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #333;
}

.environment-data ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.environment-data ul li {
  list-style: none;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.environment-data ul li:last-child {
  border-bottom: none;
}

.data-name {
  font-weight: bold;
  margin-right: 10px;
  color: #555;
}

.data-value {
  margin-right: 5px;
  font-weight: 500;
}

.data-unit {
  color: #888;
  font-size: 0.9em;
}
</style>