Bit_Wise_World/src/views/index/loan/Index.vue

<template>
  <!-- 贷款 -->
  <div class="loan-header">
    <div class="header-content pf600 fs16 fc1F2937">
      <img
        class="left-arrow-image"
        src="@/assets/icon/index/left-arrow.svg"
        @click="toPath()" />
      贷款
      <div class="save pf500 fs14 fcDF384C">
        <img src="@/assets/icon/index/Headphones.svg" alt="" />
      </div>
    </div>
  </div>
  <div class="loan-index">
    <div class="loan-info">
      <div class="info-left">
        <img src="../../../assets/img/index/user/default-head.png" alt="" />
        <div class="info-name">
          <div class="pf500 fs18 fc121212">用户昵称</div>
          <div class="pf400 fs14 fc6A7187">ID: 658908</div>
        </div>
      </div>
      <div class="info-right"></div>
    </div>
    <div class="loan-product margin-top19 pf500 fs14 fc333333">
      请选择借贷产品
      <img src="../../../assets/icon/market/bottom-arrow.svg" alt="" />
    </div>
    <div class="loan-product-tips pf500 fs12 fcDF384C" v-show="productTips">
      当前信用分不足，无法进行贷款,请选择其他借贷产品
    </div>
    <div class="loan-time margin-top10 pf500 fs14 fc333333">
      <div>还款周期</div>
      <div>15 天</div>
    </div>
    <div class="loan-price margin-top10">
      <input type="text" class="input pf500 fs14 fc333333" placeholder="借贷金额" />
      <div class="pf500 fs14 fc333333">USDT</div>
    </div>
    <div class="loan-range pf400 fs12 fc999999">借贷金额范围 10 USDT - 10000 USDT</div>
    <div class="loan-desc margin-top16 pf500 fs14 fc666666">
      <div>日利率</div>
      <div>0.16%</div>
    </div>
    <div class="loan-desc margin-top26 pf500 fs14 fc666666">
      <div>利息</div>
      <div>100 USDT</div>
    </div>
    <div class="loan-desc margin-top26 pf500 fs14 fc666666">
      <div>还款方式</div>
      <div>到期一次性还清</div>
    </div>
    <div class="loan-desc margin-top26 pf500 fs14 fc666666">
      <div>放款机构</div>
      <div>SDFFG508020</div>
    </div>
    <div class="loan-btn pf600 fs14 fcFFFFFF" @click="goCommitMessage">贷款</div>
    <div class="loan-rules pf600 fs14 fcDF384C" @click="goRules">贷款规则</div>
  </div>
</template>
<script setup>
  import { useRoute, useRouter } from "vue-router";
  import { ref } from "vue";

  const productTips = ref(false);

  const router = useRouter();

  const goRules = () => {
    router.push("/loanRules");
  };

  const toPath = () => {
    router.back();
  };

  const goCommitMessage = () => {
    router.push("/commitMessage");
  };
</script>
<style lang="less" scoped>
  .loan-header {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 48px;
    background: #ffffff;
    overflow: hidden;

    .header-content {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      position: relative;
      width: 100%;
      height: 48px;

      .left-arrow-image {
        position: absolute;
        left: 14px;
        top: 16px;
        width: 9px;
        height: 16px;
      }

      .save {
        position: absolute;
        top: 12px;
        right: 16px;
        width: 24px;
        height: 24px;
      }
    }
  }

  .loan-index {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-top: calc(48px + 15px);
    width: 100%;

    .margin-top19 {
      margin-top: 19px;
    }

    .margin-top10 {
      margin-top: 10px;
    }

    .margin-top16 {
      margin-top: 16px;
    }

    .margin-top26 {
      margin-top: 26px;
    }

    .loan-info {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      width: calc(349px - 22px);
      height: 90px;

      .info-left {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        height: 56px;

        img {
          width: 56px;
          height: 56px;
        }

        .info-name {
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          margin-left: 16px;
          height: 56px;
        }
      }

      .info-right {
        width: 90px;
        height: 90px;
      }
    }

    .loan-product,
    .loan-time {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 0 11px;
      width: 349px;
      height: 45px;
      border-radius: 6px;
      background: #f5f5f5;
      box-sizing: border-box;

      img {
        width: 12px;
        height: 8px;
      }
    }

    .loan-product-tips {
      margin-top: 6px;
      width: 349px;
    }

    .loan-price {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding-right: 11px;
      width: 349px;
      height: 45px;
      background: #f5f5f5;
      box-sizing: border-box;

      .input {
        padding-left: 11px;
        width: 80%;
        height: 100%;
        box-sizing: border-box;
        outline: none;
        border: none;
        border-radius: 6px;
        background: #f5f5f5;
      }
    }

    .loan-range {
      margin-top: 7px;
      width: 349px;
      height: 18px;
      line-height: 18px;
    }

    .loan-desc {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      width: 349px;
      height: 20px;
    }

    .loan-btn {
      margin-top: 76px;
      width: 311px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-radius: 100px;
      background: #df384c;
    }

    .loan-rules {
      margin-top: 38px;
    }
  }
</style>