LongjoeUI/src/pages/quote_rslt.vue

<template>
  <div>
    <div class="quote_rslt">
      <div class="quote_rslt_mtrl">
        <div class="quote_rslt_mtrl_info">
          <div class="quote_rslt_mtrl_info_mtrlname">S-150电竞椅</div>
          <div class="quote_rslt_mtrl_info_price"><span>$</span>57.63</div>
        </div>
        <div class="quote_rslt_mtrl_info_pic">
          <img src="../assets/S-150.jpg" class="quote_edit_img"></img>
        </div>
      </div>

      <div class="quote_rslt_pz">
        <div class="quote_edit_main">
          <div class="quote_edit_main_title">参数</div>

          <div class="quote_edit_main_pz">
            <div class="quote_edit_main_pzname">规格</div>
            <div class="quote_edit_main_pzvalue">55.5*66*129CM</div>
          </div>


          <div class="quote_edit_main_pz">
            <div class="quote_edit_main_pzname">背垫尺寸</div>
            <div class="quote_edit_main_pzvalue">85*48CM</div>
          </div>

          <div class="quote_edit_main_pz">
            <div class="quote_edit_main_pzname">坐垫尺寸</div>
            <div class="quote_edit_main_pzvalue">52*53CM</div>
          </div>

          <div class="quote_edit_main_pz">
            <div class="quote_edit_main_pzname">座深</div>
            <div class="quote_edit_main_pzvalue">41CM</div>
          </div>


          <div class="quote_edit_main_pz">
            <div class="quote_edit_main_pzname">座高</div>
            <div class="quote_edit_main_pzvalue">48CM</div>
          </div>

          <div class="quote_edit_main_pz">
            <div class="quote_edit_main_pzname">净重</div>
            <div class="quote_edit_main_pzvalue">17.5KG</div>
          </div>

          <div class="quote_edit_main_pz">
            <div class="quote_edit_main_pzname">毛重</div>
            <div class="quote_edit_main_pzvalue">19KG</div>
          </div>

          <div class="quote_edit_main_pz">
            <div class="quote_edit_main_pzname">装柜量</div>
            <div class="quote_edit_main_pzvalue">40Q": 424 箱</div>
          </div>

        </div>
      </div>

      <div class="quote_rslt_pz">
        <div class="quote_edit_main">
          <div class="quote_edit_main_title">配置</div>

          <div class="quote_edit_main_pz">
            <div class="quote_edit_main_pzname">面料</div>
            <div class="quote_edit_main_pzvalue">黑色MQ-125复合+红色12-61复合</div>
          </div>


          <div class="quote_edit_main_pz">
            <div class="quote_edit_main_pzname">汽杆</div>
            <div class="quote_edit_main_pzvalue">100黑气杆</div>
          </div>

          <div class="quote_edit_main_pz">
            <div class="quote_edit_main_pzname">扶手</div>
            <div class="quote_edit_main_pzvalue">908升降扶手</div>
          </div>

          <div class="quote_edit_main_pz">
            <div class="quote_edit_main_pzname">扶手面</div>
            <div class="quote_edit_main_pzvalue">常规pu面2孔</div>
          </div>


          <div class="quote_edit_main_pz">
            <div class="quote_edit_main_pzname">脚</div>
            <div class="quote_edit_main_pzvalue">L350皮纹尼龙脚+红装饰片</div>
          </div>

          <div class="quote_edit_main_pz">
            <div class="quote_edit_main_pzname">轮子</div>
            <div class="quote_edit_main_pzvalue">60mm亚光黑月亮轮</div>
          </div>
        </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 style="display:flex">
        <div style="color: #666">业务员代号：NF001</div>
        <div class="quote_rslt_date">有效期至：2019-06-01</div>
      </div>

      <div class="watermark_wrap">
        <div class="watermark"></div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {

  }

</script>
<style>
  body {
    margin: 0;
    padding: 0;
    background-color: #f6f6f6;
    font-family: "微软雅黑";
    font-size: 14px;
  }
 .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;
  }
  .watermark_wrap {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

  .watermark {
    height: 100%;
    width: 200%;
    background: url('../assets/nflogo.jpg');
    background-size: 200px;
    /* background-position:center; */
    z-index: 9999;
    opacity: 0.08;
    position: absolute;
    top: 0;
    left: -100px;
    transform: rotate(-50deg);
    overflow: hidden;
  }

  .quote_rslt {
    background-color: #ffffff;
    margin: 10px;
    padding: 10px 10px 10px 10px;
    border-radius: 15px;
    border: 1px solid #e5e5e5;
  }

  .quote_rslt_date {
    position: absolute;
    right: 25px;
    color: #666
  }

  .quote_rslt_mtrl_info {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: bold;

  }

  .quote_rslt_mtrl_info_mtrlname {
    padding: 0 0 0 10px;
  }

  .quote_rslt_mtrl_info_price {
    color: #fd7526;
    position: absolute;
    right: 30px;
  }

  .quote_rslt_mtrl_info_price span {
    font-size: 14px;
  }

  .quote_rslt_mtrl_info_pic {
    /* overflow: hidden; */
    text-align: center;
  }

  .quote_edit_img {
    width: 80%
  }

  .quote_rslt_pz {
    border-top: 2px dashed #e5e5e5;
    padding: 10px;
  }

  .quote_edit_main_pz {
    font-size: 14px;
    display: flex;
    line-height: 24px;
  }

  .quote_edit_main_pzname {
    flex: 0 0 65px;
    font-weight: bold;
    color: #666
  }

  .quote_edit_main_pzvalue {
    color: #666
  }

  .quote_edit_main_title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
  }

</style>