919 lines
41 KiB
HTML
919 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="帮企业在现有业务系统上叠加AI能力。营销获客、提质增效、决策支持、数据处理四大场景，2周部署见效。">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;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: #f6f6f7;
|
||
--bg-mute: #f1f1f2;
|
||
--text-1: #213547;
|
||
--text-2: #476582;
|
||
--text-3: #8e9aaf;
|
||
--brand: #3B82F6;
|
||
--brand-light: #60A5FA;
|
||
--brand-dark: #2563EB;
|
||
--brand-soft: rgba(59, 130, 246, 0.12);
|
||
--accent: #64748b;
|
||
--accent-light: #94a3b8;
|
||
--divider: rgba(60, 60, 60, 0.12);
|
||
--shadow-1: 0 1px 2px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
|
||
--shadow-2: 0 3px 12px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.07);
|
||
--shadow-3: 0 12px 32px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.08);
|
||
--radius: 8px;
|
||
--radius-lg: 12px;
|
||
--max-width: 1280px;
|
||
--header-height: 64px;
|
||
--transition: 0.25s ease;
|
||
}
|
||
|
||
@media (prefers-color-scheme: dark) {
|
||
:root {
|
||
--bg: #1e1e20;
|
||
--bg-soft: #252529;
|
||
--bg-mute: #2c2c30;
|
||
--text-1: #e2e2e4;
|
||
--text-2: #9e9eb5;
|
||
--text-3: #6e6e80;
|
||
--divider: rgba(255,255,255,0.1);
|
||
}
|
||
}
|
||
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
|
||
body {
|
||
font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||
background: var(--bg); color: var(--text-1); line-height: 1.7;
|
||
-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: var(--bg);
|
||
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;
|
||
}
|
||
.logo img { height: 32px; width: auto; }
|
||
.nav-links { display: flex; gap: 32px; align-items: center; }
|
||
.nav-links a {
|
||
font-size: 14px; font-weight: 500; color: var(--text-2);
|
||
text-decoration: none; transition: color var(--transition);
|
||
}
|
||
.nav-links a:hover { color: var(--text-1); }
|
||
.nav-cta {
|
||
padding: 8px 16px; background: var(--brand-soft); color: var(--brand-dark);
|
||
border-radius: var(--radius); font-size: 13px; font-weight: 600;
|
||
text-decoration: none; transition: all var(--transition);
|
||
}
|
||
.nav-cta:hover { background: var(--brand); color: #fff; }
|
||
|
||
/* ========== HERO ========== */
|
||
.hero {
|
||
padding-top: var(--header-height);
|
||
background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
|
||
position: relative; overflow: hidden;
|
||
}
|
||
.hero-inner {
|
||
max-width: var(--max-width); margin: 0 auto; padding: 80px 32px 120px;
|
||
display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
|
||
}
|
||
.hero-badge {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
padding: 6px 14px; background: var(--brand-soft);
|
||
border: 1px solid rgba(59,130,246,0.2); border-radius: 100px;
|
||
font-size: 13px; font-weight: 600; color: var(--brand-dark); margin-bottom: 24px;
|
||
}
|
||
.hero-badge::before {
|
||
content: ''; width: 8px; height: 8px; background: var(--brand);
|
||
border-radius: 50%; box-shadow: 0 0 8px var(--brand);
|
||
}
|
||
.hero-title {
|
||
font-family: 'Space Grotesk', 'Noto Sans SC', sans-serif;
|
||
font-size: clamp(36px, 5vw, 56px); font-weight: 700;
|
||
line-height: 1.15; letter-spacing: -0.03em; margin-bottom: 20px;
|
||
}
|
||
.hero-title .brand { color: var(--brand); }
|
||
.hero-desc {
|
||
font-size: 18px; color: var(--text-2); line-height: 1.7;
|
||
margin-bottom: 32px; max-width: 480px;
|
||
}
|
||
.hero-cta-group { display: flex; gap: 12px; flex-wrap: wrap; }
|
||
.btn {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
padding: 12px 24px; font-size: 14px; font-weight: 600;
|
||
border-radius: var(--radius); text-decoration: none; cursor: pointer;
|
||
border: none; transition: all var(--transition);
|
||
}
|
||
.btn-primary {
|
||
background: var(--brand); color: #fff;
|
||
box-shadow: 0 1px 3px rgba(59,130,246,0.3);
|
||
}
|
||
.btn-primary:hover {
|
||
background: var(--brand-dark); transform: translateY(-1px);
|
||
box-shadow: var(--shadow-2);
|
||
}
|
||
.btn-secondary {
|
||
background: var(--bg-mute); color: var(--text-1);
|
||
border: 1px solid var(--divider);
|
||
}
|
||
.btn-secondary:hover { background: var(--bg-soft); border-color: var(--text-3); }
|
||
|
||
/* Hero visual - code preview style */
|
||
.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; }
|
||
@media (prefers-color-scheme: dark) {
|
||
.code-keyword { color: #ff7b72; }
|
||
.code-string { color: #a5d6ff; }
|
||
.code-func { color: #d2a8ff; }
|
||
.code-comment { color: #8b949e; }
|
||
}
|
||
|
||
/* ========== FEATURES ========== */
|
||
.features {
|
||
padding: 80px 32px; max-width: var(--max-width); margin: 0 auto;
|
||
}
|
||
.features-header { text-align: center; margin-bottom: 64px; }
|
||
.features-header h2 {
|
||
font-family: 'Space Grotesk', sans-serif; font-size: 36px;
|
||
font-weight: 700; margin-bottom: 12px;
|
||
}
|
||
.features-header p { color: var(--text-2); font-size: 17px; }
|
||
.features-grid {
|
||
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
|
||
}
|
||
.feature-card {
|
||
padding: 32px; background: var(--bg-soft);
|
||
border: 1px solid var(--divider); border-radius: var(--radius-lg);
|
||
transition: all var(--transition);
|
||
}
|
||
.feature-card:hover {
|
||
transform: translateY(-2px); box-shadow: var(--shadow-2);
|
||
border-color: rgba(59,130,246,0.3);
|
||
}
|
||
.feature-icon {
|
||
width: 48px; height: 48px; border-radius: var(--radius);
|
||
background: var(--brand-soft); display: flex; align-items: center;
|
||
justify-content: center; margin-bottom: 20px;
|
||
}
|
||
.feature-icon svg { width: 24px; height: 24px; color: var(--brand); }
|
||
.feature-card h3 {
|
||
font-family: 'Space Grotesk', sans-serif; font-size: 18px;
|
||
font-weight: 600; margin-bottom: 8px;
|
||
}
|
||
.feature-card p { font-size: 14px; color: var(--text-2); line-height: 1.6; }
|
||
|
||
/* ========== SERVICES ========== */
|
||
.services { background: var(--bg-soft); padding: 80px 32px; }
|
||
.services-inner { max-width: var(--max-width); margin: 0 auto; }
|
||
.services-header { text-align: center; margin-bottom: 64px; }
|
||
.services-header h2 {
|
||
font-family: 'Space Grotesk', sans-serif; font-size: 36px;
|
||
font-weight: 700; margin-bottom: 12px;
|
||
}
|
||
.services-header p { color: var(--text-2); font-size: 17px; }
|
||
.service-row {
|
||
display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
|
||
align-items: center; padding: 48px 0; border-bottom: 1px solid var(--divider);
|
||
}
|
||
.service-row:last-child { border-bottom: none; }
|
||
.service-row.reverse .service-text { order: 2; }
|
||
.service-row.reverse .service-img { order: 1; }
|
||
.service-tag {
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
padding: 4px 12px; background: var(--brand-soft);
|
||
border-radius: 100px; font-size: 12px; font-weight: 600;
|
||
color: var(--brand-dark); margin-bottom: 16px;
|
||
}
|
||
.service-text h3 {
|
||
font-family: 'Space Grotesk', 'Noto Sans SC', sans-serif;
|
||
font-size: 28px; font-weight: 700; margin-bottom: 16px;
|
||
}
|
||
.service-text p { color: var(--text-2); line-height: 1.7; margin-bottom: 20px; }
|
||
.service-metric {
|
||
display: flex; gap: 32px; margin-top: 24px;
|
||
}
|
||
.metric-item h4 {
|
||
font-family: 'Space Grotesk', sans-serif; font-size: 32px;
|
||
font-weight: 700; color: var(--brand); margin-bottom: 4px;
|
||
}
|
||
.metric-item span { font-size: 13px; color: var(--text-3); }
|
||
.service-img {
|
||
background: var(--bg); border: 1px solid var(--divider);
|
||
border-radius: var(--radius-lg); overflow: hidden;
|
||
aspect-ratio: 16/10; box-shadow: var(--shadow-2);
|
||
}
|
||
.service-img img { width: 100%; height: 100%; object-fit: cover; }
|
||
|
||
/* ========== HOW IT WORKS ========== */
|
||
.how {
|
||
padding: 80px 32px; max-width: var(--max-width); margin: 0 auto;
|
||
}
|
||
.how-header { text-align: center; margin-bottom: 64px; }
|
||
.how-header h2 {
|
||
font-family: 'Space Grotesk', sans-serif; font-size: 36px;
|
||
font-weight: 700; margin-bottom: 12px;
|
||
}
|
||
.how-header p { color: var(--text-2); font-size: 17px; }
|
||
.how-steps {
|
||
display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
|
||
}
|
||
.step {
|
||
text-align: center; padding: 32px 24px;
|
||
background: var(--bg-soft); border: 1px solid var(--divider);
|
||
border-radius: var(--radius-lg); position: relative;
|
||
}
|
||
.step-num {
|
||
width: 40px; height: 40px; border-radius: 50%;
|
||
background: var(--brand); color: #fff; display: flex;
|
||
align-items: center; justify-content: center;
|
||
font-family: 'Space Grotesk', sans-serif; font-size: 16px;
|
||
font-weight: 700; margin: 0 auto 16px;
|
||
}
|
||
.step h4 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
|
||
.step p { font-size: 14px; color: var(--text-2); line-height: 1.6; }
|
||
|
||
/* ========== TESTIMONIALS ========== */
|
||
.testimonials {
|
||
background: var(--bg-soft); padding: 80px 32px;
|
||
}
|
||
/* ========== CTA ========== */
|
||
.cta {
|
||
padding: 80px 32px; max-width: var(--max-width); margin: 0 auto;
|
||
text-align: center;
|
||
}
|
||
.cta-box {
|
||
padding: 64px; background: linear-gradient(135deg, var(--brand-soft), rgba(59,130,246,0.06));
|
||
border: 1px solid rgba(59,130,246,0.2); border-radius: var(--radius-lg);
|
||
}
|
||
.cta h2 {
|
||
font-family: 'Space Grotesk', 'Noto Sans SC', sans-serif;
|
||
font-size: 36px; font-weight: 700; margin-bottom: 16px;
|
||
}
|
||
.cta p { color: var(--text-2); font-size: 17px; margin-bottom: 32px; }
|
||
|
||
/* ========== CONTACT FORM ========== */
|
||
.contact {
|
||
padding: 80px 32px;
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
}
|
||
.contact-header {
|
||
text-align: center;
|
||
margin-bottom: 48px;
|
||
}
|
||
.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: 17px;
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
}
|
||
.contact-form {
|
||
background: var(--bg);
|
||
border: 1px solid var(--divider);
|
||
border-radius: var(--radius-lg);
|
||
padding: 40px;
|
||
}
|
||
.form-row {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 20px;
|
||
}
|
||
.name-row {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 12px;
|
||
}
|
||
.name-row .name-part {
|
||
display: grid;
|
||
grid-template-columns: 1fr 80px;
|
||
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;
|
||
}
|
||
.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 .required {
|
||
color: #ef4444;
|
||
}
|
||
.form-group input,
|
||
.form-group textarea {
|
||
width: 100%;
|
||
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;
|
||
}
|
||
.form-group input:focus,
|
||
.form-group textarea:focus {
|
||
outline: none;
|
||
border-color: var(--brand);
|
||
box-shadow: 0 0 0 3px var(--brand-soft);
|
||
}
|
||
.form-group input::placeholder,
|
||
.form-group textarea::placeholder {
|
||
color: var(--text-3);
|
||
}
|
||
.form-group textarea {
|
||
resize: vertical;
|
||
min-height: 100px;
|
||
}
|
||
.checkbox-group {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
}
|
||
.checkbox-label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
cursor: pointer;
|
||
padding: 8px 16px;
|
||
border: 1px solid var(--divider);
|
||
border-radius: var(--radius);
|
||
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; }
|
||
.hero-visual { display: none; }
|
||
.features-grid { grid-template-columns: repeat(2, 1fr); }
|
||
.service-row { grid-template-columns: 1fr; }
|
||
.service-row.reverse .service-text { order: 1; }
|
||
.service-row.reverse .service-img { order: 2; }
|
||
.how-steps { grid-template-columns: repeat(2, 1fr); }
|
||
}
|
||
@media (max-width: 768px) {
|
||
.nav-links { display: none; }
|
||
.features-grid { grid-template-columns: 1fr; }
|
||
.how-steps { grid-template-columns: 1fr; }
|
||
.service-metric { flex-direction: column; gap: 16px; }
|
||
.form-row { grid-template-columns: 1fr; }
|
||
.contact-form { padding: 24px; }
|
||
.footer { flex-direction: column; gap: 16px; text-align: center; }
|
||
}
|
||
</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">预约咨询</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 -->
|
||
<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-row">
|
||
<div class="service-text">
|
||
<span class="service-tag">智能获客 · 适合市场部、销售部</span>
|
||
<h3>线索不够？客户跟不过来？</h3>
|
||
<p>市场部写内容太慢、SEO没效果；销售部线索质量差、跟进不及时。我们用GEO优化让你的品牌出现在AI搜索结果里，同时给CRM加个智能层——自动清洗线索、提醒跟进、生成客户画像。市场部少花冤枉钱，销售部多成单。</p>
|
||
<div class="service-metric">
|
||
<div class="metric-item">
|
||
<h4>GEO优化</h4>
|
||
<span>被AI搜索优先推荐</span>
|
||
</div>
|
||
<div class="metric-item">
|
||
<h4>智能跟进</h4>
|
||
<span>线索不流失</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="service-img">
|
||
<img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&h=500&fit=crop" alt="智能获客">
|
||
</div>
|
||
</div>
|
||
<!-- 智能增效 -->
|
||
<div class="service-row reverse">
|
||
<div class="service-text">
|
||
<span class="service-tag">智能增效 · 适合生产部、质检部</span>
|
||
<h3>产量上不去？质量问题反复？</h3>
|
||
<p>生产计划靠经验、设备坏了才修、质检漏检率高。我们在现有MES/ERP系统上加个智能层——预测设备故障提前修、自动排产减少换线、质检数据实时分析找规律。产量稳住，质量提升，不用加人。</p>
|
||
<div class="service-metric">
|
||
<div class="metric-item">
|
||
<h4>预测维护</h4>
|
||
<span>减少停机时间</span>
|
||
</div>
|
||
<div class="metric-item">
|
||
<h4>智能排产</h4>
|
||
<span>提升设备利用率</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="service-img">
|
||
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&h=500&fit=crop" alt="智能增效">
|
||
</div>
|
||
</div>
|
||
<!-- 智能助手 -->
|
||
<div class="service-row">
|
||
<div class="service-text">
|
||
<span class="service-tag">智能助手 · 适合财务部、人事行政</span>
|
||
<h3>对账对到眼花？表格做不完？</h3>
|
||
<p>财务月底对账要加班、报销单据堆成山；人事算考勤算绩效、行政管资产管采购，全是重复劳动。我们在现有财务/人事系统上加个自动化层——自动对账、智能报销审核、考勤异常自动标记、资产到期自动提醒。减少80%重复工作。</p>
|
||
<div class="service-metric">
|
||
<div class="metric-item">
|
||
<h4>自动对账</h4>
|
||
<span>月底不用加班</span>
|
||
</div>
|
||
<div class="metric-item">
|
||
<h4>流程自动化</h4>
|
||
<span>减少重复劳动</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="service-img">
|
||
<img src="https://images.unsplash.com/photo-1553877522-43269d4ea984?w=800&h=500&fit=crop" alt="智能助手">
|
||
</div>
|
||
</div>
|
||
<!-- 智能洞察 -->
|
||
<div class="service-row reverse">
|
||
<div class="service-text">
|
||
<span class="service-tag">智能洞察 · 适合老板、管理层</span>
|
||
<h3>报表等太久？决策靠感觉？</h3>
|
||
<p>每周一等报表、数据散落在各个系统、发现问题已经晚了。我们把所有系统的数据接进来，老板随时问"这个月哪个区域利润最高""库存有没有风险"，秒出答案。不用等周报，不用催下属，打开手机就能看。</p>
|
||
<div class="service-metric">
|
||
<div class="metric-item">
|
||
<h4>一问即答</h4>
|
||
<span>自然语言查数据</span>
|
||
</div>
|
||
<div class="metric-item">
|
||
<h4>风险预警</h4>
|
||
<span>提前发现问题</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="service-img">
|
||
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&h=500&fit=crop" alt="智能洞察">
|
||
</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-num">1</div>
|
||
<h4>聊聊现状</h4>
|
||
<p>30分钟电话，说说你们现在用什么系统、哪个环节最头疼</p>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">2</div>
|
||
<h4>出方案</h4>
|
||
<p>根据你的系统和痛点，定一个试点方案——先解决最急的问题</p>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">3</div>
|
||
<h4>接上就用</h4>
|
||
<p>API对接现有系统，配置好逻辑，两周内上线。员工几乎无感。</p>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">4</div>
|
||
<h4>看着变好</h4>
|
||
<p>用一段时间，效果出来了再扩展。不好用随时停，没沉没成本。</p>
|
||
</div>
|
||
</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="name-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.1,
|
||
scrollTrigger: { trigger: card, start: 'top 85%' }
|
||
});
|
||
});
|
||
|
||
// Animate service rows
|
||
gsap.utils.toArray('.service-row').forEach(row => {
|
||
gsap.from(row.querySelector('.service-text'), {
|
||
x: -30, opacity: 0, duration: 0.6,
|
||
scrollTrigger: { trigger: row, start: 'top 80%' }
|
||
});
|
||
gsap.from(row.querySelector('.service-img'), {
|
||
x: 30, opacity: 0, duration: 0.6,
|
||
scrollTrigger: { trigger: row, start: 'top 80%' }
|
||
});
|
||
});
|
||
|
||
// 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();
|
||
|
||
// Get form data
|
||
const formData = new FormData(form);
|
||
const title = formData.get('title') || '先生';
|
||
const name = formData.get('name') || '';
|
||
const data = {
|
||
name: name,
|
||
title: title,
|
||
phone: formData.get('phone'),
|
||
email: formData.get('email') || '',
|
||
company: formData.get('company') || '',
|
||
concern: formData.getAll('concern')
|
||
};
|
||
|
||
// Format display name
|
||
const displayName = name + title;
|
||
|
||
// Validate
|
||
if (!data.name || data.name.length < 2) {
|
||
formMessage.className = 'form-message error';
|
||
formMessage.textContent = '请输入正确的姓名（至少2个字符）';
|
||
return;
|
||
}
|
||
if (!data.phone || !/^1\d{10}$/.test(data.phone)) {
|
||
formMessage.className = 'form-message error';
|
||
formMessage.textContent = '请输入正确的手机号（11位数字）';
|
||
return;
|
||
}
|
||
|
||
// Show loading
|
||
btnText.style.display = 'none';
|
||
btnLoading.style.display = 'inline';
|
||
submitBtn.disabled = true;
|
||
|
||
try {
|
||
const response = await fetch('/api/consult', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(data)
|
||
});
|
||
|
||
const result = await response.json();
|
||
|
||
if (response.ok) {
|
||
formMessage.className = 'form-message success';
|
||
formMessage.textContent = '提交成功！我们会尽快联系您。';
|
||
form.reset();
|
||
} else {
|
||
formMessage.className = 'form-message error';
|
||
formMessage.textContent = result.error || '提交失败，请稍后重试。';
|
||
}
|
||
} catch (err) {
|
||
formMessage.className = 'form-message error';
|
||
formMessage.textContent = '网络错误，请稍后重试。';
|
||
}
|
||
|
||
// Reset button
|
||
btnText.style.display = 'inline';
|
||
btnLoading.style.display = 'none';
|
||
submitBtn.disabled = false;
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |