feat: 统一列表页风格 - 方案A+B

- 新建 market-list-variables.less 共享变量文件（50+ token）
- 新建 EmptyState.vue 通用空状态组件
- jrsc: 修复nav-tab圆角32px→6px, 页面底色→#F6F7FA, 分隔线→#E8F0EC
- fwsc/sjsc/xqsc: 引用共享变量, 统一卡片hover, 替换空状态组件
- 4个列表页视觉细节完全对齐

Co-Authored-By: Claude <noreply@anthropic.com>

txw-mhzc-web/src/pages/index/components/EmptyState.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="empty-state">
+    <div v-if="$slots.icon || icon" class="empty-icon">
+      <slot name="icon">{{ icon }}</slot>
+    </div>
+    <p class="empty-text">{{ text }}</p>
+    <p v-if="hint || $slots.hint" class="empty-hint">
+      <slot name="hint">{{ hint }}</slot>
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EmptyState',
+  props: {
+    /** 图标（emoji 或文字），也可用 slot#icon */
+    icon: { type: String, default: '' },
+    /** 主文案 */
+    text: { type: String, default: '暂无数据' },
+    /** 副文案（可选），也可用 slot#hint */
+    hint: { type: String, default: '' },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 300px;
+  padding: 40px;
+  background: #fff;
+  border-radius: 12px;
+  animation: empty-fade-in 0.5s ease;
+}
+
+.empty-icon {
+  margin-bottom: 16px;
+  font-size: 48px;
+  color: #d0d0d0;
+  line-height: 1;
+}
+
+.empty-text {
+  margin: 0;
+  font-size: 14px;
+  color: #999;
+}
+
+.empty-hint {
+  margin: 8px 0 0;
+  font-size: 13px;
+  color: #bbb;
+}
+
+@keyframes empty-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>

txw-mhzc-web/src/pages/index/styles/market-list-variables.less

