LiuShen / NewAPI自定义主页代码

<div class="bg-background text-foreground relative min-h-svh overflow-x-clip qy-home" data-qy-theme="light"> <style> .qy-home { --qy-bg: #fbfaf7; --qy-bg-soft: rgba(255, 255, 255, 0.72); --qy-bg-solid: rgba(255, 255, 255, 0.92); --qy-text: #151a1f; --qy-muted: #68717d; --qy-faint: #8b96a5; --qy-line: rgba(37, 45, 57, 0.1); --qy-line-strong: rgba(37, 45, 57, 0.16); --qy-card: rgba(255, 255, 255, 0.62); --qy-card-strong: rgba(255, 255, 255, 0.84); --qy-primary: #1d7f8c; --qy-primary-strong: #115d68; --qy-accent: #c79f62; --qy-cyan: #74d7df; --qy-blue: #9eb8ff; --qy-shadow: 0 24px 80px rgba(31, 42, 58, 0.12); --qy-shadow-soft: 0 16px 42px rgba(31, 42, 58, 0.08); --qy-radius-xl: 34px; --qy-radius-lg: 24px; --qy-radius-md: 18px; color: var(--qy-text); background: radial-gradient(ellipse 56% 38% at 50% 30%, rgba(116, 215, 223, 0.22), rgba(255, 255, 255, 0.22) 46%, rgba(255, 255, 255, 0) 76%), radial-gradient(ellipse 42% 30% at 58% 46%, rgba(199, 159, 98, 0.11), rgba(255, 255, 255, 0) 70%); isolation: isolate; } .dark .qy-home, .qy-home[data-qy-theme="dark"] { --qy-bg: #090d12; --qy-bg-soft: rgba(13, 18, 25, 0.72); --qy-bg-solid: rgba(13, 18, 25, 0.94); --qy-text: #eef3f6; --qy-muted: #a7b1bd; --qy-faint: #737f8f; --qy-line: rgba(237, 246, 249, 0.1); --qy-line-strong: rgba(237, 246, 249, 0.16); --qy-card: rgba(15, 22, 30, 0.58); --qy-card-strong: rgba(15, 22, 30, 0.86); --qy-primary: #7fe3eb; --qy-primary-strong: #b8f4f7; --qy-accent: #e3bf7e; --qy-cyan: #76dce5; --qy-blue: #99b8ff; --qy-shadow: 0 28px 90px rgba(0, 0, 0, 0.48); --qy-shadow-soft: 0 18px 52px rgba(0, 0, 0, 0.36); background: radial-gradient(ellipse 56% 38% at 50% 30%, rgba(116, 215, 223, 0.13), rgba(9, 13, 18, 0.2) 46%, rgba(9, 13, 18, 0) 76%), radial-gradient(ellipse 42% 30% at 58% 46%, rgba(227, 191, 126, 0.09), rgba(9, 13, 18, 0) 70%); } .qy-home * { box-sizing: border-box; } .qy-home a { color: inherit; text-decoration: none; } .qy-shell { position: relative; width: min(100%, 1180px); margin: 0 auto; padding: 22px clamp(18px, 4vw, 34px) 48px; } .qy-shell::before { content: ""; position: absolute; inset: 116px clamp(0px, 3vw, 28px) auto; height: 620px; pointer-events: none; z-index: -1; opacity: 0.92; background: linear-gradient(115deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.08) 34%, rgba(255, 255, 255, 0.64) 68%, rgba(255, 255, 255, 0)), radial-gradient(circle at 22% 26%, rgba(116, 215, 223, 0.2), transparent 34%), radial-gradient(circle at 70% 24%, rgba(158, 184, 255, 0.18), transparent 32%), radial-gradient(circle at 50% 78%, rgba(199, 159, 98, 0.13), transparent 30%); border-radius: 46px; filter: blur(0.2px); -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 34px, #000 132px, #000 78%, transparent 100%), radial-gradient(ellipse 68% 56% at 50% 42%, #000 38%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent 0, transparent 34px, #000 132px, #000 78%, transparent 100%), radial-gradient(ellipse 68% 56% at 50% 42%, #000 38%, transparent 100%); mask-composite: intersect; } .dark .qy-shell::before, .qy-home[data-qy-theme="dark"] .qy-shell::before { background: linear-gradient(115deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02) 34%, rgba(255, 255, 255, 0.07) 68%, rgba(255, 255, 255, 0)), radial-gradient(circle at 22% 26%, rgba(116, 215, 223, 0.18), transparent 34%), radial-gradient(circle at 70% 24%, rgba(158, 184, 255, 0.14), transparent 32%), radial-gradient(circle at 50% 78%, rgba(227, 191, 126, 0.1), transparent 30%); } .qy-nav { position: sticky; top: 14px; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 66px; padding: 12px 14px 12px 16px; border: 1px solid var(--qy-line); border-radius: 999px; background: color-mix(in srgb, var(--qy-bg-solid) 78%, transparent); box-shadow: 0 14px 42px rgba(40, 48, 64, 0.08); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); } .qy-brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; } .qy-logo-wrap { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--qy-line-strong); border-radius: 16px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.32)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 12px 26px rgba(37, 45, 57, 0.08); overflow: hidden; } .dark .qy-logo-wrap, .qy-home[data-qy-theme="dark"] .qy-logo-wrap { background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 26px rgba(0, 0, 0, 0.25); } .qy-logo-wrap img { width: 27px; height: 27px; border-radius: 9px; object-fit: cover; } .qy-brand-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.05; } .qy-brand-name { font-size: 15px; font-weight: 760; letter-spacing: -0.03em; } .qy-brand-sub { font-size: 10px; letter-spacing: 0.17em; text-transform: uppercase; color: var(--qy-faint); } .qy-nav-links { display: flex; align-items: center; gap: 4px; color: var(--qy-muted); font-size: 13px; font-weight: 560; } .qy-nav-links a { padding: 9px 12px; border-radius: 999px; transition: color 0.22s ease, background 0.22s ease; } .qy-nav-links a:hover { color: var(--qy-text); background: rgba(127, 143, 162, 0.1); } .qy-nav-actions { display: flex; align-items: center; gap: 8px; } .qy-theme-toggle, .qy-small-button { appearance: none; border: 1px solid var(--qy-line); color: var(--qy-text); background: rgba(255, 255, 255, 0.42); border-radius: 999px; cursor: pointer; transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease; } .dark .qy-theme-toggle, .dark .qy-small-button, .qy-home[data-qy-theme="dark"] .qy-theme-toggle, .qy-home[data-qy-theme="dark"] .qy-small-button { background: rgba(255, 255, 255, 0.06); } .qy-theme-toggle { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px; font-size: 12px; font-weight: 650; } .qy-theme-toggle:hover, .qy-small-button:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--qy-primary) 38%, var(--qy-line)); background: rgba(255, 255, 255, 0.68); } .dark .qy-theme-toggle:hover, .dark .qy-small-button:hover, .qy-home[data-qy-theme="dark"] .qy-theme-toggle:hover, .qy-home[data-qy-theme="dark"] .qy-small-button:hover { background: rgba(255, 255, 255, 0.1); } .qy-small-button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 15px; font-size: 13px; font-weight: 700; color: var(--qy-primary-strong); } .qy-hero { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(340px, 0.78fr); gap: clamp(28px, 5vw, 58px); align-items: center; padding: clamp(92px, 8vw, 134px) 0 clamp(42px, 7vw, 78px); } .qy-eyebrow { display: inline-flex; align-items: center; gap: 9px; width: fit-content; margin-bottom: 18px; padding: 8px 11px 8px 8px; border: 1px solid var(--qy-line); border-radius: 999px; background: var(--qy-card); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.44); color: var(--qy-muted); font-size: 12px; font-weight: 650; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .qy-pulse { width: 23px; height: 23px; border-radius: 50%; background: radial-gradient(circle, var(--qy-cyan) 0 28%, rgba(116, 215, 223, 0.2) 31% 58%, transparent 61%); box-shadow: 0 0 0 6px rgba(116, 215, 223, 0.08); } .qy-title { max-width: 760px; margin: 0; color: var(--qy-text); font-size: clamp(42px, 7.4vw, 86px); line-height: 0.95; letter-spacing: -0.075em; font-weight: 820; } .qy-title .qy-gradient-text { display: inline-block; color: transparent; background: linear-gradient(110deg, var(--qy-primary-strong), #6d8ff6 45%, var(--qy-accent) 88%); -webkit-background-clip: text; background-clip: text; } .dark .qy-title .qy-gradient-text, .qy-home[data-qy-theme="dark"] .qy-title .qy-gradient-text { background: linear-gradient(110deg, var(--qy-primary), #b7c7ff 45%, var(--qy-accent) 88%); -webkit-background-clip: text; background-clip: text; } .qy-lede { max-width: 640px; margin: 24px 0 0; color: var(--qy-muted); font-size: clamp(16px, 2vw, 19px); line-height: 1.85; } .qy-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; } .qy-button-primary, .qy-button-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 20px; border-radius: 999px; font-size: 14px; font-weight: 760; transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease, background 0.24s ease; } .qy-button-primary { color: #fff; border: 1px solid rgba(17, 93, 104, 0.28); background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0)), linear-gradient(135deg, #115d68, #238995 52%, #7c6f52); box-shadow: 0 18px 36px rgba(29, 127, 140, 0.26); } .qy-button-ghost { color: var(--qy-text); border: 1px solid var(--qy-line-strong); background: var(--qy-card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .qy-button-primary:hover, .qy-button-ghost:hover { transform: translateY(-2px); box-shadow: var(--qy-shadow-soft); } .qy-trust-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; } .qy-trust-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--qy-line); border-radius: 999px; background: rgba(255, 255, 255, 0.34); color: var(--qy-muted); font-size: 12px; font-weight: 630; } .dark .qy-trust-chip, .qy-home[data-qy-theme="dark"] .qy-trust-chip { background: rgba(255, 255, 255, 0.045); } .qy-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--qy-primary); box-shadow: 0 0 16px rgba(116, 215, 223, 0.9); } .qy-console { position: relative; padding: 13px; border: 1px solid var(--qy-line-strong); border-radius: 32px; background: linear-gradient(150deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.34)); box-shadow: var(--qy-shadow); backdrop-filter: blur(28px) saturate(145%); -webkit-backdrop-filter: blur(28px) saturate(145%); } .dark .qy-console, .qy-home[data-qy-theme="dark"] .qy-console { background: linear-gradient(150deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.035)); } .qy-console::before { content: ""; position: absolute; inset: 16px auto auto -34px; width: 74px; height: 74px; border-radius: 26px; background: linear-gradient(135deg, rgba(199, 159, 98, 0.22), rgba(116, 215, 223, 0.2)); filter: blur(18px); opacity: 0.9; z-index: -1; } .qy-console-inner { overflow: hidden; border: 1px solid var(--qy-line); border-radius: 24px; background: var(--qy-bg-solid); } .qy-console-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 16px; border-bottom: 1px solid var(--qy-line); } .qy-window-dots { display: flex; gap: 7px; } .qy-window-dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--qy-line-strong); } .qy-window-dots span:nth-child(1) { background: #e8a4a0; } .qy-window-dots span:nth-child(2) { background: #e3c16f; } .qy-window-dots span:nth-child(3) { background: #8ad6a4; } .qy-status-pill { display: inline-flex; align-items: center; gap: 7px; color: var(--qy-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; } .qy-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #2dcf83; box-shadow: 0 0 0 5px rgba(45, 207, 131, 0.12), 0 0 18px rgba(45, 207, 131, 0.7); } .qy-console-body { padding: 18px; } .qy-metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; } .qy-mini-metric { min-width: 0; padding: 12px; border: 1px solid var(--qy-line); border-radius: 17px; background: color-mix(in srgb, var(--qy-card) 82%, transparent); } .qy-mini-metric span { display: block; color: var(--qy-faint); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .qy-mini-metric strong { display: block; margin-top: 7px; font-size: 20px; line-height: 1; letter-spacing: -0.06em; } .qy-route-card { padding: 15px; border: 1px solid var(--qy-line); border-radius: 20px; background: linear-gradient(135deg, rgba(116, 215, 223, 0.08), transparent 42%), color-mix(in srgb, var(--qy-card-strong) 88%, transparent); } .qy-route-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .qy-route-head span { color: var(--qy-faint); font-size: 11px; font-weight: 720; letter-spacing: 0.14em; text-transform: uppercase; } .qy-model-stack { display: grid; gap: 9px; } .qy-model-row { display: grid; grid-template-columns: 94px minmax(0, 1fr) auto; align-items: center; gap: 10px; color: var(--qy-muted); font-size: 12px; } .qy-model-row strong { color: var(--qy-text); font-size: 12px; } .qy-bar { position: relative; height: 7px; overflow: hidden; border-radius: 999px; background: rgba(127, 143, 162, 0.14); } .qy-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--qy-primary), var(--qy-blue)); } .qy-code-card { margin-top: 12px; padding: 15px; border: 1px solid var(--qy-line); border-radius: 20px; background: rgba(10, 14, 20, 0.92); color: #d8edf0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); } .qy-code-card code { display: block; overflow-wrap: anywhere; white-space: pre-wrap; color: inherit; background: transparent; padding: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11.5px; line-height: 1.68; } .qy-code-card .qy-code-muted { color: #7c8b99; } .qy-code-card .qy-code-key { color: #9ee7f1; } .qy-code-card .qy-code-string { color: #e7c989; } .qy-section { padding: clamp(48px, 8vw, 88px) 0; } .qy-section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; } .qy-section-kicker { margin: 0 0 10px; color: var(--qy-primary-strong); font-size: 12px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; } .qy-section-title { margin: 0; max-width: 620px; font-size: clamp(28px, 4.4vw, 48px); line-height: 1.05; letter-spacing: -0.055em; font-weight: 820; } .qy-section-desc { max-width: 380px; margin: 0; color: var(--qy-muted); font-size: 14px; line-height: 1.75; } .qy-stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 14px; border: 1px solid var(--qy-line); border-radius: var(--qy-radius-lg); background: var(--qy-card); box-shadow: var(--qy-shadow-soft); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); } .qy-stat { min-height: 116px; padding: 18px; border: 1px solid var(--qy-line); border-radius: 20px; background: color-mix(in srgb, var(--qy-bg-solid) 76%, transparent); } .qy-stat strong { display: block; font-size: clamp(28px, 4vw, 42px); line-height: 1; letter-spacing: -0.07em; } .qy-stat span { display: block; margin-top: 12px; color: var(--qy-muted); font-size: 13px; line-height: 1.55; } .qy-feature-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 14px; } .qy-card { position: relative; overflow: hidden; min-height: 260px; padding: clamp(22px, 3vw, 30px); border: 1px solid var(--qy-line); border-radius: var(--qy-radius-lg); background: var(--qy-card); box-shadow: var(--qy-shadow-soft); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); } .qy-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), transparent 42%); opacity: 0.8; } .dark .qy-card::after, .qy-home[data-qy-theme="dark"] .qy-card::after { opacity: 0.22; } .qy-card-content { position: relative; z-index: 1; } .qy-card-label { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; color: var(--qy-faint); font-size: 11px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; } .qy-card-label::before { content: ""; width: 22px; height: 1px; background: var(--qy-accent); } .qy-card h3 { margin: 0; font-size: clamp(22px, 3vw, 31px); line-height: 1.12; letter-spacing: -0.045em; } .qy-card p { margin: 14px 0 0; color: var(--qy-muted); font-size: 14px; line-height: 1.78; } .qy-model-cloud { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; } .qy-model-cloud span { padding: 10px 13px; border: 1px solid var(--qy-line); border-radius: 999px; background: rgba(255, 255, 255, 0.42); color: var(--qy-muted); font-size: 12px; font-weight: 700; } .dark .qy-model-cloud span, .qy-home[data-qy-theme="dark"] .qy-model-cloud span { background: rgba(255, 255, 255, 0.045); } .qy-card-wide { grid-column: span 2; min-height: 220px; background: radial-gradient(circle at 84% 28%, rgba(116, 215, 223, 0.15), transparent 28%), var(--qy-card); } .qy-orbit { position: absolute; right: clamp(20px, 5vw, 64px); bottom: 26px; width: 210px; height: 150px; opacity: 0.92; } .qy-orbit span { position: absolute; display: grid; place-items: center; border: 1px solid var(--qy-line); border-radius: 999px; background: var(--qy-bg-solid); color: var(--qy-muted); font-size: 11px; font-weight: 760; box-shadow: 0 12px 28px rgba(31, 42, 58, 0.08); } .qy-orbit span:nth-child(1) { inset: 10px auto auto 70px; width: 74px; height: 74px; color: var(--qy-primary-strong); } .qy-orbit span:nth-child(2) { inset: 78px auto auto 8px; width: 56px; height: 56px; } .qy-orbit span:nth-child(3) { inset: 84px 18px auto auto; width: 62px; height: 62px; } .qy-orbit span:nth-child(4) { inset: 2px 0 auto auto; width: 44px; height: 44px; color: var(--qy-accent); } .qy-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .qy-step { padding: 22px; border: 1px solid var(--qy-line); border-radius: var(--qy-radius-lg); background: color-mix(in srgb, var(--qy-card) 84%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .qy-step-num { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-bottom: 22px; border: 1px solid var(--qy-line-strong); border-radius: 14px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.24)); color: var(--qy-primary-strong); font-size: 13px; font-weight: 840; } .dark .qy-step-num, .qy-home[data-qy-theme="dark"] .qy-step-num { background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)); } .qy-step h3 { margin: 0; font-size: 18px; letter-spacing: -0.03em; } .qy-step p { margin: 10px 0 0; color: var(--qy-muted); font-size: 13px; line-height: 1.75; } .qy-cta { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: clamp(26px, 5vw, 42px); border: 1px solid var(--qy-line); border-radius: var(--qy-radius-xl); background: radial-gradient(circle at 76% 28%, rgba(116, 215, 223, 0.18), transparent 30%), radial-gradient(circle at 20% 82%, rgba(199, 159, 98, 0.13), transparent 28%), var(--qy-card-strong); box-shadow: var(--qy-shadow); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); } .qy-cta h2 { margin: 0; font-size: clamp(28px, 4vw, 46px); line-height: 1.08; letter-spacing: -0.055em; } .qy-cta p { max-width: 570px; margin: 14px 0 0; color: var(--qy-muted); font-size: 14px; line-height: 1.8; } .qy-footer { display: flex; justify-content: space-between; gap: 18px; padding: 30px 0 6px; color: var(--qy-faint); font-size: 12px; line-height: 1.8; } .qy-footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; } .qy-footer a:hover { color: var(--qy-text); text-decoration: underline; text-underline-offset: 4px; } @media (max-width: 920px) { .qy-nav-links { display: none; } .qy-hero { grid-template-columns: 1fr; } .qy-console { max-width: 620px; } .qy-section-head { align-items: start; flex-direction: column; } .qy-stat-strip { grid-template-columns: repeat(2, 1fr); } .qy-feature-grid { grid-template-columns: 1fr; } .qy-card-wide { grid-column: auto; } .qy-orbit { position: relative; right: auto; bottom: auto; margin-top: 24px; } .qy-steps { grid-template-columns: 1fr; } .qy-cta { grid-template-columns: 1fr; } } @media (max-width: 640px) { .qy-shell { padding-inline: 14px; } .qy-shell::before { inset-inline: -14px; border-radius: 34px; } .qy-nav { border-radius: 24px; align-items: stretch; } .qy-brand-sub { display: none; } .qy-small-button { display: none; } .qy-theme-toggle { width: 42px; padding: 0; justify-content: center; } .qy-theme-toggle span { display: none; } .qy-hero { padding-top: 82px; } .qy-title { font-size: clamp(40px, 16vw, 62px); } .qy-hero-actions { align-items: stretch; flex-direction: column; } .qy-button-primary, .qy-button-ghost { width: 100%; } .qy-metric-grid { grid-template-columns: 1fr; } .qy-model-row { grid-template-columns: 82px minmax(0, 1fr); } .qy-model-row small { display: none; } .qy-stat-strip { grid-template-columns: 1fr; padding: 10px; } .qy-card { min-height: auto; } .qy-footer { flex-direction: column; } .qy-footer-links { justify-content: flex-start; } } @media (prefers-reduced-motion: no-preference) { .qy-fade-up { animation: qyFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; } .qy-delay-1 { animation-delay: 0.08s; } .qy-delay-2 { animation-delay: 0.16s; } .qy-delay-3 { animation-delay: 0.24s; } .qy-delay-4 { animation-delay: 0.32s; } .qy-console { animation: qyFloat 6s ease-in-out infinite; } } @keyframes qyFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes qyFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } </style> <div class="qy-shell"> <section class="qy-hero" aria-labelledby="qy-hero-title"> <div class="qy-hero-copy"> <div class="qy-eyebrow qy-fade-up qy-delay-1"> <span class="qy-pulse" aria-hidden="true"></span> <span>轻量、稳定、面向未来的 AI 入口</span> </div> <h1 id="qy-hero-title" class="qy-title qy-fade-up qy-delay-2"> 让每一次调用，<br><span class="qy-gradient-text">都清澈而高效。</span> </h1> <p class="qy-lede qy-fade-up qy-delay-3"> 清羽AI 将模型接入、用量观测、密钥管理与 API 分发整理成一个优雅的工作台。少一点复杂配置，多一点稳定体验。 </p> <div class="qy-hero-actions qy-fade-up qy-delay-4"> <a class="qy-button-primary" href="/dashboard">开始使用 <span aria-hidden="true">→</span></a> <a class="qy-button-ghost" href="/pricing">浏览模型广场</a> </div> <div class="qy-trust-row qy-fade-up qy-delay-4" aria-label="平台能力摘要"> <span class="qy-trust-chip"><i class="qy-dot" aria-hidden="true"></i> 多模型统一接入</span> <span class="qy-trust-chip"><i class="qy-dot" aria-hidden="true"></i> 透明用量计费</span> <span class="qy-trust-chip"><i class="qy-dot" aria-hidden="true"></i> 细粒度密钥管理</span> </div> </div> <aside class="qy-console qy-fade-up qy-delay-3" aria-label="清羽AI 状态仪表盘示意"> <div class="qy-console-inner"> <div class="qy-console-top"> <div class="qy-window-dots" aria-hidden="true"><span></span><span></span><span></span></div> <div class="qy-status-pill"><i class="qy-live-dot" aria-hidden="true"></i> all systems refined</div> </div> <div class="qy-console-body"> <div class="qy-metric-grid"> <div class="qy-mini-metric"><span>Latency</span><strong>82ms</strong></div> <div class="qy-mini-metric"><span>Uptime</span><strong>99.9%</strong></div> <div class="qy-mini-metric"><span>Routes</span><strong>50+</strong></div> </div> <div class="qy-route-card"> <div class="qy-route-head"> <span>model routing</span> <span>live</span> </div> <div class="qy-model-stack"> <div class="qy-model-row"><strong>Claude</strong><span class="qy-bar"><i style="width: 86%"></i></span><small>86%</small></div> <div class="qy-model-row"><strong>Gemini</strong><span class="qy-bar"><i style="width: 72%"></i></span><small>72%</small></div> <div class="qy-model-row"><strong>DeepSeek</strong><span class="qy-bar"><i style="width: 64%"></i></span><small>64%</small></div> <div class="qy-model-row"><strong>Qwen</strong><span class="qy-bar"><i style="width: 58%"></i></span><small>58%</small></div> </div> </div> <div class="qy-code-card" aria-label="API 调用示例"> <code><span class="qy-code-muted">POST</span> <span class="qy-code-key">/v1/chat/completions</span> { <span class="qy-code-key">"model"</span>: <span class="qy-code-string">"qingyu-auto"</span>, <span class="qy-code-key">"stream"</span>: true, <span class="qy-code-key">"quality"</span>: <span class="qy-code-string">"balanced"</span> }</code> </div> </div> </div> </aside> </section> <section class="qy-section" aria-label="平台指标"> <div class="qy-stat-strip"> <div class="qy-stat"><strong>50+</strong><span>主流上游服务与模型渠道统一适配</span></div> <div class="qy-stat"><strong>100+</strong><span>模型计费、限额与倍率策略灵活管理</span></div> <div class="qy-stat"><strong>10+</strong><span>调度、监控、权限与审计能力协同工作</span></div> <div class="qy-stat"><strong>24/7</strong><span>面向真实业务流量的稳定访问体验</span></div> </div> </section> <section class="qy-section" aria-labelledby="qy-feature-title"> <div class="qy-section-head"> <div> <p class="qy-section-kicker">core system</p> <h2 id="qy-feature-title" class="qy-section-title">高级感来自秩序，而不是堆满元素。</h2> </div> <p class="qy-section-desc">清羽AI 把复杂能力收束成清晰界面：路由清楚、账单清楚、密钥清楚，团队与个人都能快速上手。</p> </div> <div class="qy-feature-grid"> <article class="qy-card qy-card-wide"> <div class="qy-card-content"> <span class="qy-card-label">Unified Gateway</span> <h3>一个入口，连接不同模型生态。</h3> <p>兼容常见 API 工作流，让应用无需频繁改造就能在多个模型之间切换、降级与调度。</p> <div class="qy-model-cloud" aria-label="支持模型示例"> <span>OpenAI</span><span>Claude</span><span>Gemini</span><span>DeepSeek</span><span>Qwen</span><span>Llama</span> </div> </div> <div class="qy-orbit" aria-hidden="true"><span>API</span><span>Key</span><span>Log</span><span>AI</span></div> </article> <article class="qy-card"> <div class="qy-card-content"> <span class="qy-card-label">Cost Clarity</span> <h3>用量与成本，不再藏在黑箱里。</h3> <p>通过清晰的消耗记录、倍率配置和额度控制，让每一次请求都可追踪、可理解、可优化。</p> </div> </article> <article class="qy-card"> <div class="qy-card-content"> <span class="qy-card-label">Access Control</span> <h3>密钥、权限与团队协作保持克制有序。</h3> <p>为个人项目保留轻量体验，也为多人协作准备权限边界、访问限制与安全策略。</p> </div> </article> </div> </section> <section class="qy-section" aria-labelledby="qy-flow-title"> <div class="qy-section-head"> <div> <p class="qy-section-kicker">workflow</p> <h2 id="qy-flow-title" class="qy-section-title">三步建立自己的 AI 工作流。</h2> </div> </div> <div class="qy-steps"> <article class="qy-step"> <span class="qy-step-num">01</span> <h3>接入渠道</h3> <p>添加上游模型服务，配置密钥、倍率与可用范围，建立统一的模型资源池。</p> </article> <article class="qy-step"> <span class="qy-step-num">02</span> <h3>分发请求</h3> <p>使用统一 API 入口连接你的应用，让模型调用、路由切换和策略调整更加平滑。</p> </article> <article class="qy-step"> <span class="qy-step-num">03</span> <h3>观察优化</h3> <p>通过用量、延迟与成本数据持续调整策略，获得更稳定也更经济的调用体验。</p> </article> </div> </section> <section class="qy-section" aria-label="开始使用清羽AI"> <div class="qy-cta"> <div> <h2>把复杂留给系统，把清爽留给使用者。</h2> <p>清羽AI 适合个人开发者、轻量团队与 AI 应用探索者。它不追求喧闹，而是把每个必要能力打磨得足够清晰。</p> </div> <a class="qy-button-primary" href="/dashboard">进入清羽AI <span aria-hidden="true">→</span></a> </div> </section> <footer class="qy-footer"> <div> <strong>清羽AI</strong><br> <span>© 2026 清羽飞扬。保留所有权利。</span> </div> <div class="qy-footer-links"> <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">陕ICP备2024028531号</a> <a href="https://beian.gov.cn/portal/registerSystemInfo?recordcode=61011602000637" target="_blank" rel="noopener noreferrer">陕公网安备61011602000637号</a> </div> </footer> </div> <script> (() => { const root = document.currentScript.closest('.qy-home'); if (!root) return; const storageKey = 'qingyu-ai-theme'; const applyTheme = (theme) => { root.setAttribute('data-qy-theme', theme); if (theme === 'dark') document.documentElement.classList.add('dark'); if (theme === 'light') document.documentElement.classList.remove('dark'); }; const saved = localStorage.getItem(storageKey); const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; applyTheme(saved || (prefersDark ? 'dark' : 'light')); })(); </script> </div>