From d7a798ecfdf438e8ffae9d49818965b8538f065e Mon Sep 17 00:00:00 2001 From: zheng020 Date: Thu, 30 Apr 2026 06:07:48 +0800 Subject: [PATCH] =?UTF-8?q?style:=20=E4=BF=AE=E6=94=B9=E6=9C=8D=E5=8A=A1?= =?UTF-8?q?=E4=B8=AD=E5=BF=83=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/index/views/fwsc/jrsc.vue | 64 ++-- .../src/pages/index/views/fwsc/sjsc.vue | 282 +++++++++++------- 2 files changed, 220 insertions(+), 126 deletions(-) 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 e8e33a6..e5b1238 100644 --- a/txw-mhzc-web/src/pages/index/views/fwsc/jrsc.vue +++ b/txw-mhzc-web/src/pages/index/views/fwsc/jrsc.vue @@ -16,7 +16,10 @@ {{ tab.label }} - +
+ 共 {{ total }} 条产品 + +
@@ -83,9 +86,6 @@ 💹 碳金融市场 -
- 共 {{ total }} 条产品 -
@@ -642,8 +642,7 @@ export default { // 二级菜单 .secondary-nav { - background: @bg-white; - border-bottom: 1px solid #eee; + border-bottom: none; } .secondary-nav-content { @@ -651,49 +650,68 @@ export default { align-items: center; justify-content: space-between; max-width: 1400px; - padding: 0 20px; + padding: 20px 20px 0; margin: 0 auto; } .nav-tabs { display: flex; - gap: 8px; + gap: 40px; + width: 596px; + height: 42px; +} + +.nav-right { + display: flex; + align-items: center; + gap: 20px; } .nav-tab { - padding: 12px 20px; - font-size: 14px; - color: @text-light; + position: relative; + min-width: max-content; + height: 42px; + padding: 8px 16px; + font-size: 18px; + font-weight: 500; + color: #003B1A; cursor: pointer; background: transparent; - border: none; - border-bottom: 2px solid transparent; + border-radius: 32px; transition: all 0.3s; &:hover { - color: @primary-color; + color: #009a29; } &.active { - color: @primary-color; - border-bottom-color: @primary-color; + background: #8CFFCE; + box-shadow: inset 0 0 0 1px #00B96B; } } .publish-btn { - padding: 8px 20px; - font-size: 14px; + width: 220px; + height: 42px; + line-height: 26px; + padding: 8px 16px; + font-size: 18px; + font-weight: 400; color: #fff; cursor: pointer; - background: linear-gradient(135deg, @primary-color 0%, @primary-light 100%); + background: linear-gradient(135deg, #009a29 0%, #48C666 100%); border: none; - border-radius: 4px; - box-shadow: 0 2px 8px rgba(0, 154, 41, 0.3); - transition: all 0.3s; + border-radius: 6px; + box-shadow: 0 4px 12px rgba(0, 154, 41, 0.25); + transition: all 0.3s ease; &:hover { transform: translateY(-2px); - box-shadow: 0 4px 12px rgba(0, 154, 41, 0.4); + box-shadow: 0 6px 16px rgba(0, 154, 41, 0.35); + } + + &:active { + transform: translateY(0); } } 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 7eebac3..61843cf 100644 --- a/txw-mhzc-web/src/pages/index/views/fwsc/sjsc.vue +++ b/txw-mhzc-web/src/pages/index/views/fwsc/sjsc.vue @@ -16,7 +16,7 @@ {{ tab.label }} - + @@ -46,34 +46,46 @@ -
-
+
+
-

{{ card.name }}

-
- - {{ tag }} - +
+
+
+
{{ card.name }}
+
+
+
+ + {{ tag }} + +
+
+
-

{{ card.description }}

+
+

{{ card.description }}

+
- - {{ card.price }} - - - 查看数据库 - +
+ + {{ card.price }} + +
+
+ 查看数据库 +
@@ -196,16 +208,16 @@ export default { // 页面主体 .page-body { display: flex; + gap: 20px; + align-items: stretch; max-width: 1400px; padding: 20px; margin: 0 auto; - gap: 20px; } // 二级菜单 .secondary-nav { - background: #fff; - border-bottom: 1px solid #eee; + border-bottom: none; } .secondary-nav-content { @@ -213,60 +225,53 @@ export default { align-items: center; justify-content: space-between; max-width: 1400px; - padding: 0 20px; + padding: 20px 20px 0; margin: 0 auto; } .nav-tabs { display: flex; - gap: 8px; + gap: 40px; + width: 596px; + height: 42px; +} + +.nav-right { + display: flex; + align-items: center; + gap: 20px; } .nav-tab { position: relative; - padding: 12px 20px; - font-size: 14px; - color: #666; + min-width: max-content; + height: 42px; + padding: 8px 16px; + font-size: 18px; + font-weight: 500; + color: #003B1A; cursor: pointer; background: transparent; - border: none; - border-bottom: 2px solid transparent; + border-radius: 32px; transition: all 0.3s; - &::after { - position: absolute; - bottom: 0; - left: 50%; - width: 0; - height: 2px; - background: linear-gradient(90deg, #009a29, #48C666); - border-radius: 1px; - content: ''; - transform: translateX(-50%); - transition: all 0.3s ease; - } - &:hover { color: #009a29; - - &::after { - width: 60%; - } } &.active { - color: #009a29; - - &::after { - width: 100%; - } + background: #8CFFCE; + box-shadow: inset 0 0 0 1px #00B96B; } } .publish-btn { - padding: 8px 24px; - font-size: 14px; - font-weight: 500; + width: 220px; + height: 42px; + line-height: 26px; + padding: 8px 16px; + font-size: 18px; + font-weight: 400; color: #fff; cursor: pointer; background: linear-gradient(135deg, #009a29 0%, #48C666 100%); @@ -285,10 +290,22 @@ export default { } } +.nav-right { + display: flex; + align-items: center; + gap: 20px; +} + +.list-count { + font-size: 14px; + font-weight: 400; + color: #6B8575; +} + // 左侧筛选栏 .sidebar { position: sticky; - top: 104px; + // top: 104px; width: 220px; height: fit-content; min-width: 220px; @@ -412,62 +429,82 @@ export default { } } -// 右侧内容区 -.content-area { +// 右侧卡片列表 +.card-list { flex: 1; min-width: 0; } -// 数据库卡片网格 -.card-grid { +// 服务卡片网格 +.service-grid { display: grid; grid-template-columns: repeat(2, 1fr); - gap: 20px; + gap: 24px; } -.database-card { +.service-card { position: relative; display: flex; flex-direction: column; - padding: 24px; + overflow: hidden; background: #fff; border-radius: 12px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); transition: all 0.3s ease; - &::before { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 3px; - background: linear-gradient(90deg, #009a29, #48C666); - content: ''; - transform: scaleX(0); - transform-origin: left; - transition: transform 0.3s ease; - } - - &:hover { - transform: translateY(-4px); - box-shadow: 0 8px 24px rgba(0, 154, 41, 0.15); - - &::before { - transform: scaleX(1); - } + &.highlight-card { + animation: highlight-pulse 3s ease-out; } } .card-header { - margin-bottom: 12px; + position: relative; + padding: 16px; + height: 70px; + + &::after { + position: absolute; + right: 16px; + bottom: -6px; + left: 16px; + height: 1px; + background: #E8F0EC; + content: ''; + } } -.card-title { - margin-bottom: 12px; - font-size: 18px; - font-weight: 600; - line-height: 1.4; - color: #1a1a1a; +.card-title-box { + display: flex; + justify-content: space-between; +} + +.card-title-text { + flex: 1; + min-width: 0; +} + +.card-title-row { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 8px; +} + +.card-title-main { + flex: 1; + overflow: hidden; + font-size: 16px; + font-weight: 500; + line-height: 24px; + color: #003B1A; + text-overflow: ellipsis; + white-space: nowrap; +} + +.card-title-sub { + display: flex; + gap: 12px; + justify-content: space-between; } .card-tags { @@ -477,10 +514,11 @@ export default { } .tag { - display: inline-block; - padding: 4px 10px; - font-size: 12px; - font-weight: 500; + padding: 2px 8px; + font-size: 13px; + font-weight: 400; + color: #00B96B; + background: #EEFAE2; border-radius: 4px; } @@ -504,34 +542,72 @@ export default { background: #fff3e0; } +.card-content { + padding: 16px; +} + .card-desc { - margin-bottom: 20px; + display: block; + height: 70px; + overflow: hidden; font-size: 14px; line-height: 1.6; color: #666; - flex: 1; + text-overflow: ellipsis; + -webkit-line-clamp: 3; } .card-footer { + position: relative; display: flex; align-items: center; justify-content: space-between; + padding: 14px 16px; + height: 64px; + + &::before { + position: absolute; + top: 0; + right: 16px; + left: 16px; + height: 1px; + background: #E8F0EC; + content: ''; + } } -.price-tag { - padding: 4px 12px; - font-size: 14px; - font-weight: 600; +.card-price-info { + display: flex; + align-items: baseline; +} + +.card-actions { + display: flex; + height: 32px; + padding: 6px 12px; border-radius: 4px; + border: 1px solid #00b96b; + color: #00b96b; + font-size: 14px; + font-weight: 400; + + &:hover { + background: rgba(0, 154, 41, 0.1); + cursor: pointer; + } +} + +.price-value { + font-size: 20px; + font-weight: 600; + color: #FF4D4F; &.free { color: #2e7d32; - background: #e8f5e9; } &.paid { color: #e65100; - background: #fff3e0; } }