From 25ee16640e9d43c0e3433fab54b4d688be4cc0f6 Mon Sep 17 00:00:00 2001
From: liulujian <liulujian@liantu.tech>
Date: Sun, 5 Apr 2026 13:55:40 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=91=E8=9E=8D=E5=B8=82=E5=9C=BA?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E8=B0=83=E6=95=B4=E3=80=81=E5=AF=BC=E8=88=AA?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E3=80=81footer=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/index/api/fwsc/index.js         |   29 +
 .../pages/index/components/footer/index.vue   |  289 +++-
 .../src/pages/index/components/nav/index2.vue |   58 +-
 .../src/pages/index/views/fwsc/jrsc.vue       | 1452 +++++++++++++----
 4 files changed, 1380 insertions(+), 448 deletions(-)

diff --git a/txw-mhzc-web/src/pages/index/api/fwsc/index.js b/txw-mhzc-web/src/pages/index/api/fwsc/index.js
index 0d8bdf0..7c64e64 100644
--- a/txw-mhzc-web/src/pages/index/api/fwsc/index.js
+++ b/txw-mhzc-web/src/pages/index/api/fwsc/index.js
@@ -80,4 +80,33 @@ export default {
       data: JSON.stringify(params),
     });
   },
+
+  // 获取银行-保险机构列表（type: 'xd'=信贷, 'bx'=保险）
+  queryJgList(type) {
+    return fetchSso({
+      url: `${basurl}/gxzx/lsjr/queryJgList`,
+      method: 'post',
+      loading: true,
+      data: JSON.stringify({ type }),
+    });
+  },
+
+  // 获取信贷、保险产品列表
+  queryXdbxcpList(params = {}) {
+    return fetchSso({
+      url: `${basurl}/gxzx/lsjr/queryXdbxcpList`,
+      method: 'post',
+      loading: true,
+      data: JSON.stringify({ type: 'xd', cpmc: '', pageNum: 1, pageSize: 9, ...params }),
+    });
+  },
+
+  // 获取信贷、保险产品详情
+  queryXdbxcpxq(cpid) {
+    return fetchSso({
+      url: `${basurl}/gxzx/lsjr/queryXdbxcpxq?cpid=${cpid}`,
+      method: 'get',
+      loading: true,
+    });
+  },
 };
diff --git a/txw-mhzc-web/src/pages/index/components/footer/index.vue b/txw-mhzc-web/src/pages/index/components/footer/index.vue
index 5444379..e80109f 100644
--- a/txw-mhzc-web/src/pages/index/components/footer/index.vue
+++ b/txw-mhzc-web/src/pages/index/components/footer/index.vue
@@ -1,68 +1,65 @@
 <template>
-  <footer class="bg-dark text-white" style="padding-top: 34px">
-    <div class="container mx-auto px-4">
-      <div class="footer-box">
-        <div class="footer-box-1">
-          <div class="font-semibold flex items-center btjs-title btjs-title-18">
-             <logo :size="30" />平台介绍
-          </div>
-          <p class="btjs-text text-gray-400">
-            {{ APP_INTRODUCTION1 }}
-          </p>
-        </div>
-        <div>
-          <div class="btjs-title font-semibold">联系方式</div>
-          <div class="text-gray-400 btjs-text space-y-2">
-            <div class="flex items-center mb-8px">
-              <!-- <i class="fa fa-phone mr-2 text-secondary"></i> -->
-              {{ contact.mobile }}
-            </div>
-            <div class="flex items-center mb-8px">
-              <!-- <i class="fa fa-envelope mr-2 text-secondary"></i> -->
-              {{ contact.email }}
-            </div>
-            <div class="flex items-center mb-8px">
-              <!-- <i class="fa fa-map-marker mr-2 text-secondary"></i> -->
-              {{ contact.address }}
-            </div>
+  <footer class="bg-dark text-white">
+    <div class="footer-container">
+      <!-- 上部信息区 -->
+      <div class="footer-top">
+        <!-- 指导单位 -->
+        <div class="footer-column">
+          <div class="footer-title">指导单位</div>
+          <div class="footer-links">
+            <div class="footer-link-item">上海市数据局</div>
+            <div class="footer-link-item">宝山区政府</div>
           </div>
         </div>
-        <div>
-          <div class="btjs-title font-semibold">备案信息</div>
-          <div class="text-gray-400">
-            <div class="mb-8px" v-for="(item, index) in icpList" :key="index">
-              <a v-if="item.herf" :href="item.herf" class="btjs-text" target="_blank">
-                {{ item.title }}
-              </a>
-              <span class="btjs-text" v-else>{{ item.title }}</span>
-            </div>
+
+        <!-- 主办单位 -->
+        <div class="footer-column">
+          <div class="footer-title">主办单位</div>
+          <div class="footer-links">
+            <div class="footer-link-item">宝山区数据局</div>
+            <div class="footer-link-item">宝山区发改委</div>
           </div>
         </div>
-                <div>
-          <div class="btjs-title font-semibold">业务支持</div>
-          <div class="text-gray-400">
-            <div class="mb-8px" v-for="(item, index) in zddwList" :key="index">
-              <a v-if="item.herf" :href="item.herf" class="btjs-text" target="_blank">
-                {{ item.title }}
-              </a>
-              <span class="btjs-text" v-else>{{ item.title }}</span>
-            </div>
+
+        <!-- 运营单位 -->
+        <div class="footer-column">
+          <div class="footer-title">运营单位</div>
+          <div class="footer-links">
+            <div class="footer-link-item">上海浦江数链数字科技有限公司</div>
           </div>
         </div>
-        <div>
-          <div class="btjs-title font-semibold">帮助中心</div>
-          <div class="text-gray-400">
-            <div class="mb-8px" v-for="(item, index) in helpCenterLinks" :key="index">
-              <a v-if="item.herf" :href="item.herf" class="btjs-text" target="_blank">
-                {{ item.title }}
-              </a>
-              <span class="btjs-text" v-else>{{ item.title }}</span>
+
+        <!-- 业务支持 -->
+        <div class="footer-column">
+          <div class="footer-title">业务支持</div>
+          <div class="footer-links">
+            <div class="footer-link-item">上海数字基础设施协会可信碳专委会</div>
+          </div>
+        </div>
+
+        <!-- 联系方式 -->
+        <div class="footer-column contact-column">
+          <div class="footer-title">联系我们</div>
+          <div class="footer-links contact-info">
+            <div class="contact-item">
+              <span class="contact-icon">📧</span>
+              <span>{{ contact.email }}</span>
+            </div>
+            <div class="contact-item">
+              <span class="contact-icon">📍</span>
+              <span>{{ contact.address }}</span>
             </div>
           </div>
         </div>
       </div>
