练习

<template>

  <div id="App">

    <el-row :gutter="20" class="statistics">

      <el-col :span="6"

        ><div class="grid-content bg-purple-info1">

          <div>处理告警信息数量</div>

          <div class="num">{{ infoList[0].value1 }}</div>

          <div

            class="last-num"  

            :style="{

              color: fontColor(infoList[0]),

            }"

          >

            上一周期数据为{{ infoList[0].value2 }}

          </div>

        </div></el-col

      >

      <el-col :span="6"

        ><div class="grid-content bg-purple-info2">

          <div>执行告警策略次数</div>

          <div class="num">{{ infoList[1].value1 }}</div>

          <div

            class="last-num"

            :style="{

              color: fontColor(infoList[1]),

            }"

          >

            上一周期数据为{{ infoList[1].value2 }}

          </div>

        </div></el-col

      >

      <el-col :span="6"

        ><div class="grid-content bg-purple-info3">

          <div>告警触发告警次数</div>

          <div class="num">{{ infoList[2].value1 }}</div>

          <div

            class="last-num"

            :style="{

              color: fontColor(infoList[2]),

            }"

          >

            上一周期数据为{{ infoList[2].value2 }}

          </div>

        </div></el-col

      >

      <el-col :span="6"

        ><div class="grid-content bg-purple-info4">

          <div>告警触发通知次数</div>

          <div class="num">{{ infoList[3].value1 }}</div>

          <div

            class="last-num"

            :style="{

              color: fontColor(infoList[3]),

            }"

          >

            上一周期数据为{{ infoList[3].value2 }}

          </div>

        </div></el-col

      >

    </el-row>

    <el-row :gutter="20">

      <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>

      <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>

    </el-row>

    <el-row :gutter="20">

      <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>

      <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>

    </el-row>

  </div>

</template>

<script>

export default {

  name: "App",

  data() {

    return {

      infoList: [

        {

          title1: "处理告警信息数量",

          value1: 10,

          title2: "上一周期数据为",

          value2: 20,

        },

        {

          title1: "执行告警策略次数",

          value1: 11,

          title2: "上一周期数据为",

          value2: 21,

        },

        {

          title1: "告警触发告警次数",

          value1: 30,

          title2: "上一周期数据为",

          value2: 20,

        },

        {

          title1: "告警触发通知次数",

          value1: 50,

          title2: "上一周期数据为",

          value2: 60,

        },

      ],

    };

  },

  computed: {

    fontColor() {

      return function (item) {

        return item.value1 - item.value2 > 0 ? "green" : "red";

      };

    },

  },

};

</script>

<style lang="scss">

.el-row {

  margin-bottom: 20px;

  &:last-child {

    margin-bottom: 0;

  }

}

.el-col {

  border-radius: 4px;

}

.bg-purple {

  background: #d3dce6;

}

$class-new-list: #4a3 #45b #463 #45a7;

.statistics {

  @each $color in $class-new-list {

    $i: index($class-new-list, $color);

    .bg-purple-info#{$i} {

      border-left: 5px solid $color;

      height: 100px;

      display: flex;

      flex-direction: column;

      justify-content: space-between;

      padding: 25px 20px;

      .num {

        font-weight: bold;

      }

    }

  }

}

.grid-content {

  border-radius: 4px;

  min-height: 36px;

  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

}

.row-bg {

  padding: 10px 0;

  background-color: #f9fafc;

}

</style>