LongjoeUI/src/pages/orderzl.vue

<template>
  <div>
    <div class="topbar">
      <div class="topbar_left">
        <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="order_scan_area">
        <div class="order_scan">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-sousuo"></use>
          </svg>
          输入或扫描单号
        </div>
        <div class="order_scan_btn">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-iconfontscan"></use>
          </svg>
        </div>
      </div>

      <!-- 日期 -->
      <div style="font-size: 17px;font-weight: bold;padding: 10px 0 0 10px;">9月10日</div>
      <!-- 内容主体 -->
      <div style="padding: 10px 10px 0 10px;font-size:14px;line-height:19px;">

        <!-- 以下div封装为组件,v-for中调用 -->
        <div class="arrow_box kindgreen">
          <div style="font-size:16px;font-weight:bold">SC190907001</div>
          <div class="order_conner_sec tip_red">待排程审</div>
          <div class="order_conner tip_green">在进行</div>

          <div>W-168黑色 FHZY4202</div>
          <div>数量：100
            <span style="margin-left:5px;color:#888">
              (已完成80,已终止5,未完成15)
            </span>
          </div>
          <div>
            <span>日期：9月10日~9月20日</span>
<!-- 如果当前时间晚于指令单的要求完成时间，则显示已超期标记 -->

            <!-- <span style="color: #fa5a5a;font-size:13px;margin-left:5px">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-jinggao"></use>
              </svg>
              已超期
            </span> -->
          </div>
          <div>生产批号：FHLWL8603-02</div>
        </div>

        <div class="arrow_box kindblue">
          <div style="font-size:16px;font-weight:bold">SC190829001</div>
          <div class="order_conner_sec tip_blue">已排程审</div>
          <div class="order_conner tip_blue">已完成</div>

          <div>FS19-1 FHLWL8603</div>
          <div>数量：100
            <span style="margin-left:5px;color:#888">
              (已完成100)
            </span>
          </div>
          <div>
            <span>日期：9月10日~10月20日</span>
          </div>
          <div>生产批号：FHD6605-17</div>
        </div>

        <div class="arrow_box kindred">
          <div style="font-size:16px;font-weight:bold">SC190910001</div>
          <div class="order_conner_sec tip_red">待排程审</div>
          <div class="order_conner tip_red">待审核</div>

          <div>X-16B升级版电镀架 FHD59301</div>
          <div>数量：100
            <span style="margin-left:5px;color:#888">
              (已完成0,未完成100)
            </span>
          </div>
          <div>
            <span>日期：9月10日~10月20日</span>
          </div>
          <div>生产批号：FHD59301-132</div>
        </div>

      </div>

<!-- 以下内容跟上面重复，只作效果展示用 -->
      <!-- 日期 -->
      <div style="font-size: 17px;font-weight: bold;padding: 10px 0 0 10px;">9月9日</div>
      <!-- 内容主体 -->
      <div style="padding: 10px 10px 0 10px;font-size:14px;line-height:19px">

        <!-- 以下div封装为组件,v-for中调用 -->
        <div class="arrow_box kindgreen">
          <div style="font-size:16px;font-weight:bold">SC190907001</div>
          <div class="order_conner_sec tip_red">待排程审</div>
          <div class="order_conner tip_green">在进行</div>

          <div>W-168黑色 FHZY4202</div>
          <div>数量：100
            <span style="margin-left:5px;color:#888">
              (已完成80,已终止5,未完成15)
            </span>
          </div>
          <div>
            <span>日期：9月9日~9月12日</span>
            <span style="color: #fa5a5a;font-size:13px;margin-left:5px">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-jinggao"></use>
              </svg>
              已超期
            </span>
          </div>
          <div>生产批号：FHLWL8603-02</div>
        </div>

        <div class="arrow_box kindblue">
          <div style="font-size:16px;font-weight:bold">SC190829001</div>
          <div class="order_conner_sec tip_blue">已排程审</div>
          <div class="order_conner tip_blue">已完成</div>

          <div>FS19-1 FHLWL8603</div>
          <div>数量：100
            <span style="margin-left:5px;color:#888">
              (已完成100)
            </span>
          </div>
          <div>
            <span>日期：9月10日~10月20日</span>
          </div>
          <div>生产批号：FHD6605-17</div>
        </div>

        <div class="arrow_box kindred">
          <div style="font-size:16px;font-weight:bold">SC190910001</div>
          <div class="order_conner_sec tip_red">待排程审</div>
          <div class="order_conner tip_red">待审核</div>

          <div>X-16B升级版电镀架 FHD59301</div>
          <div>数量：100
            <span style="margin-left:5px;color:#888">
              (已完成0,未完成100)
            </span>
          </div>
          <div>
            <span>日期：9月10日~10月20日</span>
          </div>
          <div>生产批号：FHD59301-132</div>
        </div>

      </div>


    </div>
  </div>

</template>

<script>
  export default {

  }

</script>

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

  .topbar {
    min-height: 44px;
    border-bottom: 1px solid #e5e5e5;
    background: #fff;
    position: fixed;
    width: 100%;
    z-index: 9993;
    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%;
    padding-bottom: 60px;
  }

  .order_scan_area {
    display: flex;
    align-items: center;
  }

  .order_scan {
    margin: 10px 10px;
    padding: 8px 10px;
    /* border: 1px solid #c7c7c7; */
    background-color: #f7f7f7;
    color: #bbb;
    border-radius: 20px;
    flex: 0 0 78%
  }

  .order_scan_btn {
    color: #999;
    font-size: 28px;
  }

  .arrow_box {
    position: relative;
    padding: 5px 5px 5px 10px;
    /* border-radius: 5px; */

    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1);
    background: #fff;
    margin-bottom: 8px;
    /* border-bottom: 1px solid #f5f5f5;
    border-top: 1px solid #f5f5f5;
    border-right: 1px solid #f5f5f5; */
  }

  .kindgreen {
    border-left: 5px solid #8dc026;

  }


  .kindblue {
    border-left: 5px solid #46a4da;

  }

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


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

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

  .tip_green {
    color: #fff;
    background-color: #8dc026
  }

  .order_conner {
    position: absolute;
    right: 0px;
    top: 0px;
    /* color: #888; */
    font-size: 12px;
    padding: 4px 10px;
    /* background-color: #ececec; */
    line-height: 12px;
    width: 36px;
    text-align: center;
    font-weight: bold;
  }

  .order_conner_sec {
    position: absolute;
    right: 60px;
    top: 0px;
    /* color: #888; */
    font-size: 12px;
    padding: 4px 10px;
    /* background-color: #ececec; */
    line-height: 12px;
    /* width: 36px; */
    text-align: center;
    font-weight: bold;
  }

</style>