feat(mhzc-web): 入口文案/登录态/深链/混合首页多页调整

首页 home2:
- 「碳数字身份证」卡办证指南改为「开始办证」,点击改为 iframe 跳碳证中心
- 注释掉「共性能力」section 及其在 sectionIds 里的位置
- 顶 hero 第三张卡标题由「绿色服务」改为「绿色低碳服务」
- 「核心底座」文案去掉"基础底座上海枢纽"措辞,简化为「国家区块链网络」
- 「申请服务」openService 改为登录态判断:未登录跳 /view/mhzc/login,已登录 iframe 进碳证中心

服务中心 fwsc:
- 碳金融市场卡按钮「查看金融产品」→「走进绿金平台」,链接到 https://www.unionecredit.com/greenfinance/#/home
- goToPage 增加外链识别(/^https?:\/\// → window.open _blank),同时把按钮 theme 改为 primary 统一三卡样式

数据列表 sjlbc:
- 隐藏「浏览次数」统计块

行业专题 hyzt:
- 三张卡按钮文案硬编码为「进入专题」,不再读 item.btnText / defaultBtnText,绕开部署包数据未刷新的问题

企业出海 qych:
- 深链(?section=section0/1/2)时 v-if 隐藏 landing,配合 sectionIds 响应式 + watch.$route.query.section + activated 钩子
  解决「先跳到首页三卡再滚到目标 section」的闪屏,直接落在目标 section
- 航运燃料/低碳政策「国际航运碳足迹标识认证平台」立即访问改 showComingSoon()
- 引入 comingSoonMixin 修复 this.showComingSoon 未定义导致点击无响应的老 bug
- IMO/海事 一网通办卡改名为「国际海事组织(IMO)」,链接到 https://www.imo.org/en/
- #section2 国际航运碳足迹标识认证平台 h4 加 white-space: nowrap 避免标题换行

设置 settings:
- 行业专题 hyztList 航运燃料 btnText 由「进入交易大厅」改为「进入专题」

页脚 footer:
- 基础设施文案「国家区块链网络基础底座」→「国家区块链网络」

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
liulong 2026-06-16 00:02:46 +08:00
parent 0b8ea2cdf0
commit 2084a27dec
7 changed files with 95 additions and 34 deletions

View File

@ -89,7 +89,7 @@
<div class="footer-copyright"> <div class="footer-copyright">
<span class="footer-bar-line">©2025可信碳信息网版权所有</span> <span class="footer-bar-line">©2025可信碳信息网版权所有</span>
<span class="footer-bar-line">技术支持上海市宝山区大数据中心</span> <span class="footer-bar-line">技术支持上海市宝山区大数据中心</span>
<span class="footer-bar-line">基础设施国家区块链网络基础底座</span> <span class="footer-bar-line">基础设施国家区块链网络</span>
</div> </div>
</div> </div>
</div> </div>

View File

@ -72,7 +72,7 @@
</div> </div>
<!-- 碳金融市场 --> <!-- 碳金融市场 -->
<div class="service-card" @click="goToPage()"> <div class="service-card" @click="goToPage('https://www.unionecredit.com/greenfinance/#/home')">
<div class="service-card-inner"> <div class="service-card-inner">
<div class="service-card-header cyan-header"> <div class="service-card-header cyan-header">
<!-- <span class="service-card-num">03</span> --> <!-- <span class="service-card-num">03</span> -->
@ -80,7 +80,7 @@
</div> </div>
<p class="service-card-desc">打通"碳""金融"的通道提供碳质押碳回购绿色信贷及碳基金对接服务</p> <p class="service-card-desc">打通"碳""金融"的通道提供碳质押碳回购绿色信贷及碳基金对接服务</p>
<div class="service-card-buttons"> <div class="service-card-buttons">
<t-button theme="default" variant="base" @click.stop="goToPage()">查看金融产品</t-button> <t-button theme="primary" @click.stop="goToPage('https://www.unionecredit.com/greenfinance/#/home')">走进绿金平台</t-button>
<!-- <t-button theme="primary" @click.stop="goToPage('/tjrsc')">金融机构入驻</t-button> --> <!-- <t-button theme="primary" @click.stop="goToPage('/tjrsc')">金融机构入驻</t-button> -->
</div> </div>
</div> </div>
@ -105,11 +105,16 @@ export default {
this.$router.push('/view/mhzc/home'); this.$router.push('/view/mhzc/home');
}, },
goToPage(path) { goToPage(path) {
if (path) { if (!path) {
this.$router.push(path);
} else {
this.$message.info('敬请期待'); this.$message.info('敬请期待');
return;
} }
//
if (/^https?:\/\//.test(path)) {
window.open(path, '_blank');
return;
}
this.$router.push(path);
} }
} }
}; };

View File

