Bit_Wise_World/src/views/index/user/UserInfo.vue

<template>
  <div class="account-info">
    <div class="info-title pf600 fs18 fc121212">账号信息</div>
    <div class="info-uid">
      <div class="uid-left pf500 fs14 fc333333">UID</div>
      <div class="uid-right pf400 fs14 fcA8A8A8">
        115615080805020850
        <div class="copy">
          <img src="../../../assets/icon/index/CopySimple.svg" alt="" />
        </div>
      </div>
    </div>
    <div class="info-identity">
      <div class="identity-left pf500 fs14 fc333333">身份认证</div>
      <div class="identity-right pf500 fs14 fcA8A8A8">
        未认证
        <div class="arrow">
          <img src="../../../assets/icon/index/right-arrow-gray.svg" alt="" />
        </div>
      </div>
    </div>
    <div class="info-country">
      <div class="country-left pf500 fs14 fc333333">国家或地区</div>
      <div class="country-right pf500 fs14 fcA8A8A8">美国</div>
    </div>
    <div class="info-identity">
      <div class="identity-left pf500 fs14 fc333333">我的VIP</div>
      <div class="identity-right pf500 fs14 fcA8A8A8">
        普通用户
        <div class="arrow">
          <img src="../../../assets/icon/index/right-arrow-gray.svg" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup></script>
<style lang="less" scoped>
  .account-info {
    margin-top: 15px;
    width: 349rpx;

    .info-title {
      height: 24px;
      line-height: 24px;
    }

    .info-uid {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
      width: 349px;
      height: 24px;

      .uid-left {
        height: 24px;
        line-height: 24px;
      }

      .uid-right {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;

        .copy {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          margin-left: 2px;
          width: 20px;
          height: 20px;

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

    .info-identity {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-top: 22px;
      width: 349px;
      height: 24px;

      .identity-left {
        height: 24px;
        line-height: 24px;
      }

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

        .arrow {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          margin-left: 2px;
          width: 20px;
          height: 20px;

          img {
            width: 5px;
            height: 10px;
          }
        }
      }
    }

    .info-country {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-top: 22px;
      width: 349px;
      height: 24px;

      .country-left {
        height: 24px;
        line-height: 24px;
      }

      .country-right {
        padding-right: 4px;
        box-sizing: border-box;
      }
    }
  }
</style>