feat: 修改日语，注册添加电话

lxf

2025-04-21 0d5daf444d5b2338bf5c2a19630bd0333a6b852a

feat: 修改日语，注册添加电话

 src/i18n/Jap/index.js

@@ -128,7 +128,7 @@
    '银行卡': `銀行カード`,
    'C2C收款方式': `C2Cの収集方法`,
    '保存': `セーブ`,
    '要求': `要件`,
    '要求': `必要条件`,
    '万': `百万`,
    '登录/注册': 'ログイン/登録',
    '我要分享': 'シェア',
@@ -591,7 +591,7 @@
    '和': 'アンド',
    '添加到主屏幕': 'ホームスクリーンに追加',
    '如已安装,请关闭此窗口': 'インストールされている場合は、このウィンドウを閉じてください.',
    '公证时间为1-30个工作日': '公証審査時間：1～30営業日',
    '公证时间为1-30个工作日': '公証時間：1〜30営業日',
    '复制失败': 'レプリケーションが失敗しました',
    '工作地址不能为空': '勤務先の住所は空にできません',
    '家庭地址不能为空': '自宅の住所は空白にできません',
@@ -634,24 +634,24 @@
    '3、矿机购买满24小时之后每日凌晨4点收益将直接发放至账户，可进行交易等操作。去挖矿': '3、マイナーが24時間購入された後、毎日午前4時に収益が直接アカウントに分配され、取引などの操作が可能になります。マイニングに',
    '去挖矿': 'マイニングに',
    '认证中心': '認証センター',
    '个人中心': 'マイアカウント',
    '查看当前功能': '利用可能な機能を見る',
    '个人中心': '個人センター',
    '查看当前功能': '現在の機能を見る',
    '进阶认证': '高度な認証',
    '公证认证': '公証認証',
    '个人信息': '個人情報',
    '政府发行的身份证': '政府発行の身分証明書',
    '审核时间:3天': '審査時間：3日',
    '家庭地址': '家の住所',
    '工作地址': '職場の住所',
    '亲属联系方式': '緊急連絡先方法',
    '家庭地址': '自宅住所',
    '工作地址': '勤務先住所',
    '亲属联系方式': '緊急連絡先',
    '您当前拥有的功能': '現在利用可能な機能',
    '法币限额': '法定通貨限度額',
    '法币限额': '法定通貨と暗号通貨の制限',
    '$50K 每日': '1日あたり $50,000',
    'C2C交易限额': 'C2C取引の制限',
    '无限额': '無制限',
    '加密货币限额': '暗号資産限度額',
    '加密货币限额': '暗号通貨制限',
    '8M 每日': '1日あたり 800万',
    '$100K 每日': '1 日あたり10 万ドル',
    '$100K 每日': '1日あたり$100,000',
    '16M 每日': '1日あたり 1600万',
    '每日': '1日あたり',
    '法币充值 & 提现限额': '法定通貨のチャージ＆出金制限',
@@ -659,19 +659,19 @@
    '提高限额': '限度額を引き上げる',
    '数字货币提现限额': 'デジタル通貨の出金限度額',
    '其他功能': 'その他の機能',
    '开始认证': '認証を開始する',
    '开始认证': '認証を始める',
    '审核详情': '監査内容',
    '认证详情': '認定の詳細',
    '认证详情': '認証の詳細',
    '与本人关系': '本人との関係',
    '亲属姓名': '親族の名前',
    '亲属地址': "親族の住所",
    '亲属电话': '親族の電話',
    '亲属电话': '親族の電話番号',
    '请输入您的工作地址（必填）': '勤務先住所を入力してください (必須)',
    '请输入您的家庭地址（必填）': 'ご自宅の住所を入力してください (必須)',
    '请输入您的家庭地址（必填）': '自宅住所を入力してください（必須）',
    '与本人关系（必填）': '本人との関係 (必須)',
    '请输入亲属姓名（必填）': '親族の名前を入力してください（必須）',
    '请输入亲属地址（必填）': '親族の住所を入力してください（必須）',
    '请输入亲属电话（必填）': '親族の電話を入力してください（必須）',
    '请输入亲属电话（必填）': '親族の電話番号を入力してください（必須）',
    '重新申请': '再申請',
    '通过认证': '認証済み',
    '认证失败': '認証に失敗しました',