@ -20,10 +20,10 @@
<p class="sjsc-desc">{{ sjscInfo.sjms || '暂无描述' }}</p> <p class="sjsc-desc">{{ sjscInfo.sjms || '暂无描述' }}</p>
</div> </div>
<div class="sjsc-info-stats" v-if="sjscInfo.llcs"> <div class="sjsc-info-stats" v-if="sjscInfo.llcs">
<div class="stat-item" v-if="sjscInfo.llcs"> <!-- <div class="stat-item" v-if="sjscInfo.llcs">
<span class="stat-value">{{ sjscInfo.llcs }}</span> <span class="stat-value">{{ sjscInfo.llcs }}</span>
<span class="stat-label">浏览次数</span> <span class="stat-label">浏览次数</span>
</div> </div> -->
</div> </div>
</div> </div>

View File

@ -67,7 +67,7 @@
<div class="card-title">碳数字身份证</div> <div class="card-title">碳数字身份证</div>
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="card-btn" @click="handleNavigate(buttonLinks['办证指南'])">办证指南</div> <div class="card-btn" @click="handleIframeNavigate(buttonLinks['碳证中心'])">开始办证</div>
<div class="card-btn" @click="handleIframeNavigate(buttonLinks['碳证查询'])">碳证查询</div> <div class="card-btn" @click="handleIframeNavigate(buttonLinks['碳证查询'])">碳证查询</div>
<div class="card-btn" @click="handleIframeNavigate(buttonLinks['碳证核验'])">碳证核验</div> <div class="card-btn" @click="handleIframeNavigate(buttonLinks['碳证核验'])">碳证核验</div>
<div class="card-btn" @click="handleNavigate(buttonLinks['场景推介'])">场景推介</div> <div class="card-btn" @click="handleNavigate(buttonLinks['场景推介'])">场景推介</div>
@ -86,7 +86,7 @@
</div> </div>
<div class="hero-card green-card"> <div class="hero-card green-card">
<div class="card-header"> <div class="card-header">
<div class="card-title">绿色服务</div> <div class="card-title">绿色低碳服务</div>
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="card-btn" @click="handleNavigate(buttonLinks['服务市场'])">服务市场</div> <div class="card-btn" @click="handleNavigate(buttonLinks['服务市场'])">服务市场</div>
@ -140,7 +140,8 @@
</div> </div>
</section> </section>
<!-- 共性能力模块 --> <!-- 共性能力模块 首页共性能力页面暂时去掉后续会启动核心驱动下一个就是企业出海 -->
<!--
<section class="capability-section snap-section" id="section-capability"> <section class="capability-section snap-section" id="section-capability">
<div class="home-shelf home-shelf--capability"> <div class="home-shelf home-shelf--capability">
<div class="capability-header"> <div class="capability-header">
@ -149,7 +150,7 @@
<h3 class="capability-title-text">共性能力</h3> <h3 class="capability-title-text">共性能力</h3>
<span class="home-section-title-bar capability-title-bar"></span> <span class="home-section-title-bar capability-title-bar"></span>
</div> </div>
<!-- <p class="capability-desc">五大核心能力全面支撑企业绿色转型</p> --> <p class="capability-desc">五大核心能力全面支撑企业绿色转型</p>
</div> </div>
</div> </div>
@ -165,6 +166,7 @@
</div> </div>
</div> </div>
</section> </section>
-->
<!-- 企业出海模块 --> <!-- 企业出海模块 -->
<section class="overseas2-section snap-section" id="section-overseas"> <section class="overseas2-section snap-section" id="section-overseas">
@ -354,6 +356,7 @@ import { calcHomeFigmaScale } from '@/pages/index/utils/home-figma-scale';
import portalFigmaScaleMixin from '@/pages/index/utils/portal-figma-scale-mixin'; import portalFigmaScaleMixin from '@/pages/index/utils/portal-figma-scale-mixin';
import fullpageScrollMixin from '@/pages/index/utils/fullpage-scroll-mixin'; import fullpageScrollMixin from '@/pages/index/utils/fullpage-scroll-mixin';
import comingSoonMixin from '@/pages/index/utils/coming-soon-mixin'; import comingSoonMixin from '@/pages/index/utils/coming-soon-mixin';
import { hasLogin } from '@/pages/index/api/login';
export default { export default {
name: 'Home2Index', name: 'Home2Index',
@ -367,7 +370,7 @@ export default {
newsLoading: true, newsLoading: true,
scrollRoot: null, scrollRoot: null,
sectionOffsets: [], sectionOffsets: [],
sectionIds: ['section-hero', 'section-core', 'section-capability', 'section-overseas', 'section-news', 'section-partner', 'section-bottom'], sectionIds: ['section-hero', 'section-core', /* 'section-capability' 共性能力模块暂去掉 */ 'section-overseas', 'section-news', 'section-partner', 'section-bottom'],
// section IntersectionObserver // section IntersectionObserver
activeSectionIndex: 0, activeSectionIndex: 0,
coreSelectedIndex: 3, coreSelectedIndex: 3,
@ -393,7 +396,7 @@ export default {
{ {
name1: '核心底座', name1: '核心底座',
name2: '国家区块链网络', name2: '国家区块链网络',
desc: '依托区块链网络基础底座上海枢纽,确保每一笔碳数据拥有唯一的"链上基因",实现国家级权威存证与不可篡改。', 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, iconWidth: 192,
iconHeight: 183 iconHeight: 183
@ -711,11 +714,14 @@ export default {
} }
}, },
openService() { openService() {
if (location.host.indexOf('cciw') >= 0) { //
window.open('http://101.230.193.133:8888/') if (!hasLogin()) {
} else { window.location.href = '/view/mhzc/login';
window.open('http://carbon_did.liantu.tech/'); return;
} }
// iframe
const url = `${this.buttonLinkHost}${this.buttonLinks['碳证中心']}`;
this.$emit('gotoIfreamPage', url);
}, },

View File

@ -26,7 +26,7 @@
<p class="service-card-desc">{{ item.desc }}</p> <p class="service-card-desc">{{ item.desc }}</p>
<div class="service-card-buttons"> <div class="service-card-buttons">
<t-button theme="primary" @click.stop="goToHref(item.href)"> <t-button theme="primary" @click.stop="goToHref(item.href)">
{{ item.btnText || defaultBtnText(index) }} 进入专题
</t-button> </t-button>
</div> </div>
</div> </div>
@ -52,9 +52,6 @@ export default {
...mapState('settings', ['hyztList']), ...mapState('settings', ['hyztList']),
}, },
methods: { methods: {
defaultBtnText(index) {
return index === 2 ? '进入交易大厅' : '进入专题';
},
goToHref(href) { goToHref(href) {
if (href && href.startsWith('http')) { if (href && href.startsWith('http')) {
window.open(href, '_blank'); window.open(href, '_blank');

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="compliance-portal"> <div class="compliance-portal">
<!-- 首屏标题区 + 三大专题入口 --> <!-- 首屏标题区 + 三大专题入口 -->
<div id="section-landing" class="qych-snap-section qych-landing"> <div v-if="!isLandingHidden" id="section-landing" class="qych-snap-section qych-landing">
<div class="banner-section"> <div class="banner-section">
<div class="banner-inner page-content-wrap"> <div class="banner-inner page-content-wrap">
<h1 class="banner-title"> <h1 class="banner-title">
@ -216,9 +216,9 @@
<div class="apply-service-card card1"> <div class="apply-service-card card1">
<div class="card-item1 card-item--with-action"> <div class="card-item1 card-item--with-action">
<div class="card-body"> <div class="card-body">
<h4>海事 一网通办</h4> <h4>国际海事组织(IMO)</h4>
<p>上海港船舶低碳合规政务官方办理入口</p> <p>了解国际航运碳足迹标识最新动态</p>
<div class="open-page" @click="goPage('https://zwfw.msa.gov.cn/')"> <div class="open-page" @click="goPage('https://www.imo.org/en/')">
立即访问 立即访问
</div> </div>
</div> </div>
@ -233,9 +233,9 @@
<div class="apply-service-card card2"> <div class="apply-service-card card2">
<div class="card-item2 card-item--with-action"> <div class="card-item2 card-item--with-action">
<div class="card-body"> <div class="card-body">
<h4>国际航运绿色能源认证平台</h4> <h4>国际航运碳足迹标识认证平台</h4>
<p>航运绿色燃料全链条认证合规服务平台</p> <p>基于国家区块链网络打造的符合国际互认要求的碳足迹服务平台</p>
<div class="open-page" @click="goPage('https://www.lingang.gov.cn/')"> <div class="open-page" @click="showComingSoon()">
立即访问 立即访问
</div> </div>
</div> </div>
@ -265,9 +265,11 @@
<script> <script>
import serviceCardIcon1 from '../../assets/qych/service-card-icon-1.png' import serviceCardIcon1 from '../../assets/qych/service-card-icon-1.png'
import serviceCardIcon2 from '../../assets/qych/service-card-icon-2.png' import serviceCardIcon2 from '../../assets/qych/service-card-icon-2.png'
import comingSoonMixin from '@/pages/index/utils/coming-soon-mixin';
export default { export default {
name: 'CompliancePortal', name: 'CompliancePortal',
mixins: [comingSoonMixin],
data() { data() {
return { return {
serviceCardIcon1, serviceCardIcon1,
@ -275,7 +277,10 @@ export default {
isScrolling: false, isScrolling: false,
scrollThreshold: 1, scrollThreshold: 1,
scrollRoot: null, scrollRoot: null,
sectionIds: ['section-landing', 'section0', 'section1', 'section2'], /** 全量 sectionId 列表,保留 landing 供直接访问 /qych 时使用 */
allSectionIds: ['section-landing', 'section0', 'section1', 'section2'],
/** 深链目标 sectionId用于导航时跳过 landing */
deepLinkSectionId: '',
navList: [ navList: [
{ {
cardTitle: '欧盟电池法规', cardTitle: '欧盟电池法规',
@ -288,18 +293,17 @@ export default {
}, },
{ {
cardTitle: 'CBAM(碳边境调节机制)', cardTitle: 'CBAM(碳边境调节机制)',
cardDesc: '进口高碳产品碳关税申报与成本测算2026 年起正式实施。', cardDesc: '欧盟进口高碳产品碳关税申报与成本测算2026 年起正式实施。',
btnText: '进入专题', btnText: '进入专题',
headerClass: 'green-header', headerClass: 'green-header',
sectionId: 'section1', sectionId: 'section1',
index: 1, index: 1,
isActive: false, isActive: false,
externalLink: 'https://www.ouyeel.com/cbam/login',
}, },
{ {
cardTitle: '航运燃料', cardTitle: '航运燃料',
cardDesc: 'LNG、绿甲醇、绿氨等多元低碳燃料转型政策与系统入口。', cardDesc: 'LNG、绿甲醇、绿氨等多元低碳燃料转型政策与系统入口。',
btnText: '进入交易大厅', btnText: '进入专题',
headerClass: 'purple-header', headerClass: 'purple-header',
sectionId: 'section2', sectionId: 'section2',
index: 2, index: 2,
@ -308,6 +312,22 @@ export default {
], ],
}; };
}, },
computed: {
/** 深链(?section=xxx时跳过 landing让用户直接落在目标 section */
isLandingHidden() {
return !!this.deepLinkSectionId;
},
/** sectionIds 响应式化landing 隐藏后从列表中移除,避免滚轮分页引用已不存在的节点 */
sectionIds() {
return this.isLandingHidden
? this.allSectionIds.filter((id) => id !== 'section-landing')
: this.allSectionIds;
},
},
created() {
// created mounted
this.deepLinkSectionId = (this.$route && this.$route.query && this.$route.query.section) || '';
},
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.scrollRoot = document.querySelector('.content-wrap'); this.scrollRoot = document.querySelector('.content-wrap');
@ -317,6 +337,34 @@ export default {
this.scrollToSectionFromQuery(); this.scrollToSectionFromQuery();
}); });
}, },
activated() {
// keep-alive mounted
this.$nextTick(() => {
if (!this.scrollRoot) {
this.scrollRoot = document.querySelector('.content-wrap');
if (this.scrollRoot) {
this.scrollRoot.addEventListener('wheel', this.handleWheel, { passive: false });
}
}
this.scrollToSectionFromQuery();
});
},
watch: {
// query main.vue scrollTop=0
'$route.query.section'(section) {
// landing / + sectionIds
this.deepLinkSectionId = section || '';
if (!section) return;
this.$nextTick(() => {
const sectionIndex = this.sectionIds.indexOf(section);
if (sectionIndex < 0) return;
// main.vue .content-wrap 0
window.setTimeout(() => {
this.scrollRootToSection(sectionIndex, false);
}, 120);
});
},
},
beforeDestroy() { beforeDestroy() {
if (this.scrollRoot) { if (this.scrollRoot) {
this.scrollRoot.removeEventListener('wheel', this.handleWheel); this.scrollRoot.removeEventListener('wheel', this.handleWheel);
@ -1296,6 +1344,11 @@ body {
max-width: calc(100% - 96px); max-width: calc(100% - 96px);
} }
/* 航运燃料 - 国际航运碳足迹标识认证平台 标题不换行 */
#section2 .apply-service-card.card2 .card-body h4 {
white-space: nowrap;
}
#section2 .card-item1 .open-page, #section2 .card-item1 .open-page,
#section2 .card-item2 .open-page, #section2 .card-item2 .open-page,
.banner3 .card-item1 .open-page, .banner3 .card-item1 .open-page,

View File

@ -58,7 +58,7 @@ export default {
{ {
title: '航运燃料', title: '航运燃料',
href: '', href: '',
btnText: '进入交易大厅', btnText: '进入专题',
category: ['产品碳足迹', '国际认证'], category: ['产品碳足迹', '国际认证'],
desc: '加强国际交流,深化绿色航运国际合作,以点带面协同推进航运绿色低碳转型发展。', desc: '加强国际交流,深化绿色航运国际合作,以点带面协同推进航运绿色低碳转型发展。',
bgImg: '3.png', bgImg: '3.png',