zyc
c8f5518e07
All checks were successful
Deploy Static Sites / deploy (push) Successful in 7s
- 新增 airlabs-art/ 子目录存放主站点静态内容 - nginx-conf 增加 apex+www 显式 server 块指向 airlabs-art/ - workflow 跳过 airlabs-art 的子域名自动生成，追加裸域+www HTTP 规则 - workflow 新增同步 nginx ConfigMap 并 rollout restart 的步骤 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1149 lines
35 KiB
HTML
1149 lines
35 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>气元科技 | AirLabs</title>
|
||
<style>
|
||
/* Base Styles */
|
||
:root {
|
||
--neon-green: #03fc90;
|
||
--neon-pink: #fc03f8;
|
||
--neon-purple: #b403fc;
|
||
--dark-bg: #000000;
|
||
--dark-gray: #111111;
|
||
--light-gray: #888888;
|
||
--white: #ffffff;
|
||
}
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
|
||
background-color: var(--dark-bg);
|
||
color: var(--white);
|
||
line-height: 1.6;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.container {
|
||
width: 90%;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
position: relative;
|
||
}
|
||
|
||
/* Grid Background */
|
||
.grid-background {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-image:
|
||
linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
|
||
linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
|
||
background-size: 40px 40px;
|
||
z-index: -1;
|
||
opacity: 0.3;
|
||
}
|
||
|
||
/* Header */
|
||
header {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
padding: 2rem;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
z-index: 1000;
|
||
transition: background-color 0.3s ease;
|
||
}
|
||
|
||
header.scrolled {
|
||
background-color: rgba(0, 0, 0, 0.8);
|
||
backdrop-filter: blur(10px);
|
||
padding: 1rem 2rem;
|
||
}
|
||
|
||
.logo {
|
||
font-size: 2rem;
|
||
font-weight: 900;
|
||
}
|
||
|
||
.green {
|
||
color: var(--neon-green);
|
||
}
|
||
|
||
.pink {
|
||
color: var(--neon-pink);
|
||
}
|
||
|
||
.purple {
|
||
color: var(--neon-purple);
|
||
}
|
||
|
||
nav ul {
|
||
display: flex;
|
||
list-style: none;
|
||
}
|
||
|
||
nav ul li {
|
||
margin-left: 2rem;
|
||
}
|
||
|
||
nav ul li a {
|
||
color: var(--white);
|
||
text-decoration: none;
|
||
transition: color 0.3s ease;
|
||
}
|
||
|
||
nav ul li a:hover {
|
||
color: var(--neon-green);
|
||
}
|
||
|
||
.menu-toggle {
|
||
display: none;
|
||
flex-direction: column;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.bar {
|
||
width: 25px;
|
||
height: 3px;
|
||
background-color: var(--white);
|
||
margin: 3px 0;
|
||
transition: 0.4s;
|
||
}
|
||
|
||
/* Hero Section */
|
||
.hero {
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
|
||
.hero-content {
|
||
z-index: 2;
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size: 6rem;
|
||
font-weight: 900;
|
||
margin-bottom: 0.5rem;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: 2.5rem;
|
||
color: var(--neon-green);
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.description {
|
||
font-size: 1.5rem;
|
||
max-width: 800px;
|
||
margin: 0 auto 0.5rem;
|
||
}
|
||
|
||
.en-description {
|
||
font-size: 1rem;
|
||
color: var(--light-gray);
|
||
text-transform: uppercase;
|
||
letter-spacing: 2px;
|
||
}
|
||
|
||
.scroll-indicator {
|
||
position: absolute;
|
||
bottom: 2rem;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.arrow {
|
||
width: 20px;
|
||
height: 20px;
|
||
border-right: 3px solid var(--neon-green);
|
||
border-bottom: 3px solid var(--neon-green);
|
||
transform: rotate(45deg);
|
||
margin-top: -10px;
|
||
animation: bounce 2s infinite;
|
||
}
|
||
|
||
.arrow:nth-child(2) {
|
||
animation-delay: 0.2s;
|
||
}
|
||
|
||
@keyframes bounce {
|
||
0%, 20%, 50%, 80%, 100% {
|
||
transform: translateY(0) rotate(45deg);
|
||
}
|
||
40% {
|
||
transform: translateY(10px) rotate(45deg);
|
||
}
|
||
60% {
|
||
transform: translateY(5px) rotate(45deg);
|
||
}
|
||
}
|
||
|
||
/* Section Common Styles */
|
||
.section-padding {
|
||
padding: 8rem 0;
|
||
position: relative;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 3.5rem;
|
||
font-weight: 900;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.en-subtitle {
|
||
font-size: 1.2rem;
|
||
color: var(--neon-green);
|
||
margin-bottom: 3rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 2px;
|
||
}
|
||
|
||
.section-description {
|
||
font-size: 1.2rem;
|
||
max-width: 600px;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.section-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 4rem;
|
||
align-items: center;
|
||
}
|
||
|
||
/* About Section */
|
||
.about {
|
||
overflow: hidden;
|
||
}
|
||
|
||
.big-number {
|
||
font-size: 10rem;
|
||
font-weight: 900;
|
||
color: var(--neon-green);
|
||
line-height: 1;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.tech-circle {
|
||
width: 100%;
|
||
max-width: 400px;
|
||
margin: 0 auto;
|
||
position: relative;
|
||
}
|
||
|
||
.tech-circle::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: radial-gradient(circle, rgba(3, 252, 144, 0.2) 0%, rgba(3, 252, 144, 0) 70%);
|
||
z-index: -1;
|
||
}
|
||
|
||
/* Services Section */
|
||
.services {
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.services-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 2rem;
|
||
margin-top: 2rem;
|
||
}
|
||
|
||
.service-card {
|
||
background-color: rgba(17, 17, 17, 0.5);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
padding: 2rem;
|
||
border-radius: 8px;
|
||
transition: transform 0.3s ease, border-color 0.3s ease;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.service-card[data-color="green"]:hover {
|
||
border-color: var(--neon-green);
|
||
transform: translateY(-10px);
|
||
}
|
||
|
||
.service-card[data-color="pink"]:hover {
|
||
border-color: var(--neon-pink);
|
||
transform: translateY(-10px);
|
||
}
|
||
|
||
.service-number {
|
||
font-size: 3rem;
|
||
font-weight: 900;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.service-card[data-color="green"] .service-number {
|
||
color: var(--neon-green);
|
||
}
|
||
|
||
.service-card[data-color="pink"] .service-number {
|
||
color: var(--neon-pink);
|
||
}
|
||
|
||
.service-card h3 {
|
||
font-size: 1.5rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.service-tag {
|
||
display: inline-block;
|
||
margin-top: 1.5rem;
|
||
font-size: 0.8rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.service-card[data-color="green"] .service-tag {
|
||
color: var(--neon-green);
|
||
}
|
||
|
||
.service-card[data-color="pink"] .service-tag {
|
||
color: var(--neon-pink);
|
||
}
|
||
|
||
.glow-orb {
|
||
position: absolute;
|
||
width: 300px;
|
||
height: 300px;
|
||
border-radius: 50%;
|
||
filter: blur(100px);
|
||
z-index: -1;
|
||
}
|
||
|
||
.pink-orb {
|
||
background-color: rgba(252, 3, 248, 0.1);
|
||
top: 20%;
|
||
right: -100px;
|
||
}
|
||
|
||
.green-orb {
|
||
background-color: rgba(3, 252, 144, 0.1);
|
||
bottom: 20%;
|
||
left: -100px;
|
||
}
|
||
|
||
.purple-orb {
|
||
background-color: rgba(180, 3, 252, 0.1);
|
||
top: 50%;
|
||
right: -100px;
|
||
}
|
||
|
||
.pink-orb-alt {
|
||
background-color: rgba(252, 3, 248, 0.1);
|
||
bottom: 10%;
|
||
right: -100px;
|
||
}
|
||
|
||
.green-orb-alt {
|
||
background-color: rgba(3, 252, 144, 0.1);
|
||
top: 30%;
|
||
left: -100px;
|
||
}
|
||
|
||
/* Clients Section */
|
||
.clients-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
||
gap: 4rem;
|
||
}
|
||
|
||
.client-card {
|
||
position: relative;
|
||
padding: 2rem;
|
||
}
|
||
|
||
.client-number {
|
||
position: absolute;
|
||
top: -30px;
|
||
left: -20px;
|
||
font-size: 8rem;
|
||
font-weight: 900;
|
||
color: rgba(255, 255, 255, 0.05);
|
||
z-index: -1;
|
||
}
|
||
|
||
.client-card h3 {
|
||
font-size: 2rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.client-tag {
|
||
display: inline-block;
|
||
margin-top: 1.5rem;
|
||
font-size: 0.8rem;
|
||
color: var(--neon-green);
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
/* Projects Section */
|
||
.project-showcase {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 4rem;
|
||
align-items: center;
|
||
}
|
||
|
||
.project-info h3 {
|
||
font-size: 2.5rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.project-tags {
|
||
display: flex;
|
||
gap: 1rem;
|
||
margin-top: 2rem;
|
||
}
|
||
|
||
.tag {
|
||
display: inline-block;
|
||
padding: 0.5rem 1rem;
|
||
border-radius: 50px;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.green-tag {
|
||
background-color: rgba(3, 252, 144, 0.2);
|
||
color: var(--neon-green);
|
||
}
|
||
|
||
.pink-tag {
|
||
background-color: rgba(252, 3, 248, 0.2);
|
||
color: var(--neon-pink);
|
||
}
|
||
|
||
.purple-tag {
|
||
background-color: rgba(180, 3, 252, 0.2);
|
||
color: var(--neon-purple);
|
||
}
|
||
|
||
.project-image {
|
||
width: 100%;
|
||
aspect-ratio: 16/9;
|
||
background: linear-gradient(135deg, rgba(3, 252, 144, 0.2) 0%, rgba(252, 3, 248, 0.2) 100%);
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.project-placeholder {
|
||
font-size: 2rem;
|
||
font-weight: 900;
|
||
color: rgba(255, 255, 255, 0.1);
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
/* Business Section */
|
||
.business-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 2rem;
|
||
}
|
||
|
||
.business-card {
|
||
background-color: rgba(17, 17, 17, 0.5);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
padding: 2rem;
|
||
border-radius: 8px;
|
||
height: 100%;
|
||
}
|
||
|
||
.green-border {
|
||
border-color: rgba(3, 252, 144, 0.2);
|
||
}
|
||
|
||
.pink-border {
|
||
border-color: rgba(252, 3, 248, 0.2);
|
||
}
|
||
|
||
.purple-border {
|
||
border-color: rgba(180, 3, 252, 0.2);
|
||
}
|
||
|
||
.green-text {
|
||
color: var(--neon-green);
|
||
}
|
||
|
||
.pink-text {
|
||
color: var(--neon-pink);
|
||
}
|
||
|
||
.purple-text {
|
||
color: var(--neon-purple);
|
||
}
|
||
|
||
.business-card h3 {
|
||
font-size: 2rem;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.business-list {
|
||
list-style: none;
|
||
}
|
||
|
||
.business-list li {
|
||
display: flex;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.list-marker {
|
||
width: 30px;
|
||
height: 30px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.8rem;
|
||
margin-right: 1rem;
|
||
flex-shrink: 0;
|
||
margin-top: 0.3rem;
|
||
}
|
||
|
||
.green-bg {
|
||
background-color: rgba(3, 252, 144, 0.2);
|
||
color: var(--neon-green);
|
||
}
|
||
|
||
.pink-bg {
|
||
background-color: rgba(252, 3, 248, 0.2);
|
||
color: var(--neon-pink);
|
||
}
|
||
|
||
.purple-bg {
|
||
background-color: rgba(180, 3, 252, 0.2);
|
||
color: var(--neon-purple);
|
||
}
|
||
|
||
.list-content h4 {
|
||
font-size: 1.2rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.ip-business-list {
|
||
list-style: none;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.ip-business-list li {
|
||
display: flex;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
/* Footer */
|
||
footer {
|
||
background-color: var(--dark-gray);
|
||
padding: 4rem 0;
|
||
margin-top: 4rem;
|
||
}
|
||
|
||
.footer-content {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.footer-logo p {
|
||
margin-top: 0.5rem;
|
||
color: var(--light-gray);
|
||
}
|
||
|
||
.footer-links {
|
||
display: flex;
|
||
gap: 2rem;
|
||
}
|
||
|
||
.footer-links a {
|
||
color: var(--white);
|
||
text-decoration: none;
|
||
transition: color 0.3s ease;
|
||
}
|
||
|
||
.footer-links a:hover {
|
||
color: var(--neon-green);
|
||
}
|
||
|
||
.social-links {
|
||
display: flex;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.social-icon {
|
||
display: inline-block;
|
||
padding: 0.5rem 1rem;
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
border-radius: 50px;
|
||
color: var(--white);
|
||
text-decoration: none;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.social-icon:hover {
|
||
background-color: var(--neon-green);
|
||
color: var(--dark-bg);
|
||
border-color: var(--neon-green);
|
||
}
|
||
|
||
/* Animations */
|
||
.reveal-text {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
transition: opacity 0.8s ease, transform 0.8s ease;
|
||
}
|
||
|
||
.reveal-text.visible {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* Responsive Styles */
|
||
@media (max-width: 1200px) {
|
||
.business-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 992px) {
|
||
.section-grid,
|
||
.project-showcase {
|
||
grid-template-columns: 1fr;
|
||
gap: 2rem;
|
||
}
|
||
|
||
.tech-circle {
|
||
margin-top: 2rem;
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size: 4rem;
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.big-number {
|
||
font-size: 8rem;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 3rem;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.business-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
nav ul {
|
||
display: none;
|
||
}
|
||
|
||
.menu-toggle {
|
||
display: flex;
|
||
}
|
||
|
||
nav.active ul {
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 0;
|
||
width: 100%;
|
||
background-color: rgba(0, 0, 0, 0.9);
|
||
padding: 2rem;
|
||
}
|
||
|
||
nav.active ul li {
|
||
margin: 1rem 0;
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size: 3rem;
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.description {
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.big-number {
|
||
font-size: 6rem;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 2.5rem;
|
||
}
|
||
|
||
.footer-content {
|
||
flex-direction: column;
|
||
text-align: center;
|
||
gap: 2rem;
|
||
}
|
||
|
||
.clients-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.hero h1 {
|
||
font-size: 2.5rem;
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.big-number {
|
||
font-size: 5rem;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.service-card,
|
||
.business-card {
|
||
padding: 1.5rem;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Grid Background -->
|
||
<div class="grid-background"></div>
|
||
|
||
<!-- Header -->
|
||
<header>
|
||
<div class="logo">
|
||
<span class="green">Air</span><span class="pink">Labs</span>
|
||
</div>
|
||
<nav>
|
||
<ul>
|
||
<li><a href="#about">关于我们</a></li>
|
||
<li><a href="#services">核心业务</a></li>
|
||
<li><a href="#clients">合作伙伴</a></li>
|
||
<li><a href="#projects">代表项目</a></li>
|
||
<li><a href="#business">业务布局</a></li>
|
||
</ul>
|
||
</nav>
|
||
<div class="menu-toggle">
|
||
<div class="bar"></div>
|
||
<div class="bar"></div>
|
||
<div class="bar"></div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Hero Section -->
|
||
<section class="hero" id="hero">
|
||
<div class="hero-content">
|
||
<h1 class="reveal-text">气元科技</h1>
|
||
<p class="subtitle reveal-text">AIRLABS</p>
|
||
<p class="description reveal-text">科技与文化创意的融合者</p>
|
||
<p class="en-description reveal-text">TECHNOLOGY & CREATIVE FUSION</p>
|
||
</div>
|
||
<div class="scroll-indicator">
|
||
<div class="arrow"></div>
|
||
<div class="arrow"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- About Section -->
|
||
<section class="about section-padding" id="about">
|
||
<div class="container">
|
||
<div class="section-grid">
|
||
<div class="text-content">
|
||
<div class="big-number">15</div>
|
||
<h2 class="section-title">年文创与科技积淀</h2>
|
||
<p class="en-subtitle">YEARS OF EXPERIENCE</p>
|
||
<p class="section-description">
|
||
气元科技由深耕文创+科技领域15年的资深团队创立，专注于AI动画、传统CG动画、AI应用产品三大核心业务。
|
||
</p>
|
||
</div>
|
||
<div class="visual-content">
|
||
<div class="tech-circle">
|
||
<svg viewBox="0 0 200 200">
|
||
<circle cx="100" cy="100" r="80" fill="none" stroke="#03fc90" stroke-width="2" />
|
||
<circle cx="100" cy="100" r="40" fill="none" stroke="#03fc90" stroke-width="2" />
|
||
<line x1="20" y1="100" x2="180" y2="100" stroke="#03fc90" stroke-width="2" />
|
||
<line x1="100" y1="20" x2="100" y2="180" stroke="#03fc90" stroke-width="2" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Services Section -->
|
||
<section class="services section-padding" id="services">
|
||
<div class="container">
|
||
<h2 class="section-title">核心业务</h2>
|
||
<p class="en-subtitle">CORE SERVICES</p>
|
||
|
||
<div class="services-grid">
|
||
<div class="service-card" data-color="green">
|
||
<div class="service-number">01</div>
|
||
<h3>AI动画</h3>
|
||
<p>通过AI辅助提高动画制作效率，创造更具想象力的内容。</p>
|
||
<div class="service-tag">AI ANIMATION</div>
|
||
</div>
|
||
|
||
<div class="service-card" data-color="pink">
|
||
<div class="service-number">02</div>
|
||
<h3>传统CG动画</h3>
|
||
<p>专业的CG动画制作，为客户提供高品质的视觉体验。</p>
|
||
<div class="service-tag">CG ANIMATION</div>
|
||
</div>
|
||
|
||
<div class="service-card" data-color="green">
|
||
<div class="service-number">03</div>
|
||
<h3>AI应用产品</h3>
|
||
<p>开发前沿AI应用产品，探索科技与文化创意融合的新边界。</p>
|
||
<div class="service-tag">AI PRODUCTS</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="glow-orb pink-orb"></div>
|
||
<div class="glow-orb green-orb"></div>
|
||
</section>
|
||
|
||
<!-- Clients Section -->
|
||
<section class="clients section-padding" id="clients">
|
||
<div class="container">
|
||
<h2 class="section-title">合作伙伴</h2>
|
||
<p class="en-subtitle">OUR CLIENTS</p>
|
||
|
||
<div class="clients-grid">
|
||
<div class="client-card">
|
||
<div class="client-number">01</div>
|
||
<h3>长隆集团</h3>
|
||
<p>为中国知名主题公园及旅游度假区提供创意内容服务。</p>
|
||
<div class="client-tag">CHIMELONG GROUP</div>
|
||
</div>
|
||
|
||
<div class="client-card">
|
||
<div class="client-number">02</div>
|
||
<h3>VANS</h3>
|
||
<p>为国际知名品牌提供定制创意服务。</p>
|
||
<div class="client-tag">GLOBAL BRAND</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Projects Section -->
|
||
<section class="projects section-padding" id="projects">
|
||
<div class="container">
|
||
<h2 class="section-title">代表项目</h2>
|
||
<p class="en-subtitle">FEATURED PROJECTS</p>
|
||
|
||
<div class="project-showcase">
|
||
<div class="project-info">
|
||
<h3>小马菲莉</h3>
|
||
<p>已在中国及欧盟20多个国家发行，衍生产品畅销中欧市场的经典案例。</p>
|
||
<div class="project-tags">
|
||
<span class="tag green-tag">20+ 国家发行</span>
|
||
<span class="tag pink-tag">全球衍生品</span>
|
||
</div>
|
||
</div>
|
||
<div class="project-visual">
|
||
<div class="project-image">
|
||
<div class="project-placeholder">PROJECT SHOWCASE</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="glow-orb green-orb-alt"></div>
|
||
</section>
|
||
|
||
<!-- Business Section -->
|
||
<section class="business section-padding" id="business">
|
||
<div class="container">
|
||
<h2 class="section-title">业务布局</h2>
|
||
<p class="en-subtitle">BUSINESS LAYOUT</p>
|
||
|
||
<div class="business-grid">
|
||
<!-- AI生成内容 Card -->
|
||
<div class="business-card green-border">
|
||
<h3 class="green-text">AI生成内容</h3>
|
||
<ul class="business-list">
|
||
<li>
|
||
<div class="list-marker green-bg">01</div>
|
||
<div class="list-content">
|
||
<h4>AI动画</h4>
|
||
<p>通过AI辅助提高动画制作效率，创造更具想象力的内容。</p>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="list-marker green-bg">02</div>
|
||
<div class="list-content">
|
||
<h4>AI真人剧</h4>
|
||
<p>探索AI技术与真人内容结合的创新表现形式。</p>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="list-marker green-bg">03</div>
|
||
<div class="list-content">
|
||
<h4>AI广告</h4>
|
||
<p>利用AI提升广告内容创作效率和个性化定制能力。</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- AI智能产品 Card -->
|
||
<div class="business-card pink-border">
|
||
<h3 class="pink-text">AI智能产品</h3>
|
||
<ul class="business-list">
|
||
<li>
|
||
<div class="list-marker pink-bg">01</div>
|
||
<div class="list-content">
|
||
<h4>洛天依桌面情感陪伴产品</h4>
|
||
<p>与集卡社合作开发，融合虚拟偶像IP和AI互动体验。</p>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="list-marker pink-bg">02</div>
|
||
<div class="list-content">
|
||
<h4>AI语音对话硬件</h4>
|
||
<p>聚焦用户的智能情感陪伴需求。</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- IP全流程业务 Card -->
|
||
<div class="business-card purple-border">
|
||
<h3 class="purple-text">IP全流程业务</h3>
|
||
<ul class="ip-business-list">
|
||
<li>
|
||
<div class="list-marker purple-bg">01</div>
|
||
<div class="list-content">
|
||
<h4>IP设计策划</h4>
|
||
<p>创造独特IP形象与故事世界观。</p>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="list-marker purple-bg">02</div>
|
||
<div class="list-content">
|
||
<h4>AI辅助传统CG动画制作</h4>
|
||
<p>结合AI技术提升传统动画制作效率与质量。</p>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="list-marker purple-bg">03</div>
|
||
<div class="list-content">
|
||
<h4>国内外发行</h4>
|
||
<p>拓展全球市场，实现IP价值最大化。</p>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="list-marker purple-bg">04</div>
|
||
<div class="list-content">
|
||
<h4>衍生品开发生产</h4>
|
||
<p>打造完整产业闭环，实现多元化变现。</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="glow-orb pink-orb-alt"></div>
|
||
<div class="glow-orb purple-orb"></div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer>
|
||
<div class="container">
|
||
<div class="footer-content">
|
||
<div class="footer-logo">
|
||
<div class="logo">
|
||
<span class="green">Air</span><span class="pink">Labs</span>
|
||
</div>
|
||
<p>气元科技 © <span id="current-year">2023</span></p>
|
||
<p style="font-size: 0.9rem; color: var(--light-gray); margin-top: 0.5rem;">
|
||
<a href="https://beian.miit.gov.cn" target="_blank" style="color: var(--light-gray); text-decoration: none; transition: color 0.3s ease;">粤ICP备2025405629号-1</a>
|
||
</p>
|
||
</div>
|
||
|
||
<div class="footer-links">
|
||
<a href="#about">关于我们</a>
|
||
<a href="#services">核心业务</a>
|
||
<a href="#clients">合作伙伴</a>
|
||
<a href="#projects">代表项目</a>
|
||
</div>
|
||
|
||
<div class="social-links">
|
||
<a href="#" class="social-icon">微信</a>
|
||
<a href="#" class="social-icon">微博</a>
|
||
<a href="#" class="social-icon">知乎</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// Set current year in footer
|
||
document.getElementById('current-year').textContent = new Date().getFullYear();
|
||
|
||
// Header scroll effect
|
||
const header = document.querySelector('header');
|
||
window.addEventListener('scroll', () => {
|
||
if (window.scrollY > 50) {
|
||
header.classList.add('scrolled');
|
||
} else {
|
||
header.classList.remove('scrolled');
|
||
}
|
||
});
|
||
|
||
// Mobile menu toggle
|
||
const menuToggle = document.querySelector('.menu-toggle');
|
||
const nav = document.querySelector('nav');
|
||
|
||
menuToggle.addEventListener('click', () => {
|
||
nav.classList.toggle('active');
|
||
});
|
||
|
||
// Reveal animations on scroll
|
||
const revealElements = document.querySelectorAll('.reveal-text');
|
||
|
||
// Initial check for elements in viewport on page load
|
||
revealElements.forEach(element => {
|
||
if (isInViewport(element)) {
|
||
element.classList.add('visible');
|
||
}
|
||
});
|
||
|
||
// Reveal elements as they enter the viewport
|
||
window.addEventListener('scroll', () => {
|
||
revealElements.forEach(element => {
|
||
if (isInViewport(element) && !element.classList.contains('visible')) {
|
||
element.classList.add('visible');
|
||
}
|
||
});
|
||
});
|
||
|
||
// Check if element is in viewport
|
||
function isInViewport(element) {
|
||
const rect = element.getBoundingClientRect();
|
||
return (
|
||
rect.top <= (window.innerHeight || document.documentElement.clientHeight) * 0.8 &&
|
||
rect.bottom >= 0
|
||
);
|
||
}
|
||
|
||
// Apple-style scroll animations
|
||
const sections = document.querySelectorAll('section');
|
||
const heroSection = document.querySelector('.hero');
|
||
|
||
window.addEventListener('scroll', () => {
|
||
const scrollPosition = window.scrollY;
|
||
|
||
// Parallax effect for hero section
|
||
if (scrollPosition < window.innerHeight) {
|
||
heroSection.style.transform = `translateY(${scrollPosition * 0.3}px)`;
|
||
heroSection.style.opacity = 1 - (scrollPosition / (window.innerHeight * 0.8));
|
||
}
|
||
|
||
// Animate sections as they come into view
|
||
sections.forEach(section => {
|
||
const sectionTop = section.offsetTop;
|
||
const sectionHeight = section.offsetHeight;
|
||
|
||
if (scrollPosition > sectionTop - window.innerHeight * 0.7 &&
|
||
scrollPosition < sectionTop + sectionHeight) {
|
||
|
||
// Calculate how far through the section we've scrolled
|
||
const scrollPercentage = (scrollPosition - (sectionTop - window.innerHeight * 0.7)) /
|
||
(sectionHeight + window.innerHeight * 0.7);
|
||
|
||
// Apply different effects based on section ID
|
||
if (section.id === 'about') {
|
||
const techCircle = section.querySelector('.tech-circle');
|
||
if (techCircle) {
|
||
techCircle.style.transform = `rotate(${scrollPercentage * 180}deg)`;
|
||
}
|
||
}
|
||
|
||
if (section.id === 'services') {
|
||
const cards = section.querySelectorAll('.service-card');
|
||
cards.forEach((card, index) => {
|
||
card.style.transform = `translateY(${(1 - Math.min(1, scrollPercentage * 2)) * 50}px)`;
|
||
card.style.opacity = Math.min(1, scrollPercentage * 2);
|
||
});
|
||
}
|
||
|
||
if (section.id === 'projects') {
|
||
const projectImage = section.querySelector('.project-image');
|
||
if (projectImage) {
|
||
projectImage.style.transform = `scale(${0.8 + (scrollPercentage * 0.2)})`;
|
||
}
|
||
}
|
||
}
|
||
});
|
||
});
|
||
|
||
// Add active class to nav links based on scroll position
|
||
const navLinks = document.querySelectorAll('nav a');
|
||
window.addEventListener('scroll', () => {
|
||
let current = '';
|
||
|
||
sections.forEach(section => {
|
||
const sectionTop = section.offsetTop;
|
||
const sectionHeight = section.offsetHeight;
|
||
|
||
if (window.scrollY >= sectionTop - 100) {
|
||
current = section.getAttribute('id');
|
||
}
|
||
});
|
||
|
||
navLinks.forEach(link => {
|
||
link.classList.remove('active');
|
||
if (link.getAttribute('href').substring(1) === current) {
|
||
link.classList.add('active');
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|