From ca7b1a00132c00b44a077f2681ae29e8b8b9f078 Mon Sep 17 00:00:00 2001
From: liulujian <liulujian@liantu.tech>
Date: Fri, 3 Apr 2026 16:33:58 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=9B=E5=BB=BA=E7=A2=B3=E9=87=91?=
 =?UTF-8?q?=E8=9E=8D=E5=B8=82=E5=9C=BA=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 创建 jrsc.vue 页面，包含左侧筛选栏和右侧金融产品卡片列表
- 实现服务类型筛选（全部、绿色信贷、绿色保险）
- 实现服务企业筛选（全部、9家银行）
- 实现关键词搜索功能
- 实现6个金融产品卡片的Mock数据展示
- 添加 /fwsc/jrsc 路由配置

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 txw-mhzc-web/src/pages/index/router/routes.js |  51 ++
 .../src/pages/index/views/fwsc/jrsc.vue       | 581 ++++++++++++++++++
 2 files changed, 632 insertions(+)
 create mode 100644 txw-mhzc-web/src/pages/index/views/fwsc/jrsc.vue

diff --git a/txw-mhzc-web/src/pages/index/router/routes.js b/txw-mhzc-web/src/pages/index/router/routes.js
index 51568bf..5843f1c 100644
--- a/txw-mhzc-web/src/pages/index/router/routes.js
+++ b/txw-mhzc-web/src/pages/index/router/routes.js
@@ -36,6 +36,21 @@ function gxnlpt() {
 function newsCenter() {
   return import(/* webpackChunkName: "sbfdemo" */ '@/pages/index/views/ggwhglHtgl/index.vue');
 }
+
+//碳服务市场
+function fwsc() {
+  return import(/* webpackChunkName: "sbfdemo" */ '@/pages/index/views/fwsc/fwsc.vue');
+}
+
+//碳金融市场
+function jrsc() {
+  return import(/* webpackChunkName: "sbfdemo" */ '@/pages/index/views/fwsc/jrsc.vue');
+}
+
+//碳需求市场
+function xqsc() {
+  return import(/* webpackChunkName: "fwsc" */ '@/pages/index/views/fwsc/xqsc.vue');
+}
 export default [
   {
     name: 'login',
@@ -136,4 +151,40 @@ export default [
     path: '/hyzt',
     component: hyzt,
   },
+  {
+    name: 'fwsc',
+    path: '/fwsc/fwsc',
+    component: fwsc,
+    meta: {
+      title: '碳服务市场',
+      isShowSideBar: false,
+      hasHome: true,
+      breadCrumbs: [{ title: '首页', to: '/home' }, { title: '服务中心', to: '' }, { title: '碳服务市场', to: '/fwsc/fwsc' }],
+      disableBack: true,
+    },
+  },
+  {
+    name: 'jrsc',
+    path: '/fwsc/jrsc',
+    component: jrsc,
+    meta: {
+      title: '碳金融市场',
+      isShowSideBar: false,
+      hasHome: true,
+      breadCrumbs: [{ title: '首页', to: '/home' }, { title: '服务中心', to: '' }, { title: '碳金融市场', to: '/fwsc/jrsc' }],
+      disableBack: true,
+    },
+  },
+  {
+    name: 'xqsc',
+    path: '/fwsc/xqsc',
+    component: xqsc,
+    meta: {
+      title: '碳需求市场',
+      isShowSideBar: false,
+      hasHome: true,
+      breadCrumbs: [{ title: '首页', to: '/home' }, { title: '服务中心', to: '' }, { title: '碳需求市场', to: '/fwsc/xqsc' }],
+      disableBack: true,
+    },
+  },
 ];
diff --git a/txw-mhzc-web/src/pages/index/views/fwsc/jrsc.vue b/txw-mhzc-web/src/pages/index/views/fwsc/jrsc.vue
new file mode 100644
index 0000000..8c681a2
--- /dev/null
+++ b/txw-mhzc-web/src/pages/index/views/fwsc/jrsc.vue
@@ -0,0 +1,581 @@
+<template>
+  <div class="jrsc-page">
+    <!-- 顶部导航 -->
+    <new-nav />
+
+    <!-- 页面主体 -->
+    <div class="jrsc-main">
+      <!-- 当前位置 -->
+      <div class="current-position">
+        <span>首页</span>
+        <span class="separator">/</span>
+        <span>服务中心</span>
+        <span class="separator">/</span>
+        <span class="current">碳金融市场</span>
+      </div>
+
+      <!-- 内容区域 -->
+      <div class="content-wrapper">
+        <!-- 左侧筛选栏 -->
+        <div class="sidebar">
+          <!-- 服务类型 -->
+          <div class="filter-section">
+            <div class="filter-title">服务类型</div>
+            <div class="filter-options">
+              <span
+                v-for="item in serviceTypes"
+                :key="item.value"
+                :class="['filter-item', { active: selectedServiceType === item.value }]"
+                @click="selectedServiceType = item.value"
+              >
+                {{ item.label }}
+              </span>
+            </div>
+          </div>
+
+          <!-- 服务企业 -->
+          <div class="filter-section">
+            <div class="filter-title">服务企业</div>
+            <div class="filter-options enterprise-options">
+              <span
+                v-for="item in enterprises"
+                :key="item.value"
+                :class="['filter-item', { active: selectedEnterprise === item.value }]"
+                @click="selectedEnterprise = item.value"
+              >
+                {{ item.label }}
+              </span>
+            </div>
+          </div>
+
+          <!-- 关键词搜索 -->
+          <div class="filter-section">
+            <div class="filter-title">关键词搜索</div>
+            <div class="search-box">
+              <input
+                v-model="searchKeyword"
+                type="text"
+                placeholder="请输入关键词"
+                class="search-input"
+              />
+              <button class="search-btn" @click="handleSearch">搜索</button>
+            </div>
+          </div>
+        </div>
+
+        <!-- 右侧金融产品列表 -->
+        <div class="product-list">
+          <div class="product-grid">
+            <div
+              v-for="card in filteredProducts"
+              :key="card.id"
+              class="product-card"
+            >
+              <!-- 卡片头部：机构名称 + Logo -->
+              <div class="card-header">
+                <span class="org-name">{{ card.orgName }}</span>
+                <div class="org-logo">
+                  <img v-if="card.logo" :src="card.logo" :alt="card.orgName" />
+                  <div v-else class="logo-placeholder"></div>
+                </div>
+              </div>
+
+              <!-- 产品名称 -->
+              <div class="product-name">{{ card.productName }}</div>
+
+              <!-- 产品标签 -->
+              <div class="product-tags">
+                <span class="tag">{{ card.tag }}</span>
+              </div>
+
+              <!-- 产品信息：额度、期限、利率 -->
+              <div class="product-info">
+                <div class="info-item">
+                  <div class="info-label">额度</div>
+                  <div class="info-value amount">{{ card.amount }}</div>
+                </div>
+                <div class="info-item">
+                  <div class="info-label">期限</div>
+                  <div class="info-value">{{ card.term }}</div>
+                </div>
+                <div class="info-item">
+                  <div class="info-label">利率</div>
+                  <div class="info-value rate">{{ card.rate }}</div>
+                </div>
+              </div>
+
+              <!-- 操作按钮 -->
+              <div class="card-actions">
+                <button class="btn-primary">立即申请</button>
+                <button class="btn-secondary">查看详情</button>
+              </div>
+            </div>
+          </div>
+
+          <!-- 分页 -->
+          <div class="pagination">
+            <span class="page-item active">1</span>
+            <span class="page-item">2</span>
+            <span class="page-item">3</span>
+            <span class="page-item">4</span>
+            <span class="page-item">5</span>
+            <span class="page-item">下一页</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部 -->
+    <footer-component />
+  </div>
+</template>
+
+<script>
+import NewNav from '@/pages/index/components/new-nav/index.vue';
+import FooterComponent from '@/pages/index/components/footer/index.vue';
+
+export default {
+  name: 'JrscPage',
+  components: {
+    NewNav,
+    FooterComponent,
+  },
+  data() {
+    return {
+      // 选中服务类型
+      selectedServiceType: '全部',
+      // 选中服务企业
+      selectedEnterprise: '全部',
+      // 搜索关键词
+      searchKeyword: '',
+      // 服务类型选项
+      serviceTypes: [
+        { label: '全部', value: '全部' },
+        { label: '绿色信贷', value: '绿色信贷' },
+        { label: '绿色保险', value: '绿色保险' },
+      ],
+      // 服务企业选项
+      enterprises: [
+        { label: '全部', value: '全部' },
+        { label: '中国银行', value: '中国银行' },
+        { label: '工商银行', value: '工商银行' },
+        { label: '农业银行', value: '农业银行' },
+        { label: '建设银行', value: '建设银行' },
+        { label: '招商银行', value: '招商银行' },
+        { label: '中信银行', value: '中信银行' },
+        { label: '北京银行', value: '北京银行' },
+        { label: '兴业银行', value: '兴业银行' },
+        { label: '邮政储蓄银行', value: '邮政储蓄银行' },
+      ],
+      // 金融产品列表
+      products: [
+        {
+          id: 1,
+          orgName: '中国邮政储蓄银行',
+          productName: '云南昭通信贷业务',
+          tag: '绿色项目贷款',
+          amount: '¥ 50,000.00',
+          term: '1-3年',
+          rate: '3.6%~4.2%',
+          logo: '',
+        },
+        {
+          id: 2,
+          orgName: '中国建设银行',
+          productName: '低碳企业帮扶贷款',
+          tag: '低碳企业贷款',
+          amount: '¥ 50,000.00',
+          term: '1-3年',
+          rate: '3.6%~4.2%',
+          logo: '',
+        },
+        {
+          id: 3,
+          orgName: '中国邮政储蓄银行',
+          productName: '云南昭通信贷业务',
+          tag: '绿色项目贷款',
+          amount: '¥ 50,000.00',
+          term: '1-3年',
+          rate: '3.6%~4.2%',
+          logo: '',
+        },
+        {
+          id: 4,
+          orgName: '中国建设银行',
+          productName: '低碳企业帮扶贷款',
+          tag: '低碳企业贷款',
+          amount: '¥ 50,000.00',
+          term: '1-3年',
+          rate: '3.6%~4.2%',
+          logo: '',
+        },
+        {
+          id: 5,
+          orgName: '中国邮政储蓄银行',
+          productName: '云南昭通信贷业务',
+          tag: '绿色项目贷款',
+          amount: '¥ 50,000.00',
+          term: '1-3年',
+          rate: '3.6%~4.2%',
+          logo: '',
+        },
+        {
+          id: 6,
+          orgName: '中国建设银行',
+          productName: '低碳企业帮扶贷款',
+          tag: '低碳企业贷款',
+          amount: '¥ 50,000.00',
+          term: '1-3年',
+          rate: '3.6%~4.2%',
+          logo: '',
+        },
+      ],
+    };
+  },
+  computed: {
+    // 根据筛选条件过滤产品
+    filteredProducts() {
+      let result = this.products;
+
+      if (this.selectedServiceType !== '全部') {
+        result = result.filter((p) => p.tag.includes(this.selectedServiceType));
+      }
+
+      if (this.selectedEnterprise !== '全部') {
+        result = result.filter((p) => p.orgName.includes(this.selectedEnterprise));
+      }
+
+      if (this.searchKeyword) {
+        const keyword = this.searchKeyword.toLowerCase();
+        result = result.filter(
+          (p) =>
+            p.productName.toLowerCase().includes(keyword) ||
+            p.orgName.toLowerCase().includes(keyword) ||
+            p.tag.toLowerCase().includes(keyword)
+        );
+      }
+
+      return result;
+    },
+  },
+  methods: {
+    handleSearch() {
+      // 搜索功能已通过计算属性实现，这里可添加额外逻辑
+      console.log('搜索关键词:', this.searchKeyword);
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.jrsc-page {
+  min-height: 100vh;
+  background-color: #f5f7fa;
+}
+
+.jrsc-main {
+  max-width: 1400px;
+  padding-top: 84px;
+  margin: 0 auto;
+}
+
+// 当前位置
+.current-position {
+  padding: 20px 0;
+  font-size: 14px;
+  color: #666;
+
+  .separator {
+    margin: 0 8px;
+    color: #ccc;
+  }
+
+  .current {
+    color: #009a29;
+  }
+}
+
+// 内容区域
+.content-wrapper {
+  display: flex;
+  gap: 20px;
+}
+
+// 左侧筛选栏
+.sidebar {
+  position: sticky;
+  top: 104px;
+  width: 220px;
+  height: fit-content;
+  padding: 20px;
+  background: #fff;
+  border-radius: 8px;
+  flex-shrink: 0;
+}
+
+.filter-section {
+  margin-bottom: 24px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.filter-title {
+  margin-bottom: 12px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.filter-options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+
+  .filter-item {
+    padding: 6px 12px;
+    font-size: 14px;
+    color: #666;
+    cursor: pointer;
+    background: #f5f7fa;
+    border-radius: 4px;
+    transition: all 0.3s;
+
+    &:hover {
+      color: #009a29;
+      background: #e8f5e9;
+    }
+
+    &.active {
+      color: #fff;
+      background: #009a29;
+    }
+  }
+}
+
+.enterprise-options {
+  flex-direction: column;
+  gap: 6px;
+
+  .filter-item {
+    padding: 8px 12px;
+    text-align: left;
+  }
+}
+
+// 搜索框
+.search-box {
+  display: flex;
+  gap: 8px;
+}
+
+.search-input {
+  flex: 1;
+  padding: 8px 12px;
+  font-size: 14px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  outline: none;
+
+  &:focus {
+    border-color: #009a29;
+  }
+}
+
+.search-btn {
+  padding: 8px 16px;
+  font-size: 14px;
+  color: #fff;
+  cursor: pointer;
+  background: #009a29;
+  border: none;
+  border-radius: 4px;
+  transition: background 0.3s;
+
+  &:hover {
+    background: #007a20;
+  }
+}
+
+// 右侧金融产品列表
+.product-list {
+  flex: 1;
+}
+
+.product-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20px;
+}
+
+// 产品卡片
+.product-card {
+  padding: 20px;
+  background: #fff;
+  border-radius: 8px;
+  transition: transform 0.3s, box-shadow 0.3s;
+
+  &:hover {
+    transform: scale(1.02);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  }
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.org-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.org-logo {
+  width: 48px;
+  height: 48px;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  .logo-placeholder {
+    width: 100%;
+    height: 100%;
+    background: #f0f0f0;
+    border-radius: 4px;
+  }
+}
+
+.product-name {
+  margin-bottom: 12px;
+  font-size: 18px;
+  font-weight: 500;
+  color: #1a1a1a;
+}
+
+.product-tags {
+  margin-bottom: 16px;
+
+  .tag {
+    display: inline-block;
+    padding: 4px 12px;
+    font-size: 12px;
+    color: #009a29;
+    background: #e8f5e9;
+    border-radius: 4px;
+  }
+}
+
+.product-info {
+  display: flex;
+  padding: 16px 0;
+  margin-bottom: 16px;
+  border-top: 1px solid #eee;
+  border-bottom: 1px solid #eee;
+  justify-content: space-between;
+}
+
+.info-item {
+  text-align: center;
+  flex: 1;
+}
+
+.info-label {
+  margin-bottom: 8px;
+  font-size: 13px;
+  color: #999;
+}
+
+.info-value {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+
+  &.amount {
+    color: #d25f00;
+  }
+
+  &.rate {
+    color: #00b42a;
+  }
+}
+
+.card-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.btn-primary {
+  padding: 10px 0;
+  font-size: 14px;
+  font-weight: 500;
+  color: #fff;
+  cursor: pointer;
+  background: #009a29;
+  border: none;
+  border-radius: 4px;
+  transition: background 0.3s;
+  flex: 1;
+
+  &:hover {
+    background: #007a20;
+  }
+}
+
+.btn-secondary {
+  padding: 10px 0;
+  font-size: 14px;
+  font-weight: 500;
+  color: #666;
+  cursor: pointer;
+  background: #f5f7fa;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  transition: all 0.3s;
+  flex: 1;
+
+  &:hover {
+    color: #009a29;
+    background: #e8f5e9;
+    border-color: #009a29;
+  }
+}
+
+// 分页
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  margin-top: 30px;
+}
+
+.page-item {
+  padding: 8px 14px;
+  font-size: 14px;
+  color: #666;
+  cursor: pointer;
+  background: #fff;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  transition: all 0.3s;
+
+  &:hover {
+    color: #009a29;
+    border-color: #009a29;
+  }
+
+  &.active {
+    color: #fff;
+    background: #009a29;
+    border-color: #009a29;
+  }
+}
+</style>
\ No newline at end of file