mall-web-ssr/components/mobile/center/upoff-material.vue

<template>
    <div class="upoff-material-wrapper" v-if="showUpoff">
      <div class="mobile-nav">
        <div class="mobile-header mobile-center-header">
          <a @click="hide"><i class="iconfont icon-fanhui"></i></a>
          <p>编辑上下架</p>
          <p class="en-name">
            <img :src="`/images/mobile/center/${user.data.enterprise && user.data.enterprise.uu ? 'en' : 'self'}.png`" alt="">{{currentEnName}}
          </p>
        </div>
      </div>
      <div class="upoff-materiel-wrapper" @click="clearInfo()">
        <div ref="scroll" style="height: 100%;overflow-y:scroll">
          <div>
            <div style="background: #fff;border: 1px solid #dcdcdc;padding:0 0.2rem 0.5rem">
              <div class="opoff-title clearfix">
                <!-- :class="item.standard ? 'standed' : 'istanded'"-->
                <div class="icon standed"  :class="chooseItem.standard ? 'standed' : 'istanded'"></div>
                <div class="opoff-title-text pull-left">{{chooseItem.pcmpcode || '-'}}</div>
              </div>
              <div class="off-content">
                <div class="clearfix">
                  <span class="name">品牌：</span>
                  <span class="con">{{chooseItem.pbranden || chooseItem.pbrand || '-'}}</span>
                </div>
                <div class="clearfix">
                  <span class="name">物料名称：</span>
                  <span class="con">{{chooseItem.kind || chooseItem.kinden || '-'}}</span>
                </div>
                <div class="clearfix">
                  <span class="name">规格：</span>
                  <span class="con">{{chooseItem.spec || '-'}}</span>
                </div>
                <div class="clearfix">
                  <span class="name">库存(PCS)：</span>
                  <span class="con">{{chooseItem.erpReserve || '-'}}</span>
                </div>
                <div class="clearfix">
                  <span class="name">平均成本：</span>
                  <span class="con">{{chooseItem.price || '-'}}</span>
                </div>
              </div>
              <div class="off-info clearfix">
                <div class="minBuyqty pull-left">
                  <span>最小起订量：</span>
                  <input type="number" maxlength="10" @blur="minBuyQtyBlur()" v-model="chooseItem.goods.minBuyQty" placeholder="请输入最小起订量" />
                </div>
                <div class="pull-left" style="margin-left:0.2rem">
                  <span>可拆卖:</span>
                  <div class="progress-wrapper" :class="{active: chooseItem.goods.breakUp}" @click="changeBreakUp()">
                    <div class="progress-btn"></div>
                  </div>
                </div>
                <div class="pull-left">
                  <span>上架:</span>
                  <div class="progress-wrapper" :class="{active: chooseItem.goods.autoPublish}" @click="changeautoPublish()">
                    <div class="progress-btn"></div>
                  </div>
                </div>
              </div>
              <div class="off-info clearfix">
                <div class="pull-left">
                  <span class="name">销售方式：</span>
                  <div class="selectInput" @click.stop="showdropmenu()">
                    <span v-if="chooseItem.storeInfoOms">{{chooseItem.storeInfoOms}}</span>
                    <span v-else>{{chooseItem.goods.storeid === '33069557578d44e69bd91ad12d28a8d4' ? '寄售' : '自营'}}</span>
                    <img src="/images/mobile/product/drop_icon.png" v-if="!ShowShopshelfOff"/>
                    <ul :class="{active : showDrop }" v-if="!ShowShopshelfOff">
                      <li v-for="item in storeObj" @click.stop="chooseStore(item)">{{item}}</li>
                    </ul>
                  </div>
                </div>
                <div class="pull-left" style="margin-left: 0.2rem">
                  <span class="name">交期：</span>
                  <input type="tel" placeholder="天数" v-model="chooseItem.goods.minDelivery" class="input startInput" maxlength="3" @blur="minDeliveryBlur(chooseItem.goods.minDelivery)" />
                  -
                  <input type="tel" placeholder="天数" v-model="chooseItem.goods.maxDelivery" class="input endInput" maxlength="3" @blur="minDeliveryBlur(chooseItem.goods.maxDelivery)"/>
                </div>
              </div>
              <div class="off-info clearfix">
              <div class="pscList-top clearfix">
                <div class="pull-left">梯度/pcs</div>
                <div class="pull-right">单价</div>
              </div>
              <ul class="prices">
                <li v-for="(item, index) in chooseItem.goods.prices" v-bind:key="index">
                  <div class="clearfix">
                    <div class="pull-left">
                      <input v-if="index > 0" oninput="if(value.length>5)value=value.slice(0,9)"
                             type="tel" placeholder="数量" class="otherNumber"
                             :class="{firstNumber: index === 0}"
                             v-model.lazy.trim="item.start"
                             :disabled="index === 0" :readonly="index === 0"
                             @blur="startpriceBlur(item, index)" maxlength="9"
                      />
                      <input v-else oninput="if(value.length>5)value=value.slice(0,9)"
                             type="tel" placeholder="数量" class="otherNumber"
                             :class="{firstNumber: index === 0}"
                             v-model.lazy.trim="chooseItem.goods.minBuyQty"
                             :disabled="index === 0" :readonly="index === 0"
                             @blur="startpriceBlur(item, index)" maxlength="9"
                      />
                      <!--<label v-if="index !== chooseItem.goods.prices.length - 1">-</label>-->
                      <label v-if="index !== chooseItem.goods.prices.length - 1">以上</label>
                      <label v-if="index === chooseItem.goods.prices.length - 1">以上</label>
                      <!--<input oninput="if(value.length>5)value=value.slice(0,9)"-->
                             <!--type="tel" placeholder="数量" class="otherNumber"-->
                             <!--v-model.lazy.trim="item.end"-->
                             <!--v-if="index !== chooseItem.goods.prices.length - 1"-->
                             <!--@blur="endpriceBlur(item, index)"-->
                             <!--maxlength="9"/>-->
                    </div>
                    <div class="pull-right">
                      <input v-show="chooseItem.currencyName === 'RMB'"
                             class="priceM" type="text"
                             placeholder="单价(¥)"
                             v-model.lazy="item.rMBPrice"
                             @blur="rMBPriceBlur(item)"/>
                      <input v-show="chooseItem.currencyName !== 'RMB'"
                             class="priceM" type="text"
                             placeholder="单价($)"
                             v-model.lazy="item.rMBPrice"
                             @blur="rMBPriceBlur(item)"/>
                      <span @click="miuPrice(index)" class="clearfix"><img class="pull-left" src="/images/mobile/product/mui_icon.png"/></span>
                      <span @click="addPrice()" class="clearfix"><img  class="pull-left"src="/images/mobile/product/add_icon.png"/></span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            </div>
            <div class="update-materiel-wrapper-controll clearfix">
              <div class="pull-left" @click.stop="saveMateriel()">保存</div>
              <div class="pull-right" @click.stop="hide('cancel')">取消</div>
            </div>
          </div>
        </div>
      </div>

      <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
    </div>
