<template>
  <div class="container">
    <b-row>
      <b-col cols="3" class="label_col">
        <div style="text-align: right">
          <span>日期:</span>
        </div>
      </b-col>
      <b-col cols="9">
        <b-form-datepicker
          placeholder="請填寫日期"
          style="width: 80%"
          class="float-left"
        ></b-form-datepicker>
      </b-col>
    </b-row>
    <b-row style="padding-top: 20px">
      <b-col cols="3" class="label_col">
        <div style="text-align: right">
          <span>估驗金額:</span>
        </div>
      </b-col>
      <b-col cols="9">
        <b-form-input
          placeholder="請填寫金額"
          style="width: 80%"
          class="float-left"
        ></b-form-input>
      </b-col>
    </b-row>
    <b-row style="padding-top: 20px">
      <b-col cols="3" class="label_col">
        <div style="text-align: right">
          <span>扣除保留款:</span>
        </div>
      </b-col>
      <b-col cols="9">
        <b-form-input
          placeholder="請填寫金額"
          style="width: 80%"
          class="float-left"
        ></b-form-input>
      </b-col>
    </b-row>
    <b-row style="padding-top: 20px">
      <b-col cols="3" class="label_col">
        <div style="text-align: right">
          <span>扣回預付款:</span>
        </div>
      </b-col>
      <b-col cols="9">
        <b-form-input
          placeholder="請填寫金額"
          style="width: 80%"
          class="float-left"
        ></b-form-input>
      </b-col>
    </b-row>
    <b-row style="padding-top: 20px">
      <b-col cols="3" class="label_col">
        <div style="text-align: right">
          <span>物價指數調整款:</span>
        </div>
      </b-col>
      <b-col cols="9">
        <b-form-input style="width: 80%" class="float-left"></b-form-input>
      </b-col>
    </b-row>
    <b-row style="padding-top: 20px">
      <b-col cols="3" class="label_col">
        <div style="text-align: right">
          <span>扣物價指數保留款:</span>
        </div>
      </b-col>
      <b-col cols="9">
        <b-form-input style="width: 80%" class="float-left"></b-form-input>
      </b-col>
    </b-row>
    <b-row style="margin-top: 20px">
      <b-col class="label_col" cols="3">
        <div style="text-align: right">
          <span>說明:</span>
        </div>
      </b-col>
      <b-col cols="9">
        <b-form-textarea
          placeholder="請輸入說明"
          rows="6"
          no-resize
          style="
            width: 80%;
            height: 250px;
            padding: 8px 12px 10px;
            font-size: 16px;
          "
        ></b-form-textarea>
      </b-col>
    </b-row>
    <b-row style="padding-top: 20px">
      <b-col cols="3" class="label_col">
        <div style="text-align: right">
          <span>上傳電子檔:</span>
        </div>
      </b-col>
      <b-col cols="9">
        <b-form-file
          v-model="file1"
          :state="Boolean(file1)"
          style="width: 80%"
          placeholder="請選擇檔案"
        ></b-form-file>
      </b-col>
    </b-row>
    <b-row style="margin-top: 14px; float: right; padding-right: 37px">
      <b-button class="btn">新增</b-button>
    </b-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      file1: null
    }
  }
}
</script>

<style scoped>
.container {
  width: 700px;
  height: auto;
}
.label_col {
  margin-top: 8px;
  padding: 0 40px 0 0px;
  align-items: center;
}
.col-9 {
  padding-left: 0px;
}
.btn {
  background-color: rgb(75, 102, 255);
  font-size: 16px;
  margin-top: 15px;
  margin-left: 15px;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 5px;
  padding-bottom: 5px;
  color: #ffffff;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  border: none;
}
.btn:hover {
  color: rgb(255, 255, 255);
  background-color: rgb(49, 68, 175);
  transform: translateY(1);
}
</style>

<style>
.custom-file-label {
  border-color: #8898aa !important;
}
</style>
