<!--
 * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
 * @Date: 2022-07-07 16:13:13
 * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
 * @LastEditTime: 2022-07-26 20:22:02
 * @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 class="rarle">
    <van-row>
      <van-col span="9">
        <van-icon name="arrow-left" @click="retyen()" />
      </van-col>
      <van-col span="15">{{ tatleName }}</van-col>
    </van-row>
    <div class="card">
      <div class="d-flex flex-column">
        <!-- <div class="d-flex p-3  text-white"> -->
        <van-row type="flex" justify="center" class="integral">
          <van-col span="24"
            style="font-size: 24px;font-weight: 900; margin-top: 2%;text-align: center;color:rgb(255, 147, 0);">{{
                number
            }}</van-col>
        </van-row>
        <van-row type="flex" justify="center" class="integrall">
          <van-col span="24" style="text-align: center;color:rgb(255, 147, 0);">{{ growthName }}</van-col>
        </van-row>
        <van-row type="flex" class="layoutStep" gutter="2">
          <van-col span="24">
            <van-steps :active="2" :active-icon="img" :finish-icon="img" active-color=" #FFA121">
              <van-step></van-step>
              <van-step></van-step>
              <van-step></van-step>
              <van-step></van-step>
            </van-steps>
          </van-col>
        </van-row>
        <van-row type="flex" class="layoutDiv" gutter="2">
          <van-col span="24" class="layoutName">
            距离升级三星用户还差1468成长值
          </van-col>
        </van-row>

        <!-- </div> -->
      </div>
    </div>
    <div class="frist_type">
      <van-row type="flex" class="vanrowFlex">
        <van-col span="24" class="vanclo">
          <van-row v-for="(item, index) in growthList" :key="index" class="cardId">
            <van-row type="flex">
              <van-col span="12" class="repaymentName">
                <van-row type="flex">
                  <van-col span="24" class="records">{{ item.records }}</van-col>
                </van-row>
                <van-row type="flex">
                  <van-col span="24" class="time">{{ item.time }}</van-col>
                </van-row>
              </van-col>
              <van-col span="12" class="repaymentNumber">
                <van-col span="24" class="numberlive">{{ item.number }}</van-col>
              </van-col>
            </van-row>
          </van-row>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch, Emit } from "vue-property-decorator";
import 'ant-design-vue/dist/antd'
/*
* title
*/
@Component({
  name: "Growth"
})
export default class Growth extends Vue {
  number: string | undefined = "532"; //额度
  growthName: string | undefined = " 成长值";//额度大写
  tatleName = "成长值明细";
  img = require("@/assets/images/stars.png")
  //数据源growthList
  growthList = [{
    records: "转入10000元",
    time: "2021/02/21 03:14:12",
    number: "+10"
  }, {
    records: "转入10000元",
    time: "2021/02/21 03:14:12",
    number: "+10"
  }, {
    records: "转入10000元",
    time: "2021/02/21 03:14:12",
    number: "+10"
  }]
  imageBackage: any = require('@/assets/images/backageImg.png');
  //返回上一级
  retyen() {
    this.$router.back();
  }
  //数表
  tableData = [{
    level: '免费转账',
    name: '王小虎',
    province: '上海',
    city: '普陀区',
    address: '上海市普陀区金沙江路 1518 弄',
    zip: 200333
  }, {
    level: '客户',
    name: '王小虎',
    province: '上海',
    city: '普陀区',
    address: '上海市普陀区金沙江路 1518 弄',
    zip: 200333
  }, {
    level: '存款加息',
    name: '王小虎',
    province: '上海',
    city: '普陀区',
    address: '上海市普陀区金沙江路 1518 弄',
    zip: 200333
  }, {
    level: '贷款减息',
    name: '王小虎',
    province: '上海',
    city: '普陀区',
    address: '上海市普陀区金沙江路 1518 弄',
    zip: 200333
  }]



}
</script>
<style scoped lang="scss">
.card {
  //background-image: url("../../assets/images/mycard.png");
  // background-color: #ffc14a;
  // position: absolute;
  // top: 12%;
  // left: 4%;
  // right: 3%;
  // width: 89%;
  // height: 11%;
  // margin: 2% auto;
  // border-radius: 15px;
  // display: flex;
  // font-weight: 400;
  // font-style: normal;
  background-color: #ffffff;
  position: absolute;
  top: 12%;
  left: 1%;
  right: 3%;
  width: 98%;
  height: 24%;
  /* height: 22%; */
  /* margin: 2% auto; */
  border-radius: 15px;
  display: flex;
  font-weight: 400;
  font-style: normal;
}

