From acf582fc9b0579f404ba6bd999e936ae52c93d93 Mon Sep 17 00:00:00 2001
From: Claude <claude@local>
Date: Thu, 25 Jun 2026 17:21:08 +0800
Subject: [PATCH] =?UTF-8?q?style:=20PortalLayout=20=E9=BB=91=E9=87=91?=
 =?UTF-8?q?=E6=94=B9=E5=9B=BD=E8=81=98=E7=BA=A2=E7=99=BD=E5=BA=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude <noreply@anthropic.com>
---
 offer_frontend/src/layouts/PortalLayout.vue | 73 +++++++++++----------
 1 file changed, 37 insertions(+), 36 deletions(-)

diff --git a/offer_frontend/src/layouts/PortalLayout.vue b/offer_frontend/src/layouts/PortalLayout.vue
index 3d5ea1c..a3797e0 100644
--- a/offer_frontend/src/layouts/PortalLayout.vue
+++ b/offer_frontend/src/layouts/PortalLayout.vue
@@ -95,11 +95,11 @@ const logout = () => { auth.logout(); router.push('/') }
 
 <style scoped>
 :root {
-  --c-red: #D4D4D4;
-  --c-dark: #0E1E3D;
-  --c-gold: #C8973A;
-  --c-cream: #F8F4EF;
-  --c-border: #E2D9D0;
+  --c-red: var(--brand-red);
+  --c-dark: var(--brand-red-2);
+  --c-gold: var(--brand-red);
+  --c-cream: var(--bg-page);
+  --c-border: var(--border);
 }
 
 * { box-sizing: border-box; margin: 0; padding: 0; }
@@ -124,8 +124,8 @@ a { text-decoration: none; }
 
 /* 顶部公告条 */
 .top-bar {
-  background: #1A1A1A;
-  color: rgba(255,255,255,0.75);
+  background: #F2F3F5;
+  color: var(--text-muted);
   font-size: 12px;
   letter-spacing: 0.05em;
 }
@@ -139,19 +139,19 @@ a { text-decoration: none; }
 }
 .top-bar-left::before {
   content: '★';
-  color: #C8973A;
+  color: var(--brand-red);
   margin-right: 6px;
   font-size: 10px;
 }
 .top-bar-right { display: flex; align-items: center; gap: 6px; }
