<template>
  <div class="weather">
    <p>采集时间：2020-08-23 14:08:23</p>
    <div class="wrapper">
      <div v-for="item in list" :key="item.name">
        <img :src="require(`@/assets/images/${item.icon}`)"/>
        <div>
          <p>{{item.name}}</p>
          <p>{{item.value}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Weather',
  data() {
    return {
      list: [
        {name: '气压', value: '99.5Pa', icon: '1.png'},
        {name: '大气湿度', value: '75.6RH', icon: '2.png'},
        {name: '大气温度', value: '29.1℃', icon: '3.png'},
        {name: '风速', value: '1.24m/s', icon: '4.png'},
        {name: '风向', value: '225°', icon: '5.png'},
        {name: '光照', value: '14778lux', icon: '6.png'},
        {name: '雨量', value: '27.5mm', icon: '7.png'},
      ]
    }
  },
}
</script>

<style lang="stylus" scoped>
.weather
  width 100%
  height 100%
  >p
    text-align center
    margin-bottom .5rem
  .wrapper
    display flex
    flex-wrap wrap
    >div
      width 33%
      display flex
      align-items center
      padding .5rem .3rem

      img
        width 2.5rem
        // height @width
        margin-right .3rem
      div
        >p
          &:last-child
            color $edgeColor
            font-weight bold
</style>
