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

<template>
  <div class="say-price">
    <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="form-list">
      <div class="form-title">
        <span class="fl">价格梯度<span>(PCS)</span></span>
        <span class="fr">RMB<img src="/images/mobile/@2x/applyPurchase/currency-arrow-down.png" alt=""></span>
      </div>
      <div class="form-item">
        <input type="number" placeholder="梯度" class="fl">
        <input type="number" placeholder="单价" class="fr">
        <i class="iconfont icon-add"></i>
      </div>
      <div class="form-item">
        <input type="number" placeholder="梯度" class="fl">
        <input type="number" placeholder="单价" class="fr">
        <i class="iconfont icon-minus"></i>
      </div>
      <div class="form-item">
        <input type="number" placeholder="梯度" class="fl">
        <input type="number" placeholder="单价" class="fr">
        <i class="iconfont icon-minus"></i>
      </div>
      <div class="form-item">
        <input type="number" placeholder="梯度" class="fl">
        <input type="number" placeholder="单价" class="fr">
        <i class="iconfont icon-minus"></i>
      </div>
      <div class="form-item">
        <input type="number" placeholder="梯度" class="fl">
        <input type="number" placeholder="单价" class="fr">
        <i class="iconfont icon-minus"></i>
      </div>
      <div class="date">
        <span>交期(天)</span>
        <input type="number" placeholder="最大值" class="fr">
      </div>
      <a class="say-price-btn">确定</a>
    </div>
  </div>
</template>
<style lang="scss" scoped>
  .say-price {
    background: #f3f3f3;
    padding: .18rem 0;
    position: absolute;
    top: .88rem;
    bottom: 1rem;
    width: 100%;
    overflow-y: auto;
    .form-list {
      height: 7.53rem;
      background: #fff;
      padding-top: .2rem;
      > div {
        height: .7rem;
        line-height: .7rem;
        width: 6.12rem;
        font-size: .28rem;
        margin: 0 auto .2rem;
        input {
          height: .7rem;
          text-align: center;
          border: .01rem solid #666;
          border-radius: .05rem;
        }
        &.form-title {
          border: .01rem solid #666;
          border-radius: .05rem;
          padding: 0 .07rem 0 .17rem;
          .fl {
            span {
              color: #666;
            }
          }
          .fr {
            img {
              width: .12rem;
              height: .06rem;
              margin-left: .04rem;
            }
          }
        }
        &.form-item {
          position: relative;
          input {
            width: 2.93rem;
          }
          i {
            position: absolute;
            right: -.5rem;
            top: 0;
            font-size: .34rem;
            &.icon-add {
              color: #4768f3;
            }
            &.icon-minus {
              color: #8d8d8d;
            }
          }
        }
        &.date {
          input {
            width: 4.8rem;
          }
        }
      }
    }
  }
</style>