1753 lines
46 KiB
HTML
1753 lines
46 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>菲西尔智能 · 让业务系统更智能</title>
|
||
<meta
|
||
name="description"
|
||
content="上海菲西尔智能科技 - 专注为现有业务系统叠加AI能力，一天上线，三天见效。"
|
||
/>
|
||
<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@400;500;600&family=Noto+Sans+SC:wght@400;500;700&display=swap"
|
||
rel="stylesheet"
|
||
/>
|
||
<style>
|
||
:root {
|
||
--bg: #0a0a0a;
|
||
--bg-elevated: #111113;
|
||
--bg-subtle: #18181b;
|
||
--text: #fafafa;
|
||
--text-secondary: #a1a1aa;
|
||
--text-muted: #71717a;
|
||
--accent: #3b82f6;
|
||
--accent-hover: #60a5fa;
|
||
--border: rgba(255, 255, 255, 0.06);
|
||
--border-hover: rgba(255, 255, 255, 0.12);
|
||
--radius: 8px;
|
||
--transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
body {
|
||
font-family:
|
||
"Inter",
|
||
"Noto Sans SC",
|
||
-apple-system,
|
||
sans-serif;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
line-height: 1.6;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* Background Effects */
|
||
.bg-effects {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: -1;
|
||
overflow: hidden;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.bg-gradient-1 {
|
||
position: absolute;
|
||
top: -50%;
|
||
left: -20%;
|
||
width: 80%;
|
||
height: 100%;
|
||
background: radial-gradient(
|
||
ellipse,
|
||
rgba(59, 130, 246, 0.12) 0%,
|
||
transparent 60%
|
||
);
|
||
filter: blur(80px);
|
||
animation: float1 20s ease-in-out infinite;
|
||
}
|
||
|
||
.bg-gradient-2 {
|
||
position: absolute;
|
||
bottom: -30%;
|
||
right: -10%;
|
||
width: 60%;
|
||
height: 80%;
|
||
background: radial-gradient(
|
||
ellipse,
|
||
rgba(139, 92, 246, 0.1) 0%,
|
||
transparent 60%
|
||
);
|
||
filter: blur(80px);
|
||
animation: float2 25s ease-in-out infinite;
|
||
}
|
||
|
||
.bg-gradient-3 {
|
||
position: absolute;
|
||
top: 40%;
|
||
left: 30%;
|
||
width: 40%;
|
||
height: 60%;
|
||
background: radial-gradient(
|
||
ellipse,
|
||
rgba(59, 130, 246, 0.08) 0%,
|
||
transparent 50%
|
||
);
|
||
filter: blur(60px);
|
||
animation: float3 15s ease-in-out infinite;
|
||
}
|
||
|
||
.bg-grid {
|
||
position: absolute;
|
||
inset: 0;
|
||
background-image:
|
||
linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
|
||
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
|
||
background-size: 80px 80px;
|
||
mask-image: radial-gradient(
|
||
ellipse at center,
|
||
black 0%,
|
||
transparent 70%
|
||
);
|
||
-webkit-mask-image: radial-gradient(
|
||
ellipse at center,
|
||
black 0%,
|
||
transparent 70%
|
||
);
|
||
}
|
||
|
||
.bg-glow {
|
||
position: absolute;
|
||
top: 20%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 600px;
|
||
height: 600px;
|
||
background: radial-gradient(
|
||
circle,
|
||
rgba(59, 130, 246, 0.15) 0%,
|
||
transparent 70%
|
||
);
|
||
filter: blur(60px);
|
||
animation: pulse 8s ease-in-out infinite;
|
||
}
|
||
|
||
/* Floating Particles */
|
||
.particles {
|
||
position: absolute;
|
||
inset: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.particle {
|
||
position: absolute;
|
||
width: 3px;
|
||
height: 3px;
|
||
background: rgba(59, 130, 246, 0.4);
|
||
border-radius: 50%;
|
||
animation: particleFloat 15s linear infinite;
|
||
}
|
||
|
||
.particle:nth-child(1) {
|
||
left: 10%;
|
||
top: 20%;
|
||
animation-delay: 0s;
|
||
animation-duration: 20s;
|
||
}
|
||
.particle:nth-child(2) {
|
||
left: 20%;
|
||
top: 60%;
|
||
animation-delay: -3s;
|
||
animation-duration: 25s;
|
||
}
|
||
.particle:nth-child(3) {
|
||
left: 35%;
|
||
top: 30%;
|
||
animation-delay: -6s;
|
||
animation-duration: 18s;
|
||
}
|
||
.particle:nth-child(4) {
|
||
left: 50%;
|
||
top: 70%;
|
||
animation-delay: -9s;
|
||
animation-duration: 22s;
|
||
}
|
||
.particle:nth-child(5) {
|
||
left: 65%;
|
||
top: 25%;
|
||
animation-delay: -12s;
|
||
animation-duration: 28s;
|
||
}
|
||
.particle:nth-child(6) {
|
||
left: 75%;
|
||
top: 55%;
|
||
animation-delay: -15s;
|
||
animation-duration: 24s;
|
||
}
|
||
.particle:nth-child(7) {
|
||
left: 85%;
|
||
top: 35%;
|
||
animation-delay: -18s;
|
||
animation-duration: 19s;
|
||
}
|
||
.particle:nth-child(8) {
|
||
left: 15%;
|
||
top: 80%;
|
||
animation-delay: -4s;
|
||
animation-duration: 26s;
|
||
}
|
||
.particle:nth-child(9) {
|
||
left: 45%;
|
||
top: 45%;
|
||
animation-delay: -8s;
|
||
animation-duration: 21s;
|
||
}
|
||
.particle:nth-child(10) {
|
||
left: 90%;
|
||
top: 15%;
|
||
animation-delay: -11s;
|
||
animation-duration: 23s;
|
||
}
|
||
|
||
@keyframes particleFloat {
|
||
0% {
|
||
transform: translateY(100vh) scale(0);
|
||
opacity: 0;
|
||
}
|
||
10% {
|
||
opacity: 1;
|
||
}
|
||
90% {
|
||
opacity: 1;
|
||
}
|
||
100% {
|
||
transform: translateY(-100vh) scale(1);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
/* Animated Gradient Border */
|
||
.gradient-border {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(
|
||
90deg,
|
||
transparent,
|
||
rgba(59, 130, 246, 0.1),
|
||
transparent
|
||
);
|
||
background-size: 200% 100%;
|
||
animation: gradientSlide 8s linear infinite;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
@keyframes gradientSlide {
|
||
0% {
|
||
background-position: -200% 0;
|
||
}
|
||
100% {
|
||
background-position: 200% 0;
|
||
}
|
||
}
|
||
|
||
/* Section Glow Dividers */
|
||
.section-glow {
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 800px;
|
||
height: 2px;
|
||
background: linear-gradient(
|
||
90deg,
|
||
transparent,
|
||
rgba(59, 130, 246, 0.3),
|
||
transparent
|
||
);
|
||
filter: blur(1px);
|
||
}
|
||
|
||
@keyframes float1 {
|
||
0%,
|
||
100% {
|
||
transform: translate(0, 0);
|
||
}
|
||
50% {
|
||
transform: translate(5%, 3%);
|
||
}
|
||
}
|
||
|
||
@keyframes float2 {
|
||
0%,
|
||
100% {
|
||
transform: translate(0, 0);
|
||
}
|
||
50% {
|
||
transform: translate(-3%, -5%);
|
||
}
|
||
}
|
||
|
||
@keyframes float3 {
|
||
0%,
|
||
100% {
|
||
transform: translate(0, 0);
|
||
}
|
||
50% {
|
||
transform: translate(3%, -3%);
|
||
}
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%,
|
||
100% {
|
||
opacity: 0.5;
|
||
transform: translateX(-50%) scale(1);
|
||
}
|
||
50% {
|
||
opacity: 0.8;
|
||
transform: translateX(-50%) scale(1.1);
|
||
}
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 0 clamp(24px, 5vw, 64px);
|
||
}
|
||
|
||
/* Navigation */
|
||
nav {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 100;
|
||
height: 80px;
|
||
background: rgba(10, 10, 10, 0.8);
|
||
backdrop-filter: blur(20px);
|
||
border-bottom: 1px solid var(--border);
|
||
transition: var(--transition);
|
||
}
|
||
|
||
nav.scrolled {
|
||
height: 64px;
|
||
background: rgba(10, 10, 10, 0.95);
|
||
}
|
||
|
||
.nav-inner {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 0 clamp(24px, 5vw, 64px);
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.logo {
|
||
display: flex;
|
||
align-items: center;
|
||
text-decoration: none;
|
||
height: 32px;
|
||
}
|
||
|
||
.logo img {
|
||
height: 32px;
|
||
width: auto;
|
||
display: block;
|
||
}
|
||
|
||
nav.scrolled .logo {
|
||
height: 32px;
|
||
}
|
||
|
||
nav.scrolled .logo img {
|
||
height: 32px;
|
||
}
|
||
|
||
.nav-links {
|
||
display: flex;
|
||
gap: 40px;
|
||
}
|
||
|
||
.nav-links a {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: var(--text-secondary);
|
||
text-decoration: none;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.nav-links a:hover {
|
||
color: var(--text);
|
||
}
|
||
|
||
.nav-cta {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 10px 20px;
|
||
background: var(--text);
|
||
color: var(--bg);
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
text-decoration: none;
|
||
border-radius: var(--radius);
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.nav-cta:hover {
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 4px 20px rgba(255, 255, 255, 0.15);
|
||
}
|
||
|
||
/* Hero */
|
||
.hero {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 120px 0 80px;
|
||
position: relative;
|
||
}
|
||
|
||
.hero::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 100%;
|
||
max-width: 800px;
|
||
height: 600px;
|
||
background: radial-gradient(
|
||
ellipse,
|
||
rgba(59, 130, 246, 0.15) 0%,
|
||
transparent 70%
|
||
);
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* Floating Decorations */
|
||
.hero-deco {
|
||
position: absolute;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
}
|
||
|
||
.deco-1 {
|
||
top: 25%;
|
||
left: 10%;
|
||
width: 60px;
|
||
height: 60px;
|
||
border: 1px solid rgba(59, 130, 246, 0.3);
|
||
border-radius: 50%;
|
||
animation: floatDeco 12s ease-in-out infinite;
|
||
}
|
||
|
||
.deco-2 {
|
||
top: 35%;
|
||
right: 12%;
|
||
width: 80px;
|
||
height: 80px;
|
||
border: 1px solid rgba(139, 92, 246, 0.25);
|
||
transform: rotate(45deg);
|
||
animation: floatDeco 15s ease-in-out 2s infinite;
|
||
}
|
||
|
||
.deco-3 {
|
||
bottom: 30%;
|
||
left: 15%;
|
||
width: 40px;
|
||
height: 40px;
|
||
background: rgba(59, 130, 246, 0.15);
|
||
border-radius: 50%;
|
||
animation: floatDeco 10s ease-in-out 1s infinite;
|
||
}
|
||
|
||
.deco-4 {
|
||
bottom: 25%;
|
||
right: 18%;
|
||
width: 100px;
|
||
height: 1px;
|
||
background: linear-gradient(
|
||
90deg,
|
||
transparent,
|
||
rgba(59, 130, 246, 0.4),
|
||
transparent
|
||
);
|
||
animation: floatDeco 18s ease-in-out 3s infinite;
|
||
}
|
||
|
||
.deco-5 {
|
||
top: 50%;
|
||
left: 5%;
|
||
width: 1px;
|
||
height: 120px;
|
||
background: linear-gradient(
|
||
180deg,
|
||
transparent,
|
||
rgba(139, 92, 246, 0.35),
|
||
transparent
|
||
);
|
||
animation: floatDeco 14s ease-in-out 0.5s infinite;
|
||
}
|
||
|
||
@keyframes floatDeco {
|
||
0%,
|
||
100% {
|
||
transform: translateY(0) rotate(0deg);
|
||
opacity: 0.5;
|
||
}
|
||
50% {
|
||
transform: translateY(-20px) rotate(5deg);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.hero-content {
|
||
max-width: 900px;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.hero-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 8px 16px;
|
||
background: var(--bg-elevated);
|
||
border: 1px solid var(--border);
|
||
border-radius: 100px;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
color: var(--text-secondary);
|
||
margin-bottom: 32px;
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
animation: fadeUp 0.8s ease forwards;
|
||
}
|
||
|
||
.hero-badge::before {
|
||
content: "";
|
||
width: 6px;
|
||
height: 6px;
|
||
background: var(--accent);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.hero-title {
|
||
font-family: "Space Grotesk", sans-serif;
|
||
font-size: clamp(48px, 8vw, 88px);
|
||
font-weight: 700;
|
||
line-height: 1.05;
|
||
letter-spacing: -0.03em;
|
||
margin-bottom: 24px;
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
animation: fadeUp 0.8s ease 0.1s forwards;
|
||
}
|
||
|
||
.hero-title .accent {
|
||
color: var(--accent);
|
||
}
|
||
|
||
.hero-subtitle {
|
||
font-size: clamp(18px, 2vw, 22px);
|
||
color: var(--text-secondary);
|
||
max-width: 600px;
|
||
margin: 0 auto 48px;
|
||
line-height: 1.7;
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
animation: fadeUp 0.8s ease 0.2s forwards;
|
||
}
|
||
|
||
.hero-actions {
|
||
display: flex;
|
||
gap: 16px;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
animation: fadeUp 0.8s ease 0.3s forwards;
|
||
}
|
||
|
||
.btn-primary {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 16px 32px;
|
||
background: var(--text);
|
||
color: var(--bg);
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
text-decoration: none;
|
||
border-radius: var(--radius);
|
||
transition: var(--transition);
|
||
border: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow:
|
||
0 12px 40px rgba(59, 130, 246, 0.3),
|
||
0 0 20px rgba(59, 130, 246, 0.2);
|
||
}
|
||
|
||
.btn-secondary {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 16px 32px;
|
||
background: transparent;
|
||
color: var(--text);
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
text-decoration: none;
|
||
border-radius: var(--radius);
|
||
border: 1px solid var(--border);
|
||
transition: var(--transition);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
border-color: var(--border-hover);
|
||
background: var(--bg-elevated);
|
||
}
|
||
|
||
.hero-metrics {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 64px;
|
||
margin-top: 80px;
|
||
padding-top: 48px;
|
||
border-top: 1px solid var(--border);
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
animation: fadeUp 0.8s ease 0.4s forwards;
|
||
}
|
||
|
||
.metric {
|
||
text-align: center;
|
||
}
|
||
|
||
.metric-value {
|
||
font-family: "Space Grotesk", sans-serif;
|
||
font-size: clamp(36px, 5vw, 48px);
|
||
font-weight: 700;
|
||
letter-spacing: -0.02em;
|
||
color: var(--text);
|
||
}
|
||
|
||
.metric-label {
|
||
font-size: 13px;
|
||
color: var(--text-muted);
|
||
margin-top: 4px;
|
||
}
|
||
|
||
/* Section */
|
||
section {
|
||
padding: clamp(80px, 12vw, 160px) 0;
|
||
}
|
||
|
||
.section-header {
|
||
max-width: 640px;
|
||
margin-bottom: 64px;
|
||
position: relative;
|
||
}
|
||
|
||
.section-header::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: -20px;
|
||
left: -40px;
|
||
width: 100px;
|
||
height: 100px;
|
||
background: radial-gradient(
|
||
circle,
|
||
rgba(59, 130, 246, 0.1) 0%,
|
||
transparent 70%
|
||
);
|
||
filter: blur(20px);
|
||
opacity: 0;
|
||
transition: opacity 0.8s ease;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.section-header.reveal.visible::after {
|
||
opacity: 1;
|
||
}
|
||
|
||
.section-label {
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
color: var(--accent);
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.section-title {
|
||
font-family: "Space Grotesk", sans-serif;
|
||
font-size: clamp(32px, 5vw, 48px);
|
||
font-weight: 700;
|
||
line-height: 1.1;
|
||
letter-spacing: -0.02em;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.section-desc {
|
||
font-size: 16px;
|
||
color: var(--text-secondary);
|
||
line-height: 1.7;
|
||
}
|
||
|
||
/* Pain Points */
|
||
.pain-points {
|
||
background: var(--bg);
|
||
}
|
||
|
||
.pain-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 24px;
|
||
}
|
||
|
||
.pain-card {
|
||
padding: 40px;
|
||
background: var(--bg-elevated);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.pain-card:hover {
|
||
border-color: rgba(59, 130, 246, 0.4);
|
||
transform: translateY(-8px);
|
||
box-shadow:
|
||
0 20px 60px rgba(59, 130, 246, 0.15),
|
||
0 0 30px rgba(59, 130, 246, 0.05);
|
||
}
|
||
|
||
.pain-icon {
|
||
width: 48px;
|
||
height: 48px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: var(--bg-subtle);
|
||
border-radius: 10px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.pain-icon svg {
|
||
width: 24px;
|
||
height: 24px;
|
||
stroke: var(--text-secondary);
|
||
}
|
||
|
||
.pain-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
margin-bottom: 12px;
|
||
color: var(--text);
|
||
}
|
||
|
||
.pain-desc {
|
||
font-size: 14px;
|
||
color: var(--text-secondary);
|
||
line-height: 1.7;
|
||
}
|
||
|
||
/* Solutions */
|
||
.solutions {
|
||
background: var(--bg-elevated);
|
||
}
|
||
|
||
.solution-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 24px;
|
||
}
|
||
|
||
.solution-card {
|
||
padding: 40px 36px;
|
||
background: var(--bg);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.solution-card::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(
|
||
135deg,
|
||
rgba(59, 130, 246, 0.1) 0%,
|
||
transparent 50%
|
||
);
|
||
opacity: 0;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.solution-card::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 2px;
|
||
background: linear-gradient(
|
||
90deg,
|
||
transparent,
|
||
var(--accent),
|
||
transparent
|
||
);
|
||
opacity: 0;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.solution-card:hover::before {
|
||
opacity: 1;
|
||
}
|
||
|
||
.solution-card:hover::after {
|
||
opacity: 1;
|
||
}
|
||
|
||
.solution-card:hover {
|
||
border-color: rgba(59, 130, 246, 0.5);
|
||
transform: translateY(-10px);
|
||
box-shadow:
|
||
0 25px 80px rgba(59, 130, 246, 0.2),
|
||
0 0 40px rgba(59, 130, 246, 0.08);
|
||
}
|
||
|
||
.solution-num {
|
||
font-family: "Space Grotesk", sans-serif;
|
||
font-size: 64px;
|
||
font-weight: 700;
|
||
color: var(--bg-subtle);
|
||
line-height: 1;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.solution-title {
|
||
font-family: "Space Grotesk", sans-serif;
|
||
font-size: 22px;
|
||
font-weight: 600;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.solution-desc {
|
||
font-size: 14px;
|
||
color: var(--text-secondary);
|
||
line-height: 1.7;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.solution-features {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
}
|
||
|
||
.solution-tag {
|
||
padding: 6px 12px;
|
||
background: var(--bg-elevated);
|
||
border-radius: 100px;
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* Approach */
|
||
.approach {
|
||
background: var(--bg);
|
||
}
|
||
|
||
.approach-list {
|
||
max-width: 800px;
|
||
}
|
||
|
||
.approach-item {
|
||
display: grid;
|
||
grid-template-columns: 80px 1fr;
|
||
gap: 32px;
|
||
padding: 40px 0;
|
||
border-bottom: 1px solid var(--border);
|
||
align-items: start;
|
||
position: relative;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.approach-item::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 2px;
|
||
background: linear-gradient(180deg, var(--accent), transparent);
|
||
opacity: 0;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.approach-item:hover::before {
|
||
opacity: 1;
|
||
}
|
||
|
||
.approach-item:hover {
|
||
padding-left: 20px;
|
||
background: rgba(59, 130, 246, 0.02);
|
||
}
|
||
|
||
.approach-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.approach-num {
|
||
font-family: "Space Grotesk", sans-serif;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: var(--accent);
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
.approach-content h3 {
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.approach-content p {
|
||
font-size: 15px;
|
||
color: var(--text-secondary);
|
||
line-height: 1.7;
|
||
}
|
||
|
||
/* CTA */
|
||
.cta {
|
||
background: var(--bg-elevated);
|
||
text-align: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.cta::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 600px;
|
||
height: 400px;
|
||
background: radial-gradient(
|
||
ellipse,
|
||
rgba(59, 130, 246, 0.12) 0%,
|
||
transparent 70%
|
||
);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.cta-content {
|
||
max-width: 640px;
|
||
margin: 0 auto;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.cta-title {
|
||
font-family: "Space Grotesk", sans-serif;
|
||
font-size: clamp(32px, 5vw, 48px);
|
||
font-weight: 700;
|
||
line-height: 1.1;
|
||
letter-spacing: -0.02em;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.cta-desc {
|
||
font-size: 18px;
|
||
color: var(--text-secondary);
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
/* Contact Form */
|
||
.contact {
|
||
background: var(--bg);
|
||
}
|
||
|
||
.contact-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 80px;
|
||
align-items: start;
|
||
}
|
||
|
||
.contact-info h2 {
|
||
font-family: "Space Grotesk", sans-serif;
|
||
font-size: clamp(32px, 4vw, 42px);
|
||
font-weight: 700;
|
||
line-height: 1.1;
|
||
letter-spacing: -0.02em;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.contact-info p {
|
||
font-size: 16px;
|
||
color: var(--text-secondary);
|
||
line-height: 1.7;
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.contact-detail {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-bottom: 16px;
|
||
font-size: 14px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.contact-detail svg {
|
||
width: 20px;
|
||
height: 20px;
|
||
stroke: var(--text-muted);
|
||
}
|
||
|
||
.contact-form {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
}
|
||
|
||
.form-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.form-label {
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.form-input {
|
||
padding: 14px 16px;
|
||
background: var(--bg-elevated);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
font-size: 15px;
|
||
color: var(--text);
|
||
font-family: inherit;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.form-input:focus {
|
||
outline: none;
|
||
border-color: var(--accent);
|
||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||
}
|
||
|
||
.form-input::placeholder {
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
textarea.form-input {
|
||
min-height: 120px;
|
||
resize: vertical;
|
||
}
|
||
|
||
.checkbox-group {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
}
|
||
|
||
.checkbox-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 10px 16px;
|
||
background: var(--bg-elevated);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
cursor: pointer;
|
||
transition: var(--transition);
|
||
user-select: none;
|
||
}
|
||
|
||
.checkbox-item:hover {
|
||
border-color: rgba(59, 130, 246, 0.4);
|
||
background: rgba(59, 130, 246, 0.05);
|
||
}
|
||
|
||
.checkbox-item input[type="checkbox"] {
|
||
position: absolute;
|
||
opacity: 0;
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
|
||
.checkbox-box {
|
||
width: 16px;
|
||
height: 16px;
|
||
border: 1.5px solid var(--text-muted);
|
||
border-radius: 3px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: var(--transition);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.checkbox-box::after {
|
||
content: "";
|
||
width: 8px;
|
||
height: 8px;
|
||
background: var(--accent);
|
||
border-radius: 1px;
|
||
opacity: 0;
|
||
transform: scale(0);
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.checkbox-item input[type="checkbox"]:checked + .checkbox-box {
|
||
border-color: var(--accent);
|
||
background: rgba(59, 130, 246, 0.1);
|
||
}
|
||
|
||
.checkbox-item input[type="checkbox"]:checked + .checkbox-box::after {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
|
||
.checkbox-item input[type="checkbox"]:checked ~ .checkbox-label {
|
||
color: var(--text);
|
||
}
|
||
|
||
.checkbox-label {
|
||
font-size: 14px;
|
||
color: var(--text-secondary);
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.char-count {
|
||
text-align: right;
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.form-submit {
|
||
padding: 16px 32px;
|
||
background: var(--text);
|
||
color: var(--bg);
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
border: none;
|
||
border-radius: var(--radius);
|
||
cursor: pointer;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.form-submit:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow:
|
||
0 12px 40px rgba(59, 130, 246, 0.3),
|
||
0 0 20px rgba(59, 130, 246, 0.2);
|
||
}
|
||
|
||
/* Footer */
|
||
footer {
|
||
padding: 48px 0;
|
||
background: var(--bg);
|
||
border-top: 1px solid var(--border);
|
||
}
|
||
|
||
.footer-inner {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.footer-left {
|
||
font-size: 13px;
|
||
color: var(--text-muted);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.footer-left img {
|
||
height: 28px;
|
||
width: auto;
|
||
margin-bottom: 16px;
|
||
display: block;
|
||
}
|
||
|
||
.footer-links {
|
||
display: flex;
|
||
gap: 32px;
|
||
}
|
||
|
||
.footer-links a {
|
||
font-size: 13px;
|
||
color: var(--text-muted);
|
||
text-decoration: none;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.footer-links a:hover {
|
||
color: var(--text);
|
||
}
|
||
|
||
/* Animations */
|
||
@keyframes fadeUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
/* Reveal Animation */
|
||
.reveal {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
transition:
|
||
opacity 0.8s ease,
|
||
transform 0.8s ease;
|
||
}
|
||
|
||
.reveal.visible {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* Responsive */
|
||
@media (max-width: 900px) {
|
||
.nav-links {
|
||
display: none;
|
||
}
|
||
|
||
.hero-metrics {
|
||
gap: 32px;
|
||
}
|
||
|
||
.pain-grid,
|
||
.solution-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.approach-item {
|
||
grid-template-columns: 1fr;
|
||
gap: 8px;
|
||
}
|
||
|
||
.contact-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: 48px;
|
||
}
|
||
|
||
.footer-inner {
|
||
flex-direction: column;
|
||
gap: 24px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="bg-effects">
|
||
<div class="bg-gradient-1"></div>
|
||
<div class="bg-gradient-2"></div>
|
||
<div class="bg-gradient-3"></div>
|
||
<div class="bg-grid"></div>
|
||
<div class="bg-glow"></div>
|
||
<div class="particles">
|
||
<div class="particle"></div>
|
||
<div class="particle"></div>
|
||
<div class="particle"></div>
|
||
<div class="particle"></div>
|
||
<div class="particle"></div>
|
||
<div class="particle"></div>
|
||
<div class="particle"></div>
|
||
<div class="particle"></div>
|
||
<div class="particle"></div>
|
||
<div class="particle"></div>
|
||
</div>
|
||
<div class="gradient-border"></div>
|
||
<div class="section-glow"></div>
|
||
</div>
|
||
|
||
<nav>
|
||
<div class="nav-inner">
|
||
<a href="#" class="logo">
|
||
<img src="assets/logo/logo-nav.png" alt="Fischer" height="40" />
|
||
</a>
|
||
<div class="nav-links">
|
||
<a href="#pain-points">痛点</a>
|
||
<a href="#solutions">方案</a>
|
||
<a href="#approach">方法</a>
|
||
<a href="#contact">咨询</a>
|
||
</div>
|
||
<a href="#contact" class="nav-cta">
|
||
立即咨询
|
||
<svg
|
||
width="16"
|
||
height="16"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
>
|
||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<section class="hero">
|
||
<div class="hero-deco deco-1"></div>
|
||
<div class="hero-deco deco-2"></div>
|
||
<div class="hero-deco deco-3"></div>
|
||
<div class="hero-deco deco-4"></div>
|
||
<div class="hero-deco deco-5"></div>
|
||
<div class="container">
|
||
<div class="hero-content">
|
||
<div class="hero-badge">不换系统，2周让AI上岗</div>
|
||
<h1 class="hero-title">
|
||
不换系统<br />
|
||
<span class="accent">2周让AI</span>帮你干活
|
||
</h1>
|
||
<p class="hero-subtitle">
|
||
物业、资管、CRM，都不用换<br />
|
||
AI帮你干重复的事，你做重要的决定
|
||
</p>
|
||
<div class="hero-actions">
|
||
<a href="#solutions" class="btn-primary">
|
||
看看适不适合我
|
||
<svg
|
||
width="18"
|
||
height="18"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
>
|
||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||
</svg>
|
||
</a>
|
||
<a href="#contact" class="btn-secondary">先问问再说</a>
|
||
</div>
|
||
<div class="hero-metrics">
|
||
<div class="metric">
|
||
<div class="metric-value">2周</div>
|
||
<div class="metric-label">部署上线</div>
|
||
</div>
|
||
<div class="metric">
|
||
<div class="metric-value">0</div>
|
||
<div class="metric-label">数据迁移</div>
|
||
</div>
|
||
<div class="metric">
|
||
<div class="metric-value">原系统</div>
|
||
<div class="metric-label">不用换</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="pain-points" id="pain-points">
|
||
<div class="container">
|
||
<div class="section-header reveal">
|
||
<div class="section-label">顾虑</div>
|
||
<h2 class="section-title">你的顾虑，我们都知道</h2>
|
||
<p class="section-desc">
|
||
换系统太麻烦，数据迁移风险大，招人贵还没效果
|
||
</p>
|
||
</div>
|
||
<div class="pain-grid">
|
||
<div class="pain-card reveal">
|
||
<div class="pain-icon">
|
||
<svg
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="1.5"
|
||
>
|
||
<circle cx="12" cy="12" r="10" />
|
||
<path d="M12 6v6l4 2" />
|
||
</svg>
|
||
</div>
|
||
<h3 class="pain-title">想用AI，但不想换系统</h3>
|
||
<p class="pain-desc">
|
||
系统用习惯了，换了要重新培训，数据迁移还有风险。
|
||
其实不用换，在旁边加个AI帮手就行。
|
||
</p>
|
||
</div>
|
||
<div class="pain-card reveal">
|
||
<div class="pain-icon">
|
||
<svg
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="1.5"
|
||
>
|
||
<path d="M12 2L2 7l10 5 10-5-10-5z" />
|
||
<path d="M2 17l10 5 10-5" />
|
||
<path d="M2 12l10 5 10-5" />
|
||
</svg>
|
||
</div>
|
||
<h3 class="pain-title">招了人，天天在做重复的事</h3>
|
||
<p class="pain-desc">
|
||
销售每天录客户信息，物业员工每天填巡检表。
|
||
人招对了，但时间没用在正事上。
|
||
</p>
|
||
</div>
|
||
<div class="pain-card reveal">
|
||
<div class="pain-icon">
|
||
<svg
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="1.5"
|
||
>
|
||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
|
||
<path d="M9 12l2 2 4-4" />
|
||
</svg>
|
||
</div>
|
||
<h3 class="pain-title">投入了没效果，钱打水漂</h3>
|
||
<p class="pain-desc">
|
||
之前买的系统用不起来，员工不会用也不想用。
|
||
先试再决定，效果好了再扩大。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="solutions" id="solutions">
|
||
<div class="container">
|
||
<div class="section-header reveal">
|
||
<div class="section-label">解决方案</div>
|
||
<h2 class="section-title">不换系统，让AI帮你干活</h2>
|
||
<p class="section-desc">
|
||
行业解决方案 · 业务解决方案 · 营销解决方案 · AI+落地咨询
|
||
</p>
|
||
</div>
|
||
<div class="solution-grid">
|
||
<div class="solution-card reveal">
|
||
<div class="solution-num">01</div>
|
||
<h3 class="solution-title">行业解决方案</h3>
|
||
<p class="solution-desc">
|
||
物业、资管等垂直行业专属AI方案。不换现有系统，在旁边加个AI帮手。
|
||
物业：智能派单、设备预警、巡检规划。资管：租约提醒、空置预警、定价参考。
|
||
</p>
|
||
<div class="solution-features">
|
||
<span class="solution-tag">物业</span>
|
||
<span class="solution-tag">资管</span>
|
||
<span class="solution-tag">行业定制</span>
|
||
</div>
|
||
</div>
|
||
<div class="solution-card reveal">
|
||
<div class="solution-num">02</div>
|
||
<h3 class="solution-title">业务解决方案</h3>
|
||
<p class="solution-desc">
|
||
客服、审批、巡检、报表……高频重复工作，AI帮你干。
|
||
员工还是用原来的界面，只是少了很多麻烦。
|
||
</p>
|
||
<div class="solution-features">
|
||
<span class="solution-tag">智能客服</span>
|
||
<span class="solution-tag">自动审批</span>
|
||
<span class="solution-tag">报表生成</span>
|
||
</div>
|
||
</div>
|
||
<div class="solution-card reveal">
|
||
<div class="solution-num">03</div>
|
||
<h3 class="solution-title">营销解决方案</h3>
|
||
<p class="solution-desc">
|
||
线索自动清洗，销售跟进提醒，客户画像分析。
|
||
让AI帮你筛选意向客户，销售只做最重要的沟通。
|
||
</p>
|
||
<div class="solution-features">
|
||
<span class="solution-tag">线索清洗</span>
|
||
<span class="solution-tag">跟进提醒</span>
|
||
<span class="solution-tag">客户分析</span>
|
||
</div>
|
||
</div>
|
||
<div class="solution-card reveal">
|
||
<div class="solution-num">04</div>
|
||
<h3 class="solution-title">AI+落地咨询</h3>
|
||
<p class="solution-desc">
|
||
不确定自己的场景能不能用AI？30分钟诊断，我们告诉你能不能接、怎么接。
|
||
先试再决定，效果好了再扩大。
|
||
</p>
|
||
<div class="solution-features">
|
||
<span class="solution-tag">免费诊断</span>
|
||
<span class="solution-tag">方案评估</span>
|
||
<span class="solution-tag">按效果付费</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="approach" id="approach">
|
||
<div class="container">
|
||
<div class="section-header reveal">
|
||
<div class="section-label">方法</div>
|
||
<h2 class="section-title">很简单，三步搞定</h2>
|
||
<p class="section-desc">先试再决定，效果好了再扩大</p>
|
||
</div>
|
||
<div class="approach-list">
|
||
<div class="approach-item reveal">
|
||
<div class="approach-num">第一步</div>
|
||
<div class="approach-content">
|
||
<h3>30分钟诊断</h3>
|
||
<p>
|
||
我们看看你的系统现在什么情况，AI能帮你省多少事、花多少钱。
|
||
不卖东西，只帮你分析。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="approach-item reveal">
|
||
<div class="approach-num">第二步</div>
|
||
<div class="approach-content">
|
||
<h3>2周部署上线</h3>
|
||
<p>
|
||
在你现有系统旁边加个AI帮手。不换系统，不迁移数据，不影响现有业务。
|
||
员工还是用原来的界面，只是多了AI帮你干重复的事。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="approach-item reveal">
|
||
<div class="approach-num">第三步</div>
|
||
<div class="approach-content">
|
||
<h3>看效果再决定</h3>
|
||
<p>
|
||
先在一个场景试用，效果好再扩大。不满意可以停，不用一下子投很多钱。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="cta" id="cta">
|
||
<div class="container">
|
||
<div class="cta-content reveal">
|
||
<h2 class="cta-title">先聊聊，看看适不适合你</h2>
|
||
<p class="cta-desc">30分钟免费诊断，不推销，只帮你分析</p>
|
||
<div class="hero-actions">
|
||
<a href="#contact" class="btn-primary">
|
||
预约免费诊断
|
||
<svg
|
||
width="18"
|
||
height="18"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
>
|
||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="contact" id="contact">
|
||
<div class="container">
|
||
<div class="contact-grid">
|
||
<div class="contact-info reveal">
|
||
<h2>有问题？直接联系我们</h2>
|
||
<p>预约诊断、了解方案、商务合作。有问题随时问，不收费。</p>
|
||
<div class="contact-detail">
|
||
<svg
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="1.5"
|
||
>
|
||
<path
|
||
d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"
|
||
/>
|
||
</svg>
|
||
<span>400-888-8888</span>
|
||
</div>
|
||
<div class="contact-detail">
|
||
<svg
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="1.5"
|
||
>
|
||
<path
|
||
d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
|
||
/>
|
||
<path d="M22 6l-10 7L2 6" />
|
||
</svg>
|
||
<span>contact@fischer.ai</span>
|
||
</div>
|
||
<div class="contact-detail">
|
||
<svg
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="1.5"
|
||
>
|
||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
|
||
<circle cx="12" cy="10" r="3" />
|
||
</svg>
|
||
<span>上海市浦东新区张江高科技园区</span>
|
||
</div>
|
||
</div>
|
||
<form class="contact-form reveal" onsubmit="handleSubmit(event)">
|
||
<div class="form-group">
|
||
<label class="form-label">您的名字</label>
|
||
<input
|
||
type="text"
|
||
class="form-input"
|
||
placeholder="怎么称呼您"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">手机号码</label>
|
||
<input type="tel" class="form-input" placeholder="方便联系您" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">邮箱（选填）</label>
|
||
<input type="email" class="form-input" placeholder="您的邮箱" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">您的行业</label>
|
||
<input
|
||
type="text"
|
||
class="form-input"
|
||
placeholder="物业管理、资产管理、金融行业、零售行业..."
|
||
/>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">您希望AI落地的领域（可多选）</label>
|
||
<div class="checkbox-group">
|
||
<label class="checkbox-item">
|
||
<input type="checkbox" name="ai" value="获客" />
|
||
<span class="checkbox-box"></span>
|
||
<span class="checkbox-label">获客</span>
|
||
</label>
|
||
<label class="checkbox-item">
|
||
<input type="checkbox" name="ai" value="流程管理" />
|
||
<span class="checkbox-box"></span>
|
||
<span class="checkbox-label">流程管理</span>
|
||
</label>
|
||
<label class="checkbox-item">
|
||
<input type="checkbox" name="ai" value="效率提升" />
|
||
<span class="checkbox-box"></span>
|
||
<span class="checkbox-label">效率提升</span>
|
||
</label>
|
||
<label class="checkbox-item">
|
||
<input type="checkbox" name="ai" value="其他" />
|
||
<span class="checkbox-box"></span>
|
||
<span class="checkbox-label">其他</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">咨询内容</label>
|
||
<textarea
|
||
class="form-input"
|
||
placeholder="简单说说您现在遇到的问题，或者想了解什么"
|
||
></textarea>
|
||
<div class="char-count">0/1000</div>
|
||
</div>
|
||
<button type="submit" class="form-submit">预约免费诊断</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<div class="container">
|
||
<div class="footer-inner">
|
||
<div class="footer-left">
|
||
<img src="assets/logo/logo-footer.png" alt="Fischer" />
|
||
<div>© 2026 上海菲西尔智能科技有限公司</div>
|
||
</div>
|
||
<div class="footer-links">
|
||
<a href="#">隐私政策</a>
|
||
<a href="#">服务条款</a>
|
||
<a href="#">沪ICP备12345678号</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// Scroll reveal
|
||
const reveals = document.querySelectorAll(".reveal");
|
||
const revealObserver = new IntersectionObserver(
|
||
(entries) => {
|
||
entries.forEach((entry) => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add("visible");
|
||
}
|
||
});
|
||
},
|
||
{ threshold: 0.1, rootMargin: "0px 0px -50px 0px" },
|
||
);
|
||
|
||
reveals.forEach((el) => revealObserver.observe(el));
|
||
|
||
// Nav scroll
|
||
const nav = document.querySelector("nav");
|
||
window.addEventListener("scroll", () => {
|
||
if (window.scrollY > 50) {
|
||
nav.classList.add("scrolled");
|
||
} else {
|
||
nav.classList.remove("scrolled");
|
||
}
|
||
});
|
||
|
||
// Form submit
|
||
function handleSubmit(e) {
|
||
e.preventDefault();
|
||
const btn = e.target.querySelector(".form-submit");
|
||
btn.textContent = "提交中...";
|
||
btn.disabled = true;
|
||
setTimeout(() => {
|
||
btn.textContent = "提交成功！";
|
||
btn.style.background = "#22c55e";
|
||
setTimeout(() => {
|
||
btn.textContent = "提交咨询";
|
||
btn.style.background = "";
|
||
btn.disabled = false;
|
||
e.target.reset();
|
||
}, 2000);
|
||
}, 1500);
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|