@@ -779,7 +779,7 @@
    '值得信赖的矿机共享平台': '信頼できるマイニングマシンの共有プラットフォーム',
    '简单、安全搜索热门币种、立即赚取收益': 'シンプルで安全に人気のコインを検索し、瞬時にお金を稼ぎましょう。',
    '货币理财': '通貨型資産運用',
    '确认资金密码': 'ファンドパスワードの確認',
    '确认资金密码': '資金パスワード確認',
    '全部未实现盈亏': '全ての未実現損益',
    '保证金余额': '保証金残高',
    '发送成功': '送信完了',
@@ -842,8 +842,8 @@
    '真实姓名': 'フルネーム',
    '请输入真实姓名': '本名を入力してください',
    '证件照/上传护照': '身分証明書／パスポート、運転免許証のアップロード',
    verifyEmailTips: '{account} で受け取った 6 桁の確認コードを入力してください。確認コードは 30 分間有効です',
    verifyPhoneTips: '携帯電話番号 {account} で受け取った 6 桁の確認コードを入力してください。確認コードは 30 分間有効です',
    verifyEmailTips: '{account} 受け取った6桁の認証コードを入力してください。認証コードは30分間有効です。',
    verifyPhoneTips: '携帯電話番号 {account} 受け取った6桁の認証コードを入力してください。認証コードは30分間有効です。',
    verifyGoogleTips: 'Google Authenticator に 6 桁の確認コードを入力してください',
    '重新发送验证码': 'コードの再送信',
    '账号注册': 'アカウント登録',
@@ -851,22 +851,22 @@
    '去交易': '取引する',
    '跳过': 'スキップ',
    '设置资金密码': 'ファンドのパスワードを設定する',
    '资金密码(6位数字)': 'ファンドパスワード（6桁）',
    '请输入您的邮箱': 'あなたのメールアドレスを入力してください',
    '资金密码(6位数字)': '資金パスワード（6桁）',
    '请输入您的邮箱': 'メールアドレスを入力してください',
    '请输入您的手机号码': 'あなたの携帯電話番号を入力してください',
    '请输入您的密码': 'パスワードを入力してください',
    '还没有账号': "まだアカウントがありません?",
    '去注册': 'サインアップ',
    '还没有账号': "まだアカウントをお持ちでないですか？",
    '去注册': '(登録)',
    '密码（6-12个字符）': "パスワード（6～12文字）",
    '电子邮箱': 'Eメール',
    '设置密码': 'パスワードを設定してください',
    '设置密码': 'パスワード設定',
    '请确认密码': 'パスワードを確認してください',
    '请确认资金密码': 'ファンドのパスワードを確認してください',
    '邀请码(选填)': '招待コード (オプション)',
    '请确认资金密码': '資金パスワードを確認してください',
    '邀请码(选填)': '招待コード（任意）',
    '请输入邀请码': '招待コードを入力してください',
    '已有账号': 'アカウントが既にあります',
    '我已阅读并同意': '読んで同意します',
    '去登录': 'サインイン',
    '已有账号': 'アカウントをお持ちですか？',
    '我已阅读并同意': '利用規約を読み、同意します',
    '去登录': 'ログイン',
    '转出地址(选填)': '送信アドレス (オプション)',
    '请输入转出地址': '送信先アドレスを入力してください',
    '交货时间': '納品時間',
@@ -1093,8 +1093,8 @@
    "请输入姓名": "名前を入力してください",
    "请输入证件号码": "ID番号を入力してください",
    "请上传身份图片": "身分証明書の写真をアップロードしてください",
    "申请认证": "認証を申請する",
    "上传证件照失败，请联系客服获取邮箱地址发送证件照或者重新上传": "証明写真のアップロードに失敗しました。カスタマー サービスに連絡して、証明写真を送信するためのメール アドレスを取得するか、再度アップロードしてください",
    "申请认证": "認証申請",
    "上传证件照失败，请联系客服获取邮箱地址发送证件照或者重新上传": "証明写真のアップロードに失敗しました。カスタマーサービスに連絡し、証明写真を送信するためのメールアドレスを取得するか、再アップロードしてください。",
    "联系客服": "お問い合わせ",
    "实名认证": "本人確認（KYC）",
    "提交成功": "提出しました",
