<!DOCTYPE html>
<html lang="zh-CN" data-theme="aurora">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>有点用传媒 | 多彩苹果风 · 交互增强</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
<!-- Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"/>
<style>
/* ============ 基础与主题 ============ */
:root{
--bg:#ffffff; --text:#0b0b0f; --muted:#596275; --line:#e9eef3; --radius:18px;
--shadow:0 20px 60px rgba(18,23,30,.08);
--container:1180px;
--h1:clamp(40px,7.5vw,72px);
--h2:clamp(28px,4.5vw,46px);
--h3:clamp(18px,2.6vw,24px);
--lead:clamp(16px,2.2vw,20px);
--btnh:46px;
/* 主题色（会被data-theme覆盖） */
--c1:#7C3AED; --c2:#06B6D4; --c3:#22C55E; --c4:#F43F5E; --c5:#F59E0B;
}
html[data-theme="aurora"]{ --c1:#7C3AED; --c2:#06B6D4; --c3:#22C55E; --c4:#F43F5E; --c5:#F59E0B; }
html[data-theme="ocean"] { --c1:#0EA5E9; --c2:#1D4ED8; --c3:#14B8A6; --c4:#38BDF8; --c5:#2563EB; }
html[data-theme="sunset"]{ --c1:#F97316; --c2:#EF4444; --c3:#EAB308; --c4:#FB7185; --c5:#F59E0B; }
html[data-theme="neon"] { --c1:#22D3EE; --c2:#A78BFA; --c3:#34D399; --c4:#F472B6; --c5:#FB7185; }
*{box-sizing:border-box}
body{
margin:0; font-family:Inter,'Noto Sans SC','PingFang SC','Microsoft YaHei',system-ui,-apple-system,sans-serif;
color:var(--text); background:
radial-gradient(1200px 500px at 10% -10%, color-mix(in oklab, var(--c1) 12%, #fff) 0%, transparent 60%),
radial-gradient(900px 400px at 110% 0%, color-mix(in oklab, var(--c2) 10%, #fff) 0%, transparent 65%),
linear-gradient(#fff,#fff);
line-height:1.75; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth;
}
a{color:inherit;text-decoration:none}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
/* ============ 顶部导航（苹果风：细线、下划线动效） ============ */
.nav{
position:sticky; top:0; z-index:60; backdrop-filter:saturate(140%) blur(10px);
background:rgba(255,255,255,.7); border-bottom:1px solid rgba(0,0,0,.06);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:68px}
.brand{display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.2px}
.brand .ico{font-size:20px}
.nav-links{display:flex; gap:18px; font-size:14.5px}
.nav-links a{position:relative; padding:8px 6px; opacity:.9}
.nav-links a::after{
content:""; position:absolute; left:0; bottom:0; height:2px; width:0%;
background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3)); transition:width .25s ease;
}
.nav-links a:hover::after, .nav-links a.active::after{width:100%}
.btn{
position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
height:var(--btnh); padding:0 16px; border-radius:14px; border:1px solid var(--line);
background:linear-gradient(180deg,#fff, color-mix(in oklab,#fff 82%, var(--c1) 18%));
font-weight:800; cursor:pointer; overflow:hidden;
box-shadow:0 10px 24px rgba(0,0,0,.08);
}
/* ============ 首屏（大字+多彩渐变+视差） ============ */
header.hero{position:relative; overflow:hidden}
.hero-wrap{padding:108px 0 72px}
.badge{display:inline-flex; gap:8px; align-items:center; border:1px solid var(--line); padding:8px 12px; border-radius:999px; font-size:12px; background:#fff}
.hero h1{
font-size:var(--h1); margin:18px 0 12px; letter-spacing:-.6px; line-height:1.08;
background:linear-gradient(90deg,var(--c1),var(--c2),var(--c4)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .lead{font-size:var(--lead); color:#2a3140; max-width:860px}
.hero-art{
position:absolute; inset:auto -20vw -35% -20vw; height:65%; z-index:-1; filter:blur(20px) saturate(115%);
background:
radial-gradient(40% 60% at 30% 45%, color-mix(in oklab,var(--c1) 20%, transparent), transparent 70%),
radial-gradient(40% 40% at 65% 55%, color-mix(in oklab,var(--c2) 18%, transparent), transparent 70%),
radial-gradient(35% 35% at 85% 25%, color-mix(in oklab,var(--c3) 18%, transparent), transparent 70%);
transform:translateZ(0);
}
/* ============ 分区与卡片（苹果式留白、大块卡片） ============ */
section{padding:90px 0; border-top:1px solid var(--line); position:relative}
section:first-of-type{border-top:none}
.section-head{display:flex; justify-content:space-between; gap:24px; align-items:flex-end; margin-bottom:34px}
.section-head h2{
font-size:var(--h2); letter-spacing:-.3px; margin:0;
background:linear-gradient(90deg,var(--c1),var(--c2)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.section-head p{max-width:720px; margin:0; color:#3b4352}
.grid{display:grid; gap:24px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tile{
position:relative; border-radius:28px; overflow:hidden; background:#fff; border:1px solid var(--line);
box-shadow:var(--shadow); transform-style:preserve-3d; perspective:1000px;
}
.tile .inner{padding:34px}
.tile .bg{
position:absolute; inset:0; pointer-events:none; opacity:.9;
background:
radial-gradient(800px 300px at -10% -10%, color-mix(in oklab, var(--c1) 14%, transparent), transparent 60%),
radial-gradient(600px 300px at 110% 0%, color-mix(in oklab, var(--c2) 12%, transparent), transparent 65%),
conic-gradient(from 180deg at 110% -10%, color-mix(in oklab,var(--c5) 10%, transparent), transparent 35%, color-mix(in oklab,var(--c4) 10%, transparent) 60%, transparent 100%);
mix-blend-mode:multiply;
}
.card{
background:#fff; border:1px solid var(--line); border-radius:18px; padding:24px; box-shadow:0 10px 40px rgba(0,0,0,.06);
}
h3{font-size:var(--h3); margin:0 0 10px; letter-spacing:-.2px}
.muted{color:var(--muted)}
.bullets{list-style:none; margin:14px 0 0; padding:0}
.bullets li{position:relative; padding-left:28px; margin:10px 0; color:#2b2f36}
.bullets li::before{
content:""; position:absolute; left:0; top:.62em; width:10px; height:10px; border-radius:50%;
background:conic-gradient(var(--c1) 0 33%, var(--c2) 0 66%, var(--c3) 0);
box-shadow:0 0 0 3px color-mix(in oklab,#fff 82%, var(--c2) 18%);
}
/* ============ 多彩图标 ============ */
.ico{
display:inline-block; background:linear-gradient(120deg,var(--c1),var(--c2),var(--c4)); -webkit-background-clip:text; background-clip:text; color:transparent;
filter:drop-shadow(0 10px 20px color-mix(in oklab,var(--c2) 30%, transparent));
}
/* 不同色带：给每个icon自由搭配 */
.g1{background:linear-gradient(120deg,var(--c1),var(--c2))}
.g2{background:linear-gradient(120deg,var(--c2),var(--c3))}
.g3{background:linear-gradient(120deg,var(--c3),var(--c4))}
.g4{background:linear-gradient(120deg,var(--c4),var(--c5))}
.g5{background:linear-gradient(120deg,var(--c5),var(--c1))}
.g6{background:linear-gradient(120deg,var(--c1),var(--c3))}
.g7{background:linear-gradient(120deg,var(--c2),var(--c5))}
.g8{background:linear-gradient(120deg,var(--c3),var(--c1))}
/* ============ 交互组件：Tabs, Accordion, Toast, Modal ============ */
.tabs{display:flex; gap:10px; flex-wrap:wrap}
.tab{
border:1px solid var(--line); background:linear-gradient(180deg,#fff, color-mix(in oklab,#fff 80%, var(--c2) 20%));
padding:10px 14px; border-radius:999px; font-weight:700; cursor:pointer; user-select:none;
}
.tab.active{outline:2px solid color-mix(in oklab,var(--c2) 45%, #fff); background:#fff}
.tabpanes{margin-top:16px}
.tabpane{display:none}
.tabpane.active{display:block; animation:fade .35s ease}
@keyframes fade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.accordion{display:grid; gap:14px; margin-top:10px}
.acc{
border:1px solid var(--line); border-radius:14px; overflow:hidden; background:linear-gradient(180deg,#fff,#fff);
}
.acc-h{
display:flex; align-items:center; justify-content:space-between; padding:14px 16px; cursor:pointer; font-weight:800
}
.acc-c{max-height:0; overflow:hidden; transition:max-height .3s ease}
.acc.open .acc-c{max-height:320px}
.acc i{transition:.2s}
.acc.open i{transform:rotate(180deg)}
.toast{
position:fixed; left:50%; bottom:20px; transform:translateX(-50%) translateY(20px);
background:#111; color:#fff; padding:10px 14px; border-radius:12px; opacity:0; pointer-events:none; z-index:80
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.modal{
position:fixed; inset:0; background:rgba(10,12,16,.45); display:none; align-items:center; justify-content:center; z-index:70;
backdrop-filter:blur(4px);
}
.modal .box{
width:min(560px,90vw); background:#fff; border-radius:20px; border:1px solid var(--line); box-shadow:var(--shadow); padding:22px;
}
/* ============ 动画与效果 ============ */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}
.tilt{transform:perspective(1100px) rotateX(0) rotateY(0); transition: transform .12s ease}
.btn:active{transform:translateY(1px)}
.ripple{position:absolute; border-radius:50%; transform:scale(0); animation:rip .6s ease-out; background:color-mix(in oklab,#fff 40%, var(--c2) 60%)}
@keyframes rip{to{transform:scale(12); opacity:0}}
/* ============ 页脚 & Palette ============ */
footer{padding:64px 0; border-top:1px solid var(--line)}
.contacts{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.contact{display:flex; gap:10px; align-items:center; padding:10px 14px; border:1px solid var(--line); border-radius:12px; cursor:pointer; background:#fff}
.copyright{margin-top:12px; color:#6b7280; text-align:center; font-size:14px}
.palette{
position:fixed; right:18px; bottom:18px; z-index:75; display:flex; gap:10px; align-items:center;
background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 10px; box-shadow:0 10px 24px rgba(0,0,0,.12);
}
.dot{width:18px; height:18px; border-radius:50%; border:1px solid rgba(0,0,0,.1); cursor:pointer; box-shadow:0 6px 12px rgba(0,0,0,.08)}
.lab{font-size:12px; color:#475569; margin-right:6px}
/* ============ 响应式 ============ */
@media (max-width:980px){
.grid-2,.grid-3{grid-template-columns:1fr}
.nav-links{display:none}
.hero-wrap{padding:92px 0 60px}
}
</style>
</head>
<body>
<!-- NAV -->
<div class="nav">
<div class="container nav-inner">
<div class="brand">
<i class="fa-solid fa-bolt ico g6"></i>
有点用传媒
</div>
<div class="nav-links">
<a href="#core">品牌核心</a>
<a href="#plan">品牌策划</a>
<a href="#online">线上营销</a>
<a href="#interactive">互动区</a>
<a href="#principles">工作原则</a>
<a href="#contact" class="cta">
<button class="btn" data-open-modal><i class="fa-regular fa-envelope ico g2"></i> 联系我们</button>
</a>
</div>
</div>
</div>
<!-- HERO -->
<header class="hero">
<div class="hero-art" aria-hidden="true"></div>
<div class="container hero-wrap">
<span class="badge"><i class="fa-regular fa-star ico g4"></i> 高级品牌手册</span>
<h1 class="reveal">热爱是所有的理由和答案</h1>
<p class="lead reveal">
以热爱为引擎，以数据为罗盘，再造增长。我们只做一件事——
<strong>打胜战 · 拿结果</strong>。以系统化方法论和工业化执行力，帮品牌构建自循环的用户增长引擎。
</p>
</div>
</header>
<!-- Apple式大磁贴区（彩色图标+3D倾斜） -->
<section id="core">
<div class="container">
<div class="grid grid-3">
<div class="tile tilt reveal">
<div class="bg"></div>
<div class="inner">
<h3><i class="fa-solid fa-bullseye ico g1"></i> 经营理念</h3>
<p class="muted">「热爱」 + 「打胜战，拿结果」</p>
<ul class="bullets">
<li><strong>热爱驱动创新：</strong>把偏执变成解决方案。</li>
<li><strong>数据定义未来：</strong>用一线数据验证每一步。</li>
<li><strong>再造非复制：</strong>为每个品牌定制增长基因。</li>
</ul>
</div>
</div>
<div class="tile tilt reveal">
<div class="bg"></div>
<div class="inner">
<h3><i class="fa-solid fa-hands-holding-circle ico g2"></i> 服务理念</h3>
<p class="muted">「陪客户跳双人舞：深扎痛点，共创新生」</p>
<div class="grid" style="grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:10px">
<div class="card"><i class="fa-solid fa-chart-line ico g3"></i> 数据驱动</div>
<div class="card"><i class="fa-solid fa-sliders ico g5"></i> 定制方案</div>
<div class="card"><i class="fa-solid fa-atom ico g7"></i> 全链路</div>
<div class="card"><i class="fa-solid fa-rocket ico g4"></i> 快速迭代</div>
</div>
</div>
</div>
<div class="tile tilt reveal">
<div class="bg"></div>
<div class="inner">
<h3><i class="fa-solid fa-flag-checkered ico g3"></i> 发展目标</h3>
<p class="muted">成为品牌增长首选伙伴</p>
<ul class="bullets">
<li>构建自循环的用户增长引擎</li>
<li>全局效率革命 · 动态抗衰机制</li>
<li>资产复利 · 持续可见的增量</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- 品牌策划（Tabs + 计数器） -->
<section id="plan">
<div class="container">
<div class="section-head">
<h2>品牌策划</h2>
<p>系统化、可落地的月度策划方案，像产品一样打磨每一次活动。</p>
</div>
<div class="tabs">
<div class="tab active" data-tab="tab1"><i class="fa-solid fa-chess-queen ico g6"></i> 策略</div>
<div class="tab" data-tab="tab2"><i class="fa-solid fa-pen-ruler ico g7"></i> 设计</div>
<div class="tab" data-tab="tab3"><i class="fa-solid fa-database ico g8"></i> 数据</div>
</div>
<div class="tabpanes">
<div class="tabpane active" id="tab1">
<div class="grid grid-2">
<div class="card reveal">
<h3><i class="fa-solid fa-lightbulb ico g1"></i> 主题方案策划</h3>
<ul class="bullets">
<li>洞察品牌调性与趋势</li>
<li>月度主题与活动机制</li>
<li>预算规划与动态控制</li>
</ul>
</div>
<div class="card reveal">
<h3><i class="fa-solid fa-network-wired ico g2"></i> 资源整合</h3>
<ul class="bullets">
<li>媒体 / KOL / 场地 / 供应商</li>
<li>跨部门协同与进度驾驶舱</li>
</ul>
</div>
</div>
</div>
<div class="tabpane" id="tab2">
<div class="grid grid-2">
<div class="card reveal">
<h3><i class="fa-solid fa-palette ico g4"></i> 视觉系统</h3>
<ul class="bullets">
<li>VI 重塑与键视觉（KV）</li>
<li>详情页流水线 · 社媒物料矩阵</li>
</ul>
</div>
<div class="card reveal">
<h3><i class="fa-solid fa-camera-retro ico g5"></i> 摄影摄像</h3>
<ul class="bullets">
<li>形象片 / 电商短视频 / 活动记录 / 航拍</li>
<li>光影叙事 × 情绪共鸣 × 技术精度</li>
</ul>
</div>
</div>
</div>
<div class="tabpane" id="tab3">
<div class="grid grid-2">
<div class="card reveal">
<h3><i class="fa-solid fa-chart-pie ico g3"></i> 关键指标</h3>
<ul class="bullets">
<li>日报/周报/月报驾驶舱</li>
<li>归因与转化路径分析</li>
</ul>
</div>
<div class="card reveal">
<h3><i class="fa-solid fa-robot ico g6"></i> 决策与预测</h3>
<ul class="bullets">
<li>A/B 与同期群评估</li>
<li>效果跟踪与策略迭代</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 计数器：滚动触发 -->
<div class="grid grid-3" style="margin-top:24px">
<div class="card reveal" style="text-align:center">
<div style="font-size:40px; font-weight:900"><span class="counter" data-to="98">0</span>%</div>
<div class="muted">客户续约率</div>
</div>
<div class="card reveal" style="text-align:center">
<div style="font-size:40px; font-weight:900"><span class="counter" data-to="320">0</span>+</div>
<div class="muted">年度品效项目</div>
</div>
<div class="card reveal" style="text-align:center">
<div style="font-size:40px; font-weight:900"><span class="counter" data-to="12">0</span>周</div>
<div class="muted">平均出成果周期</div>
</div>
</div>
</div>
</section>
<!-- 线上营销（手风琴 + 对比） -->
<section id="online">
<div class="container">
<div class="section-head">
<h2>线上营销</h2>
<p>让线上运营从成本中心变为利润引擎。</p>
</div>
<div class="grid grid-2">
<div class="card reveal">
<h3><i class="fa-solid fa-globe-asia ico g7"></i> 必做理由</h3>
<div class="accordion">
<div class="acc">
<div class="acc-h">破解流量困局 <i class="fa-solid fa-angle-down ico g1"></i></div>
<div class="acc-c"><div style="padding:0 16px 14px">人群建模 + 闭环运营，获取可追踪价值用户。</div></div>
</div>
<div class="acc">
<div class="acc-h">对抗用户遗忘 <i class="fa-solid fa-angle-down ico g2"></i></div>
<div class="acc-c"><div style="padding:0 16px 14px">搭建内容与用户资产池，形成持续触达能力。</div></div>
</div>
<div class="acc">
<div class="acc-h">逆转数据黑洞 <i class="fa-solid fa-angle-down ico g3"></i></div>
<div class="acc-c"><div style="padding:0 16px 14px">全链路画像，用行为数据指导下一步。</div></div>
</div>
</div>
</div>
<div class="card reveal">
<h3><i class="fa-solid fa-crown ico g4"></i> 线上总运营价值</h3>
<ul class="bullets">
<li>全局效率革命</li>
<li>动态抗衰机制</li>
<li>资产复利效应</li>
</ul>
<button class="btn" data-open-modal style="margin-top:12px"><i class="fa-regular fa-paper-plane ico g6"></i> 获取一份专属方案</button>
</div>
</div>
</div>
</section>
<!-- 互动展示区（按钮水波纹 / 复制联系方式 / 模态） -->
<section id="interactive">
<div class="container">
<div class="section-head">
<h2>互动体验</h2>
<p>更丰富的点击与反馈，让品牌体验“可感知”。</p>
</div>
<div class="grid grid-3">
<div class="card reveal" style="text-align:center">
<i class="fa-solid fa-hand-pointer ico g5" style="font-size:34px"></i>
<h3>水波纹按钮</h3>
<p class="muted">所有 <code>.btn</code> 点击都有涟漪反馈。</p>
<button class="btn">点我试试</button>
</div>
<div class="card reveal" style="text-align:center">
<i class="fa-solid fa-copy ico g3" style="font-size:34px"></i>
<h3>一键复制</h3>
<p class="muted">点击下方任意联系方式自动复制并提示。</p>
<div class="contacts" style="justify-content:center">
<div class="contact" data-copy="[email protected]"><i class="fa-regular fa-envelope ico g2"></i> 邮箱</div>
<div class="contact" data-copy="136-3766-2420"><i class="fa-solid fa-phone ico g7"></i> 电话</div>
<div class="contact" data-copy="xzqlzw00"><i class="fa-brands fa-weixin ico g1"></i> 微信</div>
</div>
</div>
<div class="card reveal" style="text-align:center">
<i class="fa-regular fa-window-restore ico g1" style="font-size:34px"></i>
<h3>模态联系窗</h3>
<p class="muted">点击打开对话框，演示表单交互。</p>
<button class="btn" data-open-modal><i class="fa-regular fa-envelope ico g4"></i> 打开</button>
</div>
</div>
</div>
</section>
<!-- 工作原则（苹果风小卡+彩色icon） -->
<section id="principles">
<div class="container">
<div class="section-head">
<h2>工作原则</h2>
<p>基于数据驱动与热爱情怀的运营方法论。</p>
</div>
<div class="grid grid-3">
<div class="card reveal" style="text-align:center">
<i class="fa-solid fa-database ico g2" style="font-size:28px"></i>
<h3>数据驱动</h3>
<p class="muted">一线数据验证每一步策略。</p>
</div>
<div class="card reveal" style="text-align:center">
<i class="fa-regular fa-heart ico g4" style="font-size:28px"></i>
<h3>热爱驱动</h3>
<p class="muted">把热爱转化为解决方案。</p>
</div>
<div class="card reveal" style="text-align:center">
<i class="fa-solid fa-clone ico g6" style="font-size:28px"></i>
<h3>再造非复制</h3>
<p class="muted">深挖DNA，拒绝模板化。</p>
</div>
</div>
</div>
</section>
<!-- 引言 -->
<section>
<div class="container">
<div class="tile reveal">
<div class="bg"></div>
<div class="inner" style="text-align:center">
<div style="font-size:clamp(22px,3.6vw,32px); font-weight:900; letter-spacing:-.3px; background:linear-gradient(90deg,var(--c2),var(--c4)); -webkit-background-clip:text; background-clip:text; color:transparent;">
“今天我们如何用数据创造客户不可替代的价值？”
</div>
<div class="muted" style="margin-top:8px">—— 让“今天该做什么”具象为可执行动作</div>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer id="contact">
<div class="container reveal">
<div style="text-align:center;font-weight:900;letter-spacing:.2px;margin-bottom:8px">联系我们</div>
<div class="contacts">
<div class="contact" data-copy="[email protected]"><i class="fa-regular fa-envelope ico g2"></i> [email protected]</div>
<div class="contact" data-copy="136-3766-2420"><i class="fa-solid fa-phone ico g7"></i> 136-3766-2420</div>
<div class="contact" data-copy="xzqlzw00"><i class="fa-brands fa-weixin ico g1"></i> xzqlzw00</div>
</div>
<div class="copyright">
© 2023 有点用传媒 · 以热爱为引擎，以数据为罗盘，再造增长
</div>
<div class="copyright" style="margin-top:6px">
实事求是 · 沉入一线 · 保持好奇 · 拥抱矛盾 · 小步快跑 · 快速迭代
</div>
</div>
</footer>
<!-- Modal -->
<div class="modal" role="dialog" aria-modal="true" aria-label="联系我们">
<div class="box">
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:8px">
<h3 style="margin:0"><i class="fa-regular fa-envelope ico g5"></i> 联系我们</h3>
<button class="btn" data-close-modal><i class="fa-solid fa-xmark"></i> 关闭</button>
</div>
<p class="muted" style="margin:6px 0 14px">留下需求，我们将尽快与您联系。</p>
<form onsubmit="event.preventDefault(); showToast('已提交，我们会尽快联系您'); document.querySelector('.modal').style.display='none';">
<div class="grid" style="grid-template-columns:1fr 1fr; gap:12px">
<input required placeholder="姓名" style="height:42px; border:1px solid var(--line); border-radius:10px; padding:0 12px; font:inherit"/>
<input required placeholder="联系方式" style="height:42px; border:1px solid var(--line); border-radius:10px; padding:0 12px; font:inherit"/>
</div>
<textarea required placeholder="请简单描述您的需求..." rows="4" style="margin-top:12px; width:100%; border:1px solid var(--line); border-radius:12px; padding:10px; font:inherit"></textarea>
<div style="display:flex; gap:10px; justify-content:flex-end; margin-top:12px">
<button class="btn" type="button" data-close-modal>取消</button>
<button class="btn" type="submit"><i class="fa-regular fa-paper-plane ico g3"></i> 提交</button>
</div>
</form>
</div>
</div>
<!-- Palette Switcher -->
<div class="palette" aria-label="切换配色">
<span class="lab"><i class="fa-solid fa-palette ico g6"></i> 主题</span>
<div class="dot" data-theme="aurora" title="极光" style="background:conic-gradient(#7C3AED,#06B6D4,#22C55E,#F43F5E)"></div>
<div class="dot" data-theme="ocean" title="海洋" style="background:conic-gradient(#0EA5E9,#1D4ED8,#14B8A6,#38BDF8)"></div>
<div class="dot" data-theme="sunset" title="落日" style="background:conic-gradient(#F97316,#EF4444,#EAB308,#FB7185)"></div>
<div class="dot" data-theme="neon" title="霓虹" style="background:conic-gradient(#22D3EE,#A78BFA,#34D399,#F472B6)"></div>
</div>
<!-- Toast -->
<div class="toast" id="toast">已复制到剪贴板</div>
<script>
/* ===== Reveal on scroll ===== */
const io = new IntersectionObserver((els)=>{
els.forEach(e=>{ if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target); } })
},{threshold:.12});
document.querySelectorAll('.reveal').forEach(n=>io.observe(n));
/* ===== Tabs ===== */
document.querySelectorAll('.tab').forEach(t=>{
t.addEventListener('click', ()=>{
document.querySelectorAll('.tab').forEach(x=>x.classList.remove('active'));
document.querySelectorAll('.tabpane').forEach(x=>x.classList.remove('active'));
t.classList.add('active');
document.getElementById(t.dataset.tab).classList.add('active');
})
});
/* ===== Accordion ===== */
document.querySelectorAll('.acc-h').forEach(h=>{
h.addEventListener('click', ()=>{
const acc = h.parentElement;
acc.classList.toggle('open');
})
});
/* ===== Ripple on buttons ===== */
document.querySelectorAll('.btn').forEach(btn=>{
btn.addEventListener('click', (e)=>{
const r = document.createElement('span');
const rect = btn.getBoundingClientRect();
r.className='ripple';
r.style.left = (e.clientX - rect.left) + 'px';
r.style.top = (e.clientY - rect.top) + 'px';
r.style.width = r.style.height = Math.max(rect.width, rect.height) + 'px';
btn.appendChild(r);
setTimeout(()=>r.remove(), 600);
})
});
/* ===== Contacts copy to clipboard ===== */
const toast = document.getElementById('toast');
function showToast(text){
toast.textContent = text;
toast.classList.add('show');
setTimeout(()=>toast.classList.remove('show'), 1500);
}
document.querySelectorAll('[data-copy]').forEach(el=>{
el.addEventListener('click', async ()=>{
try{
await navigator.clipboard.writeText(el.dataset.copy);
showToast('已复制：' + el.dataset.copy);
}catch{
showToast('复制失败，请手动复制');
}
})
});
/* ===== Modal ===== */
const modal = document.querySelector('.modal');
document.querySelectorAll('[data-open-modal]').forEach(b=>b.addEventListener('click', ()=> modal.style.display='flex'));
document.querySelectorAll('[data-close-modal]').forEach(b=>b.addEventListener('click', ()=> modal.style.display='none'));
modal.addEventListener('click', (e)=>{ if(e.target===modal) modal.style.display='none' });
/* ===== Theme palette ===== */
document.querySelectorAll('.palette .dot').forEach(dot=>{
dot.addEventListener('click', ()=>{
document.documentElement.setAttribute('data-theme', dot.dataset.theme);
localStorage.setItem('brand-theme', dot.dataset.theme);
})
});
const saved = localStorage.getItem('brand-theme'); if(saved) document.documentElement.setAttribute('data-theme', saved);
/* ===== Scroll spy for nav ===== */
const links = document.querySelectorAll('.nav-links a[href^="#"]');
const sections = [...links].map(a=>document.querySelector(a.getAttribute('href'))).filter(Boolean);
const spy = new IntersectionObserver((entries)=>{
entries.forEach(ent=>{
const id = '#' + (ent.target.id || '');
const l = [...links].find(a=>a.getAttribute('href')===id);
if(l && ent.isIntersecting){ links.forEach(x=>x.classList.remove('active')); l.classList.add('active'); }
})
},{rootMargin:'-60% 0px -35% 0px', threshold:0});
sections.forEach(s=>spy.observe(s));
/* ===== Parallax hero art ===== */
const art = document.querySelector('.hero-art');
window.addEventListener('scroll', ()=>{
const y = window.scrollY * 0.15;
art.style.transform = `translateY(${y}px)`;
});
/* ===== Tilt cards ===== */
document.querySelectorAll('.tilt').forEach(card=>{
card.addEventListener('mousemove', (e)=>{
const r = card.getBoundingClientRect();
const x = e.clientX - r.left, y = e.clientY - r.top;
const rx = ((y / r.height) - .5) * -6;
const ry = ((x / r.width) - .5) * 6;
card.style.transform = `perspective(1100px) rotateX(${rx}deg) rotateY(${ry}deg)`;
});
card.addEventListener('mouseleave', ()=> card.style.transform = 'perspective(1100px) rotateX(0) rotateY(0)');
});
/* ===== Counters (on view) ===== */
const co = new IntersectionObserver((es)=>{
es.forEach(e=>{
if(!e.isIntersecting) return;
const el = e.target; const to = Number(el.dataset.to||0);
let cur = 0; const step = Math.max(1, Math.round(to/60));
const t = setInterval(()=>{ cur += step; if(cur>=to){ cur = to; clearInterval(t); } el.textContent = cur; }, 16);
co.unobserve(el);
})
},{threshold:.6});
document.querySelectorAll('.counter').forEach(el=>co.observe(el));
</script>
</body>
</html>
index.html
index.html