feat: 创建碳金融市场页面
- 创建 jrsc.vue 页面，包含左侧筛选栏和右侧金融产品卡片列表 - 实现服务类型筛选（全部、绿色信贷、绿色保险） - 实现服务企业筛选（全部、9家银行） - 实现关键词搜索功能 - 实现6个金融产品卡片的Mock数据展示 - 添加 /fwsc/jrsc 路由配置 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
b286a17ed4
commit
ca7b1a0013
@ -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,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
581
txw-mhzc-web/src/pages/index/views/fwsc/jrsc.vue
Normal file
581
txw-mhzc-web/src/pages/index/views/fwsc/jrsc.vue
Normal file
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user