@@ -1531,10 +1531,10 @@
    "密码(6-12个字符)": "パスワード（6～12文字）",
    "(至少6个字符)": "(最小 6 文字)",
    "再次输入密码": "パスワードをもう一度入力してください",
    "资金密码": "ファンドのパスワード",
    "资金密码": "資金パスワード",
    "资金密码(6-12个数字)": "ファンドのパスワード (6 ～ 12 桁)",
    "我已同意并阅读": "同意して読みました ",
    "注册": "レジスター",
    "注册": "登録",
    "注册过？": "登録済み？",
    "账户登录": "アカウントログイン",
    "忘记密码?": "パスワードをお忘れですか?",
@@ -1559,7 +1559,7 @@
    "请输入密码": "パスワードを入力してください",
    "旧密码": "以前のパスワード",
    "新密码": "新しいパスワード",
    "确认密码": "パスワードを認証する",
    "确认密码": "パスワード確認",
    "总览": "概要",
    "总资产估值": "総資産評価",
    "保证金余额(USDT)": "マージンバランス(USDT)",
@@ -1714,9 +1714,9 @@
    "已完成绑定": "バインディングが完了しました",
    "重置成功": "正常にリセットされました",
    "手机号绑定": "携帯番号のバインド",
    "手机号": "携帯番号",
    "请输入手机号": "携帯番号を入力してください",
    "发送验证码": "確認コードを送信する",
    "手机号": "電話番号",
    "请输入手机号": "電話番号を入力してください（必須)",
    "发送验证码": "送信",
    "重新发送": "再送",
    "邮箱绑定": "電子メールのバインド",
    "更改": "アップデート",
@@ -1786,7 +1786,7 @@
    "请输入资金密码": "ファンドのパスワードを入力してください",
    "资金密码不可用?": "資金調達パスワードは利用できません?",
    "货币锁仓": "通貨ロック",
    "已认证": "検証済み",
    "已认证": "認証済み",
    "未认证": "未認証",
    "审核中": "審査中",
    "开": "オープン",

 src/page/authentication/index.vue

@@ -72,7 +72,7 @@
           $t('申请认证') }}</button>
           <div class="pt-35 pb-60 font-30" v-if="!disabled() || status === 3">
             <span class="text-grey">{{ $t('上传证件照失败，请联系客服获取邮箱地址发送证件照或者重新上传') }}</span>
             <span class="text-blue service-text" @click="tokefu"> {{ $t('联系客服') }}</span>
             <span class="text-blue service-text" @click="tokefu">（ {{ $t('联系客服') }}）</span>
           </div>
           <nationality-list ref='controlChild' :title="$t('请选择国家')" @getName="getName(arguments)" v-if="!disabled()">
           </nationality-list>

 src/page/register/index.vue

@@ -28,7 +28,11 @@
      @selectArea="onSelectArea"
      :icon="icon"
    />

    <ExInput
      :label="$t('手机号')"
      :placeholderText="$t('请输入手机号')"
      v-model="phone"
    />
    <ExInput
      :label="$t('设置密码')"
      :placeholderText="$t('密码（6-12个字符）')"
@@ -49,7 +53,7 @@
    />
    <ExInput
      :label="$t('确认资金密码')"
      :placeholderText="$t('确认资金密码')"
      :placeholderText="$t('请确认资金密码')"
      v-model="resafeword"
      typeText="password"
    />
@@ -144,6 +148,7 @@
      username: "",
      password: "",
      repassword: "",
      phone: "",
      resafeword: "",
      safeword: "",
      invitCode: "", //邀请码
@@ -328,6 +333,7 @@
          this.activeIndex == 0 || this.activeIndex == 1
            ? this.username
            : `${this.username}`,
        phone: this.phone,
        password: this.password,
        re_password: this.repassword,
        re_safeword: this.resafeword,
