energy_storage/web/src/components/Home/Modal/EnvInfo.vue

<template>
  <div class="onLine">
    <div class="content">
      <div v-for="item in list" :key="item.key" :class="`item ${item.class}`">
        <a-image :preview="false" :src="item.iconPath" :width="25" class="left"> </a-image>
        <div class="right">
             <span>{{ item.label }}</span>
             <span>{{ item.value }} {{ item.d }}</span
              >
            </div>
     
       
      </div>
    </div>
    

  
  </div>
</template>

<script>
import { legacyLogicalPropertiesTransformer } from 'ant-design-vue'

export default {
  name: '',
  props: {
    propsInfo: {
      type: Object,
      default: ()=>({
        name: '场站111',
        statusName:'充电'
      })
    }
  },
  data() {
    return {
      list: [
        {
          key: 'tianshu',
          value: 26,
          d: 'Lux',
          label: '光照',
          class: 'item-1',
          iconPath: require('@/assets/home/guangzhao.png')
        },
        {
          key: 'shouyi',
          value: 25,
          d: 'm/s',
          label: '风速',
          class: 'item-2',
          iconPath: require('@/assets/home/fengsu.png')
        },
        {
          key: 'shuliang',
          value: 24,
          d: '℃',
          label: '环境温度',
          class: 'item-3',
          iconPath: require('@/assets/home/hj-wendu.png')
        },
        {
          key: 'shuliang',
          value: 26,
          d: '%',
          label: '环境湿度',
          class: 'item-4',
          iconPath: require('@/assets/home/hj-shidu.png')
        },
       
      ]
    }
  },
  computed: {
    leftList() {
      return this.list.filter((_, index) => index % 2 === 0).slice(0, 3) // 左列取前3个偶数索引
    },
    rightList() {
      return this.list.filter((_, index) => index % 2 !== 0).slice(0, 3) // 右列取前3个奇数索引
    }
  },
  watch: {},
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.onLine {
  height: calc(100% - 45px);
  display: flex;
  justify-content: center;
  align-items: center;
  width:95%;
  margin: auto;
}



.content{
  flex-wrap: wrap;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100%;

  .item{
    height:50%;
  width: 25%;
  // height: 47px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  // justify-content: center;
  // text-align: center;

  & > span:nth-child(1) {
    font-size: 12px;
    margin-bottom: 10px;
  }
  .d {
    margin-left: 1px;
    font-size: 12px;
  }
  }


  .right {
 display: flex;
 flex-direction: column;
 margin-left: 20px;

}
}



</style>