feat:更新核心驱动页面UI设计

txw-mhzc-web/src/pages/index/views/gxnlpt/index.vue

@@ -76,9 +76,12 @@
                   </div>
                 </article>
               </div>
-              <div v-if="item.displayList.length" class="gxnlpt-more-wrap">
+              <div
-                <button type="button" class="gxnlpt-more" @click="goViewMore(item)">
+                v-if="item.cardList.length > item.previewSize"
-                  查看更多&gt;&gt;
+                class="gxnlpt-more-wrap"
+              >
+                <button type="button" class="gxnlpt-more" @click="toggleViewMore(item)">
+                  {{ item.expanded ? '收起' : '查看更多>>' }}
                 </button>
               </div>
             </template>
@@ -111,6 +114,9 @@ const DEMO_BY_CATEGORY = {
     { bt1: '园区碳管理平台', qymc: '北京绿色交易所', bqjh: '["园区碳管理","能碳协同"]', scbz: 'N' },
     { bt1: '供应链碳数据核算', qymc: '上海环境能源交易所', bqjh: '["范围三","供应链","数据填报"]', scbz: 'N' },
     { bt1: '碳资产管理核算', qymc: '广州碳排放权交易中心', bqjh: '["碳资产","年度盘查","全国"]', scbz: 'Y' },
+    { bt1: '组织碳核查数据填报', qymc: '中国标准化研究院', bqjh: '["组织碳","数据填报","MRV"]', scbz: 'N' },
+    { bt1: '重点行业碳排放核算', qymc: '国家应对气候变化战略研究和国际合作中心', bqjh: '["重点行业","核算指南"]', scbz: 'N' },
+    { bt1: '碳排放监测与核算平台', qymc: '生态环境部环境规划院', bqjh: '["在线监测","核算","平台"]', scbz: 'N' },
   ],
   'content-2': [
     { bt1: '第三方碳核查服务', qymc: '中国船级社质量认证公司', bqjh: '["碳核查","第三方核查","重点排放单位"]', scbz: 'N' },
@@ -119,6 +125,8 @@ const DEMO_BY_CATEGORY = {
     { bt1: '碳中和认证', qymc: '中国节能协会碳中和专业委员会', bqjh: '["碳中和","认证","抵消"]', scbz: 'N' },
     { bt1: '自愿减排项目验证', qymc: '中国电力企业联合会', bqjh: '["自愿减排","验证","MRV"]', scbz: 'N' },
     { bt1: '零碳工厂评价', qymc: '钛和认证（上海）有限公司', bqjh: '["零碳工厂","评价认证"]', scbz: 'N' },
+    { bt1: '产品碳足迹认证', qymc: '中国质量认证中心', bqjh: '["产品碳足迹","认证"]', scbz: 'N' },
+    { bt1: '绿色供应链认证', qymc: '中环联合认证中心', bqjh: '["供应链","绿色认证"]', scbz: 'N' },
   ],
   'content-3': [
     { bt1: '全国碳配额交易', qymc: '上海环境能源交易所', bqjh: '["碳配额","全国碳市场","交易"]', scbz: 'N' },
@@ -127,6 +135,8 @@ const DEMO_BY_CATEGORY = {
     { bt1: '区域试点配额转让', qymc: '深圳碳排放权交易所', bqjh: '["试点市场","配额转让"]', scbz: 'N' },
     { bt1: '碳资产托管服务', qymc: '湖北碳排放权交易中心', bqjh: '["托管","碳资产","履约"]', scbz: 'N' },
     { bt1: '国际 VCS 碳信用交易', qymc: '中金公司碳交易部', bqjh: '["VCS","国际碳信用","跨境"]', scbz: 'N' },
+    { bt1: '碳配额大宗协议转让', qymc: '天津排放权交易所', bqjh: '["大宗交易","配额"]', scbz: 'N' },
+    { bt1: '碳普惠交易服务', qymc: '重庆碳排放权交易中心', bqjh: '["碳普惠","交易"]', scbz: 'N' },
   ],
   'content-4': [
     { bt1: '绿色信贷融资', qymc: '中国工商银行绿色金融部', bqjh: '["绿色信贷","融资","转型金融"]', scbz: 'N' },
@@ -135,6 +145,8 @@ const DEMO_BY_CATEGORY = {
     { bt1: '碳基金投资管理', qymc: '华夏基金碳中和投资部', bqjh: '["碳基金","ESG","投资"]', scbz: 'N' },
     { bt1: '绿色债券发行顾问', qymc: '中信证券投行委员会', bqjh: '["绿色债券","发行","顾问"]', scbz: 'N' },
     { bt1: '企业碳配额回购融资', qymc: '国家开发银行行业一部', bqjh: '["回购融资","配额","全国"]', scbz: 'N' },
+    { bt1: '转型金融贷款服务', qymc: '中国银行绿色金融事业部', bqjh: '["转型金融","贷款"]', scbz: 'N' },
+    { bt1: '碳减排支持工具', qymc: '中国人民银行货币政策司', bqjh: '["碳减排","支持工具"]', scbz: 'N' },
   ],
   'content-5': [
     { bt1: '企业碳达峰路径规划', qymc: '清华大学碳中和研究院', bqjh: '["碳达峰","路径规划","咨询"]', scbz: 'N' },
@@ -143,6 +155,8 @@ const DEMO_BY_CATEGORY = {
     { bt1: '碳信息披露辅导', qymc: '普华永道气候变化与可持续发展部', bqjh: '["信息披露","CDP","ESG报告"]', scbz: 'N' },
     { bt1: '林业碳汇项目开发咨询', qymc: '北京林业大学碳汇研究中心', bqjh: '["林业碳汇","项目开发","CCER"]', scbz: 'N' },
     { bt1: '零碳园区规划咨询', qymc: '中国城市规划设计研究院', bqjh: '["零碳园区","规划","综合能源"]', scbz: 'N' },
+    { bt1: '碳市场政策解读咨询', qymc: '国务院发展研究中心资源与环境政策研究所', bqjh: '["政策解读","碳市场"]', scbz: 'N' },
+    { bt1: '企业 ESG 碳议题咨询', qymc: '德勤中国可持续发展服务部', bqjh: '["ESG","碳议题","咨询"]', scbz: 'N' },
   ],
 };
 
@@ -177,6 +191,7 @@ function buildCategoryList() {
     displayList: [],
     total: 0,
     previewSize: PREVIEW_SIZE,
+    expanded: false,
   }));
 }
 