@@ -338,19 +344,19 @@
      })
        .then((res) => {
          this.GET_USERINFO(res.data);
        //   if (this.activeIndex == 0 || this.activeIndex == 2) {
            this.$router.push("/finish");
        //   } else {
            // this.$router.push('/userCenter')
            // this.$router.push({
            //   name: "verify",
            //   query: {
            //     type: this.activeIndex,
            //     account:
            //       this.activeIndex == 1 ? this.username : `${this.username}`,
            //   },
            // });
        //   }
          //   if (this.activeIndex == 0 || this.activeIndex == 2) {
          this.$router.push("/finish");
          //   } else {
          // this.$router.push('/userCenter')
          // this.$router.push({
          //   name: "verify",
          //   query: {
          //     type: this.activeIndex,
          //     account:
          //       this.activeIndex == 1 ? this.username : `${this.username}`,
          //   },
          // });
          //   }
        })
        .catch((error) => {
          if (error.code === "ECONNABORTED") {

 src/page/userCenter/index.vue

@@ -1,274 +1,298 @@
<template>
    <div class="userCenter">
        <assets-head :goHome="goHome">
            <van-icon class="font-45" @click="tokefu" :name="require(`@/assets/image/customer.png`)"
                :badge="`${unreadMsg_num}`">
            </van-icon>
        </assets-head>
        <div class="top" v-if="!userInfo.token">
            <div class="title textColor ">{{ $t('欢迎来到') }}{{ TITLE }}</div>
            <p class="">{{ $t('全球最大的区块链资产平台') }}</p>
            <div class="btnBox">
                <div class="btn btnBackground" @click="$router.push('/register')">{{ $t('注册') }}</div>
                <div class="btn btnMain" @click="$router.push('/login')">{{ $t('登录') }}</div>
            </div>
  <div class="userCenter">
    <assets-head :goHome="goHome">
      <van-icon
        class="font-45"
        @click="tokefu"
        :name="require(`@/assets/image/customer.png`)"
        :badge="`${unreadMsg_num}`"
      >
      </van-icon>
    </assets-head>
    <div class="top" v-if="!userInfo.token">
      <div class="title textColor">{{ TITLE }}{{ $t("欢迎来到") }}</div>
      <p class="">{{ $t("全球最大的区块链资产平台") }}</p>
      <div class="btnBox">
        <div class="btn btnBackground" @click="$router.push('/register')">
          {{ $t("注册") }}
        </div>
        <div class="userInfo" v-else>
            <div class="imgBox"><img :src="require(`@/assets/theme/${theme}/image/Group.png`)" alt=""></div>
            <div class="info">
                <p class="textColor">{{ status === 2 ? name : userInfo.username }}</p>
                <span>ID:{{ userInfo.usercode }}</span>
            </div>
        <div class="btn btnMain" @click="$router.push('/login')">
          {{ $t("登录") }}
        </div>
        <div class="content">
            <list-box v-if="userInfo.token" :title="$t('安全')" :listData="safeList"></list-box>
            <list-box v-if="userInfo.token" :title="$t('用户')" :status="status" :listData="userList"></list-box>
            <list-box :title="$t('通用')" :listData="list">
            </list-box>
            <list-box :title="$t('更多')" :listData="moreList"></list-box>
            <!-- <list-box v-if="!userInfo.token" :listData="moniList"></list-box> -->
            <div v-if="$store.state.user.userInfo.token">
                <div class="outBtn tabBackground textColor" @click="loginOut">{{ $t('退出') }}</div>
                <div class="tips">{{ $t('请不要透漏密码、短信和谷歌验证码给任何人，包括交易所的工作人员。') }}</div>
            </div>
        </div>
      </div>
    </div>
    <div class="userInfo" v-else>
      <div class="imgBox">
        <img :src="require(`@/assets/theme/${theme}/image/Group.png`)" alt="" />
      </div>
      <div class="info">
        <p class="textColor">{{ status === 2 ? name : userInfo.username }}</p>
        <span>ID:{{ userInfo.usercode }}</span>
      </div>
    </div>
    <div class="content">
      <list-box
        v-if="userInfo.token"
        :title="$t('安全')"
        :listData="safeList"
      ></list-box>
      <list-box
        v-if="userInfo.token"
        :title="$t('用户')"
        :status="status"
        :listData="userList"
      ></list-box>
      <list-box :title="$t('通用')" :listData="list"> </list-box>
      <list-box :title="$t('更多')" :listData="moreList"></list-box>
      <!-- <list-box v-if="!userInfo.token" :listData="moniList"></list-box> -->
      <div v-if="$store.state.user.userInfo.token">
        <div class="outBtn tabBackground textColor" @click="loginOut">
          {{ $t("退出") }}
        </div>
        <div class="tips">
          {{
            $t(
              "请不要透漏密码、短信和谷歌验证码给任何人，包括交易所的工作人员。"
            )
          }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import assetsHead from "@/components/assets-head";
import listBox from "./listBox.vue";
import { mapGetters } from "vuex";
import { _getIdentify } from '@/API/fund.api'
import { setStorage } from '@/utils/utis'
import { _getUnreadMsg } from '@/API/im.api'
import { _getIdentify } from "@/API/fund.api";
import { setStorage } from "@/utils/utis";
import { _getUnreadMsg } from "@/API/im.api";
export default {
    props: {

    },
    components: {
        assetsHead,
        listBox
    },
    computed: {
        ...mapGetters({
            userInfo: 'user/userInfo',
            theme: 'home/theme'
        }),
    },
    data() {
        return {
            goHome: true,
            status: -1,//身份认证状态
            list: [
                {
                    name: this.$t('语言'),
                    icon: require('@/assets/image/userCenter/yuyan.png'),
                    url: '/language'
                },
                {
                    name: this.$t('计价方式'),
                    icon: require('@/assets/image/userCenter/jisuan.png'),
                    url: '/exchangeRate'
                },
                {
                    name: this.$t('在线客服'),
                    icon: require('@/assets/image/userCenter/kefu.png'),
                    url: '/customerService'
                },
                {
                    name: this.$t('主题模式'),
                    icon: require('@/assets/image/userCenter/theme.png'),
                    url: '/themeModel'
                }
            ],
            moreList: [
                {
                    name: this.$t('帮助中心'),
                    icon: require('@/assets/image/userCenter/help.png'),
                    url: '/helpCenter'
                },
                {
                    name: this.$t('关于我们'),
                    icon: require('@/assets/image/userCenter/about.png'),
                    url: '/TermsOfService'
                }
            ],
            safeList: [
                {
                    name: this.$t('安全'),
                    icon: require('@/assets/image/userCenter/security.png'),
                    url: '/safety'
                },
                {
                    name: this.$t('修改密码'),
                    icon: require('@/assets/image/userCenter/password.png'),
                    url: '/changePassword'
                }
            ],
            userList: [
                // {
                //     name: this.$t('邀请推广'),
                //     icon: require('@/assets/image/userCenter/share.png'),
                //     url: '/promote'
                // },
                {
                    name: this.$t('账变记录'),
                    icon: require('@/assets/image/userCenter/record.png'),
                    url: '/accountChange'
                },
                {
                    name: this.$t('身份认证'),
                    icon: require('@/assets/image/userCenter/identity.png'),
                    url: '/certificationCenter'
                }
            ],
            moniList: [
                {
                    name: this.$t('试用账户'),
                    icon: require('@/assets/image/userCenter/testDemo.png'),
                    url: '/test'
                },
            ],
            name: "", //实名认证的真实名字
            unreadMsg_num: '',
        }
    },
    mounted() {
        if (this.userInfo.token) {
            this.getIdentify()
            this.fetchUnread()
        }
    },
    methods: {
        fetchUnread() { // 获取未读
            _getUnreadMsg().then(unread_num => {
                this.unreadMsg_num = (unread_num * 1 > 0) ? unread_num * 1 : '';
                //console.log('\n *** \n'+unread_num*1+'\n *** \n')
            })
  props: {},
  components: {
    assetsHead,
    listBox,
  },
  computed: {
    ...mapGetters({
      userInfo: "user/userInfo",
      theme: "home/theme",
    }),
  },
  data() {
    return {
      goHome: true,
      status: -1, //身份认证状态
      list: [
        {
          name: this.$t("语言"),
          icon: require("@/assets/image/userCenter/yuyan.png"),
          url: "/language",
        },
        loginOut() {
            this.$store.commit('user/SET_OUT')
            this.$router.push('/home')
            setStorage('popNotice', false)
        {
          name: this.$t("计价方式"),
          icon: require("@/assets/image/userCenter/jisuan.png"),
          url: "/exchangeRate",
        },
        getIdentify() {
            _getIdentify().then(data => {
                this.status = data.status
                this.name = data.name
            })
        {
          name: this.$t("在线客服"),
          icon: require("@/assets/image/userCenter/kefu.png"),
          url: "/customerService",
        },
        tokefu() {
            this.$router.push('/customerService')
        }
        {
          name: this.$t("主题模式"),
          icon: require("@/assets/image/userCenter/theme.png"),
          url: "/themeModel",
        },
      ],
      moreList: [
        {
          name: this.$t("帮助中心"),
          icon: require("@/assets/image/userCenter/help.png"),
          url: "/helpCenter",
        },
        {
          name: this.$t("关于我们"),
          icon: require("@/assets/image/userCenter/about.png"),
          url: "/TermsOfService",
        },
      ],
      safeList: [
        {
          name: this.$t("安全"),
          icon: require("@/assets/image/userCenter/security.png"),
          url: "/safety",
        },
        {
          name: this.$t("修改密码"),
          icon: require("@/assets/image/userCenter/password.png"),
          url: "/changePassword",
        },
      ],
      userList: [
        // {
        //     name: this.$t('邀请推广'),
        //     icon: require('@/assets/image/userCenter/share.png'),
        //     url: '/promote'
        // },
        {
          name: this.$t("账变记录"),
          icon: require("@/assets/image/userCenter/record.png"),
          url: "/accountChange",
        },
        {
          name: this.$t("身份认证"),
          icon: require("@/assets/image/userCenter/identity.png"),
          url: "/certificationCenter",
        },
      ],
      moniList: [
        {
          name: this.$t("试用账户"),
          icon: require("@/assets/image/userCenter/testDemo.png"),
          url: "/test",
        },
      ],
      name: "", //实名认证的真实名字
      unreadMsg_num: "",
    };
  },
  mounted() {
    if (this.userInfo.token) {
      this.getIdentify();
      this.fetchUnread();
    }
  },
  methods: {
    fetchUnread() {
      // 获取未读
      _getUnreadMsg().then((unread_num) => {
        this.unreadMsg_num = unread_num * 1 > 0 ? unread_num * 1 : "";
        //console.log('\n *** \n'+unread_num*1+'\n *** \n')
      });
    },

}
    loginOut() {
      this.$store.commit("user/SET_OUT");
      this.$router.push("/home");
      setStorage("popNotice", false);
    },
    getIdentify() {
      _getIdentify().then((data) => {
        this.status = data.status;
        this.name = data.name;
      });
    },
    tokefu() {
      this.$router.push("/customerService");
    },
  },
};
</script>

<style lang="scss" scoped>
.userCenter {
    font-size: 26px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  font-size: 26px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.top {
    padding: 0 32px;
  padding: 0 32px;

    p {
        color: #868D9A;
    }
  p {
    color: #868d9a;
  }
}

.content {
    font-size: 30px;
  font-size: 30px;
}

.custom {
    width: 44px;
    height: 44px;
  width: 44px;
  height: 44px;

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

.title {
    font-weight: 700;
    font-size: 52px;
    margin-top: 54px;
    margin-bottom: 22px;
  font-weight: 700;
  font-size: 52px;
  margin-top: 54px;
  margin-bottom: 22px;
}

.btnBox {
    display: flex;
    justify-content: space-between;
    margin-top: 44px;
    margin-bottom: 35px;
  display: flex;
  justify-content: space-between;
  margin-top: 44px;
  margin-bottom: 35px;

    .btn {
        color: #fff;
        width: 364px;
        height: 88px;
        line-height: 88px;
        font-size: 35px;
        border-radius: 8px;
        text-align: center;
    }
  .btn {
    color: #fff;
    width: 364px;
    height: 88px;
    line-height: 88px;
    font-size: 35px;
    border-radius: 8px;
    text-align: center;
  }
}

.outBtn {
    height: 88px;
    line-height: 88px;
    text-align: center;
    font-size: 32px;
    border-radius: 10px;
    margin: 0 32px;
    margin-top: 44px;
  height: 88px;
  line-height: 88px;
  text-align: center;
  font-size: 32px;
  border-radius: 10px;
  margin: 0 32px;
  margin-top: 44px;
}

.tips {
    color: #868D9A;
    margin-top: 34px;
    text-align: center;
    padding: 0 13%;
    display: flex;
    justify-content: center;
  color: #868d9a;
  margin-top: 34px;
  text-align: center;
  padding: 0 13%;
  display: flex;
  justify-content: center;
}

.userInfo {
    padding: 32px 32px 44px 32px;
  padding: 32px 32px 44px 32px;
  display: flex;

  .imgBox {
    width: 96px;
    height: 96px;

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

  .info {
    margin-left: 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .imgBox {
        width: 96px;
        height: 96px;

        img {
            width: 100%;
            height: 100%;
        }
    p {
      margin-bottom: 10px;
      font-size: 36px;
      font-weight: 700;
    }

    .info {
        margin-left: 22px;
        display: flex;
        flex-direction: column;
        justify-content: center;

        p {
            margin-bottom: 10px;
            font-size: 36px;
            font-weight: 700;
        }

        span {
            color: #868D9A;
            font-size: 22px;
        }
    span {
      color: #868d9a;
      font-size: 22px;
    }
  }
}
</style>
</style>