样式优化

src/components/home/header.vue

@@ -3,42 +3,90 @@
     class="fixed w-full top-0 z-100 bg-white border-b border-[#f0f2f5] shadow-sm"
   >
     <div
-      class="max-w-[1200px] mx-auto flex items-center justify-between px-10 pr-0 h-20"
+      class="max-w-[1200px] mx-auto flex items-center justify-between px-5 h-15"
     >
       <div class="flex items-center gap-2 cursor-pointer" @click="goHome">
         <img :src="logo" alt="logo" class="w-9 h-9 rounded-md" />
-        <span class="text-[#02409b] text-[20px] font-bold">KERUI DEEPOIL</span>
+        <span class="text-[#02409b] text-[20px] font-bold hidden lg:flex"
+          >KERUI DEEPOIL</span
+        >
         <span class="text-[#828182] text-[14px]">智慧经营平台</span>
       </div>
 
-      <nav class="hidden lg:flex flex-1 mx-4 ml-10 text-sm">
-        <ul class="flex items-center gap-6 text-[#303133] text-lg">
+      <nav class="hidden lg:flex flex-1 mx-4 ml-80 text-sm">
+        <ul class="flex items-center gap-6 text-[#303133] text-md">
+          <!-- 首页 -->
           <li>
             <a
-              class="hover:text-[#02409b] cursor-pointer"
+              class="cursor-pointer px-3 py-1.5 rounded-md transition-all duration-300"
+              :class="
+                router.currentRoute.value.path === '/'
+                  ? 'nav-item-active'
+                  : 'nav-item-default'
+              "
+              style="text-wrap-mode: nowrap"
               @click="router.push('/')"
-              >首页</a
             >
+              首页
+            </a>
           </li>
 
+          <!-- 流程门户 -->
           <li>
-            <a class="hover:text-[#02409b] cursor-pointer" @click="goFlow"
-              >流程门户</a
+            <a
+              style="text-wrap-mode: nowrap"
+              class="cursor-pointer px-3 py-1.5 rounded-md transition-all duration-300"
+              :class="
+                router.currentRoute.value.path.startsWith('/flow')
+                  ? 'nav-item-active'
+                  : 'nav-item-default'
+              "
+              @click="goFlow"
             >
+              流程门户
+            </a>
           </li>
+
+          <!-- 驾驶舱门户 -->
+          <li>
+            <a
+              class="cursor-pointer px-3 py-1.5 rounded-md transition-all duration-300"
+              :class="
+                router.currentRoute.value.path.startsWith('/drive')
+                  ? 'nav-item-active'
+                  : 'nav-item-default'
+              "
+              @click="goDrive"
+              style="text-wrap-mode: nowrap"
+            >
+              驾驶舱门户
+            </a>
+          </li>
+
+          <!-- 报表门户 (假设路径为 /report，请根据实际路由调整) -->
           <li>
-            <a class="hover:text-[#02409b] cursor-pointer" @click="goDrive"
-              >驾驶舱门户</a
+            <a
+              class="cursor-pointer px-3 py-1.5 rounded-md transition-all duration-300"
+              :class="
+                router.currentRoute.value.path.startsWith('/report')
+                  ? 'nav-item-active'
+                  : 'nav-item-default'
+              "
+              style="text-wrap-mode: nowrap"
             >
+              报表门户
+            </a>
           </li>
-          <li><a class="hover:text-[#02409b] cursor-pointer">报表门户</a></li>
         </ul>
       </nav>
 
-      <div class="hidden lg:flex items-center gap-3 h-full">
+      <div
+        style="border-left: 1px solid #a5bbdb"
+        class="hidden lg:flex items-center gap-3 h-[40%] pl-4"
+      >
         <!-- 消息中心 -->
         <el-dropdown trigger="click" placement="bottom-end">
-          <div class="flex items-center gap-2 cursor-pointer pr-6 pt-2">
+          <div class="flex items-center gap-2 cursor-pointer pr-6 pt-1">
             <el-badge
               :value="unreadMessageCount + oaUnreadCount"
               class="item"
@@ -46,13 +94,13 @@
             >
               <Icon
                 icon="mdi:bell"
-                class="w-5 h-5 text-gray-600 hover:text-[#409EFF]"
+                class="w-5 h-5 text-[#507698] hover:text-[#409EFF]"
               />
             </el-badge>
             <Icon
               v-else
               icon="mdi:bell"
-              class="w-5 h-5 text-gray-600 hover:text-[#409EFF]"
+              class="w-5 h-5 text-[#507698] hover:text-[#409EFF]"
             />
           </div>
           <template #dropdown>
@@ -423,23 +471,58 @@
         <ul class="flex flex-col gap-3 text-[#303133]">
           <li>
             <a
-              class="hover:text-[#02409b] cursor-pointer"
-              @click="router.push('/')"
-              >首页</a
+              class="block px-3 py-2 rounded-md transition-all duration-300"
+              :class="
+                router.currentRoute.value.path === '/'
+                  ? 'nav-item-active'
+                  : 'nav-item-default'
+              "
+              @click="
+                router.push('/');
+                drawer = false;
+              "
             >
+              首页
+            </a>
+          </li>
+          <li>
+            <a
+              class="block px-3 py-2 rounded-md transition-all duration-300"
+              :class="
+                router.currentRoute.value.path.startsWith('/flow')
+                  ? 'nav-item-active'
+                  : 'nav-item-default'
+              "
+              @click="goFlow"
+            >
+              流程门户
+            </a>
           </li>
