1

src/layouts/MainLayout.vue

@@ -4,29 +4,43 @@
     <el-header class="city-header">
       <div class="header-left">
         <img src="@/assets/images/logo.png" alt="" />
+        <div class="Split"></div>
+        <div class="header_subtitle">投资决策分析系统</div>
         <!-- <span class="city-name">123123</span> -->
       </div>
       <div class="header-right">
         <div class="message-wrap" @click="toMessagePage">
-          <el-icon size="20">
-            <ChatDotSquare />
-          </el-icon>
-          <div v-if="messageCount" class="count">{{ messageCount }}</div>
-        </div>
-        <div>
-          <el-dropdown>
-            <span class="username">
-              {{ userInfo.name }}
-            </span>
-            <template #dropdown>
-              <el-dropdown-menu>
-                <el-dropdown-item @click="handleLogout"
-                  >退出登录</el-dropdown-item
-                >
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
+          <el-badge
+            :hidden="messageCount <= 0"
+            :value="messageCount"
+            :max="999"
+            class="badge"
+          >
+            <el-icon size="20"> <Bell /> </el-icon>
+          </el-badge>
+          <span> 消息中心 </span>
         </div>
+        <div class="Split"></div>
+        <span class="avatar">
+          <el-icon size="20"><Avatar /></el-icon
+        ></span>
+        <el-dropdown @visible-change="changeVisible">
+          <span class="username">
+            {{ userInfo.name }}
+            <el-icon size="14">
+              <ArrowUp v-if="isIcon" />
+              <ArrowDown v-else />
+            </el-icon>
+          </span>
+
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item @click="handleLogout"
+                >退出登录</el-dropdown-item
+              >
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
       </div>
     </el-header>
 
@@ -77,6 +91,10 @@ const proxyRef = ref(null);
 const { proxy } = getCurrentInstance();
 const excludeTabs = ["/homePage"];
 
+const isIcon = ref(false);
+const changeVisible = (bool) => {
+  isIcon.value = Boolean(bool);
+};
 // 2. 判断是否包含目标路由的核心方法
 const isExcludeRoute = (path) => {
   return !excludeTabs.includes(path);
@@ -209,14 +227,23 @@ const handleLogout = () => {
 }
 
 /* 选中菜单项样式 */
-.el-menu-item {
+::v-deep .el-menu-item {
+  color: #666;
+  font-size: 14px;
+  background-color: #fff;
+}
+::v-deep .el-sub-menu {
   color: #666;
+  font-size: 14px;
   background-color: #fff;
+  .el-sub-menu__title {
+    height: 100%;
+  }
 }
-.el-menu-item.is-active {
-  background-color: #ecf3fd;
-  color: #3d84ee;
+:deep(.el-menu-item.is-active) {
+  color: #0084ff;
   border-right: 4px solid #3d84ee;
+  background-color: #f1f7ff;
 }
 
 /* 完全去掉系统管理子菜单的背景色 */
@@ -227,15 +254,37 @@ const handleLogout = () => {
 
 .city-header {
   width: 100%;
-  height: 64px;
-  background: #3db8c5 url("@/assets/images/header-bg.png") no-repeat fixed top
-    left / 100% 64px;
+  height: 48px;
+  background-color: #1890ff;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: space-between;
+
+  padding: 0 24px;
+
+  .Split {
+    margin: 4px 10px;
+    width: 1px;
+    height: 16px;
+    opacity: 1;
+    background: #ffffff;
+  }
   .header-left {
-    padding-left: 25px;
+    display: flex;
+    height: 24px;
+    .header_subtitle {
+      font-size: 15px;
+      font-weight: 700;
+      letter-spacing: 0px;
+      line-height: 24px;
+      color: #ffffff;
+      text-align: right;
+      vertical-align: top;
+    }
+    img {
+      height: 24px;
+    }
   }
 }
 
@@ -250,10 +299,18 @@ const handleLogout = () => {
   cursor: pointer;
 }
 
+.avatar {
+  display: flex;
+  margin-right: 4px;
+}
 .username {
-  margin-left: 10px;
+  display: flex;
   color: #fff;
   cursor: pointer;
+  align-items: center;
+  i {
+    margin-left: 8px;
+  }
 }
 
 .city-aside {
@@ -341,23 +398,15 @@ const handleLogout = () => {
 .header-right {
   display: flex;
   align-items: center;
+  .badge {
+    display: flex;
+    margin-right: 6px;
+  }
   .message-wrap {
-    position: relative;
-    margin-right: 10px;
+    display: flex;
+    align-items: center;
     cursor: pointer;
-    .count {
-      position: absolute;
-      top: -5px;
-      right: -5px;
-      min-width: 14px;
-      height: 14px;
-      border-radius: 50%;
-      background-color: red;
-      color: #fff;
-      font-size: 10px;
-      text-align: center;
-      line-height: 14px;
-    }
+    font-size: 14px;
   }
 }
 </style>

src/views/login/index.vue

@@ -35,7 +35,7 @@
             <el-input
               :prefix-icon="User"
               v-model="loginForm.account"
-              placeholder="账号"
+              placeholder="手机号"
               size="large"
             ></el-input>
           </el-form-item>
@@ -87,7 +87,7 @@ const loginForm = ref({
 
 // 表单验证规则
 const loginRules = ref({
-  account: [{ required: true, message: "请输入账号", trigger: "blur" }],
+  account: [{ required: true, message: "请输入手机号", trigger: "blur" }],
   password: [{ required: true, message: "请输入密码", trigger: "blur" }],
 });