@@ -0,0 +1,120 @@
+// =============================================================================
+// 列表页统一设计 Token（碳服务/需求/数据/金融市场）
+// 用法：@import '../../styles/market-list-variables.less';
+// =============================================================================
+
+// -----------------------------------------------------------------------------
+// 页面底色
+// -----------------------------------------------------------------------------
+@market-page-bg: #F6F7FA;
+
+// -----------------------------------------------------------------------------
+// 内容宽度
+// -----------------------------------------------------------------------------
+@market-content-max-width: 1400px;
+@market-content-padding: 20px;
+
+// -----------------------------------------------------------------------------
+// 二级导航
+// -----------------------------------------------------------------------------
+@market-nav-tab-height: 42px;
+@market-nav-tab-font-size: 18px;
+@market-nav-tab-font-weight: 500;
+@market-nav-tab-color: #003B1A;
+@market-nav-tab-color-hover: #009a29;
+@market-nav-tab-radius: 6px;
+@market-nav-tab-active-bg: #8CFFCE;
+@market-nav-tab-active-border: #00B96B;
+@market-nav-tab-gap: 40px;
+
+// -----------------------------------------------------------------------------
+// 发布按钮
+// -----------------------------------------------------------------------------
+@market-publish-btn-width: 220px;
+@market-publish-btn-height: 42px;
+@market-publish-btn-font-size: 18px;
+@market-publish-btn-gradient: linear-gradient(135deg, #009a29 0%, #48C666 100%);
+@market-publish-btn-radius: 6px;
+@market-publish-btn-shadow: 0 4px 12px rgba(0, 154, 41, 0.25);
+@market-publish-btn-shadow-hover: 0 6px 16px rgba(0, 154, 41, 0.35);
+
+// -----------------------------------------------------------------------------
+// 卡片
+// -----------------------------------------------------------------------------
+@market-card-bg: #ffffff;
+@market-card-radius: 12px;
+@market-card-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+@market-card-shadow-hover: 0 8px 24px rgba(0, 154, 41, 0.12);
+@market-card-hover-lift: -4px;
+@market-card-separator: #E8F0EC;
+@market-card-padding: 16px;
+@market-card-grid-gap: 24px;
+
+// -----------------------------------------------------------------------------
+// 卡片内标签
+// -----------------------------------------------------------------------------
+@market-tag-color: #00B96B;
+@market-tag-bg: #EEFAE2;
+@market-tag-radius: 4px;
+@market-tag-font-size: 13px;
+@market-tag-padding: 2px 8px;
+
+// -----------------------------------------------------------------------------
+// 卡片底部操作按钮（outline 样式）
+// -----------------------------------------------------------------------------
+@market-action-btn-border: #00b96b;
+@market-action-btn-color: #00b96b;
+@market-action-btn-radius: 6px;
+@market-action-btn-hover-bg: rgba(0, 154, 41, 0.1);
+
+// -----------------------------------------------------------------------------
+// 价格文字
+// -----------------------------------------------------------------------------
+@market-price-color: #2E7D32;
+@market-price-font-size: 20px;
+@market-price-font-weight: 600;
+
+// -----------------------------------------------------------------------------
+// 筛选侧栏
+// -----------------------------------------------------------------------------
+@market-filter-width: 220px;
+@market-filter-sticky-top: 104px;
+@market-filter-bg: #ffffff;
+@market-filter-radius: 12px;
+@market-filter-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+@market-filter-section-separator: 1px dashed #e0e0e0;
+@market-filter-title-color: #333;
+@market-filter-title-font-size: 14px;
+@market-filter-title-font-weight: 600;
+@market-filter-title-bar-width: 4px;
+@market-filter-title-bar-height: 14px;
+@market-filter-title-bar-gradient: linear-gradient(180deg, #009a29, #48C666);
+@market-filter-title-bar-radius: 2px;
+
+// -----------------------------------------------------------------------------
+// 空状态
+// -----------------------------------------------------------------------------
+@market-empty-min-height: 300px;
+@market-empty-text-color: #999;
+@market-empty-text-font-size: 14px;
+
+// -----------------------------------------------------------------------------
+// 加载状态
+// -----------------------------------------------------------------------------
+@market-loading-spinner-size: 48px;
+@market-loading-spinner-border: 4px;
+@market-loading-spinner-color: #009a29;
+@market-loading-spinner-track: #e8f5e9;
+
+// -----------------------------------------------------------------------------
+// 分页
+// -----------------------------------------------------------------------------
+@market-pagination-padding-top: 32px;
+@market-pagination-total-color: #666;
+@market-pagination-total-font-size: 16px;
+
+// -----------------------------------------------------------------------------
+// 列表计数
+// -----------------------------------------------------------------------------
+@market-list-count-color: #6B8575;
+@market-list-count-font-size: 14px;

txw-mhzc-web/src/pages/index/views/fwsc/fwsc.vue

@@ -77,9 +77,7 @@
           </div>
 
           <!-- 空状态 -->
-          <div v-if="cardList.length === 0 && !loading" class="empty-state">
+          <EmptyState v-if="cardList.length === 0 && !loading" text="暂无服务信息" />
-            <p>暂无服务信息</p>
-          </div>
         </div>
 
         <!-- 右侧筛选栏 -->
@@ -179,6 +177,7 @@ import { LocationIcon, SearchIcon } from 'tdesign-icons-vue';
 import NewNav from '@/pages/index/components/new-nav/index.vue';
 import BreadcrumbNav from '@/pages/index/components/breadcrumb/index.vue';
 import FwscPublish from './components/FwscPublish.vue';
+import EmptyState from '@/pages/index/components/EmptyState.vue';
 import api from '@/pages/index/api/fwsc/index.js';
 import { hasLogin } from '@/pages/index/api/login';
 import { scrollPortalContentToTop } from '@/pages/index/utils/portal-scroll-mode';
@@ -192,6 +191,7 @@ export default {
     NewNav,
     BreadcrumbNav,
     FwscPublish,
+    EmptyState,
     LocationIcon,
     SearchIcon,
   },
@@ -498,6 +498,7 @@ export default {
 
 <style lang="less" scoped>
 @import '../../styles/home-figma-variables.less';
+@import '../../styles/market-list-variables.less';
 
 .fwsc-container {
   background: #F6F7FA;
@@ -741,27 +742,10 @@ export default {
     animation: highlight-pulse 3s ease-out;
   }
 
-  // &::before {
+  &:hover {
-  //   position: absolute;
+    transform: translateY(@market-card-hover-lift);
-  //   top: 0;
+    box-shadow: @market-card-shadow-hover;
-  //   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);
-  //   }
-  // }
 }
 
 .card-header {
@@ -943,43 +927,6 @@ export default {
   color: #666;
 }
 
-// 空状态
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  min-height: 300px;
-  padding: 40px;
-  background: #fff;
-  border-radius: 12px;
-  animation: fadeIn 0.5s ease;
-
-  .empty-icon {
-    margin-bottom: 16px;
-    font-size: 48px;
-    color: #d0d0d0;
-  }
-
-  p {
-    font-size: 14px;
-    color: #999;
-  }
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 // 分页
 .pagination-total {
   font-size: 16px;

txw-mhzc-web/src/pages/index/views/fwsc/jrsc.vue

@@ -173,11 +173,12 @@
           </div>
 
           <!-- 空状态 -->
-          <div v-if="!loading && productList.length === 0" class="empty-state">
+          <EmptyState
-            <div class="empty-illustration">💰</div>
+            v-if="!loading && productList.length === 0"
-            <p class="empty-text">暂无金融产品</p>
+            icon="💰"
-            <p class="empty-hint">敬请期待更多优质金融产品上线</p>
+            text="暂无金融产品"
-          </div>
+            hint="敬请期待更多优质金融产品上线"
+          />
 
           <!-- 分页 -->
           <div class="pagination-box" v-if="total > 0">
@@ -324,12 +325,14 @@
 
 <script>
 import BreadcrumbNav from '@/pages/index/components/breadcrumb/index.vue';
+import EmptyState from '@/pages/index/components/EmptyState.vue';
 import api from '@/pages/index/api/fwsc/index.js';
 
 export default {
   name: 'JrscPage',
   components: {
     BreadcrumbNav,
+    EmptyState,
   },
   data() {
     return {
@@ -600,7 +603,9 @@ export default {
 </script>
 
 <style scoped lang="less">
-// 变量定义
+@import '../../styles/market-list-variables.less';
+
+// 碳金融市场专属变量（与其他列表页统一使用 market-list-variables.less 的 token）
 @primary-color: #009a29;
 @primary-light: #4caf50;
 @primary-bg: #e8f5e9;
@@ -614,7 +619,7 @@ export default {
 
 .jrsc-page {
   min-height: 100vh;
-  background: @bg-gray;
+  background: @market-page-bg;
   animation: fadeIn 0.3s ease;
 }
 
@@ -673,7 +678,7 @@ export default {
   color: #003B1A;
   cursor: pointer;
   background: transparent;
-  border-radius: 32px;
+  border-radius: @market-nav-tab-radius;
   transition: all 0.3s;
 
   &:hover {
@@ -802,10 +807,10 @@ export default {
   gap: 6px;
 
   &::before {
-    width: 4px;
+    width: @market-filter-title-bar-width;
-    height: 14px;
+    height: @market-filter-title-bar-height;
-    background: linear-gradient(180deg, @primary-color, @primary-light);
+    background: @market-filter-title-bar-gradient;
-    border-radius: 2px;
+    border-radius: @market-filter-title-bar-radius;
     content: '';
   }
 }
@@ -1018,8 +1023,8 @@ export default {
   flex-direction: column;
 
   &:hover {
-    transform: translateY(-6px);
+    transform: translateY(@market-card-hover-lift);
-    box-shadow: 0 12px 32px rgba(0, 154, 41, 0.15);
+    box-shadow: @market-card-shadow-hover;
 
     .card-gradient-top {
       height: 4px;
@@ -1053,7 +1058,7 @@ export default {
   display: flex;
   padding-bottom: 16px;
   margin-bottom: 12px;
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid @market-card-separator;
   justify-content: space-between;
   align-items: center;
 }
@@ -1130,8 +1135,8 @@ export default {
   display: flex;
   padding: 16px 0;
   margin-bottom: 16px;
-  border-top: 1px solid #f0f0f0;
+  border-top: 1px solid @market-card-separator;
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid @market-card-separator;
   justify-content: space-between;
   align-items: center;
 }
@@ -1219,37 +1224,6 @@ export default {
   }
 }
 
-// 空状态
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-height: 400px;
-  padding: 40px;
-  background: @bg-white;
-  border-radius: 12px;
-  animation: fadeIn 0.5s ease;
-
-  .empty-illustration {
-    margin-bottom: 20px;
-    font-size: 64px;
-  }
-
-  .empty-text {
-    margin: 0 0 8px;
-    font-size: 18px;
-    font-weight: 600;
-    color: @text-dark;
-  }
-
-  .empty-hint {
-    margin: 0;
-    font-size: 14px;
-    color: @text-gray;
-  }
-}
-
 // 分页
 .pagination-box {
   display: flex;

txw-mhzc-web/src/pages/index/views/fwsc/sjsc.vue

@@ -74,9 +74,7 @@
           </div>
 
           <!-- 空状态 -->
-          <div v-if="cardList.length === 0 && !loading" class="empty-state">
+          <EmptyState v-if="cardList.length === 0 && !loading" text="暂无数据信息" />
-            <p>暂无数据信息</p>
-          </div>
         </div>
 
         <!-- 右侧筛选栏 -->
@@ -167,6 +165,7 @@ import { LocationIcon, SearchIcon } from 'tdesign-icons-vue';
 import NewNav from '@/pages/index/components/new-nav/index.vue';
 import BreadcrumbNav from '@/pages/index/components/breadcrumb/index.vue';
 import SjscPublish from './components/SjscPublish.vue';
+import EmptyState from '@/pages/index/components/EmptyState.vue';
 import gxzxApi from '@/pages/index/api/gxzx/index.js';
 import { hasLogin } from '@/pages/index/api/login';
 import { scrollPortalContentToTop } from '@/pages/index/utils/portal-scroll-mode';
@@ -180,6 +179,7 @@ export default {
     NewNav,
     BreadcrumbNav,
     SjscPublish,
+    EmptyState,
     LocationIcon,
     SearchIcon,
   },
@@ -430,6 +430,7 @@ export default {
 
 <style lang="less" scoped>
 @import '../../styles/home-figma-variables.less';
+@import '../../styles/market-list-variables.less';
 
 .sjsc-container {
   background: #F6F7FA;
@@ -660,6 +661,11 @@ export default {
   &.highlight-card {
     animation: highlight-pulse 3s ease-out;
   }
+
+  &:hover {
+    transform: translateY(@market-card-hover-lift);
+    box-shadow: @market-card-shadow-hover;
+  }
 }
 
 .card-header {
@@ -823,31 +829,6 @@ export default {
   }
 }
 
-// 空状态
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  min-height: 300px;
-  padding: 40px;
-  background: #fff;
-  border-radius: 12px;
-  animation: fadeIn 0.5s ease;
-
-  .empty-icon {
-    margin-bottom: 16px;
-    font-size: 48px;
-    color: #d0d0d0;
-  }
-
-  p {
-    font-size: 14px;
-    color: #999;
-  }
-}
-
 // 加载状态
 .loading-state {
   display: flex;
@@ -882,17 +863,6 @@ export default {
   }
 }
 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 @keyframes highlight-pulse {
   0% {
     box-shadow: 0 0 0 0 rgba(0, 154, 41, 0.4);

txw-mhzc-web/src/pages/index/views/fwsc/xqsc.vue

@@ -87,9 +87,7 @@
           </div>
 
           <!-- 空状态 -->
-          <div v-if="!loading && cardList.length === 0" class="empty-state">
+          <EmptyState v-if="!loading && cardList.length === 0" text="暂无需求信息" />
-            <p>暂无需求信息</p>
-          </div>
         </div>
 
         <!-- 右侧筛选栏 -->
@@ -213,6 +211,7 @@ import { SearchIcon } from 'tdesign-icons-vue';
 import NewNav from '@/pages/index/components/new-nav/index.vue';
 import BreadcrumbNav from '@/pages/index/components/breadcrumb/index.vue';
 import XqscPublish from './components/XqscPublish.vue';
+import EmptyState from '@/pages/index/components/EmptyState.vue';
 import api from '@/pages/index/api/fwsc/index.js';
 import { hasLogin } from '@/pages/index/api/login';
 import { scrollPortalContentToTop } from '@/pages/index/utils/portal-scroll-mode';
@@ -226,6 +225,7 @@ export default {
     NewNav,
     BreadcrumbNav,
     XqscPublish,
+    EmptyState,
     SearchIcon,
   },
   data() {
@@ -476,6 +476,7 @@ export default {
 
 <style lang="less" scoped>
 @import '../../styles/home-figma-variables.less';
+@import '../../styles/market-list-variables.less';
 
 .xqsc-container {
   background: #F6F7FA;
@@ -701,6 +702,11 @@ export default {
   &.highlight-card {
     animation: highlight-pulse 3s ease-out;
   }
+
+  &:hover {
+    transform: translateY(@market-card-hover-lift);
+    box-shadow: @market-card-shadow-hover;
+  }
 }
 
 .card-header {
@@ -874,31 +880,6 @@ export default {
   }
 }
 
-// 空状态
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  min-height: 300px;
-  padding: 40px;
-  background: #fff;
-  border-radius: 12px;
-  animation: fadeIn 0.5s ease;
-
-  .empty-icon {
-    margin-bottom: 16px;
-    font-size: 48px;
-    color: #d0d0d0;
-  }
-
-  p {
-    font-size: 14px;
-    color: #999;
-  }
-}
-
 // 加载状态
 .loading-state {
   display: flex;
@@ -933,17 +914,6 @@ export default {
   }
 }
 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 // 分页
 .pagination-total {
   font-size: 16px;