feat: 创建碳数据市场页面
- 实现左侧筛选栏（数据类型：全部、公共数据、因子库、社会性数据） - 实现右侧数据库卡片列表（2列Grid布局） - 数据类型标签颜色区分：公共数据/公益数据(绿色)、社会性数据(蓝色)、商业数据(灰色) - 价格标签：免费(绿色)、付费(橙色) - 使用NewNav和Footer组件 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
0de9cb3a3f
commit
25f6982fd2
385
txw-mhzc-web/src/pages/index/views/fwsc/sjsc.vue
Normal file
385
txw-mhzc-web/src/pages/index/views/fwsc/sjsc.vue
Normal file
@ -0,0 +1,385 @@
|
||||
<template>
|
||||
<div class="sjsc-page">
|
||||
<NewNav />
|
||||
<div class="main-content">
|
||||
<!-- 当前位置导航 -->
|
||||
<div class="breadcrumb-box">
|
||||
<span class="breadcrumb-text">当前位置：</span>
|
||||
<span class="breadcrumb-link" @click="goHome">首页</span>
|
||||
<span class="breadcrumb-separator">/</span>
|
||||
<span class="breadcrumb-link" @click="goService">服务中心</span>
|
||||
<span class="breadcrumb-separator">/</span>
|
||||
<span class="breadcrumb-current">碳数据市场</span>
|
||||
</div>
|
||||
|
||||
<!-- 页面主体 -->
|
||||
<div class="page-body">
|
||||
<!-- 左侧筛选栏 -->
|
||||
<div class="sidebar">
|
||||
<div class="sidebar-title">数据类型</div>
|
||||
<div class="filter-list">
|
||||
<div
|
||||
v-for="item in dataTypeList"
|
||||
:key="item.value"
|
||||
class="filter-item"
|
||||
:class="{ active: selectedType === item.value }"
|
||||
@click="handleTypeChange(item.value)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧数据库卡片列表 -->
|
||||
<div class="content-area">
|
||||
<div class="card-grid">
|
||||
<div
|
||||
v-for="card in filteredCards"
|
||||
:key="card.id"
|
||||
class="database-card"
|
||||
>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">{{ card.name }}</h3>
|
||||
<div class="card-tags">
|
||||
<span
|
||||
v-for="tag in card.tags"
|
||||
:key="tag"
|
||||
class="tag"
|
||||
:class="getTagClass(tag)"
|
||||
>
|
||||
{{ tag }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="card-desc">{{ card.description }}</p>
|
||||
<div class="card-footer">
|
||||
<span class="price-tag" :class="card.price === '免费' ? 'free' : 'paid'">
|
||||
{{ card.price }}
|
||||
</span>
|
||||
<t-button theme="primary" size="small" variant="outline">
|
||||
查看数据库
|
||||
</t-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NewNav from '@/pages/index/components/new-nav/index.vue';
|
||||
import Footer from '@/pages/index/components/footer/index.vue';
|
||||
|
||||
export default {
|
||||
name: 'SjscPage',
|
||||
components: {
|
||||
NewNav,
|
||||
Footer
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectedType: 'all',
|
||||
dataTypeList: [
|
||||
{ label: '全部', value: 'all' },
|
||||
{ label: '公共数据', value: 'public' },
|
||||
{ label: '因子库', value: 'factor' },
|
||||
{ label: '社会性数据', value: 'social' }
|
||||
],
|
||||
cardList: [
|
||||
{
|
||||
id: 1,
|
||||
name: '宝山绿色低碳数据创新实验室',
|
||||
description: '汇聚全国优质第三方服务机构，提供从核算到认证的全链条专业服务。',
|
||||
tags: ['公共数据', '社会性数据'],
|
||||
price: '免费'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'HiQLCD数据库',
|
||||
description: '汇聚全国优质第三方服务机构，提供从核算到认证的全链条专业服务。',
|
||||
tags: ['商业数据'],
|
||||
price: '付费'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '天工数据库',
|
||||
description: '汇聚全国优质第三方服务机构，提供从核算到认证的全链条专业服务。',
|
||||
tags: ['公益数据'],
|
||||
price: '免费'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'ecoinvent数据库',
|
||||
description: '汇聚全国优质第三方服务机构，提供从核算到认证的全链条专业服务。',
|
||||
tags: ['商业数据'],
|
||||
price: '付费'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: 'ecoinvent数据库',
|
||||
description: '汇聚全国优质第三方服务机构，提供从核算到认证的全链条专业服务。',
|
||||
tags: ['商业数据'],
|
||||
price: '付费'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: '天工数据库',
|
||||
description: '汇聚全国优质第三方服务机构，提供从核算到认证的全链条专业服务。',
|
||||
tags: ['公益数据'],
|
||||
price: '免费'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
filteredCards() {
|
||||
if (this.selectedType === 'all') {
|
||||
return this.cardList;
|
||||
}
|
||||
const typeMap = {
|
||||
'public': '公共数据',
|
||||
'factor': '因子库',
|
||||
'social': '社会性数据'
|
||||
};
|
||||
const targetTag = typeMap[this.selectedType];
|
||||
return this.cardList.filter(card => card.tags.includes(targetTag));
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goHome() {
|
||||
this.$router.push('/view/mhzc/home');
|
||||
},
|
||||
goService() {
|
||||
this.$router.push('/fwsc/fwsc');
|
||||
},
|
||||
handleTypeChange(value) {
|
||||
this.selectedType = value;
|
||||
},
|
||||
getTagClass(tag) {
|
||||
const classMap = {
|
||||
'公共数据': 'tag-green',
|
||||
'社会性数据': 'tag-blue',
|
||||
'商业数据': 'tag-gray',
|
||||
'公益数据': 'tag-green'
|
||||
};
|
||||
return classMap[tag] || 'tag-gray';
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.sjsc-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding-top: 64px;
|
||||
}
|
||||
|
||||
// 当前位置导航
|
||||
.breadcrumb-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 48px;
|
||||
padding: 0 200px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.breadcrumb-text {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.breadcrumb-link {
|
||||
font-size: 14px;
|
||||
color: #009a29;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: #007a1f;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-separator {
|
||||
margin: 0 8px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.breadcrumb-current {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
// 页面主体
|
||||
.page-body {
|
||||
display: flex;
|
||||
padding: 24px 200px;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
// 左侧筛选栏
|
||||
.sidebar {
|
||||
position: sticky;
|
||||
top: 88px;
|
||||
width: 220px;
|
||||
height: fit-content;
|
||||
min-width: 220px;
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
padding-bottom: 12px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.filter-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
padding: 10px 16px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: #009a29;
|
||||
background: #f0f9f0;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #fff;
|
||||
background: #009a29;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background: #007a1f;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 右侧内容区
|
||||
.content-area {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
// 数据库卡片网格
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.database-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 24px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px rgba(0, 154, 41, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin-bottom: 12px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.card-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.tag-green {
|
||||
color: #2e7d32;
|
||||
background: #e8f5e9;
|
||||
}
|
||||
|
||||
.tag-blue {
|
||||
color: #1565c0;
|
||||
background: #e3f2fd;
|
||||
}
|
||||
|
||||
.tag-gray {
|
||||
color: #666;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.tag-orange {
|
||||
color: #e65100;
|
||||
background: #fff3e0;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
margin-bottom: 20px;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #666;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.price-tag {
|
||||
padding: 4px 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
border-radius: 4px;
|
||||
|
||||
&.free {
|
||||
color: #2e7d32;
|
||||
background: #e8f5e9;
|
||||
}
|
||||
|
||||
&.paid {
|
||||
color: #e65100;
|
||||
background: #fff3e0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user