<template>
  <div class="home">
    <div class="user">
      <div>你好 ，MaikoXie , 欢迎开始一天的工作！</div>
      <ul class="user-list flex-between">
        <li v-for="item in imglist" :key="item.id">
          <img :src="item.img" alt="">
          <div>{{ item.user }}</div>
          <div>{{ item.number }}</div>
        </li>
      </ul>
      <h1>待审核事项</h1>
      <ul class="flex project-list">
        <li v-for="item in examinelist" :key="item.id" class="flex-colunm">
          <img :src="item.img" alt="">
          <div>{{ item. project }}</div>
          <div>{{ item.number }}</div>
        </li>
      </ul>
      <h1>待审批事项</h1>
      <ul class="flex project-list">
        <li v-for="item in approvallist" :key="item.id" class="flex-colunm">
          <img :src="item.img" alt="">
          <div>{{ item. project }}</div>
          <div>{{ item.number }}</div>
        </li>
      </ul>
      <h1>待办事项</h1>
      <ul class="flex project-list">
        <li v-for="item in handlelist" :key="item.id" class="flex-colunm">
          <img :src="item.img" alt="">
          <div>{{ item. project }}</div>
          <div>{{ item.number }}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      handlelist: [{
        id: 0,
        img: require('@static/images/item.png'),
        project: '待审批供应商',
        number: '100'
      },
      {
        id: 0,
        img: require('@static/images/item.png'),
        project: '待审批采购商',
        number: '100'
      }
      ],
      approvallist: [{
        id: 0,
        img: require('@static/images/item.png'),
        project: '待签署三方运输合同',
        number: '100'
      }],
      examinelist: [{
        id: 0,
        img: require('@static/images/item.png'),
        project: '待审核项目',
        number: '100'
      },
      {
        id: 1,
        img: require('@static/images/item.png'),
        project: '待审核项目',
        number: '100'
      },
      {
        id: 2,
        img: require('@static/images/item.png'),
        project: '待审核项目',
        number: '100'
      },
      {
        id: 3,
        img: require('@static/images/item.png'),
        project: '待审核项目',
        number: '100'
      },
      {
        id: 4,
        img: require('@static/images/item.png'),
        project: '待审核项目',
        number: '100'
      }
      ],
      imglist: [{
        id: 0,
        img: require('@static/images/user.png'),
        user: '供应商',
        number: '100'
      },
      {
        id: 1,
        img: require('@static/images/user.png'),
        user: '采购商',
        number: '100'
      },
      {
        id: 2,
        img: require('@static/images/user.png'),
        user: '全部项目',
        number: '100'
      },
      {
        id: 3,
        img: require('@static/images/user.png'),
        user: '正在进行的项目',
        number: '100'
      },
      {
        id: 4,
        img: require('@static/images/user.png'),
        user: '参与投标总次数',
        number: '100'
      }
      ]
    }
  },
  created() {

  },
  methods: {

  }
}
</script>

<style scoped>
	.user {
		padding-bottom: 50px;
	}

	.user>h1 {
		font-weight: bold;
		margin-top: 50px;
	}

	.user>h2 {
		font-weight: bold;
		margin-top: 20px;
		margin-bottom: 50px;
	}

	.home {
		box-sizing: border-box;
		padding: 30px
	}

	.home>.user {
		box-sizing: border-box;
		padding-left: 30px;
		padding-top: 30px;
		background: #fff;
	}

	.user>.user-list {
		margin-top: 50px;
		margin-left: 30px;
	}

	.user>ul {
		width: 80%
	}

	.user>.user-list>li>div {
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.project-list {
		margin: 30px 0 50px 30px;

	}

	.project-list>li {
		margin-right: 100px;
	}

	.project-list>li>div:nth-child(2) {
		margin-top: 10px;
		margin-bottom: 10px;
	}
</style>
