/* ========================================================= 「我的帐户」页（WooCommerce 账号页） --------------------------------------------------------- 页面骨架走 `page.php` + WooCommerce 的 `[woocommerce_my_account]` 短码 （官方推荐做法，不改模板、不动数据库）； 左栏导航由 `inc/account.php` 换成主题结构； 本文件只对 `.cp-account-page`（body class）生效， 所以购物车 / 结账 / 商品页都不受影响。 设计语言取自首页与法务页（设计稿 `设计稿/隐私政策.png` 反解值）： - 正文区白底、内容块 1210px 居中，页头/页脚保持浅灰 --cp-bg - 标题 48px 居中（与 `.cp-legal__title` 同款字体处理：500 字重 + 0.5px 描边） - 左栏 212px：24px 黑字，当前项加粗 + 4px 黑色下划线 - 右栏正文 16px / 1.75，表格与表单用法务页同一套边框、圆角 ⚠️ WooCommerce 自带的 woocommerce.css 仍然加载（inc/woocommerce.php 里 `cardpouchy_keep_woocommerce_css` 目前是 true）。它的账号页布局是 `float` + `width: 30% / 68%`，所以这里要**显式覆盖 float 和 width**， 不能只写 display:grid。 ========================================================= */ /* 正文区白底（与法务页同款处理） */ .cp-account-page .cp-main { background: var(--cp-surface); } /* 账号页比其它内页宽：内容块用 1210px（法务页同一套横向基准） */ .cp-account-page .cp-container--narrow { max-width: 1258px; } /* * 标题：与法务页 `.cp-legal__title` 完全同款。 * 那份样式带 `.cp-legal` 前缀、只对法务页生效，所以这里照抄一份， * 而不是把 `.cp-legal__title` 借来用（免得以后改法务页时误伤账号页）。 */ .cp-account-page .cp-entry__title { margin: 0 0 10px; color: #000; font-size: 48px; font-weight: 500; -webkit-text-stroke: 0.5px currentColor; line-height: 1.2; text-align: center; } /* 页面纵向节奏：比法务页（150 / 395）收一些 —— 账号页是功能页，不用留那么大尾白 */ .cp-account-page .cp-layout { padding-block: 96px 240px; } /* ---- 左右两栏：左栏导航 212px + 右栏内容 ---- */ /* * 账号短码外面还有一层 `
`，它才是 `.cp-entry__content` * 的直接子元素。用 `display: contents` 把它“透明化”， * 让里面的导航 / 内容直接成为网格项 —— 否则整块会被当成**一个**网格项， * 被塞进第一列（实测：整页缩成 212px 一列，右栏掉到左栏下面）。 * * 子元素的栏位**显式指定**，不靠自动排布： * 内容容器里第一个子是 Woo 的 `.woocommerce-notices-wrapper`， * 后来还会插入 `.woocommerce-MyAccount-content`， * 自动排布在多子元素时容易错位。 */ .cp-account-page .cp-entry__content { display: grid; grid-template-columns: 212px minmax(0, 1fr); gap: 40px; margin-top: 54px; } .cp-account-page .cp-entry__content > .woocommerce { display: contents; } /* * 子元素只**指定列**、行由自动排布决定： * 内容容器里第一个子是 Woo 的 `.woocommerce-notices-wrapper`（通常高 0）， * 它和正文容器是兄弟；写死行号会把正文推到导航下面（实测踩过）。 * 显式给列号 + 自动行 = 导航在左、提示条与正文依次排在右列。 */ .cp-account-page .woocommerce-MyAccount-navigation { grid-column: 1; } .cp-account-page .woocommerce-notices-wrapper, .cp-account-page .woocommerce-MyAccount-content { grid-column: 2; } /* 未登录时 Woo 只渲染登录表单，那时不要两栏（导航整个不存在） */ .cp-account-page .cp-entry__content:not(:has(.woocommerce-MyAccount-navigation)) { grid-template-columns: minmax(0, 1fr); margin-top: 32px; } .cp-account-page .cp-entry__content:not(:has(.woocommerce-MyAccount-navigation)) .woocommerce-notices-wrapper, .cp-account-page .cp-entry__content:not(:has(.woocommerce-MyAccount-navigation)) .woocommerce-MyAccount-content { grid-column: 1; } /* 显式解掉 WooCommerce 的 float + 30% / 68%（它是浮动布局，这里是 grid） */ .cp-account-page .woocommerce-MyAccount-navigation, .cp-account-page .woocommerce-MyAccount-content { float: none; width: auto; } /* * Woo 原来那个菜单列表：**保留它的 DOM**（官方模板直接调 * `wc_get_account_menu_items()` 输出 `