epmet-work-pc/src/views/dataBoard/satisfactionEval/modules/RiskStatistics/index.vue

<template>
  <div>
    <div class="number-list">
      <div class="number-item">
        <div class="img">
          <img src="@/assets/images/manyidu/hf_ts.png" alt="">
        </div>
        <div>
          <div class="txt">
            12345热线 <br>
            投诉人数
          </div>
          <div class="num"><span>7</span> 人</div>
        </div>

      </div>
      <div class="number-item">
        <div class="img">
          <img src="@/assets/images/manyidu/hf_bmy.png" alt="">
        </div>
        <div>
          <div class="txt">
            省满意度调查 <br>
            不满意人数
          </div>
          <div class="num"><span>7</span> 人</div>
        </div>

      </div>
      <div class="number-item">
        <div class="img">
          <img src="@/assets/images/manyidu/hf_zpbmy.png" alt="">
        </div>
        <div>
          <div class="txt">
            社区满意度自评 <br>
            不满意人数
          </div>
          <div class="num"><span>7</span> 人</div>
        </div>
      </div>
    </div>
    <div class="number-list2">
      <div class="number-item">
        <div class="txt">
          本月回访 <br>
          次数
        </div>
        <div class="num"><span class="grey">112</span> 人</div>
      </div>
      <div class="number-item">
        <div class="txt">
          本月回访消除 <br>
          风险人员数
        </div>
        <div class="num"><span class="green">112</span> 人</div>
      </div>
      <div class="number-item">
        <div class="txt">
          累计回访 <br>
          次数
        </div>
        <div class="num"><span class="purple">112</span> 人</div>
      </div>
      <div class="number-item">
        <div class="txt">
          累计回访消除 <br>
          风险人员数
        </div>
        <div class="num"><span class="blue">112</span> 人</div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "RiskStatistics"
}
</script>

<style scoped lang="scss">
.number-list {
  display: flex;
  justify-content: space-between;
  margin: 40px 0;
  padding: 0 15px 0 8px;

  .number-item {
    display: flex;

    .image {
      width: 98px;
      height: 70px;
    }

    .txt {
      font-size: 16px;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 24px;
      margin-bottom: 22px;
    }

    .num {
      font-size: 14px;
      font-weight: 500;
      color: #A3B9DA;

      span {
        font-size: 32px;
        font-weight: bold;
        font-style: italic;
        color: #3AB7FF;
      }
    }
  }
}

.number-list2 {
  display: flex;
  justify-content: space-between;
  padding: 0 30px 39px;
  .number-item {
    .txt {
      font-size: 14px;
      font-weight: 400;
      color: #A3B9DA;
      line-height: 24px;
      margin-bottom: 16px;
    }
    .num {
      font-size: 14px;
      font-weight: 500;
      color: #A3B9DA;

      span {
        font-size: 32px;
        font-weight: bold;
        font-style: italic;
      }
    }
  }
}
.grey {
  color: #78C4F3;
}
.green {
  color: #08EBAE;
}
.purple {
  color: #A761FD;
}
.blue {
  color: #356EFF;
}
</style>