922 lines
41 KiB
HTML
922 lines
41 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>菲西尔智能 · 企业级AI落地专家</title>
|
||
<meta name="description" content="不换系统，2周让AI上岗。市场部缺线索、生产部忙不过来、老板要报表、财务对账头大——在现有工具上叠加AI能力，快速见效。">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://cdn.jsdelivr.net/npm/geist@1/dist/fonts/geist-sans/style.css" rel="stylesheet">
|
||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
|
||
<style>
|
||
:root {
|
||
--bg: #ffffff;
|
||
--bg-soft: #f8f9fb;
|
||
--bg-mute: #f1f2f5;
|
||
--text-1: #0f172a;
|
||
--text-2: #475569;
|
||
--text-3: #94a3b8;
|
||
--brand: #2563eb;
|
||
--brand-light: #3b82f6;
|
||
--brand-dark: #1d4ed8;
|
||
--brand-soft: rgba(37, 99, 235, 0.08);
|
||
--divider: rgba(148, 163, 184, 0.2);
|
||
--shadow-1: 0 1px 2px rgba(0,0,0,0.04);
|
||
--shadow-2: 0 4px 16px rgba(0,0,0,0.06);
|
||
--shadow-3: 0 12px 40px rgba(0,0,0,0.1);
|
||
--radius: 8px;
|
||
--radius-lg: 16px;
|
||
--max-width: 1200px;
|
||
--header-height: 64px;
|
||
--transition: 0.25s ease;
|
||
}
|
||
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
|
||
body {
|
||
font-family: 'Geist Sans', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||
background: var(--bg); color: var(--text-1); line-height: 1.6;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
html { scroll-behavior: auto; }
|
||
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
|
||
}
|
||
|
||
/* ========== HEADER ========== */
|
||
.header {
|
||
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
||
height: var(--header-height); background: rgba(255,255,255,0.8);
|
||
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
|
||
border-bottom: 1px solid var(--divider);
|
||
transition: box-shadow var(--transition);
|
||
}
|
||
.header.scrolled { box-shadow: var(--shadow-1); }
|
||
.header-inner {
|
||
max-width: var(--max-width); margin: 0 auto; height: 100%;
|
||
padding: 0 32px; display: flex; align-items: center; justify-content: space-between;
|
||
}
|
||
.logo {
|
||
display: flex; align-items: center; text-decoration: none; gap: 10px;
|
||
}
|
||
.logo img { height: 28px; width: auto; }
|
||
.logo span {
|
||
font-family: 'Space Grotesk', sans-serif; font-size: 18px;
|
||
font-weight: 700; color: var(--text-1); letter-spacing: -0.02em;
|
||
}
|
||
.nav-links { display: flex; gap: 32px; align-items: center; }
|
||
.nav-links a {
|
||
font-size: 14px; font-weight: 500; color: var(--text-1);
|
||
text-decoration: none; transition: color var(--transition);
|
||
}
|
||
.nav-links a:hover { color: var(--brand); }
|
||
.nav-cta {
|
||
padding: 8px 18px; background: var(--brand); color: #ffffff !important;
|
||
border-radius: 100px; font-size: 13px; font-weight: 600;
|
||
text-decoration: none; transition: all var(--transition);
|
||
}
|
||
.nav-cta:hover { background: var(--brand-dark); transform: translateY(-1px); }
|
||
|
||
/* ========== HERO ========== */
|
||
.hero {
|
||
padding-top: var(--header-height);
|
||
background: var(--bg);
|
||
position: relative; overflow: hidden;
|
||
min-height: 100dvh; display: flex; align-items: center;
|
||
}
|
||
.hero-inner {
|
||
max-width: var(--max-width); margin: 0 auto; padding: 60px 32px;
|
||
display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: center;
|
||
width: 100%;
|
||
}
|
||
.hero-badge {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
padding: 6px 14px; background: var(--brand-soft);
|
||
border-radius: 100px; font-size: 13px; font-weight: 600;
|
||
color: var(--brand); margin-bottom: 24px;
|
||
}
|
||
.hero-badge::before {
|
||
content: ''; width: 6px; height: 6px; background: var(--brand);
|
||
border-radius: 50%;
|
||
}
|
||
.hero-title {
|
||
font-family: 'Space Grotesk', 'Noto Sans SC', sans-serif;
|
||
font-size: clamp(40px, 5vw, 64px); font-weight: 700;
|
||
line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 24px;
|
||
}
|
||
.hero-title .brand { color: var(--brand); }
|
||
.hero-desc {
|
||
font-size: 18px; color: var(--text-2); line-height: 1.7;
|
||
margin-bottom: 40px; max-width: 480px;
|
||
}
|
||
.hero-cta-group { display: flex; gap: 16px; flex-wrap: wrap; }
|
||
.btn {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
padding: 14px 28px; font-size: 15px; font-weight: 600;
|
||
border-radius: 100px; text-decoration: none; cursor: pointer;
|
||
border: none; transition: all var(--transition);
|
||
}
|
||
.btn-primary {
|
||
background: var(--brand); color: #fff;
|
||
box-shadow: 0 1px 3px rgba(37,99,235,0.3);
|
||
}
|
||
.btn-primary:hover {
|
||
background: var(--brand-dark); transform: translateY(-2px);
|
||
box-shadow: var(--shadow-2);
|
||
}
|
||
.btn-secondary {
|
||
background: transparent; color: var(--text-1);
|
||
border: 1px solid var(--divider);
|
||
}
|
||
.btn-secondary:hover { background: var(--bg-soft); border-color: var(--text-3); }
|
||
|
||
.hero-visual {
|
||
background: var(--bg); border: 1px solid var(--divider);
|
||
border-radius: var(--radius-lg); overflow: hidden;
|
||
box-shadow: var(--shadow-3);
|
||
}
|
||
.hero-visual-header {
|
||
padding: 12px 16px; background: var(--bg-soft);
|
||
border-bottom: 1px solid var(--divider);
|
||
display: flex; align-items: center; gap: 8px;
|
||
}
|
||
.hero-visual-dot { width: 10px; height: 10px; border-radius: 50%; }
|
||
.hero-visual-dot.r { background: #ff5f57; }
|
||
.hero-visual-dot.y { background: #febc2e; }
|
||
.hero-visual-dot.g { background: #28c840; }
|
||
.hero-visual-body { padding: 20px; font-family: 'JetBrains Mono', monospace; font-size: 13px; }
|
||
.code-line { display: flex; gap: 16px; margin-bottom: 8px; }
|
||
.code-num { color: var(--text-3); min-width: 24px; text-align: right; user-select: none; }
|
||
.code-content { color: var(--text-2); }
|
||
.code-keyword { color: #cf222e; }
|
||
.code-string { color: #0a3069; }
|
||
.code-func { color: #8250df; }
|
||
.code-comment { color: #6e7781; }
|
||
|
||
/* ========== FEATURES ========== */
|
||
.features {
|
||
padding: 140px 32px; max-width: var(--max-width); margin: 0 auto;
|
||
}
|
||
.features-header { max-width: 600px; margin-bottom: 80px; }
|
||
.features-header h2 {
|
||
font-family: 'Space Grotesk', sans-serif; font-size: 36px;
|
||
font-weight: 700; margin-bottom: 16px; letter-spacing: -0.02em;
|
||
}
|
||
.features-header p { color: var(--text-2); font-size: 18px; line-height: 1.6; }
|
||
.features-grid {
|
||
display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px;
|
||
}
|
||
.feature-card {
|
||
padding: 40px; background: var(--bg);
|
||
border: 1px solid var(--divider); border-radius: var(--radius-lg);
|
||
transition: all var(--transition);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.feature-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0; left: 0; right: 0;
|
||
height: 3px;
|
||
background: var(--brand);
|
||
opacity: 0;
|
||
transition: opacity var(--transition);
|
||
}
|
||
.feature-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: var(--shadow-3);
|
||
border-color: rgba(37,99,235,0.15);
|
||
}
|
||
.feature-card:hover::before {
|
||
opacity: 1;
|
||
}
|
||
.feature-card:nth-child(1) { grid-column: span 7; }
|
||
.feature-card:nth-child(2) { grid-column: span 5; }
|
||
.feature-card:nth-child(3) { grid-column: span 4; }
|
||
.feature-card:nth-child(4) { grid-column: span 4; }
|
||
.feature-card:nth-child(5) { grid-column: span 4; }
|
||
.feature-card:nth-child(6) { grid-column: span 12; }
|
||
.feature-icon {
|
||
width: 48px; height: 48px; border-radius: 12px;
|
||
background: rgba(37,99,235,0.08);
|
||
display: flex; align-items: center;
|
||
justify-content: center; margin-bottom: 20px;
|
||
transition: all var(--transition);
|
||
}
|
||
.feature-card:hover .feature-icon {
|
||
background: var(--brand);
|
||
transform: scale(1.05);
|
||
}
|
||
.feature-icon svg { width: 24px; height: 24px; color: var(--brand); transition: color var(--transition); }
|
||
.feature-card:hover .feature-icon svg { color: #fff; }
|
||
.feature-card h3 {
|
||
font-family: 'Space Grotesk', sans-serif; font-size: 20px;
|
||
font-weight: 600; margin-bottom: 10px;
|
||
}
|
||
.feature-card p { font-size: 15px; color: var(--text-2); line-height: 1.6; }
|
||
|
||
/* ========== SERVICES ========== */
|
||
.services { background: var(--bg-soft); padding: 140px 32px; }
|
||
.services-inner { max-width: var(--max-width); margin: 0 auto; }
|
||
.services-header { max-width: 600px; margin-bottom: 80px; }
|
||
.services-header h2 {
|
||
font-family: 'Space Grotesk', sans-serif; font-size: 36px;
|
||
font-weight: 700; margin-bottom: 16px; letter-spacing: -0.02em;
|
||
}
|
||
.services-header p { color: var(--text-2); font-size: 18px; }
|
||
|
||
.service-showcase {
|
||
display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.service-showcase-card {
|
||
padding: 48px; background: var(--bg);
|
||
border: 1px solid var(--divider); border-radius: var(--radius-lg);
|
||
transition: all var(--transition);
|
||
}
|
||
.service-showcase-card:hover {
|
||
box-shadow: var(--shadow-2); border-color: rgba(37,99,235,0.2);
|
||
}
|
||
.service-showcase-card .tag {
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
font-size: 13px; font-weight: 600; color: var(--brand); margin-bottom: 20px;
|
||
}
|
||
.service-showcase-card .tag::before {
|
||
content: ''; width: 6px; height: 6px; background: var(--brand);
|
||
border-radius: 50%;
|
||
}
|
||
.service-showcase-card h3 {
|
||
font-family: 'Space Grotesk', 'Noto Sans SC', sans-serif;
|
||
font-size: 28px; font-weight: 700; margin-bottom: 16px;
|
||
}
|
||
.service-showcase-card p { color: var(--text-2); line-height: 1.7; margin-bottom: 32px; font-size: 15px; }
|
||
.service-metrics { display: flex; gap: 40px; }
|
||
.service-metrics .metric h4 {
|
||
font-family: 'Space Grotesk', sans-serif; font-size: 32px;
|
||
font-weight: 700; color: var(--brand); margin-bottom: 4px;
|
||
}
|
||
.service-metrics .metric span { font-size: 13px; color: var(--text-3); }
|
||
|
||
.service-cards {
|
||
display: grid; grid-template-columns: 3fr 2fr; gap: 20px;
|
||
}
|
||
.service-card {
|
||
padding: 40px; background: var(--bg);
|
||
border: 1px solid var(--divider); border-radius: var(--radius-lg);
|
||
}
|
||
.service-card.highlight {
|
||
background: linear-gradient(135deg, var(--brand-soft) 0%, var(--bg) 100%);
|
||
}
|
||
.service-card .tag {
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
font-size: 13px; font-weight: 600; color: var(--brand); margin-bottom: 16px;
|
||
}
|
||
.service-card .tag::before {
|
||
content: ''; width: 6px; height: 6px; background: var(--brand);
|
||
border-radius: 50%;
|
||
}
|
||
.service-card h3 {
|
||
font-family: 'Space Grotesk', 'Noto Sans SC', sans-serif;
|
||
font-size: 22px; font-weight: 700; margin-bottom: 12px;
|
||
}
|
||
.service-card p { color: var(--text-2); line-height: 1.6; font-size: 15px; }
|
||
|
||
/* ========== HOW IT WORKS ========== */
|
||
.how {
|
||
padding: 140px 32px; max-width: var(--max-width); margin: 0 auto;
|
||
}
|
||
.how-header { max-width: 600px; margin-bottom: 80px; }
|
||
.how-header h2 {
|
||
font-family: 'Space Grotesk', sans-serif; font-size: 36px;
|
||
font-weight: 700; margin-bottom: 16px; letter-spacing: -0.02em;
|
||
}
|
||
.how-header p { color: var(--text-2); font-size: 18px; }
|
||
.how-steps {
|
||
display: flex; gap: 0; position: relative;
|
||
}
|
||
.how-steps::before {
|
||
content: ''; position: absolute; top: 24px; left: 0; right: 0;
|
||
height: 1px; background: var(--divider); z-index: 0;
|
||
}
|
||
.step {
|
||
flex: 1; padding: 0 24px; position: relative; z-index: 1;
|
||
}
|
||
.step:first-child { padding-left: 0; }
|
||
.step:last-child { padding-right: 0; }
|
||
.step-dot {
|
||
width: 48px; height: 48px; border-radius: 50%;
|
||
background: var(--bg); border: 2px solid var(--divider);
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-family: 'Space Grotesk', sans-serif; font-size: 16px;
|
||
font-weight: 700; color: var(--text-3); margin-bottom: 24px;
|
||
transition: all var(--transition);
|
||
}
|
||
.step:hover .step-dot {
|
||
border-color: var(--brand); color: var(--brand);
|
||
background: var(--brand-soft);
|
||
}
|
||
.step h4 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
|
||
.step p { font-size: 15px; color: var(--text-2); line-height: 1.6; }
|
||
|
||
/* ========== CTA ========== */
|
||
.cta {
|
||
padding: 140px 32px; max-width: var(--max-width); margin: 0 auto;
|
||
text-align: center;
|
||
}
|
||
.cta-box {
|
||
padding: 80px 60px; background: var(--text-1);
|
||
border-radius: var(--radius-lg); color: #fff;
|
||
}
|
||
.cta h2 {
|
||
font-family: 'Space Grotesk', 'Noto Sans SC', sans-serif;
|
||
font-size: 40px; font-weight: 700; margin-bottom: 16px;
|
||
}
|
||
.cta p { color: rgba(255,255,255,0.7); font-size: 18px; margin-bottom: 40px; }
|
||
.cta .btn-primary {
|
||
background: #fff; color: var(--text-1);
|
||
box-shadow: none;
|
||
}
|
||
.cta .btn-primary:hover { background: var(--bg-soft); }
|
||
|
||
/* ========== CONTACT FORM ========== */
|
||
.contact {
|
||
padding: 140px 32px;
|
||
background: var(--bg-soft);
|
||
}
|
||
.contact-inner {
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
}
|
||
.contact-header {
|
||
text-align: center;
|
||
margin-bottom: 64px;
|
||
}
|
||
.contact-header h2 {
|
||
font-family: 'Space Grotesk', 'Noto Sans SC', sans-serif;
|
||
font-size: 36px;
|
||
font-weight: 700;
|
||
margin-bottom: 16px;
|
||
}
|
||
.contact-header p {
|
||
color: var(--text-2);
|
||
font-size: 18px;
|
||
}
|
||
.contact-form {
|
||
background: var(--bg);
|
||
border: 1px solid var(--divider);
|
||
border-radius: var(--radius-lg);
|
||
padding: 48px;
|
||
}
|
||
.form-row {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 16px;
|
||
}
|
||
.name-row {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 12px;
|
||
}
|
||
.name-row .name-part {
|
||
display: grid;
|
||
grid-template-columns: 1fr 80px;
|
||
gap: 12px;
|
||
}
|
||
.contact-row {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 12px;
|
||
}
|
||
.checkbox-group {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 12px;
|
||
}
|
||
.form-group input,
|
||
.form-group select {
|
||
padding: 12px 16px;
|
||
font-size: 15px;
|
||
border: 1px solid var(--divider);
|
||
border-radius: var(--radius);
|
||
background: var(--bg);
|
||
color: var(--text-1);
|
||
transition: border-color 0.2s, box-shadow 0.2s;
|
||
box-sizing: border-box;
|
||
font-family: inherit;
|
||
width: 100%;
|
||
}
|
||
.form-group select {
|
||
appearance: none;
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
|
||
background-repeat: no-repeat;
|
||
background-position: right 12px center;
|
||
padding-right: 36px;
|
||
}
|
||
.form-group {
|
||
margin-bottom: 24px;
|
||
}
|
||
.form-group label {
|
||
display: block;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: var(--text-1);
|
||
margin-bottom: 8px;
|
||
}
|
||
.form-group input:focus,
|
||
.form-group select:focus {
|
||
outline: none;
|
||
border-color: var(--brand);
|
||
box-shadow: 0 0 0 3px var(--brand-soft);
|
||
}
|
||
.form-group input::placeholder {
|
||
color: var(--text-3);
|
||
}
|
||
.checkbox-group {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
}
|
||
.checkbox-label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
cursor: pointer;
|
||
padding: 10px 18px;
|
||
border: 1px solid var(--divider);
|
||
border-radius: 100px;
|
||
font-size: 14px;
|
||
color: var(--text-2);
|
||
transition: all 0.2s;
|
||
}
|
||
.checkbox-label:hover {
|
||
border-color: var(--brand);
|
||
color: var(--brand);
|
||
}
|
||
.checkbox-label input {
|
||
display: none;
|
||
}
|
||
.checkbox-label input:checked + span {
|
||
color: var(--brand);
|
||
}
|
||
.checkbox-label:has(input:checked) {
|
||
background: var(--brand-soft);
|
||
border-color: var(--brand);
|
||
}
|
||
.form-actions {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-top: 8px;
|
||
}
|
||
.btn-submit {
|
||
padding: 14px 48px;
|
||
font-size: 16px;
|
||
}
|
||
.form-message {
|
||
margin-top: 16px;
|
||
padding: 12px 16px;
|
||
border-radius: var(--radius);
|
||
font-size: 14px;
|
||
text-align: center;
|
||
display: none;
|
||
}
|
||
.form-message.success {
|
||
display: block;
|
||
background: #dcfce7;
|
||
color: #166534;
|
||
}
|
||
.form-message.error {
|
||
display: block;
|
||
background: #fee2e2;
|
||
color: #991b1b;
|
||
}
|
||
|
||
/* ========== FOOTER ========== */
|
||
.footer {
|
||
border-top: 1px solid var(--divider); padding: 48px 32px;
|
||
max-width: var(--max-width); margin: 0 auto;
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
}
|
||
.footer-left { font-size: 14px; color: var(--text-3); }
|
||
.footer-right { display: flex; gap: 24px; }
|
||
.footer-right a {
|
||
font-size: 14px; color: var(--text-2); text-decoration: none;
|
||
transition: color var(--transition);
|
||
}
|
||
.footer-right a:hover { color: var(--text-1); }
|
||
|
||
/* ========== RESPONSIVE ========== */
|
||
@media (max-width: 1024px) {
|
||
.hero-inner { grid-template-columns: 1fr; gap: 48px; }
|
||
.hero-visual { max-width: 600px; margin: 0 auto; }
|
||
.feature-card:nth-child(1),
|
||
.feature-card:nth-child(2),
|
||
.feature-card:nth-child(3),
|
||
.feature-card:nth-child(4),
|
||
.feature-card:nth-child(5),
|
||
.feature-card:nth-child(6) { grid-column: span 6; }
|
||
.feature-card:nth-child(6) { grid-template-columns: 1fr; }
|
||
.service-showcase { grid-template-columns: 1fr; }
|
||
.service-cards { grid-template-columns: 1fr; }
|
||
.how-steps { flex-direction: column; gap: 40px; }
|
||
.how-steps::before { display: none; }
|
||
.step { padding: 0; }
|
||
.step-dot { margin-bottom: 16px; }
|
||
}
|
||
@media (max-width: 768px) {
|
||
.nav-links { display: none; }
|
||
.feature-card:nth-child(n) { grid-column: span 12; }
|
||
.hero-title { font-size: 36px; }
|
||
.features-header h2, .services-header h2, .how-header h2, .contact-header h2 { font-size: 28px; }
|
||
.service-showcase-card { padding: 32px; }
|
||
.service-showcase-card h3 { font-size: 22px; }
|
||
.service-metrics { flex-direction: column; gap: 20px; }
|
||
.cta-box { padding: 48px 32px; }
|
||
.cta h2 { font-size: 28px; }
|
||
.form-row { grid-template-columns: 1fr; }
|
||
.contact-form { padding: 32px; }
|
||
.footer { flex-direction: column; gap: 16px; text-align: center; }
|
||
.checkbox-group { grid-template-columns: repeat(2, 1fr); }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Header -->
|
||
<header class="header" id="header">
|
||
<div class="header-inner">
|
||
<a href="#" class="logo">
|
||
<img src="assets/logo/logo-b-nav.png" alt="Fischer">
|
||
</a>
|
||
<nav class="nav-links">
|
||
<a href="#features">核心能力</a>
|
||
<a href="#services">解决方案</a>
|
||
<a href="#how">实施流程</a>
|
||
<a href="#contact" class="nav-cta">预约咨询</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Hero -->
|
||
<section class="hero">
|
||
<div class="hero-inner">
|
||
<div class="hero-text">
|
||
<div class="hero-badge">企业级AI落地专家</div>
|
||
<h1 class="hero-title">
|
||
不换系统<br>
|
||
<span class="brand">2周让AI上岗</span>
|
||
</h1>
|
||
<p class="hero-desc">
|
||
市场部缺线索、生产部忙不过来、老板要报表、财务对账头大——不用换系统，在现有工具上叠加AI能力，2周见效。
|
||
</p>
|
||
<div class="hero-cta-group">
|
||
<a href="#contact" class="btn btn-primary">预约30分钟免费诊断</a>
|
||
<a href="#services" class="btn btn-secondary">看看适合哪个部门</a>
|
||
</div>
|
||
</div>
|
||
<div class="hero-visual">
|
||
<div class="hero-visual-header">
|
||
<span class="hero-visual-dot r"></span>
|
||
<span class="hero-visual-dot y"></span>
|
||
<span class="hero-visual-dot g"></span>
|
||
<span style="margin-left:8px;font-size:12px;color:var(--text-3);">fischer-ai.js</span>
|
||
</div>
|
||
<div class="hero-visual-body">
|
||
<div class="code-line"><span class="code-num">1</span><span class="code-content"><span class="code-keyword">import</span> { FischerAI } <span class="code-keyword">from</span> <span class="code-string">'@fischer/ai-sdk'</span></span></div>
|
||
<div class="code-line"><span class="code-num">2</span><span class="code-content"></span></div>
|
||
<div class="code-line"><span class="code-num">3</span><span class="code-content"><span class="code-comment">// 连接现有系统，叠加AI能力</span></span></div>
|
||
<div class="code-line"><span class="code-num">4</span><span class="code-content"><span class="code-keyword">const</span> ai = <span class="code-keyword">new</span> <span class="code-func">FischerAI</span>({</span></div>
|
||
<div class="code-line"><span class="code-num">5</span><span class="code-content"> system: <span class="code-string">'property-mgmt'</span>,</span></div>
|
||
<div class="code-line"><span class="code-num">6</span><span class="code-content"> modules: [<span class="code-string">'dispatch'</span>, <span class="code-string">'alert'</span>, <span class="code-string">'report'</span>]</span></div>
|
||
<div class="code-line"><span class="code-num">7</span><span class="code-content">})</span></div>
|
||
<div class="code-line"><span class="code-num">8</span><span class="code-content"></span></div>
|
||
<div class="code-line"><span class="code-num">9</span><span class="code-content"><span class="code-comment">// 2周部署，立即见效</span></span></div>
|
||
<div class="code-line"><span class="code-num">10</span><span class="code-content">ai.<span class="code-func">deploy</span>({ timeline: <span class="code-string">'2weeks'</span> })</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Features -->
|
||
<div style="height: 1px; background: var(--divider);"></div>
|
||
<section class="features" id="features">
|
||
<div class="features-header">
|
||
<h2>为什么不用换系统</h2>
|
||
<p>在现有工具上加点东西，比推倒重来划算得多</p>
|
||
</div>
|
||
<div class="features-grid">
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
|
||
</div>
|
||
<h3>2周上线</h3>
|
||
<p>不用等半年实施周期。接个API，配置一下，两周就能用。不影响现有业务。</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
||
</div>
|
||
<h3>零风险</h3>
|
||
<p>数据不用搬，员工不用学新系统。原来怎么用现在还怎么用，只是多了个帮手。</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 5 15.34a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.66 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.66a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
|
||
</div>
|
||
<h3>按需扩展</h3>
|
||
<p>先在一个部门试点，效果好再推广。不用一次性买全套，用多少付多少。</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
|
||
</div>
|
||
<h3>即插即用</h3>
|
||
<p>支持主流业务系统。不用改造现有架构，像插U盘一样接上就能用。</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
|
||
</div>
|
||
<h3>越用越顺手</h3>
|
||
<p>基于你的真实业务数据，不是通用模板。用久了会发现它越来越懂你。</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||
</div>
|
||
<h3>不用维护</h3>
|
||
<p>我们负责后台更新和优化，你不用招专人维护。有问题找我们就行。</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Services -->
|
||
<section class="services" id="services">
|
||
<div class="services-inner">
|
||
<div class="services-header">
|
||
<h2>不同场景，不同解法</h2>
|
||
<p>看看你的业务适合哪种方案</p>
|
||
</div>
|
||
<div class="service-showcase">
|
||
<div class="service-showcase-card">
|
||
<span class="tag">智能获客 · 适合市场部、销售部</span>
|
||
<h3>线索不够？客户跟不过来？</h3>
|
||
<p>市场部写内容太慢、SEO没效果；销售部线索质量差、跟进不及时。我们用GEO优化让你的品牌出现在AI搜索结果里，同时给CRM加个智能层——自动清洗线索、提醒跟进、生成客户画像。</p>
|
||
<div class="service-metrics">
|
||
<div class="metric">
|
||
<h4>GEO优化</h4>
|
||
<span>被AI搜索优先推荐</span>
|
||
</div>
|
||
<div class="metric">
|
||
<h4>智能跟进</h4>
|
||
<span>线索不流失</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="service-showcase-card">
|
||
<span class="tag">智能增效 · 适合生产部、质检部</span>
|
||
<h3>产量上不去？质量问题反复？</h3>
|
||
<p>生产计划靠经验、设备坏了才修、质检漏检率高。我们在现有MES/ERP系统上加个智能层——预测设备故障提前修、自动排产减少换线、质检数据实时分析找规律。</p>
|
||
<div class="service-metrics">
|
||
<div class="metric">
|
||
<h4>预测维护</h4>
|
||
<span>减少停机时间</span>
|
||
</div>
|
||
<div class="metric">
|
||
<h4>智能排产</h4>
|
||
<span>提升设备利用率</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="service-cards">
|
||
<div class="service-card highlight">
|
||
<span class="tag">智能助手 · 适合财务部、人事行政</span>
|
||
<h3>对账对到眼花？表格做不完？</h3>
|
||
<p>财务月底对账要加班、报销单据堆成山；人事算考勤算绩效、行政管资产管采购，全是重复劳动。我们在现有财务/人事系统上加个自动化层——自动对账、智能报销审核、考勤异常自动标记、资产到期自动提醒。减少80%重复工作。</p>
|
||
</div>
|
||
<div class="service-card">
|
||
<span class="tag">智能洞察 · 适合老板、管理层</span>
|
||
<h3>报表等太久？决策靠感觉？</h3>
|
||
<p>我们把所有系统的数据接进来，老板随时问"这个月哪个区域利润最高""库存有没有风险"，秒出答案。不用等周报，不用催下属，打开手机就能看。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- How It Works -->
|
||
<section class="how" id="how">
|
||
<div class="how-header">
|
||
<h2>怎么开始？很简单</h2>
|
||
<p>从聊到用，最快2周</p>
|
||
</div>
|
||
<div class="how-steps">
|
||
<div class="step">
|
||
<div class="step-dot">1</div>
|
||
<h4>聊聊现状</h4>
|
||
<p>30分钟电话，说说你们现在用什么系统、哪个环节最头疼</p>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-dot">2</div>
|
||
<h4>出方案</h4>
|
||
<p>根据你的系统和痛点，定一个试点方案——先解决最急的问题</p>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-dot">3</div>
|
||
<h4>接上就用</h4>
|
||
<p>API对接现有系统，配置好逻辑，两周内上线。员工几乎无感。</p>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-dot">4</div>
|
||
<h4>看着变好</h4>
|
||
<p>用一段时间，效果出来了再扩展。不好用随时停，没沉没成本。</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA -->
|
||
<section class="cta">
|
||
<div class="cta-box">
|
||
<h2>先聊聊，不花钱</h2>
|
||
<p>30分钟电话，说说你们现在哪个环节最头疼。我们看看能不能帮上忙。</p>
|
||
<a href="#contact" class="btn btn-primary">预约免费诊断</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Contact Form -->
|
||
<section class="contact" id="contact">
|
||
<div class="contact-inner">
|
||
<div class="contact-header">
|
||
<h2>留下联系方式</h2>
|
||
<p>我们会尽快联系你，安排30分钟免费诊断</p>
|
||
</div>
|
||
<form class="contact-form" id="consultForm">
|
||
<div class="form-group">
|
||
<label>我怎么称呼您</label>
|
||
<div class="name-row">
|
||
<div class="name-part">
|
||
<input type="text" name="name" placeholder="姓氏" required>
|
||
<select name="title">
|
||
<option value="先生">先生</option>
|
||
<option value="女士">女士</option>
|
||
</select>
|
||
</div>
|
||
<input type="text" name="company" placeholder="公司名称">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>我怎么联系您</label>
|
||
<div class="contact-row">
|
||
<input type="tel" name="phone" placeholder="手机" required>
|
||
<input type="email" name="email" placeholder="邮箱">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>关注目标</label>
|
||
<div class="checkbox-group">
|
||
<label class="checkbox-label">
|
||
<input type="checkbox" name="concern" value="智能获客">
|
||
<span>智能获客</span>
|
||
</label>
|
||
<label class="checkbox-label">
|
||
<input type="checkbox" name="concern" value="智能增效">
|
||
<span>智能增效</span>
|
||
</label>
|
||
<label class="checkbox-label">
|
||
<input type="checkbox" name="concern" value="智能助手">
|
||
<span>智能助手</span>
|
||
</label>
|
||
<label class="checkbox-label">
|
||
<input type="checkbox" name="concern" value="智能洞察">
|
||
<span>智能洞察</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary btn-submit">
|
||
<span class="btn-text">提交咨询</span>
|
||
<span class="btn-loading" style="display:none">提交中...</span>
|
||
</button>
|
||
</div>
|
||
<div class="form-message" id="formMessage"></div>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="footer">
|
||
<div class="footer-left">© 2026 菲西尔智能科技有限公司</div>
|
||
<div class="footer-right">
|
||
<a href="#features">核心能力</a>
|
||
<a href="#services">解决方案</a>
|
||
<a href="mailto:contact@fischerai.cn">联系我们</a>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// Header scroll effect
|
||
const header = document.getElementById('header');
|
||
window.addEventListener('scroll', () => {
|
||
if (window.scrollY > 10) header.classList.add('scrolled');
|
||
else header.classList.remove('scrolled');
|
||
});
|
||
|
||
// GSAP ScrollTrigger animations
|
||
gsap.registerPlugin(ScrollTrigger);
|
||
|
||
// Animate feature cards
|
||
gsap.utils.toArray('.feature-card').forEach((card, i) => {
|
||
gsap.from(card, {
|
||
y: 30, opacity: 0, duration: 0.5, delay: i * 0.08,
|
||
scrollTrigger: { trigger: card, start: 'top 85%' }
|
||
});
|
||
});
|
||
|
||
// Animate service showcase
|
||
gsap.utils.toArray('.service-showcase-card').forEach((card, i) => {
|
||
gsap.from(card, {
|
||
y: 40, opacity: 0, duration: 0.6, delay: i * 0.15,
|
||
scrollTrigger: { trigger: card, start: 'top 80%' }
|
||
});
|
||
});
|
||
|
||
// Animate service cards
|
||
gsap.utils.toArray('.service-card').forEach((card, i) => {
|
||
gsap.from(card, {
|
||
y: 30, opacity: 0, duration: 0.5, delay: i * 0.15,
|
||
scrollTrigger: { trigger: card, start: 'top 85%' }
|
||
});
|
||
});
|
||
|
||
// Animate steps
|
||
gsap.utils.toArray('.step').forEach((step, i) => {
|
||
gsap.from(step, {
|
||
y: 20, opacity: 0, duration: 0.4, delay: i * 0.15,
|
||
scrollTrigger: { trigger: step, start: 'top 85%' }
|
||
});
|
||
});
|
||
|
||
// Animate contact section
|
||
gsap.from('.contact-header', {
|
||
y: 20, opacity: 0, duration: 0.5,
|
||
scrollTrigger: { trigger: '.contact', start: 'top 80%' }
|
||
});
|
||
gsap.from('.contact-form', {
|
||
y: 30, opacity: 0, duration: 0.6,
|
||
scrollTrigger: { trigger: '.contact', start: 'top 80%' }
|
||
});
|
||
|
||
// Form submission
|
||
const form = document.getElementById('consultForm');
|
||
const formMessage = document.getElementById('formMessage');
|
||
const submitBtn = form.querySelector('.btn-submit');
|
||
const btnText = submitBtn.querySelector('.btn-text');
|
||
const btnLoading = submitBtn.querySelector('.btn-loading');
|
||
|
||
form.addEventListener('submit', async (e) => {
|
||
e.preventDefault();
|
||
|
||
btnText.style.display = 'none';
|
||
btnLoading.style.display = 'inline';
|
||
submitBtn.disabled = true;
|
||
|
||
const formData = new FormData(form);
|
||
const data = {
|
||
name: formData.get('name'),
|
||
title: formData.get('title'),
|
||
company: formData.get('company'),
|
||
phone: formData.get('phone'),
|
||
email: formData.get('email'),
|
||
concern: formData.getAll('concern')
|
||
};
|
||
|
||
try {
|
||
const response = await fetch('http://localhost:5000/api/consult', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(data)
|
||
});
|
||
|
||
const result = await response.json();
|
||
|
||
if (result.success) {
|
||
formMessage.className = 'form-message success';
|
||
formMessage.textContent = '提交成功！我们会尽快联系您。';
|
||
form.reset();
|
||
} else {
|
||
throw new Error(result.error || '提交失败');
|
||
}
|
||
} catch (error) {
|
||
formMessage.className = 'form-message error';
|
||
formMessage.textContent = '提交失败，请直接拨打 400-XXX-XXXX 或邮件联系 contact@fischerai.cn';
|
||
} finally {
|
||
btnText.style.display = 'inline';
|
||
btnLoading.style.display = 'none';
|
||
submitBtn.disabled = false;
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|