优化

src/layout/components/Navbar.vue

@@ -55,11 +55,23 @@
                 class="warning-item"
                 @click="goWarningDetail(item)"
               >
-                <div class="warning-icon">🔔</div>
+                <div class="warning-icon">
-                <div class="warning-content">
+                  <img src="data:image/png;base64,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" alt="提醒">
-                  <div class="warning-main">{{ item.title }}</div>
-                  <div class="warning-sub">{{ item.desc }}</div>
                 </div>
+                  <div class="warning-content">
+                    <div class="warning-main">{{ item.title }}</div>
+
+                    <el-tooltip
+                      :content="item.desc"
+                      placement="top"
+                      effect="dark"
+                    >
+                      <div class="warning-sub">
+                        {{ item.desc }}
+                      </div>
+                    </el-tooltip>
+                  </div>
+
               </div>
 
               <div class="warning-footer" @click="goWarning">
@@ -96,10 +108,20 @@
                 class="warning-item"
                 @click="goMessageDetail(item)"
               >
-                <div class="warning-icon">💬</div>
+                <div class="warning-icon">
+                  <img src="data:image/png;base64,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" alt="提醒">
+                </div>
                 <div class="warning-content">
                   <div class="warning-main">{{ item.title }}</div>
-                  <div class="warning-sub">{{ item.desc }}</div>
+                  <el-tooltip
+                    :content="item.desc"
+                    placement="top"
+                    effect="dark"
+                  >
+                    <div class="warning-sub">
+                      {{ item.desc }}
+                    </div>
+                  </el-tooltip>
                 </div>
               </div>
               <div class="warning-footer" @click="goMessage">
@@ -120,24 +142,108 @@
 
         </template>
 
-        <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
+<!--        <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">-->
-          <div>
+<!--          <div>-->
+<!--            <img :src="avatar" class="user-avatar" />-->
+<!--            <span class="nick-name">{{ user.nickName }}</span>-->
+<!--            <i class="el-icon-arrow-down" style="color: #fff"></i>-->
+<!--          </div>-->
+<!--          <el-dropdown-menu slot="dropdown">-->
+<!--            <router-link to="/user/profile">-->
+<!--              <el-dropdown-item>个人中心</el-dropdown-item>-->
+<!--            </router-link>-->
+<!--            <el-dropdown-item @click.native="setting = true">-->
+<!--              <span>布局设置</span>-->
+<!--            </el-dropdown-item>-->
+<!--            <el-dropdown-item divided @click.native="logout">-->
+<!--              <span>退出登录</span>-->
+<!--            </el-dropdown-item>-->
+<!--          </el-dropdown-menu>-->
+<!--        </el-dropdown>-->
+
+        <!-- 用户信息悬浮卡片 -->
+        <el-popover
+          placement="bottom-end"
+          width="260"
+          trigger="hover"
+          popper-class="user-popover"
+        >
+          <!-- 弹框内容 -->
+            <!-- 顶部蓝色区域 -->
+            <div class="user-bg">
+              <div class="user-header">
+                <div class="user-name">{{ user.nickName }}</div>
+                <div class="user-role">
+                  <i aria-label="用户"></i>
+                  {{ dept.deptName }}
+                </div>
+                <div class="user-role">{{ roles.length > 0 ? roles[0].roleName : '' }}</div>
+              </div>
+            </div>
+
+
+            <!-- 列表区域 -->
+            <div class="user-list">
+              <div class="user-item">
+                <i class="el-icon-mobile-phone" style="font-size: 19px; color: #000;"></i>
+                <span>手机号</span>
+                <span class="right">138****8251</span>
+              </div>
+              <div class="user-item">
+                <i class="el-icon-lock" style="font-size: 19px; color: #000;"></i>
+                <span>修改密码</span>
+              </div>
+              <div class="user-item">
+                <i class="el-icon-house" style="font-size: 19px; color: #000;"></i>
+                <span>设置默认首页</span>
+              </div>
+              <div class="user-item" @click="downloadUserManual">
+                <i class="el-icon-download" style="font-size: 19px; color: #000;"></i>
+                <span>操作手册下载</span>
+              </div>
+              <div class="user-item">
+                <i class="el-icon-t-shirt" style="font-size: 19px; color: #000;"></i>
+                <span>一键换肤</span>
+              </div>
+              <div class="user-item">
+                <i class="el-icon-delete" style="font-size: 19px; color: #000;"></i>
+                <span>清除缓存</span>
+              </div>
+              <div class="user-item">
+                <i class="el-icon-data-analysis" style="font-size: 19px; color: #000;"></i>
+                <span>测试网络速度</span>
+              </div>
+              <div class="user-item">
+                <i class="el-icon-edit-outline" style="font-size: 19px; color: #000;"></i>
+                <span>意见反馈/闭环</span>
+              </div>
+              <div class="user-item">
+                <i class="el-icon-phone-outline" style="font-size: 19px; color: #000;"></i>
+                <span>联系我们</span>
+              </div>
+              <div class="user-item logout" @click="logout">
+                <i class="el-icon-refresh-left" style="font-size: 19px; color: #000;"></i>
+                <span>退出</span>
+              </div>
+            </div>
+
+            <!-- 底部 -->
+            <div class="user-footer">
+              软件名称：e基建2.0<br />
+              版本号：2.0.15
+            </div>
+
+          <!-- 触发区域（右上角头像+名字） -->
+          <div
+            slot="reference"
+            class="avatar-container right-menu-item hover-effect"
+          >
             <img :src="avatar" class="user-avatar" />
             <span class="nick-name">{{ user.nickName }}</span>
             <i class="el-icon-arrow-down" style="color: #fff"></i>
           </div>
