1227 lines
44 KiB
Plaintext
1227 lines
44 KiB
Plaintext
// =============================================================================
|
||
// 首页 Figma 设计 Token（审核版本 · 首页1920/1440 · node 150645:1018）
|
||
// 用法：@import './home-figma-variables.less';
|
||
// =============================================================================
|
||
|
||
// -----------------------------------------------------------------------------
|
||
// 画布与版心
|
||
// -----------------------------------------------------------------------------
|
||
@home-design-width: 1440px;
|
||
@home-design-height: 5079px;
|
||
@home-content-width: 1200px;
|
||
@home-content-gutter: 120px; // (1440 - 1200) / 2
|
||
@home-nav-inner-width: 1300px;
|
||
@home-nav-gutter: 70px; // (1440 - 1300) / 2
|
||
|
||
// -----------------------------------------------------------------------------
|
||
// 色彩 · 品牌与文字
|
||
// -----------------------------------------------------------------------------
|
||
@home-color-primary-dark: #003b1a;
|
||
@home-color-primary-green: #00b96b;
|
||
@home-color-primary-green-dark: #00a25d;
|
||
@home-color-secondary-green: #2e7d32;
|
||
@home-color-tab-bg: #e6efe6;
|
||
@home-color-page-bg: #f5f7fa;
|
||
@home-color-white: #ffffff;
|
||
@home-color-black: #000000;
|
||
|
||
@home-color-text-title: #1a1a2e;
|
||
@home-color-text-body: #556659;
|
||
@home-color-text-muted: #999999;
|
||
@home-color-text-dark: #333333;
|
||
@home-color-text-secondary: #666666;
|
||
@home-color-text-partner: #222222;
|
||
|
||
@home-color-accent-blue: #008cff;
|
||
@home-color-accent-blue-light: #9dc0ff;
|
||
@home-color-btn-blue-from: #99d2fe;
|
||
@home-color-btn-blue-to: #2196f3;
|
||
|
||
@home-color-footer-bg: #f0f7f2;
|
||
@home-color-footer-bar-bg: #e2ede5;
|
||
|
||
// 半透明
|
||
@home-color-white-90: rgba(255, 255, 255, 0.9);
|
||
@home-color-white-70: rgba(255, 255, 255, 0.7);
|
||
@home-color-white-60: rgba(255, 255, 255, 0.6);
|
||
@home-color-white-40: rgba(255, 255, 255, 0.4);
|
||
@home-color-white-30: rgba(255, 255, 255, 0.3);
|
||
@home-color-page-bg-transparent: rgba(245, 247, 250, 0);
|
||
|
||
// Hero 三卡 · 碳数字身份证（蓝）
|
||
@home-color-card-blue-from: rgba(127, 210, 255, 0.3);
|
||
@home-color-card-blue-to: rgba(232, 247, 255, 0.15);
|
||
@home-color-card-blue-header-from: rgba(232, 247, 255, 0.4);
|
||
@home-color-card-blue-header-to: rgba(232, 247, 255, 0.2);
|
||
@home-color-card-blue-btn-primary-bg: rgba(222, 243, 255, 0.7);
|
||
@home-color-card-blue-btn-primary-border: #008ed7;
|
||
@home-color-card-blue-btn-secondary-bg: rgba(222, 243, 255, 0.5);
|
||
@home-color-card-blue-btn-secondary-border: rgba(0, 141, 213, 0.4);
|
||
|
||
// Hero 三卡 · 国家可信碳链（白）
|
||
@home-color-card-chain-bg: rgba(255, 255, 255, 0.3);
|
||
@home-color-card-chain-header-from: rgba(255, 255, 255, 0.4);
|
||
@home-color-card-chain-header-to: rgba(255, 255, 255, 0.2);
|
||
@home-color-card-chain-btn-primary-bg: rgba(255, 255, 255, 0.6);
|
||
@home-color-card-chain-btn-primary-border: rgba(0, 0, 0, 0.4);
|
||
@home-color-card-chain-btn-secondary-bg: rgba(255, 255, 255, 0.4);
|
||
@home-color-card-chain-btn-secondary-border: rgba(0, 0, 0, 0.2);
|
||
|
||
// Hero 三卡 · 绿色服务
|
||
@home-color-card-green-from: rgba(156, 255, 221, 0.3);
|
||
@home-color-card-green-to: rgba(156, 255, 221, 0.15);
|
||
@home-color-card-green-header-from: rgba(107, 255, 204, 0.4);
|
||
@home-color-card-green-header-to: rgba(107, 255, 204, 0.2);
|
||
@home-color-card-green-btn-primary-bg: rgba(232, 255, 234, 0.7);
|
||
@home-color-card-green-btn-primary-border: rgba(0, 180, 42, 0.8);
|
||
@home-color-card-green-btn-secondary-bg: rgba(232, 255, 234, 0.5);
|
||
@home-color-card-green-btn-secondary-border: rgba(0, 180, 42, 0.4);
|
||
|
||
// CTA 按钮
|
||
@home-color-cta-btn-from: #007242;
|
||
@home-color-cta-btn-to: #00d87d;
|
||
|
||
// 遗留 / 辅助色
|
||
@home-color-nav-legacy-bg: #009a29;
|
||
@home-color-banner-placeholder: #e8eef0;
|
||
@home-color-core-hover-bg: #f8fff8;
|
||
@home-color-tab-hover: #d8e8d8;
|
||
@home-color-news-more-hover: #1b6d24;
|
||
@home-color-cta-section-bg: #c8e8d4;
|
||
@home-color-overseas-overlay: rgba(0, 30, 60, 0.85);
|
||
@home-color-overseas-desc: rgba(255, 255, 255, 0.8);
|
||
@home-color-overseas-card-bg: rgba(255, 255, 255, 0.95);
|
||
@home-color-overseas-btn-hover: #1976d2;
|
||
|
||
// -----------------------------------------------------------------------------
|
||
// 渐变（字符串，直接用于 background / background-image）
|
||
// -----------------------------------------------------------------------------
|
||
@home-gradient-title: linear-gradient(90deg, #008dff 0%, #00e0d3 50.48%, #00c858 100%);
|
||
@home-gradient-search-btn: linear-gradient(180deg, @home-color-primary-green 0%, @home-color-primary-green-dark 100%);
|
||
@home-gradient-hero-fade: linear-gradient(180deg, @home-color-page-bg-transparent 0%, @home-color-page-bg 100%);
|
||
@home-gradient-core-tag: linear-gradient(90deg, #ffffff 0%, #e6efff 36.06%, #e6efff 62.5%, #ffffff 100%);
|
||
@home-gradient-ability-card: linear-gradient(0deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.9) 100%);
|
||
@home-gradient-export-btn: linear-gradient(180deg, @home-color-btn-blue-from 0%, @home-color-btn-blue-to 100%);
|
||
@home-gradient-card-blue: linear-gradient(180deg, rgba(127, 210, 255, 0.35) 0%, rgba(232, 247, 255, 0.15) 100%);
|
||
@home-gradient-card-blue-header: linear-gradient(180deg, rgba(127, 210, 255, 0.55) 0%, rgba(232, 247, 255, 0.35) 100%);
|
||
@home-gradient-card-chain-header: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.25) 100%);
|
||
@home-gradient-card-green: linear-gradient(180deg, rgba(156, 255, 221, 0.45) 0%, rgba(156, 255, 221, 0.2) 100%);
|
||
@home-gradient-card-green-header: linear-gradient(180deg, rgba(107, 255, 204, 0.55) 0%, rgba(107, 255, 204, 0.25) 100%);
|
||
@home-gradient-cta-btn: linear-gradient(90deg, @home-color-cta-btn-from 0%, @home-color-cta-btn-to 100%);
|
||
@home-gradient-section-title-bar: linear-gradient(180deg, #00b42a, #00d468);
|
||
@home-gradient-nav-active: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 100%);
|
||
@home-gradient-skeleton: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||
@home-gradient-ability-section-bg: linear-gradient(
|
||
180deg,
|
||
@home-color-page-bg 0%,
|
||
rgba(255, 255, 255, 0.8) 50%,
|
||
@home-color-page-bg 100%
|
||
);
|
||
@home-gradient-export-overlay: linear-gradient(
|
||
180deg,
|
||
rgba(255, 255, 255, 0.85) 0%,
|
||
rgba(255, 255, 255, 0.4) 77.4%,
|
||
rgba(255, 255, 255, 0) 100%
|
||
);
|
||
|
||
// -----------------------------------------------------------------------------
|
||
// 字体
|
||
// -----------------------------------------------------------------------------
|
||
@home-font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||
|
||
@home-font-weight-regular: 400;
|
||
@home-font-weight-medium: 500;
|
||
@home-font-weight-semibold: 600;
|
||
|
||
@home-font-size-12: 12px;
|
||
@home-font-size-14: 14px;
|
||
@home-font-size-16: 16px;
|
||
@home-font-size-20: 20px;
|
||
@home-font-size-22: 22px;
|
||
@home-font-size-24: 24px;
|
||
@home-font-size-28: 28px;
|
||
@home-font-size-32: 32px;
|
||
@home-font-size-40: 40px;
|
||
@home-font-size-56: 56px;
|
||
|
||
@home-line-height-18: 18px;
|
||
@home-line-height-20: 20px;
|
||
@home-line-height-22: 22px;
|
||
@home-line-height-26: 26px;
|
||
@home-line-height-28: 28px;
|
||
@home-line-height-38: 38px;
|
||
|
||
@home-letter-spacing: 0;
|
||
|
||
// -----------------------------------------------------------------------------
|
||
// 间距
|
||
// -----------------------------------------------------------------------------
|
||
@home-space-2: 2px;
|
||
@home-space-4: 4px;
|
||
@home-space-8: 8px;
|
||
@home-space-10: 10px;
|
||
@home-space-12: 12px;
|
||
@home-space-14: 14px;
|
||
@home-space-16: 16px;
|
||
@home-space-20: 20px;
|
||
@home-space-24: 24px;
|
||
@home-space-28: 28px;
|
||
@home-space-30: 30px;
|
||
@home-space-32: 32px;
|
||
@home-space-34: 34px;
|
||
@home-space-36: 36px;
|
||
@home-space-42: 42px;
|
||
@home-space-45: 45px;
|
||
@home-space-52: 52px;
|
||
@home-space-56: 56px;
|
||
@home-space-62: 62px;
|
||
@home-space-64: 64px;
|
||
@home-space-72: 72px;
|
||
@home-space-100: 100px;
|
||
|
||
@home-section-padding-top: 52px;
|
||
@home-section-padding-bottom: 72px;
|
||
@home-section-gap: 42px;
|
||
@home-section-title-to-content: 52px;
|
||
|
||
// -----------------------------------------------------------------------------
|
||
// 圆角
|
||
// -----------------------------------------------------------------------------
|
||
@home-radius-xs: 4px;
|
||
@home-radius-sm: 8px;
|
||
@home-radius-md: 10px;
|
||
@home-radius-lg: 12px;
|
||
@home-radius-xl: 16px;
|
||
@home-radius-pill: 24px;
|
||
@home-radius-full: 100px;
|
||
|
||
// -----------------------------------------------------------------------------
|
||
// 阴影
|
||
// -----------------------------------------------------------------------------
|
||
@home-shadow-nav: 0 2px 2px rgba(0, 0, 0, 0.05);
|
||
@home-shadow-search: 0 8px 12px rgba(0, 0, 0, 0.08);
|
||
@home-shadow-card-blue: 0 8px 12px rgba(127, 179, 213, 0.2);
|
||
@home-shadow-card-blue-hover: 0 16px 24px rgba(127, 179, 213, 0.3);
|
||
@home-shadow-card-btn-blue: 0 4px 12px rgba(127, 210, 255, 0.5);
|
||
@home-shadow-card-btn-blue-strong: 0 4px 16px rgba(127, 210, 255, 0.6);
|
||
@home-shadow-card-btn-chain: 0 4px 16px rgba(255, 255, 255, 0.5);
|
||
@home-shadow-card-btn-green: 0 4px 16px rgba(107, 255, 204, 0.6);
|
||
@home-shadow-card-green: 0 8px 12px rgba(0, 185, 107, 0.1);
|
||
@home-shadow-card-green-strong: 0 8px 20px rgba(0, 209, 121, 0.3);
|
||
@home-shadow-ability-hover: 0 12px 28px rgba(0, 209, 121, 0.4);
|
||
@home-shadow-core-selected: 0 4px 8px rgba(157, 192, 255, 0.35);
|
||
@home-shadow-export-card: 0 4px 8px rgba(70, 162, 214, 0.2);
|
||
@home-shadow-export-card-hover: 0 8px 16px rgba(70, 162, 214, 0.35);
|
||
@home-shadow-export-btn-hover: 0 4px 12px rgba(33, 150, 243, 0.4);
|
||
@home-shadow-export-icon: 0 4px 8px rgba(129, 185, 247, 0.6);
|
||
@home-shadow-news-item: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||
@home-shadow-news-item-hover: 0 4px 16px rgba(0, 0, 0, 0.14);
|
||
@home-shadow-overseas-card-hover: 0 12px 32px rgba(0, 0, 0, 0.2);
|
||
@home-shadow-partner-logo: 0 4px 4px rgba(0, 185, 107, 0.06);
|
||
@home-shadow-cta-bg: 0 8px 12px rgba(0, 185, 107, 0.2);
|
||
@home-shadow-cta-btn-hover: 0 8px 20px rgba(0, 114, 66, 0.28);
|
||
@home-shadow-cta-card-1: 0 4px 20px rgba(1, 134, 78, 0.8);
|
||
@home-shadow-cta-card-2: 0 8px 20px rgba(1, 134, 78, 0.7);
|
||
@home-shadow-title-sub: 0 4px 12px rgba(255, 255, 255, 1);
|
||
@home-shadow-card-title: 0 0 8px rgba(255, 255, 255, 1);
|
||
|
||
// -----------------------------------------------------------------------------
|
||
// 模糊
|
||
// -----------------------------------------------------------------------------
|
||
@home-blur-nav: 10px;
|
||
@home-blur-sm: 4px;
|
||
@home-blur-md: 5px;
|
||
@home-blur-tag: 10px;
|
||
@home-blur-ability: 2px;
|
||
|
||
// -----------------------------------------------------------------------------
|
||
// 区块尺寸（Figma 绝对 Y / height）
|
||
// -----------------------------------------------------------------------------
|
||
@home-nav-height: 64px;
|
||
|
||
@home-hero-top: 64px;
|
||
@home-hero-height: 686px;
|
||
|
||
@home-core-top: 750px;
|
||
@home-core-height: 686px;
|
||
|
||
@home-ability-top: 1436px;
|
||
@home-ability-height: 686px;
|
||
|
||
@home-export-top: 2122px;
|
||
@home-export-height: 686px;
|
||
|
||
@home-news-top: 2808px;
|
||
@home-news-height: 684px;
|
||
@home-news-content-bottom-gap: 72px; // Figma hydt_center 682 − Frame274 底 610
|
||
|
||
@home-partner-top: 3492px;
|
||
@home-partner-height: 689px;
|
||
|
||
@home-cta-top: 4181px;
|
||
/* 底部 CTA 单独占满一屏 */
|
||
@home-cta-height: 100vh;
|
||
@home-cta-content-offset-top: 0;
|
||
@home-cta-head-gap: 14px;
|
||
@home-cta-head-to-btn-gap: 47px;
|
||
|
||
@home-footer-top: 4867px;
|
||
@home-cta-design-height: (@home-footer-top - @home-cta-top);
|
||
@home-footer-height: 212px;
|
||
@home-footer-info-height: 148px;
|
||
@home-footer-bar-height: 64px;
|
||
|
||
// -----------------------------------------------------------------------------
|
||
// 导航栏 150645:1333
|
||
// -----------------------------------------------------------------------------
|
||
@home-nav-logo-size: 34px;
|
||
@home-nav-logo-icon-size: 32px;
|
||
@home-nav-logo-text-size: 28px;
|
||
@home-nav-logo-gap: 12px;
|
||
@home-nav-item-gap: 16px;
|
||
@home-nav-item-padding-x: 8px;
|
||
@home-nav-item-font-size: 16px;
|
||
@home-nav-active-width: 96px;
|
||
@home-nav-active-border-height: 3px;
|
||
|
||
// -----------------------------------------------------------------------------
|
||
// Hero Banner 150645:1073
|
||
// -----------------------------------------------------------------------------
|
||
@home-hero-banner-bg-width: 1548px;
|
||
@home-hero-banner-bg-height: 750px;
|
||
@home-hero-banner-bg-offset-x: -54px;
|
||
@home-hero-fade-height: 300px;
|
||
@home-hero-fade-top: 450px;
|
||
|
||
@home-hero-title-width: 867px;
|
||
@home-hero-head-gap: 16px;
|
||
@home-hero-content-gap: 56px;
|
||
@home-hero-content-padding-top: 64px;
|
||
|
||
@home-search-box-width: 600px;
|
||
@home-search-box-height: 56px;
|
||
@home-search-box-padding: 8px 8px 8px 16px;
|
||
@home-search-btn-width: 92px;
|
||
@home-search-btn-height: 40px;
|
||
@home-search-btn-padding: 15px 30px 14px;
|
||
@home-search-tag-gap: 12px;
|
||
@home-search-tag-padding: 2px 8px;
|
||
@home-search-tag-bg: rgba(255, 255, 255, 0.6);
|
||
@home-search-tag-bg-hover: rgba(255, 255, 255, 0.85);
|
||
@home-search-tag-line-height: 26px;
|
||
|
||
@home-feature-cards-gap: 36px;
|
||
@home-feature-card-width: 376px;
|
||
@home-feature-card-height: 219px;
|
||
@home-feature-card-header-height: 63px;
|
||
@home-feature-card-header-padding-y: 12px;
|
||
@home-feature-card-body-padding-x: 24px;
|
||
@home-feature-card-body-gap: 16px;
|
||
@home-feature-card-btn-height: 46px;
|
||
@home-feature-card-btn-padding: 10px;
|
||
@home-feature-card-title-size: 28px;
|
||
@home-feature-card-btn-font-size: 20px;
|
||
|
||
// -----------------------------------------------------------------------------
|
||
// 核心驱动 150645:1297
|
||
// -----------------------------------------------------------------------------
|
||
@home-core-grid-gap: 32px;
|
||
@home-core-grid-padding-x: 30px;
|
||
@home-core-col-width: 261px;
|
||
@home-core-col-padding-x: 24px;
|
||
@home-core-col-gap: 14px;
|
||
@home-core-content-width: 213px; // 261 - 24*2，Figma 描述/标题内容区宽
|
||
@home-core-visual-min-height: 219px; // 插图 183 + 标签条 36
|
||
@home-core-title-min-height: 31px; // Figma 22px Semibold 文本框高
|
||
@home-core-illustration-height: 183px;
|
||
@home-core-tag-height: 36px;
|
||
@home-core-tag-padding: 4px 8px;
|
||
@home-core-tag-font-size: 16px;
|
||
@home-core-tag-font-weight: @home-font-weight-medium;
|
||
@home-core-tag-line-height: normal;
|
||
@home-core-tag-color: #333333;
|
||
@home-core-title-size: 22px;
|
||
@home-core-title-line-height: normal;
|
||
@home-core-title-color: @home-color-text-title;
|
||
@home-core-title-color-selected: @home-color-accent-blue;
|
||
@home-core-desc-size: 16px;
|
||
@home-core-desc-line-height: 28px;
|
||
@home-core-desc-color: @home-color-text-body;
|
||
@home-core-selected-bg: @home-color-white;
|
||
@home-core-selected-border: 1px solid @home-color-accent-blue-light;
|
||
@home-core-selected-shadow: @home-shadow-core-selected;
|
||
@home-core-selected-radius: @home-radius-sm;
|
||
@home-core-selected-padding-bottom: 20px;
|
||
|
||
// -----------------------------------------------------------------------------
|
||
// 共性能力 150645:1230
|
||
// -----------------------------------------------------------------------------
|
||
@home-ability-grid-cols: 3;
|
||
@home-ability-grid-col-width: 377.33px;
|
||
@home-ability-grid-min-height: 330px;
|
||
@home-ability-grid-row-height: 144px;
|
||
@home-ability-grid-col-gap: 34px;
|
||
@home-ability-grid-row-gap: 42px;
|
||
@home-ability-card-padding: 16px 16px 16px 32px;
|
||
@home-ability-card-border-width: 2px;
|
||
@home-ability-icon-size: 56px;
|
||
@home-ability-title-size: 24px;
|
||
@home-ability-arrow-size: 24px;
|
||
@home-ability-title-to-grid-gap: 100px;
|
||
|
||
// -----------------------------------------------------------------------------
|
||
// 企业出海 150645:1501
|
||
// -----------------------------------------------------------------------------
|
||
@home-export-list-width: 628px;
|
||
@home-export-list-offset-x: 286px;
|
||
@home-export-title-to-list-gap: 42px;
|
||
@home-export-card-height: 119px;
|
||
@home-export-card-padding: 24px;
|
||
@home-export-card-gap: 28px;
|
||
@home-export-card-inner-gap: 37px;
|
||
@home-export-icon-width: 64px;
|
||
@home-export-icon-height: 68px;
|
||
@home-export-icon-text-gap: 17px;
|
||
@home-export-icon-text-gap-lg: 20px;
|
||
@home-export-text-gap: 6px;
|
||
@home-export-title-size: 22px;
|
||
@home-export-title-color: @home-color-primary-dark;
|
||
@home-export-desc-size: 14px;
|
||
@home-export-desc-line-height: 22px;
|
||
@home-export-desc-color: @home-color-text-dark;
|
||
@home-export-btn-size: 77px;
|
||
@home-export-btn-padding-x: 12px;
|
||
@home-export-btn-padding-y: 8px;
|
||
@home-export-btn-font-size: 14px;
|
||
@home-export-btn-line-height: 22px;
|
||
@home-export-btn-line-height-multiline: 18px;
|
||
|
||
// -----------------------------------------------------------------------------
|
||
// 行业动态 150645:1143
|
||
// -----------------------------------------------------------------------------
|
||
@home-news-tab-gap: 32px;
|
||
@home-news-tab-padding: 4px 16px;
|
||
@home-news-tab-radius: 24px;
|
||
@home-news-tab-font-size: 16px;
|
||
@home-news-list-gap: 16px;
|
||
@home-news-tabs-to-list-gap: 24px;
|
||
@home-news-title-block-height: 58px;
|
||
@home-news-panel-height: 458px; // Figma Frame 274：tab 30 + gap 24 + list 404
|
||
@home-news-item-height: 104px;
|
||
@home-news-item-padding: 12px 16px;
|
||
@home-news-item-gap: 24px;
|
||
@home-news-thumb-width: 120px;
|
||
@home-news-thumb-height: 68px;
|
||
@home-news-thumb-radius: 10px;
|
||
@home-news-title-size: 20px;
|
||
@home-news-title-line-height: 22px;
|
||
@home-news-meta-gap: 8px;
|
||
@home-news-meta-icon-size: 16px;
|
||
@home-news-meta-font-size: 12px;
|
||
@home-news-meta-line-height: 20px;
|
||
@home-news-summary-size: 14px;
|
||
@home-news-summary-line-height: 22px;
|
||
@home-news-content-gap: 6px;
|
||
|
||
// -----------------------------------------------------------------------------
|
||
// 行业动态列表页 150622:18863（首页_行业动态_查看更多）
|
||
// -----------------------------------------------------------------------------
|
||
@hydt-banner-height: 350px;
|
||
@hydt-banner-pad-top: 24px;
|
||
@hydt-banner-pad-bottom: 75px;
|
||
@hydt-banner-breadcrumb-title-gap: 66px;
|
||
@hydt-banner-breadcrumb-size: 13px;
|
||
@hydt-banner-title-size: 48px;
|
||
@hydt-banner-title-line-height: 68px;
|
||
@hydt-banner-title-accent: @home-color-secondary-green;
|
||
@hydt-banner-title-main: @home-color-primary-dark;
|
||
@hydt-banner-title-border: 4px solid @home-color-secondary-green;
|
||
@hydt-body-bg: @home-color-white;
|
||
@hydt-body-pad-top: 52px;
|
||
@hydt-body-pad-bottom: 42px;
|
||
@hydt-panel-width: 1100px;
|
||
@hydt-tabs-to-list-gap: 24px;
|
||
@hydt-list-gap: 16px;
|
||
@hydt-list-card-padding: 20px;
|
||
@hydt-list-card-gap: 32px;
|
||
@hydt-list-card-radius: 16px;
|
||
@hydt-list-thumb-width: 145px;
|
||
@hydt-list-thumb-height: 84px;
|
||
@hydt-list-thumb-radius: 10px;
|
||
@hydt-list-title-size: 20px;
|
||
@hydt-list-title-line-height: 22px;
|
||
@hydt-list-content-gap: 10px;
|
||
@hydt-pagination-active-bg: #e6f8f0;
|
||
|
||
// -----------------------------------------------------------------------------
|
||
// 合作伙伴 150645:1368
|
||
// -----------------------------------------------------------------------------
|
||
@home-partner-section-width: 1812px;
|
||
@home-partner-section-offset-x: -189px;
|
||
@home-partner-section-padding-y: 62px;
|
||
@home-partner-title-size: 32px;
|
||
@home-partner-subtitle-highlight-size: 24px;
|
||
@home-partner-logo-card-width: 282px;
|
||
@home-partner-logo-card-height: 89px;
|
||
@home-partner-logo-card-radius: 8px;
|
||
@home-partner-row-gap: 24px;
|
||
@home-partner-row-offset-x: 153px;
|
||
@home-partner-wreath-width: 99px;
|
||
@home-partner-wreath-height: 20px;
|
||
|
||
// -----------------------------------------------------------------------------
|
||
// CTA 碳身份证 150645:1019
|
||
// -----------------------------------------------------------------------------
|
||
@home-cta-copy-width: 484px;
|
||
@home-cta-copy-gap: 14px;
|
||
@home-cta-title-size: 40px;
|
||
@home-cta-title-line-height: 66px;
|
||
@home-cta-subtitle-size: 22px;
|
||
@home-cta-subtitle-line-height: 36px;
|
||
@home-cta-btn-width: 360px;
|
||
@home-cta-btn-height: 66px;
|
||
@home-cta-btn-padding: 8px 12px;
|
||
@home-cta-btn-font-size: 20px;
|
||
@home-cta-card-1-width: 369px;
|
||
@home-cta-card-1-height: 207px;
|
||
@home-cta-card-2-width: 354px;
|
||
@home-cta-card-2-height: 198px;
|
||
|
||
// -----------------------------------------------------------------------------
|
||
// 底部信息 150645:1426
|
||
// -----------------------------------------------------------------------------
|
||
@home-footer-padding-y: 40px;
|
||
@home-footer-padding-x: 20px;
|
||
@home-footer-padding-bottom: 20px;
|
||
@home-footer-column-gap: 12px;
|
||
@home-footer-title-size: 16px;
|
||
@home-footer-text-size: 14px;
|
||
@home-footer-link-gap: 10px;
|
||
@home-footer-bar-padding-y: 10px;
|
||
@home-footer-copyright-size: 12px;
|
||
@home-footer-copyright-line-height: 20px;
|
||
@home-footer-copyright-gap: 179px;
|
||
|
||
// -----------------------------------------------------------------------------
|
||
// 区块标题装饰（Group 46）
|
||
// -----------------------------------------------------------------------------
|
||
@home-section-title-size: 32px;
|
||
@home-section-title-deco-width: 158px;
|
||
@home-section-title-deco-height: 50px;
|
||
@home-section-title-deco-offset-x: 13px;
|
||
@home-section-title-deco-offset-y: 8px;
|
||
|
||
// -----------------------------------------------------------------------------
|
||
// 首页 portal-page 局部 CSS 变量（供 scoped 组件内 var() 引用）
|
||
// -----------------------------------------------------------------------------
|
||
.home-portal-page-vars() {
|
||
--home-content-max: @home-content-width;
|
||
--home-section-px: var(--page-content-align-x, 46px);
|
||
--home-section-pt: @home-section-padding-top;
|
||
--home-section-pb: @home-section-padding-bottom;
|
||
/*
|
||
* 首页滚动容器 .content-wrap 已是整屏高，导航 fixed 叠在上方；
|
||
* section 须等于滚动区高度，不能再减 nav，否则底部会固定露出一条空白。
|
||
* --portal-viewport-height 由 main.vue 注入，与 content-wrap.clientHeight 一致。
|
||
*/
|
||
--home-vh: 100vh;
|
||
--home-vh: 100dvh;
|
||
--home-news-section-pb: @home-news-content-bottom-gap;
|
||
--home-section-min-h: var(--portal-viewport-height, var(--home-vh));
|
||
--home-news-section-min-h: var(--home-section-min-h);
|
||
--home-cta-section-min-h: var(--home-section-min-h);
|
||
--home-section-pad-top: calc(var(--page-nav-height, @home-nav-height) + clamp(32px, 5vh, @home-section-padding-top));
|
||
--home-hero-pad-top: calc(var(--page-nav-height, @home-nav-height) + clamp(32px, 6vh, @home-hero-content-padding-top));
|
||
--home-hero-pad-bottom: @home-space-64;
|
||
--home-title-color: @home-color-primary-dark;
|
||
--home-body-color: @home-color-text-body;
|
||
--home-heading-color: @home-color-text-title;
|
||
--home-title-size: @home-section-title-size;
|
||
--home-title-weight: @home-font-weight-semibold;
|
||
--home-title-bar-top: @home-section-title-deco-offset-y;
|
||
--home-title-bar-left: @home-section-title-deco-offset-x;
|
||
--home-title-bar-width: @home-section-title-deco-width;
|
||
--home-title-bar-height: @home-section-title-deco-height;
|
||
}
|
||
|
||
// -----------------------------------------------------------------------------
|
||
// Figma 整页等比缩放（设计画布 1440 × 5079，随视口宽度 scale）
|
||
// -----------------------------------------------------------------------------
|
||
.home-figma-scale-page() {
|
||
.home-figma-scale-viewport {
|
||
width: 100%;
|
||
}
|
||
|
||
.home-figma-scale-stage {
|
||
width: 100%;
|
||
}
|
||
|
||
html.portal-figma-scale-active & {
|
||
.home-figma-scale-viewport {
|
||
width: 100%;
|
||
height: var(--home-figma-visual-height, auto);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.home-figma-scale-stage {
|
||
width: @home-design-width;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
transform: scale(var(--home-figma-scale, 1));
|
||
transform-origin: top center;
|
||
margin-bottom: var(--home-figma-stage-margin-bottom, 0);
|
||
}
|
||
|
||
.container {
|
||
width: @home-design-width;
|
||
max-width: none;
|
||
}
|
||
|
||
/* 各区块高度由 JS 注入 --home-figma-*-design-height，至少填满一屏 */
|
||
--home-section-min-h: var(--home-figma-section-design-height, @home-core-height);
|
||
--home-news-section-min-h: var(--home-figma-news-section-design-height, @home-news-height);
|
||
--home-cta-section-min-h: var(--home-figma-cta-design-height, @home-cta-design-height);
|
||
|
||
#section-hero.top-box {
|
||
min-height: var(--home-figma-hero-design-height, @home-hero-height);
|
||
height: var(--home-figma-hero-design-height, @home-hero-height);
|
||
}
|
||
|
||
.core-section {
|
||
min-height: var(--home-figma-section-design-height, @home-core-height);
|
||
}
|
||
|
||
.capability-section {
|
||
min-height: var(--home-figma-section-design-height, @home-ability-height);
|
||
}
|
||
|
||
.overseas2-section {
|
||
min-height: var(--home-figma-section-design-height, @home-export-height);
|
||
}
|
||
|
||
.news-section {
|
||
min-height: var(--home-figma-news-section-design-height, @home-news-height);
|
||
}
|
||
|
||
.partner-section {
|
||
min-height: var(--home-figma-partner-section-design-height, @home-partner-height);
|
||
}
|
||
|
||
.bottom-box {
|
||
height: var(--home-figma-cta-design-height, @home-cta-design-height);
|
||
min-height: var(--home-figma-cta-design-height, @home-cta-design-height);
|
||
}
|
||
|
||
.home-shelf--hero {
|
||
flex: 1;
|
||
min-height: var(--home-figma-hero-design-height, @home-hero-height);
|
||
height: 100%;
|
||
padding: @home-hero-content-padding-top 0 @home-space-64;
|
||
gap: 0;
|
||
}
|
||
|
||
.home-hero-content {
|
||
flex: 0 1 auto;
|
||
width: 100%;
|
||
max-width: @home-content-width;
|
||
margin-top: auto;
|
||
gap: @home-hero-content-gap;
|
||
}
|
||
|
||
.top-hero-actions {
|
||
gap: @home-space-32;
|
||
margin-top: 0;
|
||
}
|
||
|
||
.top-title-text {
|
||
font-size: @home-font-size-56;
|
||
}
|
||
|
||
.top-title-desc {
|
||
font-size: @home-font-size-28;
|
||
}
|
||
|
||
.hero-cards {
|
||
gap: @home-feature-cards-gap;
|
||
}
|
||
|
||
.home-shelf--core {
|
||
min-height: var(--home-figma-section-design-height, @home-core-height);
|
||
gap: @home-space-52;
|
||
}
|
||
|
||
.home-shelf--capability {
|
||
min-height: var(--home-figma-section-design-height, @home-ability-height);
|
||
gap: @home-ability-title-to-grid-gap;
|
||
}
|
||
|
||
.home-shelf--overseas {
|
||
min-height: var(--home-figma-section-design-height, @home-export-height);
|
||
gap: @home-export-title-to-list-gap;
|
||
}
|
||
|
||
.home-shelf--news {
|
||
min-height: var(--home-figma-news-section-design-height, @home-news-height);
|
||
}
|
||
|
||
.home-shelf--partner {
|
||
min-height: var(--home-figma-partner-section-design-height, @home-partner-height);
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 覆盖 home2 桌面端 media query 中的 fluid/clamp，避免破坏 Figma 等比缩放 */
|
||
html.portal-figma-scale-active {
|
||
.portal-page .home-shelf--hero {
|
||
justify-content: flex-start;
|
||
gap: 0;
|
||
}
|
||
|
||
.portal-page .home-hero-content {
|
||
margin-top: auto;
|
||
gap: @home-hero-content-gap;
|
||
}
|
||
|
||
.portal-page .top-hero-actions {
|
||
gap: @home-space-32;
|
||
}
|
||
|
||
.portal-page .top-title-text {
|
||
font-size: @home-font-size-56;
|
||
}
|
||
|
||
.portal-page .top-title-desc {
|
||
font-size: @home-font-size-28;
|
||
}
|
||
|
||
.portal-page .hero-cards {
|
||
gap: @home-feature-cards-gap;
|
||
}
|
||
|
||
.portal-page #section-hero.top-box {
|
||
min-height: var(--home-figma-hero-design-height, @home-hero-height) !important;
|
||
height: var(--home-figma-hero-design-height, @home-hero-height) !important;
|
||
}
|
||
|
||
.portal-page .home-shelf--hero {
|
||
min-height: var(--home-figma-hero-design-height, @home-hero-height) !important;
|
||
}
|
||
|
||
.portal-page .core-section,
|
||
.portal-page .capability-section,
|
||
.portal-page .overseas2-section {
|
||
min-height: var(--home-figma-section-design-height, @home-core-height) !important;
|
||
height: var(--home-figma-section-design-height, @home-core-height) !important;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.portal-page .news-section {
|
||
min-height: var(--home-figma-news-section-design-height, @home-news-height) !important;
|
||
height: var(--home-figma-news-section-design-height, @home-news-height) !important;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.portal-page .partner-section {
|
||
min-height: var(--home-figma-partner-section-design-height, @home-partner-height) !important;
|
||
height: var(--home-figma-partner-section-design-height, @home-partner-height) !important;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.portal-page .home-shelf--core,
|
||
.portal-page .home-shelf--capability,
|
||
.portal-page .home-shelf--overseas {
|
||
min-height: var(--home-figma-section-design-height, @home-core-height) !important;
|
||
}
|
||
|
||
.portal-page .home-shelf--news {
|
||
min-height: var(--home-figma-news-section-design-height, @home-news-height) !important;
|
||
}
|
||
|
||
.portal-page .home-shelf--partner {
|
||
min-height: var(--home-figma-partner-section-design-height, @home-partner-height) !important;
|
||
}
|
||
|
||
.portal-page .capability-section {
|
||
background-color: @home-color-page-bg;
|
||
background-size: 100% 100%;
|
||
background-position: center center;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.portal-page .overseas2-section {
|
||
background-size: 100% 100%;
|
||
background-position: center center;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.portal-page .home-shelf--capability,
|
||
.portal-page .home-shelf--overseas {
|
||
min-height: 100% !important;
|
||
height: 100%;
|
||
}
|
||
|
||
/* CTA 独占一屏；页脚最后一屏贴底；整页高度由 JS 实测锁定 */
|
||
.portal-page.page-box {
|
||
box-sizing: border-box;
|
||
height: var(--home-figma-visual-height) !important;
|
||
max-height: var(--home-figma-visual-height) !important;
|
||
overflow: hidden !important;
|
||
padding: 0 !important;
|
||
margin: 0 !important;
|
||
background: @home-color-footer-bar-bg !important;
|
||
}
|
||
|
||
.portal-page .home-figma-scale-viewport {
|
||
height: var(--home-figma-visual-height) !important;
|
||
overflow: hidden !important;
|
||
}
|
||
|
||
.portal-page .bottom-box {
|
||
width: @home-design-width !important;
|
||
max-width: @home-design-width !important;
|
||
margin-left: 0 !important;
|
||
margin-right: 0 !important;
|
||
height: var(--home-figma-cta-design-height, @home-cta-design-height) !important;
|
||
min-height: var(--home-figma-cta-design-height, @home-cta-design-height) !important;
|
||
overflow: hidden;
|
||
background-color: @home-color-cta-section-bg !important;
|
||
}
|
||
|
||
.portal-page .bottom-box-bg {
|
||
position: absolute !important;
|
||
left: 0 !important;
|
||
top: 0 !important;
|
||
width: 100% !important;
|
||
height: 100% !important;
|
||
min-width: 0 !important;
|
||
transform: none !important;
|
||
object-fit: fill !important;
|
||
object-position: top center !important;
|
||
}
|
||
|
||
.portal-page .bottom-box::after {
|
||
display: none !important;
|
||
}
|
||
|
||
.portal-page .portal-footer-shell,
|
||
.portal-page .site-footer {
|
||
flex-shrink: 0;
|
||
width: @home-design-width !important;
|
||
max-width: @home-design-width !important;
|
||
margin-left: auto !important;
|
||
margin-right: auto !important;
|
||
margin-top: 0 !important;
|
||
}
|
||
|
||
.content-wrap--home {
|
||
background: @home-color-footer-bar-bg;
|
||
}
|
||
}
|
||
|
||
// -----------------------------------------------------------------------------
|
||
// 门户落地页 Figma 等比缩放（fwsc / hyzt / qych / gxnlpt）
|
||
// -----------------------------------------------------------------------------
|
||
.portal-figma-scale-page() {
|
||
.portal-figma-scale-viewport {
|
||
width: 100%;
|
||
}
|
||
|
||
.portal-figma-scale-stage {
|
||
width: 100%;
|
||
}
|
||
|
||
html.portal-figma-scale-active & {
|
||
.portal-figma-scale-viewport {
|
||
width: 100%;
|
||
height: var(--home-figma-visual-height, auto);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.portal-figma-scale-stage {
|
||
width: @home-design-width;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
transform: scale(var(--home-figma-scale, 1));
|
||
transform-origin: top center;
|
||
margin-bottom: var(--home-figma-stage-margin-bottom, 0);
|
||
}
|
||
}
|
||
}
|
||
|
||
html.portal-figma-scale-active.portal-landing-figma-scale-active {
|
||
.portal-landing-figma-page {
|
||
box-sizing: border-box;
|
||
height: var(--home-figma-visual-height, auto) !important;
|
||
max-height: var(--home-figma-visual-height, none) !important;
|
||
overflow: hidden !important;
|
||
background: #f6f7fa !important;
|
||
}
|
||
|
||
.content-wrap--landing-hub .portal-route-outlet {
|
||
min-height: var(--portal-landing-first-screen-height) !important;
|
||
}
|
||
|
||
.portal-page-shell.portal-landing-figma-page,
|
||
.portal-landing-figma-page .main-content,
|
||
.qych-landing {
|
||
min-height: var(--portal-landing-first-screen-height) !important;
|
||
}
|
||
|
||
.portal-page-shell .banner-section,
|
||
.qych-landing .banner-section {
|
||
height: @portal-landing-banner-height !important;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.hyzt-wrap .banner-bg {
|
||
top: @hyzt-landing-bg-offset-top !important;
|
||
width: 100% !important;
|
||
height: @hyzt-landing-bg-height !important;
|
||
min-height: @hyzt-landing-bg-height !important;
|
||
}
|
||
|
||
.content-wrap--landing-hub .portal-page-shell .services-section,
|
||
.qych-landing .services-section {
|
||
margin-top: -@portal-landing-cards-overlap !important;
|
||
padding-top: @portal-landing-cards-pt !important;
|
||
padding-bottom: @portal-landing-cards-pb !important;
|
||
|
||
&::before,
|
||
&::after {
|
||
flex-grow: 0 !important;
|
||
flex-basis: 0 !important;
|
||
min-height: 0 !important;
|
||
height: 0 !important;
|
||
content: none !important;
|
||
display: none !important;
|
||
}
|
||
}
|
||
|
||
.hyzt-page-inner,
|
||
.qych-page-inner {
|
||
max-width: @hyzt-landing-content-width !important;
|
||
}
|
||
|
||
.fwsc-page .services-grid {
|
||
max-width: @home-content-width !important;
|
||
}
|
||
|
||
.gxnlpt-page .page-content-wrap {
|
||
max-width: @home-content-width !important;
|
||
}
|
||
|
||
.qych-snap-section {
|
||
min-height: var(--portal-landing-first-screen-height) !important;
|
||
}
|
||
|
||
.content-wrap--landing-hub,
|
||
.content-wrap--figma-portal {
|
||
background: #f6f7fa;
|
||
}
|
||
}
|
||
|
||
// 服务中心子页：碳服务/需求/数据/金融市场列表
|
||
html.portal-figma-scale-active.portal-market-figma-scale-active {
|
||
.portal-market-figma-page {
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
flex: 1 1 auto;
|
||
min-height: var(--home-figma-visual-height, auto);
|
||
background: #F6F7FA !important;
|
||
}
|
||
|
||
.portal-market-figma-page .portal-figma-scale-stage {
|
||
min-height: var(--portal-market-shell-min-height, auto);
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.content-wrap--figma-market .portal-route-outlet {
|
||
display: flex;
|
||
flex: 1 1 auto;
|
||
flex-direction: column;
|
||
min-height: 0;
|
||
}
|
||
|
||
.portal-page-stack,
|
||
.portal-page-stack--figma-market {
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: var(--portal-scroll-height, 100%);
|
||
}
|
||
|
||
.portal-page-stack .portal-layout-footer {
|
||
flex-shrink: 0;
|
||
width: 100%;
|
||
margin-top: 0;
|
||
}
|
||
|
||
.portal-market-figma-page .secondary-nav-content {
|
||
width: @home-content-width !important;
|
||
max-width: @home-content-width !important;
|
||
margin-left: auto !important;
|
||
margin-right: auto !important;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.portal-market-figma-page .fwsc-main,
|
||
.portal-market-figma-page .xqsc-main,
|
||
.portal-market-figma-page .sjsc-main,
|
||
.portal-market-figma-page .jrsc-main,
|
||
.portal-market-figma-page .page-body,
|
||
.portal-market-figma-page .content-wrapper {
|
||
width: @home-content-width !important;
|
||
max-width: @home-content-width !important;
|
||
margin-left: auto !important;
|
||
margin-right: auto !important;
|
||
box-sizing: border-box;
|
||
flex: 1 1 auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: calc(var(--portal-market-shell-min-height) - 62px);
|
||
}
|
||
|
||
.portal-market-figma-page .content-area,
|
||
.portal-market-figma-page .content-wrapper {
|
||
flex: 1 1 auto;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.content-wrap--figma-market {
|
||
background: @home-color-footer-bar-bg;
|
||
}
|
||
}
|
||
|
||
// 顶栏不再参与 Figma 等比缩放，高度统一由 page-layout.less 的 --page-nav-height 控制
|
||
.home-figma-scale-nav() {
|
||
}
|
||
|
||
// -----------------------------------------------------------------------------
|
||
// 共性能力页 150605:2210 / 150605:2534
|
||
// -----------------------------------------------------------------------------
|
||
@gxnlpt-page-bg: #f6f7fa;
|
||
@gxnlpt-shell-padding-top: 42px;
|
||
@gxnlpt-shell-padding-bottom: 48px;
|
||
@gxnlpt-layout-gap: 24px;
|
||
@gxnlpt-sidebar-width: 280px;
|
||
@gxnlpt-sidebar-padding: 20px;
|
||
@gxnlpt-sidebar-radius: 6px;
|
||
@gxnlpt-side-nav-gap: 10px;
|
||
@gxnlpt-side-item-height: 48px;
|
||
@gxnlpt-side-item-radius-active: 6px;
|
||
@gxnlpt-side-item-radius: 6px;
|
||
@gxnlpt-side-label-size: 20px;
|
||
@gxnlpt-side-action-border: #d1d9d5;
|
||
@gxnlpt-side-action-bg: #e6f8f0;
|
||
@gxnlpt-side-action-color: @home-color-primary-green;
|
||
@gxnlpt-side-action-size: 16px;
|
||
@gxnlpt-content-padding: 20px;
|
||
@gxnlpt-content-min-height: 602px;
|
||
@gxnlpt-block-gap: 16px;
|
||
@gxnlpt-section-gap: 20px;
|
||
@gxnlpt-card-min-height: 114px;
|
||
@gxnlpt-card-padding-y: 16px;
|
||
@gxnlpt-card-padding-x: 20px;
|
||
@gxnlpt-card-grid-gap: 16px;
|
||
@gxnlpt-card-radius: 6px;
|
||
@gxnlpt-card-radius-hover: 6px;
|
||
@gxnlpt-more-color: #909399;
|
||
@gxnlpt-form-error: #f53f3f;
|
||
@gxnlpt-sidebar-sticky-top: 24px;
|
||
|
||
// -----------------------------------------------------------------------------
|
||
// 行业专题页首屏（Figma 150581:4100 / banner-bg 4101 / hyzt_banner 150679:365 / hyzt_content 4199）
|
||
// -----------------------------------------------------------------------------
|
||
@hyzt-landing-banner-height: @portal-landing-banner-height;
|
||
@hyzt-landing-bg-design-width: 1280px;
|
||
@hyzt-landing-bg-height: 548px;
|
||
@hyzt-landing-bg-offset-top: -34px;
|
||
@hyzt-landing-content-width: 1100px;
|
||
/* 标题水平位置由 banner 的 page-content-wrap（--page-gutter-x）控制，与导航「可」对齐 */
|
||
@hyzt-landing-title-size: 48px;
|
||
@hyzt-landing-title-line-height: 68px;
|
||
@hyzt-landing-title-letter-spacing: 0.96px;
|
||
@hyzt-landing-title-padding-y: 20px;
|
||
@hyzt-landing-title-underline-pb: 20px;
|
||
@hyzt-landing-title-accent: @home-color-secondary-green;
|
||
@hyzt-landing-title-sub: @home-color-primary-dark;
|
||
@hyzt-landing-title-border: 4px solid @home-color-secondary-green;
|
||
/* 与服务中心 fwsc 首屏卡片区一致：Banner 350px + overlap 120 + padding-top 60 */
|
||
@portal-landing-banner-height: 350px;
|
||
@portal-landing-cards-overlap: 120px;
|
||
@portal-landing-cards-overlap-md: 72px;
|
||
@portal-landing-cards-overlap-sm: 32px;
|
||
@portal-landing-cards-pt: 60px;
|
||
@portal-landing-cards-pb: 80px;
|
||
@portal-landing-cards-pt-fluid: clamp(36px, 4.5vh, 60px);
|
||
@portal-landing-cards-pb-fluid: clamp(24px, 3.5vh, 80px);
|
||
@portal-landing-cards-pb-screen: clamp(20px, 2.5vh, 40px);
|
||
/* 首屏卡片区垂直黄金分割：剩余空间上 38.2% / 下 61.8%，卡片落在 φ 点附近 */
|
||
@portal-landing-golden-flex-top: 382;
|
||
@portal-landing-golden-flex-bottom: 618;
|
||
@hyzt-landing-cards-overlap: @portal-landing-cards-overlap;
|
||
@hyzt-landing-cards-pt: @portal-landing-cards-pt;
|
||
@hyzt-landing-cards-px: 30px;
|
||
@hyzt-landing-cards-pb: @portal-landing-cards-pb;
|
||
@hyzt-landing-cards-gap: 24px;
|
||
@hyzt-landing-card-radius: 6px;
|
||
@hyzt-landing-card-padding: 28px;
|
||
@hyzt-landing-card-col-gap: 20px;
|
||
/* 与服务中心四宫格卡片同高（page-layout --portal-service-card-min-height） */
|
||
@portal-landing-card-min-height: 268px;
|
||
@hyzt-landing-card-min-height: @portal-landing-card-min-height;
|
||
@hyzt-landing-card-title-size: 22px;
|
||
@hyzt-landing-card-desc-size: 14px;
|
||
@hyzt-landing-card-desc-min-h: 0;
|
||
@hyzt-landing-card-desc-color: @home-color-text-secondary;
|
||
@hyzt-landing-card-desc-pt: 14px;
|
||
@hyzt-landing-card-header-pb: 20px;
|
||
@hyzt-landing-card-btn-h: 40px;
|
||
@hyzt-landing-card-btn-px: 15px;
|
||
@hyzt-landing-card-btn-py: 8px;
|
||
@hyzt-landing-card-btn-radius: 3px;
|
||
@hyzt-landing-card-btn-font: 14px;
|
||
@hyzt-landing-card-btn-bg-steel: #1d5e20;
|
||
@hyzt-landing-card-btn-bg-default: #1b6d24;
|
||
@hyzt-landing-card-border-blue: rgba(33, 150, 243, 0.2);
|
||
@hyzt-landing-card-border-green: rgba(0, 180, 42, 0.2);
|
||
@hyzt-landing-card-border-purple: rgba(114, 46, 209, 0.2);
|
||
|
||
// -----------------------------------------------------------------------------
|
||
// 企业出海页首屏（Figma 150581:2666 / banner 2709 / qych_content 2808）
|
||
// -----------------------------------------------------------------------------
|
||
@qych-landing-banner-height: @hyzt-landing-banner-height;
|
||
@qych-landing-content-width: @hyzt-landing-content-width;
|
||
@qych-landing-title-size: @hyzt-landing-title-size;
|
||
@qych-landing-title-line-height: @hyzt-landing-title-line-height;
|
||
@qych-landing-title-letter-spacing: @hyzt-landing-title-letter-spacing;
|
||
@qych-landing-title-padding-y: @hyzt-landing-title-padding-y;
|
||
@qych-landing-title-underline-pb: @hyzt-landing-title-underline-pb;
|
||
@qych-landing-title-accent: @hyzt-landing-title-accent;
|
||
@qych-landing-title-sub: @hyzt-landing-title-sub;
|
||
@qych-landing-title-border: @hyzt-landing-title-border;
|
||
@qych-landing-cards-overlap: @hyzt-landing-cards-overlap;
|
||
@qych-landing-cards-pt: @hyzt-landing-cards-pt;
|
||
@qych-landing-cards-px: @hyzt-landing-cards-px;
|
||
@qych-landing-cards-pb: @hyzt-landing-cards-pb;
|
||
@qych-landing-cards-gap: @hyzt-landing-cards-gap;
|
||
@qych-landing-card-radius: @hyzt-landing-card-radius;
|
||
@qych-landing-card-padding: @hyzt-landing-card-padding;
|
||
@qych-landing-card-col-gap: @hyzt-landing-card-col-gap;
|
||
@qych-landing-card-title-size: @hyzt-landing-card-title-size;
|
||
@qych-landing-card-desc-size: @hyzt-landing-card-desc-size;
|
||
@qych-landing-card-desc-min-h: @hyzt-landing-card-desc-min-h;
|
||
@qych-landing-card-min-height: @hyzt-landing-card-min-height;
|
||
@qych-landing-card-desc-color: @hyzt-landing-card-desc-color;
|
||
@qych-landing-card-desc-pt: @hyzt-landing-card-desc-pt;
|
||
@qych-landing-card-header-pb: @hyzt-landing-card-header-pb;
|
||
@qych-landing-card-btn-h: @hyzt-landing-card-btn-h;
|
||
@qych-landing-card-btn-px: @hyzt-landing-card-btn-px;
|
||
@qych-landing-card-btn-py: @hyzt-landing-card-btn-py;
|
||
@qych-landing-card-btn-radius: @hyzt-landing-card-btn-radius;
|
||
@qych-landing-card-btn-font: @hyzt-landing-card-btn-font;
|
||
@qych-landing-card-btn-bg-steel: @hyzt-landing-card-btn-bg-steel;
|
||
@qych-landing-card-btn-bg-default: @hyzt-landing-card-btn-bg-default;
|
||
@qych-landing-card-border-blue: @hyzt-landing-card-border-blue;
|
||
@qych-landing-card-border-green: @hyzt-landing-card-border-green;
|
||
@qych-landing-card-border-purple: @hyzt-landing-card-border-purple;
|
||
|
||
// -----------------------------------------------------------------------------
|
||
// 企业出海 · 政策文案屏（Figma 150660:2899 / 2945 / 2995）
|
||
// -----------------------------------------------------------------------------
|
||
@qych-policy-content-width: 1200px;
|
||
@qych-policy-title-size: 32px;
|
||
@qych-policy-title-weight: 600;
|
||
@qych-policy-title-color: @home-color-black;
|
||
@qych-policy-subtitle-size: 16px;
|
||
@qych-policy-subtitle-weight: 400;
|
||
@qych-policy-subtitle-color: @home-color-text-dark;
|
||
@qych-policy-header-gap: 10px;
|
||
@qych-policy-block-gap: 30px;
|
||
@qych-policy-module-py: 42px;
|
||
@qych-policy-card-height: 490px;
|
||
@qych-policy-card-inner-gap: 10px;
|
||
@qych-policy-card-inner-gap-battery: 24px;
|
||
@qych-policy-card-radius: 6px;
|
||
@qych-policy-section-title-size: 24px;
|
||
@qych-policy-section-title-weight: 600;
|
||
@qych-policy-section-title-py: 16px;
|
||
@qych-policy-section-title-px: 20px;
|
||
@qych-policy-section-title-pb: 10px;
|
||
@qych-policy-body-size: 14px;
|
||
@qych-policy-body-line: 20px;
|
||
@qych-policy-body-color: @home-color-text-secondary;
|
||
@qych-policy-label-weight: 600;
|
||
@qych-policy-label-color: @home-color-black;
|
||
@qych-policy-bullet-color: #4caf50;
|
||
@qych-policy-panel-bg: #f7f8fa;
|
||
@qych-policy-panel-height: 376px;
|
||
@qych-policy-panel-padding: 24px;
|
||
@qych-policy-panel-gap: 16px;
|
||
@qych-policy-content-gap: 24px;
|
||
@qych-policy-content-px: 23px;
|
||
@qych-policy-sidebar-width: 300px;
|
||
@qych-policy-sidebar-title-size: 20px;
|
||
@qych-policy-card-title-size: 16px;
|
||
@qych-policy-card-title-color: @home-color-text-dark;
|
||
@qych-policy-card-desc-size: 14px;
|
||
@qych-policy-card-desc-color: @home-color-text-secondary;
|
||
@qych-policy-card-padding-y: 32px;
|
||
@qych-policy-card-padding-x: 20px;
|
||
@qych-policy-card-padding-bottom: 20px;
|
||
@qych-policy-card-gap: 16px;
|
||
@qych-policy-card-radius-inner: 6px;
|
||
@qych-policy-btn-size: 14px;
|
||
@qych-policy-btn-height: 32px;
|
||
@qych-policy-btn-radius: 3px;
|
||
@qych-policy-header-gradient-battery: linear-gradient(180deg, #f1efff 0%, #f0efff 52.885%, #fff 100%);
|
||
@qych-policy-header-gradient-cbam: linear-gradient(180deg, #effdfe 0%, #fff 100%);
|
||
@qych-policy-header-gradient-shipping: linear-gradient(180deg, #e0f2e1 0%, #fff 100%);
|
||
@qych-policy-card-gradient-battery-1: linear-gradient(180deg, #f5f4ff 0%, #ebe8ff 100%);
|
||
@qych-policy-card-gradient-battery-2: linear-gradient(180deg, #f0f9ff 0%, #e0efff 100%);
|
||
@qych-policy-card-gradient-cbam-1: linear-gradient(180deg, #fffaf6 0%, #fff0e3 100%);
|
||
@qych-policy-card-gradient-cbam-2: linear-gradient(180deg, #ebfcff 0%, #daf9fc 100%);
|
||
@qych-policy-card-gradient-shipping-1: linear-gradient(180deg, #f0f9ff 0%, #e0efff 100%);
|
||
@qych-policy-card-gradient-shipping-2: linear-gradient(180deg, #ebfcff 0%, #daf9fc 100%);
|
||
@qych-policy-card-min-height: 164px;
|
||
@qych-policy-card-icon-right: 30px;
|
||
@qych-policy-card-icon-opacity: 0.3;
|
||
@qych-policy-card-icon-opacity-soft: 0.2;
|
||
@qych-policy-card-icon-sm: 50px;
|
||
@qych-policy-card-icon-sm-max-h: 52px;
|
||
@qych-policy-card-icon-md: 60px;
|
||
@qych-policy-card-icon-md-max-h: 62px;
|
||
@qych-policy-card-icon-lg: 80px;
|
||
@qych-policy-card-icon-lg-max-h: 82px;
|
||
@qych-policy-block-head-gap: 10px;
|
||
@qych-policy-card-icon-top-cbam-1: 82px;
|
||
@qych-policy-card-icon-top-cbam-2: 84px;
|
||
|
||
// -----------------------------------------------------------------------------
|
||
// 导出为 CSS 变量（可选，与 page-layout.less 并存）
|
||
// -----------------------------------------------------------------------------
|
||
.home-figma-css-vars() {
|
||
:root {
|
||
--home-color-primary-dark: @home-color-primary-dark;
|
||
--home-color-primary-green: @home-color-primary-green;
|
||
--home-color-primary-green-dark: @home-color-primary-green-dark;
|
||
--home-color-secondary-green: @home-color-secondary-green;
|
||
--home-color-page-bg: @home-color-page-bg;
|
||
--home-color-text-body: @home-color-text-body;
|
||
--home-color-text-muted: @home-color-text-muted;
|
||
--home-color-text-title: @home-color-text-title;
|
||
--home-color-accent-blue: @home-color-accent-blue;
|
||
--home-content-width: @home-content-width;
|
||
--home-nav-height: @home-nav-height;
|
||
--home-section-padding-top: @home-section-padding-top;
|
||
--home-section-padding-bottom: @home-section-padding-bottom;
|
||
--home-section-gap: @home-section-gap;
|
||
--home-radius-sm: @home-radius-sm;
|
||
--home-radius-lg: @home-radius-lg;
|
||
--home-radius-pill: @home-radius-pill;
|
||
--home-shadow-search: @home-shadow-search;
|
||
--home-shadow-card-green: @home-shadow-card-green;
|
||
--home-shadow-news-item: @home-shadow-news-item;
|
||
--home-font-family: @home-font-family;
|
||
}
|
||
}
|