<!--
 * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
 * @Date: 2022-07-04 16:24:00
 * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
 * @LastEditTime: 2022-08-18 11:09:51
 * @FilePath: \mcep-h5\src\components\common\Tatle.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="tool">
    <van-row class="titleNo">
      <van-col span="24" class="title">{{ title }}</van-col>
    </van-row>
    <van-row class="imgNo" style="    padding-top: 20px;">
      <van-col span="6" class="imglocal" @click="pushTrial">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-a-jifenshangcheng32x32px"></use>
        </svg>
      </van-col>
      <van-col span="6" class="imglocal" @click="pushManage">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-a-licaichanpin32x32px"></use>
        </svg>
      </van-col>
      <van-col span="6" class="imglocal" @click="pushSelf">
         <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-a-zizhudaikuan32x32px"></use>
        </svg>
      </van-col>
      <van-col span="6" class="imglocal">
         <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-a-cunkuanlixishisuan32x32px"></use>
        </svg>
      </van-col>
    </van-row>
    <van-row class="imgNo">
      <van-col span="6" class="imglocal" @click="pushTrial">利息试算</van-col>
      <van-col span="6" class="imglocal" @click="pushManage">理财产品 </van-col>
      <van-col span="6" class="imglocal" @click="pushSelf">自助贷款</van-col>
      <van-col span="6" class="imglocal">积分商城</van-col>
    </van-row>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
/*
* title
*/
@Component({
  name: "Tool",
})
export default class Tool extends Vue {
  @Prop({ default: "" }) title: string | undefined; // 页面标题
  pushTrial() {
    this.$router.push({
      name: "DepositInterestTrial",
    })
  }
  pushManage() {
    this.$router.push({
      name: "ManageMoneyProduct",
    });
  }
  pushSelf() {
    this.$router.push({
      name: "SelfHelpLoan",
    });
  }
}
</script>
<style scoped lang="scss">
.tool {

  height: 100%;
  background: linear-gradient(0deg, rgba(172, 215, 255, 1) 0%, rgba(11, 84, 224, 1) 100%);
}

.title {

    margin: 4% auto 1% 0;
    font-size: 18px;
    color: #fff;
    border-width: 0;
    white-space: nowrap;
    text-transform: none;
    width: 100%;
    height: 35%;
    text-align: center;
}

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

.imglocal {
  text-align: center;
  font-size: 12px;
  font-size: 12px;
   color: #FFFFFF;
}

.img {
  width: 40%;
}
</style>