<template>
  <div class="water-test">
    <Select class="custom-select" value="塘口1" transfer>
      <Option v-for="item in ['塘口1', '塘口2', '塘口3']" :key="item" :value="item">{{item}}</Option>
    </Select>
    <p>采集时间：2020-08-21 15:15:00</p>
    <div class="wrapper">
      <div v-for="item in list" :key="item.name">
        <img :src="require(`@/assets/images/${item.src}`)"/>
        <p>{{item.name}}</p>
        <p>{{item.value}}</p>
      </div>
    </div>
    <!-- <p>历史数据 >>></p> -->
  </div>
</template>

<script>
export default {
  name: 'WaterTest',
  data() {
    return {
      list: [
        {name: 'PH值', value: 7.65, src: 'icon1.png'},
        {name: '温度', value: '32.4℃', src: 'icon2.png'},
        {name: '溶氧量', value: '6.86mg/L', src: 'icon3.png'},
      ]
    }
  },
}
</script>

<style lang="stylus" scoped>
.water-test
  width 100%
  height 100%
  >p
    text-align center
    &:last-child
      color $edgeColor
  .wrapper
    display flex
    justify-content space-around
    margin 2rem 0
    >div
      text-align center
      flex 1
      &:first-child
        color #d63d41
      &:nth-child(2)
        color #f7d009
      &:last-child
        color #48b4e4
      img
        width 3rem
      p
        &:last-child
          font-size 1.3rem
          font-weight bold

</style>