@@ -315,7 +330,8 @@ export default {
           });
         cat.cardList = list;
         cat.total = list.length;
-        cat.displayList = list.slice(0, cat.previewSize);
+        cat.expanded = false;
+        this.refreshDisplayList(cat);
       });
     },
     applyDemoFallback() {
@@ -330,9 +346,19 @@ export default {
           })
         );
         cat.total = cat.cardList.length;
-        cat.displayList = cat.cardList.slice(0, cat.previewSize);
+        cat.expanded = false;
+        this.refreshDisplayList(cat);
       });
     },
+    refreshDisplayList(category) {
+      category.displayList = category.expanded
+        ? category.cardList.slice()
+        : category.cardList.slice(0, category.previewSize);
+    },
+    toggleViewMore(category) {
+      category.expanded = !category.expanded;
+      this.refreshDisplayList(category);
+    },
     async loadAllSections() {
       this.pageLoading = true;
       this.useDemoData = false;
@@ -482,9 +508,6 @@ export default {
       }
       this.$router.push({ path: '/tfwsc', query: { id: card.gxUuid } });
     },
-    goViewMore(category) {
-      this.$router.push({ path: '/tfwsc', query: { from: 'gxnlpt', section: category.id } });
-    },
     async handleCollect(card) {
       if (this.useDemoData || !card.gxUuid) {
         card.scbz = card.scbz === 'Y' ? 'N' : 'Y';

txw-mhzc-web/src/pages/index/views/home2/index.vue

@@ -85,10 +85,19 @@
 
           <div class="core-grid">
             <div class="core-item" v-for="(item, index) in coreList" :key="index">
-              <div class="core-icon" :style="{ backgroundImage: 'url(' + item.icon + ')' }"></div>
+              <div class="core-item-visual">
-              <div class="core-name1">{{ item.name1 }}</div>
+                <img
-              <div class="core-name2">{{ item.name2 }}</div>
+                  class="core-icon"
-              <div class="core-desc">{{ item.desc }}</div>
+                  :src="item.icon"
+                  :alt="item.name1"
+                  :style="{ width: item.iconWidth + 'px', height: item.iconHeight + 'px' }"
+                />
+                <div class="core-name1-bar">
+                  <span class="core-name1">{{ item.name1 }}</span>
+                </div>
+              </div>
+              <h4 class="core-name2">{{ item.name2 }}</h4>
+              <p class="core-desc">{{ item.desc }}</p>
             </div>
           </div>
         </div>
@@ -330,25 +339,33 @@ export default {
           name1: '核心底座',
           name2: '国家区块链网络',
           desc: '依托国家区块链网络，确保每一笔碳数据拥有唯一的"链上基因"，实现国家级权威存证与不可篡改。',
-          icon: require('@/pages/index/views/home2/assets/core-base@2x.png')
+          icon: require('@/pages/index/views/home2/assets/core-base@2x.png'),
+          iconWidth: 192,
+          iconHeight: 183
         },
         {
           name1: '数据引擎',
           name2: '全场景可信流通',
           desc: '打破碳数据孤岛，支持从生产端到交易端的全链路数据锚定，让碳数据在多场景下实现秒级核验。',
-          icon: require('@/pages/index/views/home2/assets/data-engine@2x.png')
+          icon: require('@/pages/index/views/home2/assets/data-engine@2x.png'),
+          iconWidth: 210,
+          iconHeight: 183
         },
         {
           name1: '身份基石',
           name2: '碳数字身份体系',
           desc: '为企业构建唯一的链上"数字身份"，集成资质核验证、资产托管与信用评级，打造绿色经济的数字通行证。',
-          icon: require('@/pages/index/views/home2/assets/identity-base@2x.png')
+          icon: require('@/pages/index/views/home2/assets/identity-base@2x.png'),
+          iconWidth: 212,
+          iconHeight: 183
         },
         {
           name1: '闭环赋能',
           name2: '精准服务企业走出去',
           desc: '服务企业出海、国际互认。直击跨境合规与碳交易撮合痛点，通过智能合约实现供需精准匹配，助力企业低碳转型提速。',
-          icon: require('@/pages/index/views/home2/assets/closed-loop@2x.png')
+          icon: require('@/pages/index/views/home2/assets/closed-loop@2x.png'),
+          iconWidth: 211,
+          iconHeight: 183
         }
       ],
       hotSearchTags: ["碳达峰", "碳核查", "ESG", "碳资产管理", "ISO 14067"],
@@ -1343,63 +1360,85 @@ export default {
 
 .core-grid {
   display: grid;
-  grid-template-columns: repeat(4, minmax(0, 240px));
+  grid-template-columns: repeat(4, minmax(0, 1fr));
-  justify-content: center;
   gap: 32px;
+  max-width: 1100px;
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
   box-sizing: border-box;
 }
 
 .core-item {
-  text-align: center;
+  display: flex;
-  max-width: 240px;
+  flex-direction: column;
-  width: 100%;
+  align-items: center;
-  margin: 0 auto;
+  gap: 14px;
-  padding: 30px 12px;
+  min-width: 0;
-  border-radius: 16px;
+  padding: 1px 24px 0;
-  transition: all 0.3s ease;
+  border-radius: 8px;
   box-sizing: border-box;
+  transition: background-color 0.3s ease;
 }
 
 .core-item:hover {
-  background: #f8fff8;
+  background-color: #f8fff8;
-  transform: translateY(-4px);
+}
+
+.core-item-visual {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
 }
 
 .core-item .core-icon {
-  width: 132px;
+  display: block;
-  height: 132px;
+  margin: 0 auto;
-  margin: 0 auto 24px;
+  object-fit: contain;
-  background-repeat: no-repeat;
+  flex-shrink: 0;
-  background-position: center;
+}
-  background-size: contain;
+
+.core-name1-bar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  margin-top: 0;
+  padding: 4px 8px;
+  border-radius: 4px;
+  box-sizing: border-box;
+  background: linear-gradient(90deg, #ffffff 0%, #e6efff 36.06%, #e6efff 62.5%, #ffffff 100%);
 }
 
 .core-item .core-name1 {
+  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
   font-size: 18px;
-  font-family: SimHei, 黑体;
+  font-weight: 400;
-  font-weight: 700;
+  line-height: 1.4;
-  color: #333;
+  color: #333333;
-  margin-bottom: 8px;
+  white-space: nowrap;
-  background: linear-gradient(90deg, #ffffff 0%, #e6efff 36.06%, #e6efff 62.5%, #ffffff 100%);
-  padding: 4px 12px;
-  border-radius: 4px;
-  display: inline-block;
-  max-width: 100%;
-  width: 210px;
-  box-sizing: border-box;
 }
 
 .core-item .core-name2 {
+  margin: 0;
+  width: 100%;
+  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
   font-size: 22px;
   font-weight: 600;
+  line-height: 1.4;
   color: #1a1a2e;
-  margin-bottom: 16px;
+  text-align: center;
 }
 
 .core-item .core-desc {
-  font-size: 14px;
+  margin: 0;
-  color: #666;
+  width: 100%;
-  line-height: 1.8;
+  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 28px;
+  color: #556659;
   text-align: left;
 }
 
@@ -2437,24 +2476,23 @@ export default {
 
   .core-grid {
     grid-template-columns: 1fr;
-    justify-content: stretch;
     gap: 16px;
+    max-width: none;
   }
 
   .core-item {
-    max-width: none;
+    padding: 1px 16px 0;
-    padding: 20px 16px;
   }
 
   .core-item .core-icon {
-    width: 100px;
+    width: 160px !important;
-    height: 100px;
+    height: auto !important;
-    margin-bottom: 16px;
+    max-height: 150px;
   }
 
   .core-item .core-name1 {
-    font-size: 14px;
+    font-size: 16px;
-    width: auto;
+    white-space: normal;
   }
 
   .core-item .core-name2 {
@@ -2462,7 +2500,8 @@ export default {
   }
 
   .core-item .core-desc {
-    font-size: 13px;
+    font-size: 14px;
+    line-height: 24px;
   }
 
   /* 共性能力区域 */