LongjoeUI/src/pages/task.vue

<template>
  <div>
    <!-- <div class="topbar">
      <div class="topbar_left" @click="goback">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fanhui"></use>
        </svg>
      </div>
      <div class="topbar_middle">
        我的任务 <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xiala"></use>
        </svg>
      </div>
      <div class="topbar_right">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-caidan"></use>
        </svg>
      </div>
    </div> -->


    <div class="task_main">
      <div class="task_top">
        <div class="task_selection_warp">
          <div class="task_selection">
            
            <div class='task_selection_check'>时刻</div>
            <div style="margin-left:30px">决策</div>
            <div class="task_top_cnt"></div>
          </div>
        </div>

        <div class="task_msg">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xiaoxi"></use>
          </svg>
          你有3个任务已超期，点击查看
        </div>
      </div>

      <div class="task_title" style="margin-top:80px">当天</div>
      <div class="tasklist">
        <task-list></task-list>
      </div>


      <div class="task_title">昨天</div>
      <div class="tasklist" style="margin-bottom:80px;">
        <task-list></task-list>
      </div>
    </div>

    <!-- 底部按钮 -->
    <div class="todolist-tab">
      <div class="todolist-tab-btn todolist-tab-btn-on">
        <div class="todolist-tab-icon">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-home"></use>
          </svg>
        </div>
        首页
      </div>
      <div class="todolist-tab-btn  ">
        <div class="todolist-tab-icon">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-format-list-bulleted"></use>
          </svg>
        </div>
        <div class="todolist-tab-count">9</div>
        待办
      </div>


      <div class="todolist-tab-btn">
        <div class="todolist-tab-icon">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-google-drive"></use>
          </svg>
        </div>
        功能
      </div>

      <div class="todolist-tab-btn">
        <div class="todolist-tab-icon">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-email-outline"></use>
          </svg>
        </div>
        <div class="todolist-tab-count">5</div>
        消息
      </div>

      <div class="todolist-tab-btn">
        <div class="todolist-tab-icon">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-account"></use>
          </svg>
        </div>
        我的
      </div>
    </div>

  </div>

</template>
<script>
  import TaskList from "./components/tasklist";
  export default {
    name: 'task',
    components: {
      TaskList
    }

  }

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

  .task_selection_warp {

    width: 100%;
    border-bottom: 1px solid #f5f5f5;
  }

  .task_selection {
    display: flex;
    width: 90px;
    margin: 10px auto 5px auto;
    font-size: 15px;
    font-weight: bold;
  }

  .task_selection div {
    padding-bottom: 3px;
  }

  .task_selection_check {
    color: #fd7526;
    border-bottom: 2px solid #fd7526;
  }

  .task_top {
    z-index: 9999;
    width: 100%;
    position: fixed;
    background-color: #fff;
    /* margin: 10px auto 5px auto; */
    font-size: 15px;
    /* font-weight: bold; */
  }

  .task_msg {
    /* z-index: 9999; */
    /* position: fixed; */
    width: 100%;
    background-color: #fdd1cd;
    font-size: 13px;
    color: #ff6f61;
    line-height: 25px;
    padding: 4px 5px 4px 20px;
  }

  .topbar {
    min-height: 44px;
    border-bottom: 1px solid #e5e5e5;
    background: #fff;
    position: fixed;
    width: 100%;
    z-index: 9999;
    display: flex;
    font-size: 18px;
    align-items: center;
  }

  .topbar_left {
    flex: 0 0 20px;
    margin-left: 10px;
  }

  .topbar_middle {
    text-align: center;
    flex: 0 0 89%;
  }

  .topbar_right {
    flex: 0 0 20px;
    position: absolute;
    right: 10px;
  }

  .task_main {
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 0;
  }

  .task_main::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 5px;
    background: #e6e6e6;
    left: 28px;
    margin-left: -5px;
    z-index: 0;

  }


  .task_title {
    margin: 40px 20px 0px 50px;
    font-size: 17px;
    font-weight: bold;
    line-height: 25px;
  }

  .tasklist {
    margin: 0 0 20px 0;
  }

  .liubai {
    width: 100%;
    height: 10px;
    background-color: rgb(246, 246, 246);
    margin: 15px 0;
  }

  /* 底部栏 */
  .todolist-tab {
    color: #666;
    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
  }

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

  .todolist-tab-btn-on {
    color: #46a4da
  }

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

  .todolist-tab-count {
    position: absolute;
    margin-left: 14%;
    bottom: 30px;
    font-size: 12px;
    line-height: 12px;
    width: 12px;
    font-weight: bold;
    color: #fff;
    border-radius: 50%;
    padding: 3px;
    text-align: center;
    background-color: #fc4f4f
  }

</style>