样式修改

src/layout/header/components/avatar.vue

@@ -2,10 +2,10 @@
   <el-dropdown placement="bottom">
     <div class="flx-center">
       <div class="avatar">
-        <img :src="userInfo.avatar || ''" alt="avatar" />
+        <img :src="userInfo && userInfo.avatar || ''" alt="avatar" />
       </div>
       <span class="username" :style="{ color: themeConfig.footColor }">{{
-        userInfo.name || ''
+        userInfo && userInfo.name || ''
       }}</span>
     </div>
     <template #dropdown>
@@ -27,9 +27,11 @@ const handleClick = () => {
   // eslint-disable-next-line no-alert
   alert("button click");
 };
-const userInfo = ref({});
-userInfo.value = JSON.parse(sessionStorage.getItem("userInfo")) || {}
+const userInfo = ref(null);
 
+onMounted(() => {
+  userInfo.value = JSON.parse(sessionStorage.getItem("userInfo")) || {}
+})
 const gotoLogin = () => {
   sessionStorage.removeItem("token");
   router.push("/login");
@@ -38,12 +40,14 @@ const gotoLogin = () => {
 <style lang="scss" scoped>
 .el-dropdown {
   cursor: pointer;
+
   .el-tooltip__trigger {
     display: flex;
     flex-flow: row;
     align-items: center;
   }
 }
+
 .username {
   font-size: 15px;