Bit_Wise_World/src/views/index/Index.vue

<template>
  <div class="index">
    <div class="index-func">
      <div class="func-head">
        <img src="../../assets/img/index/default-img.svg" alt="" @click="goUser" />
      </div>
      <div class="search-currency pf400 fs14 fcA9A9A9" @click="goSearch">
        <img src="../../assets/icon/index/search-gray.svg" class="search-img" alt="" />
        搜索您关心的币种
      </div>
      <div class="qr-code">
        <img src="../../assets/icon/index/ic_qrcode_bk.svg" alt="" />
      </div>
      <div class="notification" @click="goNotifi">
        <img src="../../assets/icon/index/Notification.svg" alt="" />
      </div>
    </div>
    <div class="asset-total">
      <div class="asset-title pf400 fs16 fc1F2937">
        理财总资产(USDT)
        <img src="../../assets/icon/index/EyeClosed.svg" class="eye-close" alt="" />
      </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 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.png" 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>
    <HotCoin></HotCoin>
    <HotFinancial></HotFinancial>
  </div>
</template>
<script setup>
  import { useRoute, useRouter } from "vue-router";
  import HotCoin from "./components/HotCoin.vue";
  import HotFinancial from "./components/HotFinancial.vue";

  const router = useRouter();

  const indexMenu = [
    {
      name: "ICO功能",
      image: require("@/assets/img/index/Rectangle 2.svg"),
    },
    {
      name: "质押理财",
      image: require("@/assets/img/index/Rectangle 3.svg"),
    },
    {
      name: "贷款",
      image: require("@/assets/img/index/Rectangle 4.svg"),
    },
    {
      name: "邀请推广",
      image: require("@/assets/img/index/Rectangle 5.svg"),
    },
    {
      name: "秒合约",
      image: require("@/assets/img/index/Rectangle 6.svg"),
    },
    {
      name: "客服",
      image: require("@/assets/img/index/Rectangle 7.svg"),
    },
    {
      name: "充币",
      image: require("@/assets/img/index/Rectangle 8.svg"),
    },
    {
      name: "OTC交易",
      image: require("@/assets/img/index/user/otc.svg"),
    },
  ];

  const goMenu = (index) => {
    if (index == 0) {
      router.push("/icoIndex");
    } else if (index == 1) {
      router.push("/financialIndex");
    } else if (index == 2) {
      router.push("/loanIndex");
    } else if (index == 6) {
      router.push("/rechargeIndex");
    } else if (index == 7) {
      router.push("/otcIndex");
    }
  };

  const goSearch = () => {
    router.push("/searchIcon");
  };

  const goNotifi = () => {
    router.push("/notification");
  };

  const goUser = () => {
    router.push("/indexUser");
  };
</script>
<style lang="less" scoped>
  .index {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 80px;
    width: 100%;

    .index-func {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-top: 21px;
      width: 345px;
      height: 38px;

      .func-head {
        width: 38px;
        height: 38px;

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

      .search-currency {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        margin-left: -6px;
        width: 210px;
        height: 38px;
        border-radius: 50px;
        border: 1px solid #dddddd;
        box-sizing: border-box;

        .search-img {
          margin-left: 12.5px;
          margin-right: 9.5px;
          width: 17px;
          height: 17px;
        }
      }

      .qr-code {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-right: -10px;
        width: 21px;
        height: 18px;

        img {
          width: 21px;
          height: 18px;
        }
      }

      .notification {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 16px;
        height: 18px;

        img {
          width: 16px;
          height: 18px;
        }
      }
    }

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

      .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;
      }

      .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: flex-start;
      flex-wrap: wrap;
      margin-top: 29px;
      width: 318px;
      height: 139px;

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

        &:nth-child(1),
        &:nth-child(5) {
          margin-left: 0px;
        }

        &:nth-child(5),
        &:nth-child(6),
        &:nth-child(7),
        &:nth-child(8) {
          margin-top: 25px;
        }

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

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