<template>
  <div>
    <div class="home-header">
      <container>
        <a-row align="middle" justify="space-between" type="flex">
          <a-col>
            <div class="home-header-row">
              <div class="home-header-avatar">
                <a-avatar
                  :size="64"
                  src="https://gss0.baidu.com/7Ls0a8Sm2Q5IlBGlnYG/sys/portraith/item/tb.1.9f0e4392.Q2njD2SGV-9wBUKqKFoQqA?t=1507123743"
                />
              </div>
              <div class="home-header-content">
                <h2>
                  上午好，
                  <span>软件开发人员</span>，欢迎您登录系统！
                </h2>
                <p>上次IP：115.217.160.156 上次登录时间：2021-04-06 13:10:13</p>
              </div>
            </div>
          </a-col>
          <a-col>
            <a-icon :style="{ fontSize: '20px', color: '#f80000' }" class="mr-xs" type="mail" />您有
            <a href="#">0</a>封未读邮件，请尽快查收！
          </a-col>
        </a-row>
      </container>
    </div>
    <container class="home-container">
      <a-row :gutter="16">
        <a-col :span="24">
          <Statistics />
        </a-col>
        <a-col :lg="12" :md="24" :xl="16">
          <Task />
          <List />
        </a-col>
        <a-col :lg="12" :md="24" :xl="8">
          <Notice />
          <Charts />
        </a-col>
      </a-row>
    </container>
  </div>
</template>
<script>
import './index.less';

import Statistics from './statistics';
import Task from './task';
import Notice from './notice';
import List from './list';
import Charts from './charts';

export default {
  components: {
    Statistics,
    Task,
    Notice,
    List,
    Charts,
  },
};
</script>