<template>
  <div class="logInformation">
    <ul class="logInformationIn">
      <li>
        <i class="iconfont" style="color:#F3BB45;">&#xe6a5;</i>
        <p>登录人次：</p>
        <span>{{logInformationData.loginSum}} 次</span>
      </li>
      <li>
        <i class="iconfont" style="color:#41B883;">&#xe6a5;</i>
        <p>登录用户数：</p>
        <span>{{logInformationData.loginUserSum}} 人</span>
      </li>
      <li>
        <i class="iconfont" style="color:#EB5E28;">&#xe7a2;</i>
        <p>单个最大登录用户：</p>
        <span>{{logInformationData.maxLoginUserName}}</span>
      </li>
      <li>
        <i class="iconfont" style="color:#68B3C8;">&#xe6a5;</i>
        <p>单个最大登录次数：</p>
        <span>{{logInformationData.maxLoginUserSum}} 次</span>
      </li>
    </ul>
  </div>
</template>

<script>
  import Api from '@/api/index.js'

  export default { 
    name: 'LogInformation',
    props: {
      logInformationData: { 
        type: Object,
        default: data => {}
      }
    },
    data () { 
      return { 
      }
    }
  }
</script>

<style lang="scss" scoped>
  .logInformation { 
    padding: 0 10px 10px;
    overflow: hidden;
    text-align: center;

    .logInformationIn{ 
      display: inline-block;
    }

    li { 
      height: 36px;
      line-height: 36px;
      text-align: center;
      background: #e6f3f3;
      float: left;
      border: solid 1px #9cd1cf;
      margin: 0;
      margin-right: 20px;
      overflow: hidden;
      border-radius: 4px;
      padding: 0 10px;

      p{ 
        font-size: 14px;
        float: left;
      }
      i{ 
        float: left;
        margin-right: 8px;
        font-size: 24px;
      }
      span{ 
        float: left;
      }
    }
  }
</style>
