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

<template>
  <div class="potential-people">
    <div class="potential-people-item" @click="$router.push('/dataBoard/satisfactionEval/potentialPeople/sjwjj')">
      <div class="icon">
        <img src="@/assets/images/manyidu/qz_wjj.png" alt="">
      </div>
      <div class="txt">
        事件未解决 <br>
        上报人数
      </div>
      <div class="num"><span class="orange">78</span>人</div>
    </div>
    <div class="potential-people-item" @click="$router.push('/dataBoard/satisfactionEval/potentialPeople/xqwmz')">
      <div class="icon">
        <img src="@/assets/images/manyidu/qz_wmz.png" alt="">
      </div>
      <div class="txt">
        需求未满足 <br>
        人数
      </div>
      <div class="num"><span class="green">128</span>人</div>
    </div>
    <div class="potential-people-item" @click="$router.push('/dataBoard/satisfactionEval/potentialPeople/yxwxfw')">
      <div class="icon">
        <img src="@/assets/images/manyidu/qz_wx.png" alt="">
      </div>
      <div class="txt">
        应享未享 <br>
        服务人数
      </div>
      <div class="num"><span class="light">527</span>人</div>
    </div>
  </div>
</template>

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

<style scoped lang="scss">
.potential-people {
  padding: 16px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .potential-people-item {
    margin: 14px;
    text-align: center;
    flex: 1;
    border: 1px solid rgba(28, 67, 111, 0.22);
    background: linear-gradient(0deg, rgba(31, 121, 255, 0.22) 0%, rgba(31,121,255,0) 100%);
    padding: 26px 0 31px;
    .icon {
      width: 86px;
      height: 86px;
      margin: 0 auto;

      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }

    .txt {
      font-size: 14px;
      font-weight: 400;
      color: #A3B9DA;
      line-height: 24px;
      margin: 11px 0 22px;
    }

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

      span {
        font-size: 32px;
        font-weight: bold;
        font-style: italic;
      }

    }
  }
}

.orange {
  color: #FFB73C;
}

.green {
  color: #08EBAE;
}

.light {
  color: #7FCEFF;
}

</style>