2024年前端最新vue+element仿原神实现好看的个人中心_vue2个人中心，面试官问有哪些技术栈

最后

为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

      <div class="mhy-container mhy-account-center-header">
        <div class="mhy-avatar mhy-account-center-header__avatar mhy-avatar__xxl">
          <img src="https://img-static.mihoyo.com/communityweb/upload/c9d11674eac7631d2210a1ba20799958.png" class="mhy-avatar__img">
        </div>
        <div class="mhy-account-center-user">
          <div class="mhy-account-center-user__header">
            <div class="mhy-account-center-user__title">
              <span class="mhy-account-center-user__name">hellofang</span>
              <!---->
              <img src="https://img-static.mihoyo.com/level/level1.png" class="mhy-img-icon mhy-account-center-user__level mhy-account-center-user__level--self">
              <!---->
            </div>
            <div class="mhy-account-center-header__buttons">
              <div class="mhy-button mhy-account-center-header__edit mhy-button-outlined mhy-button-md">
                <button class="mhy-button__button" @click="updateMyInfo">编辑</button>
              </div>
              <!---->
            </div>
          </div>
          <div class="mhy-account-center-user__audit">
            <span class="mhy-account-center-user__uid">通行证ID:378888828</span>
            <!---->
          </div>
          <div class="mhy-account-center-user__intro">
            <p><i class="el-icon-tickets" style="color: #ad4e69;margin-right: 10px;font-size: 18px;"></i>系统原装签名，送给每一位小可爱~</p>
          </div>
          <div class="mhy-account-center-user__intro">
            <p><i class="el-icon-location-information" style="color: #00c3ff;margin-right: 10px;font-size: 18px;"></i>IP属地：广东</p>
          </div>
          <div class="mhy-account-center-header__data">
            <div class="mhy-account-center-header__data-item">
              <a class="mhy-router-link mhy-account-center-header__data-num mhy-account-center-header__data-link">5</a>
              <div class="mhy-account-center-header__data-label">粉丝</div>
            </div>
            <div class="mhy-account-center-header__data-item">
              <a class="mhy-router-link mhy-account-center-header__data-num mhy-account-center-header__data-link">
                10
              </a>
              <div class="mhy-account-center-header__data-label">关注</div>
            </div>
            <div class="mhy-account-center-header__data-item">
              <div class="mhy-account-center-header__data-num">45</div>
              <div class="mhy-account-center-header__data-label">获赞</div>
            </div>
          </div>
        </div>
      </div>

      <!--左侧菜单栏-->
      <div class="mhy-container mhy-side-menu mhy-account-center__menu">
        <header class="mhy-side-menu__header">个人中心</header>
        <ul class="mhy-side-menu__list">
          <li v-for="(item,index) in menus" :key="index" @click="selMenu(item)">
            <a :class="'mhy-router-link mhy-side-menu__item '+ (activeIndex === item.path?'nuxt-link-active':'')">
              <i :class="item.icon" style="font-size: 18px;margin-right: 10px;"></i>
              <span>{{item.name}}</span>
            </a>
          </li>
        </ul>
      </div>

      <!-- 右侧内容-->
      <div class="mhy-container mhy-account-center-content">
        <router-view></router-view>
      </div>

    </div>

  </div>
</div>

#### 4.用户信息页面源码

个人简介