mall-web-ssr/components/mobile/applyPurchase/SayPriceInfo.vue

<template>
  <div class="say-price-info">
    <div class="base-info">
      <div class="content-line">
        型号：<span>ASDASDASDASDASD</span>
      </div>
      <div class="content-line">
        品牌：<span>ASDASDASDASDASD</span>
      </div>
      <div class="content-line">
        规格：<span>ASDASDASDASDASD</span>
      </div>
      <div class="content-line">
        采购数量：<span>ASDASDASDASDASD</span>
      </div>
      <div class="content-line">
        币种：<span>ASDASDASDASDASD</span>
      </div>
      <div class="content-line">
        截止日期：<span>ASDASDASDASDASD</span>
      </div>
    </div>
    <div class="base-info">
      <div class="content-line">
        买家：<span>ASDASDASDASDASD</span>
      </div>
      <div class="content-line">
        联系电话：<span>ASDASDASDASDASD</span>
      </div>
    </div>
    <div class="base-info say-info">
      <img src="/images/mobile/@2x/applyPurchase/say-price-check.png" alt="">
      <!--<img src="/images/mobile/@2x/applyPurchase/say-price-accept.png" alt="">-->
      <div class="content-line">
        华商龙肯德基撒话费卡刷卡
      </div>
      <div class="content-line">
        报价人：<span>张三</span>
      </div>
      <div class="content-line">
        电话：<span>13213123123</span>
      </div>
      <div class="content-line date">
        交期(天)：<span>3-5</span>
      </div>
      <p>2018-01-22</p>
      <div class="price-level">
        <p>价格梯度：<span>(pcs)</span></p>
        <ul>
          <li>
            <span>1+</span>
            <span>$10</span>
          </li>
          <li>
            <span>1+</span>
            <span>$10</span>
          </li>
          <li>
            <span>1+</span>
            <span>$10</span>
          </li>
          <li>
            <span>1+</span>
            <span>$10</span>
          </li>
          <li>
            <span>1+</span>
            <span>$10</span>
          </li>
        </ul>
      </div>
    </div>
    <a class="say-price-btn">采纳报价</a>
  </div>
</template>
<style lang="scss" scoped>
  .say-price-info {
    background: #f3f3f3;
    padding: .18rem 0;
    position: absolute;
    top: .88rem;
    bottom: 1rem;
    width: 100%;
    overflow-y: auto;
    .base-info {
      &.say-info {
        height: 4.54rem;
        position: relative;
        > img {
          position: absolute;
          right: 0;
          top: 0;
        }
        .content-line {
          width: 4.55rem;
          span {
            color: #333;
          }
          &.date {
            span {
              color: #ef5042;
            }
          }
        }
        > p {
          font-size: .24rem;
          color: #999;
        }
        .price-level {
          font-size: .26rem;
          position: absolute;
          top: 1.3rem;
          right: .3rem;
          width: 4rem;
          text-align: center;
          p {
            margin-bottom: .1rem;
            span {
              color: #666;
            }
          }
          ul {
            li {
              height: .52rem;
              line-height: .52rem;
              span {
                padding-left: .22rem;
                text-align: left;
                display: inline-block;
                border-top: .01rem solid #7e7e7e;
                border-left: .01rem solid #7e7e7e;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                &:first-child {
                  width: 45%;
                }
                &:last-child {
                  width: 55%;
                  border-right: .01rem solid #7e7e7e;
                }
              }
              &:last-child {
                border-bottom: .01rem solid #7e7e7e;
              }
            }
          }
        }
      }
    }
    .say-price-btn {
      margin: .87rem auto 0;
    }
  }
</style>