<template>
  <div class="maininfo">
    <div class="taskinfo">
      <div class="taskinfoflex">
        <div class="taskinfotitle">
          <div class="title">订单号码：</div>
          <div class="taskinfoitem">SC181211001</div>
        </div>
        <div class="taskflag">待审核</div>
      </div>
      <div class="taskinfotitle">
        <div class="title">客户名称：</div>
        <div class="taskinfoitem cusname">广东省佛山市顺德区某某经销商</div>
      </div>

      <div class="taskinfotitle">
        <div class="title">业务员：</div>
        <div class="taskinfoitem">张大三</div>
      </div>
      <div class='taskinfoflex'>
        <div class="taskinfotitle">
          <div class="title ">订货日期：</div>
          <div class="taskinfoitem leftsize">2018-12-10</div>
        </div>
        <div class="taskinfotitle">
          <div class="title rightside">交货日期：</div>
          <div class="taskinfoitem requiredate">2018-12-30</div>
        </div>
      </div>
      <div class="taskinfoamt">
        <div class="taskinfotitle">
          <div class="title">金额：</div>
          <div class="taskinfoitem taskamt leftsize">¥100000</div>
        </div>
        <div class="taskinfotitle dingjin">
          <div class="title rightside">订金：</div>
          <div class="taskinfoitem taskamt">¥30000</div>
        </div>
      </div>
    </div>


    <div class="mxinfo">
      <div class="subtitle">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-shangpin"></use>
        </svg>
        共300件商品，其中包括
      </div>
      <div clsss="rowmx">
        <div class="mxmtrl">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-dian"></use>
          </svg>
          218B两人位沙发，拉扣:布扣|座包:型号标配|配置:皮加布|
        </div>
        <div class="mxqty">数量：100，¥50000</div>
      </div>
      <div clsss="rowmx">
        <div class="mxmtrl">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-dian"></use>
          </svg>
          6528茶几，型号：P069（72913）
        </div>
        <div class="mxqty">数量：100，¥30000</div>
      </div>
    </div>

    <div class="bottomarea">
      <div class="tip">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fenlei"></use>
        </svg>
        国内
      </div>
      <div class="tip">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-icon-"></use>
        </svg>
        款到发货
      </div>
      <div class="btndetail" @click="gotodetail">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-chakan"></use>
        </svg>
        查看详情
      </div>


    </div>
  </div>
</template>

<script>
  export default {
    name: "saletasklist",
    props: {},
    methods: {
      gotodetail(){
        this.$router.push({
          path: "/detail"
        });
      }
    }
  };

</script>

<style>
  .maininfo {
    background: #fff;
    margin-bottom: 10px;
    padding: 10px 10px 2px 10px;
    font-size: 16px;
    font-family: "微软雅黑";
    /* width:100% */
  }

  .taskinfo{
    margin:0 10px;
  }

  .taskinfoflex {
    display: flex;
    /* height: 60px; */
    align-items: center;
  }

  .taskflag {
    position: absolute;
    right: 20px;
    width: 55px;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    border-radius: 15px;
    padding: 3px;
    text-align: center;
    margin-right: 5px;
    background-color: red;
  }

  .taskinfotitle {
    font-weight: bold;
    margin: 0;
    display: flex;
    flex-wrap:wrap;
  }

  .cusname{
    width:70%;
  }

  .title {
    width: 80px;
    text-align: right
  }

  .taskinfoitem {
    font-weight: normal;
    color: #333;

  }

  .taskinfoamt {
    display: flex;
  }

  .taskamt {
    font-weight: bold;
    color: red;
  }

  .leftsize {
    width: 100px;
  }

  /* .requiredate {
    position: absolute;
    right: 39px;
    width:90px;
  } */



  .mxinfo {
    /* border-top: 1px solid #eee; */
    padding: 2px 5px 5px 5px;
    margin: 5px;
    background-color: rgb(245, 244, 244);
    border-radius: 10px;
    /* width:100% */
  }

  .subtitle {
    font-size: 14px;
    color: #666;
    margin: 5px 0;
    padding-bottom: 3px;
    border-bottom: 1px solid #ddd;
  }

  .mxmtrl {
    font-size: 14px;
    margin-top: 5px;
  }

  .mxqty {
    font-size: 12px;
    color: #888;
    margin-bottom: 3px;
    margin-left: 20px;
  }

  .bottomarea {
    display: flex;
    /* border-top: 1px solid #eee; */
    margin: 0 5px;
    padding: 5px 0;
    font-size: 13px;
    line-height: 25px;
    color: #888
  }

  .tip {
    border-radius: 5px;
    background-color: rgb(245, 243, 243);
    padding: 0 10px;
    margin-right: 10px;
  }

  .btndetail {
    position: absolute;
    right: 20px;
    color: #888;
    font-size: 13px;
    margin-right: 0px;
    border-radius: 5px;
  }

</style>