-.top-link { color: rgba(255,255,255,0.65); transition: color 0.2s; }
-.top-link:hover, .clickable:hover { color: #C8973A; cursor: pointer; }
-.top-divider { color: rgba(255,255,255,0.25); }
+.top-link { color: var(--text-muted); transition: color 0.2s; }
+.top-link:hover, .clickable:hover { color: var(--brand-red); cursor: pointer; }
+.top-divider { color: #C9CDD4; }
 
 /* 主导航 */
 .main-header {
-  background: linear-gradient(180deg, #1A1A1A 0%, #0F0F0F 100%);
-  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+  background: #FFFFFF;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
 }
 .header-inner {
   max-width: 1280px;
@@ -174,28 +174,29 @@ a { text-decoration: none; }
 .emblem-ring {
   width: 48px; height: 48px;
   border-radius: 50%;
-  border: 2px solid #C8973A;
-  background: linear-gradient(135deg, rgba(200,151,58,0.15), rgba(200,151,58,0.05));
+  border: 2px solid var(--brand-red);
+  background: linear-gradient(135deg, rgba(200,22,29,0.12), rgba(200,22,29,0.04));
   display: flex; align-items: center; justify-content: center;
-  box-shadow: 0 0 16px rgba(200,151,58,0.3), inset 0 0 8px rgba(200,151,58,0.1);
+  box-shadow: 0 0 16px rgba(200,22,29,0.25), inset 0 0 8px rgba(200,22,29,0.08);
 }
 .emblem-char {
   font-size: 20px;
   font-weight: 900;
-  color: #C8973A;
+  color: var(--brand-red);
   letter-spacing: -1px;
 }
 .logo-text-block { display: flex; flex-direction: column; }
 .logo-title {
   font-size: 20px;
   font-weight: 800;
-  color: #FFFFFF;
+  color: var(--text-main);
   letter-spacing: 0.15em;
   line-height: 1.2;
 }
 .logo-sub {
   font-size: 9px;
-  color: rgba(200,151,58,0.7);
+  color: var(--brand-red);
+  opacity: 0.75;
   letter-spacing: 0.2em;
   margin-top: 2px;
 }
@@ -210,7 +211,7 @@ a { text-decoration: none; }
 .nav-link {
   position: relative;
   padding: 8px 20px;
-  color: rgba(255,255,255,0.75);
+  color: var(--text-muted);
   font-size: 14px;
   letter-spacing: 0.08em;
   transition: color 0.2s;
@@ -221,21 +222,21 @@ a { text-decoration: none; }
   position: absolute;
   bottom: 4px; left: 50%; right: 50%;
   height: 2px;
-  background: #C8973A;
+  background: var(--brand-red);
   border-radius: 1px;
   transition: left 0.25s ease, right 0.25s ease;
 }
-.nav-link:hover { color: #fff; }
+.nav-link:hover { color: var(--brand-red); }
 .nav-link:hover::after, .nav-link.active::after { left: 20%; right: 20%; }
-.nav-link.active { color: #C8973A; font-weight: 600; }
+.nav-link.active { color: var(--brand-red); font-weight: 600; }
 
 /* 操作区 */
 .header-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
 .btn-ghost {
   padding: 7px 20px;
   background: transparent;
-  border: 1px solid rgba(255,255,255,0.35);
-  color: rgba(255,255,255,0.85);
+  border: 1px solid var(--border);
+  color: var(--text-main);
   border-radius: 3px;
   font-size: 13px;
   cursor: pointer;
@@ -243,7 +244,7 @@ a { text-decoration: none; }
   transition: all 0.2s;
   font-family: inherit;
 }
-.btn-ghost:hover { border-color: #C8973A; color: #C8973A; }
+.btn-ghost:hover { border-color: var(--brand-red); color: var(--brand-red); }
 .btn-primary {
   padding: 7px 20px;
   background: #FFFFFF;
@@ -261,24 +262,24 @@ a { text-decoration: none; }
 .user-badge {
   display: flex; align-items: center; gap: 8px;
   padding: 6px 14px;
-  background: rgba(255,255,255,0.08);
-  border: 1px solid rgba(255,255,255,0.15);
+  background: var(--brand-red-bg);
+  border: 1px solid var(--border);
   border-radius: 24px;
 }
 .user-avatar {
   width: 26px; height: 26px;
-  background: #D4D4D4;
+  background: var(--brand-red);
   border-radius: 50%;
   display: flex; align-items: center; justify-content: center;
   font-size: 12px; font-weight: 700; color: #fff;
 }
-.user-name { color: rgba(255,255,255,0.85); font-size: 13px; }
+.user-name { color: var(--text-main); font-size: 13px; }
 
 /* 底线装饰 */
-.header-underline { height: 3px; background: #0F0F0F; }
+.header-underline { height: 3px; background: #FFFFFF; }
 .underline-fill {
   height: 100%;
-  background: linear-gradient(90deg, #C8973A 0%, #D4AF37 100%);
+  background: var(--brand-red);
 }
 
 /* 内容区 — top-bar(~28px) + header(72px) + underline(3px) = ~103px */
@@ -299,8 +300,8 @@ a { text-decoration: none; }
 
 /* 页脚 */
 .portal-footer {
-  background: #1A1A1A;
-  border-top: 3px solid #C8973A;
+  background: #1D2129;
+  border-top: 3px solid var(--brand-red);
   padding: 20px 0;
 }
 .footer-inner {
@@ -318,8 +319,8 @@ a { text-decoration: none; }
 }
 .f-emblem {
   width: 28px; height: 28px; border-radius: 50%;
-  border: 1px solid #C8973A;
-  color: #C8973A; font-weight: 900; font-size: 13px;
+  border: 1px solid var(--brand-red);
+  color: var(--brand-red); font-weight: 900; font-size: 13px;
   display: flex; align-items: center; justify-content: center;
 }
 .footer-copy {