1409 lines
43 KiB
Vue
1409 lines
43 KiB
Vue
<template>
|
||
<div class="compliance-portal portal-page-shell portal-landing-figma-page">
|
||
<div class="portal-figma-scale-viewport">
|
||
<div class="portal-figma-scale-stage" ref="figmaStage">
|
||
<!-- 首屏：标题区 + 三大专题入口 -->
|
||
<div id="section-landing" class="qych-snap-section qych-landing">
|
||
<div class="banner-section">
|
||
<div class="banner-inner page-content-wrap">
|
||
<h1 class="banner-title">
|
||
<span class="banner-title-accent">企业</span>
|
||
<span class="banner-title-main">出海</span>
|
||
</h1>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="services-section qych-page-inner">
|
||
<div class="services-grid">
|
||
<div
|
||
v-for="item in navList"
|
||
:key="item.index"
|
||
:class="['service-card', { 'service-card--active': item.isActive }]"
|
||
@click="scrollToSection(item)"
|
||
>
|
||
<div class="service-card-inner">
|
||
<div class="service-card-header" :class="item.headerClass">
|
||
<h3 class="service-card-title">{{ item.cardTitle }}</h3>
|
||
</div>
|
||
<p class="service-card-desc">{{ item.cardDesc }}</p>
|
||
<div class="service-card-buttons">
|
||
<t-button theme="primary" @click.stop="handleCardBtnClick(item)">
|
||
{{ item.btnText }}
|
||
</t-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<main class="content">
|
||
<div id="anchor-container">
|
||
<!-- 电池法案 -->
|
||
<div class="banner banner1 qych-snap-section" id="section0">
|
||
<section class="module">
|
||
<div class="module-header">
|
||
<h2>电池法案</h2>
|
||
<p>欧盟电池法案管控电池全生命周期，涉及回收、碳足迹等要求</p>
|
||
</div>
|
||
<div class="">
|
||
<div class="content-wrapper2">
|
||
<div class="text-section">
|
||
<div class="text-section-head-row">
|
||
<div class="text-section-title">法案解读</div>
|
||
<div class="text-section-title-dcfa">申请服务</div>
|
||
</div>
|
||
<div class="text-section-content">
|
||
<div class="content-item1">
|
||
<ul class="info-list">
|
||
<div><span class="info-label">法案核心：</span>用碳足迹、电池护照、再生料、回收、供应链尽调设硬性准入门槛，强制绿色循环。</div>
|
||
<div><span class="info-label">时间表：</span>阶段性实施节点与过渡安排</div>
|
||
<li> 2024 年 2 月 18 日 法案核心条款正式实施，旧电池指令部分废止；有害物质基础限量、电池安全与耐久性基础要求生效。 </li>
|
||
<li> 2024 年 8 月 18 日 便携式电池铅含量强制限量生效；储能系统安全合规要求生效；电池性能与耐久性技术文件强制要求生效</li>
|
||
<li> 2025 年 2 月 18 日 EV 动力电池强制碳足迹声明要求生效 </li>
|
||
<div class="info-section-title">核心关键词解读</div>
|
||
<li>EU 2023/1542：欧盟新电池法的正式法规编号，是具备直接法律效力的欧盟条例，无需成员国转化为本国法律，全欧盟统一适用，违规处罚标准由各成员国同步制定。</li>
|
||
<li>全生命周期监管：法案核心监管逻辑，区别于旧指令仅聚焦末端回收和有害物质管控，新规覆盖电池从原材料开采、生产制造、运输销售、使用维护，到废弃回收、材料再生的全链条全环节。</li>
|
||
<li>PEF（产品环境足迹）：欧盟制定的产品全生命周期环境影响核算方法，是电池碳足迹核算的唯一合规标准，明确了核算边界、方法学、数据质量要求。</li>
|
||
</ul>
|
||
</div>
|
||
<div class="content-item2">
|
||
<div class="service-section-dcfa">
|
||
<div class="dcfa-cards-stack">
|
||
<div class="apply-service-card card1">
|
||
<div class="card-item1">
|
||
<div class="card-body">
|
||
<h4>电池碳足迹核算系统</h4>
|
||
<p>生成产品碳足迹报告</p>
|
||
</div>
|
||
<img
|
||
class="card-deco-icon card-deco-icon--sm"
|
||
:src="serviceCardIcon1"
|
||
alt=""
|
||
aria-hidden="true"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="apply-service-card card2">
|
||
<div class="card-item2">
|
||
<div class="card-body">
|
||
<h4>电池出口合规检测系统</h4>
|
||
<p>合规检测与留存</p>
|
||
</div>
|
||
<img
|
||
class="card-deco-icon card-deco-icon--sm card-deco-icon--flip card-deco-icon--soft"
|
||
:src="serviceCardIcon2"
|
||
alt=""
|
||
aria-hidden="true"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- CBAM模块 -->
|
||
<div class="banner banner2 qych-snap-section" id="section1">
|
||
<section class="module">
|
||
<div class="module-header">
|
||
<h2>CBAM（碳边境调节机制）</h2>
|
||
<p>欧盟对进口高碳产品按隐含排放征收碳关税，2026 年起正式实施</p>
|
||
</div>
|
||
|
||
<div class="content-wrapper2">
|
||
<div class="text-section qych-policy-frame">
|
||
<div class="text-section-head-row">
|
||
<div class="text-section-title">政策解读</div>
|
||
<div class="text-section-title-dcfa">CBAM试算</div>
|
||
</div>
|
||
<div class="text-section-content">
|
||
<div class="content-item1">
|
||
<div class="info-list info-list--stacked">
|
||
<p class="info-para">
|
||
<span class="info-label">CBAM核心：</span>通过对标本土碳市场定价，对进口高碳产品征收碳成本差额，拉平跨境碳成本，防范碳泄漏，推动全球产业链低碳转型。
|
||
</p>
|
||
<div class="info-block">
|
||
<p class="info-block-head">
|
||
<span class="info-label">时间表：</span>阶段性实施节点与过渡安排
|
||
</p>
|
||
<ul class="info-sublist">
|
||
<li><span class="info-list-text">2023年5月10日 | 正式立法 | 欧盟议会与理事会正式通过 Regulation (EU) 2023/956 号 CBAM 条例</span></li>
|
||
<li><span class="info-list-text">2026年1月1日起 | 正式实施期（确定制度阶段） | 全面进入 “申报 + 缴费” 双强制阶段，授权申报人制度落地，进口商需购买并清缴 CBAM 证书；</span></li>
|
||
<li><span class="info-list-text">2028年起 | 扩围实施期 | 计划纳入 180 余种钢铝密集型下游产品，管控范围向产业链下游延伸</span></li>
|
||
</ul>
|
||
</div>
|
||
<div class="info-block">
|
||
<p class="info-block-head info-section-title">核心关键词解读</p>
|
||
<ul class="info-sublist">
|
||
<li><span class="info-list-text">碳泄漏（Carbon Leakage）: CBAM 的核心立法动因，指欧盟企业为规避本土 ETS 高昂的碳成本，将高碳生产环节转移至碳排放管控宽松、碳价更低的国家 / 地区，导致欧盟减排成果被抵消、全球碳排放总量不降反升的现象。</span></li>
|
||
<li><span class="info-list-text">EU ETS（欧盟碳排放交易体系）: 欧盟境内核心碳定价机制，也是 CBAM 的定价基准。CBAM 证书价格完全对标 ETS 配额的拍卖价格，确保进口产品与欧盟本土产品承担完全同等的碳成本</span></li>
|
||
<li><span class="info-list-text">CBAM 证书（CBAM Certificate）: 欧盟成员国主管机构发行的电子凭证，是进口商清缴碳排放成本的唯一合法载体。进口商需按年度核算的碳排放量，购买对应数量的证书并完成清缴，未清缴部分将触发高额处罚</span></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content-item2">
|
||
<div class="service-section-dcfa">
|
||
<div class="dcfa-cards-stack">
|
||
<div class="apply-service-card card1">
|
||
<div class="card-item1 card-item--cbam-primary">
|
||
<div class="card-body">
|
||
<h4>CBAM 辅助核算系统</h4>
|
||
<p>助力企业快速填报碳排放数据</p>
|
||
</div>
|
||
<div class="open-page" @click="goPage('https://www.ouyeel.com/cbam/login')">
|
||
立即申请
|
||
</div>
|
||
<img
|
||
class="card-deco-icon card-deco-icon--md card-deco-icon--flip card-deco-icon--cbam-1"
|
||
:src="serviceCardIcon1"
|
||
alt=""
|
||
aria-hidden="true"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="apply-service-card card2">
|
||
<div class="card-item2">
|
||
<div class="card-body">
|
||
<h4>CBAM 碳成本测算系统</h4>
|
||
<p>测算进口碳成本</p>
|
||
</div>
|
||
<img
|
||
class="card-deco-icon card-deco-icon--md card-deco-icon--cbam-2"
|
||
:src="serviceCardIcon2"
|
||
alt=""
|
||
aria-hidden="true"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<!-- CBAM模块 -->
|
||
<div class="banner banner3 qych-snap-section" id="section2">
|
||
<section class="module">
|
||
<div class="module-header">
|
||
<h2>航运燃料</h2>
|
||
<p>从化石油基向 LNG、绿甲醇、绿氨等多元低碳方向加速转型</p>
|
||
</div>
|
||
|
||
<div class="content-wrapper2">
|
||
<div class="text-section">
|
||
<div class="text-section-head-row">
|
||
<div class="text-section-title">低碳政策</div>
|
||
<div class="text-section-title-dcfa">申请服务</div>
|
||
</div>
|
||
<div class="text-section-content">
|
||
<div class="content-item1">
|
||
<ul class="info-list">
|
||
<div class="info-intro">航运燃料低碳政策已形成全球统一规则、区域强监管、各国落地细则的三层治理体系，核心通过全生命周期碳排放管控与刚性约束，推动航运业低碳燃料替代与净零排放转型。</div>
|
||
<div><span class="info-label">时间表：</span>阶段性实施节点与过渡安排</div>
|
||
<li>2023年7月, IMO 发布修订版《船舶温室气体减排战略》, 确立全球航运 2050 年前后净零排放的顶层里程碑</li>
|
||
<li>2025年4月, 中国十部门发布《交通运输与能源融合发展指导意见》, 明确航运绿色燃料全链条发展支持政策</li>
|
||
<li>2026年, 欧盟 EU ETS 取消航运业全部免费碳配额, 航运企业碳排放成本完全自担，倒逼燃料低碳转型加速</li>
|
||
<div class="info-section-title">核心关键词解读</div>
|
||
<li>NZF / 净零框架：IMO《净零框架》，全球首个航运强制减排与碳定价结合的统一规则，核心管控船用燃料全生命周期碳排放</li>
|
||
<li>GFI / 燃料温室气体强度：IMO 净零框架核心考核指标，核算单位船用燃料全生命周期的温室气体排放量</li>
|
||
<li>全生命周期碳排放（LCA）：低碳燃料合规性认证的核心方法，用于杜绝燃料「漂绿」行为</li>
|
||
</ul>
|
||
</div>
|
||
<div class="content-item2">
|
||
<div class="service-section-dcfa">
|
||
<div class="dcfa-cards-stack">
|
||
<div class="apply-service-card card1">
|
||
<div class="card-item1 card-item--with-action">
|
||
<div class="card-body">
|
||
<h4>海事 “一网通办”</h4>
|
||
<p>上海港船舶低碳合规政务官方办理入口</p>
|
||
<div class="open-page" @click="goPage('https://zwfw.msa.gov.cn/')">
|
||
立即访问
|
||
</div>
|
||
</div>
|
||
<img
|
||
class="card-deco-icon card-deco-icon--lg"
|
||
:src="serviceCardIcon1"
|
||
alt=""
|
||
aria-hidden="true"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="apply-service-card card2">
|
||
<div class="card-item2 card-item--with-action">
|
||
<div class="card-body">
|
||
<h4>国际航运绿色能源认证平台</h4>
|
||
<p>航运绿色燃料全链条认证合规服务平台</p>
|
||
<div class="open-page" @click="goPage('https://www.lingang.gov.cn/')">
|
||
立即访问
|
||
</div>
|
||
</div>
|
||
<img
|
||
class="card-deco-icon card-deco-icon--lg"
|
||
:src="serviceCardIcon2"
|
||
alt=""
|
||
aria-hidden="true"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- <p class="coming-soon">敬请期待</p> -->
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import serviceCardIcon1 from '../../assets/qych/service-card-icon-1.png'
|
||
import serviceCardIcon2 from '../../assets/qych/service-card-icon-2.png'
|
||
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: 'CompliancePortal',
|
||
mixins: [portalFigmaScaleMixin, fullpageScrollMixin, comingSoonMixin],
|
||
components: {},
|
||
data() {
|
||
return {
|
||
serviceCardIcon1,
|
||
serviceCardIcon2,
|
||
sectionIds: ['section-landing', 'section0', 'section1', 'section2'],
|
||
navList: [
|
||
{
|
||
cardTitle: '欧盟电池法规',
|
||
cardDesc: '碳足迹、电池护照、再生料与回收等全链条合规服务入口。',
|
||
btnText: '进入专题',
|
||
headerClass: 'blue-header',
|
||
sectionId: 'section0',
|
||
index: 0,
|
||
isActive: true,
|
||
},
|
||
{
|
||
cardTitle: 'CBAM(碳边境调节机制)',
|
||
cardDesc: '进口高碳产品碳关税申报与成本测算，2026 年起正式实施。',
|
||
btnText: '进入专题',
|
||
headerClass: 'green-header',
|
||
sectionId: 'section1',
|
||
index: 1,
|
||
isActive: false,
|
||
externalLink: 'https://www.ouyeel.com/cbam/login',
|
||
},
|
||
{
|
||
cardTitle: '航运燃料',
|
||
cardDesc: 'LNG、绿甲醇、绿氨等多元低碳燃料转型政策与系统入口。',
|
||
btnText: '进入专题',
|
||
headerClass: 'purple-header',
|
||
sectionId: 'section2',
|
||
index: 2,
|
||
isActive: false,
|
||
},
|
||
],
|
||
};
|
||
},
|
||
mounted() {
|
||
this.$nextTick(() => {
|
||
this.scrollToSectionFromQuery();
|
||
});
|
||
},
|
||
watch: {
|
||
// 修复：组件已挂载时（如从首页企业出海多次点击跳到不同 section），
|
||
// query 变化不会触发 mounted，需要在这里显式处理滚动
|
||
'$route.query.section': {
|
||
handler() {
|
||
this.scrollToSectionFromQuery();
|
||
},
|
||
},
|
||
},
|
||
methods: {
|
||
goPage(url) {
|
||
if (url) {
|
||
window.open(url);
|
||
} else {
|
||
this.showComingSoon()
|
||
}
|
||
},
|
||
handleCardBtnClick(item) {
|
||
if (item.externalLink) {
|
||
window.open(item.externalLink, '_blank');
|
||
return;
|
||
}
|
||
this.scrollToSection(item);
|
||
},
|
||
/** 首页深链：/qych?section=section0|section1|section2 */
|
||
scrollToSectionFromQuery() {
|
||
const section = this.$route && this.$route.query && this.$route.query.section;
|
||
if (!section) return;
|
||
const sectionIndex = this.sectionIds.indexOf(section);
|
||
if (sectionIndex < 0) return;
|
||
window.setTimeout(() => {
|
||
this.scrollRootToSection(sectionIndex, false);
|
||
}, 120);
|
||
},
|
||
setNavActive(idx) {
|
||
this.navList = this.navList.map((item, index) => ({
|
||
...item,
|
||
isActive: index === idx,
|
||
}));
|
||
},
|
||
getScrollRoot() {
|
||
return this.scrollRoot || document.querySelector('.content-wrap');
|
||
},
|
||
/** 相对 .content-wrap 的区块顶部 scrollTop */
|
||
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) {
|
||
const scrollTop = scrollRoot.scrollTop;
|
||
const anchor = scrollTop + scrollRoot.clientHeight * 0.28;
|
||
let currentIndex = 0;
|
||
for (let i = 0; i < this.sectionIds.length; i++) {
|
||
const el = document.getElementById(this.sectionIds[i]);
|
||
if (!el) continue;
|
||
const top = this.getSectionScrollTop(el, scrollRoot);
|
||
if (anchor >= top - 4) {
|
||
currentIndex = i;
|
||
}
|
||
}
|
||
return currentIndex;
|
||
},
|
||
scrollRootToSection(sectionIndex, smooth = true) {
|
||
this.fullPageScrollTo(sectionIndex);
|
||
this.syncNavBySectionIndex(sectionIndex);
|
||
},
|
||
/** 导航点跳到指定 section：使用 fullpageScrollMixin 提供的 fullPageScrollTo */
|
||
scrollToSection(item) {
|
||
const sectionIndex = this.sectionIds.indexOf(item.sectionId);
|
||
if (sectionIndex < 0) return;
|
||
this.setNavActive(item.index);
|
||
this.fullPageScrollTo(sectionIndex);
|
||
},
|
||
syncNavBySectionIndex(sectionIndex) {
|
||
if (sectionIndex >= 1 && sectionIndex <= 3) {
|
||
this.setNavActive(sectionIndex - 1);
|
||
}
|
||
},
|
||
onFullPageSectionChange(newIndex /*, fromIndex, sectionEl */) {
|
||
this.syncNavBySectionIndex(newIndex);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
@import '../../styles/home-figma-variables.less';
|
||
@import '../../styles/portal-landing-cards.less';
|
||
|
||
/* 基础样式重置 */
|
||
* {
|
||
padding: 0;
|
||
margin: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||
color: #333;
|
||
background-color: #f5f7fa;
|
||
}
|
||
#anchor-container {
|
||
.banner {
|
||
scroll-margin-top: 0;
|
||
}
|
||
}
|
||
|
||
/* 全屏分页：高度对齐 main.vue 的 .content-wrap（非首页 = 100vh - 顶栏） */
|
||
@qych-viewport-h: var(--portal-scroll-height, calc(100vh - var(--page-offset-top, 64px)));
|
||
|
||
.qych-snap-section {
|
||
min-height: @qych-viewport-h;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 首屏布局见 page-layout.less（.qych-landing） */
|
||
|
||
/* Figma 1440 画布：内容区宽 1300，左右各 70px 居中 */
|
||
.qych-page-inner {
|
||
width: 100%;
|
||
max-width: @qych-landing-content-width;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 主容器 */
|
||
.compliance-portal {
|
||
background-color: #f6f7fa;
|
||
.portal-figma-scale-page();
|
||
}
|
||
|
||
/* 首屏 Banner：Figma 150581:2709 — 1440×350，背景图 1440×371 */
|
||
.qych-landing .banner-section {
|
||
position: relative;
|
||
z-index: 1;
|
||
height: @qych-landing-banner-height;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
background-color: #f6f7fa;
|
||
background-image: url(../../assets/qych/banner.png);
|
||
background-repeat: no-repeat;
|
||
background-position: center top;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
/* 与行业专题一致：page-content-wrap 对齐导航「可」；勿被本页 * { margin/padding:0 } 冲掉 */
|
||
.qych-landing .banner-inner.page-content-wrap {
|
||
position: relative;
|
||
z-index: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
max-width: var(--page-content-max-width);
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
padding-left: var(--page-gutter-x);
|
||
padding-right: var(--page-gutter-x);
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.qych-landing .banner-title {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: baseline;
|
||
margin: 0;
|
||
padding: @qych-landing-title-padding-y 0;
|
||
font-family: @home-font-family;
|
||
font-size: @qych-landing-title-size;
|
||
font-weight: @home-font-weight-semibold;
|
||
line-height: @qych-landing-title-line-height;
|
||
letter-spacing: @qych-landing-title-letter-spacing;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.qych-landing .banner-title-accent {
|
||
display: inline-block;
|
||
flex-shrink: 0;
|
||
padding-bottom: @qych-landing-title-underline-pb;
|
||
color: @qych-landing-title-accent;
|
||
border-bottom: @qych-landing-title-border;
|
||
vertical-align: baseline;
|
||
}
|
||
|
||
.qych-landing .banner-title-main {
|
||
display: inline-block;
|
||
flex-shrink: 0;
|
||
color: @qych-landing-title-sub;
|
||
vertical-align: baseline;
|
||
}
|
||
|
||
/* 导航标签优化 */
|
||
.nav-tabs {
|
||
display: flex;
|
||
gap: 15px; /* 标签间距 */
|
||
flex-wrap: wrap; /* 自适应换行 */
|
||
}
|
||
|
||
.tab {
|
||
padding: 8px 20px;
|
||
font-size: 14px;
|
||
color: #2e7d32;
|
||
cursor: pointer;
|
||
background: #def3df;
|
||
border-radius: 2px;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
/* 主体内容区（保持原有逻辑） */
|
||
.content {
|
||
}
|
||
|
||
/* 专题入口：卡片区样式；首屏布局与 padding 见 page-layout.less */
|
||
.qych-landing .services-section {
|
||
box-sizing: border-box;
|
||
|
||
.services-grid {
|
||
display: grid;
|
||
width: 100%;
|
||
gap: @qych-landing-cards-gap;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
align-items: stretch;
|
||
}
|
||
|
||
.portal-landing-card-shell();
|
||
|
||
.service-card {
|
||
width: 100%;
|
||
cursor: pointer;
|
||
border-radius: @qych-landing-card-radius;
|
||
overflow: hidden;
|
||
background: @home-color-white;
|
||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
box-sizing: border-box;
|
||
|
||
&:hover {
|
||
transform: translateY(-8px);
|
||
box-shadow: 0 12px 32px rgba(0, 154, 41, 0.15);
|
||
}
|
||
}
|
||
|
||
.service-card--active {
|
||
box-shadow: 0 12px 32px rgba(0, 154, 41, 0.15);
|
||
}
|
||
|
||
.service-card-header {
|
||
border-bottom-width: 1px;
|
||
border-bottom-style: solid;
|
||
text-align: center;
|
||
}
|
||
|
||
.service-card-title {
|
||
margin: 0;
|
||
font-size: @qych-landing-card-title-size;
|
||
font-weight: @home-font-weight-semibold;
|
||
line-height: 1.35;
|
||
color: @home-color-black;
|
||
text-align: center;
|
||
word-break: keep-all;
|
||
}
|
||
|
||
.service-card-desc {
|
||
font-size: @qych-landing-card-desc-size;
|
||
font-weight: @home-font-weight-regular;
|
||
line-height: 1.8;
|
||
color: @qych-landing-card-desc-color;
|
||
text-align: center;
|
||
}
|
||
|
||
.service-card-buttons {
|
||
/deep/ .t-button {
|
||
width: 100%;
|
||
height: @qych-landing-card-btn-h;
|
||
padding: @qych-landing-card-btn-py @qych-landing-card-btn-px;
|
||
font-size: @qych-landing-card-btn-font;
|
||
border-radius: @qych-landing-card-btn-radius;
|
||
}
|
||
|
||
/deep/ .t-button--theme-primary {
|
||
background: @qych-landing-card-btn-bg-default;
|
||
border-color: @qych-landing-card-btn-bg-default;
|
||
}
|
||
}
|
||
|
||
.service-card-inner:has(.blue-header) /deep/ .t-button--theme-primary {
|
||
background: @qych-landing-card-btn-bg-steel;
|
||
border-color: @qych-landing-card-btn-bg-steel;
|
||
}
|
||
|
||
.blue-header {
|
||
border-bottom-color: @qych-landing-card-border-blue;
|
||
}
|
||
|
||
.green-header {
|
||
border-bottom-color: @qych-landing-card-border-green;
|
||
}
|
||
|
||
.purple-header {
|
||
border-bottom-color: @qych-landing-card-border-purple;
|
||
}
|
||
}
|
||
#anchor-container .banner.qych-snap-section {
|
||
--qych-topic-py: @qych-policy-module-py;
|
||
--qych-section-bg: #f5f5f5;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: @qych-viewport-h;
|
||
height: auto;
|
||
box-sizing: border-box;
|
||
padding-top: var(--qych-topic-py);
|
||
padding-bottom: var(--qych-topic-py);
|
||
|
||
.module {
|
||
width: 100%;
|
||
max-width: @qych-policy-content-width;
|
||
margin: auto;
|
||
padding: 0 var(--page-gutter-x, 25px);
|
||
overflow: visible;
|
||
box-sizing: border-box;
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.content-wrapper2 {
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.text-section {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
gap: @qych-policy-card-inner-gap;
|
||
box-sizing: border-box;
|
||
padding-bottom: 24px;
|
||
overflow: hidden;
|
||
background: @home-color-white;
|
||
border: none;
|
||
border-radius: @qych-policy-card-radius;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.text-section-head-row {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) @qych-policy-sidebar-width;
|
||
column-gap: @qych-policy-content-gap;
|
||
align-items: start;
|
||
padding: 0 @qych-policy-content-px;
|
||
box-sizing: border-box;
|
||
border-top-left-radius: @qych-policy-card-radius;
|
||
border-top-right-radius: @qych-policy-card-radius;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.text-section-title {
|
||
height: auto;
|
||
padding: @qych-policy-section-title-py @qych-policy-section-title-px @qych-policy-section-title-pb;
|
||
font-family: @home-font-family;
|
||
font-size: @qych-policy-section-title-size;
|
||
font-weight: @qych-policy-section-title-weight;
|
||
line-height: normal;
|
||
letter-spacing: 0;
|
||
color: @qych-policy-label-color;
|
||
background: transparent;
|
||
}
|
||
|
||
.text-section-head-row .text-section-title-dcfa {
|
||
align-self: start;
|
||
padding: @qych-policy-section-title-py 0 @qych-policy-section-title-pb;
|
||
margin: 0;
|
||
line-height: normal;
|
||
background: transparent;
|
||
}
|
||
|
||
.text-section-content {
|
||
display: flex;
|
||
flex: 1 1 auto;
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
gap: @qych-policy-content-gap;
|
||
padding: 0 @qych-policy-content-px;
|
||
min-height: 0;
|
||
background: transparent;
|
||
}
|
||
|
||
.content-item1,
|
||
.content-item2 {
|
||
overflow: hidden;
|
||
min-height: 0;
|
||
}
|
||
|
||
.content-item1 {
|
||
display: flex;
|
||
flex: 1 1 auto;
|
||
flex-direction: column;
|
||
min-width: 0;
|
||
max-height: 328px;
|
||
padding: @qych-policy-panel-padding;
|
||
overflow-x: hidden;
|
||
overflow-y: auto;
|
||
background: @qych-policy-panel-bg;
|
||
border-radius: @qych-policy-card-radius;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.content-item2 {
|
||
display: flex;
|
||
flex: 0 0 @qych-policy-sidebar-width;
|
||
flex-direction: column;
|
||
align-self: flex-start;
|
||
width: @qych-policy-sidebar-width;
|
||
min-width: @qych-policy-sidebar-width;
|
||
height: auto;
|
||
}
|
||
|
||
.service-section-dcfa {
|
||
display: flex;
|
||
flex: 0 0 auto;
|
||
flex-direction: column;
|
||
gap: 0;
|
||
min-height: 0;
|
||
height: auto;
|
||
align-self: flex-start;
|
||
width: 100%;
|
||
padding-left: @qych-policy-panel-padding;
|
||
background: @home-color-white;
|
||
border-left: 1px solid @qych-policy-panel-bg;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.text-section-title-dcfa {
|
||
height: auto;
|
||
padding: 0;
|
||
font-family: @home-font-family;
|
||
font-size: @qych-policy-sidebar-title-size;
|
||
font-weight: @qych-policy-section-title-weight;
|
||
line-height: normal;
|
||
letter-spacing: 0;
|
||
color: @qych-policy-label-color;
|
||
}
|
||
|
||
.dcfa-cards-stack {
|
||
display: flex;
|
||
flex: 0 0 auto;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
min-height: 0;
|
||
width: 100%;
|
||
padding-left: 0;
|
||
}
|
||
|
||
.card1,
|
||
.card2 {
|
||
padding: 0;
|
||
}
|
||
|
||
.apply-service-card {
|
||
display: flex;
|
||
flex: 0 0 auto;
|
||
flex-direction: column;
|
||
height: auto;
|
||
min-height: 0;
|
||
|
||
h4 {
|
||
margin: 0 0 6px;
|
||
font-family: @home-font-family;
|
||
font-size: @qych-policy-card-title-size;
|
||
font-weight: @qych-policy-label-weight;
|
||
line-height: normal;
|
||
color: @qych-policy-card-title-color;
|
||
}
|
||
|
||
p {
|
||
margin: 0;
|
||
font-family: @home-font-family;
|
||
font-size: @qych-policy-card-desc-size;
|
||
font-weight: @qych-policy-subtitle-weight;
|
||
line-height: normal;
|
||
color: @qych-policy-card-desc-color;
|
||
}
|
||
}
|
||
|
||
.card-item1,
|
||
.card-item2 {
|
||
position: relative;
|
||
display: flex;
|
||
flex: 0 0 auto;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
justify-content: flex-start;
|
||
gap: 6px;
|
||
min-height: 160px;
|
||
height: auto;
|
||
padding: 20px @qych-policy-card-padding-x 16px;
|
||
border-radius: @qych-policy-card-radius-inner;
|
||
overflow: hidden;
|
||
cursor: default;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.card-item--with-action {
|
||
padding-top: 20px;
|
||
}
|
||
|
||
.card-body {
|
||
position: relative;
|
||
z-index: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 6px;
|
||
width: 100%;
|
||
max-width: calc(100% - 56px);
|
||
}
|
||
|
||
.card-deco-icon {
|
||
position: absolute;
|
||
right: @qych-policy-card-icon-right;
|
||
bottom: 20px;
|
||
width: @qych-policy-card-icon-sm;
|
||
max-height: @qych-policy-card-icon-sm-max-h;
|
||
height: auto;
|
||
object-fit: contain;
|
||
opacity: @qych-policy-card-icon-opacity;
|
||
pointer-events: none;
|
||
user-select: none;
|
||
}
|
||
|
||
.card-deco-icon--md {
|
||
width: @qych-policy-card-icon-md;
|
||
max-height: @qych-policy-card-icon-md-max-h;
|
||
bottom: 18px;
|
||
}
|
||
|
||
.card-deco-icon--lg {
|
||
width: @qych-policy-card-icon-lg;
|
||
max-height: @qych-policy-card-icon-lg-max-h;
|
||
bottom: 16px;
|
||
}
|
||
|
||
.card-deco-icon--flip {
|
||
transform: scaleY(-1) rotate(180deg);
|
||
}
|
||
|
||
.card-deco-icon--soft {
|
||
opacity: @qych-policy-card-icon-opacity-soft;
|
||
}
|
||
|
||
.module-header {
|
||
gap: @qych-policy-header-gap;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.module-header h2 {
|
||
margin-bottom: 0;
|
||
font-family: @home-font-family;
|
||
font-size: @qych-policy-title-size;
|
||
font-weight: @qych-policy-title-weight;
|
||
line-height: normal;
|
||
color: @qych-policy-title-color;
|
||
}
|
||
|
||
.module-header p {
|
||
width: 100%;
|
||
font-family: @home-font-family;
|
||
font-size: @qych-policy-subtitle-size;
|
||
font-weight: @qych-policy-subtitle-weight;
|
||
line-height: normal;
|
||
letter-spacing: 0;
|
||
color: @qych-policy-subtitle-color;
|
||
text-align: center;
|
||
}
|
||
|
||
.module {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: @qych-policy-block-gap;
|
||
}
|
||
}
|
||
|
||
#section0 .text-section,
|
||
#section2 .text-section {
|
||
min-height: @qych-policy-card-height;
|
||
height: @qych-policy-card-height;
|
||
}
|
||
|
||
#section0 .text-section-content,
|
||
#section2 .text-section-content {
|
||
flex: 1 1 auto;
|
||
min-height: 0;
|
||
}
|
||
|
||
#section0 .text-section,
|
||
#section1 .text-section.qych-policy-frame,
|
||
#section2 .text-section {
|
||
gap: @qych-policy-card-inner-gap;
|
||
}
|
||
|
||
#section0 .text-section-head-row .text-section-title,
|
||
#section1 .text-section-head-row .text-section-title,
|
||
#section2 .text-section-head-row .text-section-title {
|
||
padding-top: 16px;
|
||
padding-bottom: 16px;
|
||
}
|
||
|
||
#section0 .text-section-head-row {
|
||
background: @qych-policy-header-gradient-battery;
|
||
}
|
||
|
||
#section0 .text-section-head-row .text-section-title-dcfa {
|
||
padding-top: 16px;
|
||
padding-bottom: 16px;
|
||
}
|
||
|
||
#section0 .apply-service-card .card-item1 {
|
||
background-image: @qych-policy-card-gradient-battery-1;
|
||
}
|
||
|
||
#section0 .apply-service-card .card-item2 {
|
||
background-image: @qych-policy-card-gradient-battery-2;
|
||
}
|
||
|
||
// CBAM 套用电池法案版式框尺寸（490px + 24px + 标题 16px，不修改电池法案 DOM）
|
||
#section1 .text-section.qych-policy-frame,
|
||
.banner2 .text-section.qych-policy-frame {
|
||
min-height: @qych-policy-card-height;
|
||
height: @qych-policy-card-height;
|
||
gap: @qych-policy-card-inner-gap;
|
||
}
|
||
|
||
#section1 .text-section.qych-policy-frame .text-section-content,
|
||
.banner2 .text-section.qych-policy-frame .text-section-content {
|
||
flex: 1 1 auto;
|
||
align-items: flex-start;
|
||
min-height: 0;
|
||
}
|
||
|
||
#section1 .text-section.qych-policy-frame .apply-service-card h4 {
|
||
margin: 0;
|
||
}
|
||
|
||
#section1 .text-section-head-row,
|
||
.banner2 .text-section-head-row {
|
||
background: @qych-policy-header-gradient-cbam;
|
||
}
|
||
|
||
#section1 .text-section-head-row .text-section-title-dcfa,
|
||
.banner2 .text-section-head-row .text-section-title-dcfa {
|
||
padding-top: @qych-policy-section-title-py;
|
||
padding-bottom: @qych-policy-section-title-py;
|
||
}
|
||
|
||
#section1 .apply-service-card .card-item1,
|
||
.banner2 .apply-service-card .card-item1 {
|
||
background-image: @qych-policy-card-gradient-cbam-1;
|
||
}
|
||
|
||
#section1 .apply-service-card .card-item2,
|
||
.banner2 .apply-service-card .card-item2 {
|
||
background-image: @qych-policy-card-gradient-cbam-2;
|
||
}
|
||
|
||
#section2 .text-section {
|
||
min-height: @qych-policy-card-height;
|
||
height: @qych-policy-card-height;
|
||
}
|
||
|
||
#section2 .text-section-content {
|
||
flex: 1 1 auto;
|
||
min-height: 0;
|
||
}
|
||
|
||
#section2 .text-section-content {
|
||
align-items: flex-start;
|
||
}
|
||
|
||
#section2 .text-section-head-row,
|
||
.banner3 .text-section-head-row {
|
||
background: @qych-policy-header-gradient-shipping;
|
||
}
|
||
|
||
#section2 .text-section-head-row .text-section-title-dcfa,
|
||
.banner3 .text-section-head-row .text-section-title-dcfa {
|
||
padding-top: @qych-policy-section-title-py;
|
||
padding-bottom: @qych-policy-section-title-py;
|
||
}
|
||
|
||
#section2 .apply-service-card .card-item1,
|
||
.banner3 .apply-service-card .card-item1 {
|
||
background-image: @qych-policy-card-gradient-shipping-1;
|
||
}
|
||
|
||
#section2 .apply-service-card .card-item2,
|
||
.banner3 .apply-service-card .card-item2 {
|
||
background-image: @qych-policy-card-gradient-shipping-2;
|
||
}
|
||
|
||
#section2 .apply-service-card .card-item1,
|
||
#section2 .apply-service-card .card-item2 {
|
||
padding-top: 20px;
|
||
}
|
||
|
||
.banner1.qych-snap-section {
|
||
--qych-section-bg: #f7faf8;
|
||
}
|
||
|
||
.banner2.qych-snap-section {
|
||
--qych-section-bg: #f5f5f5;
|
||
}
|
||
|
||
.banner3.qych-snap-section {
|
||
--qych-section-bg: #f0faf2;
|
||
}
|
||
|
||
.banner1 {
|
||
--qych-section-bg: #f7faf8;
|
||
background: url(../../assets/qych/banner3.png);
|
||
background-size: cover;
|
||
background-position: center top;
|
||
}
|
||
.banner2 {
|
||
--qych-section-bg: #f5f5f5;
|
||
background: #f5f5f5;
|
||
}
|
||
.banner3 {
|
||
--qych-section-bg: #f0faf2;
|
||
background: url(../../assets/qych/banner1.png);
|
||
background-size: cover;
|
||
}
|
||
|
||
.open-page {
|
||
flex-shrink: 0;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-width: 100px;
|
||
height: @qych-policy-btn-height;
|
||
padding: 8px 15px;
|
||
margin: 10px 0 0;
|
||
font-family: @home-font-family;
|
||
font-size: @qych-policy-btn-size;
|
||
font-weight: @qych-policy-subtitle-weight;
|
||
line-height: normal;
|
||
color: @home-color-white;
|
||
white-space: nowrap;
|
||
background: @home-gradient-export-btn;
|
||
border-radius: @qych-policy-btn-radius;
|
||
cursor: pointer;
|
||
}
|
||
|
||
#anchor-container .banner.qych-snap-section .module-header {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 内容布局 */
|
||
.content-wrapper {
|
||
display: grid;
|
||
grid-template-columns: 2fr 1fr;
|
||
gap: 30px;
|
||
}
|
||
.content-wrapper-dtzc {
|
||
gap: 0;
|
||
}
|
||
#anchor-container .banner.qych-snap-section .info-list {
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
#anchor-container .banner.qych-snap-section .info-list > div {
|
||
margin: 0;
|
||
font-family: @home-font-family;
|
||
font-size: @qych-policy-body-size;
|
||
font-weight: @qych-policy-subtitle-weight;
|
||
line-height: @qych-policy-body-line;
|
||
color: @qych-policy-label-color;
|
||
}
|
||
|
||
#anchor-container .banner.qych-snap-section .info-list .info-label,
|
||
#anchor-container .banner.qych-snap-section .info-list .info-intro,
|
||
#anchor-container .banner.qych-snap-section .info-list .info-section-title {
|
||
font-weight: @qych-policy-label-weight;
|
||
}
|
||
|
||
#anchor-container .banner.qych-snap-section .info-list > div + div,
|
||
#anchor-container .banner.qych-snap-section .info-list > li + div {
|
||
margin-top: @qych-policy-panel-gap;
|
||
}
|
||
|
||
#anchor-container .banner.qych-snap-section .info-list > div + li {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
#anchor-container .banner.qych-snap-section .info-list li {
|
||
display: flex;
|
||
gap: 10px;
|
||
align-items: flex-start;
|
||
margin: 0;
|
||
padding: 0;
|
||
font-family: @home-font-family;
|
||
font-size: @qych-policy-body-size;
|
||
font-weight: @qych-policy-subtitle-weight;
|
||
line-height: @qych-policy-body-line;
|
||
color: @qych-policy-body-color;
|
||
text-align: left;
|
||
}
|
||
|
||
#anchor-container .banner.qych-snap-section .info-list li + li {
|
||
margin-top: 4px;
|
||
}
|
||
|
||
#anchor-container .banner.qych-snap-section .info-list li::before,
|
||
#anchor-container .banner.qych-snap-section .info-sublist li::before {
|
||
position: static;
|
||
flex-shrink: 0;
|
||
width: auto;
|
||
font-size: @qych-policy-body-size;
|
||
font-weight: @qych-policy-label-weight;
|
||
line-height: normal;
|
||
color: @qych-policy-bullet-color;
|
||
content: '·';
|
||
}
|
||
|
||
#anchor-container .banner.qych-snap-section .info-list--stacked {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: @qych-policy-panel-gap;
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
#anchor-container .banner.qych-snap-section .info-list--stacked .info-para,
|
||
#anchor-container .banner.qych-snap-section .info-list--stacked .info-block-head {
|
||
margin: 0;
|
||
font-family: @home-font-family;
|
||
font-size: @qych-policy-body-size;
|
||
font-weight: @qych-policy-subtitle-weight;
|
||
line-height: normal;
|
||
letter-spacing: 0;
|
||
color: @qych-policy-label-color;
|
||
}
|
||
|
||
#anchor-container .banner.qych-snap-section .info-list--stacked .info-block {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: @qych-policy-block-head-gap;
|
||
}
|
||
|
||
#anchor-container .banner.qych-snap-section .info-list--stacked .info-block-head.info-section-title {
|
||
font-weight: @qych-policy-label-weight;
|
||
}
|
||
|
||
#anchor-container .banner.qych-snap-section .info-sublist {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
}
|
||
|
||
#anchor-container .banner.qych-snap-section .info-sublist li {
|
||
display: flex;
|
||
gap: 10px;
|
||
align-items: flex-start;
|
||
margin: 0;
|
||
padding: 0;
|
||
font-family: @home-font-family;
|
||
font-size: @qych-policy-body-size;
|
||
font-weight: @qych-policy-subtitle-weight;
|
||
line-height: normal;
|
||
letter-spacing: 0;
|
||
color: @qych-policy-body-color;
|
||
}
|
||
|
||
#anchor-container .banner.qych-snap-section .info-list-text {
|
||
flex: 1 1 auto;
|
||
min-width: 0;
|
||
}
|
||
|
||
#section1 .card-item--cbam-primary,
|
||
.banner2 .card-item--cbam-primary {
|
||
gap: @qych-policy-card-gap;
|
||
}
|
||
|
||
#section1 .card-item--cbam-primary .card-body,
|
||
.banner2 .card-item--cbam-primary .card-body {
|
||
gap: 6px;
|
||
max-width: calc(100% - 72px);
|
||
}
|
||
|
||
#section1 .card-item--cbam-primary .open-page,
|
||
.banner2 .card-item--cbam-primary .open-page {
|
||
position: relative;
|
||
z-index: 1;
|
||
margin: 0;
|
||
}
|
||
|
||
#section1 .card-deco-icon--cbam-1,
|
||
.banner2 .card-deco-icon--cbam-1 {
|
||
top: @qych-policy-card-icon-top-cbam-1;
|
||
right: @qych-policy-card-icon-right;
|
||
bottom: auto;
|
||
}
|
||
|
||
#section1 .card-deco-icon--cbam-2,
|
||
.banner2 .card-deco-icon--cbam-2 {
|
||
top: @qych-policy-card-icon-top-cbam-2;
|
||
right: @qych-policy-card-icon-right;
|
||
bottom: auto;
|
||
}
|
||
|
||
#section2 .card-item1 .card-body,
|
||
#section2 .card-item2 .card-body,
|
||
.banner3 .card-item1 .card-body,
|
||
.banner3 .card-item2 .card-body {
|
||
gap: 16px;
|
||
max-width: calc(100% - 96px);
|
||
}
|
||
|
||
#section2 .card-item1 .open-page,
|
||
#section2 .card-item2 .open-page,
|
||
.banner3 .card-item1 .open-page,
|
||
.banner3 .card-item2 .open-page {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.card-icon {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 30px;
|
||
height: 30px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.card-icon svg {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
/* 底部区域 */
|
||
.footer {
|
||
padding: 40px 0 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.coming-soon {
|
||
font-size: 28px;
|
||
font-weight: 500;
|
||
line-height: 42px;
|
||
letter-spacing: 0;
|
||
color: #2e7d32;
|
||
text-align: center;
|
||
}
|
||
|
||
@media (max-width: 1200px) {
|
||
.qych-snap-section.qych-landing {
|
||
min-height: auto;
|
||
}
|
||
|
||
.qych-landing .services-section {
|
||
--portal-service-card-min-height: auto;
|
||
.portal-landing-card-shell-reset();
|
||
}
|
||
|
||
#anchor-container .banner.qych-snap-section .text-section-head-row {
|
||
grid-template-columns: minmax(0, 1fr) 260px;
|
||
}
|
||
|
||
#anchor-container .banner.qych-snap-section .content-item2 {
|
||
flex: 0 0 260px;
|
||
width: 260px;
|
||
min-width: 260px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 1024px) {
|
||
#section0 .text-section,
|
||
#section1 .text-section.qych-policy-frame,
|
||
#section2 .text-section {
|
||
height: auto;
|
||
min-height: 0;
|
||
overflow: visible;
|
||
}
|
||
|
||
#anchor-container .banner.qych-snap-section .text-section {
|
||
overflow: visible;
|
||
}
|
||
|
||
#anchor-container .banner.qych-snap-section .text-section-head-row {
|
||
grid-template-columns: 1fr;
|
||
row-gap: 4px;
|
||
}
|
||
|
||
#anchor-container .banner.qych-snap-section .text-section-content {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
flex: none;
|
||
min-height: 0;
|
||
}
|
||
|
||
#anchor-container .banner.qych-snap-section .content-item1 {
|
||
flex: none;
|
||
width: 100%;
|
||
height: auto;
|
||
min-height: 200px;
|
||
max-height: 360px;
|
||
}
|
||
|
||
#anchor-container .banner.qych-snap-section .content-item2 {
|
||
display: flex;
|
||
flex: none;
|
||
width: 100%;
|
||
min-width: 0;
|
||
}
|
||
|
||
#anchor-container .banner.qych-snap-section .service-section-dcfa {
|
||
width: 100%;
|
||
padding-left: 0;
|
||
border-left: none;
|
||
background: transparent;
|
||
}
|
||
|
||
#anchor-container .banner.qych-snap-section .card-item1,
|
||
#anchor-container .banner.qych-snap-section .card-item2 {
|
||
min-height: 120px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.qych-landing .banner-section {
|
||
height: 280px;
|
||
}
|
||
|
||
.qych-landing .banner-title {
|
||
font-size: 36px;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.qych-landing .banner-title-accent {
|
||
padding-bottom: 12px;
|
||
border-bottom-width: 3px;
|
||
}
|
||
|
||
.qych-landing .services-section {
|
||
.portal-landing-card-shell-reset();
|
||
}
|
||
|
||
.qych-landing .services-section .services-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: 16px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.qych-landing .banner-inner.page-content-wrap {
|
||
padding-top: 16px;
|
||
padding-bottom: 16px;
|
||
}
|
||
|
||
.qych-landing .services-section .service-card-inner {
|
||
padding: 20px;
|
||
}
|
||
|
||
.qych-landing .services-section .service-card-title {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.qych-landing .services-section .service-card-desc {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
</style>
|