<!--
 * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
 * @Date: 2022-07-05 14:05:30
 * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
 * @LastEditTime: 2022-07-05 17:51:30
 * @FilePath: \mcep-h5\src\views\main\MainView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="d-page d-flex flex-column">
    <div class="rarle">
      <tatle-bar :tatle="tatleName" :tatleflag="false"></tatle-bar>
    </div>
    <div>
      <van-tabs v-model="activeName">
        <van-tab title="标签 1" name="a">内容 1</van-tab>
        <van-tab title="标签 2" name="b">内容 2</van-tab>
        <van-tab title="标签 3" name="c">内容 3</van-tab>
      </van-tabs>
      <div v-for="(item, index) in productList" :key="index">
        <picket-bar :productname="item.productname" :describe="item.describe" :limitrange="item.limitrange"
          :interestrate="item.interestrate" :loanterm="item.loanterm"></picket-bar>
      </div>

    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { ProductData } from '@/model/entity/ProductData'

@Component({
  name: "MainView",
})
export default class MainViw extends Vue {
   tatleName = "线上金融服务平台"
  productList: ProductData[] = [{
    productname: "金融消费贷", //产品名称
    describe: "1年100万",//描述
    limitrange: "1000~2000",//额度范围
    interestrate: "199000%~10000000%",//利率
    loanterm: "89个月",//贷款期限
  },
  {
    productname: "金融消费贷", //产品名称
    describe: "1年100万",//描述
    limitrange: "1000~2000",//额度范围
    interestrate: "199000%~10000000%",//利率
    loanterm: "89个月",//贷款期限
  }];
  activeName: string = "a"
}
</script>
<style scoped lang="scss">
</style>
