页面头

src/assets/svg/user_avatar.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.475 7.775C13.475 9.69419 11.9192 11.25 9.99996 11.25C8.08077 11.25 6.52496 9.69419 6.52496 7.775C6.52496 5.85581 8.08077 4.3 9.99996 4.3C11.9192 4.3 13.475 5.85581 13.475 7.775ZM12.225 7.775C12.225 9.00384 11.2288 10 9.99996 10C8.77113 10 7.77496 9.00384 7.77496 7.775C7.77496 6.54617 8.77113 5.55 9.99996 5.55C11.2288 5.55 12.225 6.54617 12.225 7.775Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 1.25C14.8325 1.25 18.75 5.16751 18.75 10C18.75 14.3794 15.5326 18.0074 11.3325 18.6492C10.8981 18.7156 10.453 18.75 10 18.75C7.6819 18.75 5.57433 17.8486 4.00873 16.3771C2.31055 14.7811 1.25 12.5144 1.25 10C1.25 5.16751 5.16751 1.25 10 1.25ZM8.85876 17.4137C7.44629 17.1981 6.16344 16.5884 5.12588 15.7004L5.0675 15.6488L5.10563 15.5072C5.41386 14.4982 6.37305 13.75 7.5 13.75H12.5L12.691 13.7572C13.7632 13.8384 14.6497 14.5968 14.9172 15.6088L14.9263 15.6512L14.8398 15.7293C14.7241 15.8272 14.6058 15.9214 14.4849 16.0119C13.234 16.9466 11.6816 17.5 10 17.5L9.63851 17.4914C9.37573 17.479 9.11554 17.4529 8.85876 17.4137ZM15.8897 14.644C15.288 13.3764 13.9964 12.5 12.5 12.5H7.5C6.00363 12.5 4.71197 13.3764 4.11034 14.644C3.10188 13.3668 2.5 11.7537 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10C17.5 11.7537 16.8981 13.3668 15.8897 14.644Z" fill="white"/>
+</svg>

src/hooks/userInfo.js

@@ -0,0 +1,21 @@
+// 全局接口请求loading hook
+import { ref } from "vue";
+
+const userInfo = ref(null);
+const token = ref(localStorage.getItem("token") || "");
+
+export function useUserInfo() {
+  function setToken(e){
+    token.value=e
+    localStorage.setItem('token',e)
+  }
+
+  function getUserInfo() {
+
+  }
+
+  return {
+    token,
+    setToken
+  };
+}

src/layout/Index.vue

@@ -3,46 +3,117 @@
 </script>
 
 <template>
-    <div class="layout-wrap">
-        <div class="bg-white header">
-            <span class="bread-item" v-for="item in $route.matched" :key="item.name">{{item.meta.title}}</span>
-        </div>
-        <div class="layout-content">
-            <router-view />
-        </div>
-        
+  <div class="layout-wrap">
+    <div class="flex header">
+      <img class="logo" src="@/assets/imgs/logo.png" alt="" />
+      <t-popup placement="bottom-left" overlayInnerClassName="header-userInfo-pop-wrap">
+				<template #content>
+					<div class="content">
+						<div class="top-box">
+							<div class="label-text">账号信息</div>
+							<div class="flex">
+								<span>用户名</span>
+								<span>|</span>
+								<span>手机号</span>
+							</div>
+							<div class="flex">
+								<span>所属机构</span>
+								<span>|</span>
+								<span>岗位</span>
+							</div>
+						</div>
+						<div class="flex my-fav-box">
+							<t-icon name="star" style="font-size:20px"></t-icon>
+							<span>我的收藏</span>
+							<t-icon class="arrow-right" name="chevron-right-s" style="font-size:20px"></t-icon>
+						</div>
+						<div class="flex my-fav-box" style="color:#D54941">
+							<t-icon name="logout" style="font-size:20px"></t-icon>
+							<span>退出登录</span>
+						</div>
+					</div>
+				</template>
+				<div class="userInfo-box">
+					<svg-icon name="user_avatar" style="font-size:20px;margin-right:3px"></svg-icon>
+					<span>账号吗</span>
+					<t-icon name="chevron-down" style="font-size:28px;margin-left:11px"></t-icon>
+				</div>
+			</t-popup>
     </div>
+    <div class="layout-content">
+      <router-view />
+    </div>
+  </div>
 </template>
 
+<style lang="scss">
+.header-userInfo-pop-wrap{
+	padding: 0;
+	width: 234px;
+	border-radius: 8px;
+	border: 1px solid var(--border-color);
+	box-shadow: 0px 4px 12px 0px #0000001A;
+	overflow: hidden;
+	.content{
+		.top-box{
+			padding: 14px;
+			background: linear-gradient(180deg, #7C55FF 0%, #4C64F7 100%);
+			color: #fff;
+			.label-text{
+				font-size: 16px;
+				line-height: 22.4px;
+			}
+			.flex{
+				gap: 0 5px;
+				margin-top: 5px;
+			}
+		}
+		.my-fav-box{
+			border-bottom: 1px solid var(--border-color);
+			height: 48px;
+			align-items: center;
+			padding: 0 14px;
+			color: #666666;
+			cursor: pointer;
+			.arrow-right{
+				margin-left: auto;
+			}
+			span{
+				display: inline-block;
+				margin-left: 12px;
+			}
+		}
+	}
+}
+</style>
 <style lang="scss" scoped>
-.layout-wrap{
-    height: 100%;
-    padding-top: 64px;
-    .header{
-        position: fixed;
-        left: 0;
-        right: 0;
-        top: 0;
-        z-index: 10;
-        height: 64px;
-        display: flex;
-        align-items: center;
-        padding-left: 24px;
-        .bread-item{
-            &::after{
-                content:'/'
-            }
-        }
-        .bread-item:last-child{
-            color: var(--td-brand-color);
-            &::after{
-                content:''
-            }
-        }
-    }
-    .layout-content{
-        padding: 20px;
-        min-height: calc(100% - 64px);
+.layout-wrap {
+  height: 100%;
+  padding-top: 70px;
+  .header {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    z-index: 10;
+    height: 70px;
+    background: linear-gradient(90deg, #7c54ff 0%, #4b64f7 100%);
+    align-items: center;
+    padding: 0 20px;
+    .logo {
+      width: 168px;
     }
+		.userInfo-box{
+			margin-left: auto;
+			color: #fff;
+			display: flex;
+			align-items: center;
+			cursor: pointer;
+		}
+  }
+  .layout-content {
+    padding: 20px;
+    min-height: calc(100% - 70px);
+  }
 }
 </style>