From 70aff9287149c446fc9e45dc3408e403e3253f12 Mon Sep 17 00:00:00 2001
From: liulujian <liulujian@liantu.tech>
Date: Sat, 4 Jul 2026 22:30:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BA=8C=E7=BA=A7=E5=AF=BC=E8=88=AA?=
 =?UTF-8?q?=E6=A0=8F=E9=87=8D=E8=AE=BE=E8=AE=A1=20-=20=E7=99=BD=E8=89=B2?=
 =?UTF-8?q?=E5=BA=95+=E4=B8=8B=E5=88=92=E7=BA=BF=E6=BF=80=E6=B4=BB?=
 =?UTF-8?q?=E6=80=81+outline=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

① 导航栏加白色背景 + 底部分割线，不再浮空
② 激活态从荧光绿填充改为品牌绿下划线 (更克制/更专业)
③ 右侧操作区加竖线分隔，视觉层次清晰
④ 发布按钮从渐变实心改为 outline 样式，视觉权重降级
⑤ jrsc 补全第4个tab (碳金融市场自身)
⑥ 列表计数颜色增强对比度 #6B8575→#8C9BA5
⑦ 移动端 nav 高度自适应 (height:auto)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../index/styles/market-list-variables.less   | 14 +++-
 .../src/pages/index/views/fwsc/fwsc.vue       | 74 ++++++++++--------
 .../src/pages/index/views/fwsc/jrsc.vue       | 75 +++++++++++--------
 .../src/pages/index/views/fwsc/sjsc.vue       | 73 ++++++++++--------
 .../src/pages/index/views/fwsc/xqsc.vue       | 74 ++++++++++--------
 5 files changed, 182 insertions(+), 128 deletions(-)

diff --git a/txw-mhzc-web/src/pages/index/styles/market-list-variables.less b/txw-mhzc-web/src/pages/index/styles/market-list-variables.less
index c0809e6..10805b8 100644
--- a/txw-mhzc-web/src/pages/index/styles/market-list-variables.less
+++ b/txw-mhzc-web/src/pages/index/styles/market-list-variables.less
@@ -199,8 +199,20 @@
   }
 }
 
+// -----------------------------------------------------------------------------
+// 二级导航栏
+// -----------------------------------------------------------------------------
+@market-nav-bg: #ffffff;
+@market-nav-border: #e8edeb;
+@market-nav-tab-color: #556659;
+@market-nav-tab-active-color: #003B1A;
+@market-nav-tab-active-border: #00B96B;
+@market-nav-divider: #e8edeb;
+@market-publish-btn-outline-color: #00B96B;
+@market-publish-btn-outline-hover-bg: rgba(0, 185, 107, 0.06);
+
 // -----------------------------------------------------------------------------
 // 列表计数
 // -----------------------------------------------------------------------------
-@market-list-count-color: #6B8575;
+@market-list-count-color: #8C9BA5;
 @market-list-count-font-size: 14px;