</template>
<script>
  import { RemindBox } from '~components/mobile/common'
    export default {
      props: {
        chooseItem: {
          type: Object,
          default: {}
        }
      },
      computed: {
        storeInfoStore() {
          return this.$store.state.option.storeStatus.data
        }
      },
      data() {
        return {
          collectResult: '',
          timeoutCount: 0,
          ShowShopshelfOff: false,
          showDrop: false,
          storeObj: ['寄售', '自营'],
          showUpoff: false
        }
      },
      methods: {
        clearInfo() {},
        changeBreakUp() {
          this.chooseItem.goods.breakUp = !this.chooseItem.goods.breakUp
          this.minBuyQtyBlur()
        },
        saveMateriel() {
          if (!/^\d{1,6}$/.test(this.chooseItem.goods.minBuyQty)) {
            this.timeoutCount++
            this.collectResult = '最小起订量只能输入数字'
            return false
          } else if (this.chooseItem.goods.minBuyQty && !toString(this.chooseItem.goods.minBuyQty).trim()) {
            this.timeoutCount++
            this.collectResult = '最小起订量不能为空'
            return false
          } else if (!this.chooseItem.goods.minDelivery && !toString(this.chooseItem.goods.minDelivery).trim()) {
            this.timeoutCount++
            this.collectResult = '请填写最小交期时间'
            return false
          } else if (!this.chooseItem.goods.maxDelivery && !toString(this.chooseItem.goods.maxDelivery).trim()) {
            this.timeoutCount++
            this.collectResult = '请填写最大交期时间'
            return false
          } else if (!this.chooseItem.goods.minDelivery || !this.chooseItem.goods.maxDelivery) {
            this.timeoutCount++
            this.collectResult = '交期不能为空'
            return false
          } else if (!/^\d{1,3}$/.test(this.chooseItem.goods.minDelivery) || !/^\d{1,3}$/.test(this.chooseItem.goods.maxDelivery)) {
            this.timeoutCount++
            this.collectResult = '交期只能输入数字'
            return false
          } else {
            let isHas = false
            for (let i = 0; i < this.chooseItem.goods.prices.length; i++) {
              if (!this.chooseItem.goods.prices[i].start) {
                this.timeoutCount++
                this.collectResult = '分段数量必须填写'
                isHas = true
                break
              }  else if (Math.abs(this.chooseItem.goods.prices[i].rMBPrice) <= 0) {
                this.timeoutCount++
                this.collectResult = '单价必须是大于0的数字'
                isHas = true
                break
              } else if (!/^\d+$/.test(this.chooseItem.goods.prices[i].start) || (this.chooseItem.goods.prices[i].end !== '' && !/^\d+$/.test(this.chooseItem.goods.prices[i].end))) {
                this.timeoutCount++
                this.collectResult = '分段数量必须是正整数'
                isHas = true
                break
              } else if (!/^[0-9]+([.]{1}[0-9]{1,6})?$/.test(this.chooseItem.goods.prices[i].rMBPrice)) {
                this.timeoutCount++
                this.collectResult = '单价只能输入数字'
                isHas = true
                break
              }
            }
            if (isHas === true) {
              return false
            }
          }
          this.chooseItem.goods.selfSale = this.storeInfoStore.uuid ? 1 : 2
          if (!this.chooseItem.storeInfoOms) {
            this.chooseItem.storeInfoOms = this.chooseItem.goods.storeid === '33069557578d44e69bd91ad12d28a8d4' ? '寄售' : '自营'
          }
          if (this.storeInfoStore.uuid) {
            if (this.chooseItem.storeInfoOms === '寄售') {
              this.chooseItem.goods.selfSale = 2
            } else if (this.chooseItem.storeInfoOms === '自营') {
              this.chooseItem.goods.selfSale = 1
            }
          }
          this.chooseItem.goods.prices[this.chooseItem.goods.prices.length - 1].end = '9999999999'
          this.$http.put('/trade/goods', this.chooseItem.goods).then(res => {
            if (res.data.success) {
              this.timeoutCount++
              this.collectResult = '保存成功'
              setTimeout(() => {
                this.hide()
              }, 300)
            } else {
              this.timeoutCount++
              this.collectResult = res.data.message
            }
          }, err => {
            this.timeoutCount++
            this.collectResult = err.response.data
          })
        },
        // 最低起订量失去焦点操作
        minBuyQtyBlur() {
          if (Math.abs(this.chooseItem.minPackQty) <= 0) {
            this.timeoutCount++
            this.collectResult = '包装数必须是大于0的整数'
            this.chooseItem.minPackQty = 1
          } else if (Math.abs(this.chooseItem.goods.minBuyQty) <= 0) {
            this.timeoutCount++
            this.collectResult = '起订量必须是大于0的整数'
            this.chooseItem.goods.minBuyQty = 1
          } else if ((!this.chooseItem.breakUp && this.chooseItem.goods.minBuyQty) && this.chooseItem.goods.minBuyQty % this.chooseItem.minPackQty !== 0) {
            this.timeoutCount++
            this.collectResult = '不可拆卖时，起订量必须是包装数量的倍数'
            if (!this.chooseItem.minPackQty) {
              this.chooseItem.minPackQty = 1
            } else {
              if (this.chooseItem.minPackQty > this.chooseItem.goods.minBuyQty) {
                this.chooseItem.goods.minBuyQty = this.chooseItem.minPackQty
              } else {
                this.chooseItem.goods.minBuyQty = this.chooseItem.goods.minBuyQty - this.chooseItem.goods.minBuyQty % this.chooseItem.minPackQty
              }
            }
          }
          this.chooseItem.goods.prices[0].start = this.chooseItem.goods.minBuyQty
        },
        changeautoPublish() {
          this.chooseItem.goods.autoPublish = !this.chooseItem.goods.autoPublish
        },
        showdropmenu() {
          this.showDrop = !this.showDrop
        },
        // 选择销售方式
        chooseStore(item) {
          this.chooseItem.storeInfoOms = item
          this.showdropmenu()
        },
        minDeliveryBlur(str) {
          if (Math.abs(this.chooseItem.goods.minDelivery) === 0) {
            this.timeoutCount++
            this.collectResult = `交期天数不能为0`
            this.chooseItem.goods.minDelivery = ''
            return false
          } else if (Math.abs(this.chooseItem.goods.minDelivery) === 0) {
            this.timeoutCount++
            this.collectResult = `交期天数不能为0`
            this.chooseItem.goods.minDelivery = ''
            return false
          }
          if (Math.abs(this.chooseItem.goods.minDelivery) > Math.abs(this.chooseItem.goods.minDelivery)) {
            this.timeoutCount++
            this.collectResult = `最短交期应小于等于最长交期`
            this.chooseItem.goods.minDelivery = ''
          }
        },
        show() {
          this.showUpoff = true
        },
        hide(type) {
          this.showUpoff = false
          this.$emit('upoffMaterial', type)
        },
        // 开始价格阶段失去焦点
        startpriceBlur(item, index) {
          if (index > 0) {
            if (item.start === '' || toString(item.start).trim() === '') {
              return false
            } else if (this.chooseItem.goods.prices[index].start <= this.chooseItem.goods.prices[index - 1].start){
              this.timeoutCount++
              this.collectResult = '输入值会导致梯度重叠，请重新修改'
              item.start = ''
            }
            this.chooseItem.goods.prices[index - 1].end = item.start - 1
          }
        },
        // 单价失去焦点
        rMBPriceBlur(item) {
          if (item.rMBPrice === '' || !item.rMBPrice) { return false }
          if (!/^[0-9]+([.]{1}[0-9]{1,6})?$/.test(item.rMBPrice)) {
            this.timeoutCount++
            this.collectResult = '单价只能输入数字带6位小数'
          } else if (Math.abs(item.rMBPrice) === 0) {
            return false
          } else if (Math.abs(item.rMBPrice) >= 10000) {
            this.timeoutCount++
            item.rMBPrice = 9999
            this.collectResult = '单价不能高于10000'
            return false
          }
          item.rMBPrice = item.rMBPrice.toString()
          let splits = item.rMBPrice.split('.')
          if (splits[0].length >= 4) {
            splits[0] = splits[0].substr(0, 4)
            item.rMBPrice = splits[0]
          }
          if (splits[1]) {
            item.rMBPrice = splits[0] + '.' + splits[1]
          }
          if (splits[1] && splits[1].length > 6) {
            splits[1] = splits[1].substr(0, 7)
            let str = splits[1].substr(0, 6)
            if (splits[1][splits[1].length - 1] >= 5) {
              str = splits[1].substr(0, 6)
              str = Math.abs(str) + 1
            }
            item.rMBPrice = splits[0] + '.' + Math.ceil(str)
          }
        },
        addPrice() {
          if (this.chooseItem.goods.prices.length === 3) {
            this.timeoutCount++
            this.collectResult = '价格梯度最多只能有三个分段'
            return false
          }
          let copy = Object.assign({}, this.chooseItem.goods.prices[this.chooseItem.goods.prices.length - 1], {
            end: ''
          })
          this.chooseItem.goods.prices[this.chooseItem.goods.prices.length - 1] = copy
          this.chooseItem.goods.prices.push({
            end: '',
            rMBNTPrice: '',
            rMBPrice: '',
            start: ''
          })
        },
        miuPrice(index) {
          if (index === 0) {
            if (this.chooseItem.goods.prices.length === 3) {
              this.chooseItem.goods.prices[0].rMBPrice = this.chooseItem.goods.prices[1].rMBPrice
              this.chooseItem.goods.prices[0].end = this.chooseItem.goods.prices[1].end
              this.chooseItem.goods.prices[1].start = this.chooseItem.goods.prices[2].start
              this.chooseItem.goods.prices[1].rMBPrice = this.chooseItem.goods.prices[2].rMBPrice
              this.chooseItem.goods.prices[1].end = '9999999999'
              this.chooseItem.goods.prices.splice(2, 1)
            } else {
              index++
              if (this.chooseItem.goods.prices.length === 1) return
              this.chooseItem.goods.prices[0].rMBPrice = this.chooseItem.goods.prices[1].rMBPrice
              this.chooseItem.goods.prices[0].end = '9999999999'
              this.chooseItem.goods.prices.splice(index, 1)
            }
          } else if (index === 1) {
            if (this.chooseItem.prices.goods.length === 3) {
              this.chooseItem.goods.prices[1].rMBPrice = this.chooseItem.goods.prices[2].rMBPrice
              this.chooseItem.goods.prices[1].end = '9999999999'
              this.chooseItem.goods.prices.splice(2, 1)
            } else {
              this.chooseItem.goods.prices[0].end = '9999999999'
              this.chooseItem.goods.prices.splice(index, 1)
            }
          } else {
            this.chooseItem.goods.prices[1].end = '9999999999'
            this.chooseItem.goods.prices.splice(index, 1)
          }
          console.log(this.chooseItem.goods.prices)
        },
        // 结束价格阶段失去焦点
        endpriceBlur(item, index) {
          if (item.end === '') {
            return false
          } else if (Math.abs(item.end) + 1 <= Math.abs(item.start)) {
            this.timeoutCount++
            this.collectResult = `输入值不能小于${item.start}`
            item.end = ''
            return false
          } else if (this.chooseItem.goods.prices[index + 1].start !== '' && toString(this.chooseItem.goods.prices[index + 1].start).trim() !== '' && Math.abs(item.end) + 1 > Math.abs(this.chooseItem.goods.prices[index + 1].start)) {
            this.timeoutCount++
            this.collectResult = `输入值不能大于${this.chooseItem.goods.prices[index + 1].start - 1}`
            item.end = ''
            return false
          } else if (this.chooseItem.goods.prices[index + 1].end !== '' && toString(this.chooseItem.goods.prices[index + 1].end).trim() !== '' && Math.abs(item.end) + 1 > Math.abs(this.chooseItem.goods.prices[index + 1].end)) {
            this.timeoutCount++
            this.collectResult = `输入值不能大于${this.chooseItem.goods.prices[index + 1].end}`
            item.end = ''
            return false
          }
          this.chooseItem.goods.prices[index + 1].start = Math.abs(item.end) + 1
          console.log(this.chooseItem.goods.prices)
        }
      },
      components: {
        RemindBox
      }
    }
