2436 lines
62 KiB
Vue
2436 lines
62 KiB
Vue
<template>
|
||
<div class="page-box">
|
||
<!-- 顶部菜单栏 -->
|
||
<!-- <div class="nav-box">
|
||
<div class="logo-box">
|
||
<img src="@/pages/index/assets/logo-name.png">
|
||
</div>
|
||
<div class="menu-box">
|
||
<div class="menu-title meun-title-active">
|
||
<img src="@/pages/index/assets/nav-home.png" width="24px" height="24px">
|
||
<span> 首页</span>
|
||
</div>
|
||
<div class="menu-title">碳证中心</div>
|
||
<div class="menu-title">服务中心</div>
|
||
<div class="menu-title">共性能力</div>
|
||
<div class="menu-title">企业出海</div>
|
||
<div class="menu-title">行业专题</div>
|
||
</div>
|
||
<div class="option-box">
|
||
<div class="gzt">
|
||
<img src="@/pages/index/assets/home-gzt-icon.png" />
|
||
<span> 工作台</span>
|
||
</div>
|
||
<div style="margin-left:20px; cursor: pointer;">激活</div>
|
||
<div>|</div>
|
||
<div style="cursor: pointer;">登录</div>
|
||
</div>
|
||
</div> -->
|
||
|
||
<!-- 主页面 -->
|
||
<div class="container">
|
||
<!-- 顶部背景轮播 -->
|
||
<div class="top-box">
|
||
<t-swiper class="top-banner-swiper" animation="fade" :height="topBannerHeight" :interval="6000" :duration="500" :loop="true" :autoplay="true" theme="dark">
|
||
<t-swiper-item v-for="(src, idx) in topBannerImages" :key="idx">
|
||
<div class="banner-slide" :style="{ backgroundImage: `url(${src})` }" />
|
||
</t-swiper-item>
|
||
</t-swiper>
|
||
|
||
<div class="top-box-inner">
|
||
<div class="top-title">
|
||
<img src="@/pages/index/assets/home-top-title.png">
|
||
</div>
|
||
<div class="top-title-desc">
|
||
<img src="@/pages/index/assets/top-desc-text.png" />
|
||
</div>
|
||
|
||
<div class="top-search-box">
|
||
<div class="search-box">
|
||
<input type="text" v-model="inputValue" placeholder="搜索碳资产、企业、服务" />
|
||
<div class="search-btn" @click="handleSearch">
|
||
搜索
|
||
</div>
|
||
</div>
|
||
<div class="top-search-hot">
|
||
<div class="hot-tag" v-for="(tag, index) in hotSearchTags" :key="index" @click="handleHotSearch(tag)">{{ tag }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="hero-cards">
|
||
<div class="hero-card blue-card">
|
||
<div class="card-header">
|
||
<div class="card-title">碳数字身份证</div>
|
||
</div>
|
||
<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="handleNavigate(buttonLinks['跨境互通'])">跨境互通</div>
|
||
</div>
|
||
</div>
|
||
<div class="hero-card cyan-card">
|
||
<div class="card-header">
|
||
<div class="card-title">国家可信碳链</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="card-btn" @click="handleNavigate(buttonLinks['上链指南'])">上链指南</div>
|
||
<div class="card-btn" @click="handleNavigate(buttonLinks['上链标准'])">上链标准</div>
|
||
<div class="card-btn" @click="handleNavigate(buttonLinks['上链工具'])">上链工具</div>
|
||
<div class="card-btn" @click="handleIframeNavigate(buttonLinks['碳证中心'])">碳证中心</div>
|
||
</div>
|
||
</div>
|
||
<div class="hero-card green-card">
|
||
<div class="card-header">
|
||
<div class="card-title">绿色服务</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="card-btn" @click="handleNavigate(buttonLinks['服务市场'])">服务市场</div>
|
||
<div class="card-btn" @click="handleNavigate(buttonLinks['需求市场'])">需求市场</div>
|
||
<div class="card-btn" @click="handleNavigate(buttonLinks['金融市场'])">金融市场</div>
|
||
<div class="card-btn" @click="handleNavigate(buttonLinks['数据市场'])">数据市场</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="top-box-bottom-over"> </div>
|
||
</div>
|
||
|
||
<!-- 中间核心驱动 -->
|
||
<section class="core-section">
|
||
<div class="section-container">
|
||
<div class="section-title core-title">
|
||
<span class="title-bar"></span>
|
||
<span class="title-text">核心驱动</span>
|
||
</div>
|
||
|
||
<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-name1">{{ item.name1 }}</div>
|
||
<div class="core-name2">{{ item.name2 }}</div>
|
||
<div class="core-desc">{{ item.desc }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 共性能力模块 -->
|
||
<section class="capability-section">
|
||
<div class="section-container capability-container">
|
||
<div class="capability-header">
|
||
<div class="capability-title-group">
|
||
<i class="capability-title-icon"></i>
|
||
<div class="capability-title-content">
|
||
<h3 class="capability-title-text">共性能力</h3>
|
||
<span class="capability-title-bar"></span>
|
||
</div>
|
||
<p class="capability-desc">五大核心能力，全面支撑企业绿色转型</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="capability-grid">
|
||
<div class="capability-card" v-for="(item, index) in capabilityList" :key="index">
|
||
<div class="capability-card-content">
|
||
<img :src="item.icon" :alt="item.name" class="capability-icon" />
|
||
<span class="capability-name">{{ item.name }}</span>
|
||
</div>
|
||
<img src="@/pages/index/assets/home-arrow-right.png" alt="" class="capability-arrow" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 企业出海模块 -->
|
||
<section class="overseas2-section">
|
||
<div class="section-container overseas2-container">
|
||
<div class="overseas2-header">
|
||
<div class="overseas2-title-group">
|
||
<i class="overseas2-title-icon"></i>
|
||
<div class="overseas2-title-content">
|
||
<h3 class="overseas2-title-text">企业出海</h3>
|
||
<span class="overseas2-title-bar"></span>
|
||
</div>
|
||
<p class="overseas2-desc">政策要求、合规指引、案例分享，一站式信息与系统入口</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="overseas2-grid">
|
||
<div class="overseas2-card" v-for="(item, index) in overseas2List" :key="index">
|
||
<div class="overseas2-card-content">
|
||
<img :src="item.icon" :alt="item.name" class="overseas2-icon" />
|
||
<div class="overseas2-text">
|
||
<span class="overseas2-name">{{ item.name }}</span>
|
||
<span class="overseas2-item-desc">{{ item.desc }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="overseas2-btn">{{ item.btnName }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 行业动态 -->
|
||
<section class="news-section">
|
||
<div class="section-container news-container">
|
||
<div class="news-header">
|
||
<div class="news-title-group">
|
||
<i class="news-title-icon"></i>
|
||
<div class="news-title-content">
|
||
<h3 class="news-title-text">行业动态</h3>
|
||
<span class="news-title-bar"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="news-tabs">
|
||
<div class="news-tab" :class="{ 'news-tab-active': activeTab === index }" v-for="(tab, index) in newsTabs" :key="index" @click="activeTab = index">
|
||
{{ tab }}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="news-list">
|
||
<div class="news-item" v-for="(item, index) in currentNewsList" :key="index" @click="handleNewsClick(item)">
|
||
<img v-if="item.src" :src="item.pic" alt="" class="news-pic" />
|
||
<div class="news-content">
|
||
<div class="news-content-top">
|
||
<div class="news-title">{{ item.title }}</div>
|
||
</div>
|
||
<div class="news-content-middle">
|
||
<img src="@/pages/index/assets/alarm.png" class="news-alarm-icon" />
|
||
<span class="news-date">{{ item.date }}</span>
|
||
<span v-if="item.remark" class="news-remark">{{ item.remark }}</span>
|
||
</div>
|
||
<div v-if="item.content" class="news-content-bottom">{{ item.content }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="news-more" @click="handleNewsMore">查看更多</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 行业动态模块 -->
|
||
<!-- <section class="news-section">
|
||
<div class="section-container">
|
||
<div class="section-title center-title">
|
||
<span class="title-bar"></span>
|
||
<span class="title-text">行业动态</span>
|
||
</div>
|
||
<p class="section-subtitle">实时掌握国家政策导向、地方实施动态、行业发展趋势和平台重要更新</p>
|
||
|
||
<div class="news-tabs">
|
||
<div class="news-tab" :class="{ 'news-tab-active': activeTab === index }" v-for="(tab, index) in newsTabs" :key="index" @click="activeTab = index">
|
||
{{ tab }}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="news-list">
|
||
<div class="news-item" v-for="(item, index) in currentNewsList" :key="index" @click="handleNewsClick(item)">
|
||
<img v-if="item.src" :src="item.pic" alt="" class="news-pic" />
|
||
<div class="news-content">
|
||
<div class="news-content-top">
|
||
<div class="news-title">{{ item.title }}</div>
|
||
</div>
|
||
<div class="news-content-middle">
|
||
<img src="@/pages/index/assets/alarm.png" class="news-alarm-icon" />
|
||
<span class="news-date">{{ item.date }}</span>
|
||
<span v-if="item.remark" class="news-remark">{{ item.remark }}</span>
|
||
</div>
|
||
<div v-if="item.content" class="news-content-bottom">{{ item.content }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section> -->
|
||
|
||
<!-- 合作伙伴模块 -->
|
||
<section class="partner-section">
|
||
<div class="section-container">
|
||
<div class="partner-title-area">
|
||
<div class="partner-title-content">
|
||
<div class="partner-title-text">合作伙伴</div>
|
||
<div class="partner-subtitle-text">
|
||
<span class="partner-count-num">{{ partnerCount }}</span> 全国地区的客户
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="partner-scroll-wrapper">
|
||
<div class="partner-scroll-track">
|
||
<div class="partner-row partner-row-forward">
|
||
<div class="partner-item" v-for="(item, index) in partnerRow1" :key="'row1-' + index">
|
||
<div class="partner-logo-box">
|
||
<img :src="item.logo" :alt="item.name" class="partner-icon" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="partner-row partner-row-backward">
|
||
<div class="partner-item" v-for="(item, index) in partnerRow2" :key="'row2-' + index">
|
||
<div class="partner-logo-box">
|
||
<img :src="item.logo" :alt="item.name" class="partner-icon" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="partner-row partner-row-forward">
|
||
<div class="partner-item" v-for="(item, index) in partnerRow3" :key="'row3-' + index">
|
||
<div class="partner-logo-box">
|
||
<img :src="item.logo" :alt="item.name" class="partner-icon" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="partner-row partner-row-backward">
|
||
<div class="partner-item" v-for="(item, index) in partnerRow4" :key="'row4-' + index">
|
||
<div class="partner-logo-box">
|
||
<img :src="item.logo" :alt="item.name" class="partner-icon" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 建立您的碳数字身份 -->
|
||
<div class="bottom-box">
|
||
<div class="content">
|
||
<div class="bottom-box-content-title">立刻获取第一张碳身份证</div>
|
||
<div class="desc">让中国的每一个碳都拥有独一无二的可信数字身份</div>
|
||
<div class="btn" @click="openService">申请服务</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部信息区 -->
|
||
<Footer style="width:100%" />
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import Footer from '@/pages/index/components/footer/index.vue';
|
||
export default {
|
||
data() {
|
||
return {
|
||
inputValue: '',
|
||
activeTab: 0,
|
||
topBannerHeight: 820,
|
||
topBannerImages: [
|
||
require('@/pages/index/assets/home-top-bg1.jpg'),
|
||
// require('@/pages/index/assets/home-top-bg2.jpg'),
|
||
// require('@/pages/index/assets/home-top-bg3.jpg'),
|
||
],
|
||
capabilityList: [
|
||
{ name: '碳核算平台', icon: require('@/pages/index/assets/home-thspt-icon.png') },
|
||
{ name: '碳交易平台', icon: require('@/pages/index/assets/home-tjypt-icon.png') },
|
||
{ name: '碳认证机构', icon: require('@/pages/index/assets/home-trzjg-icon.png') },
|
||
{ name: '碳金融服务', icon: require('@/pages/index/assets/home-tjrfw-icon.png') },
|
||
{ name: '碳技术咨询', icon: require('@/pages/index/assets/home-tjszx-icon.png') },
|
||
{ name: '更多能力', icon: require('@/pages/index/assets/home-gdnl-icon.png') }
|
||
],
|
||
coreList: [
|
||
{
|
||
name1: '核心底座',
|
||
name2: '国家区块链',
|
||
desc: '依托国家区块链基础底座，确保每一笔碳数据拥有唯一的"链上基因"，实现国家级权威存证与不可篡改。',
|
||
icon: require('@/pages/index/views/home2/assets/core-base@2x.png')
|
||
},
|
||
{
|
||
name1: '数据引擎',
|
||
name2: '全场景可信流通',
|
||
desc: '打破碳数据孤岛，支持从生产端到交易端的全链路数据锚定，让碳信用在多场景下实现秒级核验。',
|
||
icon: require('@/pages/index/views/home2/assets/data-engine@2x.png')
|
||
},
|
||
{
|
||
name1: '身份基石',
|
||
name2: '碳数字身份体系',
|
||
desc: '为企业构建唯一的链上"绿卡"，集成资质核验证、资产托管与信用评级，打造绿色经济的数字通行证。',
|
||
icon: require('@/pages/index/views/home2/assets/identity-base@2x.png')
|
||
},
|
||
{
|
||
name1: '闭环赋能',
|
||
name2: '精准服务企业走出去',
|
||
desc: '服务企业出海、国际互认。直击跨境合规与碳交易撮合痛点，通过智能合约实现供需精准匹配，助力企业低碳转型提速。',
|
||
icon: require('@/pages/index/views/home2/assets/closed-loop@2x.png')
|
||
}
|
||
],
|
||
hotSearchTags: ["碳核查", "ESG", "碳资产管理", "ISO 14067"],
|
||
// 企业出海数据
|
||
overseas2List: [
|
||
{ name: '电池法案', btnName: "申请服务", desc: "欧盟电池法案管控电池全生命周期，涉及回收、碳足迹等要求。", icon: require('@/pages/index/assets/home-dcfa-icon.png') },
|
||
{ name: 'CBAM', btnName: "CBAM\n试算", desc: "欧盟对进口高碳产品按隐含排放征收碳关税。", icon: require('@/pages/index/assets/home-cbam-icon.png') },
|
||
{ name: '航运燃料', btnName: "申请服务", desc: "从化石油基向LNG、绿甲醇、绿氨等多元低碳方向加速转型。", icon: require('@/pages/index/assets/home-hyrl-icon.png') }
|
||
],
|
||
// 行业动态数据
|
||
newsTabs: ['国家政策', '行业资讯', '平台公告'],
|
||
newsData: [
|
||
[
|
||
{ title: '媒体报道 | “十五五”新图景：增绿降碳 加减之间再造万亿级新机遇', pic: require('@/pages/index/assets/news1.png'), date: '2026-03-31', remark: "转载自 www.ndrc.gov.cn", content: "“十五五”规划纲要中提出，加快经济社会发展全面绿色转型。当前，一场增绿降碳的变革正在重塑我们的生产生活方式，持续激发绿色发展动能。粤西海域，离岸70公里外，水深超50米，一场绿色能源的接力正在加紧进行。一场绿色能源的接力正在加紧进行。一场绿色能源的接力正在加紧进行。总台央视记者 刘柏煊：全球最大输送容量海上风电项目，现在进入开春后的首个集中施工期，8艘风机安装船在同步作业，超过120米长的……", src: "https://www.ndrc.gov.cn/xwdt/spfg/mtjj/202603/t20260331_1404430.html" },
|
||
{ title: '2026年循环经济发展和资源综合利用专项扶持项目开始申报', pic: require('@/pages/index/assets/news2.png'), date: '2026-02-02', remark: "转载自 fgw.sh.gov.cn", content: "根据《上海市循环经济发展和资源综合利用专项扶持办法（2021版）》（沪发改规范〔2021〕13号，以下简称《扶持办法》）的要求，结合上海市“免申即享”相关工作要求，为做好2026年循环经济和资源综合利用项目申报工作，上海市发展改革委近日发布《上海市发展改革委关于组织申报2026年循环经济发展和资源综合利用专项扶持项目的通知》", src: "https://fgw.sh.gov.cn/fgw_zyjyhhjbh/20260202/dbb80b9041b740da958411f9b3ea7e95.html" },
|
||
{ title: '商务部等9部门关于实施绿色消费推进行动的通知', pic: require('@/pages/index/assets/news3.png'), date: '2026-01-04', remark: "转载自 www.gov.cn", content: "各省、自治区、直辖市及计划单列市、新疆生产建设兵团商务、发展改革、工业和信息化、生态环境、住房城乡建设、农业农村、市场监管、金融监管部门，中国人民银行上海总部，各省、自治区、直辖市及计划单列市分行：为深入贯彻党的二十大和二十届历次全会精神，落实《中共中央 国务院关于加快经济社会发展全面绿色转型的意见》和中共中央办公厅、国务院办公厅印发的《提振消费专项行动方案》要求，加快发展方式和……", src: "https://www.gov.cn/zhengce/zhengceku/202601/content_7053876.htm" },
|
||
],
|
||
[
|
||
{
|
||
title: '全国首个红树林营造CCER项目完成登记 蓝碳生态价值实现路径获重要突破',
|
||
pic: require('@/pages/index/assets/news4.png'),
|
||
src: "https://www.cets.org.cn/xyyw/7348.jhtml",
|
||
date: '2026-03-22',
|
||
remark: "转载自 光明日报",
|
||
content: "3月20日，全国首个红树林营造碳汇类国家温室气体自愿减排（CCER）项目“福建省霞浦县盐田乡和长春镇红树林植被修复项目”正式通过国家主管部门审核并完成登记注册。该项目由自然资源部第三海洋研究所作为项目业主申报实施，中国质量认证中心（CQC）负责审定。项目的成功完成，为海洋碳汇价值实现探索出可复制、可推广的实践路径，是我国海洋生态系统保护修复领域的重要里程碑……"
|
||
},
|
||
{
|
||
title: '可再生能源电解水制氢等12项CCER方法学解读视频来了',
|
||
pic: require('@/pages/index/assets/news5.png'),
|
||
src: "https://www.cets.org.cn/xyyw/7347.jhtml",
|
||
date: '2026-03-20',
|
||
remark: "转载自 国家气候战略中心",
|
||
content: "可再生能源电解水制氢等12项CCER方法学解读视频来了"
|
||
},
|
||
{
|
||
title: '中碳登结算业务部获评2025年度全国巾帼文明岗',
|
||
pic: require('@/pages/index/assets/news6.png'),
|
||
src: "https://www.cets.org.cn/xyyw/7334.jhtml",
|
||
date: '2026-03-06',
|
||
remark: "转载自 中碳登",
|
||
content: "3月2日，2025年度全国巾帼文明岗表彰名单正式揭晓，碳排放权登记结算（武汉）有限责任公司（以下简称“中碳登”）结算业务部成功获评。这份全国巾帼建功领域的重磅荣誉，是对中碳登“娘子军”专业实力、服务担当的高度认可，更是对中碳登深耕全国碳市场基础设施建设、助力国家“双碳”战略落地成效的充分肯定..."
|
||
},
|
||
],
|
||
[
|
||
{
|
||
title: '关于碳信网接入全国温室气体排放因子数据库（第二版）的公告',
|
||
remark: "非真实公告，仅展示",
|
||
date: '2026-03-22',
|
||
content: "为进一步提升平台碳数据核算的准确性、权威性，助力平台用户高效完成碳排放核算、碳信息报送工作，碳信网已于2026年4月18日完成与国家温室气体排放因子数据库（第二版）的全面对接。本次对接后，平台将同步更新576个全行业排放因子，新增291个细分领域因子，覆盖发电、钢铁、水泥、铝冶炼等重点控排行业，可直接为用户提供合规、精准的因子查询、自动匹配及核算辅助服务。请各用户及时登录平台更新个人/企业碳数据核算模板，确保数据符合最新监管要求，如有操作疑问可通过平台在线客服或咨询热线400-XXXX-8899反馈……"
|
||
},
|
||
{
|
||
title: '2026年全国碳市场配额预分配相关信息提醒',
|
||
remark: "非真实公告，仅展示",
|
||
date: '2026-03-20',
|
||
content: "根据生态环境部《关于做好2026年全国碳排放权交易市场有关工作的通知》（环办气候函〔2026〕32号）要求，2026年全国碳市场配额预分配工作已正式启动。为帮助平台控排企业顺利完成配额认领、核对工作，碳信网已开通配额预分配查询通道，平台注册企业可登录“碳交易-配额管理”板块，查询本企业预分配额度、行业基准值及相关政策说明。请钢铁、水泥、铝冶炼行业企业于4月30日前完成配额核对，发电行业企业于6月20日前完成核对，如有异议请在核对期限内提交书面说明，逾期将视为无异议，具体操作指南可在平台“政策中心”下载查阅"
|
||
},
|
||
{
|
||
title: '碳信网碳信息披露服务升级及上线通知',
|
||
date: '2026-03-06',
|
||
remark: "非真实公告，仅展示",
|
||
content: "为响应欧盟CBAM（碳边境调节机制）全面实施及国内上市公司ESG报告强制披露要求，碳信网对碳信息披露服务进行全面升级，新增碳足迹核算、ESG碳信息填报、报告生成及合规校验四大功能模块。本次升级后，平台可支持企业快速完成全流程碳信息披露，自动生成符合国内外标准的披露报告，助力企业对接国际市场、满足监管要求。升级功能于2026年4月12日正式上线，所有注册用户可免费体验基础版服务，企业用户可申请升级专业版，享受一对一咨询、定制化报告及合规审核服务，详情可登录平台“碳信息-披露服务”板块了解..."
|
||
},
|
||
],
|
||
],
|
||
// 合作伙伴数据
|
||
partnerCount: '200+',
|
||
partnerList: [
|
||
{ name: '合作伙伴', logo: require('@/pages/index/views/home2/assets/partner-1.png') },
|
||
{ name: '合作伙伴', logo: require('@/pages/index/views/home2/assets/partner-2.png') },
|
||
{ name: '合作伙伴', logo: require('@/pages/index/views/home2/assets/partner-3.png') },
|
||
{ name: '合作伙伴', logo: require('@/pages/index/views/home2/assets/partner-4.png') },
|
||
{ name: '合作伙伴', logo: require('@/pages/index/views/home2/assets/partner-5.png') },
|
||
{ name: '合作伙伴', logo: require('@/pages/index/views/home2/assets/partner-6.png') },
|
||
{ name: '合作伙伴', logo: require('@/pages/index/views/home2/assets/partner-7.png') },
|
||
{ name: '合作伙伴', logo: require('@/pages/index/views/home2/assets/partner-8.png') },
|
||
{ name: '合作伙伴', logo: require('@/pages/index/views/home2/assets/partner-9.png') },
|
||
{ name: '合作伙伴', logo: require('@/pages/index/views/home2/assets/partner-10.png') },
|
||
{ name: '合作伙伴', logo: require('@/pages/index/views/home2/assets/partner-11.png') },
|
||
{ name: '合作伙伴', logo: require('@/pages/index/views/home2/assets/partner-12.png') },
|
||
{ name: '合作伙伴', logo: require('@/pages/index/views/home2/assets/partner-13.png') },
|
||
{ name: '合作伙伴', logo: require('@/pages/index/views/home2/assets/partner-14.png') },
|
||
{ name: '合作伙伴', logo: require('@/pages/index/views/home2/assets/partner-15.png') },
|
||
{ name: '合作伙伴', logo: require('@/pages/index/views/home2/assets/partner-16.png') }
|
||
],
|
||
buttonLinks: {
|
||
// 碳数字身份证
|
||
'办证指南': 'https://www.kdocs.cn/l/cr5aavNI1Brn',
|
||
'碳证查询': 'https://ctn-web-pre.lingshu.net/trustedCarbonQuery/list?type=carbon-query',
|
||
'碳证核验': 'https://ctn-web-pre.lingshu.net/carbon-verify',
|
||
'跨境互通': '',
|
||
// 国家可信碳链
|
||
'上链指南': 'https://www.kdocs.cn/l/cr5aavNI1Brn',
|
||
'上链标准': '',
|
||
'上链工具': '',
|
||
'碳证中心': 'https://ctn-web-pre.lingshu.net/carbon-index',
|
||
// 绿色服务
|
||
'服务市场': '/tfwsc',
|
||
'需求市场': '/txqsc',
|
||
'金融市场': '/tjrsc',
|
||
'数据市场': '/tsjsc',
|
||
},
|
||
};
|
||
},
|
||
components: {
|
||
Footer,
|
||
},
|
||
mounted() {
|
||
this.syncBannerHeight();
|
||
window.addEventListener('resize', this.syncBannerHeight);
|
||
},
|
||
beforeDestroy() {
|
||
window.removeEventListener('resize', this.syncBannerHeight);
|
||
},
|
||
methods: {
|
||
openNewTab(url) {
|
||
window.open(url);
|
||
},
|
||
openService() {
|
||
window.open('http://carbon_did.liantu.tech/');
|
||
},
|
||
|
||
|
||
syncBannerHeight() {
|
||
const w = window.innerWidth;
|
||
if (w < 768) {
|
||
this.topBannerHeight = Math.round(640 + (w / 768) * 120);
|
||
} else {
|
||
this.topBannerHeight = 820;
|
||
}
|
||
},
|
||
// 封装跳转方法 - 外部链接新窗口，内部链接当前窗口
|
||
handleNavigate(link) {
|
||
if (!link) {
|
||
this.$message.info('敬请期待');
|
||
return;
|
||
}
|
||
if (link.startsWith('http://') || link.startsWith('https://')) {
|
||
window.open(link, '_blank');
|
||
} else {
|
||
this.$router.push(link);
|
||
}
|
||
},
|
||
// iframe页面跳转 - 通过parent事件触发main.vue的iframe显示
|
||
handleIframeNavigate(url) {
|
||
if (!url) {
|
||
this.$message.info('敬请期待');
|
||
return;
|
||
}
|
||
if (url.startsWith('http://') || url.startsWith('https://')) {
|
||
this.$emit('gotoIfreamPage', url);
|
||
} else {
|
||
this.$router.push(url);
|
||
}
|
||
},
|
||
// 快捷搜索
|
||
handleSearch() {
|
||
if (this.inputValue) {
|
||
this.$router.push({ path: '/search', query: { keyword: this.inputValue } });
|
||
}
|
||
},
|
||
// 处理热门搜索点击
|
||
handleHotSearch(keyword) {
|
||
this.$router.push({ path: '/search', query: { keyword: keyword } });
|
||
},
|
||
// 企业出海点击
|
||
handleOverseasClick(item) {
|
||
console.log('点击企业出海:', item.title);
|
||
this.$message.info(`${item.title} - ${item.btnText}`);
|
||
},
|
||
// 行业动态点击
|
||
handleNewsClick(item) {
|
||
if (item.src) {
|
||
window.open(item.src, '_blank');
|
||
} else {
|
||
console.log('点击新闻:', item.title);
|
||
this.$message.info(item.title);
|
||
}
|
||
},
|
||
handleNewsMore() {
|
||
this.$message.info('暂无更多动态');
|
||
},
|
||
},
|
||
computed: {
|
||
currentNewsList() {
|
||
return this.newsData[this.activeTab] || [];
|
||
},
|
||
partnerRow1() {
|
||
const row = this.partnerList.slice(0, 4);
|
||
return [...row, ...row];
|
||
},
|
||
partnerRow2() {
|
||
const row = this.partnerList.slice(4, 8);
|
||
return [...row, ...row];
|
||
},
|
||
partnerRow3() {
|
||
const row = this.partnerList.slice(8, 12);
|
||
return [...row, ...row];
|
||
},
|
||
partnerRow4() {
|
||
const row = this.partnerList.slice(12, 16);
|
||
return [...row, ...row];
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped >
|
||
.page-box {
|
||
background: #f5f5f7;
|
||
}
|
||
|
||
.nav-box {
|
||
position: fixed;
|
||
top: 0px;
|
||
width: 100%;
|
||
background: #009a29;
|
||
margin: 0 auto;
|
||
|
||
display: grid;
|
||
grid-template-columns: 1fr 2fr 1fr;
|
||
place-items: center;
|
||
|
||
color: #fff;
|
||
|
||
z-index: 9999;
|
||
}
|
||
.logo-box {
|
||
text-align: center;
|
||
}
|
||
|
||
.option-box {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
text-align: center;
|
||
gap: 10px;
|
||
height: 64px;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
font-style: Regular;
|
||
font-size: 16px;
|
||
leading-trim: NONE;
|
||
letter-spacing: 0%;
|
||
}
|
||
|
||
.option-box .gzt {
|
||
padding: 10px;
|
||
text-align: center;
|
||
background: rgba(255, 255, 255, 0.3);
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
gap: 10px;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.menu-box {
|
||
width: 100%;
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
|
||
height: 64px;
|
||
font-size: 16px;
|
||
gap: 10px;
|
||
}
|
||
|
||
.menu-title {
|
||
width: 96px;
|
||
height: 64px;
|
||
text-align: center;
|
||
line-height: 24px;
|
||
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.meun-title-active {
|
||
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 100%);
|
||
border-bottom: 2px solid #ffffff;
|
||
}
|
||
|
||
.top-box {
|
||
width: 100%;
|
||
position: relative;
|
||
min-height: 820px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.top-banner-swiper {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
z-index: 0;
|
||
}
|
||
|
||
.banner-slide {
|
||
width: 100%;
|
||
height: 100%;
|
||
min-height: inherit;
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
background-position: center;
|
||
}
|
||
|
||
.top-box-inner {
|
||
position: relative;
|
||
z-index: 2;
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 指示条默认在底部，会被 .top-box-bottom-over 渐变盖住，上移避开 300px 渐变区 */
|
||
.top-box ::v-deep .t-swiper__navigation {
|
||
bottom: 340px;
|
||
}
|
||
|
||
.container {
|
||
margin-top: 64px;
|
||
width: 100%;
|
||
/* max-width: 1920px; */
|
||
margin: 0 auto; /* 左右居中 */
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.top-title {
|
||
margin-top: 128px;
|
||
text-align: center;
|
||
width: 100%;
|
||
height: 58px;
|
||
}
|
||
|
||
.top-title-desc {
|
||
width: 100%;
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
color: #222222;
|
||
-webkit-text-stroke: 0.3px #fff;
|
||
text-stroke: 0.3px #fff;
|
||
text-align: center;
|
||
margin-top: 40px;
|
||
}
|
||
|
||
.top-title-desc img {
|
||
max-width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.top-search-box {
|
||
margin-top: 40px;
|
||
z-index: 999;
|
||
width: 100%;
|
||
padding: 0px 6%;
|
||
}
|
||
|
||
.search-box {
|
||
margin: 0 auto;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: rgba(255, 255, 255, 0.6);
|
||
border: 1px solid #ffffff;
|
||
backdrop-filter: blur(8px);
|
||
|
||
box-shadow: 0px 8px 12px 0px #00000014;
|
||
border-radius: 12px;
|
||
width: 100%;
|
||
max-width: 600px;
|
||
padding: 8px;
|
||
}
|
||
|
||
.search-btn {
|
||
background: linear-gradient(180deg, #00b96b 0%, #00a25d 100%);
|
||
width: 92px;
|
||
height: 40px;
|
||
border-radius: 6px;
|
||
text-align: center;
|
||
color: #ffffff;
|
||
line-height: 40px;
|
||
|
||
font-family: PingFang SC;
|
||
font-weight: 500;
|
||
font-style: Medium;
|
||
font-size: 16px;
|
||
leading-trim: NONE;
|
||
letter-spacing: 0%;
|
||
text-align: center;
|
||
|
||
cursor: pointer;
|
||
}
|
||
|
||
.search-box input {
|
||
width: calc(100% - 100px);
|
||
max-width: 500px;
|
||
border: none;
|
||
background: transparent;
|
||
outline: none;
|
||
}
|
||
|
||
.search-box input::placeholder {
|
||
color: #666666;
|
||
font-size: 16px;
|
||
opacity: 1;
|
||
font-style: normal;
|
||
}
|
||
|
||
.top-search-hot {
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
font-style: Regular;
|
||
font-size: 14px;
|
||
leading-trim: NONE;
|
||
color: #ffffff;
|
||
padding-left: 10px;
|
||
margin-top: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.hot-label {
|
||
color: #fff;
|
||
}
|
||
|
||
.hot-tag {
|
||
background: rgba(255, 255, 255, 0.6);
|
||
border-radius: 12px;
|
||
padding: 4px 12px;
|
||
color: #333;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
|
||
&:hover {
|
||
background: rgba(0, 185, 107, 0.4);
|
||
transform: translateY(-2px);
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.top-box-bottom-over {
|
||
height: 300px;
|
||
width: 100%;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
z-index: 1;
|
||
pointer-events: none;
|
||
background: linear-gradient(180deg, rgba(245, 247, 250, 0) 0%, rgba(245, 247, 250) 100%);
|
||
}
|
||
|
||
.top-to-center {
|
||
height: 60px;
|
||
background: rgba(245, 247, 250, 1);
|
||
}
|
||
|
||
.top-options-box {
|
||
margin-top: 60px;
|
||
z-index: 999;
|
||
width: 100%;
|
||
padding: 0% 10%;
|
||
}
|
||
|
||
.hero-cards {
|
||
margin-top: 100px;
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 384px);
|
||
gap: 30px;
|
||
justify-content: center;
|
||
}
|
||
|
||
.hero-card {
|
||
width: 384px;
|
||
height: 245px;
|
||
border: 1px solid #ffffff;
|
||
box-shadow: 0px 8px 12px rgba(127, 179, 213, 0.2);
|
||
backdrop-filter: blur(8px);
|
||
border-radius: 12px;
|
||
transition: all 0.3s ease;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hero-card:hover {
|
||
transform: translateY(-8px);
|
||
box-shadow: 0px 16px 24px rgba(127, 179, 213, 0.3);
|
||
}
|
||
|
||
.hero-card .card-header {
|
||
height: 74px;
|
||
border-bottom: 1px solid #ffffff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
box-shadow: 0px 8px 12px 0px rgba(127, 179, 213, 0.2);
|
||
backdrop-filter: blur(8px);
|
||
}
|
||
|
||
.hero-card .card-title {
|
||
font-size: 32px;
|
||
font-weight: 600;
|
||
color: rgba(0, 59, 26, 1);
|
||
font-family: 'FZZhengHeiS-B-GB', 'PingFang SC';
|
||
line-height: 1;
|
||
}
|
||
|
||
.hero-card .card-body {
|
||
flex: 1;
|
||
padding: 24px;
|
||
display: grid;
|
||
grid-template-columns: 156px 156px;
|
||
gap: 24px;
|
||
align-content: start;
|
||
}
|
||
|
||
.hero-card .card-btn {
|
||
width: 156px;
|
||
height: 48px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 8px;
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.hero-card .card-btn:hover {
|
||
transform: scale(1.02);
|
||
}
|
||
|
||
.blue-card .card-header {
|
||
background: linear-gradient(180deg, rgba(127, 210, 255, 0.4) 0%, rgba(232, 247, 255, 0.2) 100%);
|
||
}
|
||
|
||
.blue-card .card-body {
|
||
box-shadow: 0px 8px 12px 0px rgba(127, 179, 213, 0.2);
|
||
backdrop-filter: blur(8px);
|
||
background: linear-gradient(180deg, rgba(127, 210, 255, 0.2) 0%, rgba(232, 247, 255, 0.1) 100%);
|
||
}
|
||
|
||
.blue-card .card-btn {
|
||
background: rgba(222, 243, 255, 0.5);
|
||
border: 1px solid rgba(0, 141, 213, 0.4);
|
||
}
|
||
|
||
.cyan-card .card-header {
|
||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 100%);
|
||
}
|
||
.cyan-card .card-body {
|
||
box-shadow: 0px 8px 12px 0px rgba(0, 185, 107, 0.1);
|
||
backdrop-filter: blur(8px);
|
||
background: rgba(255, 255, 255, 0.3);
|
||
}
|
||
|
||
.cyan-card .card-btn {
|
||
background: rgba(255, 255, 255, 0.4);
|
||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.green-card .card-header {
|
||
background: linear-gradient(180deg, rgba(107, 255, 204, 0.4) 0%, rgba(107, 255, 204, 0.2) 100%);
|
||
}
|
||
.green-card .card-body {
|
||
box-shadow: 0px 8px 12px 0px rgba(0, 185, 107, 0.1);
|
||
backdrop-filter: blur(8px);
|
||
background: linear-gradient(180deg, rgba(156, 255, 221, 0.3) 0%, rgba(156, 255, 221, 0.15) 100%);
|
||
}
|
||
|
||
.green-card .card-btn {
|
||
background: rgba(232, 255, 234, 0.5);
|
||
border: 1px solid rgba(0, 180, 42, 0.4)
|
||
}
|
||
|
||
/* ==================== 核心驱动模块 ==================== */
|
||
.core-section {
|
||
width: 100%;
|
||
background: #fff;
|
||
padding: 80px 0;
|
||
}
|
||
|
||
.section-container {
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
padding: 0 40px;
|
||
}
|
||
|
||
.section-title {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.section-title .title-bar {
|
||
width: 6px;
|
||
height: 32px;
|
||
background: linear-gradient(180deg, #00b42a, #00d468);
|
||
border-radius: 3px;
|
||
margin-right: 16px;
|
||
}
|
||
|
||
.section-title .title-text {
|
||
font-size: 32px;
|
||
font-weight: 600;
|
||
color: #222;
|
||
z-index: 10;
|
||
}
|
||
|
||
.section-title.core-title {
|
||
background-image: url('~@/pages/index/views/home2/assets/core_driver_title_icon.svg');
|
||
background-repeat: no-repeat;
|
||
background-position: left center;
|
||
padding-left: 44px;
|
||
background-size: 32px 32px;
|
||
position: relative;
|
||
}
|
||
|
||
.section-title.core-title::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 3px;
|
||
z-index: 9;
|
||
left: 44px;
|
||
width: 128px;
|
||
height: 8px;
|
||
background: rgba(0, 185, 107, 0.6);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.section-title.core-title .title-bar {
|
||
display: none;
|
||
}
|
||
|
||
.core-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 40px;
|
||
margin-top: 40px;
|
||
}
|
||
|
||
.core-item {
|
||
text-align: center;
|
||
padding: 30px 20px;
|
||
border-radius: 16px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.core-item:hover {
|
||
background: #f8fff8;
|
||
transform: translateY(-4px);
|
||
}
|
||
|
||
.core-item .core-icon {
|
||
width: 132px;
|
||
height: 132px;
|
||
margin: 0 auto 24px;
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
background-size: contain;
|
||
}
|
||
|
||
.core-item .core-name1 {
|
||
font-size: 18px;
|
||
font-family: SimHei, 黑体;
|
||
font-weight: 700;
|
||
color: #333;
|
||
margin-bottom: 8px;
|
||
background: linear-gradient(90deg, #ffffff 0%, #e6efff 36.06%, #e6efff 62.5%, #ffffff 100%);
|
||
padding: 4px 12px;
|
||
border-radius: 4px;
|
||
display: inline-block;
|
||
width: 250px;
|
||
}
|
||
|
||
.core-item .core-name2 {
|
||
font-size: 22px;
|
||
font-weight: 600;
|
||
color: #1a1a2e;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.core-item .core-desc {
|
||
font-size: 14px;
|
||
color: #666;
|
||
line-height: 1.8;
|
||
text-align: left;
|
||
}
|
||
|
||
/* ==================== 共性能力模块 ==================== */
|
||
.capability-section {
|
||
position: relative;
|
||
padding: 80px 0;
|
||
overflow: hidden;
|
||
background-image: url('~@/pages/index/views/home2/assets/capability-bg@2x.png');
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
background-position: center;
|
||
}
|
||
|
||
.capability-bg {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 0;
|
||
}
|
||
|
||
.capability-bg-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.capability-bg-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgba(245, 247, 250, 1) 0%,
|
||
rgba(255, 255, 255, 0.8) 50%,
|
||
rgba(245, 247, 250, 1) 100%
|
||
);
|
||
}
|
||
|
||
.capability-container {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.capability-header {
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.capability-title-group {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 24px;
|
||
}
|
||
|
||
.capability-title-icon {
|
||
width: 32px;
|
||
height: 32px;
|
||
flex-shrink: 0;
|
||
background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22.6667C12 21.9299 11.7028 21.2653 11.2187 20.7812C10.7347 20.2972 10.0701 20 9.33333 20C7.86057 20 6.66667 21.1939 6.66667 22.6667C6.66667 24.1395 7.86057 25.3333 9.33333 25.3333C10.8061 25.3333 12 24.1395 12 22.6667ZM25.3333 22.6667C25.3333 21.1939 24.1395 20 22.6667 20C21.1939 20 20 21.1939 20 22.6667C20 24.1395 21.1939 25.3333 22.6667 25.3333C24.1395 25.3333 25.3333 24.1395 25.3333 22.6667ZM12 9.33333C12 7.86057 10.8061 6.66667 9.33333 6.66667C7.86057 6.66667 6.66667 7.86057 6.66667 9.33333C6.66667 10.8061 7.86057 12 9.33333 12C10.8061 12 12 10.8061 12 9.33333ZM25.3333 9.33333C25.3333 7.86057 24.1395 6.66667 22.6667 6.66667C21.1939 6.66667 20 7.86057 20 9.33333C20 10.0701 20.2972 10.7347 20.7812 11.2187C21.2653 11.7028 21.9299 12 22.6667 12C24.1395 12 25.3333 10.8061 25.3333 9.33333ZM28 22.6667C28 25.6121 25.6121 28 22.6667 28C19.7212 28 17.3333 25.6121 17.3333 22.6667C17.3333 19.7212 19.7212 17.3333 22.6667 17.3333C25.6121 17.3333 28 19.7212 28 22.6667ZM14.6667 9.33333C14.6667 12.2789 12.2789 14.6667 9.33333 14.6667C6.38781 14.6667 4 12.2789 4 9.33333C4 6.38781 6.38781 4 9.33333 4C12.2789 4 14.6667 6.38781 14.6667 9.33333ZM28 9.33333C28 12.2789 25.6121 14.6667 22.6667 14.6667C21.6779 14.6667 20.7512 14.3963 19.9571 13.9271L13.9271 19.9571C14.3963 20.7512 14.6667 21.6779 14.6667 22.6667C14.6667 25.6121 12.2789 28 9.33333 28C6.38781 28 4 25.6121 4 22.6667C4 19.7212 6.38781 17.3333 9.33333 17.3333C10.3215 17.3333 11.2479 17.6029 12.0417 18.0716L18.0716 12.0417C17.6029 11.2479 17.3333 10.3215 17.3333 9.33333C17.3333 6.38781 19.7212 4 22.6667 4C25.6121 4 28 6.38781 28 9.33333Z' fill='%23222222'/%3E%3C/svg%3E");
|
||
background-repeat: no-repeat;
|
||
background-size: contain;
|
||
margin-top: 6px;
|
||
}
|
||
|
||
.capability-title-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.capability-title-text {
|
||
font-size: 32px;
|
||
font-weight: 700;
|
||
color: #222;
|
||
margin: 0;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.capability-title-bar {
|
||
display: block;
|
||
width: 128px;
|
||
height: 8px;
|
||
background: rgba(0, 185, 107, 0.6);
|
||
border-radius: 4px;
|
||
margin-top: -14px;
|
||
z-index: -1;
|
||
}
|
||
|
||
.capability-desc {
|
||
font-size: 24px;
|
||
font-weight: 500;
|
||
color: #666;
|
||
margin: 8px 0 0 0;
|
||
line-height: 40px;
|
||
}
|
||
|
||
.capability-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 378px);
|
||
gap: 24px;
|
||
justify-content: center;
|
||
}
|
||
|
||
.capability-card {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 16px 16px 16px 32px;
|
||
height: 111px;
|
||
background: linear-gradient(360deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.2) 100%);
|
||
border: 2px solid rgba(255, 255, 255, 1);
|
||
border-radius: 12px;
|
||
box-shadow: 0px 8px 20px 0px rgba(0, 209, 121, 0.3);
|
||
backdrop-filter: blur(4px);
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.capability-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0px 12px 28px 0px rgba(0, 209, 121, 0.4);
|
||
}
|
||
|
||
.capability-card-content {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
}
|
||
|
||
.capability-icon {
|
||
width: 56px;
|
||
height: 56px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.capability-name {
|
||
font-family: 'Inter', 'PingFang SC';
|
||
font-size: 24px;
|
||
font-weight: 500;
|
||
color: #333;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.capability-arrow {
|
||
width: 24px;
|
||
height: 24px;
|
||
flex-shrink: 0;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.capability-card:hover .capability-arrow {
|
||
transform: translateX(4px);
|
||
}
|
||
|
||
/* ==================== 企业出海模块（新样式） ==================== */
|
||
.overseas2-section {
|
||
position: relative;
|
||
padding: 80px 0;
|
||
overflow: hidden;
|
||
background-image: url('~@/pages/index/assets/qych-bg.png');
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
background-position: center;
|
||
}
|
||
|
||
.overseas2-container {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.overseas2-header {
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.overseas2-title-group {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 24px;
|
||
}
|
||
|
||
.overseas2-title-icon {
|
||
width: 32px;
|
||
height: 32px;
|
||
flex-shrink: 0;
|
||
background-image: url('~@/pages/index/assets/home-qych-icon.png');
|
||
background-repeat: no-repeat;
|
||
background-size: contain;
|
||
margin-top: 6px;
|
||
}
|
||
|
||
.overseas2-title-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.overseas2-title-text {
|
||
font-size: 32px;
|
||
font-weight: 700;
|
||
color: #222;
|
||
margin: 0;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.overseas2-title-bar {
|
||
display: block;
|
||
width: 128px;
|
||
height: 8px;
|
||
background: rgba(0, 185, 107, 0.6);
|
||
border-radius: 4px;
|
||
margin-top: -14px;
|
||
z-index: -1;
|
||
}
|
||
|
||
.overseas2-desc {
|
||
font-size: 24px;
|
||
font-weight: 500;
|
||
color: #666;
|
||
margin: 8px 0 0 0;
|
||
line-height: 40px;
|
||
}
|
||
|
||
.overseas2-grid {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 24px;
|
||
}
|
||
|
||
.overseas2-card {
|
||
display: flex;
|
||
width: 600px;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 16px 16px 16px 32px;
|
||
height: 111px;
|
||
background: linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.7) 100%);
|
||
border: 1px solid #ffffff;
|
||
border-radius: 12px;
|
||
box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.2);
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
|
||
&:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0px 12px 28px 0px rgba(0, 0, 0, 0.3);
|
||
}
|
||
}
|
||
|
||
.overseas2-card-content {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
}
|
||
|
||
.overseas2-icon {
|
||
width: 56px;
|
||
height: 56px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.overseas2-text {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
.overseas2-name {
|
||
font-family: 'Inter', 'PingFang SC';
|
||
font-size: 24px;
|
||
font-weight: 500;
|
||
color: #333;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.overseas2-item-desc {
|
||
font-family: 'Inter', 'PingFang SC';
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #666;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.overseas2-btn {
|
||
background: linear-gradient(180deg, #99d2fe 0%, #2196f3 100%);
|
||
border-radius: 4px;
|
||
width: 72px;
|
||
height: 72px;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
white-space: pre-line;
|
||
|
||
&:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);
|
||
}
|
||
}
|
||
|
||
/* ==================== 行业动态（新样式） ==================== */
|
||
.news-section {
|
||
position: relative;
|
||
padding: 80px 0;
|
||
overflow: auto;
|
||
background: #fff;
|
||
}
|
||
|
||
.news-container {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.news-header {
|
||
}
|
||
|
||
.news-title-group {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 24px;
|
||
}
|
||
|
||
.news-title-icon {
|
||
width: 32px;
|
||
height: 32px;
|
||
flex-shrink: 0;
|
||
background-image: url('~@/pages/index/assets/home-hydt-icon.png');
|
||
background-repeat: no-repeat;
|
||
background-size: contain;
|
||
margin-top: 6px;
|
||
}
|
||
|
||
.news-title-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.news-title-text {
|
||
font-size: 32px;
|
||
font-weight: 700;
|
||
color: #222;
|
||
margin: 0;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.news-title-bar {
|
||
display: block;
|
||
width: 128px;
|
||
height: 8px;
|
||
background: rgba(0, 185, 107, 0.6);
|
||
border-radius: 4px;
|
||
margin-top: -14px;
|
||
z-index: -1;
|
||
}
|
||
|
||
.news-tabs {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 30px;
|
||
margin-top: -30px;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.news-tab {
|
||
background: rgba(0, 185, 107, 0.1);
|
||
border-radius: 24px;
|
||
color: #666666;
|
||
padding: 8px 20px;
|
||
}
|
||
|
||
.news-tab-active {
|
||
background: rgba(0, 185, 107, 0.2);
|
||
font-weight: 700 !important;
|
||
color: #333333;
|
||
}
|
||
|
||
.news-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24px;
|
||
height: 620px;
|
||
overflow: auto;
|
||
}
|
||
|
||
.news-more {
|
||
text-align: right;
|
||
padding: 20px 0 0 0;
|
||
color: #00b42a;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
|
||
&:hover {
|
||
color: #009a29;
|
||
}
|
||
}
|
||
|
||
.news-item {
|
||
display: flex;
|
||
gap: 24px;
|
||
padding: 20px;
|
||
background: #fff;
|
||
border-radius: 12px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
|
||
&:hover {
|
||
transform: translateY(-4px);
|
||
}
|
||
}
|
||
|
||
.news-pic {
|
||
width: 200px;
|
||
height: 150px;
|
||
object-fit: cover;
|
||
border-radius: 8px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.news-content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
}
|
||
|
||
.news-content-top {
|
||
.news-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
line-height: 1.5;
|
||
}
|
||
}
|
||
|
||
.news-content-middle {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
}
|
||
|
||
.news-alarm-icon {
|
||
width: 14px;
|
||
height: 14px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.news-date {
|
||
font-size: 14px;
|
||
color: #999;
|
||
}
|
||
|
||
.news-remark {
|
||
font-size: 14px;
|
||
color: #00b42a;
|
||
}
|
||
|
||
.news-content-bottom {
|
||
font-size: 14px;
|
||
color: #666;
|
||
line-height: 1.8;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
|
||
/* ==================== 企业出海模块 ==================== */
|
||
.overseas-section {
|
||
position: relative;
|
||
background: url('~@/pages/index/assets/home-qych.png') no-repeat center;
|
||
background-size: cover;
|
||
padding: 80px 0;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 30, 60, 0.85);
|
||
}
|
||
}
|
||
|
||
.overseas-layout {
|
||
position: relative;
|
||
z-index: 1;
|
||
display: grid;
|
||
grid-template-columns: 360px 1fr;
|
||
gap: 80px;
|
||
align-items: center;
|
||
}
|
||
|
||
.overseas-left {
|
||
.overseas-desc {
|
||
font-size: 16px;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
margin-top: 16px;
|
||
line-height: 1.8;
|
||
}
|
||
}
|
||
|
||
.overseas-right {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 24px;
|
||
}
|
||
|
||
.overseas-card {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
border-radius: 12px;
|
||
padding: 24px;
|
||
transition: all 0.3s ease;
|
||
|
||
&:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.overseas-card-title {
|
||
font-size: 22px;
|
||
font-weight: 600;
|
||
color: #1a1a2e;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.overseas-card-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.overseas-card-desc {
|
||
font-size: 14px;
|
||
color: #666;
|
||
line-height: 1.6;
|
||
margin: 0;
|
||
}
|
||
|
||
.overseas-card-btn {
|
||
background: #2196f3;
|
||
color: #fff;
|
||
padding: 12px 24px;
|
||
border-radius: 8px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
|
||
&:hover {
|
||
background: #1976d2;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* ==================== 合作伙伴模块 ==================== */
|
||
.partner-section {
|
||
background: #f5f7fa;
|
||
padding: 80px 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.partner-scroll-wrapper {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.partner-scroll-track {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24px;
|
||
}
|
||
|
||
.partner-row {
|
||
display: flex;
|
||
gap: 24px;
|
||
width: max-content;
|
||
}
|
||
|
||
.partner-row:hover {
|
||
animation-play-state: paused;
|
||
}
|
||
|
||
.partner-row-forward {
|
||
animation: scroll-forward 30s linear infinite;
|
||
}
|
||
|
||
.partner-row-backward {
|
||
animation: scroll-backward 30s linear infinite;
|
||
}
|
||
|
||
@keyframes scroll-forward {
|
||
0% {
|
||
transform: translateX(0);
|
||
}
|
||
100% {
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
|
||
@keyframes scroll-backward {
|
||
0% {
|
||
transform: translateX(-50%);
|
||
}
|
||
100% {
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
.partner-title-area {
|
||
width: 430px;
|
||
height: 95px;
|
||
margin: 0 auto 60px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
}
|
||
|
||
.partner-title-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 10px;
|
||
position: relative;
|
||
z-index: 1;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: -120px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 104px;
|
||
height: 88px;
|
||
background: url('./assets/partner_title_deco.png') no-repeat center;
|
||
background-size: contain;
|
||
}
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
right: -120px;
|
||
top: 50%;
|
||
transform: translateY(-50%) scaleX(-1);
|
||
width: 104px;
|
||
height: 88px;
|
||
background: url('./assets/partner_title_deco.png') no-repeat center;
|
||
background-size: contain;
|
||
}
|
||
}
|
||
|
||
.partner-title-text {
|
||
font-size: 32px;
|
||
font-weight: 500;
|
||
color: #222222;
|
||
line-height: 1;
|
||
position: relative;
|
||
display: inline-block;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: -110px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 99px;
|
||
height: 20px;
|
||
background: url('./assets/partner_line.png') no-repeat center;
|
||
background-size: contain;
|
||
}
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
right: -110px;
|
||
top: 50%;
|
||
transform: translateY(-50%) scaleX(-1);
|
||
width: 99px;
|
||
height: 20px;
|
||
background: url('./assets/partner_line.png') no-repeat center;
|
||
background-size: contain;
|
||
}
|
||
}
|
||
|
||
.partner-subtitle-text {
|
||
font-size: 24px;
|
||
font-weight: 500;
|
||
color: #222222;
|
||
line-height: 1.17;
|
||
}
|
||
|
||
.partner-count-num {
|
||
color: #00b42a;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.partner-item {
|
||
width: 282px;
|
||
height: 89px;
|
||
background: #ffffff;
|
||
border-radius: 8px;
|
||
box-shadow: 0px 4px 8px 0px rgba(0, 185, 107, 0.06);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
flex-shrink: 0;
|
||
|
||
.partner-logo-box {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 12px 20px;
|
||
|
||
.partner-icon {
|
||
max-width: 100%;
|
||
max-height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom-box {
|
||
width: 100%;
|
||
height: 539px;
|
||
|
||
background-image: url(~@/pages/index/assets/home-szsf-bg.png);
|
||
|
||
background-repeat: no-repeat; /* 不重复 */
|
||
background-size: cover; /* 不拉伸，保持原图尺寸 */
|
||
background-position: left; /* 永远显示中间部分 */
|
||
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.bottom-box .content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
padding-left: 500px;
|
||
}
|
||
|
||
.bottom-box-content-title {
|
||
font-family: PingFang SC;
|
||
font-weight: 500;
|
||
font-style: Semibold;
|
||
font-size: 40px;
|
||
leading-trim: NONE;
|
||
letter-spacing: 0%;
|
||
line-height: 80px;
|
||
color: #222222;
|
||
padding: 0px;
|
||
}
|
||
|
||
.bottom-box .content .desc {
|
||
font-family: PingFang SC;
|
||
font-weight: 500;
|
||
font-style: Medium;
|
||
font-size: 22px;
|
||
leading-trim: NONE;
|
||
line-height: 40px;
|
||
letter-spacing: 0%;
|
||
color: #222222;
|
||
}
|
||
|
||
.bottom-box .content .btn {
|
||
background: linear-gradient(90deg, #007242 0%, #00d87d 100%);
|
||
border-radius: 8px;
|
||
width: 360px;
|
||
height: 56px;
|
||
text-align: center;
|
||
line-height: 56px;
|
||
border: 1px solid #ffffff;
|
||
backdrop-filter: blur(8px);
|
||
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
font-style: Semibold;
|
||
font-size: 18px;
|
||
leading-trim: NONE;
|
||
letter-spacing: 0%;
|
||
color: #ffffff;
|
||
|
||
margin-top: 20px;
|
||
|
||
cursor: pointer;
|
||
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.bottom-box .content .btn:hover {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
@media (max-width: 767px) {
|
||
/* 容器调整 */
|
||
.container {
|
||
margin-top: 64px;
|
||
}
|
||
|
||
/* 顶部区域 */
|
||
.top-box {
|
||
min-height: auto;
|
||
padding-bottom: 20px;
|
||
}
|
||
|
||
.top-title {
|
||
margin-top: 40px;
|
||
}
|
||
|
||
.top-title img {
|
||
height: auto;
|
||
max-width: 80%;
|
||
}
|
||
|
||
.top-title-desc {
|
||
padding: 0 20px;
|
||
margin-top: 16px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.top-search-box {
|
||
padding: 0 16px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.search-box {
|
||
flex-direction: column;
|
||
padding: 12px;
|
||
gap: 10px;
|
||
}
|
||
|
||
.search-box input {
|
||
width: 100%;
|
||
max-width: none;
|
||
padding: 10px;
|
||
text-align: center;
|
||
}
|
||
|
||
.search-btn {
|
||
width: 100%;
|
||
height: 44px;
|
||
}
|
||
|
||
.top-search-hot {
|
||
padding: 10px 16px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* 选项卡片区域 */
|
||
.top-options-box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 0 16px;
|
||
margin-top: 40px;
|
||
gap: 16px;
|
||
}
|
||
|
||
.option-item-box {
|
||
padding: 16px;
|
||
}
|
||
|
||
.option-item-box:hover {
|
||
transform: none;
|
||
}
|
||
|
||
.option-item-box-title {
|
||
margin-top: 12px;
|
||
font-size: 20px;
|
||
}
|
||
|
||
.option-btn-box {
|
||
padding: 8px 6px;
|
||
gap: 8px;
|
||
}
|
||
|
||
.option-btn-box .btn {
|
||
height: 40px;
|
||
font-size: 14px;
|
||
line-height: 40px;
|
||
}
|
||
|
||
/* 核心驱动区域 */
|
||
.section-container {
|
||
padding: 0 16px;
|
||
}
|
||
|
||
.section-title.core-title {
|
||
background-size: 28px 28px;
|
||
padding-left: 36px;
|
||
}
|
||
|
||
.section-title.core-title::after {
|
||
left: 36px;
|
||
width: 100px;
|
||
height: 6px;
|
||
}
|
||
|
||
.section-title .title-bar {
|
||
width: 5px;
|
||
height: 28px;
|
||
}
|
||
|
||
.section-title .title-text {
|
||
font-size: 28px;
|
||
}
|
||
|
||
.core-section {
|
||
padding: 40px 0;
|
||
}
|
||
|
||
.core-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: 16px;
|
||
}
|
||
|
||
.core-item {
|
||
padding: 20px 16px;
|
||
}
|
||
|
||
.core-item .core-icon {
|
||
width: 100px;
|
||
height: 100px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.core-item .core-name1 {
|
||
font-size: 14px;
|
||
width: auto;
|
||
}
|
||
|
||
.core-item .core-name2 {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.core-item .core-desc {
|
||
font-size: 13px;
|
||
}
|
||
|
||
/* 共性能力区域 */
|
||
.capability-section {
|
||
padding: 40px 0;
|
||
}
|
||
|
||
.capability-header {
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.capability-title-group {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.capability-title-icon {
|
||
width: 28px;
|
||
height: 28px;
|
||
}
|
||
|
||
.capability-title-text {
|
||
font-size: 28px;
|
||
}
|
||
|
||
.capability-title-bar {
|
||
width: 100px;
|
||
height: 6px;
|
||
margin-top: -10px;
|
||
}
|
||
|
||
.capability-desc {
|
||
font-size: 16px;
|
||
text-align: center;
|
||
line-height: 24px;
|
||
}
|
||
|
||
.capability-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: 12px;
|
||
padding: 0 16px;
|
||
}
|
||
|
||
.capability-card {
|
||
height: 80px;
|
||
padding: 12px 16px 12px 20px;
|
||
}
|
||
|
||
.capability-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
}
|
||
|
||
.capability-name {
|
||
font-size: 18px;
|
||
}
|
||
|
||
/* 三栏区域 */
|
||
.gxnl-qych-hydt-box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 20px 16px;
|
||
gap: 16px;
|
||
}
|
||
|
||
.gxnl-qych-hydt-box > div {
|
||
height: auto;
|
||
min-height: 300px;
|
||
background-size: cover !important;
|
||
}
|
||
|
||
.gxnl-qych-hydt-box > div:hover {
|
||
transform: none;
|
||
}
|
||
|
||
.gxnl-qych-hydt-box .name1 {
|
||
font-size: 22px;
|
||
line-height: 40px;
|
||
}
|
||
|
||
.gxnl-qych-hydt-box .name2 {
|
||
margin-bottom: 16px;
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
height: auto;
|
||
}
|
||
|
||
.gxnl-box .item {
|
||
height: auto;
|
||
min-height: 50px;
|
||
padding: 12px;
|
||
grid-template-columns: 48px 1fr 24px;
|
||
}
|
||
|
||
.gxnl-box .item .text {
|
||
padding-left: 12px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.qych-box .item {
|
||
height: auto;
|
||
min-height: 114px;
|
||
padding: 10px;
|
||
}
|
||
|
||
.qych-box .item .desc-btn-box {
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.qych-box .item .desc-btn-box .btn {
|
||
width: 100%;
|
||
}
|
||
|
||
.hydt-box .tab > div {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.hydt-box .item {
|
||
font-size: 12px;
|
||
padding: 12px;
|
||
}
|
||
|
||
/* 底部区域 */
|
||
.bottom-box {
|
||
height: auto;
|
||
min-height: 300px;
|
||
padding: 40px 16px;
|
||
background-position: center;
|
||
}
|
||
|
||
.bottom-box .content {
|
||
width: 100%;
|
||
height: auto;
|
||
padding: 24px;
|
||
}
|
||
|
||
.bottom-box-content-title {
|
||
font-size: 24px;
|
||
line-height: 40px;
|
||
}
|
||
|
||
.bottom-box .content .desc {
|
||
font-size: 14px;
|
||
line-height: 24px;
|
||
}
|
||
|
||
.bottom-box .content .btn {
|
||
width: 100%;
|
||
height: 48px;
|
||
font-size: 16px;
|
||
line-height: 48px;
|
||
}
|
||
|
||
.bottom-box .content .btn:hover {
|
||
transform: none;
|
||
}
|
||
|
||
/* 隐藏swiper导航在移动端 */
|
||
.top-box ::v-deep .t-swiper__navigation {
|
||
display: none;
|
||
}
|
||
|
||
/* Hero Cards 移动端适配 */
|
||
.hero-cards {
|
||
grid-template-columns: 1fr;
|
||
gap: 12px;
|
||
margin-top: 32px;
|
||
padding: 0 16px;
|
||
width: calc(100% - 32px);
|
||
max-width: none;
|
||
}
|
||
|
||
.hero-card {
|
||
width: 100%;
|
||
max-width: none;
|
||
height: auto;
|
||
min-height: 140px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.hero-card .card-header {
|
||
height: 56px;
|
||
}
|
||
|
||
.hero-card .card-title {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.hero-card .card-body {
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 10px;
|
||
padding: 12px;
|
||
}
|
||
|
||
.hero-card .card-btn {
|
||
width: 100%;
|
||
height: 36px;
|
||
font-size: 13px;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
/* 企业出海移动端适配 */
|
||
.overseas2-section {
|
||
padding: 40px 0;
|
||
}
|
||
|
||
.overseas2-header {
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.overseas2-title-group {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.overseas2-title-icon {
|
||
width: 28px;
|
||
height: 28px;
|
||
}
|
||
|
||
.overseas2-title-text {
|
||
font-size: 28px;
|
||
}
|
||
|
||
.overseas2-title-bar {
|
||
width: 100px;
|
||
height: 6px;
|
||
margin-top: -10px;
|
||
}
|
||
|
||
.overseas2-desc {
|
||
font-size: 16px;
|
||
line-height: 24px;
|
||
text-align: center;
|
||
}
|
||
|
||
.overseas2-grid {
|
||
width: 100%;
|
||
padding: 0 16px;
|
||
gap: 12px;
|
||
}
|
||
|
||
.overseas2-card {
|
||
width: 100%;
|
||
height: auto;
|
||
min-height: 80px;
|
||
padding: 12px 16px;
|
||
flex-direction: row;
|
||
gap: 12px;
|
||
}
|
||
|
||
.overseas2-card-content {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.overseas2-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.overseas2-text {
|
||
gap: 2px;
|
||
}
|
||
|
||
.overseas2-name {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.overseas2-item-desc {
|
||
font-size: 13px;
|
||
white-space: normal;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
|
||
.overseas2-btn {
|
||
width: 56px;
|
||
height: 56px;
|
||
font-size: 12px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 行业动态移动端适配 */
|
||
.news-section {
|
||
padding: 40px 0;
|
||
}
|
||
|
||
.news-title-group {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.news-title-icon {
|
||
width: 28px;
|
||
height: 28px;
|
||
}
|
||
|
||
.news-title-text {
|
||
font-size: 28px;
|
||
}
|
||
|
||
.news-title-bar {
|
||
width: 100px;
|
||
height: 6px;
|
||
margin-top: -10px;
|
||
}
|
||
|
||
.news-tabs {
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
margin-top: -20px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.news-tab {
|
||
padding: 6px 16px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.news-list {
|
||
height: auto;
|
||
max-height: none;
|
||
gap: 12px;
|
||
padding: 0 16px;
|
||
}
|
||
|
||
.news-item {
|
||
flex-direction: column;
|
||
padding: 12px;
|
||
gap: 12px;
|
||
}
|
||
|
||
.news-pic {
|
||
width: 100%;
|
||
height: 140px;
|
||
}
|
||
|
||
.news-content-top .news-title {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.news-content-middle {
|
||
gap: 8px;
|
||
}
|
||
|
||
.news-content-bottom {
|
||
font-size: 13px;
|
||
-webkit-line-clamp: 3;
|
||
}
|
||
|
||
.news-more {
|
||
padding: 16px 16px 0 0;
|
||
}
|
||
|
||
/* 合作伙伴移动端隐藏（动画在移动端影响性能） */
|
||
.partner-section {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
/* 平板适配 */
|
||
@media (min-width: 768px) and (max-width: 1024px) {
|
||
.top-options-box {
|
||
grid-template-columns: repeat(3, 1fr);
|
||
padding: 0 5%;
|
||
}
|
||
|
||
.gxnl-qych-hydt-box {
|
||
padding: 3% 5%;
|
||
gap: 20px;
|
||
}
|
||
|
||
.gxnl-qych-hydt-box > div {
|
||
height: 450px;
|
||
}
|
||
|
||
.core-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
|
||
.capability-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 20px;
|
||
}
|
||
|
||
.capability-card {
|
||
height: 90px;
|
||
padding: 12px 12px 12px 24px;
|
||
}
|
||
|
||
.capability-icon {
|
||
width: 48px;
|
||
height: 48px;
|
||
}
|
||
|
||
.capability-name {
|
||
font-size: 20px;
|
||
}
|
||
|
||
/* 企业出海平板适配 */
|
||
.overseas2-card {
|
||
width: 100%;
|
||
max-width: 500px;
|
||
}
|
||
|
||
/* Hero Cards 平板适配 */
|
||
.hero-cards {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 20px;
|
||
}
|
||
|
||
.hero-card {
|
||
width: 100%;
|
||
max-width: none;
|
||
}
|
||
}
|
||
</style> |