feat: PC 端容器宽度统一 80rem(1280px),五站均超 1200px
- 五主题 --container 令牌统一为 80rem(原 launchai 72 / ledger·devai 64 / findai 56) - loading 骨架、alternatives/comparison 视图页容器同步放宽 - 新增 verify-widths.ts 实测脚本(1440 视口下断言容器 1280px)
This commit is contained in:
@@ -55,7 +55,7 @@ export async function AlternativesView({
|
||||
const url = `${baseUrl()}/${locale}/tools/${baseSlug}-alternatives`;
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-4xl px-4 py-10 sm:px-6">
|
||||
<div className="site-container px-4 py-10 sm:px-6">
|
||||
<FaqPageJsonLd faqs={seo.faqs} />
|
||||
<BreadcrumbJsonLd
|
||||
items={[
|
||||
@@ -285,7 +285,7 @@ export async function ComparisonView({
|
||||
: null;
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-4xl px-4 py-10 sm:px-6">
|
||||
<div className="site-container px-4 py-10 sm:px-6">
|
||||
<BreadcrumbJsonLd
|
||||
items={[
|
||||
{ name: "Home", url: `${baseUrl()}/${locale}` },
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
export default function Loading() {
|
||||
return (
|
||||
<div className="site-container px-4 py-12 sm:px-6">
|
||||
<div className="loading-shell mx-auto max-w-5xl">
|
||||
<div className="loading-shell">
|
||||
{/* ai-stack(classic):居中标题 + 三列方角卡片 */}
|
||||
<div className="loading-variant lv-ai-stack">
|
||||
<div className="mb-10 space-y-3 text-center">
|
||||
|
||||
@@ -104,7 +104,8 @@ html {
|
||||
text-wrap: balance;
|
||||
}
|
||||
/* 站点统一容器:宽度由各主题的 --container 令牌决定,
|
||||
header / footer / 所有营销页面共用,保证整站宽度一致 */
|
||||
header / footer / 所有营销页面共用,保证整站宽度一致。
|
||||
宽度策略:PC 端(视口 > 1200px)一律 80rem(1280px),正文段落阅读宽度不受影响 */
|
||||
.site-container {
|
||||
margin-inline: auto;
|
||||
width: 100%;
|
||||
@@ -134,6 +135,7 @@ html {
|
||||
|
||||
/* ---------- 1. AI Stack:深蓝专业(浅:白底蓝主色 / 深:海军蓝) ---------- */
|
||||
[data-theme="ai-stack"] {
|
||||
--container: 80rem;
|
||||
--primary: 224 64% 33%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--ring: 224 64% 33%;
|
||||
@@ -163,7 +165,7 @@ html {
|
||||
|
||||
/* ---------- 2. LaunchAI:暖橙社区(浅:暖白橙 / 深:深棕橙) ---------- */
|
||||
[data-theme="launchai"] {
|
||||
--container: 72rem;
|
||||
--container: 80rem;
|
||||
--primary: 16 85% 50%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--background: 30 55% 97%;
|
||||
@@ -187,7 +189,7 @@ html {
|
||||
|
||||
/* ---------- 3. The AI Ledger:报纸(浅:纸白墨黑 / 深:炭黑米白) ---------- */
|
||||
[data-theme="the-ai-ledger"] {
|
||||
--container: 64rem;
|
||||
--container: 80rem;
|
||||
--primary: 24 10% 12%;
|
||||
--primary-foreground: 40 40% 98%;
|
||||
--background: 42 45% 97%;
|
||||
@@ -226,7 +228,7 @@ html {
|
||||
|
||||
/* ---------- 4. DevAI.tools:终端(深:默认深色 / 浅:日间终端) ---------- */
|
||||
[data-theme="devai-tools"] {
|
||||
--container: 64rem;
|
||||
--container: 80rem;
|
||||
--primary: 150 60% 38%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--background: 150 20% 97%;
|
||||
@@ -268,7 +270,7 @@ html {
|
||||
|
||||
/* ---------- 5. findai:极简(浅:纯白紫 / 深:深紫黑) ---------- */
|
||||
[data-theme="findai"] {
|
||||
--container: 56rem;
|
||||
--container: 80rem;
|
||||
--primary: 262 65% 52%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--ring: 262 65% 52%;
|
||||
|
||||
Reference in New Issue
Block a user