-
           <li>
-            <a class="hover:text-[#02409b] cursor-pointer" @click="goFlow"
-              >流程门户</a
+            <a
+              class="block px-3 py-2 rounded-md transition-all duration-300"
+              :class="
+                router.currentRoute.value.path.startsWith('/drive')
+                  ? 'nav-item-active'
+                  : 'nav-item-default'
+              "
+              @click="goDrive"
             >
+              驾驶舱门户
+            </a>
           </li>
           <li>
-            <a class="hover:text-[#02409b] cursor-pointer" @click="goDrive"
-              >驾驶舱门户</a
+            <a
+              class="block px-3 py-2 rounded-md transition-all duration-300"
+              :class="
+                router.currentRoute.value.path.startsWith('/report')
+                  ? 'nav-item-active'
+                  : 'nav-item-default'
+              "
             >
+              报表门户
+            </a>
           </li>
-          <li><a class="hover:text-[#02409b] cursor-pointer">报表门户</a></li>
         </ul>
         <div class="flex items-center gap-3 mt-3">
           <template v-if="isLoggedIn">
@@ -508,7 +591,7 @@ import { deleteUserCache } from "@hooks/useCache";
 import { manualLogoutKey, reloginCancelKey } from "@/config/axios/service";
 
 // 新增消息中心状态
-const activeTab = ref("messages");
+const activeTab = ref("tasks");
 const messages = ref([]);
 
 const isLoggedIn = computed(
@@ -821,4 +904,34 @@ const onUserCommand = async (command: string) => {
   font-size: 12px;
   color: #c0c4cc;
 }
+
+.nav-item-default {
+  background-color: #eeeeef; /* 浅灰色背景 */
+  color: #5f6f83; /*  Slate 500 灰色文字 */
+  border-radius: 100px;
+}
+
+.nav-item-default:hover {
+  background-color: #e2e8f0; /* 悬停时稍深一点的灰色 */
+  color: #02409b; /* 品牌蓝文字 */
+}
+
+/* 激活状态：深蓝色背景，白色文字 */
+.nav-item-active {
+  background-color: #063e8d !important; /* 指定的深蓝色背景 */
+  color: #ffffff !important; /* 白色文字 */
+  font-weight: 500; /* 稍微加粗 */
+  box-shadow: 0 2px 4px rgba(6, 62, 141, 0.2); /* 可选：轻微阴影 */
+  border-radius: 100px;
+}
+
+/* 确保移动端也生效，因为上面用了 block，可能需要调整一下内边距或显示方式 */
+@media (max-width: 1024px) {
+  .nav-item-active,
+  .nav-item-default {
+    display: block;
+    width: 100%;
+    text-align: left;
+  }
+}
 </style>

src/views/index.vue

@@ -2,7 +2,7 @@
   <div class="portal-home min-h-screen bg-[#eef3f9] text-[#17345f]">
     <Header />
 
-    <main class="mx-auto max-w-[1200px] px-6 pb-8 pt-24">
+    <main class="mx-auto max-w-[1200px] px-6 pb-8 pt-20">
       <section class="hero-banner overflow-hidden rounded-[6px] relative">
         <div class="">
           <!-- 轮播容器 -->
@@ -97,7 +97,7 @@
                     v-if="app.image"
                     :src="app.image"
                     :alt="app.label"
-                    class="h-7 w-7 object-contain"
+                    class="h-7 w-7 object-contain rounded-md"
                   />
                   <Icon
                     v-else
@@ -294,6 +294,7 @@ import zhanlueimage from "@/assets/images/zhanlue.jpg"; // 战略解码
 import safeimage from "@/assets/images/safe.png"; // 安全合规管理
 import zuzhiimage from "@/assets/images/zuzhi.jpg";
 import youimage from "@/assets/images/youcnag.png"; // ai智能体
+import hongpan from "@/assets/images/鸿盘.jpg"; // ai智能体
 
 type PortalApp = {
   label: string;
@@ -363,6 +364,7 @@ const portalSections: PortalSection[] = [
       { label: "组织资产管理", image: zuzhiimage },
       { label: "风控合规管理", image: safeimage },
       { label: "研发需求管理", image: jishuimage2 },
+      { label: "鸿盘", image: hongpan },
     ],
   },
   {
@@ -566,6 +568,14 @@ const handlePortalAppClick = async (app: PortalApp) => {
       router.push({ path: "/login" });
     }
   }
+
+  if (app.label === "鸿盘") {
+    if (userStore.getUser.username && getAccessToken()) {
+      window.open(`https://pan.keruioil.com:52180`, "_blank");
+    } else {
+      router.push({ path: "/login" });
+    }
+  }
 };
 
 async function loginWithDingTalk() {

src/views/login.vue

@@ -21,7 +21,7 @@
         <h1 class="text-2xl font-bold text-center">登录</h1>
 
         <!-- 用户名密码登陆 -->
-        <div>
+        <!-- <div>
           <el-form
             :model="form"
             :rules="rules"
@@ -62,7 +62,7 @@
               >
             </div>
           </div>
-        </div>
+        </div> -->
 
         <!-- 钉钉登陆 -->
         <div class="text-center">