LongjoeUI/src/pages/components/tasklist.vue

<template>
  <div class="tasklist_main">

    <div class="arrow_box ">
      <div class="task_date_inner">8/6 16:00-18:00</div>
      <div class="task_conner_sec tip_red">超期</div>
      <div class="task_conner tip_red">待办</div>
      <div class="task_dscrp">
        <div>拿川建国有限公司的合同给老板签字然后传真过去给客户。</div>
      </div>

      <div class="task_flex">
        <div class="task_tip">安排人:张小强</div>
        <div class="task_tip">临时任务</div>
      </div>

      <div class="left_icon ">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-renwu"></use>
        </svg>
      </div>
    </div>

    <div class="arrow_box kindgreen">
      <div class="task_date_inner">8/6 15:32</div>
      <div class="task_conner_sec">有图片</div>
      <div class="task_conner tip_red">待验收</div>
      <div class="task_dscrp">
        <div>木工车间设备定期保养</div>
      </div>

      <div class="task_flex">
        <div class="task_tip">完成人:王大民</div>
        <div class="task_tip">任务验收</div>
      </div>

      <div class="left_icon icongreen">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-yan"></use>
        </svg>
      </div>
    </div>

    <div class="arrow_box kindred">
      <div class="task_date_inner">8/6 13:32</div>
      <div class="task_conner tip_blue">已审批</div>
      <div class="task_dscrp">
        <div>销售订单审核。SG190725003，美利坚不合群有限公司</div>
      </div>

      <div class="task_flex">
        <div class="task_tip">发起人:黎小娟</div>
        <div class="task_tip">审批流程</div>
      </div>

      <div class="left_icon iconred">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-shen3"></use>
        </svg>
      </div>
    </div>

    <div class="arrow_box kindorange">
      <div class="task_date_inner">8/6 09:22</div>
      <div class="task_conner">附件</div>
      <div class="task_dscrp">
        <div>附件为单号:SG190725002的唛头文件，请查收</div>
      </div>

      <div class="task_flex">
        <div class="task_tip">发送人:黎小娟</div>
        <div class="task_tip">SG190725002</div>
        <div class="task_tip">消息</div>
      </div>

      <div class="left_icon iconorange">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-youjian1"></use>
        </svg>
      </div>
    </div>

    <div class="arrow_box ">
      <div class="task_date_inner">8/6 16:00-18:00</div>
      <div class="task_conner tip_blue">已完成</div>
      <div class="task_dscrp">
        <div>跟设计公司沟通，定最新一季宣传画册的最终设计。</div>
      </div>

      <div class="task_flex">
        <div class="task_tip">安排人:张小强</div>
        <div class="task_tip">临时任务</div>
        <div class="task_tip">返工</div>
      </div>

      <div class="left_icon ">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-renwu"></use>
        </svg>
      </div>
    </div>

  </div>
</template>
<script>
  export default {
    name: "tasklist"
  }

</script>
<style>
  .tasklist_main {
    padding: 0px 10px 0px 50px;
    font-size: 15px;
  }

  .task_dscrp {
    line-height: 22px;
    margin: 0 0 5px 0;
    font-size: 15px;
  }

  .task_date_inner {
    color: #888;
    font-size: 12px;
    margin-bottom: 5px;
  }

  .task_conner {
    position: absolute;
    right: 0px;
    top: 0px;
    color: #888;
    font-size: 8px;
    padding: 5px;
    background-color: #ececec;
    line-height: 8px;
    width: 36px;
    text-align: center
  }

  .task_conner_sec {
    position: absolute;
    right: 50px;
    top: 0px;
    color: #888;
    font-size: 8px;
    padding: 5px;
    background-color: #ececec;
    line-height: 8px;
    width: 36px;
    text-align: center
  }

  .task_date_left {
    position: absolute;
    top: 35px;
    left: -50px;
    font-size: 10px;
    width: 45px;
    text-align: center;
  }

  .task_time_left {
    position: absolute;
    top: 50px;
    left: -50px;
    font-size: 12px;
    font-weight: bold;
    width: 45px;
    text-align: center;
  }

  .left_icon {
    position: absolute;
    top: 10px;
    left: -40px;
    /* background-color: #41838e; */
    /* font-size: 12px; */
    font-weight: bold;
    color: #fff;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    background: #46a4da;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #afdcf8;
    ;
  }

  .task_flex {
    display: flex;
    line-height: 20px;
  }

  .arrow_box {
    position: relative;
    padding: 5px 5px 5px 10px;
    /* border-radius: 5px; */
    border-left: 3px solid #46a4da;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1);
    background: #fff;
    margin-bottom: 10px;
  }

  .arrow_box:after {
    right: 100%;
    top: 22px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-right-color: #46a4da;
    border-width: 8px;
    margin-top: -8px;
  }

  .task_time {
    color: #888;
    margin-right: 10px;
    font-size: 14px;
  }

  .task_bottom div {
    margin-right: 10px
  }

  .task_tip {
    color: #888;
    font-size: 12px;
    margin-right: 10px;
    border-radius: 5px;
    padding: 5px;
    background-color: #f7f7f7;
    line-height: 12px;
  }

  .task_tip_inner {
    color: #888;
    font-size: 8px;
    /* margin-right: 10px; */
    border-radius: 5px;
    padding: 5px;
    background-color: #f7f7f7;
    line-height: 10px;
  }

  .tip_red {
    color: #fa5a5a;
    background-color: #ffc3c3
  }

  .tip_blue {
    color: #46a4da;
    background-color: #afdcf8
  }

  .kindgreen {
    border-left: 3px solid #88b04b;

  }

  .kindgreen::after {
    border-right-color: #88b04b;
  }

  .kindred {
    border-left: 3px solid #ff6f61;
  }

  .kindred::after {
    border-right-color: #ff6f61;
  }

  .kindorange{
   border-left: 3px solid #f2c866
  }

   .kindorange::after {
    border-right-color: #f2c866;
  } 

  .icongreen{
    background: #88b04b;
    box-shadow: 0 0 0 3px #d1f3a1;
  }

  .iconred{
    background: #ff6f61;
    box-shadow: 0 0 0 3px #fdd1cd;
  }

    .iconorange{
    background: #f2c866;
    box-shadow: 0 0 0 3px #f7e7c2;
  }

</style>