<template>
  <div>
    <div class="quotehis_cust">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-kehu"></use>
      </svg>
      新西兰XXX经销商</div>
    <div class="quotelist_main">
      <div class="quotelist_pic">
        <img :src="picurl" class="quote-img-responsive "></img>
        <!-- <img src="../../assets/S-150.jpg" class="quote-img-responsive "></img> -->
      </div>
      <div class="quotelist_info">
        <div class="quotelist_info_mtrl">{{qlist.mtrlname}}</div>
        <div class="quotelist_info_mtrlmode">{{qlist.mtrlmode}}</div>
        <div class="quotelist_info_other">
          <div>净重{{qlist.nw}}</div>
          <div>毛重{{qlist.gw}}</div>
          <div>{{qlist.pack}}</div>
        </div>
        <!-- <div class="quotelist_info_amt">
          <span>¥</span>{{qlist.price}}
        </div> -->
        <div style="display:flex;width:100%;align-items: center;font-size:12px;color:#666">
          <div style="font-size:16px;font-weight:bold;margin-right:10px">美元</div>
          <div style="font-size:16px;font-weight:bold;margin-right:8px;color:#f00">$57.63</div>
          <div style="margin-right:8px">数量:432</div>
          <!-- <div style="margin-right:8px">金额:$24,896.16</div>
          <div>贸易方式:FOB</div> -->
        </div>

        <div style="display:flex;width:100%;align-items: center;font-size:12px;color:#666">
          <!-- <div style="font-size:16px;font-weight:bold;margin-right:10px">美元</div>
          <div style="margin-right:8px">$57.63</div> -->
          <!-- <div style="margin-right:8px">数量:432</div> -->
          <div style="margin-right:8px">金额:$24,896.16</div>
          <div>贸易方式:FOB</div>
        </div>

        <div class="quotelisthis_btn">
          <div class="quotelisthis_btn_bj">再次报价</div>
        </div>
      </div>


    </div>
  </div>
</template>
<script>
  export default {
    name: "quotelist",
    props: {
      qlist: ""
    },
    data() {
      return {
        picstr2: "S-102.jpg"
      }
    },
    computed: {
      picurl: function () {
        // return require("../../assets/" + this.qlist.picurl)
      }
    },

  }

</script>
<style>
  .quotehis_cust {
    margin: 10px 0 5px 25px;
    font-weight: bold;
  }

  .quotelist_main {
    display: flex;
    padding: 2px 0 20px 2px;
    border-bottom: 1px solid #f0f0f0;
  }

  .quote_search {
    background-color: #f7f7f7;
    margin: 5px 10px;
    padding: 0px 5px 0px 20px;
    font-size: 14px;
    line-height: 30px;
    border-radius: 15px;
    color: #777777
  }

  .quotelist_pic {
    margin-left: -20px;
    flex: 0 0 120px;
  }

  .quote-img-responsive {
    height: 120px
  }

  .quotelist_info {
    margin-left: -20px;
    flex: 0 0 65%;
  }

  .quotelist_info_other {
    display: flex
  }

  .quotelist_info_mtrl {
    font-size: 15px;
  }

  .quotelist_info_mtrlmode {
    font-size: 12px;
    color: #9c9c9c
  }

  .quotelist_info_other {
    font-size: 11px;
    padding: 2px 0;
  }

  .quotelist_info_other div {
    margin-right: 5px;
    border-radius: 15px;
    color: #888;
    background-color: #f8f8f8;
    padding: 0px 5px;
  }

  .quotelist_info_amt {
    color: #ff0000;
    font-weight: bold;
    font-size: 20px;
    margin-top: 5px;
  }

  .quotelist_info_amt span {
    font-size: 12px;
    font-weight: 500;
    padding: 0 2px 0 0;
  }

  .quotelist_info_qty {
    font-size: 12px;
    color: #9c9c9c;
    padding: 0 0 5px 0;
    border-bottom: 1px solid #f0f0f0;
  }



  .quotelisthis_btn {
    display: flex;
    position: absolute;
    right: 20px;
    color: #000000;
    font-size: 13px;
    margin-top:5px;

  }

  .quotelisthis_btn_bj {
    border: 1px solid #dfdfdf;
    padding: 5px 15px;
    border-radius: 15px;
  }

</style>