-          <el-dropdown-menu slot="dropdown">
+        </el-popover>
-            <router-link to="/user/profile">
+
-              <el-dropdown-item>个人中心</el-dropdown-item>
-            </router-link>
-            <el-dropdown-item @click.native="setting = true">
-              <span>布局设置</span>
-            </el-dropdown-item>
-            <el-dropdown-item divided @click.native="logout">
-              <span>退出登录</span>
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown>
       </div>
     </div>
     <div style="height: 50px"></div>
@@ -235,6 +341,8 @@ export default {
     return {
       title: process.env.VUE_APP_TITLE,
       user: {},
+      dept:{},
+      roles:[],
       menuList: [],
       showMenuBox: false,
       currentMenu: {},
@@ -310,7 +418,7 @@ export default {
     },
     // 待办点击-跳转到待办页面
     goTodo() {
-      this.$router.push({ path: '/todo' }) // 替换为实际的待办页路由
+      // this.$router.push({ path: '/todo' }) // 替换为实际的待办页路由
     },
     goMessageDetail(item) {
       this.$refs.messagePopover.doClose(); // 关闭消息弹窗
@@ -322,9 +430,16 @@ export default {
     },
     getUser() {
       getUserProfile().then((response) => {
+        console.log("用户信息", response.data);
         this.user = response.data
+        this.dept=response.data.dept
+        this.roles=response.data.roles
       })
     },
+    downloadUserManual() {
+      this.download('material-mall/todo/downLoadUserManual', {
+      }, `机械化施工装备管理（共享）平台操作手册V1.0.pdf`)
+    },
     async logout() {
       this.$confirm('确定注销并退出系统吗？', '提示', {
         confirmButtonText: '确定',
@@ -460,7 +575,7 @@ export default {
   }
 
   .menus {
-    min-width: 998px;
+    min-width: 698px;
     height: 50px;
     line-height: 50px;
     flex: 1;
@@ -725,11 +840,10 @@ export default {
 }
 
 .warning-title {
-  color: #000000;
+  font-size: 18px;
-  font-size: 16px;
+  font-weight: 700;
-  font-weight: bold;
+  color: #333;
-  padding: 10px 12px;
+  height: 38px;
-  border-bottom: 1px solid #eee;
 }
 
 .warning-item {
@@ -737,6 +851,7 @@ export default {
   padding: 10px 12px;
   cursor: pointer;
   transition: all 0.2s;
+  border-bottom: 1.5px solid #e1e1e1;
 
   &:hover {
     background: #f5f7fa;
@@ -749,29 +864,118 @@ export default {
 
 .warning-content {
   flex: 1;
+  min-width: 0;
 }
 
 .warning-main {
-  font-weight: 600;
+  font-size: 16px;
   color: #333;
 }
 
 .warning-sub {
   font-size: 12px;
-  color: #999;
+  color: #666666;
   margin-top: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .warning-footer {
   text-align: center;
   padding: 8px;
-  color: #409eff;
+  color: #50C7BD;
   cursor: pointer;
-  border-top: 1px solid #eee;
 
   &:hover {
     background: #f5f7fa;
   }
 }
 
+/* -------用户------- */
+.user-popover {
+  color: #000;
+  font-size: 12px;
+  background-color: #fff;
+  width: 250px;
+  border-radius: 12px;
+  border: 1px solid #e1e1e1;
+  padding: 10px;
+}
+
+//.user-card {
+//  width: 260px;
+//  overflow: hidden;
+//  font-family: Microsoft YaHei;
+//}
+
+.user-bg {
+  border-radius: 15px;
+  //height: 140px;
+  background-color: #34c3ac;
+  background-image: linear-gradient(270deg, #4eacff, #00d2be);
+}
+
+/* 顶部渐变 */
+.user-header {
+  background-image: url("../../assets/images/user-bg.png");
+  padding: 15px;
+  color: #fff;
+  background-size: 100% 100%;
+}
+
+.user-name {
+  font-size: 20px;
+}
+
+.user-role {
+  padding: 5px 0;
+  font-size: 12px;
+  margin-top: 4px;
+  opacity: 0.9;
+}
+
+/* 列表 */
+.user-list {
+  background: #fff;
+}
+
+.user-item {
+  display: flex;
+  align-items: center;
+  padding: 15px 14px;
+  font-size: 12px;
+  color: #000;
+  cursor: pointer;
+  border-bottom: 1px solid #eee;
+  font-weight: 500;
+
+  i {
+    margin-right: 8px;
+    color: #666;
+  }
+
+  .right {
+    margin-left: auto;
+    color: #999;
+  }
+
+  &:hover {
+    background: #f5f7fa;
+  }
+}
+
+.user-item.logout {
+  color: #f56c6c;
+}
+
+/* 底部 */
+.user-footer {
+  font-size: 12px;
+  color: #999;
+  padding: 10px 14px;
+  background: #fafafa;
+  line-height: 18px;
+}
+
 </style>