回退Header.vue

src/layout/components/Header.vue

@@ -4,46 +4,37 @@
             <a href="/">
                 <img src="/logo.png" alt="" />
             </a>
-            <span>长沙市公安局局长信箱即接即办系统</span>
+            <span>长沙市公安局局长信箱即接即办平台</span>
         </div>
         <NoticeMessage />
-        <div class="flex v-center gap-16">
-            <section class="flex gap" :title="userStore.userInfo.roleName">
+        <section class="flex gap userinfo v-center pointer" @click.stop="dropdownShow = true">
             <icon name="el-icon-UserFilled" :size="29" color="#586EFF" />
-                <span>{{
-                    userStore.userInfo.deptName + " " + userStore.userInfo.name
-                }}</span>
-                <div class="dropdown-content">
-                        <div><img src="/imgs/lock.png" style="width: 1.2vw;">&nbsp;&nbsp;&nbsp;<a @click="handleEdit">重置密码</a></div>
-                        <div><img src="/imgs/goout.png" style="width: 1.2vw;">&nbsp;&nbsp;&nbsp;<a @click="logout">退出登录</a></div>
-                </div>
+            <span>{{ userStore.userInfo.fullName }}</span>
         </section>
-
-            <el-button type="primary" @click="logout" style=""
-                >退出
-                <template #icon
-                    ><icon name="local-icon-logout" color="#586EFF"
-                /></template>
-            </el-button>
-        </div>
-        <edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
     </header>
+    <ul class="userinfo-dropdown" v-if="dropdownShow">
+        <li class="flex gap v-center" >
+            <icon name="el-icon-Lock" :size="22" />
+            <span>修改密码</span>
+        </li>
+        <li class="flex gap v-center" @click="handleLogout">
+            <icon name="local-icon-logout" :size="22" />
+            <span>退出登录</span>
+        </li>
+    </ul>
 </template>
-<script  lang="ts" setup>
+<script setup>
 import NoticeMessage from "./NoticeMessage.vue";
 import useUserStore from "@/stores/modules/user";
-import NoticeMessageVue from "./NoticeMessage.vue";
-import EditPopup from './edit.vue'
 
 const userStore = useUserStore();
-const editRef = shallowRef<InstanceType<typeof EditPopup>>();
-    const showEdit = ref(false)
-const handleEdit = async () => {
-    showEdit.value = true
-    await nextTick()
-    editRef.value?.open('edit')
-}
-function logout() {
+const dropdownShow = ref(false)
+
+document.addEventListener("click", () => {
+    dropdownShow.value = false;
+})
+
+function handleLogout() {
     userStore.logout();
 }
 </script>
@@ -58,7 +49,6 @@ header {
         font-size: 3.89vh;
         font-weight: 700;
         letter-spacing: 4px;
-
         a {
             text-decoration: none;
             color: inherit;
@@ -68,49 +58,28 @@ header {
             }
         }
     }
-    .gap{
-        position: relative;/* 设置相对定位 */
-        display: inline-block;/* 让元素具有块级元素和行内元素的特性,即将块级元素转化为内联元素 */
-
-    .dropdown-content {
-        border-radius: 20px 20px 20px 20px;
-            display: none;
-            position: absolute;
-            background-color: #f9f9f9;
-            z-index: 100;
-  min-width: 160px;
-  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-  padding: 12px 16px;
-            a{
-                display: inline-block;
-                z-index: 289;
-                color: black;
-                font-size: 2.4vh;
-                cursor:pointer;
+    .userinfo {
+        margin-right: 8px;
     }
 }
-}
-
-.gap:hover .dropdown-content {
-  display: block;
-}
-
-.nav2 a {
-    color: black;
+.userinfo-dropdown {
+    position: fixed;
+    right: 16px;
+    top: calc(var(--header-height) - 8px);
+    background: #FFFFFF;
+    box-shadow: 0px 9px 28px 8px rgba(0,0,0,0.05), 0px 6px 16px 0px rgba(0,0,0,0.08), 0px 3px 6px -4px rgba(0,0,0,0.12);
+    border-radius: 8px;
+    margin: 0;
+    padding: 12px 0;
+    z-index: 999;
+    overflow: hidden;
+    li {
         padding: 12px 16px;
-    display: block;/* 将a标签设置为块级标签 */
-}
-.gap:hover .nav2 {
-    display: block;
-}
-    .el-button {
-        --el-font-size-base: 18px;
-        --el-button-bg-color: #283aac;
-        --el-button-border-color: #586eff;
-        height: 36px;
+        font-size: 16px;
         &:hover {
-            --el-button-hover-bg-color: var(--el-button-bg-color);
-            --el-button-hover-border-color: #fff;
+            cursor: pointer;
+            font-weight: 700;
+            color: var(--primary-color);
         }
     }
 }