<template>
  <div class="tail-water">
    <p>采集时间：2020-08-21 10:24:11</p>
    <div class="wrapper">
      <div v-for="item in list" :key="item.name">
        <i-circle
          :percent="item.value"
          :size="80 * sizeRate"
          :trail-width="6 * sizeRate"
          :stroke-color="item.color"
          trail-color="rgba(255,255,255,0.1)">
          <span :style="`color:${item.color};font-size:1.5rem;font-weight:bold;`">{{item.value}}%</span>
        </i-circle>
        <p :style="`color:${item.color}`">{{item.count}}</p>
        <p :style="`color:${item.color}`">{{item.name}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TailWater',
  data() {
    return {
      list: [
        {name: '总磷', value: 93.6, color: '#4ec6fd', count: '3.12mg/L'},
        {name: '总氮', value: 92.1, color: '#40fdfc', count: '0.48mg/L'},
        {name: 'COD', value: 88.3, color: '#9375fd', count: '9.24mg/L'},
      ]
    }
  },
  computed: {
    sizeRate() {
      return Number((screen.height / 800).toFixed(1))
    },
  }
}
</script>

<style lang="stylus" scoped>
.tail-water
  width 100%
  height 100%
  >p
    text-align center
  .wrapper
    display flex
    align-items center
    justify-content space-around
    margin-top 1rem
    >div
      p
        font-size 1.2rem
        text-align center
        font-weight bold
        line-height 1.5
</style>
