
<template>
  <div class="home">
    <div class="user">
      <h5>你好，MaikoXie，欢迎开始一天的工作！</h5>
      <ul class="user-list flex">
        <li v-for = "item in imglist" :key ="item.id" class="flex-colunm">
          <img :src="item.src" alt="">
          <div class="user-pos">{{ item.info }}</div>
          <div>{{ item.num }}</div>
        </li>
      </ul>
      <h2>项目信息</h2>
      <dataTable :table-data = "tabledata" :columns="columns" >
        <el-table-column slot="opration" align="center" label="快捷操作" flexd="right" width="200px"> 
          <template :slot-scope = "scope">
            <el-button type="text" size="small" @click="handlesee(scope.row)">查看
            </el-button> 
          </template>
        </el-table-column>
      </dataTable> 
      <h2 class="se-h2">待办事项</h2>
      <ul class="project-list flex" >
        <li v-for = "item in projectlist" :key = "item.id"> 
          <img :src="item.src" alt="">
          <div>{{ item.project }}</div>
          <div>{{ item.account }}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import dataTable from '@components/nopageTable.vue'
export default {
  components: {
    dataTable
  },
  data() {
    return {
      projectlist: [{
        id: 0,
        src: require('@static/images/item.png'),
        project: '待处理投标邀请',
        account: 100

      },
      {
        id: 1,
        src: require('@static/images/item.png'),
        project: '待处理投标邀请',
        account: 100

      },
      {
        id: 2,
        src: require('@static/images/item.png'),
        project: '待处理投标邀请',
        account: 100

      },
      {
        id: 3,
        src: require('@static/images/item.png'),
        project: '待处理投标邀请',
        account: 100

      },
      {
        id: 4,
        src: require('@static/images/item.png'),
        project: '待处理投标邀请',
        account: 100

      },
      {
        id: 5,
        src: require('@static/images/item.png'),
        project: '待处理投标邀请',
        account: 100

      },
      {
        id: 6,
        src: require('@static/images/item.png'),
        project: '待处理投标邀请',
        account: 100

      },
      {
        id: 7,
        src: require('@static/images/item.png'),
        project: '待处理投标邀请',
        account: 100

      },
      {
        id: 8,
        src: require('@static/images/item.png'),
        project: '待处理投标邀请',
        account: 100

      },
      {
        id: 9,
        src: require('@static/images/item.png'),
        project: '待处理投标邀请',
        account: 100

      },
      {
        id: 10,
        src: require('@static/images/item.png'),
        project: '待处理投标邀请',
        account: 100

      },
      {
        id: 11,
        src: require('@static/images/item.png'),
        project: '待处理投标邀请',
        account: 100

      },
      {
        id: 12,
        src: require('@static/images/item.png'),
        project: '待处理投标邀请',
        account: 100

      },
      {
        id: 13,
        src: require('@static/images/item.png'),
        project: '待处理投标邀请',
        account: 100

      },
      {
        id: 14,
        src: require('@static/images/item.png'),
        project: '待处理投标邀请',
        account: 100

      }],
      imglist: [{
        id: 0,
        src: require('@static/images/user.png'),
        info: '今日可报名项目',
        num: 100
      }, {
        id: 1,
        src: require('@static/images/user.png'),
        info: '中标项目',
        num: 100
      }],
      //表格第一行
      columns: [{
        label: '当前状态',
        prop: 'state'

      },
      {
        label: '数量',
        prop: 'number'

      }, {
        slot: 'opration'
      }
      ],
      tabledata: [{
        state: '处于售标&投标阶段的项目',
        number: 10,
        url: ''
      },
      {
        state: '处于投标阶段的项目',
        number: 10,
        url: ''
      },
      {
        state: '今日截标（开标）的项目',
        number: 10,
        url: ''
      },
      {
        state: '处于开标阶段的项目',
        number: 10,
        url: ''
      },
      {
        state: '处于评标阶段的项目',
        number: 10,
        url: ''
      },
      {
        state: '处于定标阶段的项目',
        number: 10,
        url: ''
      }]
        
    } 
  },
  methods: {
    handlesee() {
     
    }
  }
}
</script>

<style  scoped>

.home{
  padding:30px;
  box-sizing: border-box;
}
.home>.user{
  box-sizing: border-box;
  padding-left:20px;
  padding-top:20px;
  background: #fff;
}
.user-list{
  margin-bottom: 30px;
  margin-left: 10px;
}
.user-list>li{
	margin-right: 70px;
}
h5{
  margin-top:30px;
  margin-bottom:30px;
}

h2{
  margin-bottom: 50px;
}
.se-h2{
  margin-top:30px;
}
.project-list{
  margin-left:30px;
  flex-wrap: wrap;
  text-align: center;
}
.project-list>li{
  margin-right:100px;
  margin-bottom: 20px;
}
</style>
