<!--
 * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
 * @Date: 2022-07-07 16:13:13
 * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
 * @LastEditTime: 2022-08-18 11:07:05
 * @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 >
    <van-row type="flex" class="title">
      <van-col  span="24" style="text-align: left">合同累计金额（元）
         <span class="solts" @click="switchEye">
              <van-icon name="eye" v-if="this.eye" />
              <van-icon name="closed-eye" v-else />
      </span>
      </van-col>
     
    </van-row>
    <van-row type="flex" class="mumMoney">
      <van-col span="24" v-text="this.totalFinal" v- class="money"></van-col>
<!--      <van-col span="9" class="moneytitle">壹佰元整</van-col>-->
    </van-row>
    <!-- <van-row type="flex" class="title">
      <van-col  span="24" >已使用贷款金额（元）</van-col>
    </van-row>
    <van-row type="flex" class="mumMoney">
      <van-col offset="4" span="11" class="money">6，0000</van-col>
      <van-col span="9" class="moneytitle">壹佰元整</van-col>
    </van-row> -->
    <van-row type="flex" justify="center" class="integral">
      <van-col span="12" style="text-align: left; padding-left: 20px; color: #999999; font-size: 12px">合同已使用金额(元)</van-col>
      <van-col span="12" style="text-align: left; color: #999999; font-size: 12px">合同未使用金额(元)</van-col>
    </van-row>
      <van-row type="flex" justify="center" class="integral">
        <van-col span="12" v-text="this.useFinal" style="font-weight: 700; text-align: left; padding-left: 20px"></van-col>
        <van-col span="12" v-text="this.unUseFinal" style="font-weight: 700; text-align: left"></van-col>
      </van-row>
    <!-- <van-row type="flex" justify="center" class="integrall">
      <van-col span="8">我的积分</van-col>
      <van-col span="8">卡券</van-col>
      <van-col span="8">我的特权</van-col>
    </van-row> -->
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch, Emit } from "vue-property-decorator";
/*
* title
*/
@Component({
  name: "CardPottom"



  
})

export default class CardPottom extends Vue {
   pass="*****"
  totalAmount ="30000.00"
  useAmount ="20000.00"
  unUseAmount = "10000.00"
  totalFinal = this.pass
  useFinal = this.pass
  unUseFinal = this.pass
  eye = true
  
   switchEye() {
    
    this.totalFinal = this.eye ? this.totalAmount : this.pass
    this.useFinal = this.eye ? this. useAmount: this.pass
    this.unUseFinal = this.eye ? this.unUseAmount : this.pass
     this.eye = !this.eye
  }
}
</script>
<style scoped lang="scss">
.roolsolt{
  background:url("../../assets/images/mycard.png");
  width:100%;
  height:40%;
  background-size: cover;
}
.title {
  font-size: 14px;
  text-align: left;
  font-family: 'Arial Normal', 'Arial', sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #999999;
  margin-top: 5%;
  margin-left: 20px;
}
.mumMoney{
}


.money {
  font-family: '思源黑体 Bold', '思源黑体 Regular', '思源黑体', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 28px;
  color: #FF9921;
  text-align: left;
  margin-left: 20px;
  margin-top: -6px;
}

.moneytitle {
  color: #FFA121;
  text-align: left;
  font-size: 14px;
  font-family: 'Arial Normal', 'Arial', sans-serif;
  font-style: normal;
  margin-top: 5%;
}

.integral {
  text-align: center;
  font-family: 'Arial Normal', 'Arial', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  letter-spacing: normal;
  color: #333333;
  margin-top: 4px;
}

.integrall {
  text-align: center;
  font-size: 12px;
  color: #999999;
}
</style>