-      <div class="text-gray-400 footer-bottom">
-        <p>{{ copyright }}</p>
+
+      <!-- 分隔线 -->
+      <div class="footer-divider"></div>
+
+      <!-- 下部版权信息 -->
+      <div class="footer-bottom">
+        <p class="copyright">{{ copyright }}</p>
+        <p class="infrastructure">基础设施：国家区块链网络基础底座（上海枢纽）</p>
       </div>
     </div>
   </footer>
@@ -70,58 +67,180 @@
 
 <script>
 import { mapState } from 'vuex';
-import Logo from '@/pages/index/components/logo/index.vue';
 
 export default {
-  name: 'footer',
-  components: {Logo},
+  name: 'Footer',
   data() {
     return {};
   },
   computed: {
-    ...mapState('settings', ['APP_NAME', 'APP_INTRODUCTION1', 'contact', 'icpList', 'helpCenterLinks', 'copyright','zddwList']),
+    ...mapState('settings', ['APP_NAME', 'contact', 'copyright']),
   },
 };
 </script>
+
 <style lang="less" scoped>
-.footer-box {
+.footer-container {
+  max-width: 1400px;
+  padding: 40px 20px 20px;
+  margin: 0 auto;
+}
+
+.footer-top {
   display: flex;
+  flex-wrap: wrap;
   justify-content: space-between;
-  padding-bottom: 10px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-  .footer-box-1 {
-    width: 250px;
+  gap: 30px;
+}
+
+.footer-column {
+  max-width: 280px;
+  min-width: 150px;
+  flex: 1;
+}
+
+.footer-title {
+  position: relative;
+  padding-left: 12px;
+  margin-bottom: 16px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #fff;
+
+  &::before {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 4px;
+    height: 16px;
+    background: linear-gradient(180deg, #4caf50, #2e7d32);
+    border-radius: 2px;
+    content: '';
+    transform: translateY(-50%);
   }
 }
-.btjs-text {
+
+.footer-links {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.footer-link-item {
   font-size: 14px;
-  font-weight: 400;
-  line-height: 24px;
-  letter-spacing: 0;
-  // color: #fff;
-  text-align: justify;
+  color: rgba(255, 255, 255, 0.7);
+  transition: color 0.3s;
+
+  &:hover {
+    color: #4caf50;
+  }
 }
-.btjs-title {
-  margin-bottom: 12px;
+
+.contact-column {
+  flex: 1.2;
+}
+
+.contact-info {
+  gap: 12px;
+}
+
+.contact-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
   font-size: 14px;
-  font-weight: 600;
-  line-height: 24px;
-  letter-spacing: 0;
+  color: rgba(255, 255, 255, 0.7);
 }
-.btjs-title-18 {
-  font-size: 18px;
+
+.contact-icon {
+  flex-shrink: 0;
+  font-size: 14px;
 }
-.mb-8px {
-  margin-top: 0;
-  margin-bottom: 8px;
+
+.footer-divider {
+  height: 1px;
+  margin: 30px 0 20px;
+  background: rgba(255, 255, 255, 0.15);
 }
+
 .footer-bottom {
-  padding: 20px 0;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 18px;
-  // color: #FFFFFF;
-  letter-spacing: 0;
   text-align: center;
 }
+
+.copyright {
+  margin: 0 0 8px;
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.infrastructure {
+  margin: 0;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.4);
+}
+
+// 移动端适配
+@media (max-width: 1024px) {
+  .footer-top {
+    gap: 24px;
+  }
+
+  .footer-column {
+    min-width: calc(50% - 12px);
+  }
+
+  .contact-column {
+    flex: 1 1 100%;
+    max-width: none;
+  }
+}
+
+@media (max-width: 768px) {
+  .footer-container {
+    padding: 30px 16px 16px;
+  }
+
+  .footer-top {
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .footer-column {
+    width: 100%;
+    max-width: none;
+  }
+
+  .footer-title {
+    margin-bottom: 12px;
+  }
+
+  .footer-links {
+    gap: 8px;
+  }
+
+  .footer-link-item {
+    font-size: 13px;
+  }
+
+  .contact-info {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .contact-item {
+    font-size: 13px;
+  }
+
+  .footer-divider {
+    margin: 24px 0 16px;
+  }
+
+  .copyright {
+    font-size: 12px;
+  }
+
+  .infrastructure {
+    font-size: 11px;
+  }
+}
 </style>
diff --git a/txw-mhzc-web/src/pages/index/components/nav/index2.vue b/txw-mhzc-web/src/pages/index/components/nav/index2.vue
index c8a9c68..176d5fe 100644
--- a/txw-mhzc-web/src/pages/index/components/nav/index2.vue
+++ b/txw-mhzc-web/src/pages/index/components/nav/index2.vue
@@ -44,7 +44,7 @@
 </template>
 
 <script>
-import { logout, authorize, init } from '@/pages/index/api/login';
+import { logout, authorize } from '@/pages/index/api/login';
 import api from '@/pages/index/api/gxzx/index.js';
 
 export default {
@@ -56,6 +56,17 @@ export default {
     return {
       curPage: "home",
       loginFlag: false, //是否已完成登录
+      // 路由路径到菜单名的映射
+      routeToMenuMap: {
+        '/home': 'home',
+        '/fwsc': 'fwsc',
+        '/tfwsc': 'fwsc',
+        '/txqsc': 'fwsc',
+        '/tjrsc': 'fwsc',
+        '/tsjsc': 'fwsc',
+        '/yhzx': 'yhzx',
+        '/login': 'login',
+      },
 
       menuOptions: [
         {
@@ -133,6 +144,7 @@ export default {
               value: 'tfwsc',
               content: '碳服务市场',
               divider: true,
+              parentName: 'fwsc',
             },
             {
               name: 'tjrsc',
@@ -140,12 +152,14 @@ export default {
               value: 'tjrsc',
               content: '碳金融市场',
               divider: true,
+              parentName: 'fwsc',
             }, {
               name: 'txqsc',
               title: '碳需求市场',
               value: 'txqsc',
               content: '碳需求市场',
               divider: true,
+              parentName: 'fwsc',
             },
             {
               name: 'tsjsc',
@@ -153,6 +167,7 @@ export default {
               value: 'tsjsc',
               content: '碳数据市场',
               divider: true,
+              parentName: 'fwsc',
             }
           ]
         },
@@ -197,11 +212,49 @@ export default {
     } else {
       this.loginFlag = false;
     }
+
+    // 根据当前路由更新选中状态
+    this.updateCurPageByRoute();
+  },
+  watch: {
+    // 监听路由变化，更新菜单选中状态
+    $route: {
+      handler(newRoute) {
+        this.updateCurPageByRoute();
+      },
+      immediate: true,
+    },
   },
   beforeUnmount() { },
   methods: {
+    // 根据当前路由更新菜单选中状态
+    updateCurPageByRoute() {
+      const path = this.$route.path;
+      const routeName = this.$route.name;
+
+      // 优先精确匹配路径
+      if (this.routeToMenuMap[path]) {
+        this.curPage = this.routeToMenuMap[path];
+        return;
+      }
+
+      // 尝试从路径中提取关键部分进行匹配
+      if (path.includes('tfwsc') || path.includes('txqsc') || path.includes('tjrsc') || path.includes('tsjsc')) {
+        this.curPage = 'fwsc';
+        return;
+      }
+
+      // 如果都匹配不到，默认选中首页
+      this.curPage = 'home';
+    },
     //子菜单点击方法
     handleDropdownClick(menu) {
+      // 如果有parentName，说明是子菜单，使用父级菜单名作为curPage
+      if (menu.parentName) {
+        this.curPage = menu.parentName;
+      } else {
+        this.curPage = menu.name;
+      }
       this.gotoIfreamPage(menu); // 直接把子菜单项传入跳转方法
     },
 
@@ -231,7 +284,8 @@ export default {
       this.curPage = menu.name;
       let iframeUrl = menu.iframeUrl;
       if (iframeUrl) {
-        //调用login.js内的authorize方法
+        //调用login.js内的authorize方法（如果需要的话）
+        //这里直接使用iframeUrl，外部系统会通过SSO Cookie等方式处理登录状态
         this.$emit('gotoIfreamPage', iframeUrl);
       } else {
         this.$emit('gotoPage', this.curPage);
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 25a2875..2d870bf 100644
--- a/txw-mhzc-web/src/pages/index/views/fwsc/jrsc.vue
+++ b/txw-mhzc-web/src/pages/index/views/fwsc/jrsc.vue
@@ -21,134 +21,315 @@
     </div>
 
     <!-- 页面主体 -->
-    <div class="jrsc-main">
-      <!-- 内容区域 -->
+    <main class="jrsc-main">
       <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>
+        <aside class="filter-sidebar">
+          <div class="filter-sidebar-content">
+            <!-- 内容搜索 -->
+            <div class="filter-section">
+              <div class="filter-title">关键词搜索</div>
+              <t-input v-model="searchKeyword" placeholder="请输入关键词" @enter="handleSearch" />
+              <!-- 按钮 -->
+              <div class="filter-buttons">
+                <t-button theme="primary" @click="handleSearch">查询</t-button>
+                <t-button theme="default" @click="handleReset">重置</t-button>
+              </div>
             </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 class="filter-section">
+              <div class="filter-title">产品类型</div>
+              <div class="product-type-cards">
+                <div
+                  v-for="item in productTypes"
+                  :key="item.value"
+                  :class="['type-card', { active: selectedProductType === item.value }]"
+                  @click="handleTypeChange(item.value)"
+                >
+                  <span class="type-icon">{{ item.value === 'xd' ? '💰' : '🛡️' }}</span>
+                  <span class="type-label">{{ item.label }}</span>
+                </div>
+              </div>
+            </div>
+
+            <!-- 机构筛选 -->
+            <div class="filter-section enterprise-section">
+              <div class="filter-title">{{ selectedProductType === 'xd' ? '合作银行' : '合作保险机构' }}</div>
+              <div class="filter-options enterprise-options">
+                <div
+                  v-for="item in filteredInstitutions"
+                  :key="item.value"
+                  :class="['filter-item', { active: selectedInstitutions.includes(item.value) }]"
+                  @click="toggleInstitution(item.value)"
+                >
+                  <span class="check-icon">{{ selectedInstitutions.includes(item.value) ? '✓' : '' }}</span>
+                  {{ item.label }}
+                </div>
+              </div>
             </div>
           </div>
-        </div>
+        </aside>
 
         <!-- 右侧金融产品列表 -->
         <div class="product-list">
-          <div class="product-grid">
+          <div class="list-header">
+            <div class="list-title-box">
+              <span class="list-icon">💹</span>
+              <span class="list-title">碳金融市场</span>
+            </div>
+            <div class="list-right">
+              <span class="list-count"><span class="count-dot"></span>共 {{ total }} 条产品</span>
+            </div>
+          </div>
+
+          <!-- 加载状态 -->
+          <div v-if="loading" class="loading-state">
+            <div class="loading-spinner"></div>
+            <p>加载中...</p>
+          </div>
+
+          <div class="product-grid" v-else>
             <div
-              v-for="card in filteredProducts"
-              :key="card.id"
+              v-for="card in productList"
+              :key="card.cpuuid"
               class="product-card"
             >
-              <!-- 卡片头部：机构名称 + Logo -->
+              <!-- 卡片顶部渐变边框 -->
+              <div class="card-gradient-top"></div>
+
+              <!-- 卡片头部 -->
               <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 class="bank-info">
+                  <div class="logo-wrapper">
+                    <img v-if="card.yxlogo" class="bank-logo" :src="card.yxlogo" :alt="card.qymc" />
+                    <div v-else class="bank-logo-placeholder">{{ card.qymc ? card.qymc.charAt(0) : '🏦' }}</div>
+                  </div>
+                  <div class="bank-detail">
+                    <span class="bank-name">{{ card.qymc }}</span>
+                    <span class="bank-tag">{{ selectedProductType === 'xd' ? '绿色信贷' : '绿色保险' }}</span>
+                  </div>
                 </div>
               </div>
 
               <!-- 产品名称 -->
-              <div class="product-name">{{ card.productName }}</div>
+              <div class="product-name">{{ card.cpmc }}</div>
 
-              <!-- 产品标签 -->
-              <div class="product-tags">
-                <span class="tag">{{ card.tag }}</span>
+              <!-- 产品信息 -->
+              <div class="product-info" v-if="selectedProductType === 'xd'">
+                <div class="info-item">
+                  <div class="info-icon">📊</div>
+                  <div class="info-content">
+                    <div class="info-label">贷款额度</div>
+                    <div class="info-value">{{ card.edfw || '面议' }}</div>
+                  </div>
+                </div>
+                <div class="info-divider"></div>
+                <div class="info-item">
+                  <div class="info-icon">📅</div>
+                  <div class="info-content">
+                    <div class="info-label">贷款期限</div>
+                    <div class="info-value">{{ card.dkqxfw || '面议' }}</div>
+                  </div>
+                </div>
+                <div class="info-divider"></div>
+                <div class="info-item">
+                  <div class="info-icon">💵</div>
+                  <div class="info-content">
+                    <div class="info-label">利率</div>
+                    <div class="info-value rate">{{ card.llfw || '面议' }}</div>
+                  </div>
+                </div>
               </div>
-
-              <!-- 产品信息：额度、期限、利率 -->
-              <div class="product-info">
+              <div class="product-info" v-else>
                 <div class="info-item">
-                  <div class="info-label">额度</div>
-                  <div class="info-value amount">{{ card.amount }}</div>
+                  <div class="info-icon">🛡️</div>
+                  <div class="info-content">
+                    <div class="info-label">保障期限</div>
+                    <div class="info-value">{{ card.bzqxfw || '面议' }}</div>
+                  </div>
                 </div>
+                <div class="info-divider"></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 class="info-icon">💳</div>
+                  <div class="info-content">
+                    <div class="info-label">保费方式</div>
+                    <div class="info-value">{{ card.bfjsfs || '面议' }}</div>
+                  </div>
                 </div>
               </div>
 
               <!-- 操作按钮 -->
               <div class="card-actions">
-                <button class="btn-primary">立即申请</button>
-                <button class="btn-secondary">查看详情</button>
+                <t-button theme="default" size="small" variant="outline" @click="handleDetail(card)">查看详情</t-button>
+                <t-button theme="primary" size="small" @click="handleApply(card)">立即申请</t-button>
               </div>
             </div>
           </div>
 
+          <!-- 空状态 -->
+          <div v-if="!loading && productList.length === 0" class="empty-state">
+            <div class="empty-illustration">💰</div>
+            <p class="empty-text">暂无金融产品</p>
+            <p class="empty-hint">敬请期待更多优质金融产品上线</p>
+          </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 class="pagination-box" v-if="total > 0">
+            <t-pagination
+              v-model="page.pageNo"
+              :total="total"
+              :page-size.sync="page.pageSize"
+              :page-size-options="[3, 6, 9, 18]"
+              @change="onPageChange"
+            />
           </div>
         </div>
       </div>
-    </div>
+    </main>
 
-    <!-- 底部 -->
     <Footer />
+
+    <!-- 产品详情弹窗 -->
+    <t-dialog
+      :header="selectedProductType === 'xd' ? '💰 信贷产品详情' : '🛡️ 保险产品详情'"
+      :visible.sync="detailVisible"
+      width="50%"
+      :closeOnOverlayClick="false"
+      :onClose="onDetailClose"
+      class="global-dialog detail-dialog"
+    >
+      <div class="detail-content" v-if="selectedProduct">
+        <div class="detail-header">
+          <div class="detail-product-name">{{ selectedProduct.cpmc }}</div>
+        </div>
+        <table class="info-table">
+          <tbody v-if="selectedProductType === 'xd'">
+            <tr class="table-row">
+              <td class="label-cell">金融机构</td>
+              <td class="value-cell">{{ selectedProduct.qymc }}</td>
+              <td class="label-cell">业务类型</td>
+              <td class="value-cell">{{ selectedProduct.ywlxmc }}</td>
+            </tr>
+            <tr class="table-row">
+              <td class="label-cell">额度范围</td>
+              <td class="value-cell highlight">{{ selectedProduct.edfw || '面议' }}</td>
+              <td class="label-cell">利率范围</td>
+              <td class="value-cell highlight rate">{{ selectedProduct.llfw || '面议' }}</td>
+            </tr>
+            <tr class="table-row">
+              <td class="label-cell">贷款期限</td>
+              <td class="value-cell">{{ selectedProduct.dkqxfw || '面议' }}</td>
+              <td class="label-cell"></td>
+              <td class="value-cell"></td>
+            </tr>
+          </tbody>
+          <tbody v-else>
+            <tr class="table-row">
+              <td class="label-cell">保险公司</td>
+              <td class="value-cell">{{ selectedProduct.qymc }}</td>
+              <td class="label-cell">保险类型</td>
+              <td class="value-cell">{{ selectedProduct.ywlxmc }}</td>
+            </tr>
+            <tr class="table-row">
+              <td class="label-cell">保障期限</td>
+              <td class="value-cell highlight">{{ selectedProduct.bzqxfw || '面议' }}</td>
+              <td class="label-cell">保费方式</td>
+              <td class="value-cell highlight">{{ selectedProduct.bfjsfs || '面议' }}</td>
+            </tr>
+          </tbody>
+        </table>
+        <div class="product-description">
+          <h4 class="description-title">产品说明</h4>
+          <div class="description-content">
+            <p>{{ selectedProduct.fwcpms || '暂无产品说明，请联系金融机构了解详情。' }}</p>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <t-button theme="default" variant="outline" @click="onDetailClose">关闭</t-button>
+          <t-button theme="primary" @click="handleDetailApply">立即申请 💡</t-button>
+        </div>
+      </template>
+    </t-dialog>
+
+    <!-- 申请弹窗 -->
+    <t-dialog
+      header="申请信息"
+      :visible.sync="applyVisible"
+      width="50%"
+      :closeOnOverlayClick="false"
+      :onClose="onApplyClose"
+      class="global-dialog"
+    >
+      <div class="apply-form" v-if="!submitSuccess">
+        <t-form :data="applyForm" labelAlign="top" ref="applyFormRef">
+          <t-form-item label="企业名称">
+            <t-input v-model="applyForm.qymc" placeholder="请输入企业名称" disabled />
+          </t-form-item>
+          <t-form-item label="联系人">
+            <t-input v-model="applyForm.lxr" placeholder="请输入联系人" />
+          </t-form-item>
+          <t-form-item label="联系电话">
+            <t-input v-model="applyForm.lxdh" placeholder="请输入联系电话" />
+          </t-form-item>
+          <t-form-item v-if="selectedProductType === 'xd'" label="申请金额（万元）">
+            <t-select v-model="applyForm.sqdkJe" placeholder="请选择" clearable>
+              <t-option value="50" label="50万元" />
+              <t-option value="100" label="100万元" />
+              <t-option value="200" label="200万元" />
+              <t-option value="500" label="500万元" />
+            </t-select>
+          </t-form-item>
+          <t-form-item v-else label="投保金额（万元）">
+            <t-input v-model="applyForm.tbje" placeholder="请输入" type="number" />
+          </t-form-item>
+          <t-form-item v-if="selectedProductType === 'xd'" label="贷款用途">
+            <t-textarea v-model="applyForm.sqdkyt" placeholder="请输入贷款用途" />
+          </t-form-item>
+        </t-form>
+      </div>
+      <div class="submit-success" v-else>
+        <div class="success-icon">✓</div>
+        <div class="success-text">提交成功，请等待审核</div>
+      </div>
+      <template #footer>
+        <div class="dialog-footer" v-if="!submitSuccess">
+          <t-button theme="default" @click="onApplyClose">取消</t-button>
+          <t-button theme="primary" @click="handleSubmitApply" :loading="submitLoading">提交</t-button>
+        </div>
+        <div class="dialog-footer" v-else>
+          <t-button theme="primary" @click="onApplyClose">确定</t-button>
+        </div>
+      </template>
+    </t-dialog>
+
+    <!-- 提示弹窗 -->
+    <t-dialog
+      :closeOnOverlayClick="false"
+      header="提示"
+      body="请先进行企业入驻"
+      :visible.sync="rzVisible"
+      @confirm="onRzConfirm"
+      :onClose="onRzClose"
+      :cancelBtn="null"
+      class="global-dialog"
+    />
   </div>
 </template>
 
 <script>
-import NewNav from '@/pages/index/components/new-nav/index.vue';
-import Footer from '@/pages/index/components/footer/index.vue';
 import BreadcrumbNav from '@/pages/index/components/breadcrumb/index.vue';
+import Footer from '@/pages/index/components/footer/index.vue';
+import api from '@/pages/index/api/fwsc/index.js';
 
 export default {
   name: 'JrscPage',
   components: {
-    NewNav,
-    Footer,
     BreadcrumbNav,
+    Footer,
   },
   data() {
     return {
@@ -158,146 +339,296 @@ export default {
         { label: '碳金融市场', path: '/tjrsc' },
         { label: '碳数据市场', path: '/tsjsc' },
       ],
-      // 选中服务类型
-      selectedServiceType: '全部',
-      // 选中服务企业
-      selectedEnterprise: '全部',
+      // 产品类型选项
+      productTypes: [
+        { label: '绿色信贷', value: 'xd' },
+        { label: '绿色保险', value: 'bx' },
+      ],
+      // 选中产品类型
+      selectedProductType: 'xd',
+      // 机构选项
+      institutionOptions: [],
+      // 选中的机构
+      selectedInstitutions: [],
       // 搜索关键词
       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: '',
-        },
-      ],
+      // 产品列表
+      productList: [],
+      // 机构列表
+      total: 0,
+      // 分页
+      page: {
+        pageNo: 1,
+        pageSize: 6,
+      },
+      // 加载状态
+      loading: false,
+      // 详情弹窗
+      detailVisible: false,
+      selectedProduct: null,
+      // 申请弹窗
+      applyVisible: false,
+      submitSuccess: false,
+      submitLoading: false,
+      applyForm: {
+        qymc: '',
+        lxr: '',
+        lxdh: '',
+        sqdkJe: '',
+        sqdkyt: '',
+        tbje: '',
+      },
+      // 入驻提示弹窗
+      rzVisible: false,
+      // 当前申请的产品UUID
+      currentProductUuid: '',
+      // 用户信息
+      yhxx: {},
     };
   },
   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;
+    filteredInstitutions() {
+      return this.institutionOptions;
     },
   },
-  methods: {
-    handleSearch() {
-      // 搜索功能已通过计算属性实现
+  watch: {
+    // 监听机构选择变化，自动刷新产品列表
+    selectedInstitutions: {
+      handler() {
+        this.page.pageNo = 1;
+        this.loadProductList();
+      },
+      deep: true,
     },
+  },
+  mounted() {
+    this.initUser();
+    this.loadInstitutionList();
+    this.loadProductList();
+  },
+  methods: {
+    // 初始化用户信息
+    async initUser() {
+      try {
+        const { data } = await api.init();
+        this.yhxx = data || {};
+        window.sessionStorage.setItem('yhxx', JSON.stringify(data));
+        this.applyForm.qymc = this.yhxx.qymc || '';
+      } catch (error) {
+        console.error('获取用户信息失败', error);
+      }
+    },
+    // 加载机构列表
+    async loadInstitutionList() {
+      try {
+        console.log('加载机构列表, type:', this.selectedProductType);
+        const { data, code } = await api.queryJgList(this.selectedProductType);
+        console.log('机构列表响应:', code, data);
+        if (code === 1 && data) {
+          // 兼容两种数据格式：value/label 或 qyid/qymc
+          if (data.length > 0 && data[0].qyid !== undefined) {
+            this.institutionOptions = data.map((item) => ({
+              value: item.qyid,
+              label: item.qymc,
+            }));
+          } else {
+            this.institutionOptions = data;
+          }
+        }
+      } catch (error) {
+        console.error('加载机构列表失败', error);
+        this.institutionOptions = [];
+      }
+    },
+    // 加载产品列表
+    async loadProductList() {
+      this.loading = true;
+      try {
+        const params = {
+          type: this.selectedProductType,
+          pageNum: this.page.pageNo,
+          pageSize: this.page.pageSize,
+          cpmc: this.searchKeyword,
+          qyidList: this.selectedInstitutions,
+        };
+        console.log('加载产品列表, params:', params);
+        const { data, code } = await api.queryXdbxcpList(params);
+        console.log('产品列表响应:', code, data);
+        if (code === 1) {
+          this.productList = data.list || [];
+          this.total = Number(data.total || 0);
+        } else {
+          this.productList = [];
+          this.total = 0;
+        }
+      } catch (error) {
+        console.error('获取产品列表失败', error);
+        this.productList = [];
+        this.total = 0;
+      } finally {
+        this.loading = false;
+      }
+    },
+    // 切换产品类型
+    handleTypeChange(type) {
+      this.selectedProductType = type;
+      this.selectedInstitutions = [];
+      this.page.pageNo = 1;
+      this.loadInstitutionList();
+      this.loadProductList();
+    },
+    // 切换机构选择
+    toggleInstitution(value) {
+      const index = this.selectedInstitutions.indexOf(value);
+      if (index > -1) {
+        this.selectedInstitutions.splice(index, 1);
+      } else {
+        this.selectedInstitutions.push(value);
+      }
+    },
+    // 搜索
+    handleSearch() {
+      this.page.pageNo = 1;
+      this.loadProductList();
+    },
+    // 重置
+    handleReset() {
+      this.selectedInstitutions = [];
+      this.searchKeyword = '';
+      this.page.pageNo = 1;
+      this.loadProductList();
+    },
+    // 分页变化
+    onPageChange(pageInfo) {
+      this.page.pageNo = pageInfo.current;
+      this.page.pageSize = pageInfo.pageSize;
+      this.loadProductList();
+    },
+    // 查看详情
+    async handleDetail(card) {
+      try {
+        const { data, code } = await api.queryXdbxcpxq(card.cpuuid);
+        if (code === 1) {
+          this.selectedProduct = data;
+          this.detailVisible = true;
+        }
+      } catch (error) {
+        console.error('获取产品详情失败', error);
+      }
+    },
+    onDetailClose() {
+      this.detailVisible = false;
+    },
+    handleDetailApply() {
+      this.detailVisible = false;
+      this.handleApply(this.selectedProduct);
+    },
+    // 立即申请
+    handleApply(card) {
+      const yhxx = window.sessionStorage.getItem('yhxx');
+      if (yhxx) {
+        const yhxxData = JSON.parse(yhxx);
+        if (yhxxData.gxdtRzbz === 'Y') {
+          this.currentProductUuid = card.cpuuid;
+          this.applyVisible = true;
+          this.submitSuccess = false;
+        } else {
+          this.rzVisible = true;
+        }
+      } else {
+        this.rzVisible = true;
+      }
+    },
+    onApplyClose() {
+      this.applyVisible = false;
+      this.submitSuccess = false;
+      this.applyForm = {
+        qymc: this.yhxx.qymc || '',
+        lxr: '',
+        lxdh: '',
+        sqdkJe: '',
+        sqdkyt: '',
+        tbje: '',
+      };
+    },
+    async handleSubmitApply() {
+      if (!this.applyForm.lxr || !this.applyForm.lxdh) {
+        this.$message.warning('请填写完整信息');
+        return;
+      }
+      if (this.selectedProductType === 'xd' && !this.applyForm.sqdkJe) {
+        this.$message.warning('请选择申请金额');
+        return;
+      }
+      if (this.selectedProductType === 'bx' && !this.applyForm.tbje) {
+        this.$message.warning('请输入投保金额');
+        return;
+      }
+      this.submitLoading = true;
+      try {
+        // 模拟提交成功
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+        this.submitSuccess = true;
+        this.$message.success('提交成功');
+      } catch (error) {
+        this.$message.error('提交失败');
+      } finally {
+        this.submitLoading = false;
+      }
+    },
+    onRzConfirm() {
+      this.rzVisible = false;
+    },
+    onRzClose() {
+      this.rzVisible = false;
+    },
+    // 发布
+    handlePublish() {
+      this.$message.info('请联系客服发布金融产品');
+    },
+    // 导航相关
     isActiveTab(path) {
       return this.$route.path === path;
     },
     goToTab(path) {
       this.$router.push(path);
     },
-    handlePublish() {
-      // 发布金融产品逻辑
-    },
   },
 };
 </script>
 
 <style scoped lang="less">
+// 变量定义
+@primary-color: #009a29;
+@primary-light: #4caf50;
+@primary-bg: #e8f5e9;
+@secondary-color: #d25f00;
+@text-dark: #333;
+@text-light: #666;
+@text-gray: #999;
+@border-color: #e5e7eb;
+@bg-gray: #f5f5f5;
+@bg-white: #fff;
+
 .jrsc-page {
   min-height: 100vh;
-  background-color: #f5f7fa;
+  background: @bg-gray;
+  animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .jrsc-main {
+  width: 100%;
   max-width: 1400px;
   padding: 20px;
   margin: 0 auto;
@@ -305,7 +636,7 @@ export default {
 
 // 二级菜单
 .secondary-nav {
-  background: #fff;
+  background: @bg-white;
   border-bottom: 1px solid #eee;
 }
 
@@ -326,7 +657,7 @@ export default {
 .nav-tab {
   padding: 12px 20px;
   font-size: 14px;
-  color: #666;
+  color: @text-light;
   cursor: pointer;
   background: transparent;
   border: none;
@@ -334,12 +665,12 @@ export default {
   transition: all 0.3s;
 
   &:hover {
-    color: #009a29;
+    color: @primary-color;
   }
 
   &.active {
-    color: #009a29;
-    border-bottom-color: #009a29;
+    color: @primary-color;
+    border-bottom-color: @primary-color;
   }
 }
 
@@ -348,13 +679,15 @@ export default {
   font-size: 14px;
   color: #fff;
   cursor: pointer;
-  background: #009a29;
+  background: linear-gradient(135deg, @primary-color 0%, @primary-light 100%);
   border: none;
   border-radius: 4px;
-  transition: background 0.3s;
+  box-shadow: 0 2px 8px rgba(0, 154, 41, 0.3);
+  transition: all 0.3s;
 
   &:hover {
-    background: #007a1f;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 154, 41, 0.4);
   }
 }
 
@@ -365,107 +698,239 @@ export default {
 }
 
 // 左侧筛选栏
-.sidebar {
+.filter-sidebar {
   position: sticky;
   top: 104px;
-  width: 220px;
+  width: 240px;
   height: fit-content;
-  padding: 20px;
-  background: #fff;
-  border-radius: 8px;
   flex-shrink: 0;
 }
 
+.filter-sidebar-content {
+  padding: 20px;
+  background: @bg-white;
+  border-radius: 12px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+}
+
 .filter-section {
-  margin-bottom: 24px;
+  padding-bottom: 20px;
+  margin-bottom: 20px;
+  border-bottom: 1px dashed #e0e0e0;
 
   &:last-child {
+    padding-bottom: 0;
     margin-bottom: 0;
+    border-bottom: none;
   }
 }
 
 .filter-title {
+  display: flex;
   margin-bottom: 12px;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 600;
-  color: #333;
+  color: @text-dark;
+  align-items: center;
+  gap: 6px;
+
+  &::before {
+    width: 4px;
+    height: 14px;
+    background: linear-gradient(180deg, @primary-color, @primary-light);
+    border-radius: 2px;
+    content: '';
+  }
 }
 
-.filter-options {
+// 产品类型切换卡片
+.product-type-cards {
   display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
+  gap: 12px;
+}
+
+.type-card {
+  display: flex;
+  padding: 16px 8px;
+  cursor: pointer;
+  background: @bg-gray;
+  border: 2px solid transparent;
+  border-radius: 8px;
+  transition: all 0.3s;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+
+  &:hover {
+    background: @primary-bg;
+    border-color: @primary-bg;
+  }
+
+  &.active {
+    background: @primary-bg;
+    border-color: @primary-color;
+    box-shadow: 0 2px 8px rgba(0, 154, 41, 0.2);
+
+    .type-label {
+      font-weight: 600;
+      color: @primary-color;
+    }
+  }
+
+  .type-icon {
+    margin-bottom: 8px;
+    font-size: 24px;
+  }
+
+  .type-label {
+    font-size: 13px;
+    color: @text-light;
+    transition: all 0.3s;
+  }
+}
+
+// 机构筛选
+.enterprise-section {
+  .filter-options {
+    flex-direction: column;
+    gap: 6px;
+  }
 
   .filter-item {
-    padding: 6px 12px;
+    display: flex;
+    padding: 10px 12px;
     font-size: 14px;
-    color: #666;
+    color: @text-light;
     cursor: pointer;
-    background: #f5f7fa;
-    border-radius: 4px;
+    background: @bg-gray;
+    border-radius: 6px;
     transition: all 0.3s;
+    align-items: center;
+    gap: 8px;
+
+    .check-icon {
+      display: flex;
+      width: 18px;
+      height: 18px;
+      font-size: 12px;
+      color: #fff;
+      background: #ccc;
+      border-radius: 4px;
+      transition: all 0.3s;
+      align-items: center;
+      justify-content: center;
+    }
 
     &:hover {
-      color: #009a29;
-      background: #e8f5e9;
+      color: @primary-color;
+      background: @primary-bg;
     }
 
     &.active {
-      color: #fff;
-      background: #009a29;
+      color: @primary-color;
+      background: @primary-bg;
+
+      .check-icon {
+        background: @primary-color;
+      }
     }
   }
 }
 
 .enterprise-options {
-  flex-direction: column;
-  gap: 6px;
+  max-height: 200px;
+  padding-right: 4px;
+  overflow-y: auto;
 
-  .filter-item {
-    padding: 8px 12px;
-    text-align: left;
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #ccc;
+    border-radius: 2px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
   }
 }
 
-// 搜索框
-.search-box {
+.filter-buttons {
   display: flex;
   gap: 8px;
-}
+  margin-top: 16px;
 
-.search-input {
-  flex: 1;
-  padding: 8px 12px;
-  font-size: 14px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  outline: none;
-
-  &:focus {
-    border-color: #009a29;
+  .t-button {
+    flex: 1;
   }
 }
 
-.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;
+  min-width: 0;
 }
 
+.list-header {
+  display: flex;
+  padding: 0 8px;
+  margin-bottom: 20px;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.list-title-box {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+
+  .list-icon {
+    font-size: 24px;
+  }
+
+  .list-title {
+    font-size: 22px;
+    font-weight: 600;
+    color: @text-dark;
+    background: linear-gradient(135deg, @text-dark 0%, @primary-color 100%);
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+}
+
+.list-right {
+  display: flex;
+  align-items: center;
+}
+
+.list-count {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  color: @text-gray;
+
+  .count-dot {
+    width: 8px;
+    height: 8px;
+    background: linear-gradient(135deg, @primary-color, @primary-light);
+    border-radius: 50%;
+    animation: pulse 2s infinite;
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+// 产品卡片网格
 .product-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -474,171 +939,436 @@ export default {
 
 // 产品卡片
 .product-card {
+  position: relative;
+  display: flex;
   padding: 20px;
-  background: #fff;
-  border-radius: 8px;
-  transition: transform 0.3s, box-shadow 0.3s;
+  padding-top: 0;
+  overflow: hidden;
+  background: @bg-white;
+  border-radius: 12px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+  transition: all 0.3s;
+  flex-direction: column;
 
   &:hover {
-    transform: scale(1.02);
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+    transform: translateY(-6px);
+    box-shadow: 0 12px 32px rgba(0, 154, 41, 0.15);
+
+    .card-gradient-top {
+      height: 4px;
+    }
+  }
+}
+
+.card-gradient-top {
+  height: 0;
+  margin: 0 -20px 16px;
+  background: linear-gradient(90deg, @primary-color, @primary-light, @primary-color);
+  background-size: 200% 100%;
+  border-radius: 0 0 8px 8px;
+  animation: gradientMove 3s ease infinite;
+  transition: height 0.3s;
+}
+
+@keyframes gradientMove {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
   }
 }
 
 .card-header {
   display: flex;
+  padding-bottom: 16px;
+  margin-bottom: 12px;
+  border-bottom: 1px solid #f0f0f0;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 16px;
 }
 
-.org-name {
-  font-size: 16px;
-  font-weight: 600;
-  color: #333;
+.bank-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
 }
 
-.org-logo {
+.logo-wrapper {
+  display: flex;
   width: 48px;
   height: 48px;
+  overflow: hidden;
+  background: linear-gradient(135deg, @primary-bg 0%, #f0f9f0 100%);
+  border-radius: 12px;
+  align-items: center;
+  justify-content: center;
+}
 
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-  }
+.bank-logo {
+  width: 32px;
+  height: 32px;
+  object-fit: contain;
+}
 
-  .logo-placeholder {
-    width: 100%;
-    height: 100%;
-    background: #f0f0f0;
-    border-radius: 4px;
-  }
+.bank-logo-placeholder {
+  display: flex;
+  width: 48px;
+  height: 48px;
+  font-size: 20px;
+  font-weight: 600;
+  color: @primary-color;
+  background: linear-gradient(135deg, @primary-bg 0%, #f0f9f0 100%);
+  border-radius: 12px;
+  align-items: center;
+  justify-content: center;
+}
+
+.bank-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.bank-name {
+  font-size: 15px;
+  font-weight: 600;
+  color: @text-dark;
+}
+
+.bank-tag {
+  display: inline-block;
+  padding: 2px 8px;
+  font-size: 11px;
+  color: @primary-color;
+  background: @primary-bg;
+  border-radius: 4px;
 }
 
 .product-name {
-  margin-bottom: 12px;
-  font-size: 18px;
-  font-weight: 500;
-  color: #1a1a1a;
-}
-
-.product-tags {
+  padding: 12px 16px;
   margin-bottom: 16px;
-
-  .tag {
-    display: inline-block;
-    padding: 4px 12px;
-    font-size: 12px;
-    color: #009a29;
-    background: #e8f5e9;
-    border-radius: 4px;
-  }
+  font-size: 16px;
+  font-weight: 600;
+  color: @text-dark;
+  text-align: center;
+  background: linear-gradient(135deg, #f8f9fa 0%, #f0f0f0 100%);
+  border-radius: 8px;
 }
 
 .product-info {
   display: flex;
   padding: 16px 0;
   margin-bottom: 16px;
-  border-top: 1px solid #eee;
-  border-bottom: 1px solid #eee;
+  border-top: 1px solid #f0f0f0;
+  border-bottom: 1px solid #f0f0f0;
   justify-content: space-between;
+  align-items: center;
 }
 
 .info-item {
-  text-align: center;
   flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.info-icon {
+  font-size: 18px;
+}
+
+.info-content {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 }
 
 .info-label {
-  margin-bottom: 8px;
-  font-size: 13px;
-  color: #999;
+  font-size: 12px;
+  color: @text-gray;
 }
 
 .info-value {
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 600;
-  color: #333;
-
-  &.amount {
-    color: #d25f00;
-  }
+  color: @text-dark;
 
   &.rate {
-    color: #00b42a;
+    color: @secondary-color;
   }
 }
 
+.info-divider {
+  width: 1px;
+  height: 32px;
+  background: #e0e0e0;
+}
+
 .card-actions {
   display: flex;
   gap: 12px;
-}
+  margin-top: auto;
 
-.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;
+  .t-button {
+    flex: 1;
   }
 }
 
-.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;
+// 加载状态
+.loading-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+  padding: 40px;
+  background: @bg-white;
+  border-radius: 12px;
 
-  &:hover {
-    color: #009a29;
-    background: #e8f5e9;
-    border-color: #009a29;
+  .loading-spinner {
+    width: 48px;
+    height: 48px;
+    margin-bottom: 16px;
+    border: 4px solid @primary-bg;
+    border-top-color: @primary-color;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+  }
+
+  p {
+    margin: 0;
+    font-size: 14px;
+    color: @text-gray;
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+// 空状态
+.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 {
+.pagination-box {
   display: flex;
   justify-content: center;
+  padding-top: 32px;
+}
+
+// 详情弹窗
+.detail-dialog {
+  /deep/.t-dialog__header {
+    padding: 16px 24px;
+    background: linear-gradient(135deg, #e8f5e9 0%, #f0f9f0 100%);
+    border-radius: 8px 8px 0 0;
+  }
+}
+
+.detail-content {
+  padding: 8px;
+  animation: fadeIn 0.3s ease;
+}
+
+.detail-header {
+  padding: 16px 20px;
+  margin-bottom: 20px;
+  background: linear-gradient(135deg, #f8f9fa 0%, #f0f0f0 100%);
+  border-radius: 8px;
+}
+
+.detail-product-name {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  text-align: center;
+}
+
+.info-table {
+  width: 100%;
+  margin-bottom: 24px;
+  overflow: hidden;
+  border: 1px solid @border-color;
+  border-collapse: collapse;
+  border-radius: 8px;
+
+  .table-row {
+    border-bottom: 1px solid @border-color;
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .label-cell {
+    width: 100px;
+    padding: 14px 16px;
+    font-size: 14px;
+    font-weight: 500;
+    color: @text-light;
+    background: linear-gradient(135deg, #f8f9fa 0%, #f5f5f5 100%);
+    border-right: 1px solid @border-color;
+  }
+
+  .value-cell {
+    padding: 14px 16px;
+    font-size: 14px;
+    color: @text-dark;
+
+    &.highlight {
+      font-weight: 600;
+      color: @primary-color;
+    }
+
+    &.rate {
+      color: @secondary-color;
+    }
+  }
+}
+
+.product-description {
+  padding: 20px;
+  background: linear-gradient(135deg, #f8f9fa 0%, #f0f0f0 100%);
+  border-radius: 8px;
+
+  .description-title {
+    display: flex;
+    margin-bottom: 12px;
+    font-size: 15px;
+    font-weight: 600;
+    color: @text-dark;
+    align-items: center;
+    gap: 8px;
+
+    &::before {
+      content: '📋';
+    }
+  }
+
+  .description-content {
+    padding: 0;
+
+    p {
+      margin: 0;
+      font-size: 14px;
+      line-height: 1.8;
+      color: @text-light;
+    }
+  }
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+// 申请表单
+.apply-form {
+  padding: 8px;
+  animation: fadeIn 0.3s ease;
+}
+
+.submit-success {
+  display: flex;
+  flex-direction: column;
   align-items: center;
-  gap: 8px;
-  margin-top: 30px;
-}
+  padding: 60px 0;
+  animation: scaleIn 0.4s ease;
 
-.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 {
+  .success-icon {
+    display: flex;
+    width: 80px;
+    height: 80px;
+    margin-bottom: 24px;
+    font-size: 40px;
     color: #fff;
-    background: #009a29;
-    border-color: #009a29;
+    background: linear-gradient(135deg, @primary-color 0%, @primary-light 100%);
+    border-radius: 50%;
+    align-items: center;
+    justify-content: center;
+    animation: successPop 0.5s ease 0.2s both;
+  }
+
+  .success-text {
+    font-size: 18px;
+    font-weight: 600;
+    color: @text-dark;
   }
 }
-</style>
\ No newline at end of file
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes successPop {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@media (max-width: 1200px) {
+  .product-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 768px) {
+  .filter-sidebar {
+    position: relative;
+    top: 0;
+    width: 100%;
+  }
+
+  .content-wrapper {
+    flex-direction: column;
+  }
+}
+</style>