<template>
<div class="main-contain">
  <div class="app-container">
   <div class="RealContent">
     <ul>
       <li v-for="(number , index) in numbers" :key="index" >
         <p class="num">{{number.num}}</p>
            <span class="name">{{number.name}}</span>
            <span class="time">{{number.time}}</span>
       </li>
     </ul>
   </div>
  </div>
</div>

</template>
<script>
export default {
  name: 'Home',
  data() {
    return {
      numbers: [
        { num: '0', name: '新增数量', time: '昨日: 0' },
        { num: '1', name: '总粉丝', time: '昨日: 0' },
        { num: '1', name: '今日新增会员', time: '昨日: 0' },
        { num: '1', name: '总会员', time: '昨日: 1' },
        { num: '1', name: '商品浏览数', time: '昨日: 1' },
        { num: '111', name: '文章浏览量', time: '昨日: 0' },
        { num: '150', name: '活动浏览量', time: '昨日: 0' },
        { num: '120', name: '新增订单', time: '昨日: 0' }
      ]
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.app-container {
  margin: 15px;
  min-height: calc(100vh - 140px);
  .RealContent {
    text-align: center;
    box-shadow: 4px 4px 8px #dde7f2;
    ul {
      display: flex;
      li {
        padding: 22px 0 25px 0;
        flex: 1;
        justify-content: center;
        align-items: center;
        .num {
          font: 36px/72px "Arial";
          color: #58a2ec;
        }
        .name {
          font-size: 13px;
          color: #485b6d;
          margin-bottom: 8px;
          display: block;
        }
        .time {
          font-size: 12px;
          color: #89949b;
        }
      }
    }
  }
}
</style>
