iTDM-web/itdmWeb/src/views/module-iTDM/itdmYeWu/itdmXnJiesuan.vue

<template>
  <div>
    <div class="head">第五部分　试验虚拟结算</div>
    <table class="main-table">
      <tr>
        <td class="title" style="width: 100px">核准 虚拟结算额</td>
        <td class="content" style="width: 360px">
          <div style="width: 440px"></div>
        </td>
        <td class="title white" style="width: 100px">核准 虚拟结算毛利</td>
        <td class="content" style="width: 450px">
          <input v-model="tableData.shuruLeixing" style="text-align: center" />
        </td>
      </tr>
      <tr>
        <td class="title" style="width: 100px">核准 合同总额</td>
        <td class="content" style="width: 360px">
          <div style="width: 440px"></div>
        </td>
        <td class="title white" style="width: 100px">核准 外协外购</td>
        <td class="content" style="width: 450px">
          <input v-model="tableData.shuruLeixing" style="text-align: center" />
        </td>
      </tr>
      <tr>
        <td class="title" style="width: 100px">销售提成 基数</td>
        <td class="content" style="width: 360px">
          <div style="width: 440px"></div>
        </td>
        <td class="title white" style="width: 100px">项目满意度</td>
        <td class="content" style="width: 450px">
          <input v-model="tableData.shuruLeixing" style="text-align: center" />
        </td>
      </tr>
      <tr>
        <td class="title" style="width: 100px">项目计算标准</td>
        <td class="content" style="width: 360px">
          <div style="width: 440px"></div>
        </td>
        <td class="title white" style="width: 100px">项目绩效 基数计算</td>
        <td class="content" style="width: 450px">
          <input v-model="tableData.shuruLeixing" style="text-align: center" />
        </td>
      </tr>
      <tr>
        <td class="title" style="width: 100px">项目得分（百分制）</td>
        <td class="content" style="width: 360px">
          <div style="width: 440px"></div>
        </td>
        <!-- <td class="content" style="width: 100px" colspan="2"></td> -->
        <td class="title white" style="width: 100px">虚拟结算 绩效总额</td>
        <td class="content" style="width: 450px">
          <input v-model="tableData.shuruLeixing" style="text-align: center" />
        </td>
      </tr>
      <tr>
        <td class="title" style="width: 100px">
            <div>市场部核准</div>
            <div>核准结论</div>
        </td>
        <td class="content" style="width: 360px">
          <div style="width: 440px"></div>
        </td>
        <!-- <td class="content" style="width: 100px" colspan="2"></td> -->
        <td class="title white" style="width: 100px">核准人	</td>
        <td class="content" style="width: 450px">
          <input v-model="tableData.shuruLeixing" style="text-align: center" />
        </td>
      </tr>
      <tr>
        <td class="title" style="width: 100px">
            <div>工程技术部核准</div>
            <div>核准结论</div>
        </td>
        <td class="content" style="width: 360px; background-color: #E5E0EC;">
          <div style="width: 440px"></div>
        </td>
        <!-- <td class="content" style="width: 100px" colspan="2"></td> -->
        <td class="title white" style="width: 100px">核准人	</td>
        <td class="content" style="width: 450px; background-color: #E5E0EC;">
          <input v-model="tableData.shuruLeixing" style="text-align: center" />
        </td>
      </tr>
      <tr>
        <td class="title" style="width: 100px">
            <div>财务部核准</div>
            <div>核准结论</div>
        </td>
        <td class="content" style="width: 360px; background-color: #F2DCDB;">
          <div style="width: 440px"></div>
        </td>
        <!-- <td class="content" style="width: 100px" colspan="2"></td> -->
        <td class="title white" style="width: 100px">核准人	</td>
        <td class="content" style="width: 450px; background-color: #F2DCDB;">
          <input v-model="tableData.shuruLeixing" style="text-align: center" />
        </td>
      </tr>
      <tr>
        <td class="title" style="width: 100px">
            <div>总经理审批</div>
            <div>批准结论</div>
        </td>
        <td class="content" style="width: 360px; background-color: #E5B9B7;">
          <div style="width: 440px"></div>
        </td>
        <!-- <td class="content" style="width: 100px" colspan="2"></td> -->
        <td class="title white" style="width: 100px">总经理	</td>
        <td class="content" style="width: 450px; background-color: #E5B9B7;">
          <input v-model="tableData.shuruLeixing" style="text-align: center" />
        </td>
      </tr>
      <tr>
        <td class="title" style="width: 100px">
            <div>归档</div>
            <div>合同信息</div>
        </td>
        <td class="content" style="width: 360px">
          <div style="width: 440px"></div>
        </td>
        <!-- <td class="content" style="width: 100px" colspan="2"></td> -->
        <td class="title white" style="width: 100px">核准人	</td>
        <td class="content" style="width: 450px">
          <input v-model="tableData.shuruLeixing" style="text-align: center" />
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
    name: 'itdmXnJiesuan',
    data() {
        return {
            tableData: {
              cleanPrice: [
                {
                  total: 0,
                },
              ],
            },
        }
    },
}
</script>

<style scoped>
@import '~@assets/less/common.less';
table * {
  box-sizing: border-box;
  font-size: 14px;
}
table {
  border: 1px solid rgb(30, 53, 65);
  width: 100%;
}
td {
  text-align: center;
  border: 1px solid rgb(30, 53, 65);
}
tr {
  height: 50px;
}

.main-table {
  background-color: #DBEEF3;
}
.title {
  background-color: #fff;
}
.addRow {
  width: 60px;
  height: 24px;
  background-color: #fff;
  border-radius: 4px;
  text-align: center;
  line-height: 24px;
  font-size: 12px;
  margin-left: 20px;
  cursor: pointer;
}
.btn {
  display: inline-block;
  padding: 2px 10px;
  font-size: 13px;
  border: 1px solid rgb(3, 188, 244);
  color: rgb(8, 187, 241);
  border-radius: 4px;
  cursor: pointer;
  position: absolute;
  right: 3%;
}
.delBtn {
  padding: 3px 10px;
  text-align: center;
  font-size: 12px;
}
input {
  padding: 0 20px;
  height: 50px;
  outline: none;
  border: none;
  background: transparent;
}

.head {
    height: 35px;
    background-color: #FFFF00;
    text-align: center;
    line-height: 35px;
    font-weight: bold;
    font-size: 18px;
    border: 1px solid rgb(30, 53, 65);
}
</style>