supplier-dispatch-h5/src/views/index/reAccounting.vue

<template>
<div class="wrap">
  <div class="baseInfo common">
    <div class="title">基本信息:</div>
    <div class="line"></div>
    <div class="item">
      <span class="title">工单编号：</span>
      <span class="content" id="copyText">ZD230626124283</span>
      <img @click="copyText" src="@/assets/copy.png" />
    </div>
    <div class="item">
      <span class="title">车牌号：&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <span class="content">湘H-DD899</span>
    </div>
    <div class="item">
      <span class="title">服务类型：</span>
      <span class="content" >搭电</span>
    </div>
    <div class="item">
      <span class="title">工单状态：</span>
      <span class="content" >未完成</span>
    </div>
    <div class="item">
      <span class="title">结算比例：</span>
      <span class="content" >按服务不成功结算</span>
    </div>
    <div class="item">
      <span class="title">结算类型：</span>
      <span class="content" >系统一口价</span>
    </div>
    <div class="item" >
      <span class="title">结算方式：</span>
      <div class="content" style="width: calc(100% - 84px);display: flex;justify-content: space-between;line-height: 27px" >
        <span>起步价:135</span>
        <span>包含公里数:15</span>
        <span>超出单价:6</span>
         </div>
    </div>
    <div class="item">
      <span class="title">扣除责任险费：</span>
      <span class="content">0</span>
    </div>
  </div>
  <div class="dataType">
    <table>
      <tr>
        <td class="col1 checkData">审核数据</td>
        <td  class="col2 supplierData">供应商数据</td>
      </tr>
      <tr>
        <td class="col1">拖车里程:32km</td>
        <td  class="col2 halfOpc"><input placeholder="输入拖车公里"/></td>
      </tr>
      <tr>
        <td class="col1">路桥费:36元</td>
        <td  class="col2 halfOpc"><input placeholder="输入路桥费"/></td>
      </tr>
      <tr>
        <td class="col1">小轮费:32元</td>
        <td  class="col2 halfOpc"><input placeholder="输入小轮费"/></td>
      </tr>
      <tr>
        <td class="col1">收取客户:100元</td>
        <td  class="col2 halfOpc"><input placeholder="收取客户金额"/></td>
      </tr>
      <tr>
        <td class="col1">费用总计:165元</td>
        <td  class="col2" style="position: relative" >
          <span class="halfOpc">费用总计</span>
          <button class="btnCom">计算</button></td>
      </tr>
      <tr>
        <td class="col1 alignLeft" style="border-bottom-left-radius: 3px">
          <div class="title col1" style="white-space: nowrap;">审核失败原因</div>
          <div class="reason">审核失败原因审核失败原因审核失败原因审核失败原因审核失败原因</div>
          <div class="imgWrap">
            <img class="camerImg" src="@/assets/camer.png" >
            <img class="camerImg" src="@/assets/camer.png" >
          </div>
        </td>
        <td  class="col2 alignLeft"  style="border-bottom-right-radius: 3px">
          <div class="title"> 本次补充说明:</div>
<!--          <div class="reason">审核失败原因审核失败原因审核失败原因审核失败原因审核失败原因</div>-->
          <div class="imgWrap">
            <img class="camerImg" src="@/assets/camer.png" >
            <img class="camerImg" src="@/assets/camer.png" >
            <img class="camerImg" src="@/assets/camer.png" >
          </div>
        </td>
      </tr>
    </table>
  </div>
  <div class="btn">
    <button>取消</button>
    <button>再次审核</button>
    <button class="submit">提交</button>
  </div>
</div>
</template>

<script>
import {myMixins} from  '@/utils/myMixins'
export default {
  name: "reAccountingView",
  mixins:[myMixins],
  methods:{

  }
}
</script>

<style scoped lang="scss">
@import "@/styles/mixin.scss";
.wrap{
  width: 100%;
  height: 100%;
  background-color: #F4F5F7;
  overflow-y: auto;
}
.title{
  @include fontWeightSize(500,14px);
  color: #323643;
  opacity: 0.66;
}
.line{
  @include wh(100%,2px);
  opacity: 0.16;
  border-top: 1px solid;
  margin-top: 7px;
  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;
}
.item{
  display: flex;
  align-items: center;
  @include fontWeightSize(400,12px);
  .title{
    opacity: .5;
    line-height: 27px;
  }
  img{
    @include wh(35px,15px);
    margin-left: 21px;
  }
}

.common{
  background-color: #FFFFFF;
  padding: 11px 24px 14px;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.baseInfo{
  @include wh(100%,276px);
}
.dataType{
  padding: 0 8px;
  table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }
  td {
    padding: 10px;
    border: 1px solid #ccc;
    text-align: center;
  }
  .alignLeft{
    text-align: left !important;
    .reason{
      @include fontWeightSize(400,11px);
      color: #FF8F37;
      opacity: 1 !important;
    }
    .camerImg{
      @include widHeiMar(54px,42px,4px);
      margin-top: 15px;
    }
    .title{
      @include fontWeightSize(400,11px);
      opacity: .5;
    }
  }
  .col1{
    width: 41%;
    background-color: #E9E9EA;
    @include fontWeightSize(400,12px);
    opacity: 0.55;
  }
  .col2{
    width: 58%;
    background-color: #EAEFF6;
    @include fontWeightSize(400,12px);
    color: #0434D0;
    input{
      width: 72px;
      border: none;
      background-color:#EAEFF6;
      text-align: center;
    }
    input::placeholder {
      color: #0434D0; /* 设置提示内容文字颜色 */
    }

  }
  .btnCom{
    position: absolute;
    right: 13px;
    border: none;
    width: 48px;
    @include all-height(18px);
    background: #354D93;
    border-radius: 3px;
    color: #FFFFFF;
    @include fontWeightSize(500,12px)
  }
  .checkData,.supplierData{
    color: #323643;
  }
  .checkData{
    border-top-left-radius: 3px;
    opacity: 0.66;
  }
  .supplierData{
    border-top-right-radius: 3px;
  }
  .halfOpc{
    opacity: .5;
  }
}
.btn{
  margin-top: 31px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-around;
  box-sizing: border-box;
  padding: 0 8px;
  button{
    @include wh(105px,39px);
    line-height: 39px;
    background: #9EA7C0;
    border-radius: 5px;
    color: #FFFFFF;
    @include fontWeightSize(500,14px);
    border: none;
  }
  .submit{
    background: #354D93;
  }
}
</style>