<template>
  <div class="hot-loan">
    <div class="title text-center mt-5">{{ inst_name }}-{{ product_name }}</div>
    <div class="flex items-center box-group">
      <div
        class="box"
        :style="{
          width: 'calc(100% / 3)',
        }"
      >
        <div class="top-text text-center">最低{{ rate_lower }}%</div>
        <div class="bottom-text mt-2.5 text-center">产品年利率</div>
      </div>
      <div
        class="box"
        :style="{
          width: 'calc(100% / 3)',
        }"
      >
        <div class="top-text text-center">{{ date }}年</div>
        <div class="bottom-text mt-2.5 text-center">最长产品期限</div>
      </div>
      <div
        class="box"
        :style="{
          width: 'calc(100% / 3)',
        }"
      >
        <div class="top-text text-center">{{ max_amount }}万</div>
        <div class="bottom-text mt-2.5 text-center">最高额度</div>
      </div>
    </div>
    <div
      class="viewRightNow flex items-center justify-center mt-5 mx-auto"
      @click="$router.push({ name: 'LoanDetail', params: { uuid: uuid } })"
    >
      立即查看
    </div>
  </div>
</template>

<script lang="ts" setup>
defineEmits(["viewRightNow"]);
defineProps({
  inst_name: {
    type: String,
    requried: true,
  },
  product_name: {
    type: String,
    requried: true,
  },
  rate_lower: {
    type: Number,
    requried: true,
  },
  date: {
    type: Number,
    requried: true,
  },
  max_amount: {
    type: Number,
    requried: true,
  },
  uuid: {
    type: String,
    requried: true,
  },
});
</script>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({});
</script>

<style scoped></style>

<style lang="less" scoped>
.hot-loan {
  margin: 0 auto;
  width: 335px;
  height: 200px;
  background: #ffffff;
  box-shadow: 0px 2px 13px 0px #f0f6fc;
  border-radius: 20px;
  .title {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #1b1f37;
    line-height: 22px;
  }
  .box-group {
    margin-top: 30px;
    .box {
      border-right: 1px solid #eaf0ff;
      .top-text {
        font-size: 16px;
        font-family: PingFangHK-Semibold, PingFangHK;
        font-weight: 600;
        color: #f03a30;
        line-height: 22px;
      }
      .bottom-text {
        font-size: 12px;
        font-family: PingFangHK-Regular, PingFangHK;
        font-weight: 400;
        color: #8d92af;
        line-height: 17px;
      }
      &:last-of-type {
        border-right: 0;
      }
    }
  }
  .viewRightNow {
    width: 295px;
    height: 40px;
    background: #4e61c9;
    border-radius: 20px;

    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #ffffff;
  }
}
</style>
