<template>
  <div class="personal">
    <div class="h-34px"></div>
    <ui-title-devider title="个人信息"></ui-title-devider>
    <div class="h-22.5px"></div>
    <div class="flex flex-wrap items-center pl-40px">
      <div class="info-item">
        <div class="info-item-label">头像：</div>
        <img class="w-80px h-80px rounded-full" src="/imgs/avatar.png" />
      </div>
      <div class="info-item">
        <div class="info-item-label">昵称：</div>
        <div class="text-size-16px text-black mr-20px">cyt</div>
      </div>
      <div class="info-item">
        <div class="info-item-label">账号：</div>
        <div class="text-size-16px text-black mr-20px">15486323563@qq.com</div>
      </div>
      <div class="info-item">
        <div class="info-item-label">密码：</div>
        <div class="text-size-16px text-black mr-20px">15486323563@qq.com</div>
      </div>
      <div class="info-item">
        <div class="info-item-label">姓名：</div>
        <div class="text-size-16px text-black mr-20px">陈小婷</div>
      </div>
      <div class="info-item">
        <div class="info-item-label">电话：</div>
        <div class="text-size-16px text-black mr-20px">18926171456</div>
      </div>
      <div class="info-item">
        <div class="info-item-label">性别：</div>
        <div class="text-size-16px text-black mr-20px">女</div>
      </div>
      <div class="info-item">
        <div class="info-item-label">职业：</div>
        <div class="text-size-16px text-black mr-20px">产品经理</div>
      </div>
      <div class="info-item">
        <div class="info-item-label">工作单位：</div>
        <div class="text-size-16px text-black mr-20px">广州量子互联科技有限公司</div>
      </div>
      <div class="!w-full info-item">
        <div class="info-item-label">地址：</div>
        <div class="text-size-16px text-black mr-20px">
          广州市黄埔区联和街道黄埔科学大道112号绿地广场1710室
        </div>
      </div>
    </div>
    <ui-title-devider title="会员服务"></ui-title-devider>
    <div class="h-26px"></div>
    <div class="flex justify-around">
      <ui-vip-preset></ui-vip-preset>
      <ui-vip-preset></ui-vip-preset>
      <ui-vip-preset></ui-vip-preset>
    </div>
    <div class="h-111px"></div>
  </div>
</template>

<style scoped>
.info-item {
  @apply flex w-1/2 items-center mb-33px;
}
.info-item-label {
  @apply text-size-16px text-[#686868] mr-20px whitespace-nowrap;
}
</style>
