@charset "UTF-8"; /* ============================================================================= xunsuan-home.css — 首页(/home)居中布局 注入:nginx sub_filter;配套 xunsuan-home.js 作用域:,由 JS 在首页添加、离开时移除, 确保控制台 / 登录页 / 其它路由完全不受影响。 参考 xunsuan.online 的居中式排版。 页面分三个模块,间距由 --xs-gap 统一控制: 模块一 Hero 站名 + 副标题 + CTA 模块二 Cards 四张特性卡片 模块三 Models 可用模型 2026-08-01 加固:本文件原先把 Vue 的 scoped 哈希 [data-v-6c879107] 写死在 选择器里。那个哈希由 HomeView.vue 的内容算出 —— 只要该文件被改过一次 (例如往顶栏加一个「模型广场」入口),重建后哈希就变成别的值,所有选择器 一起失配,整套美化静默失效、首页回到原版。 现在改为认 xs-* 标记类(由 xunsuan-home.js 按 DOM 结构打上,不含哈希)。 每条规则同时保留当前哈希 [data-v-ef618ea0] 作为更高优先级的冗余; 哈希若再变,那半边规则自动失效,标记类那半边继续生效。 ============================================================================= */ :root { --xs-gap: 8rem; /* 模块之间的垂直间距 */ } @media (max-width: 900px) { :root { --xs-gap: 5.5rem; } } @media (max-width: 600px) { :root { --xs-gap: 4rem; } } /* ---------- 1. 背景:复刻 us.ai.yswuxian.com 的双辉光深色底 ---------- 特征:近纯黑底 + 左上紫罗兰辉光 + 右下墨绿辉光,中间过渡为纯黑,无网格。 做法:隐藏应用自带的网格与三团青色光斑,在最底层铺一个 fixed 渐变层。 用 fixed 而非 absolute —— 滚动时辉光不跟着走,和参考站一致。 */ .xs-home .terminal-container { display: none !important; } /* 应用自带的背景装饰层(渐变底 + 三团光斑 + 网格)全部隐藏 */ .xs-home .xs-bg, .xs-home [data-v-ef618ea0].absolute.inset-0, .xs-home [data-v-ef618ea0].pointer-events-none.absolute.inset-0 { display: none !important; } /* 自绘背景。 踩坑:先用 body::before + z-index:-1 铺层,结果被应用自身带背景色的 祖先容器完全盖住(负层级只在同一层叠上下文内有效)。 改为直接给 html/body 上背景,并把中间各层置透明,最稳妥。 */ html.xs-home { background-color: #0a0a0c; background-image: radial-gradient(82rem 60rem at 10% -10%, rgba(30, 78, 190, .62), transparent 66%), radial-gradient(66rem 52rem at 90% 108%, rgba(12, 92, 74, .54), transparent 66%); background-repeat: no-repeat; background-attachment: fixed; } html:not(.dark).xs-home { background-color: #f6f7fb; background-image: radial-gradient(82rem 60rem at 10% -10%, rgba(30, 78, 190, .24), transparent 66%), radial-gradient(66rem 52rem at 90% 108%, rgba(12, 92, 74, .20), transparent 66%); } /* 中间各层透明,才能露出根元素的背景 */ .xs-home body, .xs-home #app, .xs-home #app > div, .xs-home section, .xs-home footer { background-color: transparent !important; background-image: none !important; } /* ---------- 2. 隐藏标题下方三个小胶囊(订阅转 API / 会话保持 / 按量计费) 该容器是 hero 之后、卡片网格之前的 flex-wrap 行。 用属性组合精确定位,避免误伤页面上其它 flex-wrap 容器。 */ .xs-home .xs-pills, .xs-home [data-v-ef618ea0].mb-12.flex.flex-wrap.items-center.justify-center { display: none !important; } /* ---------- 3. hero 区改为居中 ---------- 原本是 lg:flex-row(左文右终端)。终端已隐藏,让文字块独占并居中。 */ .xs-home .xs-hero-row, .xs-home [data-v-ef618ea0].mb-12.flex.flex-col.items-center.justify-between { flex-direction: column; gap: 0; } .xs-home .xs-hero-col, .xs-home [data-v-ef618ea0].flex-1.text-center { width: 100%; max-width: 46rem; margin: 0 auto; text-align: center; } /* 覆盖 lg:text-left —— 大屏下也保持居中 */ @media (min-width: 1024px) { .xs-home .xs-hero-col, .xs-home [data-v-ef618ea0].flex-1.text-center { text-align: center; } } /* 标题与副标题的呼吸感 */ .xs-home .xs-hero-col > h1, .xs-home [data-v-ef618ea0].flex-1.text-center > h1 { margin-bottom: .75rem; line-height: 1.15; } /* CTA 按钮居中 */ .xs-home .xs-hero-col a, .xs-home .xs-hero-col button, .xs-home [data-v-ef618ea0].flex-1.text-center a, .xs-home [data-v-ef618ea0].flex-1.text-center button { margin-left: auto; margin-right: auto; } /* ---------- 4. 模块一(Hero):整体上移 + 与模块二拉开间距 ---------- */ .xs-home .xs-container, .xs-home [data-v-ef618ea0].mx-auto.max-w-6xl { padding-top: 0; } .xs-home .xs-hero-row, .xs-home [data-v-ef618ea0].mb-12.flex.flex-col.items-center.justify-between { margin-top: -2.5rem; margin-bottom: var(--xs-gap); /* 模块一 → 模块二 */ } /* ============================================================================= 8. Hero:炫彩流光标题 / 副标题入场 / CTA 上浮 ============================================================================= */ /* ---------- 8a. 站名:多色流光 ---------- background-clip:text 取渐变色,再用 background-position 动画制造流动。 注意:应用自带 text-gray-900 / dark:text-white 会设 color, 必须 !important 才能让 color:transparent 生效,否则渐变被纯色盖住。 padding-bottom 防止下沉笔画(如 g/y)被裁切。 */ .xs-home h1.xs-title { background-image: linear-gradient( 100deg, #14b8a6 0%, #22d3ee 18%, #818cf8 36%, #c084fc 54%, #22d3ee 72%, #14b8a6 100% ) !important; background-size: 260% 100%; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent; padding-bottom: .1em; line-height: 1.16; } @media (prefers-reduced-motion: no-preference) { .xs-home h1.xs-title { animation: xs-flow 7s linear infinite; } } @keyframes xs-flow { 0% { background-position: 0% 50%; } 100% { background-position: 260% 50%; } } /* ---------- 8b. 副标题:缩小 + 从无到有的入场循环 ---------- 应用自带 text-lg md:text-xl,这里降两档。 入场要体现「从无到有」:不只是位移,还叠加了 opacity 0 → 1、blur(8px) → 0、letter-spacing 收拢、translateY 上移, 四者同时收敛,视觉上是「从虚无中浮现凝实」。 节奏:5s 一轮。入场占 34%(约 1.7s)—— 周期缩短了但入场反而更慢, 所以百分比要显著提高;停留到 88%,末尾 0.6s 淡出。 */ .xs-home .xs-subtitle { font-size: .8125rem !important; /* 覆盖 text-lg */ line-height: 1.75; opacity: .95; } @media (min-width: 768px) { .xs-home .xs-subtitle { font-size: .875rem !important; /* 覆盖 md:text-xl */ } } @media (prefers-reduced-motion: no-preference) { .xs-home .xs-subtitle { animation: xs-emerge 5s cubic-bezier(.22, 1, .36, 1) infinite; } } /* 不用 both/backwards —— 动画未运行时(被禁用 / CSS 部分失效), backwards 会把文字永久钉在 opacity:0 直接看不见。 */ @keyframes xs-emerge { 0% { opacity: 0; transform: translateY(18px); filter: blur(8px); letter-spacing: .18em; } 34% { opacity: .95; transform: none; filter: blur(0); letter-spacing: normal; } 88% { opacity: .95; transform: none; filter: blur(0); letter-spacing: normal; } 100% { opacity: 0; transform: translateY(-10px); filter: blur(6px); letter-spacing: .1em; } } /* ---------- 8c. CTA 按钮:淡蓝配色 + 悬停上浮 ---------- 应用自带 .btn-primary 是 teal 渐变(#14b8a6→#0d9488), 且元素上挂着 shadow-primary-500/30 的 teal 光晕,两处都要覆盖, 否则会出现「蓝底 + 青光」的错配。 */ .xs-home a.xs-cta, .xs-home .xs-cta { background-image: linear-gradient(to right, #60a5fa, #3b82f6) !important; color: #fff !important; /* Tailwind 的 box-shadow 是 var(--tw-ring-offset-shadow) var(--tw-ring-shadow) var(--tw-shadow) 三段合成,直接覆盖 box-shadow 会被它重新拼回去。 改写变量本身才能真正换掉那圈 teal 光晕。 */ --tw-shadow: 0 10px 15px -3px rgba(96, 165, 250, .38); --tw-shadow-colored: 0 10px 15px -3px rgba(96, 165, 250, .38); --tw-shadow-color: rgba(96, 165, 250, .38); transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s ease, background-image .25s ease; will-change: transform; } .xs-home a.xs-cta:hover, .xs-home .xs-cta:hover { background-image: linear-gradient(to right, #7cb8fb, #4d8ff7) !important; transform: translateY(-3px); --tw-shadow: 0 18px 32px -12px rgba(96, 165, 250, .62); --tw-shadow-colored: 0 18px 32px -12px rgba(96, 165, 250, .62); --tw-shadow-color: rgba(96, 165, 250, .62); } .xs-home a.xs-cta:active, .xs-home .xs-cta:active { transform: translateY(-1px); } @media (prefers-reduced-motion: reduce) { .xs-home .xs-cta:hover, .xs-home .xs-cta:active { transform: none; } } /* ---------- 5. 四张卡片:列数由此控制 ---------- 不依赖 Tailwind 的 lg:grid-cols-4(可能未编译进产物), 直接按视口宽度指定列数。 */ .xs-home [data-xs-cards="4"] { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; } @media (max-width: 1024px) { .xs-home [data-xs-cards="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .xs-home [data-xs-cards="4"] { grid-template-columns: minmax(0, 1fr); } } .xs-home [data-xs-cards="4"] > div { display: flex; flex-direction: column; transition: transform .28s cubic-bezier(.16, 1, .3, 1), border-color .28s ease, box-shadow .28s ease; } .xs-home [data-xs-cards="4"] > div:hover { transform: translateY(-4px); } /* ---------- 6. 窄屏 ---------- */ @media (max-width: 640px) { .xs-home .xs-hero-col > h1, .xs-home [data-v-ef618ea0].flex-1.text-center > h1 { font-size: 2.25rem; } } /* ============================================================================= 7. 可用模型区 —— 复刻 xunsuan.online 的 .model-pill 板块 DOM 由 xunsuan-home.js 的 rebuildModels() 生成。 数值取自参考站 HomeView 的 scoped 样式,保持一致。 ============================================================================= */ /* 标题行:两侧渐变分隔线 + 小号大写标签 */ .xs-home .xs-models-head { display: flex; align-items: center; gap: 1rem; width: 100%; /* 与上方卡片网格同宽,分隔线才会横贯整行 */ margin-top: var(--xs-gap); /* 模块二 → 模块三 */ margin-bottom: 2.25rem; } .xs-home .xs-rule { height: 1px; flex: 1 1 0; min-width: 0; /* flex 子项默认 min-width:auto,不置 0 撑不开 */ } /* 分隔线渐变。 注意:参考站是浅色底,用 #e5e7eb 合适;本站深色底若照搬 #334155 会因对比度过低而几乎看不见 —— 暗色需要明显更亮的收尾色。 */ .xs-home .xs-rule-l { background: linear-gradient(to right, transparent, #d1d5db); } .xs-home .xs-rule-r { background: linear-gradient(to left, transparent, #d1d5db); } html.dark.xs-home .xs-rule-l { background: linear-gradient(to right, transparent, rgba(148, 163, 184, .55)); } html.dark.xs-home .xs-rule-r { background: linear-gradient(to left, transparent, rgba(148, 163, 184, .55)); } .xs-home .xs-models-label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: #9ca3af; white-space: nowrap; } html.dark.xs-home .xs-models-label { color: #64748b; } /* 胶囊行 */ .xs-home .xs-models-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem; margin-bottom: 0; } /* 胶囊本体:数值与参考站 .model-pill 对齐 */ .xs-home .xs-pill { display: inline-flex; align-items: center; gap: .5rem; border-radius: 9999px; border: 1px solid rgb(229, 231, 235); background: #fffc; padding: .5rem 1rem; font-size: .875rem; font-weight: 600; color: #475569; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .xs-home .xs-pill:hover { transform: translateY(-2px); border-color: #14b8a666; box-shadow: 0 10px 22px -14px #0f172a40; } html.dark.xs-home .xs-pill { border-color: rgba(51, 65, 85, .8); background: rgba(30, 41, 59, .6); color: #cbd5e1; } html.dark.xs-home .xs-pill:hover { border-color: #2dd4bf66; box-shadow: 0 10px 22px -14px #00000080; } /* 圆点:颜色由 JS 通过 --xs-dot 注入 */ .xs-home .xs-dot { height: .5rem; width: .5rem; flex-shrink: 0; border-radius: 9999px; background: var(--xs-dot, #94a3b8); } html.dark.xs-home .xs-dot { background: var(--xs-dot-dark, var(--xs-dot, #94a3b8)); } /* 底部提示(模块三收尾,与页脚拉开距离) */ .xs-home #xs-models-note { margin-top: 1.5rem; margin-bottom: var(--xs-gap); text-align: center; font-size: .75rem; color: #9ca3af; } html.dark.xs-home #xs-models-note { color: #64748b; } @media (prefers-reduced-motion: reduce) { .xs-home .xs-pill:hover { transform: none; } }