4009 lines
101 KiB
Vue
4009 lines
101 KiB
Vue
<template>
|
||
<div class="page-box portal-page">
|
||
<div class="home-figma-scale-viewport">
|
||
<div class="home-figma-scale-stage" ref="figmaStage">
|
||
<!-- 主页面 -->
|
||
<div class="container">
|
||
<!-- 顶部背景轮播 -->
|
||
<div class="top-box snap-section" id="section-hero" :style="{ minHeight: topBannerHeight + 'px' }">
|
||
<t-swiper
|
||
class="top-banner-swiper"
|
||
animation="fade"
|
||
:height="topBannerHeight"
|
||
:interval="10000"
|
||
:duration="500"
|
||
:loop="true"
|
||
:autoplay="true"
|
||
theme="dark"
|
||
:navigation="{ showSlideBtn: 'never' }"
|
||
:current="currentBannerIndex"
|
||
@change="onBannerChange"
|
||
>
|
||
<t-swiper-item v-for="(video, idx) in topBannerVideos" :key="idx">
|
||
<video
|
||
ref="bannerVideoRefs"
|
||
class="banner-video"
|
||
:src="video"
|
||
muted
|
||
loop
|
||
playsinline
|
||
webkit-playsinline
|
||
preload="auto"
|
||
/>
|
||
</t-swiper-item>
|
||
</t-swiper>
|
||
|
||
<div class="home-shelf home-shelf--hero top-box-inner">
|
||
<div class="home-hero-content">
|
||
<div class="top-hero-head">
|
||
<h1 class="top-title-text">可信碳信息网</h1>
|
||
<p class="top-title-desc">
|
||
让中国的每一份碳都拥有独一无二的可信数字身份
|
||
</p>
|
||
</div>
|
||
|
||
<div class="top-hero-actions">
|
||
<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" v-if="hotSearchTags.length > 0">
|
||
<div class="hot-label">热门搜索: </div>
|
||
<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>
|
||
</div>
|
||
<div class="top-box-bottom-over"> </div>
|
||
</div>
|
||
|
||
<!-- 中间核心驱动 -->
|
||
<section class="core-section snap-section" id="section-core">
|
||
<div class="home-shelf home-shelf--core">
|
||
<div class="section-title core-title">
|
||
<div class="home-block-title-content">
|
||
<h3 class="home-block-title-text">核心驱动</h3>
|
||
<span class="home-section-title-bar home-block-title-bar"></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="core-grid">
|
||
<div
|
||
class="core-item"
|
||
:class="{ 'core-item--selected': index === coreSelectedIndex }"
|
||
v-for="(item, index) in coreList"
|
||
:key="index"
|
||
@mouseenter="coreSelectedIndex = index"
|
||
>
|
||
<div class="core-item-visual">
|
||
<img
|
||
class="core-icon"
|
||
: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>
|
||
<div class="core-text">
|
||
<h4 class="core-name2">{{ item.name2 }}</h4>
|
||
<p class="core-desc">{{ item.desc }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 共性能力模块 -->
|
||
<section class="capability-section snap-section" id="section-capability">
|
||
<div class="home-shelf home-shelf--capability">
|
||
<div class="capability-header">
|
||
<div class="capability-title-group">
|
||
<div class="capability-title-content">
|
||
<h3 class="capability-title-text">共性能力</h3>
|
||
<span class="home-section-title-bar 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"
|
||
@click="handleCapabilityClick(item)">
|
||
<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 snap-section" id="section-overseas">
|
||
<div class="home-shelf home-shelf--overseas">
|
||
<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="home-section-title-bar overseas2-title-bar"></span>
|
||
</div>
|
||
<!-- <p class="overseas2-desc">政策要求、合规指引、案例分享，一站式信息与系统入口</p> -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="overseas2-grid">
|
||
<div
|
||
class="overseas2-card"
|
||
:class="`overseas2-card--${index}`"
|
||
v-for="(item, index) in overseas2List"
|
||
:key="index"
|
||
@click="handleOverseasClick(item)"
|
||
>
|
||
<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"
|
||
:class="{ 'overseas2-btn--multiline': item.btnMultiline }"
|
||
@click.stop="handleOverseasBtnClick(item)"
|
||
>{{ item.btnName }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 行业动态（布局与 overseas2 同构：section-container + header + grid） -->
|
||
<section class="news-section snap-section" id="section-news">
|
||
<div class="home-shelf home-shelf--news">
|
||
<div class="news-header">
|
||
<div class="news-title-group">
|
||
<div class="news-title-content">
|
||
<h3 class="news-title-text">行业动态</h3>
|
||
<span class="home-section-title-bar news-title-bar"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="news-grid">
|
||
<div class="news-tabs-row">
|
||
<div class="news-tabs-main">
|
||
<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.name }}
|
||
</div>
|
||
</div>
|
||
<button type="button" class="news-more" @click="handleNewsMore">查看更多>></button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 骨架屏 -->
|
||
<div v-if="newsLoading" class="news-list">
|
||
<div class="news-item news-skeleton" v-for="i in 3" :key="i">
|
||
<div class="skeleton-pic"></div>
|
||
<div class="news-content">
|
||
<div class="skeleton-title"></div>
|
||
<div class="skeleton-meta"></div>
|
||
<div class="skeleton-desc"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 新闻列表 -->
|
||
<div v-else-if="!currentNewsList.length" class="news-empty">暂无相关动态</div>
|
||
<div v-else class="news-list">
|
||
<article
|
||
class="news-item"
|
||
v-for="(item, index) in currentNewsList"
|
||
:key="item.id || item.bt || index"
|
||
@click="handleNewsClick(item)"
|
||
>
|
||
<img
|
||
:src="item.tp || getDefaultPic(newsTabs[activeTab].type)"
|
||
alt=""
|
||
class="news-pic"
|
||
/>
|
||
<div class="news-content">
|
||
<h4 class="news-item-title">{{ item.bt }}</h4>
|
||
<div class="news-meta">
|
||
<img src="@/pages/index/assets/alarm.png" class="news-alarm-icon" alt="" />
|
||
<time class="news-date">{{ item.fbsj }}</time>
|
||
<span v-if="item.lxr" class="news-remark">转载自 {{ item.lxr }}</span>
|
||
</div>
|
||
<p v-if="item.nr" class="news-summary">{{ item.nr }}</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 合作伙伴模块 -->
|
||
<section class="partner-section snap-section" id="section-partner">
|
||
<div class="home-shelf home-shelf--partner">
|
||
<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>
|
||
|
||
<!-- CTA：独占一屏（Figma 150645:1019） -->
|
||
<div class="bottom-box snap-section" id="section-bottom">
|
||
<img
|
||
class="bottom-box-bg"
|
||
:src="homeCtaBg"
|
||
alt=""
|
||
aria-hidden="true"
|
||
/>
|
||
<button
|
||
type="button"
|
||
class="bottom-box-cta-hotspot"
|
||
@click="openService"
|
||
aria-label="申请服务"
|
||
title="申请服务"
|
||
></button>
|
||
</div>
|
||
|
||
<Footer style="width:100%" />
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import Footer from '@/pages/index/components/footer/index.vue';
|
||
import hydtApi from '@/pages/index/api/hydt';
|
||
import gxzxApi from '@/pages/index/api/gxzx/index.js';
|
||
import searchApi from '@/pages/index/api/search.js';
|
||
import { smoothScrollTo, waitForScrollEnd } from '@/pages/index/utils/portal-scroll-mode';
|
||
import { applyPortalFigmaScaleToRoot } from '@/pages/index/utils/portal-figma-scale';
|
||
import { calcHomeFigmaScale } from '@/pages/index/utils/home-figma-scale';
|
||
import portalFigmaScaleMixin from '@/pages/index/utils/portal-figma-scale-mixin';
|
||
import fullpageScrollMixin from '@/pages/index/utils/fullpage-scroll-mixin';
|
||
import comingSoonMixin from '@/pages/index/utils/coming-soon-mixin';
|
||
|
||
export default {
|
||
name: 'Home2Index',
|
||
mixins: [portalFigmaScaleMixin, fullpageScrollMixin, comingSoonMixin],
|
||
data() {
|
||
return {
|
||
inputValue: '',
|
||
activeTab: 0,
|
||
topBannerHeight: 686,
|
||
currentBannerIndex: 0,
|
||
newsLoading: true,
|
||
scrollRoot: null,
|
||
sectionOffsets: [],
|
||
sectionIds: ['section-hero', 'section-core', 'section-capability', 'section-overseas', 'section-news', 'section-partner', 'section-bottom'],
|
||
// 当前激活的 section（用于导航高亮），由 IntersectionObserver 驱动
|
||
activeSectionIndex: 0,
|
||
coreSelectedIndex: 3,
|
||
newsListByType: {
|
||
gjzc: [], // 国家政策
|
||
hyzx: [], // 行业资讯
|
||
ptgg: [] // 平台公告
|
||
},
|
||
topBannerVideos: [
|
||
require('@/pages/index/views/home2/assets/home-bg-0.mp4'),
|
||
require('@/pages/index/views/home2/assets/home-bg-1.mp4'),
|
||
],
|
||
homeCtaBg: require('@/pages/index/assets/Group 7.png'),
|
||
capabilityList: [
|
||
{ name: '碳核算平台', icon: require('@/pages/index/assets/home-thspt-icon.png'), anchor: 'content-1' },
|
||
{ name: '碳交易平台', icon: require('@/pages/index/assets/home-tjypt-icon.png'), anchor: 'content-3' },
|
||
{ name: '碳认证机构', icon: require('@/pages/index/assets/home-trzjg-icon.png'), anchor: 'content-2' },
|
||
{ name: '碳金融服务', icon: require('@/pages/index/assets/home-tjrfw-icon.png'), anchor: 'content-4' },
|
||
{ name: '碳技术咨询', icon: require('@/pages/index/assets/home-tjszx-icon.png'), anchor: 'content-5' },
|
||
{ name: '更多能力', icon: require('@/pages/index/assets/home-gdnl-icon.png'), anchor: '' }
|
||
],
|
||
coreList: [
|
||
{
|
||
name1: '核心底座',
|
||
name2: '国家区块链网络',
|
||
desc: '依托区块链网络基础底座上海枢纽，确保每一笔碳数据拥有唯一的"链上基因"，实现国家级权威存证与不可篡改。',
|
||
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'),
|
||
iconWidth: 210,
|
||
iconHeight: 183
|
||
},
|
||
{
|
||
name1: '身份基石',
|
||
name2: '碳数字身份体系',
|
||
desc: '为企业构建唯一的链上"数字身份"，集成资质核验证、资产托管与信用评级，打造绿色经济的数字通行证。',
|
||
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'),
|
||
iconWidth: 211,
|
||
iconHeight: 183
|
||
}
|
||
],
|
||
hotSearchTags: [],
|
||
// 企业出海数据
|
||
overseas2List: [
|
||
{
|
||
name: '电池法案',
|
||
btnName: '申请服务',
|
||
sectionId: 'section0',
|
||
link: '',
|
||
desc: '欧盟电池法案管控电池全生命周期，用碳足迹、电池护照、再生料、回收、供应链尽调设硬性准入门槛，强制绿色循环。',
|
||
icon: require('@/pages/index/assets/home-dcfa-icon.png'),
|
||
},
|
||
{
|
||
name: 'CBAM',
|
||
btnName: 'CBAM\n试算',
|
||
btnMultiline: true,
|
||
sectionId: 'section1',
|
||
link: 'https://www.ouyeel.com/cbam/login',
|
||
desc: '欧盟对进口高碳产品按隐含排放征收碳关税。',
|
||
icon: require('@/pages/index/assets/home-cbam-icon.png'),
|
||
},
|
||
{
|
||
name: '航运燃料',
|
||
btnName: '申请服务',
|
||
sectionId: 'section2',
|
||
link: '',
|
||
/* 优化需求：航运燃料暂未建设完成，点击应弹"敬请期待" */
|
||
comingSoon: true,
|
||
desc: '从化石油基向LNG、绿甲醇、绿氨等多元低碳方向加速转型。',
|
||
icon: require('@/pages/index/assets/home-hyrl-icon.png'),
|
||
},
|
||
],
|
||
// 行业动态tabs配置
|
||
newsTabs: [
|
||
{ name: '国家政策', type: 'gjzc' },
|
||
{ name: '行业资讯', type: 'hyzx' },
|
||
{ name: '平台公告', type: 'ptgg' }
|
||
],
|
||
// 合作伙伴数据
|
||
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') }
|
||
],
|
||
buttonLinkHost: 'https://ctn-web-pre.lingshu.net',
|
||
buttonLinks: {
|
||
// 碳数字身份证
|
||
'办证指南': '/mdviewer?file=docs%2Fcarbon-guide.md',
|
||
'碳证查询': '/trustedCarbonQuery/list?type=carbon-query',
|
||
'碳证核验': '/carbon-verify',
|
||
'场景推介': '/mdviewer?file=docs%2Ftypical-scenario.md',
|
||
// 国家可信碳链
|
||
'上链指南': '/mdviewer?file=docs%2Fcarbon-guide.md',
|
||
'上链标准': '',
|
||
'上链工具': '',
|
||
'碳证中心': '/carbon-index',
|
||
// 绿色服务
|
||
'服务市场': '/tfwsc',
|
||
'需求市场': '/txqsc',
|
||
'金融市场': '',
|
||
'数据市场': '/tsjsc',
|
||
},
|
||
kxtfwzx: '',
|
||
};
|
||
},
|
||
components: {
|
||
Footer,
|
||
},
|
||
activated() {
|
||
// keep-alive 恢复时重新挂 IntersectionObserver 并刷新 section 偏移
|
||
this.$nextTick(() => {
|
||
this.scrollRoot = document.querySelector('.content-wrap');
|
||
if (this.scrollRoot) {
|
||
this.refreshSectionOffsets();
|
||
this.setupSectionObserver();
|
||
}
|
||
});
|
||
},
|
||
watch: {
|
||
'$route.query.section'(section) {
|
||
this.$nextTick(() => {
|
||
this.jumpToSectionFromRoute(section, false);
|
||
});
|
||
},
|
||
'$route.query.type'(type) {
|
||
this.syncNewsTabFromRoute(type);
|
||
},
|
||
},
|
||
mounted() {
|
||
this.syncNewsTabFromRoute(this.$route.query.type);
|
||
this.syncBannerHeight();
|
||
this.onViewportResize = () => {
|
||
window.requestAnimationFrame(() => {
|
||
if (window.innerWidth >= 768) {
|
||
applyPortalFigmaScaleToRoot(window.innerWidth, this.getPortalViewportHeight(), this.$route.path);
|
||
}
|
||
this.syncBannerHeight();
|
||
});
|
||
};
|
||
window.addEventListener('resize', this.onViewportResize);
|
||
if (window.visualViewport) {
|
||
window.visualViewport.addEventListener('resize', this.onViewportResize);
|
||
}
|
||
// Mac Safari 自动播放策略更严格：未发生用户交互时可能静默拒绝。
|
||
// 首次任意交互后再尝试播一次。
|
||
this._unlockBannerOnce = () => {
|
||
this.onUserInteractUnlockBanner();
|
||
['click', 'touchstart', 'keydown', 'scroll'].forEach((evt) => {
|
||
window.removeEventListener(evt, this._unlockBannerOnce);
|
||
});
|
||
};
|
||
['click', 'touchstart', 'keydown', 'scroll'].forEach((evt) => {
|
||
window.addEventListener(evt, this._unlockBannerOnce, { once: true, passive: true });
|
||
});
|
||
this.loadHotSearch();
|
||
this.fetchNewsData();
|
||
this.getTfwzxUrl();
|
||
this.$nextTick(() => {
|
||
this.scrollRoot = document.querySelector('.content-wrap');
|
||
if (window.innerWidth >= 768) {
|
||
applyPortalFigmaScaleToRoot(window.innerWidth, this.getPortalViewportHeight(), this.$route.path);
|
||
}
|
||
this.syncBannerHeight();
|
||
if (this.scrollRoot) {
|
||
this.refreshSectionOffsets();
|
||
// 用 IntersectionObserver 替代原来的 wheel 劫持：
|
||
// 不再拦截浏览器原生滚动，由浏览器处理滚动手势和惯性，
|
||
// 我们只负责"哪个 section 当前最接近视口中心"以高亮导航。
|
||
this.setupSectionObserver();
|
||
if (typeof ResizeObserver !== 'undefined') {
|
||
this._scrollRootResizeObserver = new ResizeObserver(() => {
|
||
this.onViewportResize();
|
||
this.refreshSectionOffsets();
|
||
});
|
||
this._scrollRootResizeObserver.observe(this.scrollRoot);
|
||
}
|
||
}
|
||
this.playActiveBannerVideo();
|
||
this.jumpToSectionFromRoute(this.$route.query.section, false);
|
||
});
|
||
},
|
||
beforeDestroy() {
|
||
if (this.onViewportResize) {
|
||
window.removeEventListener('resize', this.onViewportResize);
|
||
if (window.visualViewport) {
|
||
window.visualViewport.removeEventListener('resize', this.onViewportResize);
|
||
}
|
||
}
|
||
if (this._unlockBannerOnce) {
|
||
['click', 'touchstart', 'keydown', 'scroll'].forEach((evt) => {
|
||
window.removeEventListener(evt, this._unlockBannerOnce);
|
||
});
|
||
this._unlockBannerOnce = null;
|
||
}
|
||
if (this._scrollRootResizeObserver) {
|
||
this._scrollRootResizeObserver.disconnect();
|
||
this._scrollRootResizeObserver = null;
|
||
}
|
||
this.teardownSectionObserver();
|
||
},
|
||
methods: {
|
||
syncNewsTabFromRoute(type) {
|
||
if (!type) return;
|
||
const index = this.newsTabs.findIndex((tab) => tab.type === type);
|
||
if (index >= 0) this.activeTab = index;
|
||
},
|
||
jumpToSectionFromRoute(section, smooth = true) {
|
||
if (!section) return;
|
||
const index = this.sectionIds.indexOf(section);
|
||
if (index < 0) return;
|
||
this.scrollRootToSection(index, smooth);
|
||
},
|
||
async getTfwzxUrl() {
|
||
try {
|
||
const { data } = await gxzxApi.tfwzxurl();
|
||
this.kxtfwzx = data.kxtfwzx;
|
||
this.buttonLinkHost = this.kxtfwzx;
|
||
} catch (error) {
|
||
console.error('获取碳服务中枢URL失败', error);
|
||
}
|
||
},
|
||
getScrollRoot() {
|
||
return this.scrollRoot || document.querySelector('.content-wrap');
|
||
},
|
||
getSectionScrollTop(sectionEl, scrollRoot) {
|
||
if (!sectionEl || !scrollRoot) return 0;
|
||
const rootRect = scrollRoot.getBoundingClientRect();
|
||
const rect = sectionEl.getBoundingClientRect();
|
||
return scrollRoot.scrollTop + (rect.top - rootRect.top);
|
||
},
|
||
getCurrentSectionIndex(scrollRoot) {
|
||
// 兜底方法：在 IntersectionObserver 还没回报时（如首屏）使用。
|
||
if (!this.sectionOffsets.length) {
|
||
this.refreshSectionOffsets();
|
||
}
|
||
const scrollTop = scrollRoot.scrollTop;
|
||
const anchor = scrollTop + scrollRoot.clientHeight * 0.4;
|
||
let currentIndex = 0;
|
||
for (let i = 0; i < this.sectionOffsets.length; i++) {
|
||
if (anchor >= this.sectionOffsets[i] - 2) {
|
||
currentIndex = i;
|
||
}
|
||
}
|
||
return currentIndex;
|
||
},
|
||
/**
|
||
* 滚动到指定 section —— 走浏览器原生 scrollIntoView，不再劫持 wheel 事件。
|
||
* 不再使用 setTimeout 锁，由 waitForScrollEnd 在真正结束时通知。
|
||
*/
|
||
async scrollRootToSection(sectionIndex, smooth = true) {
|
||
// 整屏切换交给 fullpageScrollMixin,统一在 fullpage-scroll.js 中处理动画
|
||
this.fullPageScrollTo(sectionIndex);
|
||
},
|
||
onFullPageSectionChange(newIndex) {
|
||
this.activeSectionIndex = newIndex;
|
||
},
|
||
/**
|
||
* 替代原 bindSectionWheelScroll：用 IntersectionObserver 监听每个 section
|
||
* 与视口的相交状态，自动算"当前激活 section"，不再干扰原生滚动。
|
||
*/
|
||
setupSectionObserver() {
|
||
if (typeof window === 'undefined' || typeof IntersectionObserver === 'undefined') {
|
||
return;
|
||
}
|
||
this.teardownSectionObserver();
|
||
|
||
const scrollRoot = this.getScrollRoot();
|
||
if (!scrollRoot) return;
|
||
|
||
// rootMargin 让"上 40% / 下 40%"的区域作为命中带，
|
||
// 哪个 section 中心更靠近 viewport 中心，谁就是 active。
|
||
this._sectionObserver = new IntersectionObserver(
|
||
(entries) => {
|
||
// 选可见度最大（且 isIntersecting）的 section
|
||
let bestIndex = this.activeSectionIndex;
|
||
let bestRatio = -1;
|
||
entries.forEach((entry) => {
|
||
if (!entry.isIntersecting) return;
|
||
const idx = this.sectionIds.indexOf(entry.target.id);
|
||
if (idx < 0) return;
|
||
if (entry.intersectionRatio > bestRatio) {
|
||
bestRatio = entry.intersectionRatio;
|
||
bestIndex = idx;
|
||
}
|
||
});
|
||
if (bestRatio >= 0) {
|
||
this.activeSectionIndex = bestIndex;
|
||
}
|
||
},
|
||
{
|
||
root: scrollRoot,
|
||
// 视口上下各 40% 作为命中带；中间 20% 是激活区
|
||
rootMargin: '-40% 0px -40% 0px',
|
||
threshold: [0, 0.25, 0.5, 0.75, 1],
|
||
},
|
||
);
|
||
|
||
this.sectionIds.forEach((id) => {
|
||
const el = document.getElementById(id);
|
||
if (el) this._sectionObserver.observe(el);
|
||
});
|
||
},
|
||
teardownSectionObserver() {
|
||
if (this._sectionObserver) {
|
||
this._sectionObserver.disconnect();
|
||
this._sectionObserver = null;
|
||
}
|
||
},
|
||
openNewTab(url) {
|
||
if (url) {
|
||
window.open(url);
|
||
} else {
|
||
this.showComingSoon();
|
||
}
|
||
},
|
||
openService() {
|
||
if (location.host.indexOf('cciw') >= 0) {
|
||
window.open('http://101.230.193.133:8888/')
|
||
} else {
|
||
window.open('http://carbon_did.liantu.tech/');
|
||
}
|
||
},
|
||
|
||
|
||
getPortalViewportHeight() {
|
||
const scrollRoot = this.getScrollRoot();
|
||
return scrollRoot?.clientHeight || document.documentElement.clientHeight || window.innerHeight;
|
||
},
|
||
syncBannerHeight() {
|
||
const viewportH = this.getPortalViewportHeight();
|
||
const figma = calcHomeFigmaScale(window.innerWidth, viewportH);
|
||
if (figma.enabled) {
|
||
this.topBannerHeight = figma.heroDesignHeight;
|
||
} else if (window.innerWidth < 768) {
|
||
this.topBannerHeight = Math.round(640 + (window.innerWidth / 768) * 120);
|
||
} else {
|
||
// 始终以滚动容器高度为准，勿读 hero.offsetHeight（DevTools 关闭后会卡在旧高度）
|
||
this.topBannerHeight = Math.max(Math.round(viewportH), 1);
|
||
}
|
||
this.$nextTick(() => {
|
||
this.syncPortalFigmaStageLayout();
|
||
this.refreshSectionOffsets();
|
||
this.playActiveBannerVideo();
|
||
});
|
||
},
|
||
onBannerChange(index) {
|
||
this.currentBannerIndex = typeof index === 'number' ? index : 0;
|
||
this.$nextTick(() => this.playActiveBannerVideo());
|
||
},
|
||
playActiveBannerVideo() {
|
||
const list = this.$refs.bannerVideoRefs || [];
|
||
list.forEach((video, i) => {
|
||
if (!video) return;
|
||
if (i === this.currentBannerIndex) {
|
||
video.muted = true;
|
||
try { video.currentTime = 0; } catch (e) {}
|
||
const p = video.play();
|
||
if (p && typeof p.catch === 'function') {
|
||
p.catch((err) => console.warn('[banner video] play rejected:', err));
|
||
}
|
||
} else {
|
||
video.pause();
|
||
try { video.currentTime = 0; } catch (e) {}
|
||
}
|
||
});
|
||
},
|
||
onUserInteractUnlockBanner() {
|
||
this.playActiveBannerVideo();
|
||
},
|
||
refreshSectionOffsets() {
|
||
const scrollRoot = this.getScrollRoot();
|
||
if (!scrollRoot) return;
|
||
this.sectionOffsets = this.sectionIds.map((id, index) => {
|
||
if (index === 0) return 0;
|
||
const el = document.getElementById(id);
|
||
if (!el) return 0;
|
||
return Math.max(0, Math.round(this.getSectionScrollTop(el, scrollRoot)));
|
||
});
|
||
},
|
||
// 封装跳转方法 - 外部链接新窗口，内部链接当前窗口
|
||
handleNavigate(link) {
|
||
if (!link) {
|
||
this.showComingSoon();
|
||
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.showComingSoon();
|
||
return;
|
||
}
|
||
const u = `${this.buttonLinkHost}${url}`;
|
||
this.$emit('gotoIfreamPage', u);
|
||
},
|
||
// 快捷搜索
|
||
handleSearch() {
|
||
if (this.inputValue) {
|
||
this.$router.push({ path: '/search', query: { keyword: this.inputValue } });
|
||
}
|
||
},
|
||
async loadHotSearch() {
|
||
try {
|
||
const res = await searchApi.getHotSearch();
|
||
if (res && res.data) {
|
||
this.hotSearchTags = res.data;
|
||
}
|
||
} catch (error) {
|
||
console.error('加载热门搜索失败', error);
|
||
}
|
||
},
|
||
// 处理热门搜索点击
|
||
handleHotSearch(keyword) {
|
||
this.$router.push({ path: '/search', query: { keyword } });
|
||
},
|
||
// 企业出海卡片点击 → 专题页对应区块
|
||
handleOverseasClick(item) {
|
||
// if (item && item.comingSoon) {
|
||
// this.showComingSoon('航运燃料专题');
|
||
// return;
|
||
// }
|
||
if (!item || !item.sectionId) {
|
||
this.$router.push('/qych');
|
||
return;
|
||
}
|
||
this.$router.push({ path: '/qych', query: { section: item.sectionId } });
|
||
},
|
||
// 企业出海按钮：外链新开窗口，否则进入专题页
|
||
handleOverseasBtnClick(item) {
|
||
// if (item && item.comingSoon) {
|
||
// this.showComingSoon('航运燃料专题');
|
||
// return;
|
||
// }
|
||
if (item.link && /^https?:\/\//.test(item.link)) {
|
||
window.open(item.link, '_blank');
|
||
return;
|
||
}
|
||
this.handleOverseasClick(item);
|
||
},
|
||
handleCapabilityClick(item) {
|
||
if (item.anchor) {
|
||
this.$router.push({ path: '/gxnlpt', query: { anchor: item.anchor } });
|
||
} else {
|
||
this.$router.push('/gxnlpt');
|
||
}
|
||
},
|
||
// 行业动态点击
|
||
handleNewsClick(item) {
|
||
const link = item.yyLj || item.lj;
|
||
if (link) {
|
||
window.open(link, '_blank');
|
||
} else {
|
||
console.log('点击新闻:', item.bt);
|
||
this.$message.info(item.bt);
|
||
}
|
||
},
|
||
handleNewsMore() {
|
||
const type = this.newsTabs[this.activeTab]?.type || 'gjzc';
|
||
this.$router.push({ path: '/hydt', query: { type } });
|
||
},
|
||
async fetchNewsData() {
|
||
this.newsLoading = true;
|
||
// 并行请求，任一失败不影响另一块数据展示
|
||
const [hydtResult, ptggResult] = await Promise.allSettled([
|
||
hydtApi.getHydtGroupedList(),
|
||
hydtApi.getPtggList()
|
||
]);
|
||
|
||
if (hydtResult.status === 'fulfilled' && hydtResult.value && hydtResult.value.data) {
|
||
this.newsListByType.gjzc = hydtResult.value.data.gjzc || [];
|
||
this.newsListByType.hyzx = hydtResult.value.data.hyzx || [];
|
||
} else {
|
||
this.newsListByType.gjzc = [];
|
||
this.newsListByType.hyzx = [];
|
||
console.error('获取行业动态失败', hydtResult.status === 'rejected' ? hydtResult.reason : null);
|
||
}
|
||
|
||
if (ptggResult.status === 'fulfilled' && ptggResult.value && ptggResult.value.data) {
|
||
this.newsListByType.ptgg = ptggResult.value.data || [];
|
||
} else {
|
||
this.newsListByType.ptgg = [];
|
||
console.error('获取平台公告失败', ptggResult.status === 'rejected' ? ptggResult.reason : null);
|
||
}
|
||
|
||
this.newsLoading = false;
|
||
},
|
||
getDefaultPic(type) {
|
||
const defaultPics = {
|
||
gjzc: 'static_res/images/news/default-news.png',
|
||
hyzx: 'static_res/images/news/default-hyzx.png',
|
||
ptgg: 'static_res/images/news/default-ptgg.png'
|
||
};
|
||
return defaultPics[type] || 'static_res/images/news/default-hyzx.png';
|
||
},
|
||
},
|
||
computed: {
|
||
currentNewsList() {
|
||
const type = this.newsTabs[this.activeTab]?.type;
|
||
const list = this.newsListByType[type] || [];
|
||
return list.slice(0, 3); // 默认显示3条
|
||
},
|
||
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 lang="less" scoped>
|
||
@import '../../styles/home-figma-variables.less';
|
||
@import '../../styles/page-layout.less';
|
||
|
||
.page-box {
|
||
background: @home-color-page-bg;
|
||
}
|
||
|
||
/* === 整屏滚动（CSS Scroll Snap 业界最优实现） ===
|
||
1. .content-wrap 是滚动容器（main.vue），已设置 overflow-y: auto。
|
||
2. 滚动容器的 snap-type 在 main.vue 里统一声明。
|
||
3. 每个 .snap-section 声明 scroll-snap-align: start，对齐到容器顶部。
|
||
4. 用 proximity 而非 mandatory：用户在 section 内部可自由滚动，
|
||
只有接近边界时才 snap 到下一屏。避免"卡顿 / 反向"和"无法停在中间"。
|
||
5. scroll-snap-stop: normal：允许用户快速滑动跨多屏。
|
||
6. min-height: 100%：让 section 至少占满一个视口高度，
|
||
这样 snap 才有"分屏"的几何基础。
|
||
7. 移动端关闭 snap：移动端用原生滚动体验更好，
|
||
整屏 snap 在小屏上会显得非常卡。 */
|
||
.snap-section {
|
||
scroll-snap-align: start;
|
||
scroll-snap-stop: normal;
|
||
min-height: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* Figma 首页1920/1440：token 见 home-figma-variables.less */
|
||
.portal-page {
|
||
.home-portal-page-vars();
|
||
.home-figma-scale-page();
|
||
}
|
||
|
||
.nav-box {
|
||
position: fixed;
|
||
top: 0px;
|
||
width: 100%;
|
||
background: @home-color-nav-legacy-bg;
|
||
margin: 0 auto;
|
||
|
||
display: grid;
|
||
grid-template-columns: 1fr 2fr 1fr;
|
||
place-items: center;
|
||
|
||
color: @home-color-white;
|
||
|
||
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: @home-font-family;
|
||
font-weight: @home-font-weight-regular;
|
||
font-style: Regular;
|
||
font-size: @home-font-size-16;
|
||
leading-trim: NONE;
|
||
letter-spacing: 0%;
|
||
}
|
||
|
||
.option-box .gzt {
|
||
padding: 10px;
|
||
text-align: center;
|
||
background: @home-color-white-30;
|
||
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: @home-font-size-16;
|
||
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: @home-gradient-nav-active;
|
||
border-bottom: 2px solid @home-color-white;
|
||
}
|
||
|
||
.top-box {
|
||
width: 100%;
|
||
position: relative;
|
||
/* Figma Group 47：导航下首屏内容区 686px，内容不裁切 */
|
||
min-height: var(--home-section-min-h);
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: stretch;
|
||
overflow: visible;
|
||
}
|
||
|
||
.top-banner-swiper {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 0;
|
||
}
|
||
|
||
.top-banner-swiper ::v-deep .t-swiper,
|
||
.top-banner-swiper ::v-deep .t-swiper__wrap,
|
||
.top-banner-swiper ::v-deep .t-swiper__content,
|
||
.top-banner-swiper ::v-deep .t-swiper-item {
|
||
height: 100% !important;
|
||
}
|
||
|
||
.banner-video {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
object-position: center 42%;
|
||
background: @home-color-banner-placeholder;
|
||
}
|
||
|
||
.banner-slide {
|
||
width: 100%;
|
||
height: 100%;
|
||
min-height: inherit;
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
background-position: center;
|
||
}
|
||
|
||
/* 全站首页版心：1200 居中，各区块仅在一层设置 padding（避免 section-container 叠层） */
|
||
.portal-page .home-shelf {
|
||
position: relative;
|
||
z-index: 1;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
max-width: var(--home-content-max);
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.portal-page .home-shelf--hero {
|
||
z-index: 2;
|
||
flex: 1;
|
||
width: 100%;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
padding: var(--home-hero-pad-top) var(--home-section-px, 16px) var(--home-hero-pad-bottom);
|
||
gap: 0;
|
||
}
|
||
|
||
/* 标题 + 搜索 + 三卡一体：内部等比间距，整块贴首屏下方 */
|
||
.home-hero-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex: 0 1 auto;
|
||
align-items: center;
|
||
width: 100%;
|
||
max-width: @home-content-width;
|
||
min-width: 0;
|
||
margin-top: auto;
|
||
margin-bottom: 0;
|
||
// 标题/副标题 与 搜索框 的间距:再收窄为 12px,符合 Figma 设计
|
||
// gap: var(--home-hero-content-gap-fluid, clamp(8px, 1.2vh, 12px));
|
||
gap: 36px !important;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 核心驱动及以下：左缘与导航「可」字对齐（--home-section-px） */
|
||
.portal-page .home-shelf--core {
|
||
align-items: stretch;
|
||
min-height: var(--home-section-min-h);
|
||
padding: var(--home-section-pad-top) var(--home-section-px) var(--home-section-pb);
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.portal-page .home-shelf--capability {
|
||
align-items: stretch;
|
||
min-height: var(--home-section-min-h);
|
||
padding: var(--home-section-pad-top) var(--home-section-px) var(--home-section-pb);
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.portal-page .home-shelf--news {
|
||
align-items: stretch;
|
||
min-height: var(--home-section-min-h);
|
||
padding: var(--home-section-pad-top) var(--home-section-px) var(--home-section-pb);
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.portal-page .home-shelf--overseas {
|
||
min-height: var(--home-section-min-h);
|
||
padding: var(--home-section-pad-top) var(--home-section-px) var(--home-section-pb);
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* Figma partners 1812 全宽：标题区水平居中，非左对齐「可」字 */
|
||
.portal-page .home-shelf--partner {
|
||
align-items: center;
|
||
min-height: var(--home-section-min-h);
|
||
padding: var(--home-section-pad-top) 0 var(--home-section-pb);
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.portal-page .home-shelf--core {
|
||
gap: clamp(28px, 5vh, @home-space-52);
|
||
}
|
||
|
||
.portal-page .home-shelf--capability {
|
||
gap: clamp(42px, 7vh, @home-ability-title-to-grid-gap);
|
||
/* 优化需求：六个快捷入口整体在 section 高度内居中（参考图 2：中部略偏上） */
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.portal-page .home-shelf--overseas {
|
||
align-items: stretch;
|
||
gap: clamp(24px, 4vh, @home-export-title-to-list-gap);
|
||
min-height: var(--home-section-min-h);
|
||
padding-bottom: var(--home-news-section-pb, @home-section-padding-bottom);
|
||
}
|
||
|
||
.portal-page .home-shelf--overseas .overseas2-header {
|
||
align-self: stretch;
|
||
width: 100%;
|
||
}
|
||
|
||
.portal-page .home-shelf--news {
|
||
gap: @home-section-gap;
|
||
/* Figma：列表底到区块底 72px 留白 */
|
||
min-height: auto;
|
||
padding-bottom: var(--home-news-section-pb, @home-section-padding-bottom);
|
||
}
|
||
|
||
.portal-page .home-shelf--partner {
|
||
gap: @home-section-gap;
|
||
}
|
||
|
||
/* 指示条默认在底部，会被 .top-box-bottom-over 渐变盖住，上移避开 300px 渐变区 */
|
||
.top-box ::v-deep .t-swiper__navigation {
|
||
display: none;
|
||
}
|
||
|
||
.portal-page > .container {
|
||
margin-top: 0;
|
||
width: 100%;
|
||
max-width: none;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
min-height: auto;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.portal-page > .container > .bottom-box {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.top-hero-head {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: @home-space-16;
|
||
width: 100%;
|
||
max-width: @home-hero-title-width;
|
||
// 抵消副标题 line-height 撑出的下方留白,让视觉底边贴近文字下沿
|
||
margin-bottom: -14px;
|
||
}
|
||
|
||
.top-hero-actions {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: clamp(20px, 3vh, @home-space-32);
|
||
width: 100%;
|
||
min-width: 0;
|
||
}
|
||
|
||
.top-title-text {
|
||
margin: 0;
|
||
font-family: @home-font-family;
|
||
font-size: clamp(32px, 3.89vw, @home-font-size-56);
|
||
font-weight: @home-font-weight-semibold;
|
||
line-height: 1.2;
|
||
text-align: center;
|
||
color: var(--home-title-color);
|
||
}
|
||
|
||
.top-title-desc {
|
||
width: 100%;
|
||
margin: 0;
|
||
font-family: @home-font-family;
|
||
font-size: clamp(16px, 1.94vw, @home-font-size-28);
|
||
font-weight: @home-font-weight-regular;
|
||
line-height: @home-line-height-38;
|
||
text-align: center;
|
||
color: var(--home-title-color);
|
||
-webkit-text-stroke: 2px @home-color-white;
|
||
paint-order: stroke fill;
|
||
text-shadow: @home-shadow-title-sub;
|
||
}
|
||
|
||
.top-search-box {
|
||
margin-top: 0;
|
||
z-index: 999;
|
||
width: 100%;
|
||
max-width: @home-search-box-width;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
gap: @home-space-16;
|
||
}
|
||
|
||
.search-box {
|
||
margin: 0 auto;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background: @home-color-white-70;
|
||
border: 1px solid @home-color-white;
|
||
backdrop-filter: blur(@home-blur-sm);
|
||
box-shadow: @home-shadow-search;
|
||
/* 优化需求：搜索框统一为长方形+圆角风格，圆角小一些更显政务正式 */
|
||
border-radius: 6px;
|
||
width: 100%;
|
||
padding: @home-search-box-padding;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.search-btn {
|
||
background: @home-gradient-search-btn;
|
||
width: @home-search-btn-width;
|
||
height: @home-search-btn-height;
|
||
border-radius: 6px;
|
||
flex-shrink: 0;
|
||
text-align: center;
|
||
color: @home-color-white;
|
||
line-height: @home-search-btn-height;
|
||
|
||
font-family: @home-font-family;
|
||
font-weight: @home-font-weight-medium;
|
||
font-size: @home-font-size-16;
|
||
letter-spacing: @home-letter-spacing;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.search-box input {
|
||
width: calc(100% - 100px);
|
||
max-width: 500px;
|
||
border: none;
|
||
background: transparent;
|
||
outline: none;
|
||
}
|
||
|
||
.search-box input::placeholder {
|
||
color: @home-color-text-muted;
|
||
font-size: @home-font-size-16;
|
||
opacity: 1;
|
||
font-style: normal;
|
||
}
|
||
|
||
.top-search-hot {
|
||
font-family: @home-font-family;
|
||
font-weight: @home-font-weight-regular;
|
||
font-size: @home-font-size-14;
|
||
margin-top: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: @home-search-tag-gap;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.hot-label {
|
||
color: @home-color-primary-dark;
|
||
font-weight: @home-font-weight-semibold;
|
||
}
|
||
|
||
.hot-tag {
|
||
background: @home-search-tag-bg;
|
||
border-radius: 7px;
|
||
padding: @home-search-tag-padding;
|
||
color: @home-color-primary-dark;
|
||
font-size: @home-font-size-14;
|
||
line-height: @home-search-tag-line-height;
|
||
cursor: pointer;
|
||
backdrop-filter: blur(@home-blur-tag);
|
||
transition: background-color 0.3s ease;
|
||
|
||
&:hover {
|
||
background: @home-search-tag-bg-hover;
|
||
}
|
||
}
|
||
|
||
.top-box-bottom-over {
|
||
height: @home-hero-fade-height;
|
||
width: 100%;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
z-index: 1;
|
||
pointer-events: none;
|
||
background: @home-gradient-hero-fade;
|
||
}
|
||
|
||
.top-to-center {
|
||
height: 60px;
|
||
background: @home-color-page-bg;
|
||
}
|
||
|
||
.top-options-box {
|
||
margin-top: 60px;
|
||
z-index: 999;
|
||
width: 100%;
|
||
padding: 0% 10%;
|
||
}
|
||
|
||
.hero-cards {
|
||
margin-top: 0;
|
||
margin-bottom: 0;
|
||
width: 100%;
|
||
min-width: 0;
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: clamp(16px, 2.5vw, @home-feature-cards-gap);
|
||
position: relative;
|
||
z-index: 3;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.hero-card {
|
||
width: 100%;
|
||
/* 优化需求：参考图 1 — 白底卡片 + 顶部绿色色块，整体扁平绿碳风格 */
|
||
border: 1px solid rgba(15, 97, 47, 0.18);
|
||
box-shadow: 0 4px 16px rgba(15, 97, 47, 0.06);
|
||
border-radius: @home-radius-lg;
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
gap: 0;
|
||
padding: 0 0 @home-space-24;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
background: #ffffff;
|
||
position: relative;
|
||
}
|
||
|
||
.hero-card::before {
|
||
/* 顶部绿色色块：渐变蒙层 */
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 56px;
|
||
background: linear-gradient(135deg, rgba(15, 97, 47, 0.18) 0%, rgba(15, 97, 47, 0.06) 100%);
|
||
border-radius: @home-radius-lg @home-radius-lg 0 0;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
}
|
||
|
||
.hero-card:hover {
|
||
transform: translateY(-6px);
|
||
border-color: rgba(15, 97, 47, 0.45);
|
||
box-shadow: 0 12px 28px rgba(15, 97, 47, 0.18);
|
||
}
|
||
|
||
.hero-card .card-header {
|
||
position: relative;
|
||
z-index: 1;
|
||
width: 100%;
|
||
padding: @home-feature-card-header-padding-y 16px;
|
||
border-bottom: 1px solid rgba(15, 97, 47, 0.15);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
box-shadow: none;
|
||
background: transparent;
|
||
border-radius: @home-radius-lg @home-radius-lg 0 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.hero-card .card-title {
|
||
font-size: @home-feature-card-title-size;
|
||
font-weight: @home-font-weight-semibold;
|
||
color: #0f612f;
|
||
font-family: @home-font-family;
|
||
line-height: 1.2;
|
||
text-align: center;
|
||
text-shadow: none;
|
||
}
|
||
|
||
.hero-card .card-body {
|
||
position: relative;
|
||
z-index: 1;
|
||
flex: 1;
|
||
width: 100%;
|
||
padding: @home-space-24 @home-feature-card-body-padding-x 0;
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: @home-feature-card-body-gap;
|
||
align-content: start;
|
||
box-sizing: border-box;
|
||
background: #ffffff;
|
||
}
|
||
|
||
.hero-card .card-btn {
|
||
width: 100%;
|
||
min-height: @home-feature-card-btn-height;
|
||
padding: @home-feature-card-btn-padding;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 6px;
|
||
font-size: @home-feature-card-btn-font-size;
|
||
font-weight: @home-font-weight-medium;
|
||
line-height: @home-line-height-26;
|
||
color: #0f612f;
|
||
cursor: pointer;
|
||
transition: all 0.25s ease;
|
||
box-sizing: border-box;
|
||
background: rgba(15, 97, 47, 0.06);
|
||
border: 1px solid rgba(15, 97, 47, 0.3);
|
||
}
|
||
|
||
.hero-card .card-btn:hover {
|
||
transform: translateY(-2px);
|
||
color: #ffffff;
|
||
background: #0f612f;
|
||
border-color: #0f612f;
|
||
box-shadow: 0 6px 16px rgba(15, 97, 47, 0.3);
|
||
}
|
||
|
||
.blue-card,
|
||
.cyan-card,
|
||
.green-card {
|
||
/* 三张卡片去色板差异化：统一为白底 + 顶部绿色色块 */
|
||
background: #ffffff;
|
||
}
|
||
|
||
.blue-card::before,
|
||
.cyan-card::before,
|
||
.green-card::before {
|
||
background: linear-gradient(135deg, rgba(15, 97, 47, 0.18) 0%, rgba(15, 97, 47, 0.06) 100%);
|
||
}
|
||
|
||
.blue-card .card-header,
|
||
.cyan-card .card-header,
|
||
.green-card .card-header {
|
||
background: transparent;
|
||
}
|
||
|
||
.blue-card .card-body,
|
||
.cyan-card .card-body,
|
||
.green-card .card-body {
|
||
background: #ffffff;
|
||
}
|
||
|
||
.blue-card .card-btn,
|
||
.cyan-card .card-btn,
|
||
.green-card .card-btn {
|
||
background: rgba(15, 97, 47, 0.06);
|
||
border: 1px solid rgba(15, 97, 47, 0.3);
|
||
color: #0f612f;
|
||
}
|
||
|
||
.blue-card .card-btn:hover,
|
||
.cyan-card .card-btn:hover,
|
||
.green-card .card-btn:hover {
|
||
color: #ffffff;
|
||
background: #0f612f;
|
||
border-color: #0f612f;
|
||
box-shadow: 0 6px 16px rgba(15, 97, 47, 0.3);
|
||
}
|
||
|
||
/* ==================== 核心驱动模块 ==================== */
|
||
.core-section {
|
||
width: 100%;
|
||
position: relative;
|
||
background: @home-color-white;
|
||
min-height: var(--home-section-min-h);
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.portal-page .capability-section,
|
||
.portal-page .overseas2-section,
|
||
.portal-page .partner-section {
|
||
min-height: var(--home-section-min-h);
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.portal-page .news-section {
|
||
min-height: var(--home-news-section-min-h, var(--home-section-min-h));
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 笔触相对标题字号定位，各区块统一（Figma 32px 标题：left 13 / top 8 / 158×50） */
|
||
@home-title-deco-left-em: 0.40625em;
|
||
@home-title-deco-top-em: 0.25em;
|
||
@home-title-deco-width-em: 4.9375em;
|
||
@home-title-deco-height-em: 1.5625em;
|
||
|
||
.portal-page .core-section .section-title.core-title {
|
||
position: relative;
|
||
top: auto;
|
||
left: auto;
|
||
transform: none;
|
||
width: auto;
|
||
height: auto;
|
||
min-height: 58px;
|
||
padding: 0;
|
||
margin: 0;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.portal-page .capability-section .capability-header {
|
||
position: relative;
|
||
top: auto;
|
||
left: auto;
|
||
transform: none;
|
||
width: auto;
|
||
height: auto;
|
||
min-height: 58px;
|
||
padding: 0;
|
||
margin: 0;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.portal-page .overseas2-section .overseas2-header {
|
||
position: relative;
|
||
top: auto;
|
||
left: auto;
|
||
transform: none;
|
||
width: auto;
|
||
height: auto;
|
||
min-height: 58px;
|
||
padding: 0;
|
||
margin: 0;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.portal-page .news-section .news-header {
|
||
position: relative;
|
||
top: auto;
|
||
left: auto;
|
||
transform: none;
|
||
width: auto;
|
||
height: auto;
|
||
min-height: 58px;
|
||
padding: 0;
|
||
margin: 0;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.portal-page .partner-section .partner-title-area {
|
||
position: relative;
|
||
top: auto;
|
||
left: auto;
|
||
transform: none;
|
||
width: auto;
|
||
height: auto;
|
||
min-height: 58px;
|
||
padding: 0;
|
||
margin: 0;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.portal-page .core-section .section-title.core-title {
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.portal-page .capability-section .capability-header,
|
||
.portal-page .overseas2-section .overseas2-header,
|
||
.portal-page .news-section .news-header {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: flex-start;
|
||
margin-bottom: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
.portal-page .capability-title-group,
|
||
.portal-page .overseas2-title-group,
|
||
.portal-page .news-title-group {
|
||
align-items: flex-start;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.portal-page .partner-section .partner-title-area {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-bottom: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
.portal-page .home-shelf--core .core-grid {
|
||
position: relative;
|
||
top: -11px;
|
||
left: 0px;
|
||
transform: none;
|
||
width: 100%;
|
||
max-width: none;
|
||
margin: 0;
|
||
box-sizing: border-box;
|
||
flex: 1;
|
||
min-height: 0;
|
||
}
|
||
|
||
.portal-page .home-shelf--capability .capability-grid {
|
||
position: relative;
|
||
top: -55px;
|
||
left: 0px;
|
||
transform: none;
|
||
width: 100%;
|
||
max-width: none;
|
||
margin: 0;
|
||
box-sizing: border-box;
|
||
flex: 1;
|
||
min-height: 0;
|
||
}
|
||
|
||
/* Figma Frame_list：628px 宽，在 1200 版心内水平居中 */
|
||
.portal-page .home-shelf--overseas .overseas2-grid {
|
||
position: relative;
|
||
top: auto;
|
||
left: auto;
|
||
transform: none;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
box-sizing: border-box;
|
||
flex: 0 1 auto;
|
||
}
|
||
|
||
.portal-page .home-shelf--news .news-grid {
|
||
position: relative;
|
||
top: auto;
|
||
left: auto;
|
||
transform: none;
|
||
width: 100%;
|
||
max-width: none;
|
||
margin: 0;
|
||
box-sizing: border-box;
|
||
flex: none;
|
||
}
|
||
|
||
/* 核心驱动四列：相对标题再内缩 30px（Figma Frame 243 首列 x=30） */
|
||
.portal-page .home-shelf--core .core-grid {
|
||
padding: 0 @home-core-grid-padding-x;
|
||
}
|
||
|
||
.portal-page .home-shelf--news .news-grid {
|
||
padding: 0;
|
||
/* Figma Frame 274 固定高度，避免列表撑开吃掉底部 72px 留白 */
|
||
flex: none;
|
||
}
|
||
|
||
.portal-page .home-shelf--news .news-header {
|
||
min-height: @home-news-title-block-height;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.home-block-title-content {
|
||
position: relative;
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
font-size: var(--home-title-size);
|
||
isolation: isolate;
|
||
}
|
||
|
||
.capability-title-content {
|
||
position: relative;
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
font-size: var(--home-title-size);
|
||
isolation: isolate;
|
||
}
|
||
|
||
.overseas2-title-content {
|
||
position: relative;
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
font-size: var(--home-title-size);
|
||
isolation: isolate;
|
||
}
|
||
|
||
.news-title-content {
|
||
position: relative;
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
font-size: var(--home-title-size);
|
||
isolation: isolate;
|
||
}
|
||
|
||
.home-block-title-text {
|
||
position: relative;
|
||
z-index: 1;
|
||
font-family: @home-font-family;
|
||
font-size: inherit;
|
||
font-weight: var(--home-title-weight);
|
||
line-height: 1.4;
|
||
color: var(--home-title-color);
|
||
margin: 0;
|
||
}
|
||
|
||
.capability-title-text {
|
||
position: relative;
|
||
z-index: 1;
|
||
font-family: @home-font-family;
|
||
font-size: inherit;
|
||
font-weight: var(--home-title-weight);
|
||
line-height: 1.4;
|
||
color: var(--home-title-color);
|
||
margin: 0;
|
||
}
|
||
|
||
.overseas2-title-text {
|
||
position: relative;
|
||
z-index: 1;
|
||
font-family: @home-font-family;
|
||
font-size: inherit;
|
||
font-weight: var(--home-title-weight);
|
||
line-height: 1.4;
|
||
color: var(--home-title-color);
|
||
margin: 0;
|
||
}
|
||
|
||
.news-title-text {
|
||
position: relative;
|
||
z-index: 1;
|
||
font-family: @home-font-family;
|
||
font-size: inherit;
|
||
font-weight: var(--home-title-weight);
|
||
line-height: 1.4;
|
||
color: var(--home-title-color);
|
||
margin: 0;
|
||
}
|
||
|
||
.portal-page .section-container {
|
||
box-sizing: border-box;
|
||
max-width: var(--home-content-max);
|
||
margin: 0 auto;
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
}
|
||
|
||
.section-title {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.section-title .title-bar {
|
||
width: 6px;
|
||
height: 32px;
|
||
background: @home-gradient-section-title-bar;
|
||
border-radius: 3px;
|
||
margin-right: 16px;
|
||
}
|
||
|
||
.section-title .title-text {
|
||
font-size: @home-font-size-32;
|
||
font-weight: @home-font-weight-semibold;
|
||
color: @home-color-text-partner;
|
||
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;
|
||
}
|
||
|
||
/* 标题下笔触装饰（透明底 PNG，各区块共用同一套定位） */
|
||
.home-section-title-bar {
|
||
display: block;
|
||
position: absolute;
|
||
top: @home-title-deco-top-em;
|
||
left: @home-title-deco-left-em;
|
||
width: @home-title-deco-width-em;
|
||
height: @home-title-deco-height-em;
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
background-color: transparent;
|
||
background-image: url('~@/pages/index/views/home2/assets/title-brush-bar.png');
|
||
background-repeat: no-repeat;
|
||
background-position: left center;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.home-block-title-bar {
|
||
display: block;
|
||
position: absolute;
|
||
top: @home-title-deco-top-em;
|
||
left: @home-title-deco-left-em;
|
||
width: @home-title-deco-width-em;
|
||
height: @home-title-deco-height-em;
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
background-color: transparent;
|
||
background-image: url('~@/pages/index/views/home2/assets/title-brush-bar.png');
|
||
background-repeat: no-repeat;
|
||
background-position: left center;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.capability-title-bar {
|
||
display: block;
|
||
position: absolute;
|
||
top: @home-title-deco-top-em;
|
||
left: @home-title-deco-left-em;
|
||
width: @home-title-deco-width-em;
|
||
height: @home-title-deco-height-em;
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
background-color: transparent;
|
||
background-image: url('~@/pages/index/views/home2/assets/title-brush-bar.png');
|
||
background-repeat: no-repeat;
|
||
background-position: left center;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.overseas2-title-bar {
|
||
display: block;
|
||
position: absolute;
|
||
top: @home-title-deco-top-em;
|
||
left: @home-title-deco-left-em;
|
||
width: @home-title-deco-width-em;
|
||
height: @home-title-deco-height-em;
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
background-color: transparent;
|
||
background-image: url('~@/pages/index/views/home2/assets/title-brush-bar.png');
|
||
background-repeat: no-repeat;
|
||
background-position: left center;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.news-title-bar {
|
||
display: block;
|
||
position: absolute;
|
||
top: @home-title-deco-top-em;
|
||
left: @home-title-deco-left-em;
|
||
width: @home-title-deco-width-em;
|
||
height: @home-title-deco-height-em;
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
background-color: transparent;
|
||
background-image: url('~@/pages/index/views/home2/assets/title-brush-bar.png');
|
||
background-repeat: no-repeat;
|
||
background-position: left center;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.core-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
gap: @home-core-grid-gap;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.core-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
align-self: start;
|
||
gap: @home-core-col-gap;
|
||
min-width: 0;
|
||
padding: 1px @home-core-col-padding-x 0;
|
||
border: 1px solid transparent;
|
||
border-radius: @home-core-selected-radius;
|
||
box-sizing: border-box;
|
||
background: transparent;
|
||
box-shadow: none;
|
||
transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
|
||
}
|
||
|
||
.core-item--selected {
|
||
padding-bottom: @home-core-selected-padding-bottom;
|
||
border: @home-core-selected-border;
|
||
background: @home-core-selected-bg;
|
||
box-shadow: @home-core-selected-shadow;
|
||
}
|
||
|
||
.core-item-visual {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
width: 100%;
|
||
min-height: @home-core-visual-min-height;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.core-text {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: @home-core-col-gap;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.core-item .core-icon {
|
||
display: block;
|
||
margin: 0 auto;
|
||
object-fit: contain;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.core-name1-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
min-height: @home-core-tag-height;
|
||
margin-top: 0;
|
||
padding: @home-core-tag-padding;
|
||
border-radius: @home-radius-xs;
|
||
box-sizing: border-box;
|
||
background: @home-gradient-core-tag;
|
||
}
|
||
|
||
.core-item .core-name1 {
|
||
font-family: @home-font-family;
|
||
font-size: @home-core-tag-font-size;
|
||
font-weight: @home-core-tag-font-weight;
|
||
line-height: @home-core-tag-line-height;
|
||
color: @home-core-tag-color;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.core-item .core-name2 {
|
||
display: block;
|
||
margin: 0;
|
||
width: 100%;
|
||
min-height: @home-core-title-min-height;
|
||
font-family: @home-font-family;
|
||
font-size: clamp(18px, 1.05vw, @home-core-title-size);
|
||
font-weight: @home-font-weight-semibold;
|
||
line-height: 1.35;
|
||
color: @home-core-title-color;
|
||
text-align: center;
|
||
white-space: normal;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.core-item--selected .core-name2 {
|
||
color: @home-core-title-color-selected;
|
||
}
|
||
|
||
.core-item .core-desc {
|
||
margin: 0;
|
||
width: 100%;
|
||
font-family: @home-font-family;
|
||
font-size: @home-core-desc-size;
|
||
font-weight: @home-font-weight-regular;
|
||
line-height: @home-core-desc-line-height;
|
||
color: @home-core-desc-color;
|
||
text-align: left;
|
||
word-break: break-word;
|
||
}
|
||
|
||
/* ==================== 共性能力模块 ==================== */
|
||
.capability-section {
|
||
position: relative;
|
||
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: @home-gradient-ability-section-bg;
|
||
}
|
||
|
||
.home-shelf--capability {
|
||
z-index: 1;
|
||
}
|
||
|
||
.capability-header {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: flex-start;
|
||
margin: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
.capability-title-group {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: flex-start;
|
||
gap: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
.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-desc {
|
||
font-size: @home-font-size-24;
|
||
font-weight: @home-font-weight-medium;
|
||
color: @home-color-text-secondary;
|
||
margin: 2px 0 0 0;
|
||
line-height: 40px;
|
||
}
|
||
|
||
/* Figma list 150605:3619：2×3 网格，列间距 13px，行间距 70px，容器高 330px */
|
||
.capability-grid {
|
||
display: grid;
|
||
/* 优化需求：六个快捷入口居中显示，不再拉伸到版心最大宽度 */
|
||
grid-template-columns: repeat(3, minmax(0, 420px));
|
||
column-gap: @home-ability-grid-col-gap;
|
||
row-gap: @home-ability-grid-row-gap;
|
||
width: 100%;
|
||
max-width: fit-content;
|
||
min-height: @home-ability-grid-min-height;
|
||
margin: 0 auto;
|
||
box-sizing: border-box;
|
||
justify-content: center;
|
||
justify-items: stretch;
|
||
align-content: center;
|
||
}
|
||
|
||
.capability-card {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
min-height: 111px;
|
||
height: 140px;
|
||
padding: @home-ability-card-padding;
|
||
box-sizing: border-box;
|
||
background: @home-gradient-ability-card;
|
||
border: @home-ability-card-border-width solid @home-color-white;
|
||
border-radius: @home-radius-lg;
|
||
box-shadow: @home-shadow-card-green-strong;
|
||
backdrop-filter: blur(@home-blur-ability);
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.capability-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: @home-shadow-ability-hover;
|
||
}
|
||
|
||
.capability-card-content {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: @home-space-16;
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.capability-icon {
|
||
width: @home-ability-icon-size;
|
||
height: @home-ability-icon-size;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.capability-name {
|
||
font-family: @home-font-family;
|
||
font-size: @home-font-size-24;
|
||
font-weight: @home-font-weight-regular;
|
||
line-height: @home-line-height-26;
|
||
color: var(--home-title-color);
|
||
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;
|
||
overflow: hidden;
|
||
background-image: url('~@/pages/index/assets/qych-bg.png');
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
background-position: center;
|
||
}
|
||
|
||
.home-shelf--overseas {
|
||
z-index: 1;
|
||
}
|
||
|
||
.overseas2-header {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: flex-start;
|
||
margin: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
.overseas2-title-group {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: flex-start;
|
||
gap: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
.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-desc {
|
||
font-size: @home-font-size-24;
|
||
font-weight: @home-font-weight-medium;
|
||
color: @home-color-text-secondary;
|
||
margin: 2px 0 0 0;
|
||
line-height: 40px;
|
||
}
|
||
|
||
/* Figma Frame_list：宽 628px，纵向 gap 28px，在 1200 版心内水平居中 */
|
||
.overseas2-grid {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
align-self: stretch;
|
||
gap: @home-export-card-gap;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
margin: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.overseas2-card {
|
||
display: flex;
|
||
width: 100%;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: @home-export-card-padding;
|
||
min-height: @home-export-card-height;
|
||
height: auto;
|
||
box-sizing: border-box;
|
||
background: @home-color-white-60;
|
||
border: 1px solid @home-color-white;
|
||
border-radius: @home-radius-lg;
|
||
box-shadow: @home-shadow-export-card;
|
||
backdrop-filter: blur(@home-blur-md);
|
||
cursor: pointer;
|
||
transition: box-shadow 0.25s ease, transform 0.25s ease;
|
||
|
||
&:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: @home-shadow-export-card-hover;
|
||
}
|
||
}
|
||
|
||
.overseas2-card-content {
|
||
display: flex;
|
||
flex: 1 1 auto;
|
||
align-items: center;
|
||
gap: @home-export-icon-text-gap;
|
||
min-width: 0;
|
||
}
|
||
|
||
.overseas2-card--0 .overseas2-card-content {
|
||
align-items: flex-end;
|
||
gap: @home-export-icon-text-gap-lg;
|
||
}
|
||
|
||
.overseas2-icon {
|
||
width: @home-export-icon-width;
|
||
height: @home-export-icon-height;
|
||
flex-shrink: 0;
|
||
object-fit: contain;
|
||
filter: drop-shadow(0 4px 8px rgba(129, 185, 247, 0.6));
|
||
}
|
||
|
||
.overseas2-text {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: @home-export-text-gap;
|
||
min-width: 0;
|
||
flex: 1 1 auto;
|
||
}
|
||
|
||
.overseas2-name {
|
||
font-family: @home-font-family;
|
||
font-size: clamp(18px, 1.2vw, @home-export-title-size);
|
||
font-weight: @home-font-weight-semibold;
|
||
line-height: 1.3;
|
||
color: @home-export-title-color;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.overseas2-item-desc {
|
||
font-family: @home-font-family;
|
||
font-size: @home-export-desc-size;
|
||
font-weight: @home-font-weight-regular;
|
||
line-height: @home-export-desc-line-height;
|
||
color: @home-export-desc-color;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.overseas2-btn {
|
||
flex-shrink: 0;
|
||
box-sizing: border-box;
|
||
background: @home-gradient-export-btn;
|
||
border-radius: @home-radius-xs;
|
||
width: @home-export-btn-size;
|
||
height: @home-export-btn-size;
|
||
min-width: @home-export-btn-size;
|
||
padding: @home-export-btn-padding-y @home-export-btn-padding-x;
|
||
color: @home-color-white;
|
||
font-family: @home-font-family;
|
||
font-size: @home-export-btn-font-size;
|
||
font-weight: @home-font-weight-medium;
|
||
line-height: @home-export-btn-line-height;
|
||
cursor: pointer;
|
||
transition: box-shadow 0.25s ease, transform 0.25s ease;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
|
||
&:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: @home-shadow-export-btn-hover;
|
||
}
|
||
}
|
||
|
||
.overseas2-btn--multiline {
|
||
line-height: @home-export-btn-line-height-multiline;
|
||
white-space: pre-line;
|
||
}
|
||
|
||
/* ==================== 行业动态 ==================== */
|
||
.news-section {
|
||
position: relative;
|
||
margin-bottom: 0;
|
||
overflow: visible;
|
||
background: @home-color-white;
|
||
}
|
||
|
||
.home-shelf--news {
|
||
z-index: 1;
|
||
}
|
||
|
||
.news-header {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.news-grid {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.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-tabs-row {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: flex-start;
|
||
width: 100%;
|
||
margin: 0 0 @home-news-tabs-to-list-gap;
|
||
}
|
||
|
||
.news-tabs-main {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 10px;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.news-tabs {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
flex-wrap: wrap;
|
||
gap: @home-space-32;
|
||
flex-shrink: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.news-tab {
|
||
background: @home-color-tab-bg;
|
||
border-radius: @home-radius-pill;
|
||
color: @home-color-secondary-green;
|
||
font-size: @home-font-size-16;
|
||
font-weight: @home-font-weight-regular;
|
||
line-height: @home-line-height-26;
|
||
padding: 4px 16px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
|
||
&:hover {
|
||
background: @home-color-tab-hover;
|
||
}
|
||
}
|
||
|
||
.news-tab-active {
|
||
background: @home-color-secondary-green;
|
||
font-weight: @home-font-weight-medium !important;
|
||
color: @home-color-white !important;
|
||
|
||
&:hover {
|
||
background: @home-color-secondary-green;
|
||
color: @home-color-white !important;
|
||
}
|
||
}
|
||
|
||
.news-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: @home-news-list-gap;
|
||
width: 100%;
|
||
flex: none;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.news-empty {
|
||
padding: 48px 0;
|
||
text-align: center;
|
||
font-size: 15px;
|
||
color: @home-color-text-muted;
|
||
}
|
||
|
||
.news-more {
|
||
padding: 0;
|
||
border: none;
|
||
background: transparent;
|
||
color: @home-color-secondary-green;
|
||
font-size: @home-font-size-14;
|
||
line-height: @home-line-height-26;
|
||
cursor: pointer;
|
||
flex-shrink: 0;
|
||
|
||
&:hover {
|
||
color: @home-color-news-more-hover;
|
||
}
|
||
}
|
||
|
||
.portal-page .home-shelf--news .news-list .news-item {
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
height: @home-news-item-height;
|
||
min-height: @home-news-item-height;
|
||
max-height: @home-news-item-height;
|
||
padding: @home-news-item-padding;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.portal-page .home-shelf--news .news-list .news-pic {
|
||
flex: 0 0 @home-news-thumb-width;
|
||
width: @home-news-thumb-width;
|
||
height: @home-news-thumb-height;
|
||
min-height: 0;
|
||
max-height: @home-news-thumb-height;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.portal-page .home-shelf--news .news-list .news-content {
|
||
min-height: 0;
|
||
flex: 1;
|
||
}
|
||
|
||
.news-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: @home-news-item-gap;
|
||
width: 100%;
|
||
height: @home-news-item-height;
|
||
min-height: @home-news-item-height;
|
||
max-height: @home-news-item-height;
|
||
padding: @home-news-item-padding;
|
||
flex-shrink: 0;
|
||
box-sizing: border-box;
|
||
background: @home-color-white;
|
||
border: none;
|
||
border-radius: @home-radius-xl;
|
||
box-shadow: @home-shadow-news-item;
|
||
cursor: pointer;
|
||
overflow: hidden;
|
||
transition: box-shadow 0.25s ease;
|
||
|
||
&:hover {
|
||
box-shadow: @home-shadow-news-item-hover;
|
||
}
|
||
}
|
||
|
||
.news-pic {
|
||
flex: 0 0 @home-news-thumb-width;
|
||
width: @home-news-thumb-width;
|
||
height: @home-news-thumb-height;
|
||
min-height: 0;
|
||
max-height: @home-news-thumb-height;
|
||
object-fit: cover;
|
||
border-radius: @home-news-thumb-radius;
|
||
flex-shrink: 0;
|
||
align-self: center;
|
||
}
|
||
|
||
.news-content {
|
||
flex: 1;
|
||
min-width: 0;
|
||
min-height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
gap: @home-news-content-gap;
|
||
}
|
||
|
||
.news-item-title {
|
||
margin: 0;
|
||
font-family: @home-font-family;
|
||
font-size: @home-news-title-size;
|
||
font-weight: @home-font-weight-semibold;
|
||
line-height: @home-news-title-line-height;
|
||
color: @home-color-black;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.news-meta {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: nowrap;
|
||
gap: @home-news-meta-gap;
|
||
min-height: @home-news-meta-line-height;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.news-alarm-icon {
|
||
width: @home-news-meta-icon-size;
|
||
height: @home-news-meta-icon-size;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.news-date {
|
||
font-size: @home-news-meta-font-size;
|
||
line-height: @home-news-meta-line-height;
|
||
color: @home-color-text-muted;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.news-remark {
|
||
font-size: @home-news-meta-font-size;
|
||
line-height: @home-news-meta-line-height;
|
||
color: @home-color-secondary-green;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
min-width: 0;
|
||
}
|
||
|
||
.news-summary {
|
||
margin: 0;
|
||
font-size: @home-news-summary-size;
|
||
line-height: @home-news-summary-line-height;
|
||
color: var(--home-body-color);
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 1;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
|
||
/* 骨架屏样式 */
|
||
.news-skeleton {
|
||
pointer-events: none;
|
||
}
|
||
|
||
.skeleton-pic {
|
||
width: @home-news-thumb-width;
|
||
height: @home-news-thumb-height;
|
||
border-radius: @home-news-thumb-radius;
|
||
flex-shrink: 0;
|
||
background: @home-gradient-skeleton;
|
||
background-size: 200% 100%;
|
||
animation: skeleton-loading 1.5s infinite;
|
||
}
|
||
|
||
.skeleton-title {
|
||
width: 80%;
|
||
height: 20px;
|
||
border-radius: @home-radius-xs;
|
||
background: @home-gradient-skeleton;
|
||
background-size: 200% 100%;
|
||
animation: skeleton-loading 1.5s infinite;
|
||
}
|
||
|
||
.skeleton-meta {
|
||
width: 50%;
|
||
height: 14px;
|
||
border-radius: @home-radius-xs;
|
||
background: @home-gradient-skeleton;
|
||
background-size: 200% 100%;
|
||
animation: skeleton-loading 1.5s infinite;
|
||
}
|
||
|
||
.skeleton-desc {
|
||
width: 95%;
|
||
height: 40px;
|
||
border-radius: @home-radius-xs;
|
||
background: @home-gradient-skeleton;
|
||
background-size: 200% 100%;
|
||
animation: skeleton-loading 1.5s infinite;
|
||
}
|
||
|
||
@keyframes skeleton-loading {
|
||
0% {
|
||
background-position: 200% 0;
|
||
}
|
||
|
||
100% {
|
||
background-position: -200% 0;
|
||
}
|
||
}
|
||
|
||
/* ==================== 企业出海模块 ==================== */
|
||
.overseas-section {
|
||
position: relative;
|
||
background: url('~@/pages/index/assets/home-qych.png') no-repeat center;
|
||
background-size: cover;
|
||
padding: var(--page-section-padding-y) 0;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: @home-color-overseas-overlay;
|
||
}
|
||
}
|
||
|
||
.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: @home-font-size-16;
|
||
color: @home-color-overseas-desc;
|
||
margin-top: 16px;
|
||
line-height: 1.8;
|
||
}
|
||
}
|
||
|
||
.overseas-right {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 24px;
|
||
}
|
||
|
||
.overseas-card {
|
||
background: @home-color-overseas-card-bg;
|
||
border-radius: @home-radius-lg;
|
||
padding: 24px;
|
||
transition: all 0.3s ease;
|
||
|
||
&:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: @home-shadow-overseas-card-hover;
|
||
}
|
||
|
||
.overseas-card-title {
|
||
font-size: @home-font-size-22;
|
||
font-weight: @home-font-weight-semibold;
|
||
color: @home-color-text-title;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.overseas-card-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: @home-space-16;
|
||
}
|
||
|
||
.overseas-card-desc {
|
||
font-size: @home-font-size-14;
|
||
color: @home-color-text-secondary;
|
||
line-height: 1.6;
|
||
margin: 0;
|
||
}
|
||
|
||
.overseas-card-btn {
|
||
background: @home-color-btn-blue-to;
|
||
color: @home-color-white;
|
||
padding: 12px 24px;
|
||
border-radius: @home-radius-sm;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
|
||
&:hover {
|
||
background: @home-color-overseas-btn-hover;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* ==================== 合作伙伴模块 ==================== */
|
||
.partner-section {
|
||
position: relative;
|
||
background: @home-color-page-bg;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
min-height: var(--home-section-min-h);
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.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: 100%;
|
||
height: auto;
|
||
min-height: 58px;
|
||
margin: 0;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: center;
|
||
position: relative;
|
||
}
|
||
|
||
.partner-title-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 10px;
|
||
position: relative;
|
||
z-index: 1;
|
||
text-align: center;
|
||
|
||
&::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-family: @home-font-family;
|
||
font-size: @home-font-size-32;
|
||
font-weight: @home-font-weight-regular;
|
||
line-height: @home-line-height-28;
|
||
color: @home-color-text-partner;
|
||
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-family: Inter, @home-font-family;
|
||
font-size: @home-font-size-24;
|
||
font-weight: @home-font-weight-medium;
|
||
line-height: @home-line-height-28;
|
||
color: @home-color-primary-dark;
|
||
}
|
||
|
||
.partner-count-num {
|
||
color: @home-color-primary-green;
|
||
font-weight: @home-font-weight-medium;
|
||
}
|
||
|
||
.partner-item {
|
||
width: @home-partner-logo-card-width;
|
||
height: @home-partner-logo-card-height;
|
||
background: @home-color-white;
|
||
border-radius: @home-radius-sm;
|
||
box-shadow: @home-shadow-partner-logo;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* CTA：全屏宽（用父宽推算左右负边距，避免 50vw± 在全屏滚动下出现竖线色差） */
|
||
.portal-page .bottom-box {
|
||
position: relative;
|
||
width: 100vw;
|
||
max-width: none;
|
||
margin-left: ~"calc(-1 * ((100vw - 100%) / 2))";
|
||
margin-right: ~"calc(-1 * ((100vw - 100%) / 2))";
|
||
border: none;
|
||
outline: none;
|
||
box-shadow: none;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.bottom-box {
|
||
position: relative;
|
||
width: 100%;
|
||
height: var(--home-cta-section-min-h, 100vh);
|
||
min-height: var(--home-cta-section-min-h, 100vh);
|
||
box-sizing: border-box;
|
||
background-color: #f5fbf7;
|
||
display: block;
|
||
overflow: hidden;
|
||
margin: 0;
|
||
padding: 0;
|
||
isolation: isolate;
|
||
}
|
||
|
||
/* 无字背景图：保留右侧背景层次，不需要遮罩 */
|
||
.bottom-box-bg {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
width: 100%;
|
||
min-width: 100%;
|
||
height: 102%;
|
||
transform: translate(-50%, -50%);
|
||
display: block;
|
||
object-fit: cover;
|
||
object-position: center center;
|
||
user-select: none;
|
||
border: 0;
|
||
outline: none;
|
||
}
|
||
|
||
/* 透明点击热区：覆盖设计稿中“申请服务”按钮区域，保持视觉不变但可点击 */
|
||
.bottom-box-cta-hotspot {
|
||
position: absolute;
|
||
z-index: 2;
|
||
left: 54.6%;
|
||
top: 56.3%;
|
||
width: 25.2%;
|
||
height: 13.6%;
|
||
border: 0;
|
||
border-radius: 8px;
|
||
background: transparent;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* 底边与页脚过渡 */
|
||
.bottom-box::after {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 0;
|
||
height: 80px;
|
||
background: linear-gradient(180deg, transparent 0%, @home-color-footer-bg 100%);
|
||
content: '';
|
||
pointer-events: none;
|
||
}
|
||
|
||
.bottom-box-inner {
|
||
position: relative;
|
||
z-index: 2;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
width: 100%;
|
||
max-width: var(--home-content-max);
|
||
height: 100%;
|
||
min-height: inherit;
|
||
margin: 0 auto;
|
||
padding: 0 var(--home-section-px);
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.bottom-box-copy {
|
||
position: relative;
|
||
z-index: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
flex: 0 1 @home-cta-copy-width;
|
||
width: @home-cta-copy-width;
|
||
max-width: 40%;
|
||
gap: @home-cta-head-to-btn-gap;
|
||
padding: 16px 8px;
|
||
margin: 0;
|
||
background: transparent;
|
||
border-radius: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.bottom-box-head {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: @home-cta-head-gap;
|
||
width: 100%;
|
||
}
|
||
|
||
.bottom-box-content-title {
|
||
margin: 0;
|
||
font-family: @home-font-family;
|
||
font-size: @home-cta-title-size;
|
||
font-weight: @home-font-weight-semibold;
|
||
line-height: @home-cta-title-line-height;
|
||
text-align: left;
|
||
color: @home-color-primary-dark;
|
||
white-space: nowrap;
|
||
text-shadow: none;
|
||
}
|
||
|
||
.bottom-box-desc {
|
||
margin: 0;
|
||
font-family: @home-font-family;
|
||
font-size: @home-cta-subtitle-size;
|
||
font-weight: @home-font-weight-regular;
|
||
line-height: @home-cta-subtitle-line-height;
|
||
text-align: left;
|
||
color: @home-color-primary-dark;
|
||
max-width: @home-cta-copy-width;
|
||
white-space: normal;
|
||
text-shadow: none;
|
||
}
|
||
|
||
.bottom-box-btn {
|
||
margin-top: 0;
|
||
width: @home-cta-btn-width;
|
||
max-width: 100%;
|
||
height: @home-cta-btn-height;
|
||
padding: @home-cta-btn-padding;
|
||
border: 1px solid @home-color-white;
|
||
border-radius: @home-radius-sm;
|
||
background: @home-gradient-cta-btn;
|
||
color: @home-color-white;
|
||
font-family: @home-font-family;
|
||
font-size: @home-cta-btn-font-size;
|
||
font-weight: @home-font-weight-medium;
|
||
line-height: @home-line-height-22;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
box-sizing: border-box;
|
||
-webkit-font-smoothing: antialiased;
|
||
transition: transform 0.25s ease, box-shadow 0.25s ease;
|
||
|
||
&:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: @home-shadow-cta-btn-hover;
|
||
}
|
||
}
|
||
|
||
.bottom-box + :deep(.portal-footer-shell) {
|
||
margin-top: 0;
|
||
}
|
||
|
||
/* 按 1:1 还原整图时，关闭代码绘制的右侧文案层 */
|
||
.bottom-box-inner,
|
||
.bottom-box-copy,
|
||
.bottom-box-head,
|
||
.bottom-box-content-title,
|
||
.bottom-box-desc,
|
||
.bottom-box-btn {
|
||
display: none;
|
||
}
|
||
|
||
/* 桌面端：标题贴顶（nav 留白），主内容在剩余空间内垂直居中 */
|
||
@media (min-width: 768px) {
|
||
.portal-page #section-hero.top-box {
|
||
min-height: var(--home-section-min-h);
|
||
}
|
||
|
||
.portal-page .home-shelf--hero {
|
||
justify-content: flex-start;
|
||
gap: 0;
|
||
}
|
||
|
||
.portal-page .home-hero-content {
|
||
margin-top: auto;
|
||
// 默认 28px 已统一,这里不再覆盖
|
||
}
|
||
|
||
.portal-page .top-hero-actions {
|
||
margin-top: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
.portal-page .home-shelf--core {
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.portal-page .home-shelf--capability {
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.portal-page .home-shelf--overseas {
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.portal-page .home-shelf--news {
|
||
justify-content: flex-start;
|
||
min-height: var(--home-news-section-min-h, var(--home-section-min-h));
|
||
}
|
||
|
||
.portal-page .home-shelf--partner {
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.portal-page .home-shelf--core .core-grid {
|
||
flex: 1 1 auto;
|
||
min-height: 0;
|
||
align-content: center;
|
||
align-self: stretch;
|
||
}
|
||
|
||
.portal-page .home-shelf--capability .capability-grid {
|
||
flex: 1 1 auto;
|
||
min-height: 0;
|
||
align-content: center;
|
||
align-self: stretch;
|
||
}
|
||
|
||
.portal-page .home-shelf--overseas .overseas2-grid {
|
||
flex: 1 1 auto;
|
||
min-height: 0;
|
||
align-content: center;
|
||
align-self: stretch;
|
||
}
|
||
|
||
.portal-page .home-shelf--news .news-grid {
|
||
flex: 1 1 auto;
|
||
min-height: 0;
|
||
align-content: center;
|
||
align-self: stretch;
|
||
}
|
||
|
||
.portal-page .home-shelf--core .section-title.core-title {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.portal-page .home-shelf--capability .capability-header {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.portal-page .home-shelf--overseas .overseas2-header {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.portal-page .home-shelf--news .news-header {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.portal-page .home-shelf--partner .partner-title-area {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.portal-page .home-shelf--core .core-grid {
|
||
padding: 0 clamp(8px, 1.5vw, @home-core-grid-padding-x);
|
||
}
|
||
|
||
.core-item .core-desc {
|
||
font-size: clamp(13px, 0.85vw, @home-core-desc-size);
|
||
line-height: 1.55;
|
||
}
|
||
}
|
||
|
||
/* 矮屏桌面（如 1366×645、1400×645）：压缩内边距，减少折行与溢出 */
|
||
@media (min-width: 768px) and (max-height: 720px) {
|
||
.portal-page {
|
||
--home-section-pt: 28px;
|
||
--home-section-pb: 32px;
|
||
--home-hero-pad-top: calc(var(--page-nav-height, @home-nav-height) + 24px);
|
||
--home-hero-pad-bottom: 28px;
|
||
}
|
||
|
||
.portal-page .home-shelf--hero {
|
||
gap: 20px;
|
||
}
|
||
|
||
.portal-page .home-shelf--core {
|
||
gap: 20px;
|
||
}
|
||
|
||
.portal-page .home-shelf--capability {
|
||
gap: 24px;
|
||
}
|
||
|
||
.portal-page .home-shelf--overseas {
|
||
gap: 16px;
|
||
}
|
||
|
||
.portal-page .home-shelf--news {
|
||
gap: 24px;
|
||
}
|
||
|
||
.top-title-text {
|
||
font-size: clamp(36px, 6vh, @home-font-size-56);
|
||
}
|
||
|
||
.top-title-desc {
|
||
font-size: clamp(18px, 3vh, @home-font-size-28);
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.hero-cards {
|
||
gap: 20px;
|
||
}
|
||
|
||
.hero-card .card-title {
|
||
font-size: 22px;
|
||
}
|
||
|
||
.overseas2-card {
|
||
min-height: 96px;
|
||
padding: 16px 20px;
|
||
}
|
||
|
||
.overseas2-grid {
|
||
gap: 16px;
|
||
}
|
||
|
||
.overseas2-item-desc {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.core-item .core-desc {
|
||
-webkit-line-clamp: unset;
|
||
line-clamp: unset;
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 767px) {
|
||
|
||
/* 容器调整 */
|
||
.container {
|
||
margin-top: var(--page-offset-top);
|
||
}
|
||
|
||
/* 顶部区域：移动端由 :style 绑定 minHeight(topBannerHeight) 撑满一屏；
|
||
这里不再强制 min-height:auto，避免覆盖内联高度 */
|
||
.top-box {
|
||
overflow: visible;
|
||
}
|
||
|
||
.portal-page .home-shelf--hero {
|
||
--home-hero-pad-top: calc(var(--page-offset-top, 56px) + 32px);
|
||
--home-hero-pad-bottom: 40px;
|
||
padding: var(--home-hero-pad-top) 16px var(--home-hero-pad-bottom);
|
||
gap: 0;
|
||
}
|
||
|
||
.portal-page .home-hero-content {
|
||
margin-top: 0;
|
||
// 标题/副标题 与 搜索框 的间距:从 32px 进一步收窄为 12px,符合 Figma 设计
|
||
gap: 12px;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.top-hero-head {
|
||
max-width: 100%;
|
||
}
|
||
|
||
.top-title-text {
|
||
font-size: @home-font-size-32;
|
||
}
|
||
|
||
.top-title-desc {
|
||
padding: 0;
|
||
font-size: 18px;
|
||
line-height: @home-line-height-28;
|
||
-webkit-text-stroke: 1px @home-color-white;
|
||
}
|
||
|
||
.top-search-box {
|
||
padding: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.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: @home-font-size-12;
|
||
}
|
||
|
||
/* 选项卡片区域 */
|
||
.top-options-box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 0 16px;
|
||
margin-top: 40px;
|
||
gap: @home-space-16;
|
||
}
|
||
|
||
.option-item-box {
|
||
padding: 16px;
|
||
}
|
||
|
||
.option-item-box:hover {
|
||
transform: none;
|
||
}
|
||
|
||
.option-item-box-title {
|
||
margin-top: 12px;
|
||
font-size: @home-font-size-20;
|
||
}
|
||
|
||
.option-btn-box {
|
||
padding: 8px 6px;
|
||
gap: 8px;
|
||
}
|
||
|
||
.option-btn-box .btn {
|
||
height: 40px;
|
||
font-size: @home-font-size-14;
|
||
line-height: 40px;
|
||
}
|
||
|
||
/* 核心驱动区域 */
|
||
.section-container {
|
||
padding-left: var(--home-section-px);
|
||
padding-right: var(--home-section-px);
|
||
}
|
||
|
||
.home-block-title-content {
|
||
font-size: @home-font-size-28;
|
||
}
|
||
|
||
.capability-title-content {
|
||
font-size: @home-font-size-28;
|
||
}
|
||
|
||
.overseas2-title-content {
|
||
font-size: @home-font-size-28;
|
||
}
|
||
|
||
.news-title-content {
|
||
font-size: @home-font-size-28;
|
||
}
|
||
|
||
.section-title .title-bar {
|
||
width: 5px;
|
||
height: 28px;
|
||
}
|
||
|
||
.section-title .title-text {
|
||
font-size: @home-font-size-28;
|
||
}
|
||
|
||
.core-section {
|
||
--home-section-pt: 40px;
|
||
--home-section-pb: 48px;
|
||
--home-section-min-h: auto;
|
||
}
|
||
|
||
.capability-section {
|
||
--home-section-pt: 40px;
|
||
--home-section-pb: 48px;
|
||
--home-section-min-h: auto;
|
||
}
|
||
|
||
.overseas2-section {
|
||
--home-section-pt: 40px;
|
||
--home-section-pb: 48px;
|
||
--home-section-min-h: auto;
|
||
}
|
||
|
||
.news-section {
|
||
--home-section-pt: 40px;
|
||
--home-section-pb: 48px;
|
||
--home-section-min-h: auto;
|
||
}
|
||
|
||
.partner-section {
|
||
--home-section-pt: 40px;
|
||
--home-section-pb: 48px;
|
||
--home-section-min-h: auto;
|
||
}
|
||
|
||
.portal-page .home-shelf--core {
|
||
min-height: auto;
|
||
padding-left: var(--home-section-px);
|
||
padding-right: var(--home-section-px);
|
||
}
|
||
|
||
.portal-page .home-shelf--capability {
|
||
min-height: auto;
|
||
padding-left: var(--home-section-px);
|
||
padding-right: var(--home-section-px);
|
||
}
|
||
|
||
.portal-page .home-shelf--overseas {
|
||
min-height: auto;
|
||
padding-left: var(--home-section-px);
|
||
padding-right: var(--home-section-px);
|
||
}
|
||
|
||
.portal-page .home-shelf--news {
|
||
min-height: auto;
|
||
padding-left: var(--home-section-px);
|
||
padding-right: var(--home-section-px);
|
||
}
|
||
|
||
.portal-page .home-shelf--partner {
|
||
min-height: auto;
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
}
|
||
|
||
.portal-page .home-shelf--core .core-grid {
|
||
padding: 0;
|
||
}
|
||
|
||
.portal-page .home-shelf--news .news-grid {
|
||
padding: 0;
|
||
}
|
||
|
||
.core-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: @home-space-16;
|
||
max-width: none;
|
||
}
|
||
|
||
.core-item {
|
||
padding: 1px 16px 0;
|
||
}
|
||
|
||
.core-item .core-icon {
|
||
width: 160px !important;
|
||
height: auto !important;
|
||
max-height: 150px;
|
||
}
|
||
|
||
.core-item .core-name1 {
|
||
font-size: @home-core-tag-font-size;
|
||
font-weight: @home-core-tag-font-weight;
|
||
white-space: normal;
|
||
}
|
||
|
||
.core-item .core-name2 {
|
||
font-size: @home-core-title-size;
|
||
white-space: normal;
|
||
}
|
||
|
||
.core-item .core-desc {
|
||
font-size: @home-core-desc-size;
|
||
line-height: @home-core-desc-line-height;
|
||
}
|
||
|
||
/* 共性能力区域 */
|
||
.capability-section {
|
||
padding: 0 0 var(--page-section-padding-y);
|
||
}
|
||
|
||
.capability-header {
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.capability-title-group {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: @home-search-tag-gap;
|
||
}
|
||
|
||
.capability-title-icon {
|
||
width: 28px;
|
||
height: 28px;
|
||
}
|
||
|
||
.capability-title-text {
|
||
font-size: @home-font-size-28;
|
||
}
|
||
|
||
.capability-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: @home-search-tag-gap;
|
||
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: @home-space-16;
|
||
}
|
||
|
||
.gxnl-qych-hydt-box>div {
|
||
height: auto;
|
||
min-height: @home-hero-fade-height;
|
||
background-size: cover !important;
|
||
}
|
||
|
||
.gxnl-qych-hydt-box>div:hover {
|
||
transform: none;
|
||
}
|
||
|
||
.gxnl-qych-hydt-box .name1 {
|
||
font-size: @home-font-size-22;
|
||
line-height: 40px;
|
||
}
|
||
|
||
.gxnl-qych-hydt-box .name2 {
|
||
margin-bottom: 16px;
|
||
font-size: @home-font-size-14;
|
||
line-height: @home-line-height-20;
|
||
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: @home-font-size-14;
|
||
}
|
||
|
||
.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: @home-font-size-14;
|
||
}
|
||
|
||
.hydt-box .item {
|
||
font-size: @home-font-size-12;
|
||
padding: 12px;
|
||
}
|
||
|
||
/* 底部 CTA：移动端内容居中 */
|
||
.bottom-box {
|
||
min-height: 300px;
|
||
height: auto;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.bottom-box-bg {
|
||
left: 0;
|
||
top: 0;
|
||
min-width: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
transform: none;
|
||
object-fit: cover;
|
||
object-position: center center;
|
||
}
|
||
|
||
.bottom-box-cta-hotspot {
|
||
left: 10%;
|
||
top: 62%;
|
||
width: 80%;
|
||
height: 12%;
|
||
}
|
||
|
||
.bottom-box-inner {
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 300px;
|
||
height: auto;
|
||
max-width: 100%;
|
||
padding: 40px var(--home-section-px, 16px) 48px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.bottom-box-copy {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
flex: none;
|
||
padding: 0 12px;
|
||
margin-left: 0;
|
||
gap: 20px;
|
||
align-items: center;
|
||
border-radius: 0;
|
||
background: transparent;
|
||
}
|
||
|
||
.bottom-box-head {
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.bottom-box-content-title {
|
||
width: 100%;
|
||
font-size: @home-font-size-24;
|
||
line-height: 1.4;
|
||
text-align: center;
|
||
white-space: normal;
|
||
}
|
||
|
||
.bottom-box-desc {
|
||
width: 100%;
|
||
font-size: @home-font-size-14;
|
||
line-height: 1.6;
|
||
text-align: center;
|
||
max-width: 320px;
|
||
}
|
||
|
||
.bottom-box-btn {
|
||
width: 100%;
|
||
max-width: 280px;
|
||
height: 48px;
|
||
font-size: @home-font-size-16;
|
||
line-height: 48px;
|
||
padding: 0 16px;
|
||
box-sizing: border-box;
|
||
|
||
&:hover {
|
||
transform: none;
|
||
}
|
||
}
|
||
|
||
/* 隐藏swiper导航在移动端 */
|
||
.top-box ::v-deep .t-swiper__navigation {
|
||
display: none;
|
||
}
|
||
|
||
/* Hero Cards 移动端适配 */
|
||
.hero-cards {
|
||
grid-template-columns: 1fr;
|
||
gap: @home-search-tag-gap;
|
||
margin-top: 24px;
|
||
margin-bottom: 12px;
|
||
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: @home-font-size-20;
|
||
}
|
||
|
||
.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: 0 0 var(--page-section-padding-y);
|
||
}
|
||
|
||
.overseas2-header {
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.overseas2-title-group {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: @home-search-tag-gap;
|
||
}
|
||
|
||
.overseas2-title-icon {
|
||
width: 28px;
|
||
height: 28px;
|
||
}
|
||
|
||
.overseas2-title-text {
|
||
font-size: @home-font-size-28;
|
||
}
|
||
|
||
.overseas2-desc {
|
||
font-size: @home-font-size-16;
|
||
line-height: 24px;
|
||
text-align: center;
|
||
}
|
||
|
||
.overseas2-grid {
|
||
width: 100%;
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
gap: @home-search-tag-gap;
|
||
}
|
||
|
||
.overseas2-card {
|
||
width: 100%;
|
||
height: auto;
|
||
min-height: 80px;
|
||
padding: 12px 16px;
|
||
flex-direction: row;
|
||
gap: @home-search-tag-gap;
|
||
}
|
||
|
||
.overseas2-card-content {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.overseas2-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.overseas2-text {
|
||
gap: @home-export-text-gap;
|
||
}
|
||
|
||
.overseas2-name {
|
||
font-size: @home-export-title-size;
|
||
}
|
||
|
||
.overseas2-item-desc {
|
||
font-size: @home-export-desc-size;
|
||
line-height: @home-export-desc-line-height;
|
||
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: @home-font-size-12;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 行业动态移动端适配 */
|
||
.news-section {
|
||
overflow: visible;
|
||
}
|
||
|
||
.portal-page .home-shelf--news {
|
||
min-height: auto;
|
||
padding: 40px 16px 48px;
|
||
}
|
||
|
||
.portal-page .news-section .news-header {
|
||
padding: 0;
|
||
}
|
||
|
||
.portal-page .home-shelf--news .news-grid {
|
||
padding: 0;
|
||
}
|
||
|
||
.news-title-group {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: @home-search-tag-gap;
|
||
}
|
||
|
||
.news-title-icon {
|
||
width: 28px;
|
||
height: 28px;
|
||
}
|
||
|
||
.news-title-text {
|
||
font-size: inherit;
|
||
}
|
||
|
||
.news-tabs-main {
|
||
gap: 8px;
|
||
width: 100%;
|
||
}
|
||
|
||
.news-tabs {
|
||
gap: @home-search-tag-gap;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-start;
|
||
margin: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
.news-tab {
|
||
padding: 6px 16px;
|
||
font-size: @home-font-size-14;
|
||
}
|
||
|
||
.news-more {
|
||
padding: 0;
|
||
margin-left: auto;
|
||
flex-shrink: 0;
|
||
line-height: 22px;
|
||
}
|
||
|
||
.portal-page .home-shelf--news .news-list .news-item,
|
||
.news-item {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
height: auto;
|
||
min-height: 0;
|
||
max-height: none;
|
||
padding: 14px;
|
||
gap: 12px;
|
||
overflow: visible;
|
||
}
|
||
|
||
.portal-page .home-shelf--news .news-list .news-pic,
|
||
.news-pic {
|
||
flex: none;
|
||
width: 100%;
|
||
height: 140px;
|
||
max-height: none;
|
||
align-self: stretch;
|
||
}
|
||
|
||
.portal-page .home-shelf--news .news-list .news-content,
|
||
.news-content {
|
||
justify-content: flex-start;
|
||
gap: 10px;
|
||
min-width: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
.news-item-title {
|
||
font-size: @home-font-size-16;
|
||
white-space: normal;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
|
||
.news-meta {
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 6px 10px;
|
||
min-height: 0;
|
||
overflow: visible;
|
||
width: 100%;
|
||
}
|
||
|
||
.news-date {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.news-remark {
|
||
flex: 1 1 100%;
|
||
white-space: normal;
|
||
word-break: break-word;
|
||
overflow: visible;
|
||
text-overflow: unset;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.news-summary {
|
||
font-size: 13px;
|
||
-webkit-line-clamp: 2;
|
||
}
|
||
|
||
.news-list {
|
||
height: auto;
|
||
max-height: none;
|
||
gap: @home-search-tag-gap;
|
||
padding: 0;
|
||
}
|
||
|
||
.news-list-footer {
|
||
justify-content: center;
|
||
margin-top: 16px;
|
||
}
|
||
|
||
/* 合作伙伴移动端隐藏（动画在移动端影响性能） */
|
||
.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, minmax(0, 240px));
|
||
justify-content: center;
|
||
}
|
||
|
||
.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: @home-font-size-20;
|
||
}
|
||
|
||
/* 企业出海平板适配 */
|
||
.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>
|