<template>
  <div class="account-setting">
    <div class="h-27px"></div>
    <ui-title-devider :title="$t('账号设置')"></ui-title-devider>
    <div class="h-14px"></div>
    <user-account-setting-info-item label="头像">
      <div class="pl-20px">
        <img src="/imgs/avatar.png" class="w-80px h-80px" />
      </div>
    </user-account-setting-info-item>
    <user-account-setting-info-item
      label="昵称"
      text="cyt"
    ></user-account-setting-info-item>
    <user-account-setting-info-item
      label="账号"
      text="15486323563@qq.com"
    ></user-account-setting-info-item>
    <user-account-setting-info-item label="密码">
      <div class="pl-20px flex items-center">
        <div class="mr-50px">*********</div>
        <div class="text-primary cursor-pointer">重置密码</div>
      </div>
    </user-account-setting-info-item>
    <user-account-setting-info-item :required="true" label="姓名">
      <ui-input v-model="name" class="!w-345px"></ui-input>
    </user-account-setting-info-item>
    <user-account-setting-info-item :required="true" label="电话">
      <ui-input v-model="phone" class="!w-345px">
        <div slot="suffix" class="flex items-center h-full">
          <div class="text-black">+86</div>
          <div class="w-12px"></div>
          <img src="/imgs/menu-arrow.png" class="w-6px h-auto" />
          <div class="w-16px"></div>
        </div> </ui-input
    ></user-account-setting-info-item>
    <user-account-setting-info-item  :required="true" label="性别">
      <el-radio-group v-model="gender">
        <el-radio :label="0">女</el-radio>
        <el-radio :label="1">男</el-radio>
      </el-radio-group>
    </user-account-setting-info-item>
    <user-account-setting-info-item label="职业">
      <ui-input v-model="job" class="!w-728px"></ui-input>
    </user-account-setting-info-item>
    <user-account-setting-info-item label="工作单位">
      <ui-input v-model="jobUnit" class="!w-728px"></ui-input>
    </user-account-setting-info-item>
    <user-account-setting-info-item label="地址">
      <ui-input v-model="addr" class="!w-728px"></ui-input>
    </user-account-setting-info-item>
  </div>
</template>

<script>

export default {
    data(){
        return {
            gender: 0,
            name: "陈小婷",
            phone: "18926145678",
            job: "产品经理",
            jobUnit: "广州量子互联科技有限公司",
            addr: "广州市黄埔区联和街道黄埔科学大道112号绿地广场1710室"
        }
    }
};
</script>

<style></style>
