@charset "UTF-8"; /* ============================================================================= xunsuan-home.css — 首页(/home)居中布局 注入:nginx sub_filter;配套 xunsuan-home.js 作用域:,由 JS 在首页添加、离开时移除, 确保控制台 / 登录页 / 其它路由完全不受影响。 参考 xunsuan.online 的居中式排版。 页面分三个模块,间距由 --xs-gap 统一控制: 模块一 Hero 站名 + 副标题 + CTA 模块二 Cards 四张特性卡片 模块三 Models 可用模型 ============================================================================= */ :root { --xs-gap: 8rem; /* 模块之间的垂直间距 */ } @media (max-width: 900px) { :root { --xs-gap: 5.5rem; } } @media (max-width: 600px) { :root { --xs-gap: 4rem; } } /* ---------- 1. 隐藏终端窗口 ---------- */ .xs-home .terminal-container { display: none !important; } /* ---------- 2. 隐藏标题下方三个小胶囊(订阅转 API / 会话保持 / 按量计费) 该容器是 hero 之后、卡片网格之前的 flex-wrap 行。 用属性组合精确定位,避免误伤页面上其它 flex-wrap 容器。 */ .xs-home [data-v-6c879107].mb-12.flex.flex-wrap.items-center.justify-center { display: none !important; } /* ---------- 3. hero 区改为居中 ---------- 原本是 lg:flex-row(左文右终端)。终端已隐藏,让文字块独占并居中。 */ .xs-home [data-v-6c879107].mb-12.flex.flex-col.items-center.justify-between { flex-direction: column; gap: 0; } .xs-home [data-v-6c879107].flex-1.text-center { width: 100%; max-width: 46rem; margin: 0 auto; text-align: center; } /* 覆盖 lg:text-left —— 大屏下也保持居中 */ @media (min-width: 1024px) { .xs-home [data-v-6c879107].flex-1.text-center { text-align: center; } } /* 标题与副标题的呼吸感 */ .xs-home [data-v-6c879107].flex-1.text-center > h1 { margin-bottom: .75rem; line-height: 1.15; } /* CTA 按钮居中 */ .xs-home [data-v-6c879107].flex-1.text-center a, .xs-home [data-v-6c879107].flex-1.text-center button { margin-left: auto; margin-right: auto; } /* ---------- 4. 模块一(Hero):整体上移 + 与模块二拉开间距 ---------- */ .xs-home [data-v-6c879107].mx-auto.max-w-6xl { padding-top: 0; } .xs-home [data-v-6c879107].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,这里降一档。 动画分两段: xs-up 一次性入场(0→1),只跑一次; xs-float 之后的循环,只做极轻微的上下浮动,不改透明度。 为什么不让整轮循环都淡入淡出:副标题是关键卖点文案,周期性变淡 会明显影响可读性(实测每轮有数秒几乎看不清)。 */ .xs-home .xs-subtitle { font-size: .9375rem !important; /* 覆盖 text-lg */ line-height: 1.7; opacity: .95; } @media (min-width: 768px) { .xs-home .xs-subtitle { font-size: 1rem !important; /* 覆盖 md:text-xl */ } } @media (prefers-reduced-motion: no-preference) { .xs-home .xs-subtitle { animation: xs-up .8s cubic-bezier(.16, 1, .3, 1) .05s 1 forwards, xs-float 4.5s ease-in-out .9s infinite; } } /* 一次性入场:默认可见,forwards 而非 both —— 动画未运行时不会把文字 永久钉在 opacity:0 */ @keyframes xs-up { from { opacity: 0; transform: translateY(14px); } to { opacity: .95; transform: none; } } /* 循环:仅位移,始终保持可读 */ @keyframes xs-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } /* ---------- 8c. CTA 按钮:悬停上浮 ---------- */ .xs-home .xs-cta { transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s ease; will-change: transform; } .xs-home .xs-cta:hover { transform: translateY(-3px); box-shadow: 0 18px 32px -12px rgba(13, 148, 136, .65); } .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 [data-v-6c879107].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; } }