<template>
  <div id="saletaskmxjd">
    <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">
        订单明细进度跟踪
      </div>
      <div class="topbar_right">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-caidan"></use>
        </svg>
      </div>
    </div>

    <div id="content">

      <div class="salemxjd_info">
        <div class="salemxjd_mtrl">V形角脚(三角底) 焊梯形方片</div>
        <div class="salemxjd_mtrl_sub">L184*L184*H123*3.0 喷黑砂</div>
        <div class="salemxjd_mtrl_sub">数量：2000 交期：2019-05-25</div>
      </div>

      <div class="liubai_dt"></div>

      <div class="salemxjd_data">
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-dian"></use>
          </svg>
          材料入库：1876；4月3日</div>
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-dian"></use>
          </svg>
          原料领料：1875；4月7日</div>
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-dian"></use>
          </svg>
          冲压：已完成</div>
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-dian"></use>
          </svg>
          切管：已完成</div>
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-dian"></use>
          </svg>
          自动焊：已完成</div>
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-dian"></use>
          </svg>
          AR：已完成</div>
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-dian"></use>
          </svg>
          CO2：未派工</div>
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-dian"></use>
          </svg>
          手抛：已完成</div>
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-dian"></use>
          </svg>
          自抛：已完成</div>
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-dian"></use>
          </svg>
          手磨：80%；预计4月20日完成，已超期</div>
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-dian"></use>
          </svg>
          包装：70%；预计4月30日完成</div>
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-dian"></use>
          </svg>
          外协供应商：辉隆电镀厂</div>
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-dian"></use>
          </svg>
          外协发出：1012；4月8日</div>
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-dian"></use>
          </svg>
          外协回厂：1012；4月10日</div>
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-dian"></use>
          </svg>
          外协返工：48；4月12日</div>
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-dian"></use>
          </svg>
          包装领料：2331；4月13日</div>
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-dian"></use>
          </svg>
          成品入仓：1300；欠：700</div>
      </div>
    </div>
  </div>

</template>
<script>
  export default {
    methods: {
      goback() {
        {
          history.back();
        }
      }
    }
  }

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

  .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 %; */
    margin-left: 10px;
  }

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

  .topbar_right {
    /* flex: 0 0 10%; */
    position: absolute;
    right: 10px;
  }

  #content {
    position: absolute;
    top: 44px;
    background-color: #fff;
    width: 100%
  }

  .liubai_dt {
    width: 100%;
    height: 10px;
    background-color: #f6f6f6;
  }

  .salemxjd_info {
    padding: 20px;
  }

  .salemxjd_mtrl {
    font-size: 18px;
    font-weight: bold;
  }

  .salemxjd_mtrl_sub {
    font-size: 15px;
    color: #666;
  }

  .salemxjd_data {
    /* font-size: 15px;
    padding: 10px;
    line-height: 30px; */
    margin: 0 20px;
    font-size: 15px;
    line-height: 30px;
    padding: 10px 0;
  }

</style>
