feat: taste-skill UI改造
- 字体升级 Inter → Geist Sans - Feature Cards 改为非对称 Bento 布局 - 移除假代码预览窗口，替换为品牌数据视觉 - Services 后两项改为 Bento 网格卡片 - 移除无用的 testimonials CSS - 移除暗色模式代码高亮样式
This commit is contained in:
chiguyong
parent
f2d879b3fd
commit
22bc45f194
223
index.html
223
index.html
|
|
@ -7,7 +7,8 @@
|
||||||
<meta name="description" content="不换系统，2周让AI上岗。市场部缺线索、生产部忙不过来、老板要报表、财务对账头大——在现有工具上叠加AI能力，快速见效。">
|
<meta name="description" content="不换系统，2周让AI上岗。市场部缺线索、生产部忙不过来、老板要报表、财务对账头大——在现有工具上叠加AI能力，快速见效。">
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<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">
|
<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/gsap.min.js"></script>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
|
||||||
<style>
|
<style>
|
||||||
|
|
@ -38,7 +39,7 @@
|
||||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
|
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
|
||||||
body {
|
body {
|
||||||
font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
font-family: 'Geist Sans', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
background: var(--bg); color: var(--text-1); line-height: 1.7;
|
background: var(--bg); color: var(--text-1); line-height: 1.7;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
}
|
}
|
||||||
|
|
@ -127,34 +128,60 @@
|
||||||
}
|
}
|
||||||
.btn-secondary:hover { background: var(--bg-soft); border-color: var(--text-3); }
|
.btn-secondary:hover { background: var(--bg-soft); border-color: var(--text-3); }
|
||||||
|
|
||||||
/* Hero visual - code preview style */
|
.hero-visual-abstract {
|
||||||
.hero-visual {
|
position: relative;
|
||||||
background: var(--bg); border: 1px solid var(--divider);
|
width: 100%;
|
||||||
border-radius: var(--radius-lg); overflow: hidden;
|
aspect-ratio: 4/3;
|
||||||
box-shadow: var(--shadow-3);
|
background: linear-gradient(135deg, var(--brand-soft) 0%, rgba(59,130,246,0.04) 100%);
|
||||||
|
border: 1px solid var(--divider);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
.hero-visual-header {
|
.abstract-shape {
|
||||||
padding: 12px 16px; background: var(--bg-soft);
|
position: absolute;
|
||||||
border-bottom: 1px solid var(--divider);
|
border-radius: 50%;
|
||||||
display: flex; align-items: center; gap: 8px;
|
opacity: 0.15;
|
||||||
}
|
}
|
||||||
.hero-visual-dot { width: 10px; height: 10px; border-radius: 50%; }
|
.shape-1 {
|
||||||
.hero-visual-dot.r { background: #ff5f57; }
|
width: 300px; height: 300px;
|
||||||
.hero-visual-dot.y { background: #febc2e; }
|
background: var(--brand);
|
||||||
.hero-visual-dot.g { background: #28c840; }
|
top: -80px; right: -60px;
|
||||||
.hero-visual-body { padding: 20px; font-family: 'JetBrains Mono', monospace; font-size: 13px; }
|
}
|
||||||
.code-line { display: flex; gap: 16px; margin-bottom: 8px; }
|
.shape-2 {
|
||||||
.code-num { color: var(--text-3); min-width: 24px; text-align: right; user-select: none; }
|
width: 200px; height: 200px;
|
||||||
.code-content { color: var(--text-2); }
|
background: var(--brand-light);
|
||||||
.code-keyword { color: #cf222e; }
|
bottom: -40px; left: -30px;
|
||||||
.code-string { color: #0a3069; }
|
}
|
||||||
.code-func { color: #8250df; }
|
.shape-3 {
|
||||||
.code-comment { color: #6e7781; }
|
width: 120px; height: 120px;
|
||||||
@media (prefers-color-scheme: dark) {
|
background: var(--brand-dark);
|
||||||
.code-keyword { color: #ff7b72; }
|
top: 50%; left: 50%;
|
||||||
.code-string { color: #a5d6ff; }
|
transform: translate(-50%, -50%);
|
||||||
.code-func { color: #d2a8ff; }
|
opacity: 0.08;
|
||||||
.code-comment { color: #8b949e; }
|
}
|
||||||
|
.hero-visual-content {
|
||||||
|
display: flex;
|
||||||
|
gap: 40px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.visual-stat {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.visual-stat-num {
|
||||||
|
display: block;
|
||||||
|
font-family: 'Space Grotesk', sans-serif;
|
||||||
|
font-size: 36px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--brand);
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
.visual-stat-label {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--text-3);
|
||||||
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ========== FEATURES ========== */
|
/* ========== FEATURES ========== */
|
||||||
|
|
@ -168,7 +195,16 @@
|
||||||
}
|
}
|
||||||
.features-header p { color: var(--text-2); font-size: 17px; }
|
.features-header p { color: var(--text-2); font-size: 17px; }
|
||||||
.features-grid {
|
.features-grid {
|
||||||
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
|
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
|
||||||
|
}
|
||||||
|
.feature-card.wide {
|
||||||
|
grid-column: span 2;
|
||||||
|
}
|
||||||
|
.feature-card.wide .feature-card-inner {
|
||||||
|
display: flex; gap: 24px; align-items: flex-start;
|
||||||
|
}
|
||||||
|
.feature-card.wide .feature-icon {
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
.feature-card {
|
.feature-card {
|
||||||
padding: 32px; background: var(--bg-soft);
|
padding: 32px; background: var(--bg-soft);
|
||||||
|
|
@ -232,6 +268,22 @@
|
||||||
aspect-ratio: 16/10; box-shadow: var(--shadow-2);
|
aspect-ratio: 16/10; box-shadow: var(--shadow-2);
|
||||||
}
|
}
|
||||||
.service-img img { width: 100%; height: 100%; object-fit: cover; }
|
.service-img img { width: 100%; height: 100%; object-fit: cover; }
|
||||||
|
.services-bento {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 3fr 2fr;
|
||||||
|
gap: 24px;
|
||||||
|
padding-top: 48px;
|
||||||
|
border-top: 1px solid var(--divider);
|
||||||
|
}
|
||||||
|
.bento-card {
|
||||||
|
padding: 40px;
|
||||||
|
background: var(--bg);
|
||||||
|
border: 1px solid var(--divider);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
}
|
||||||
|
.bento-card.bento-large {
|
||||||
|
background: linear-gradient(135deg, var(--brand-soft) 0%, var(--bg) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
/* ========== HOW IT WORKS ========== */
|
/* ========== HOW IT WORKS ========== */
|
||||||
.how {
|
.how {
|
||||||
|
|
@ -261,38 +313,6 @@
|
||||||
.step h4 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
|
.step h4 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
|
||||||
.step p { font-size: 14px; color: var(--text-2); line-height: 1.6; }
|
.step p { font-size: 14px; color: var(--text-2); line-height: 1.6; }
|
||||||
|
|
||||||
/* ========== TESTIMONIALS ========== */
|
|
||||||
.testimonials {
|
|
||||||
background: var(--bg-soft); padding: 80px 32px;
|
|
||||||
}
|
|
||||||
.testimonials-inner { max-width: var(--max-width); margin: 0 auto; }
|
|
||||||
.testimonials-header { text-align: center; margin-bottom: 48px; }
|
|
||||||
.testimonials-header h2 {
|
|
||||||
font-family: 'Space Grotesk', sans-serif; font-size: 36px; font-weight: 700;
|
|
||||||
}
|
|
||||||
.testimonial-grid {
|
|
||||||
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
|
|
||||||
}
|
|
||||||
.testimonial-card {
|
|
||||||
padding: 32px; background: var(--bg);
|
|
||||||
border: 1px solid var(--divider); border-radius: var(--radius-lg);
|
|
||||||
}
|
|
||||||
.testimonial-card p {
|
|
||||||
font-size: 15px; color: var(--text-2); line-height: 1.7;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
.testimonial-author {
|
|
||||||
display: flex; align-items: center; gap: 12px;
|
|
||||||
}
|
|
||||||
.testimonial-avatar {
|
|
||||||
width: 40px; height: 40px; border-radius: 50%;
|
|
||||||
background: linear-gradient(135deg, var(--brand), var(--brand-light));
|
|
||||||
display: flex; align-items: center; justify-content: center;
|
|
||||||
color: #fff; font-size: 14px; font-weight: 700;
|
|
||||||
}
|
|
||||||
.testimonial-author div { font-size: 14px; }
|
|
||||||
.testimonial-author div span { display: block; color: var(--text-3); font-size: 12px; }
|
|
||||||
|
|
||||||
/* ========== CTA ========== */
|
/* ========== CTA ========== */
|
||||||
.cta {
|
.cta {
|
||||||
padding: 80px 32px; max-width: var(--max-width); margin: 0 auto;
|
padding: 80px 32px; max-width: var(--max-width); margin: 0 auto;
|
||||||
|
|
@ -498,16 +518,22 @@
|
||||||
.hero-inner { grid-template-columns: 1fr; }
|
.hero-inner { grid-template-columns: 1fr; }
|
||||||
.hero-visual { display: none; }
|
.hero-visual { display: none; }
|
||||||
.features-grid { grid-template-columns: repeat(2, 1fr); }
|
.features-grid { grid-template-columns: repeat(2, 1fr); }
|
||||||
|
.feature-card.wide { grid-column: span 2; }
|
||||||
.service-row { grid-template-columns: 1fr; }
|
.service-row { grid-template-columns: 1fr; }
|
||||||
.service-row.reverse .service-text { order: 1; }
|
.service-row.reverse .service-text { order: 1; }
|
||||||
.service-row.reverse .service-img { order: 2; }
|
.service-row.reverse .service-img { order: 2; }
|
||||||
|
.services-bento { grid-template-columns: 1fr; }
|
||||||
.how-steps { grid-template-columns: repeat(2, 1fr); }
|
.how-steps { grid-template-columns: repeat(2, 1fr); }
|
||||||
}
|
}
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.nav-links { display: none; }
|
.nav-links { display: none; }
|
||||||
.features-grid { grid-template-columns: 1fr; }
|
.features-grid { grid-template-columns: 1fr; }
|
||||||
|
.feature-card.wide { grid-column: span 1; }
|
||||||
|
.feature-card.wide .feature-card-inner { flex-direction: column; }
|
||||||
.how-steps { grid-template-columns: 1fr; }
|
.how-steps { grid-template-columns: 1fr; }
|
||||||
.service-metric { flex-direction: column; gap: 16px; }
|
.service-metric { flex-direction: column; gap: 16px; }
|
||||||
|
.services-bento { grid-template-columns: 1fr; }
|
||||||
|
.bento-card { padding: 24px; }
|
||||||
.form-row { grid-template-columns: 1fr; }
|
.form-row { grid-template-columns: 1fr; }
|
||||||
.contact-form { padding: 24px; }
|
.contact-form { padding: 24px; }
|
||||||
.footer { flex-direction: column; gap: 16px; text-align: center; }
|
.footer { flex-direction: column; gap: 16px; text-align: center; }
|
||||||
|
|
@ -548,23 +574,24 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="hero-visual">
|
<div class="hero-visual">
|
||||||
<div class="hero-visual-header">
|
<div class="hero-visual-abstract">
|
||||||
<span class="hero-visual-dot r"></span>
|
<div class="abstract-shape shape-1"></div>
|
||||||
<span class="hero-visual-dot y"></span>
|
<div class="abstract-shape shape-2"></div>
|
||||||
<span class="hero-visual-dot g"></span>
|
<div class="abstract-shape shape-3"></div>
|
||||||
<span style="margin-left:8px;font-size:12px;color:var(--text-3);">fischer-ai.js</span>
|
<div class="hero-visual-content">
|
||||||
|
<div class="visual-stat">
|
||||||
|
<span class="visual-stat-num">2周</span>
|
||||||
|
<span class="visual-stat-label">快速部署</span>
|
||||||
|
</div>
|
||||||
|
<div class="visual-stat">
|
||||||
|
<span class="visual-stat-num">0</span>
|
||||||
|
<span class="visual-stat-label">系统改造</span>
|
||||||
|
</div>
|
||||||
|
<div class="visual-stat">
|
||||||
|
<span class="visual-stat-num">80%</span>
|
||||||
|
<span class="visual-stat-label">效率提升</span>
|
||||||
|
</div>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -577,13 +604,17 @@
|
||||||
<p>在现有工具上加点东西，比推倒重来划算得多</p>
|
<p>在现有工具上加点东西，比推倒重来划算得多</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="features-grid">
|
<div class="features-grid">
|
||||||
<div class="feature-card">
|
<div class="feature-card wide">
|
||||||
|
<div class="feature-card-inner">
|
||||||
<div class="feature-icon">
|
<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>
|
<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>
|
</div>
|
||||||
|
<div>
|
||||||
<h3>2周上线</h3>
|
<h3>2周上线</h3>
|
||||||
<p>不用等半年实施周期。接个API，配置一下，两周就能用。不影响现有业务。</p>
|
<p>不用等半年实施周期。接个API，配置一下，两周就能用。不影响现有业务。</p>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="feature-card">
|
<div class="feature-card">
|
||||||
<div class="feature-icon">
|
<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>
|
<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>
|
||||||
|
|
@ -612,14 +643,18 @@
|
||||||
<h3>越用越顺手</h3>
|
<h3>越用越顺手</h3>
|
||||||
<p>基于你的真实业务数据，不是通用模板。用久了会发现它越来越懂你。</p>
|
<p>基于你的真实业务数据，不是通用模板。用久了会发现它越来越懂你。</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="feature-card">
|
<div class="feature-card wide">
|
||||||
|
<div class="feature-card-inner">
|
||||||
<div class="feature-icon">
|
<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>
|
<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>
|
</div>
|
||||||
|
<div>
|
||||||
<h3>不用维护</h3>
|
<h3>不用维护</h3>
|
||||||
<p>我们负责后台更新和优化，你不用招专人维护。有问题找我们就行。</p>
|
<p>我们负责后台更新和优化，你不用招专人维护。有问题找我们就行。</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Services -->
|
<!-- Services -->
|
||||||
|
|
@ -671,12 +706,11 @@
|
||||||
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&h=500&fit=crop" alt="智能增效">
|
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&h=500&fit=crop" alt="智能增效">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 智能助手 -->
|
<div class="services-bento">
|
||||||
<div class="service-row">
|
<div class="bento-card bento-large">
|
||||||
<div class="service-text">
|
|
||||||
<span class="service-tag">智能助手 · 适合财务部、人事行政</span>
|
<span class="service-tag">智能助手 · 适合财务部、人事行政</span>
|
||||||
<h3>对账对到眼花？表格做不完？</h3>
|
<h3 style="font-family:'Space Grotesk','Noto Sans SC',sans-serif;font-size:28px;font-weight:700;margin-bottom:16px;">对账对到眼花？表格做不完？</h3>
|
||||||
<p>财务月底对账要加班、报销单据堆成山；人事算考勤算绩效、行政管资产管采购，全是重复劳动。我们在现有财务/人事系统上加个自动化层——自动对账、智能报销审核、考勤异常自动标记、资产到期自动提醒。减少80%重复工作。</p>
|
<p style="color:var(--text-2);line-height:1.7;margin-bottom:20px;">财务月底对账要加班、报销单据堆成山；人事算考勤算绩效、行政管资产管采购，全是重复劳动。我们在现有财务/人事系统上加个自动化层——自动对账、智能报销审核、考勤异常自动标记、资产到期自动提醒。减少80%重复工作。</p>
|
||||||
<div class="service-metric">
|
<div class="service-metric">
|
||||||
<div class="metric-item">
|
<div class="metric-item">
|
||||||
<h4>自动对账</h4>
|
<h4>自动对账</h4>
|
||||||
|
|
@ -688,16 +722,10 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="service-img">
|
<div class="bento-card bento-small">
|
||||||
<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>
|
<span class="service-tag">智能洞察 · 适合老板、管理层</span>
|
||||||
<h3>报表等太久？决策靠感觉？</h3>
|
<h3 style="font-family:'Space Grotesk','Noto Sans SC',sans-serif;font-size:28px;font-weight:700;margin-bottom:16px;">报表等太久？决策靠感觉？</h3>
|
||||||
<p>每周一等报表、数据散落在各个系统、发现问题已经晚了。我们把所有系统的数据接进来，老板随时问"这个月哪个区域利润最高""库存有没有风险"，秒出答案。不用等周报，不用催下属，打开手机就能看。</p>
|
<p style="color:var(--text-2);line-height:1.7;margin-bottom:20px;">我们把所有系统的数据接进来，老板随时问"这个月哪个区域利润最高""库存有没有风险"，秒出答案。不用等周报，不用催下属，打开手机就能看。</p>
|
||||||
<div class="service-metric">
|
<div class="service-metric">
|
||||||
<div class="metric-item">
|
<div class="metric-item">
|
||||||
<h4>一问即答</h4>
|
<h4>一问即答</h4>
|
||||||
|
|
@ -709,9 +737,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
@ -846,6 +871,12 @@
|
||||||
scrollTrigger: { trigger: row, start: 'top 80%' }
|
scrollTrigger: { trigger: row, start: 'top 80%' }
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
gsap.utils.toArray('.bento-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
|
// Animate steps
|
||||||
gsap.utils.toArray('.step').forEach((step, i) => {
|
gsap.utils.toArray('.step').forEach((step, i) => {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue