<template>
  <div class="wrap">
    <div class="kilometers  common">
      <div class="title">公里数:</div>
      <div class="line"></div>
      <div class="metersWrap">
        <div class="leftKiloMeters">
          <div>AB段公里数</div>
          <div>BC段公里数</div>
          <div>CA段公里数</div>
        </div>
        <div class="rightInputMeters">
          <div><input type="number"/>公里</div>
          <div><input type="number"/>公里</div>
          <div><input type="number"/>公里</div>
        </div>
      </div>
    </div>
    <div class="roadBridgeFee common">
      <div class="title">路桥费:</div>
      <div class="line"></div>
      <div class="metersWrap">
        <div class="leftKiloMeters">
          <div>AB段公里数</div>
          <div>BC段公里数</div>
          <div>CA段公里数</div>
        </div>
        <div class="rightInputMeters">
          <div><input type="number"/>公里</div>
          <div><input type="number"/>公里</div>
          <div><input type="number"/>公里</div>
        </div>
      </div>
    </div>
    <div class="otherFee common">
      <div class="title">其他费用:</div>
      <div class="line"></div>
      <div class="metersWrap">
        <div class="leftKiloMeters">
          <div>小轮个数</div>
          <div>等候费</div>
          <div>困境费</div>
          <div class="blueColor">已收取客户金额</div>
        </div>
        <div class="rightInputMeters" style="opacity: 1">
          <div class="alignRight"><input type="number"/>个</div>
          <div  class="alignRight"><input type="number"/>元</div>
          <div class="alignRight"><input type="number"/>元</div>
          <div class="blueColor"><input type="number"/>元</div>
        </div>
      </div>
    </div>
    <common-btn class="btn" @submitClick="submit" />
  </div>
</template>

<script>
import CommonBtn  from "@/components/commonBtn.vue"
export default {
  name: "supplySettlement",
  data(){
    return{}
  },
  methods:{
    submit() {
      console.log("提交")
    }
  },
  components:{
    CommonBtn
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/mixin.scss";
.wrap {
  width: 100%;
  height: 100%;
  background-color: #F4F5F7;
}
.common {
  @include wh(100%, 161px);
  background: #FFFFFF;
  backdrop-filter: blur(5.602678571428572px);
  box-sizing: border-box;
  padding: 10px 17px 10px 24px;
  margin-bottom: 10px;
}
.otherFee {
  @include wh(100%, 198px)
}
.title {
  @include fontWeightSize(500, 14px);
  color: #323643;
  opacity: 0.66;
}
.line {
  @include wh(calc(100% - 10px), 2px);
  text-align: center;
  opacity: 0.16;
  border-top: 1px solid;
  margin-top: 8px;
  border-image: linear-gradient(270deg, rgba(217, 217, 217, 0.6), rgba(178, 178, 178, 1), rgba(178, 178, 178, 1), rgba(217, 217, 217, 0.6)) 1 1;
}
.metersWrap {
  display: flex;
  justify-content: space-between;
  line-height: 37px;
  .blueColor{
    @include fontWeightSize(500,14px);
    color: #4682FE;
  }
  .alignRight{
    text-align: right;
    opacity: .5;
  }
  .leftTitle {
    @include fontWeightSize(400, 14px);
  }
  .rightInputMeters {
    margin-right: 13px;
    @include fontWeightSize(500, 13px);
    color: #323643;
    opacity: .5;
    input {
      border: none;
      text-align: right;
      color: #323643;
      opacity: .8;
    }
  }
}
.btn{
  margin-left: 24px;
}
</style>