lg_frontend/components/peak-coal-monitoring/PollutionInformation.vue

<template>
  <div class="pollution-information">
    <peak-secondary-title :title="title"/>
    <div class="pollution-content">
      <div class="pollution-item" v-for="item of dataSource">
        <div class="pollution-icon" :class="getPollutionIcon(item.state)"></div>
        <div class="total-info">
          <div class="title-value">
            <div class="_value">{{ item.pollutionValue }}</div>
            <div class="_title">{{ item.pollutionName }}</div>
          </div>
          <div class="unit-value">
            <div class="standard-title">标准:</div>
            <div class="standard-value">{{ item.standardValue }}{{ item.pollutionUnit }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PeakSecondaryTitle from "@/components/peak-coal-monitoring/PeakSecondaryTitle";

export default {
  name: "PollutionInformation",
  components: {PeakSecondaryTitle},
  data() {
    return {
      title: '污染物信息总览',
      dataSource: [
        {
          pollutionName: '一氧化碳',
          pollutionValue: '9.0',
          pollutionUnit: 'ug/m³',
          standardValue: '6',
          state: 1
        },
        {
          pollutionName: '氮氧化物',
          pollutionValue: '9.0',
          pollutionUnit: 'ug/m³',
          standardValue: '6',
          state: 2
        },
        {
          pollutionName: 'PM10',
          pollutionValue: '9.0',
          pollutionUnit: 'ug/m³',
          standardValue: '16',
          state: 0
        },
        {
          pollutionName: 'PM2.5',
          pollutionValue: '9.0',
          pollutionUnit: 'ug/m³',
          standardValue: '6',
          state: 1
        },
        {
          pollutionName: '二氧化硫',
          pollutionValue: '9.0',
          pollutionUnit: 'ug/m³',
          standardValue: '6',
          state: 1
        },
        {
          pollutionName: '臭氧',
          pollutionValue: '9.0',
          pollutionUnit: 'ug/m³',
          standardValue: '6',
          state: 0
        }
      ]
    }
  },
  methods:{
    getPollutionIcon(val){
      if(val === 1){
        return 'you-icon'
      } else if(val === 2){
        return 'chi-ping-icon'
      } else {
        return 'cha-icon'
      }
    }
  }
}
</script>

<style scoped lang="less">
@import "assets/styles/mixin";

.pollution-information {
  height: 100%;
  width: 100%;
  .flex-column;

  .pollution-content {
    padding-top: 10px;
    flex: 1;
    height: 0;
    display: flex;
    flex-flow: row;
    justify-content: start;
    flex-wrap: wrap;
    .pollution-item {
      height: 66px;
      width: 200px;
      .flex-row;
      &:nth-child(2n){
        margin-left: 20px;
      }
      .pollution-icon{
        width: 66px;
        height: 66px;
      }

      .you-icon{
        background: url("~/assets/peakCoalMonitoring/left/pollution-you.png") no-repeat;
      }

      .chi-ping-icon{
        background: url("~/assets/peakCoalMonitoring/left/pollution-chi-ping.png") no-repeat;
      }

      .cha-icon{
        background: url("~/assets/peakCoalMonitoring/left/pollution-cha.png") no-repeat;
      }

      .total-info{
        flex: 1;
        width: 0;
        .flex-column;
        justify-content: space-between;
        .title-value{
          width: 100%;
          .flex-row;
          justify-content: space-between;
          ._value{
            padding-left: 10px;
            font-family: YouSheBiaoTiHei;
            font-size: 18px;
            color: #24DCF7;
            letter-spacing: 5.64px;
            font-weight: 400;
            text-align: right;
            .text-ellipsis;
          }
          ._title{
            font-family: MicrosoftYaHei;
            font-size: 14px;
            color: #24DCF7;
            letter-spacing: 2.26px;
            font-weight: 400;
          }
        }
        .unit-value{
          width: 100%;
          .flex-row;
          justify-content: space-between;
          .standard-value{
            font-family: 思源黑体;
            font-size: 12px;
            color: #FFFFFF;
            letter-spacing: 5.64px;
            font-weight: 400;
            text-align: right;
            .text-ellipsis;
          }
          .standard-title{
            padding-left: 10px;
            font-family: 思源黑体;
            font-size: 12px;
            color: #FFFFFF;
            letter-spacing: 2.26px;
            font-weight: 400;
          }
          .standard-unit{
            font-family: 思源黑体;
            font-size: 12px;
            color: #FFFFFF;
            letter-spacing: 2.26px;
            font-weight: 400;
          }
        }
      }
    }
  }
}
</style>