From 25f6982fd241580beeffcd909a2ad32f91c00cfb Mon Sep 17 00:00:00 2001
From: liulujian <liulujian@liantu.tech>
Date: Fri, 3 Apr 2026 16:31:06 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=9B=E5=BB=BA=E7=A2=B3=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=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

- 实现左侧筛选栏（数据类型：全部、公共数据、因子库、社会性数据）
- 实现右侧数据库卡片列表（2列Grid布局）
- 数据类型标签颜色区分：公共数据/公益数据(绿色)、社会性数据(蓝色)、商业数据(灰色)
- 价格标签：免费(绿色)、付费(橙色)
- 使用NewNav和Footer组件

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/pages/index/views/fwsc/sjsc.vue       | 385 ++++++++++++++++++
 1 file changed, 385 insertions(+)
 create mode 100644 txw-mhzc-web/src/pages/index/views/fwsc/sjsc.vue

diff --git a/txw-mhzc-web/src/pages/index/views/fwsc/sjsc.vue b/txw-mhzc-web/src/pages/index/views/fwsc/sjsc.vue
new file mode 100644
index 0000000..2034171
--- /dev/null
+++ b/txw-mhzc-web/src/pages/index/views/fwsc/sjsc.vue
@@ -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>