<template>
  <div>
    <title-bar title="业务查询" @clickLeft="onClick">
      <van-icon slot="left" name="cross" size="24" />
    </title-bar>
    <div class="content">
      <div style="padding: 0.5%; background-color: #fffafa"></div>
      <van-tabs v-model="active">
        <van-tab title="营销任务">
          <marketing-task></marketing-task>
        </van-tab>
        <van-tab title="贷款催收">
          <loan-application></loan-application>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import TitleBar from "@/components/general/TitleBar.vue";
import MarketingTask from "@/components/workbench/personal-common-functions/business-inquiry/MarketingTask.vue";
import LoanApplication from "@/components/workbench/personal-common-functions/business-inquiry/LoanApplication.vue";
import { Tab, Tabs } from "vant";

Vue.use(Tab);
Vue.use(Tabs);
/**
 * @Description 业务查询
 * @Author JiangTao
 * @Date 2021-10-23 下午 06:50
 */
@Component({
  name: "BusinessInquiry",
  components: { TitleBar, MarketingTask, LoanApplication },
})
export default class BusinessInquiry extends Vue {
  pageTitle = ""; // 页面标题

  onClick() {
    console.log(111111);
  }
  mounted() {
    this.pageTitle = this.$route.meta?.name;
  }
  active = 0;
}
</script>

<style scoped>
.content {
  width: 100%;
  height: calc(100vh - 60px);
}
::v-deep .van-tab__text {
  font-size: 16px;
  color: #999999;
  font-family: "Arial Normal", "Arial";
}
::v-deep .van-tab--active span {
  font-size: 18px;
  color: #fd5065;
  font-weight: bold;
}
::v-deep .van-tabs__line {
  width: 30%;
}
::v-deep .van-tabs__wrap {
  width: 100%;
  padding-right: 70%;
  padding-left: 1%;
  background-color: #fffafa;
}
::v-deep .van-tab {
  background-color: #fffafa;
}
</style>