</script>
<style scoped lang='scss'>
  @mixin overFlowHidden {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  @mixin lineHeight($value) {
    height: $value;
    line-height: $value;
  }
  .upoff-material-wrapper {
    position: fixed;
    z-index: 1000;
    background: #f1f3f6;
    /*background: red;*/
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    .mobile-header{
      position: fixed;
      top: 0;
      z-index: 100;
      width:100%;
      height: 1.26rem;
      line-height: 1.26rem;
      /*border-bottom:.01rem solid #ccc;*/
      background: #3e82f5;
      padding:0 .2rem 0 .1rem;
      color:#fff;
    }
    .mobile-header p{
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size:.36rem;
      text-align: center;
      width: 6rem;
      padding-left: 1rem;
    }
    .mobile-center-header p.en-name {
      font-size: .3rem;
    }
    .mobile-header a{
      font-size:.28rem;
      color:#fff;
      position: absolute;
    }
    .mobile-header a i{
      font-size: .48rem;
      margin-right: -.1rem;
    }
    .upoff-materiel-wrapper {
      border-radius: 0.07rem;
      position: fixed;
      overflow: hidden;
      bottom: 0;
      top: 1.46rem;
      left: 0.2rem;
      right: 0.2rem;
      /*padding: 0 0.25rem;*/
      /*background: #fff;*/
      .opoff-title {
        border-bottom: 1px solid #dcdcdc;
        padding: 0.25rem 0;
        .opoff-title-text {
          font-size: 0.28rem;
          color: #3f84f6;
          @include overFlowHidden();
          width: 5.81rem;
        }
        .icon {
          width: 0.6rem;
          height: 0.36rem;
          line-height: 0.36rem;
          float: left;
          background-size: 100%;
          background-repeat: no-repeat;
          margin-right: 0.12rem;
          text-align: center;
          &.istanded {
            background-image: url('/images/mobile/@2x/istanded.png')
          }
          &.standed {
            background-image: url('/images/mobile/@2x/standed.png')
          }
        }
      }
      .off-content {
        padding: 0.42rem 0;
        border-bottom: 1px solid #dcdcdc;
        .clearfix {
          margin-bottom: 0.25rem;
          &:nth-last-of-type(1) {
            margin-bottom: 0;
          }
          @include overFlowHidden();
        }
        .name {
          color: #666;
          font-size:0.28rem;
        }
        .con{
          color: #333;
          font-size:0.28rem;
        }
      }
      .off-info {
        margin-top: 0.3rem;
        line-height: 0.5rem;
        span {
          color: #666;
          font-size: 0.28rem;
        }
        .minBuyqty {
          input {
            border: 1px solid #d2d2d2;
            border-radius: 2px;
            text-indent: .12rem;
            width: 1.5rem;
            font-size: 0.24rem;
            color: #333;
          }
        }
        .progress-wrapper {
          width: .68rem;
          height: .32rem;
          border-radius: 0.32rem;
          position: relative;
          display: inline-block;
          vertical-align: top;
          margin-left: 0.15rem;
          margin-top: 0.12rem;
          background: #c4c5c6;
          .progress-btn {
            position: absolute;
            height: 0.28rem;
            width: 0.28rem;
            border-radius: 50%;
            left: 0.01rem;
            top: 0.01rem;
            background: #fff;
            box-shadow: 0 0 5px #000;
          }
          &.active {
            background: #22ac38;
            .progress-btn {
              left: 0.37rem;
            }
          }
        }
        .selectInput {
          display: inline-block;
          position: relative;
          vertical-align: top;
          height: 0.5rem;
          line-height: 0.5rem;
          border: 1px solid #d2d2d2;
          border-radius: 2px;
          width: 1.78rem;
          text-indent: 0.12rem;
          img {
            position: absolute;
            width: 0.17rem;
            height: 0.11rem;
            right:0.1rem;
            top: 0.17rem;
          }
          &.selectInput2 {
            width: 1.56rem;
          }
          span {
            height: 0.5rem;
            line-height: 0.5rem;
            display: block;
          }
          ul {
            position: absolute;
            left: 0;
            top: .5rem;
            z-index: 12;
            width: 100%;
            max-height: 3rem;
            overflow-y: auto;
            display: none;
            li {
              text-indent: 0px;
              width: 100%;
              background: #666;
              color: rgba(255, 255, 255, 0.89);
              text-align: center;
              font-size: .3rem;
            }
            &.active {
              display: block;
            }
          }
        }
        .startInput, .endInput {
          text-indent: 0;
          text-align: center;
          width: 1rem;
          height: 0.5rem;
          line-height: 0.5rem;
          border: 1px solid #d2d2d2;
          border-radius: 2px;
        }
        .pscList-top {
          height: 0.5rem;
          line-height: 0.5rem;
          background: #e5e5e5;
          font-size: 0.28rem;
          color: #666;
          border-radius: 3px;
          .pull-left {
            margin-left: 0.2rem
          }
          .pull-right {
            margin-right: 0.2rem
          }
        }
        ul.prices{
          margin: 0.2rem 0 0;
          padding-bottom: 0.2rem;
          .clearfix {
            margin-bottom: 0.14rem;
            font-size: 0.24rem;
            color: #666;
            .priceM {
              width: 1.6rem;
              height: 0.5rem;
              border: 1px solid #d2d2d2;
              text-align: center;
              line-height: 0.5rem;
              border-radius: 3px;
            }
            span {
              width: 0.34rem;
              height: 0.34rem;
              margin-top: 0.08rem;
              display: inline-block;
              vertical-align: top;
              &:nth-of-type(1){
                margin: 0.08rem 0.2rem 0;
              }
              img {
                width: 100%;
              }
            }
            .firstNumber {
              width: 0.4rem;
              background: #eeeeee !important;
              height: 0.5rem;
              border:1px solid #d2d2d2;
              border-radius: 3px;
              line-height: 0.5rem;
              text-align: center;
              font-size: 0.24rem;
            }
            .otherNumber {
              width: 1.6rem;
              background: #fff;
              height: 0.5rem;
              border:1px solid #d2d2d2;
              border-radius: 3px;
              line-height: 0.5rem;
              text-align: center;
              font-size: 0.24rem;
            }
          }
        }
      }
    }
    .update-materiel-wrapper-controll {
      margin: 0.4rem 0.2rem 0;
      div {
        width: 48%;
        background: #b5b5b5;
        font-size: 0.3rem;
        color: #fafbfc;
        text-align: center;
        @include lineHeight(0.62rem);
        border-radius: 0.07rem;
        &:first-child {
          background: #3f84f6;
        }
      }
    }
  }
</style>