<!--
 * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
 * @Date: 2022-07-07 16:13:13
 * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
 * @LastEditTime: 2022-08-18 14:04:18
 * @FilePath: \mcep-h5\src\components\common\Bottom.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <!-- <div> -->
  
  
  <div class="roolsolt">


    <div class="rool" style="  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); border-radius: 0px 0px 12px 12px; padding-bottom:20px">
      <van-row type="flex">
        <van-col span="24" class="title">最高贷款额度</van-col>
      </van-row>


       <van-row type="flex" justify="center" >
                      <div class="lines" style="z-index: 1; position:absolute;  left:0px; width: 98%;margin:0 1%;margin-top: 1.5%;">
        <div style="width: 100%; height: 5px; border-bottom: 1px silver solid;"></div>
        <div style="width: 100%; height: 5px; border-bottom: 1px silver solid;"></div>
        <div style="width: 100%; height: 5px; border-bottom: 1px silver solid;"></div>
        <div style="width: 100%; height: 5px; border-bottom: 1px silver solid;"></div>
        <div style="width: 100%; height: 5px; border-bottom: 1px silver solid;"></div>

        <div style="width: 100%; height: 5px; border-bottom: 1px silver solid;"></div>
        <div style="width: 100%; height: 5px; border-bottom: 1px silver solid;"></div>
        <div style="width: 100%; height: 5px; border-bottom: 1px silver solid;"></div>
        <div style="width: 100%; height: 5px; border-bottom: 1px silver solid;"></div>
        <div style="width: 100%; height: 5px; border-bottom: 1px silver solid;"></div>
        
        <div style="width: 100%; height: 5px; border-bottom: 1px silver solid;"></div>
        <div style="width: 100%; height: 5px; border-bottom: 1px silver solid;"></div>
 
      </div>
      </van-row>
      
  
      <van-row type="flex" justify="center" class="integral" >
        <van-col span="24" style="z-index:2; font-size: 36px;font-weight: 900; margin-top: 5%;">￥{{ productData.amtMax }}</van-col>
      </van-row>
      <van-row type="flex" justify="center" class="integrall">
        <van-col span="24">{{ moneyName }}</van-col>
      </van-row>
      <van-row type="flex" justify="center" class="button">
        <van-col span="24">
          <van-button type="info" style=" width: 50%; margin: 0px 10px; background-color:#3672F1; border-radius: 5px;border:0px;" @click="lodiing()">立即申请</van-button>

        </van-col>
      </van-row>
    </div>
    <div style="">
        <scroller-view v-calculate-height  :height="10000" > 
      <van-collapse v-model="activeNames" v-if="this.productData.prodDesc!=undefined" style="
   
    width: 100%;
    height: 100%;
    border-radius: 8px;
    padding: 20px 10px;
     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    ">
        <van-collapse-item   v-for="(item,index) in JSON.parse(this.productData.prodDesc)" :key="index" :title="item.title" :name="index">{{item.desc}}</van-collapse-item>
        <!-- <van-collapse-item title="产品特点" name="2">一次核定，三年有效，随用随贷，循环使用。</van-collapse-item>
        <van-collapse-item title="货款对象" name="3">货款对象</van-collapse-item>
        <van-collapse-item title="货款期限" name="4">最长不超过3年。</van-collapse-item>
        <van-collapse-item title="担保方式" name="5">以借款人自有或第三人提供有权处置的有效资产抵押担保。</van-collapse-item>
        <van-collapse-item title="担保方式" name="5">以借款人自有或第三人提供有权处置的有效资产抵押担保。</van-collapse-item> -->
      </van-collapse>
      </scroller-view>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch, Emit } from "vue-property-decorator";
/*
* title
*/
@Component({
  name: "ProductCard"
})
export default class ProductCard extends Vue {
  // @Prop({ default: "" }) money: string | undefined; //额度
  // @Prop({ default: "" }) moneyName: string | undefined;//额度大写

  @Prop({ default: {prodDesc:""} }) productData: any | {};//产品数据
  @Prop({ default: {prodDesc:""} }) desc: any | {};//产品数据

  
  //立即登录
  activeNames = [""];
  lodiing() {
    this.$router.push({
      path: "/Recognition",
    })
  }


}






</script>
<style scoped lang="scss">
.div {}

.roolsolt {
  width: 90%;
  margin: 0px auto;
  background-color: rgba(255, 255, 255, 1);
}

.title {
  margin-top: 10%;
  margin-bottom: 2%;
  font-size: 14px;
  text-align: center;
  font-family: 'Arial Normal', 'Arial', sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: normal;
  color: #999999;
  vertical-align: none;
  text-align: center;
  line-height: normal;
  text-transform: none;
}

.integral {
  //margin-top: 10%;
  /* margin-left: 20%; */
  text-align: center;
  width: 90%;
  height: 66px;
  margin: 0px auto;
  font-size: 36px;
  color: #FFA121;
  // background-image: url('../../assets/images/tw.png');
}


.integrall {
  //margin-top: 10%;
  /* margin-left: 20%; */
  text-align: center;
  color: #FFA121;
  font-size: 14px;
  margin: 10px auto;
}

.button {
  //margin-top: 10%;
  /* margin-left: 20%; */
  text-align: center;
  font-size: 14px;
  color: #FFFFFF;
}

.ax_default {
    font-family: 'Arial Normal', 'Arial';
    font-weight: 400;
    font-style: normal;
    font-size: 13px;
    letter-spacing: normal;
    color: #333333;
    vertical-align: none;
    text-align: center;
    line-height: normal;
    text-transform: none;
}

::v-deep .van-cell__title, .van-cell__value {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
}



</style>