cloudfile-ui/src/views/system/user/profile/index.vue

<template>
   <div class="app-container"  :style="'height:' + height">
      <div class="main">
         <div class="right-main">
            <el-card class="box-card">
               <template v-slot:header>
                 <div class="clearfix">
                   <span>个人信息</span>
                 </div>
               </template>
               <div>
                  <div class="text-center">
                     <userAvatar :user="state.user" />
                     <div class="user-name">{{ state.user.userName }}</div>
                     <div class="emails" v-if="state.user.email">{{ state.user.email }}</div>
                  </div>
                  <ul class="list-group list-group-striped" style="color: #505870 !important;">
                     <!-- <li class="list-group-item">
                        <svg-icon icon-class="user" />用户名称
                        <div class="pull-right">{{ state.user.userName }}</div>
                     </li> -->
                     <li class="list-group-item">
                        <svg-icon icon-class="phone" class="tubiao"/>手机号码
                        <div class="pull-right">{{ state.user.phonenumber }}</div>
                     </li>
                     <!-- <li class="list-group-item">
                        <svg-icon icon-class="email" />用户邮箱
                        <div class="pull-right">{{ state.user.email }}</div>
                     </li> -->
                     <li class="list-group-item">
                        <svg-icon icon-class="tree" class="tubiao"/>所属部门
                        <div class="pull-right" v-if="state.user.dept">{{ state.user.dept.deptName }} / {{ state.postGroup }}</div>
                     </li>
                     <li class="list-group-item">
                        <svg-icon icon-class="peoples" class="tubiao"/>所属角色
                        <div class="pull-right">{{ state.roleGroup }}</div>
                     </li>
                     <li class="list-group-item">
                        <svg-icon icon-class="date" class="tubiao"/>创建日期
                        <div class="pull-right">{{ state.user.createTime }}</div>
                     </li>
                  </ul>
               </div>
            </el-card>
         </div>
         <div class="left-main">
            <el-card>
               <template v-slot:header>
                 <div class="clearfix">
                   <span>信息修改</span>
                 </div>
               </template>
               <el-tabs v-model="activeTab">
                  <el-tab-pane label="基本资料" name="userinfo">
                     <userInfo :user="state.user" />
                  </el-tab-pane>
                  <el-tab-pane label="修改密码" name="resetPwd">
                     <resetPwd />
                  </el-tab-pane>
               </el-tabs>
            </el-card>
         </div>
      </div>
   </div>
</template>

<script setup name="Profile">
import userAvatar from "./userAvatar";
import userInfo from "./userInfo";
import resetPwd from "./resetPwd";
import { getUserProfile } from "@/api/system/user";
import { onMounted } from "vue";
let height = ref(document.documentElement.clientHeight - 16 + "px;");
const activeTab = ref("userinfo");
const state = reactive({
  user: {},
  roleGroup: {},
  postGroup: {}
});

function getUser() {
  getUserProfile().then(response => {
    state.user = response.data;
    state.roleGroup = response.roleGroup;
    state.postGroup = response.postGroup;
  });
};

getUser();
onMounted(() => {
   height.value = document.documentElement.clientHeight - document.getElementsByClassName("tab_box")[0].offsetHeight-8-document.getElementsByClassName("nav")[0].offsetHeight -26 + "px";
})
</script>
<style lang="scss" scoped>

.app-container {
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .main{
   display: flex;justify-content: space-around;height: 100%;
  }
  .right-main{
   width: 30%;
   margin-right: 6px;
   height: 100%;
   border: 1px solid #C1CCE3;
   border-radius: 8px;
   background: #fff;
  }
  .left-main{
   flex: 1;height: 100%;
   border: 1px solid #C1CCE3;
   border-radius: 8px;
   background: #fff;
  }
  :deep(.el-card){
   border: none !important;
   --el-box-shadow-light:none;
   .list-group-item{
      border: none;
   }
  }
 :deep(.el-card__header){
   border: none !important;
  }
  .text-center{
     .user-name{
      margin-top: 8px;
      font-size: 20px;
     }
   .emails{
      margin-top: 8px;
      font-size: 14px;
      color: #06286C;
   }
  }
  .list-group-item{
   color: #505870;
   .pull-right{
   color: #000;
  }
  .tubiao{
   margin-right: 4px;
  }
  }

</style>