.last {
  position: absolute;
  height: 100-20vh;
  background: #ffffff;
  overflow: visible;
}

// .frist_type {
//   // border: 1px solid;
//   width: 100%;
//   height: 100%;
//   border-radius: 70px 70px 0px 0px;
//   position: absolute;
//   top: 20%;
//   background-color: #fff;
// }
.frist_type {
  margin-top: 15%;
  background-image: url('../../assets/images/backageImg.png');
  background-size: 100% 100%;
  height: 85%;
}

.frist {
  margin-left: 6%;
  text-rendering: optimizelegibility;
  font-feature-settings: "kern";
  font-kerning: normal;
  font-size: 14px;
}

.second {
  //margin-left: 6%;
  width: 90%;
  margin: 0px auto;
}

.cardId {
  margin-top: 4%;
  box-shadow: 0px 0px 10px rgba(217, 209, 209, 0.996);
  line-height: 44px;
  width: 98%;
}

.records {
  padding-left: 8%;
  font-family: 'Arial Normal', 'Arial';
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  letter-spacing: normal;
  color: rgba(0, 0, 0, 0.8);
}

.time {
  padding-left: 8%;
  font-family: 'Arial Normal', 'Arial';
  font-weight: 400;
  font-style: normal;
  letter-spacing: normal;
  font-size: 10px;
  color: rgba(0, 0, 0, 0.4);
}

.numberlive {
  font-size: 18px;
  color: #FF9300;
  font-family: 'Arial Normal', 'Arial';
  font-weight: 400;
  font-style: normal;
  text-align: right;
  padding-right: 7%;
  padding-top: 12%;

  letter-spacing: normal;
}

.third {
  width: 90%;
  margin: 0px auto;
  // margin-left: 6%;
  font-size: 10px;
  color: rgba(0, 0, 0, 0.8);
  text-rendering: optimizelegibility;
  font-feature-settings: "kern";
  font-kerning: normal;
}

.img {
  width: 85%;
}

.van-col--9 {
  margin-top: 5%;
  font-size: 18px;
  color: #ffffff;
}

.van-col--15 {
  margin-top: 5%;
  font-size: 18px;
  color: #ffffff;
}

.rarle {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(118, 190, 250, 1) 0%, rgba(54, 114, 241, 1) 99%);
}

.third-style {
  font-size: 10px;
  text-align: center;
  color: rgb(255, 193, 74)
}

.vanrowFlex {
  margin-top: 2%;
}

.lusspolid {
  color: #976401;
  font-size: 14px;
}

.vanclo {
  margin: 38% 0% 3% 2%;
  /* margin-left: 2%; */
  /* margin-top: 20%; */
  font-weight: 500;
  font-size: 14px;
  text-align: center
}

.d-tattle {
  margin-top: 28%;
}

.priductName {
  padding-top: 2%;
}

.imglittle {
  padding-top: 2%;
}

.litterParam {
  width: 90%;
  margin: 0px auto;
  background-color: rgba(255, 255, 255, 1);
  border: none;
  border-radius: 4px;
  -moz-box-shadow: 0px 0px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  height: 40px;

}

.vanrow {
  margin-top: 6%;
  margin-left: 2%;
}

.tatle {
  width: 100%;
  height: 100%;
}

.icon {
  width: 40px;
  height: 40px;
}

.ntegrall {
  font-size: 24px;
  font-weight: 900;
  margin-top: 2%;
  /* margin: 0px auto; */
  text-align: center;
  color: #CE8B0B;
}

.layoutName {
  text-align: center;
}

.live {
  font-size: 12px;
  color: #CE8B0B;
}

.van-steps--horizontal {
  padding: 0px 10px 0;
}
</style>