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.png" 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" @click="goQrCode">
        <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="isHide ? eyeOpen : eyeClose" class="eye-close" @click="toggleEye" />
      </div>
      <div class="asset-number pf600 fs32 fc1F2937" :class="{ 'mask-style': isHide }">
        {{ isHide ? "···········" : "1,125,158.00" }}
      </div>
      <div
        class="asset-approximately pf400 fs16 fcDF384C"
        :class="{ 'mask-style': isHide }">
        {{ isHide ? "·········" : "≈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" :class="{ 'mask-style': isHide }">
            {{ isHide ? "·········" : "5,678.00" }}
          </div>
        </div>
        <div class="asset-right">
          <div class="text pf400 fs12 fc6A7187">累计收益(USDT)</div>
          <div class="number pf400 fs16 fc061237" :class="{ 'mask-style': isHide }">
            {{ isHide ? "·········" : "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 { ref } from "vue";
  import HotCoin from "./components/HotCoin.vue";
  import HotFinancial from "./components/HotFinancial.vue";

  const router = useRouter();

  const isHide = ref(false);

  const toggleEye = () => {
    isHide.value = !isHide.value;
  };

  const eyeClose = require("@/assets/icon/index/EyeClosed.svg");
  const eyeOpen = require("@/assets/icon/index/eye-open.svg");

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

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

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

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

  const goUser = () => {
    router.push("/indexUser");
  };

  const goQrCode = () => {
    // router.push("/splashScreen");
  };
</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 {
      position: fixed;
      left: 0px;
      top: 0px;
      z-index: 10;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 20px 15px 0 15px;
      width: 100%;
      background: #ffffff;
      box-sizing: border-box;

      .func-head {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 38px;
        height: 38px;
        border-radius: 12px;
        background: #f5f5f5;

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

      .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: 70px;
      width: 343px;

      .mask-style {
        font-size: 24px !important;
        letter-spacing: -4px;
        font-weight: 600;
        opacity: 0.9;
      }

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