Bit_Wise_World/src/views/index/User.vue

<template>
  <HeaderNav headerText="我的"></HeaderNav>
  <div class="index-user">
    <div class="user-info" @click="goUserCenter">
      <div class="info-left">
        <img src="../../assets/img/index/user/default-head.png" alt="" />
        <div class="left-message">
          <div class="name pf500 fs18 fc061237">用户昵称</div>
          <div class="id pf400 fs14 fc6A7187">ID: 658908</div>
        </div>
      </div>
      <div class="info-right">
        <img src="../../assets/icon/index/right-arrow.svg" alt="" />
      </div>
    </div>
    <div class="unlock-vip">
      <img src="../../assets/img/index/vip.svg" alt="" />
    </div>
    <div class="asset-management">
      <div class="asset-title pf600 fs18 fc333333">资产管理</div>
      <div class="index-menu">
        <div
          class="menu-item"
          v-for="(item, index) in indexMenu"
          :key="index"
          @click="goIndexMenu(index)">
          <img :src="item.image" alt="" />
          <div class="item-text pf400 fs14 fc666666">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="transaction">
      <div class="transaction-title pf600 fs18 fc333333">交易</div>
      <div class="index-menu">
        <div
          class="menu-item"
          v-for="(item, index) in transactionMenu"
          :key="index"
          @click="goTransaction(index)">
          <img :src="item.image" alt="" />
          <div class="item-text pf400 fs14 fc666666">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="common-functions">
      <div class="asset-title pf600 fs18 fc333333">常用功能</div>
      <div class="index-menu">
        <div
          class="menu-item"
          v-for="(item, index) in commonFunctions"
          :key="index"
          @click="goCommonFunc(index)">
          <img :src="item.image" alt="" />
          <div class="item-text pf400 fs14 fc666666">{{ item.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
  import HeaderNav from "./components/HeaderNav.vue";
  import { useRoute, useRouter } from "vue-router";

  const router = useRouter();

  const goUserCenter = () => {
    router.push("/userCenter");
  };

  const goIndexMenu = (index) => {
    if (index == 0) {
      router.push("/rechargeIndex");
    } else if (index == 1) {
      router.push("/withdrawIndex");
    } else if (index == 2) {
      router.push("/transfer");
    } else if (index == 3) {
      router.push("/loanIndex");
    } else if (index == 4) {
      router.push("/userAsset");
    } else if (index == 5) {
      router.push("/icoIndex");
    }
  };

  const goTransaction = (index) => {
    if (index == 0) {
      router.push("/bitcoin/seconds");
    } else if (index == 1) {
      router.push("/bitcoin/contract");
    } else if (index == 2) {
      router.push("/bitcoin/options");
    } else if (index == 3) {
      router.push("/bitcoin/CryptocurrencyTrading");
    } else if (index == 4) {
      router.push("/financialIndex");
    } else if (index == 5) {
      router.push("/loanIndex");
    } else if (index == 6) {
      router.push("/otcIndex");
    }
  };

  const goCommonFunc = (index) => {
    if (index == 0) {
      router.push("/invite");
    } else if (index == 1) {
    } else if (index == 2) {
      router.push("/kyc/step1");
    } else if (index == 3) {
      router.push("/language");
    } else if (index == 4) {
      router.push("/detail");
    } else if (index == 5) {
      router.push("/userCenter");
    } else if (index == 6) {
      router.push("/about");
    }
  };

  const indexMenu = [
    {
      name: "充币",
      image: require("@/assets/img/index/user/chongbi.svg"),
    },
    {
      name: "提币",
      image: require("@/assets/img/index/user/tibi.svg"),
    },
    {
      name: "划转",
      image: require("@/assets/img/index/user/huazhuan.svg"),
    },
    {
      name: "我的贷款",
      image: require("@/assets/icon/index/Rectangle 4.png"),
    },
    {
      name: "我的资产",
      image: require("@/assets/icon/index/zichan.png"),
    },
    {
      name: "ICO",
      image: require("@/assets/img/index/user/ico.svg"),
    },
  ];

  const transactionMenu = [
    {
      name: "秒合约",
      image: require("@/assets/img/index/user/miaoheyue.svg"),
    },
    {
      name: "合约",
      image: require("@/assets/img/index/user/heyue.svg"),
    },
    {
      name: "期权",
      image: require("@/assets/img/index/user/qiquan.svg"),
    },
    {
      name: "币币",
      image: require("@/assets/icon/index/bibi.png"),
    },
    {
      name: "质押理财",
      image: require("@/assets/img/index/user/zhiya.svg"),
    },
    {
      name: "贷款",
      image: require("@/assets/img/index/user/daikuan.svg"),
    },
    {
      name: "OTC交易",
      image: require("@/assets/img/index/user/otc.svg"),
    },
  ];

  const commonFunctions = [
    {
      name: "邀请推广",
      image: require("@/assets/img/index/user/tuiguang.svg"),
    },
    {
      name: "客服",
      image: require("@/assets/img/index/user/kefu.svg"),
    },
    {
      name: "KYC认证",
      image: require("@/assets/img/index/user/kyc.svg"),
    },
    {
      name: "切换语言",
      image: require("@/assets/icon/index/yuyan.png"),
    },
    {
      name: "帮助中心",
      image: require("@/assets/img/index/user/help.svg"),
    },
    {
      name: "安全设置",
      image: require("@/assets/icon/index/anquanshezhi.png"),
    },
    {
      name: "关于我们",
      image: require("@/assets/icon/index/aboutus.png"),
    },
  ];
</script>
<style lang="less" scoped>
  .index-user {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;

    .user-info {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-top: 48px;
      width: 345px;
      height: 56px;

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

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

        .left-message {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          margin-left: 16px;
          height: 56px;

          .name {
            height: 29px;
            line-height: 29px;
          }

          .id {
            margin-top: 4px;
            height: 23px;
            line-height: 23px;
          }
        }
      }

      .info-right {
        width: 9px;
        height: 16.5px;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .unlock-vip {
      margin-top: 21px;
      width: 345px;
      height: 100px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .asset-management {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      margin-top: 23px;
      width: 345px;

      .asset-title {
        width: 345px;
        height: 24px;
        line-height: 24px;
        letter-spacing: 0.2px;
      }

      .index-menu {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-top: 15px;
        width: 317px;

        .menu-item {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
          margin-left: 29.6px;
          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;
          }
        }
      }
    }

    .transaction {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      margin-top: 23px;
      width: 345px;

      .transaction-title {
        width: 345px;
        height: 24px;
        line-height: 24px;
        letter-spacing: 0.2px;
      }

      .index-menu {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-top: 15px;
        width: 317px;

        .menu-item {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
          margin-left: 29.6px;
          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;
          }
        }
      }
    }

    .common-functions {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      margin-top: 23px;
      margin-bottom: 40px;
      width: 345px;

      .asset-title {
        width: 345px;
        height: 24px;
        line-height: 24px;
        letter-spacing: 0.2px;
      }

      .index-menu {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-top: 15px;
        width: 317px;

        .menu-item {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
          margin-left: 29.6px;
          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>