diff --git a/txw-mhzc-web/src/pages/index/views/fwsc/fwsc.vue b/txw-mhzc-web/src/pages/index/views/fwsc/fwsc.vue
index a9fca90..61d5dd8 100644
--- a/txw-mhzc-web/src/pages/index/views/fwsc/fwsc.vue
+++ b/txw-mhzc-web/src/pages/index/views/fwsc/fwsc.vue
@@ -543,7 +543,8 @@ export default {
 
 // 二级菜单
 .secondary-nav {
-  border-bottom: none;
+  background: @market-nav-bg;
+  border-bottom: 1px solid @market-nav-border;
 }
 
 .secondary-nav-content {
@@ -551,70 +552,77 @@ export default {
   align-items: center;
   justify-content: space-between;
   max-width: 1400px;
-  padding: 20px 20px 0;
+  padding: 0 20px;
   margin: 0 auto;
+  height: 56px;
 }
 
 .nav-tabs {
   display: flex;
-  gap: 40px;
-  width: 596px;
-  height: 42px;
+  gap: 36px;
+  height: 100%;
   .market-nav-tabs-scroll-fade();
 }
 
 .nav-right {
   display: flex;
   align-items: center;
-  gap: 20px;
+  gap: 16px;
+  flex-shrink: 0;
+  height: 100%;
+  padding-left: 20px;
+  border-left: 1px solid @market-nav-divider;
 }
 
 .nav-tab {
   position: relative;
-  min-width: max-content;
-  height: 42px;
-  padding: 8px 16px;
-  font-size: 18px;
+  display: inline-flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 4px;
+  font-size: 15px;
   font-weight: 500;
-  color: #003B1A;
+  color: @market-nav-tab-color;
   cursor: pointer;
   background: transparent;
-  /* 优化需求：按钮线框统一为长方形+圆角（不再使用 32px 胶囊） */
-  border-radius: 6px;
-  transition: all 0.3s;
+  border: none;
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
+  margin-bottom: -1px;
+  transition: color 0.2s ease, border-color 0.2s ease;
 
   &:hover {
-    color: #009a29;
+    color: @market-nav-tab-active-color;
   }
 
   &.active {
-    background: #8CFFCE;
-    box-shadow: inset 0 0 0 1px #00B96B;
+    color: @market-nav-tab-active-color;
+    font-weight: 600;
+    border-bottom-color: @market-nav-tab-active-border;
+    background: transparent;
+    box-shadow: none;
   }
 }
 
 .publish-btn {
-  width: 220px;
-  height: 42px;
-  line-height: 26px;
-  padding: 8px 16px;
-  font-size: 18px;
-  font-weight: 400;
-  color: #fff;
+  height: 34px;
+  padding: 0 16px;
+  font-size: 14px;
+  font-weight: 500;
+  color: @market-publish-btn-outline-color;
   cursor: pointer;
-  background: linear-gradient(135deg, #009a29 0%, #48C666 100%);
-  border: none;
+  background: transparent;
+  border: 1px solid @market-publish-btn-outline-color;
   border-radius: 6px;
-  box-shadow: 0 4px 12px rgba(0, 154, 41, 0.25);
-  transition: all 0.3s ease;
+  white-space: nowrap;
+  transition: all 0.2s ease;
 
   &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 16px rgba(0, 154, 41, 0.35);
+    background: @market-publish-btn-outline-hover-bg;
   }
 
   &:active {
-    transform: translateY(0);
+    transform: scale(0.97);
   }
 }
 
@@ -749,7 +757,7 @@ export default {
 .list-count {
   font-size: 14px;
   font-weight: 400;
-  color: #6B8575;
+  color: @market-list-count-color;
 }
 
 .service-grid {
@@ -1037,6 +1045,7 @@ export default {
   .secondary-nav-content {
     flex-direction: column;
     align-items: stretch;
+    height: auto;
     padding: 12px 16px;
     gap: 12px;
   }
@@ -1289,6 +1298,7 @@ export default {
   }
 
   .secondary-nav-content {
+    height: auto;
     padding: 8px 12px;
   }
 
diff --git a/txw-mhzc-web/src/pages/index/views/fwsc/jrsc.vue b/txw-mhzc-web/src/pages/index/views/fwsc/jrsc.vue
index ea12dd5..5d1939f 100644
--- a/txw-mhzc-web/src/pages/index/views/fwsc/jrsc.vue
+++ b/txw-mhzc-web/src/pages/index/views/fwsc/jrsc.vue
@@ -366,7 +366,7 @@ export default {
       navTabs: [
         { label: '碳服务市场', path: '/tfwsc' },
         { label: '碳需求市场', path: '/txqsc' },
-        // { label: '碳金融市场', path: '/tjrsc' },
+        { label: '碳金融市场', path: '/tjrsc' },
         { label: '碳数据市场', path: '/tsjsc' },
       ],
       // 产品类型选项
@@ -679,7 +679,8 @@ export default {
 
 // 二级菜单
 .secondary-nav {
-  border-bottom: none;
+  background: @market-nav-bg;
+  border-bottom: 1px solid @market-nav-border;
 }
 
 .secondary-nav-content {
@@ -687,69 +688,77 @@ export default {
   align-items: center;
   justify-content: space-between;
   max-width: 1400px;
-  padding: 20px 20px 0;
+  padding: 0 20px;
   margin: 0 auto;
+  height: 56px;
 }
 
 .nav-tabs {
   display: flex;
-  gap: 40px;
-  width: 596px;
-  height: 42px;
+  gap: 36px;
+  height: 100%;
   .market-nav-tabs-scroll-fade();
 }
 
 .nav-right {
   display: flex;
   align-items: center;
-  gap: 20px;
+  gap: 16px;
+  flex-shrink: 0;
+  height: 100%;
+  padding-left: 20px;
+  border-left: 1px solid @market-nav-divider;
 }
 
 .nav-tab {
   position: relative;
-  min-width: max-content;
-  height: 42px;
-  padding: 8px 16px;
-  font-size: 18px;
+  display: inline-flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 4px;
+  font-size: 15px;
   font-weight: 500;
-  color: #003B1A;
+  color: @market-nav-tab-color;
   cursor: pointer;
   background: transparent;
-  border-radius: @market-nav-tab-radius;
-  transition: all 0.3s;
+  border: none;
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
+  margin-bottom: -1px;
+  transition: color 0.2s ease, border-color 0.2s ease;
 
   &:hover {
-    color: #009a29;
+    color: @market-nav-tab-active-color;
   }
 
   &.active {
-    background: #8CFFCE;
-    box-shadow: inset 0 0 0 1px #00B96B;
+    color: @market-nav-tab-active-color;
+    font-weight: 600;
+    border-bottom-color: @market-nav-tab-active-border;
+    background: transparent;
+    box-shadow: none;
   }
 }
 
 .publish-btn {
-  width: 220px;
-  height: 42px;
-  line-height: 26px;
-  padding: 8px 16px;
-  font-size: 18px;
-  font-weight: 400;
-  color: #fff;
+  height: 34px;
+  padding: 0 16px;
+  font-size: 14px;
+  font-weight: 500;
+  color: @market-publish-btn-outline-color;
   cursor: pointer;
-  background: linear-gradient(135deg, #009a29 0%, #48C666 100%);
-  border: none;
+  background: transparent;
+  border: 1px solid @market-publish-btn-outline-color;
   border-radius: 6px;
-  box-shadow: 0 4px 12px rgba(0, 154, 41, 0.25);
-  transition: all 0.3s ease;
+  white-space: nowrap;
+  transition: all 0.2s ease;
 
   &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 16px rgba(0, 154, 41, 0.35);
+    background: @market-publish-btn-outline-hover-bg;
   }
 
   &:active {
-    transform: translateY(0);
+    transform: scale(0.97);
   }
 }
 
@@ -1028,7 +1037,7 @@ export default {
   align-items: center;
   gap: 8px;
   font-size: 14px;
-  color: @text-gray;
+  color: @market-list-count-color;
 
   .count-dot {
     width: 8px;
@@ -1464,6 +1473,7 @@ export default {
 
   .secondary-nav-content {
     flex-direction: column;
+    height: auto;
     padding: 12px 16px;
     gap: 12px;
   }
@@ -1548,6 +1558,7 @@ export default {
   }
 
   .secondary-nav-content {
+    height: auto;
     padding: 8px 12px;
   }
 
diff --git a/txw-mhzc-web/src/pages/index/views/fwsc/sjsc.vue b/txw-mhzc-web/src/pages/index/views/fwsc/sjsc.vue
index 2967b6a..2421618 100644
--- a/txw-mhzc-web/src/pages/index/views/fwsc/sjsc.vue
+++ b/txw-mhzc-web/src/pages/index/views/fwsc/sjsc.vue
@@ -471,7 +471,8 @@ export default {
 
 // 二级菜单
 .secondary-nav {
-  border-bottom: none;
+  background: @market-nav-bg;
+  border-bottom: 1px solid @market-nav-border;
 }
 
 .secondary-nav-content {
@@ -479,69 +480,77 @@ export default {
   align-items: center;
   justify-content: space-between;
   max-width: 1400px;
-  padding: 20px 20px 0;
+  padding: 0 20px;
   margin: 0 auto;
+  height: 56px;
 }
 
 .nav-tabs {
   display: flex;
-  gap: 40px;
-  width: 596px;
-  height: 42px;
+  gap: 36px;
+  height: 100%;
   .market-nav-tabs-scroll-fade();
 }
 
 .nav-right {
   display: flex;
   align-items: center;
-  gap: 20px;
+  gap: 16px;
+  flex-shrink: 0;
+  height: 100%;
+  padding-left: 20px;
+  border-left: 1px solid @market-nav-divider;
 }
 
 .nav-tab {
   position: relative;
-  min-width: max-content;
-  height: 42px;
-  padding: 8px 16px;
-  font-size: 18px;
+  display: inline-flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 4px;
+  font-size: 15px;
   font-weight: 500;
-  color: #003B1A;
+  color: @market-nav-tab-color;
   cursor: pointer;
   background: transparent;
-  border-radius: 6px;
-  transition: all 0.3s;
+  border: none;
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
+  margin-bottom: -1px;
+  transition: color 0.2s ease, border-color 0.2s ease;
 
   &:hover {
-    color: #009a29;
+    color: @market-nav-tab-active-color;
   }
 
   &.active {
-    background: #8CFFCE;
-    box-shadow: inset 0 0 0 1px #00B96B;
+    color: @market-nav-tab-active-color;
+    font-weight: 600;
+    border-bottom-color: @market-nav-tab-active-border;
+    background: transparent;
+    box-shadow: none;
   }
 }
 
 .publish-btn {
-  width: 220px;
-  height: 42px;
-  line-height: 26px;
-  padding: 8px 16px;
-  font-size: 18px;
-  font-weight: 400;
-  color: #fff;
+  height: 34px;
+  padding: 0 16px;
+  font-size: 14px;
+  font-weight: 500;
+  color: @market-publish-btn-outline-color;
   cursor: pointer;
-  background: linear-gradient(135deg, #009a29 0%, #48C666 100%);
-  border: none;
+  background: transparent;
+  border: 1px solid @market-publish-btn-outline-color;
   border-radius: 6px;
-  box-shadow: 0 4px 12px rgba(0, 154, 41, 0.25);
-  transition: all 0.3s ease;
+  white-space: nowrap;
+  transition: all 0.2s ease;
 
   &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 16px rgba(0, 154, 41, 0.35);
+    background: @market-publish-btn-outline-hover-bg;
   }
 
   &:active {
-    transform: translateY(0);
+    transform: scale(0.97);
   }
 }
 
@@ -664,7 +673,7 @@ export default {
 .list-count {
   font-size: 14px;
   font-weight: 400;
-  color: #6B8575;
+  color: @market-list-count-color;
 }
 
 // 服务卡片网格
@@ -977,6 +986,7 @@ export default {
   .secondary-nav-content {
     flex-direction: column;
     align-items: stretch;
+    height: auto;
     padding: 12px 16px;
     gap: 12px;
     box-sizing: border-box;
@@ -1124,6 +1134,7 @@ export default {
   }
 
   .secondary-nav-content {
+    height: auto;
     padding: 8px 12px;
   }
 
diff --git a/txw-mhzc-web/src/pages/index/views/fwsc/xqsc.vue b/txw-mhzc-web/src/pages/index/views/fwsc/xqsc.vue
index 4fa22d5..dfe9651 100644
--- a/txw-mhzc-web/src/pages/index/views/fwsc/xqsc.vue
+++ b/txw-mhzc-web/src/pages/index/views/fwsc/xqsc.vue
@@ -517,7 +517,8 @@ export default {
 
 // 二级菜单
 .secondary-nav {
-  border-bottom: none;
+  background: @market-nav-bg;
+  border-bottom: 1px solid @market-nav-border;
 }
 
 .secondary-nav-content {
@@ -525,70 +526,77 @@ export default {
   align-items: center;
   justify-content: space-between;
   max-width: 1400px;
-  padding: 20px 20px 0;
+  padding: 0 20px;
   margin: 0 auto;
+  height: 56px;
 }
 
 .nav-tabs {
   display: flex;
-  gap: 40px;
-  width: 596px;
-  height: 42px;
+  gap: 36px;
+  height: 100%;
   .market-nav-tabs-scroll-fade();
 }
 
 .nav-right {
   display: flex;
   align-items: center;
-  gap: 20px;
+  gap: 16px;
+  flex-shrink: 0;
+  height: 100%;
+  padding-left: 20px;
+  border-left: 1px solid @market-nav-divider;
 }
 
 .nav-tab {
   position: relative;
-  min-width: max-content;
-  height: 42px;
-  padding: 8px 16px;
-  font-size: 18px;
+  display: inline-flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 4px;
+  font-size: 15px;
   font-weight: 500;
-  color: #003B1A;
+  color: @market-nav-tab-color;
   cursor: pointer;
   background: transparent;
-  /* 优化需求：按钮线框统一为长方形+圆角（不再使用 32px 胶囊） */
-  border-radius: 6px;
-  transition: all 0.3s;
+  border: none;
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
+  margin-bottom: -1px;
+  transition: color 0.2s ease, border-color 0.2s ease;
 
   &:hover {
-    color: #009a29;
+    color: @market-nav-tab-active-color;
   }
 
   &.active {
-    background: #8CFFCE;
-    box-shadow: inset 0 0 0 1px #00B96B;
+    color: @market-nav-tab-active-color;
+    font-weight: 600;
+    border-bottom-color: @market-nav-tab-active-border;
+    background: transparent;
+    box-shadow: none;
   }
 }
 
 .publish-btn {
-  width: 220px;
-  height: 42px;
-  line-height: 26px;
-  padding: 8px 16px;
-  font-size: 18px;
-  font-weight: 400;
-  color: #fff;
+  height: 34px;
+  padding: 0 16px;
+  font-size: 14px;
+  font-weight: 500;
+  color: @market-publish-btn-outline-color;
   cursor: pointer;
-  background: linear-gradient(135deg, #009a29 0%, #48C666 100%);
-  border: none;
+  background: transparent;
+  border: 1px solid @market-publish-btn-outline-color;
   border-radius: 6px;
-  box-shadow: 0 4px 12px rgba(0, 154, 41, 0.25);
-  transition: all 0.3s ease;
+  white-space: nowrap;
+  transition: all 0.2s ease;
 
   &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 16px rgba(0, 154, 41, 0.35);
+    background: @market-publish-btn-outline-hover-bg;
   }
 
   &:active {
-    transform: translateY(0);
+    transform: scale(0.97);
   }
 }
 
@@ -706,7 +714,7 @@ export default {
 .list-count {
   font-size: 14px;
   font-weight: 400;
-  color: #6B8575;
+  color: @market-list-count-color;
 }
 
 .service-grid {
@@ -1019,6 +1027,7 @@ export default {
   .secondary-nav-content {
     flex-direction: column;
     align-items: stretch;
+    height: auto;
     padding: 12px 16px;
     gap: 12px;
   }
@@ -1265,6 +1274,7 @@ export default {
   }
 
   .secondary-nav-content {
+    height: auto;
     padding: 8px 12px;
   }