<template>
  <div>
    <div class="todo-tab-warp">
      <todo-list></todo-list>
      <todo-list></todo-list>
      <todo-list></todo-list>
      <todo-list></todo-list>
      <todo-list></todo-list>
      <todo-list></todo-list>
    </div>

    <div class="todo-tab">
      <div class="todo-tab-btn todo-tab-btn-on">
        <div class="todo-tab-icon">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-jindu"></use>
          </svg>
        </div>
        <div class="todo-tab-count">12</div>
        待接收
      </div>
       <div class="todo-tab-btn">
        <div class="todo-tab-icon">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-dengdai"></use>
          </svg>
        </div>
        <div class="todo-tab-count">9</div>
        待回复
      </div>     
      <div class="todo-tab-btn">
        <div class="todo-tab-icon">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-yingyongguanli"></use>
          </svg>
        </div>
        全部
      </div>
      <div class="todo-tab-btn">
        <div class="todo-tab-icon">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-kehu"></use>
          </svg>
        </div>
        我
      </div>
    </div>
  </div>
</template>

<script>
  import TodoList from "./components/todolist";
  export default {
    name: 'todo',
    components: {
      TodoList
    }
  }

</script>
<style>
  body {
    margin: 0;
    padding: 0;
    background-color: #eee;
    font-family: "微软雅黑";
  }

.todo-tab-warp{
  margin-bottom: 70px;

}
  .todo-tab {
    display: flex;
    position: fixed;
    bottom: 0;
    background-color: #ffffff;
    width: 100%;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 5px 0 2px 0;
    box-shadow: 0 -1px 3px #f1f1f1
  }

  .todo-tab-btn {
    font-size: 13px;
    width: 25%;
    text-align: center
  }

  .todo-tab-btn-on {
    color: #ff7f50
  }

  .todo-tab-icon {
    font-size: 23px;
  }

  .todo-tab-count {
    position:absolute;
    margin-left:16%;
    bottom: 35px;
    font-size: 13px;
    line-height: 15px;
    width: 15px;
    font-weight: bold;
    color: #fff;
    border-radius: 50%;
    padding: 3px;
    text-align: center;
    background-color: #fc4f4f
  }

</style>
