<template>
  <div>
    <table>
      <sub-title>本月实际完成情况</sub-title>
      <tr>
        <td><mobile-input label="计划完成数量"></mobile-input></td>
      </tr>
      <tr>
        <td><mobile-input label="实际营销人员"></mobile-input></td>
        <td><mobile-input label="实际营销时间"></mobile-input></td>
      </tr>
      <tr>
        <td><mobile-input label="当月全口径消贷投放(万)"></mobile-input></td>
        <td><mobile-input label="当月随意分申请户数(人)"></mobile-input></td>
      </tr>
      <tr>
        <td><mobile-input label="当月优易贷预授信新增户数(人)"></mobile-input></td>
        <td><mobile-input label="当月优易贷提用户数(人)"></mobile-input></td>
      </tr>
      <tr>
        <td><mobile-input label="当月添加微信户数(人)"></mobile-input></td>
      </tr>
      <sub-title>随手礼</sub-title>
      <tr>
        <td><mobile-input label="纸巾盒(盒)"></mobile-input></td>
        <td><mobile-input label="手机支架(个)"></mobile-input></td>
      </tr>
      <tr>
        <td><mobile-input label="雨伞(把)"></mobile-input></td>
        <td><mobile-input label="厨具三件套(套)"></mobile-input></td>
      </tr>
      <tr>
        <td><mobile-input label="指甲套装(套)"></mobile-input></td>
        <td><mobile-input label="支行自备"></mobile-input></td>
      </tr>
      <tr>
        <td style="color: red">新增</td>
      </tr>
      <sub-title>体验礼</sub-title>
      <tr>
        <td><mobile-input label="招财猫杯子(套)"></mobile-input></td>
        <td><mobile-input label="支行自备"></mobile-input></td>
      </tr>
      <tr>
        <td style="color: red">新增</td>
      </tr>
      <tr>
        <td colspan="2">
          <div class="operate">
            <van-button round type="default" size="normal">取消</van-button>
            <van-button round type="info" size="normal">提交</van-button>
          </div>
        </td>
      </tr>
    </table>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import MobileInput from "@/components/general/form/MobileInput.vue";
import SubTitle from "@/components/general/SubTitle.vue";
/**
 * @Description:营销计划
 * @author pd
 * @date 2021-11-09 11:34:22
 */
@Component({
  name: "MarketPlan",
  components: { MobileInput, SubTitle },
})
export default class MarketPlan extends Vue {}
</script>

<style scoped>
::v-deep .d-form-field,
::v-deep .van-field {
  align-items: center;
}
.operate {
  width: 60%;
  margin: 0 auto;
}
.operate button {
  width: 45%;
  margin: 0 2%;
}
.operate > button:nth-child(2) {
  background-color: #fd5065;
  border: 1px solid #fd5065;
}
::v-deep .van-button__text {
  font-size: 18px;
}
</style>