feat: 二级导航栏重设计 - 白色底+下划线激活态+outline按钮
① 导航栏加白色背景 + 底部分割线，不再浮空 ② 激活态从荧光绿填充改为品牌绿下划线 (更克制/更专业) ③ 右侧操作区加竖线分隔，视觉层次清晰 ④ 发布按钮从渐变实心改为 outline 样式，视觉权重降级 ⑤ jrsc 补全第4个tab (碳金融市场自身) ⑥ 列表计数颜色增强对比度 #6B8575→#8C9BA5 ⑦ 移动端 nav 高度自适应 (height:auto) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
50e0ca8c2f
commit
70aff92871
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user