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

<template>
  <!-- 理财首页 -->
  <HeaderNav headerText="理财"></HeaderNav>
  <div class="financial-index">
    <div class="asset-total">
      <div class="my-asset">
        <div class="total-left">
          <div class="asset-title pf400 fs16 fc1F2937">理财总资产(USDT)</div>
          <div class="asset-number pf600 fs32 fc1F2937">1,125,158.00</div>
          <div class="asset-approximately pf400 fs16 fcDF384C">≈35,458.00</div>
        </div>
        <div class="total-right pf500 fs12 fcFFFFFF" @click="goMyFinancial">我的理财</div>
      </div>
      <div class="asset-revenue">
        <div class="asset-left">
          <div class="text pf400 fs12 fc6A7187">昨日收益(USDT)</div>
          <div class="number pf400 fs16 fc061237">5,678.00</div>
        </div>
        <div class="asset-right">
          <div class="text pf400 fs12 fc6A7187">累计收益(USDT)</div>
          <div class="number pf400 fs16 fc061237">5,678.00</div>
        </div>
      </div>
    </div>
    <div class="advertisement">
      <img src="@/assets/img/index/Rectangle 1.svg" alt="" />
    </div>
    <div class="index-menu">
      <div
        class="menu-item"
        v-for="(item, index) in indexMenu"
        :key="index"
        @click="goMenu(index)">
        <img :src="item.image" alt="" />
        <div class="item-text pf400 fs14 fc666666">{{ item.name }}</div>
      </div>
    </div>
    <div class="recommend">
      <div class="title pf600 fs18 fc121212">理财推荐</div>
      <div class="recomment-body">
        <div
          class="recomment-item"
          v-for="(item, index) in 5"
          :key="index"
          @click="goFinancialBuy">
          <div class="item-left">
            <img src="@/assets/icon/coin/bnb.svg" alt="" />
            <div class="item-time">
              <div class="time-top pf500 fs14 fc2C3131">Bitcoin定期</div>
              <div class="time-bottom pf400 fs10 fcA9A9A9">定期</div>
            </div>
          </div>
          <div class="item-right">
            <div class="time-top pf500 fs14 fc2C3131">0.35%</div>
            <div class="time-bottom pf400 fs10 fcA9A9A9">15天</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
  import HeaderNav from "../components/HeaderNav.vue";
  import { useRoute, useRouter } from "vue-router";

  const router = useRouter();

  const goMyFinancial = () => {
    router.push("/myFinancial");
  };

  const goFinancialBuy = () => {
    router.push("/financialBuy");
  };

  const goMenu = (index) => {
    if (index == 0) {
      router.push("/cloudComPowerIndex");
    } else if (index == 1) {
      router.push("/loanIndex");
    } else if (index == 2) {
      router.push("/stakingIndex");
    }
  };

  const indexMenu = [
    {
      name: "云算力",
      image: require("@/assets/icon/index/yunsuanli.svg"),
    },
    {
      name: "贷款",
      image: require("@/assets/icon/index/daikuan.svg"),
    },
    {
      name: "质押",
      image: require("@/assets/icon/index/zhiya.svg"),
    },
  ];
</script>
<style lang="less" scoped>
  .financial-index {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-top: 48px;
    width: 100%;

    .asset-total {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      margin-top: 17px;
      width: 343px;

      .my-asset {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 343px;
        align-items: center;

        .total-left {
          .asset-title {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            height: 22px;

            .eye-close {
              margin-left: 5px;
              width: 16px;
              height: 16px;
            }
          }

          .asset-number {
            margin-top: 3px;
            height: 44px;
            line-height: 44px;
          }

          .asset-approximately {
            margin-top: 1px;
            height: 22px;
            line-height: 22px;
          }
        }

        .total-right {
          width: 76px;
          height: 24px;
          line-height: 24px;
          text-align: center;
          border-radius: 5px;
          background: #df384c;
        }
      }

      .asset-revenue {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 6px;
        height: 44px;

        .asset-left,
        .asset-right {
          height: 100%;

          .text {
            height: 20px;
            line-height: 20px;
            letter-spacing: 0.3px;
          }

          .number {
            margin-top: 3px;
            height: 24px;
            line-height: 24px;
          }
        }
      }
    }

    .advertisement {
      margin-top: 10px;
      width: 345px;
      height: 85px;
    }

    .index-menu {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-top: 15px;
      width: 269px;
      height: 57px;

      .menu-item {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        width: 57px;
        height: 57px;

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

        .item-text {
          margin-top: 1px;
          height: 24px;
          line-height: 24px;
          letter-spacing: 0.2px;
        }
      }
    }

    .recommend {
      width: 345px;

      .title {
        margin-top: 15px;
        height: 24px;
        line-height: 24px;
        letter-spacing: 0.2px;
      }

      .recomment-body {
        margin-top: 13px;
        width: 100%;

        .recomment-item {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          margin-top: 25px;
          height: 34px;

          &:first-child {
            margin-top: 0;
          }

          .item-left {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;

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

            .item-time {
              margin-left: 10px;
              height: 34px;

              .time-top {
                height: 20px;
                line-height: 20px;
              }

              .time-bottom {
                height: 14px;
                line-height: 14px;
              }
            }
          }

          .item-right {
            height: 34px;

            .time-top {
              height: 20px;
              line-height: 20px;
            }

            .time-bottom {
              height: 14px;
              line-height: 14px;
            }
          }
        }
      }
    }
  }
</style>