Bit_Wise_World/src/views/user/Index.vue

<template>
  <!-- 我的 -->
  <div class="user-index">
    <div class="loan-info">
      <div class="info-left">
        <img src="../../assets/img/index/user/default-head.png" alt="" />
        <div class="info-name" @click="deleteAccount">
          <div class="name-area pf500 fs18 fc121212">
            用户昵称
            <div class="level pf500 fs10 fcDF384C">V2</div>
          </div>
          <div class="pf400 fs14 fc6A7187">ID: 658908</div>
        </div>
      </div>
      <div class="info-right"></div>
    </div>
    <img src="../../assets/img/user/Invite Friends.svg" class="invite-friend" alt="" />
    <div class="user-func">
      <div
        class="func-item"
        v-for="(item, index) in userMenu"
        :key="index"
        @click="goMenuRouter(index)">
        <div class="item-left pf500 fs14 fc333333">
          <div class="left-img">
            <img :src="item.img" class="anquan-set" alt="" />
          </div>
          {{ item.name }}
        </div>
        <img src="../../assets/icon/user/right-arrow.svg" class="right-arrow" alt="" />
      </div>
    </div>
    <div class="submit pf600 fs14 fcFFFFFF">退出</div>
  </div>
</template>
<script setup>
  import { useRoute, useRouter } from "vue-router";

  const router = useRouter();

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

  const goMenuRouter = () => {
    router.push("/userLoanIndex");
  };

  const userMenu = [
    {
      name: "安全设置",
      img: require("@/assets/icon/user/anquan-set.svg"),
    },
    {
      name: "我的贷款",
      img: require("@/assets/icon/user/my-loan.svg"),
    },
    {
      name: "高级认证",
      img: require("@/assets/icon/user/certification.svg"),
    },
    {
      name: "KYC认证",
      img: require("@/assets/icon/user/key-certification.svg"),
    },
    {
      name: "我的资产",
      img: require("@/assets/icon/user/my-money.svg"),
    },
    {
      name: "切换语言",
      img: require("@/assets/icon/user/language.svg"),
    },
    {
      name: "联系客服",
      img: require("@/assets/icon/user/customer-service.svg"),
    },
    {
      name: "帮助中心",
      img: require("@/assets/icon/user/help-center.svg"),
    },
    {
      name: "关于我们",
      img: require("@/assets/icon/user/about-we.svg"),
    },
  ];
</script>
<style lang="less" scoped>
  .user-index {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 100px;
    width: 100%;

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

    .margin-top28 {
      margin-top: 28px;
    }

    .loan-info {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-top: 20px;
      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;

          .name-area {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;

            .level {
              margin-left: 5px;
              width: 18px;
              height: 15px;
              line-height: 15px;
              text-align: center;
              border-radius: 3px;
              background: #df384c1a;
            }
          }
        }
      }

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

    .invite-friend {
      margin-top: 20px;
      width: 327px;
      height: 68px;
    }

    .user-func {
      width: 340px;

      .func-item {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: 26.5px;
        width: 340px;
        height: 24px;

        &:first-child {
          margin-top: 18px;
        }

        .item-left {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          height: 24px;

          .left-img {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            width: 24px;
            height: 24px;
          }

          .anquan-set {
            margin-right: 8px;
          }
        }

        .right-arrow {
          width: 7px;
          height: 15px;
        }
      }
    }

    .submit {
      margin-top: 43px;
      width: 311px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-radius: 100px;
      background: #df384c;
      letter-spacing: 0.2px;
    }
  }
</style>