<template>
  <div class="header-box">
    <div class="header-left">
      <div class="header-Super">
        <img src="../../../../assets/images/头像-男一.png" alt="" />
        <div class="header-title">
          <p>你好! 超级管理员, 祝你开心每一天</p>
          <div>中国港能/技术部/开发部</div>
        </div>
      </div>
      <div class="header-totl">
        <!-- 代办数量 -->
        <div class="header-flex">
          <span>
            <img src="../../../../assets/images/阅转办.png" alt="" />
          </span>
          <div>
            <p>12</p>
            <div>代办数量</div>
          </div>
        </div>
        <!-- 已办数量 -->
        <div class="header-flex">
          <span>
            <img src="../../../../assets/images/平时考核.png" alt="" />
          </span>
          <div class="">
            <p>12</p>
            <div>已办数量</div>
          </div>
        </div>
        <!-- 我的请求 -->
        <div class="header-flex">
          <span>
            <img src="../../../../assets/images/平时考核.png" alt="" />
          </span>
          <div class="">
            <p>12</p>
            <div>我的请求</div>
          </div>
        </div>
        <!-- 代办数量 -->
        <div class="header-flex">
          <span>
            <img src="../../../../assets/images/阅转办.png" alt="" />
          </span>
          <div class="">
            <p>12</p>
            <div>转办数量</div>
          </div>
        </div>
      </div>
    </div>
    <div class="header-right">
      <!-- <img src="../../../../assets/images/分析.png" alt=""> -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'Personalnformation',
  data() {
    return {}
  },
}
</script>

<style lang="scss" scoped>
.header-box {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.header-left {
  width: 70%;
  .header-Super {
    display: flex;
    align-items: center;
    img {
      width: 80px;
      height: 80px;
    }
    .header-title {
      margin-left: 10px;
      p {
        font-size: 18px;
        font-weight: 600;
      }
      div {
        margin-top: 5px;
        width: 150px;
        background-color: #e5f2ff;
        color: #0080fe;
        padding: 5px 8px;
      }
    }
  }
  .header-totl {
    display: flex;
    padding: 0px 70px;
    justify-content: space-around;
    margin-top: 23px;
    .header-flex {
      align-content: center;
      display: flex;
      span {
        height: 26px;
        padding: 8px 8px;
        border-radius: 50px;
        background-color: #f5f5f5;
        display: table-cell; //主要是这个属性
        vertical-align: middle;
        text-align: center;
        img {
          width: 26px;
        }
      }
      div {
          margin-left: 10px;
        p {
          font-size: 30px;
          font-weight: 600;
        }
        div {
          color: #6666;
        }
      }
    }
  }
}
.header-right {
  width: 300px;
  height: 260px;
  background-image: url('../../../../assets/images/分析.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
</style>
