txw/txw-mhzc-web/src/pages/index/styles/page-layout.less

// 门户页边距：Figma 1440 画布 · 1200 版心 · 左右各 120px 自适应留白
@import './portal-landing-hub-layout.less';
@import './home-figma-variables.less';

.home-figma-scale-nav();

:root {
  --page-content-max-width: 1200px;
  /* Figma 导航 logo：图标区 34px + 与字间距 12px → 「可」字左缘距版心左 46px */
  --page-nav-logo-icon-box: 34px;
  --page-nav-logo-gap: 12px;
  --page-content-align-x: calc(
    var(--page-nav-padding-left) + var(--page-nav-logo-icon-box) + var(--page-nav-logo-gap)
  );
  /* 区块标题 / Tab / 列表与导航「可」字左缘对齐 */
  --page-gutter-x: var(--page-content-align-x);
  --page-section-title-padding-left: var(--page-content-align-x);
  /* 导航 logo 图标左缘贴版心左（「可」字由上方 align-x 统一定位） */
  --page-nav-padding-left: 0px;
  /* 大标题与下方 UI 间距（与共性能力屏一致） */
  --page-block-title-to-content-gap: 45px;
  /* 版心内标题相对 gutter 的额外内缩 */
  --page-block-title-inset-extra: calc(var(--page-section-title-padding-left) - var(--page-gutter-x));
  --page-section-padding-y: 64px;
  --page-block-margin-bottom: 64px;
  /* Figma 导航栏 1:807：高 64px；菜单组内间距加宽，登录仍靠右 */
  --page-nav-height: 64px;
  --page-nav-logo-menu-gap: 0px;
  --page-nav-item-gap: 16px;
  --page-nav-item-padding-x: 12px;
  --page-nav-active-bar-height: 3px;
  --page-nav-color: #003b1a;
  --page-offset-top: var(--page-nav-height);
  /* Figma 页脚：主区 #f0f7f2、底栏 #e2ede5，与导航/内容版心对齐 */
  --page-footer-bg: #f0f7f2;
  --page-footer-bar-bg: #e2ede5;
  --page-footer-title-color: #003b1a;
  --page-footer-text-color: #556659;
  --page-footer-padding-y: 40px;
  --page-footer-bar-padding-y: 12px;
  --page-footer-title-gap: 12px;
  --page-footer-link-gap: 8px;
  /* 与首屏 .top-title 距顶一致，各屏区块大标题上方留白 */
  --page-hero-title-offset-top: 128px;
  --page-section-title-top: 100px;

  /* 服务中心四宫格单卡尺寸（与版心同宽） */
  --portal-services-grid-max: var(--page-content-max-width);
  --portal-services-grid-gap: 24px;
  --portal-services-fwsc-cols: 4;
  /* 1400px 版心下的参考宽度；实际列宽请用 --portal-service-card-col-width（随网格 100% 缩放） */
  --portal-service-card-width: calc(
    (var(--portal-services-grid-max) - (var(--portal-services-fwsc-cols) - 1) * var(--portal-services-grid-gap))
    / var(--portal-services-fwsc-cols)
  );
  /* 与 fwsc 单卡内容区同高（padding 56 + 标题区 72 + 描述 ~76 + 按钮 40） */
  --portal-service-card-min-height: 268px;
}

@media screen and (max-width: 1279px) {
  :root {
    --page-nav-padding-left: 40px;
    --page-section-padding-y: 48px;
    --page-nav-height: 64px;
    --page-nav-logo-menu-gap: 80px;
    --page-nav-item-gap: 28px;
    --page-nav-item-padding-x: 10px;
    --page-hero-title-offset-top: 96px;
    --page-section-title-top: 96px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  :root {
    --portal-services-fwsc-cols: 2;
    --portal-services-grid-gap: 20px;
    --page-section-padding-y: 48px;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --page-nav-padding-left: 16px;
    --page-gutter-x: 16px;
    --page-content-align-x: 16px;
    --page-section-title-padding-left: 16px;
    --page-content-max-width: 100%;
    --page-section-padding-y: 40px;
    --page-nav-height: 56px;
    --page-hero-title-offset-top: 72px;
    --page-section-title-top: 72px;
    --portal-services-fwsc-cols: 1;
    --portal-services-grid-gap: 12px;
  }
}

@media screen and (max-width: 480px) {
  :root {
    --page-gutter-x: 16px;
    --page-nav-padding-left: 16px;
    --page-hero-title-offset-top: 56px;
    --page-section-title-top: 56px;
  }
}

@media screen and (max-width: 360px) {
  :root {
    --page-gutter-x: 12px;
    --page-nav-padding-left: 12px;
  }
}

@media screen and (min-width: 1920px) {
  :root {
    --page-content-max-width: 1200px;
  }
}

.page-content-wrap {
  box-sizing: border-box;
  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);
}

.page-nav-inner {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--page-content-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-nav-padding-left);
  padding-right: var(--page-nav-padding-left);
}

/* 首页全宽背景区块：突破 .container 80% 限制 */
.home-section-bleed() {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

// =============================================================================
// 门户内页：唯一滚动容器为 .content-wrap，页脚为滚动内容最后一项
// =============================================================================

@media screen and (min-width: 768px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  #app,
  .portal-app-root {
    height: 100%;
    overflow: hidden;
  }
}

.content-wrap--portal {
  background: #f6f7fa;
}

/* 短页：栈高度至少铺满滚动区，页脚贴底；长页：随内容增高，不在页脚后留白 */
.portal-page-stack {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  min-height: 100%;
}

.portal-page-stack .portal-route-outlet {
  flex: 1 1 auto;
  width: 100%;
  min-height: auto;
}

.portal-page-stack .portal-layout-footer {
  flex-shrink: 0;
  width: 100%;
}

.portal-route-outlet-wrap {
  width: 100%;
  min-height: 100%;
}

.portal-page-shell {
  display: block;
  box-sizing: border-box;
  width: 100%;
}