优化首页样式
This commit is contained in:
+242
-19
@@ -3,12 +3,116 @@
|
|||||||
========================================= */
|
========================================= */
|
||||||
|
|
||||||
/* --- Hero 区域 --- */
|
/* --- Hero 区域 --- */
|
||||||
|
.site-main {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
.hero-section {
|
.hero-section {
|
||||||
padding: 120px 0 80px;
|
padding: 40px 0;
|
||||||
background-color: var(--bg-body);
|
background-color: var(--bg-body);
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: visible;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
|
min-height: calc(100vh - var(--header-height));
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
isolation: isolate;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-scroll-indicator {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
bottom: 28px;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
z-index: 4;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: opacity 0.45s var(--ease-in-out), transform 0.45s var(--ease-in-out);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-scroll-indicator .scroll-arrow {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border-right: 2px solid currentColor;
|
||||||
|
border-bottom: 2px solid currentColor;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
animation: hero-scroll-bounce 1.6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-scroll-indicator .scroll-text {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
letter-spacing: 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes hero-scroll-bounce {
|
||||||
|
0%, 100% { transform: translateY(0) rotate(45deg); opacity: 0.5; }
|
||||||
|
50% { transform: translateY(6px) rotate(45deg); opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 900px) {
|
||||||
|
.home-hero-initial .site-header {
|
||||||
|
transform: translateY(-100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-hero-initial .site-header,
|
||||||
|
.home-hero-scrolled .site-header {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-hero-initial .hero-scroll-indicator {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(-50%) translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-hero-scrolled .hero-scroll-indicator {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(-50%) translateY(10px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-waves {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 140vh;
|
||||||
|
opacity: 0.5;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 2;
|
||||||
|
mix-blend-mode: screen;
|
||||||
|
filter: saturate(1.08);
|
||||||
|
display: block;
|
||||||
|
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.9) 55%, rgba(0, 0, 0, 0.35) 75%, rgba(0, 0, 0, 0) 100%);
|
||||||
|
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.9) 55%, rgba(0, 0, 0, 0.35) 75%, rgba(0, 0, 0, 0) 100%);
|
||||||
|
-webkit-mask-repeat: no-repeat;
|
||||||
|
mask-repeat: no-repeat;
|
||||||
|
-webkit-mask-size: 100% 100%;
|
||||||
|
mask-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
html:not([data-theme="dark"]) .hero-waves {
|
||||||
|
opacity: 0.55;
|
||||||
|
mix-blend-mode: multiply;
|
||||||
|
filter: saturate(1.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .hero-waves {
|
||||||
|
opacity: 0.5;
|
||||||
|
mix-blend-mode: screen;
|
||||||
|
filter: saturate(1.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 底部渐变遮罩 */
|
/* 底部渐变遮罩 */
|
||||||
@@ -22,18 +126,82 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 大标题 */
|
/* 大标题 */
|
||||||
.hero-content h1 {
|
.hero-title {
|
||||||
font-size: 4rem; /* 增大 Hero 标题 (原3.5rem) */
|
display: flex;
|
||||||
font-weight: 800;
|
justify-content: center;
|
||||||
letter-spacing: -0.02em;
|
margin: 0 0 1.2rem;
|
||||||
margin-bottom: 1.5rem;
|
overflow: visible;
|
||||||
background: linear-gradient(135deg, var(--text-primary) 0%, var(--color-primary) 100%);
|
--hero-title-gradient: linear-gradient(135deg, var(--text-primary) 0%, var(--color-primary) 100%);
|
||||||
-webkit-background-clip: text;
|
width: 100%;
|
||||||
-webkit-text-fill-color: transparent;
|
}
|
||||||
line-height: 1.2;
|
|
||||||
|
.hero-title-svg {
|
||||||
|
display: block;
|
||||||
|
width: min(88vw, 900px);
|
||||||
|
margin: 0 auto;
|
||||||
|
aspect-ratio: 3 / 2;
|
||||||
|
background-image: var(--hero-title-gradient);
|
||||||
|
-webkit-mask: url("../../resources/title.svg") center / contain no-repeat;
|
||||||
|
mask: url("../../resources/title.svg") center / contain no-repeat;
|
||||||
|
filter:
|
||||||
|
drop-shadow(0 10px 24px rgba(12, 20, 32, 0.25))
|
||||||
|
drop-shadow(0 0 18px rgba(120, 190, 255, 0.28));
|
||||||
|
position: relative;
|
||||||
|
transform: translateY(-8px) scale(1.06);
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title-svg::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: -6% -4%;
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at 30% 35%, rgba(255, 255, 255, 0.35), transparent 55%),
|
||||||
|
radial-gradient(circle at 70% 45%, rgba(140, 205, 255, 0.28), transparent 60%),
|
||||||
|
linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));
|
||||||
|
-webkit-mask: url("../../resources/title.svg") center / contain no-repeat;
|
||||||
|
mask: url("../../resources/title.svg") center / contain no-repeat;
|
||||||
|
opacity: 0.22;
|
||||||
|
filter: blur(6px);
|
||||||
|
mix-blend-mode: screen;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
html:not([data-theme="dark"]) .hero-title-svg::before {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title-svg::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 100%;
|
||||||
|
height: 55%;
|
||||||
|
background-image: var(--hero-title-gradient);
|
||||||
|
-webkit-mask: url("../../resources/title.svg") center / contain no-repeat;
|
||||||
|
mask: url("../../resources/title.svg") center / contain no-repeat;
|
||||||
|
transform: scaleY(-1);
|
||||||
|
opacity: 0.18;
|
||||||
|
filter: blur(2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title-text {
|
||||||
|
position: absolute;
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
padding: 0;
|
||||||
|
margin: -1px;
|
||||||
|
overflow: hidden;
|
||||||
|
clip: rect(0, 0, 0, 0);
|
||||||
|
white-space: nowrap;
|
||||||
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 描述文本 (代码风格) */
|
/* 描述文本 (代码风格) */
|
||||||
@@ -52,11 +220,18 @@
|
|||||||
|
|
||||||
/* --- 服务展示区 (Services) --- */
|
/* --- 服务展示区 (Services) --- */
|
||||||
.services-provided {
|
.services-provided {
|
||||||
margin-top: 5rem;
|
margin-top: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.services-section {
|
||||||
|
padding: 80px 0;
|
||||||
|
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, var(--bg-body) 55%);
|
||||||
|
position: relative;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
/* 标题带有命令提示符风格 */
|
/* 标题带有命令提示符风格 */
|
||||||
.services-provided h2 {
|
.services-provided h2 {
|
||||||
font-size: 1.8rem; /* 增大服务标题 (原1.5rem) */
|
font-size: 1.8rem; /* 增大服务标题 (原1.5rem) */
|
||||||
@@ -85,8 +260,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.service-item {
|
.service-item {
|
||||||
background: var(--bg-card);
|
background: transparent;
|
||||||
border: 1px solid var(--border-default);
|
border: none;
|
||||||
border-radius: var(--radius-md);
|
border-radius: var(--radius-md);
|
||||||
padding: 32px 24px;
|
padding: 32px 24px;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -99,8 +274,7 @@
|
|||||||
|
|
||||||
.service-item:hover {
|
.service-item:hover {
|
||||||
transform: translateY(-4px);
|
transform: translateY(-4px);
|
||||||
border-color: var(--color-primary-light);
|
box-shadow: none;
|
||||||
box-shadow: var(--shadow-lg);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.service-icon {
|
.service-icon {
|
||||||
@@ -129,17 +303,66 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.hero-content h1 {
|
.hero-title {
|
||||||
font-size: 2.25rem;
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title-svg {
|
||||||
|
width: min(92vw, 560px);
|
||||||
|
transform: translateY(-6px) scale(1.03);
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-description {
|
.hero-description {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.services-section {
|
||||||
|
padding: 28px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-section {
|
||||||
|
min-height: auto;
|
||||||
|
padding: 16px 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-waves {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-scroll-indicator {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
.services-grid-box {
|
.services-grid-box {
|
||||||
grid-template-columns: 1fr; /* 手机端单列 */
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-item {
|
||||||
|
padding: 12px 8px;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-item:hover {
|
||||||
|
transform: none;
|
||||||
|
border-color: transparent;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-icon {
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-icon svg {
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-item span {
|
||||||
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -13,7 +13,8 @@
|
|||||||
-webkit-backdrop-filter: blur(12px);
|
-webkit-backdrop-filter: blur(12px);
|
||||||
/* 使用半透明背景以增强毛玻璃效果 */
|
/* 使用半透明背景以增强毛玻璃效果 */
|
||||||
background-color: rgba(255, 255, 255, 0.85);
|
background-color: rgba(255, 255, 255, 0.85);
|
||||||
transition: background-color var(--duration-normal), border-color var(--duration-normal);
|
transition: background-color var(--duration-normal), border-color var(--duration-normal), transform 0.45s var(--ease-in-out);
|
||||||
|
will-change: transform;
|
||||||
flex-shrink: 0; /* 防止被父容器 Flex 布局压缩 */
|
flex-shrink: 0; /* 防止被父容器 Flex 布局压缩 */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -292,6 +292,11 @@ html:not([data-theme="dark"]) .intro-about .site-header {
|
|||||||
grid-template-columns: repeat(3, 1fr);
|
grid-template-columns: repeat(3, 1fr);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Stream text characters */
|
||||||
|
.stream-char {
|
||||||
|
transition: opacity 0.4s ease;
|
||||||
|
}
|
||||||
|
|
||||||
/* Animations */
|
/* Animations */
|
||||||
.intro-animate {
|
.intro-animate {
|
||||||
transition: opacity 0.8s var(--ease-in-out), transform 0.8s var(--ease-in-out);
|
transition: opacity 0.8s var(--ease-in-out), transform 0.8s var(--ease-in-out);
|
||||||
|
|||||||
@@ -0,0 +1,140 @@
|
|||||||
|
(() => {
|
||||||
|
const main = document.querySelector('.site-main');
|
||||||
|
const heroSection = document.querySelector('.hero-section');
|
||||||
|
const servicesSection = document.querySelector('.services-section');
|
||||||
|
const canvas = document.querySelector('.hero-waves');
|
||||||
|
if (!main || !canvas) return;
|
||||||
|
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
if (!ctx) return;
|
||||||
|
|
||||||
|
const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)');
|
||||||
|
let width = 0;
|
||||||
|
let height = 0;
|
||||||
|
let dpr = 1;
|
||||||
|
let rafId = null;
|
||||||
|
|
||||||
|
const waveDefs = [
|
||||||
|
{ yRatio: 0.3, amplitude: 22, wavelength: 940, speed: 0.5, alpha: 0.98 },
|
||||||
|
{ yRatio: 0.45, amplitude: 16, wavelength: 1020, speed: 0.58, alpha: 0.92 },
|
||||||
|
{ yRatio: 0.65, amplitude: 14, wavelength: 1160, speed: 0.6, alpha: 0.9 },
|
||||||
|
];
|
||||||
|
|
||||||
|
const palettes = {
|
||||||
|
light: {
|
||||||
|
gradient: ['#e8f3ff', '#cfe6fb', '#558ec1', '#2476af', '#2b6fb3'],
|
||||||
|
waves: ['rgba(170, 215, 245, 0.91)', 'rgba(120, 185, 230, 0.93)', 'rgba(80, 155, 210, 0.95)'],
|
||||||
|
},
|
||||||
|
dark: {
|
||||||
|
gradient: ['#0d1117', '#111d2b', '#14334d', '#17507a', '#1b6aa6'],
|
||||||
|
waves: ['rgba(90, 165, 225, 0.9)', 'rgba(65, 140, 210, 0.88)', 'rgba(50, 120, 190, 0.86)'],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const getTheme = () => (document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light');
|
||||||
|
|
||||||
|
const getCoverageHeight = () => {
|
||||||
|
if (servicesSection) {
|
||||||
|
const coverage = servicesSection.offsetTop + servicesSection.offsetHeight * 0.5;
|
||||||
|
return Math.min(coverage, main.scrollHeight);
|
||||||
|
}
|
||||||
|
if (heroSection) {
|
||||||
|
return heroSection.offsetHeight;
|
||||||
|
}
|
||||||
|
return main.scrollHeight;
|
||||||
|
};
|
||||||
|
|
||||||
|
const resize = () => {
|
||||||
|
dpr = window.devicePixelRatio || 1;
|
||||||
|
width = main.clientWidth;
|
||||||
|
height = Math.max(1, Math.round(getCoverageHeight()));
|
||||||
|
canvas.width = Math.floor(width * dpr);
|
||||||
|
canvas.height = Math.floor(height * dpr);
|
||||||
|
canvas.style.width = `${width}px`;
|
||||||
|
canvas.style.height = `${height}px`;
|
||||||
|
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||||||
|
};
|
||||||
|
|
||||||
|
const drawBackground = (palette) => {
|
||||||
|
const gradient = ctx.createLinearGradient(0, 0, 0, height);
|
||||||
|
gradient.addColorStop(0, palette.gradient[0]);
|
||||||
|
gradient.addColorStop(0.35, palette.gradient[1]);
|
||||||
|
gradient.addColorStop(0.55, palette.gradient[2]);
|
||||||
|
gradient.addColorStop(0.75, palette.gradient[3]);
|
||||||
|
gradient.addColorStop(1, palette.gradient[4]);
|
||||||
|
ctx.fillStyle = gradient;
|
||||||
|
ctx.fillRect(0, 0, width, height);
|
||||||
|
};
|
||||||
|
|
||||||
|
const drawWave = (palette, wave, time, index) => {
|
||||||
|
const yBase = height * wave.yRatio;
|
||||||
|
const phase = time * wave.speed;
|
||||||
|
const prevAlpha = ctx.globalAlpha;
|
||||||
|
ctx.globalAlpha = wave.alpha ?? 1;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(0, height);
|
||||||
|
for (let x = 0; x <= width; x += 18) {
|
||||||
|
const theta = (x / wave.wavelength) * Math.PI * 2 + phase;
|
||||||
|
const y = yBase + Math.sin(theta) * wave.amplitude;
|
||||||
|
ctx.lineTo(x, y);
|
||||||
|
}
|
||||||
|
ctx.lineTo(width, height);
|
||||||
|
ctx.closePath();
|
||||||
|
ctx.fillStyle = palette.waves[index % palette.waves.length];
|
||||||
|
ctx.fill();
|
||||||
|
ctx.globalAlpha = prevAlpha;
|
||||||
|
};
|
||||||
|
|
||||||
|
const render = (timestamp) => {
|
||||||
|
const palette = palettes[getTheme()];
|
||||||
|
const time = timestamp * 0.001;
|
||||||
|
ctx.clearRect(0, 0, width, height);
|
||||||
|
drawBackground(palette);
|
||||||
|
waveDefs.forEach((wave, index) => drawWave(palette, wave, time, index));
|
||||||
|
rafId = requestAnimationFrame(render);
|
||||||
|
};
|
||||||
|
|
||||||
|
const stop = () => {
|
||||||
|
if (rafId) {
|
||||||
|
cancelAnimationFrame(rafId);
|
||||||
|
rafId = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const drawStatic = () => {
|
||||||
|
const palette = palettes[getTheme()];
|
||||||
|
ctx.clearRect(0, 0, width, height);
|
||||||
|
drawBackground(palette);
|
||||||
|
waveDefs.forEach((wave, index) => drawWave(palette, wave, 0, index));
|
||||||
|
};
|
||||||
|
|
||||||
|
const start = () => {
|
||||||
|
stop();
|
||||||
|
resize();
|
||||||
|
if (prefersReduced.matches) {
|
||||||
|
drawStatic();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
rafId = requestAnimationFrame(render);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onResize = () => {
|
||||||
|
resize();
|
||||||
|
if (prefersReduced.matches) {
|
||||||
|
drawStatic();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const themeObserver = new MutationObserver(() => {
|
||||||
|
if (prefersReduced.matches) {
|
||||||
|
drawStatic();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
|
||||||
|
prefersReduced.addEventListener('change', start);
|
||||||
|
window.addEventListener('resize', onResize);
|
||||||
|
window.addEventListener('load', onResize);
|
||||||
|
|
||||||
|
start();
|
||||||
|
})();
|
||||||
@@ -0,0 +1,40 @@
|
|||||||
|
(() => {
|
||||||
|
const hero = document.querySelector('.hero-section');
|
||||||
|
if (!hero) return;
|
||||||
|
|
||||||
|
const body = document.body;
|
||||||
|
const desktopQuery = window.matchMedia('(min-width: 900px)');
|
||||||
|
let hasScrolled = false;
|
||||||
|
|
||||||
|
const applyState = () => {
|
||||||
|
if (!desktopQuery.matches) {
|
||||||
|
body.classList.remove('home-hero-initial', 'home-hero-scrolled');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (hasScrolled || window.scrollY > 6) {
|
||||||
|
body.classList.remove('home-hero-initial');
|
||||||
|
body.classList.add('home-hero-scrolled');
|
||||||
|
} else {
|
||||||
|
body.classList.add('home-hero-initial');
|
||||||
|
body.classList.remove('home-hero-scrolled');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onScroll = () => {
|
||||||
|
hasScrolled = window.scrollY > 6;
|
||||||
|
applyState();
|
||||||
|
};
|
||||||
|
|
||||||
|
const onResize = () => {
|
||||||
|
if (!desktopQuery.matches) {
|
||||||
|
hasScrolled = false;
|
||||||
|
}
|
||||||
|
applyState();
|
||||||
|
};
|
||||||
|
|
||||||
|
applyState();
|
||||||
|
window.addEventListener('scroll', onScroll, { passive: true });
|
||||||
|
window.addEventListener('resize', onResize);
|
||||||
|
desktopQuery.addEventListener('change', onResize);
|
||||||
|
})();
|
||||||
+1
-1
@@ -1,5 +1,5 @@
|
|||||||
document.addEventListener('DOMContentLoaded', function() {
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
const container = document.querySelector('.hero-description');
|
const container = document.querySelector('.stream-text') || document.querySelector('.hero-description');
|
||||||
if (!container) return;
|
if (!container) return;
|
||||||
|
|
||||||
const cnText = container.getAttribute('data-cn') || '';
|
const cnText = container.getAttribute('data-cn') || '';
|
||||||
|
|||||||
+8
-6
@@ -31,17 +31,19 @@ function itstudio_enqueue_scripts() {
|
|||||||
// 仅在首页加载 Hero 样式
|
// 仅在首页加载 Hero 样式
|
||||||
if (is_front_page() || is_home()) {
|
if (is_front_page() || is_home()) {
|
||||||
wp_enqueue_style('itstudio-front-page', get_template_directory_uri() . '/assets/css/front-page.css', array('itstudio-style'), '2.1.2');
|
wp_enqueue_style('itstudio-front-page', get_template_directory_uri() . '/assets/css/front-page.css', array('itstudio-style'), '2.1.2');
|
||||||
|
wp_enqueue_script('itstudio-hero-waves', get_template_directory_uri() . '/assets/js/hero-waves.js', array(), '1.0.0', true);
|
||||||
|
wp_enqueue_script('itstudio-home-hero', get_template_directory_uri() . '/assets/js/home-hero.js', array(), '1.0.0', true);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 仅在工作室介绍页加载(包含 /about fallback)
|
// 仅在工作室介绍页加载(包含 /about fallback)
|
||||||
$is_about_fallback = false;
|
$is_about = is_page('about') || is_page_template('page-about.php');
|
||||||
if (is_404()) {
|
if (!$is_about && is_404()) {
|
||||||
global $wp;
|
global $wp;
|
||||||
$request = isset($wp->request) ? trim($wp->request, '/') : '';
|
$request = isset($wp->request) ? trim($wp->request, '/') : '';
|
||||||
$is_about_fallback = ($request === 'about');
|
$is_about = ($request === 'about');
|
||||||
}
|
}
|
||||||
|
|
||||||
if (is_page('about') || is_page_template('page-about.php') || $is_about_fallback) {
|
if ($is_about) {
|
||||||
wp_enqueue_style('itstudio-intro', get_template_directory_uri() . '/assets/css/intro.css', array('itstudio-content'), '2.1.2');
|
wp_enqueue_style('itstudio-intro', get_template_directory_uri() . '/assets/css/intro.css', array('itstudio-content'), '2.1.2');
|
||||||
wp_enqueue_script('itstudio-intro-scroll', get_template_directory_uri() . '/assets/js/intro-scroll.js', array(), '1.0.0', true);
|
wp_enqueue_script('itstudio-intro-scroll', get_template_directory_uri() . '/assets/js/intro-scroll.js', array(), '1.0.0', true);
|
||||||
}
|
}
|
||||||
@@ -49,8 +51,8 @@ function itstudio_enqueue_scripts() {
|
|||||||
// Scripts
|
// Scripts
|
||||||
wp_enqueue_script('itstudio-theme-toggle', get_template_directory_uri() . '/assets/js/theme-toggle.js', array(), '1.0.0', true);
|
wp_enqueue_script('itstudio-theme-toggle', get_template_directory_uri() . '/assets/js/theme-toggle.js', array(), '1.0.0', true);
|
||||||
wp_enqueue_script('itstudio-lang-toggle', get_template_directory_uri() . '/assets/js/lang-toggle.js', array(), '1.0.0', true);
|
wp_enqueue_script('itstudio-lang-toggle', get_template_directory_uri() . '/assets/js/lang-toggle.js', array(), '1.0.0', true);
|
||||||
// 注册并加载打字机效果脚本 - 仅在首页
|
// 注册并加载打字机效果脚本 - 仅在工作室介绍页
|
||||||
if (is_front_page() || is_home()) {
|
if ($is_about) {
|
||||||
wp_enqueue_script('itstudio-stream', get_template_directory_uri() . '/assets/js/stream.js', array(), '1.0.0', true);
|
wp_enqueue_script('itstudio-stream', get_template_directory_uri() . '/assets/js/stream.js', array(), '1.0.0', true);
|
||||||
}
|
}
|
||||||
wp_enqueue_script('itstudio-main', get_template_directory_uri() . '/assets/js/main.js', array(), '1.0.0', true);
|
wp_enqueue_script('itstudio-main', get_template_directory_uri() . '/assets/js/main.js', array(), '1.0.0', true);
|
||||||
|
|||||||
@@ -1,13 +1,24 @@
|
|||||||
<?php get_header(); ?>
|
<?php get_header(); ?>
|
||||||
|
|
||||||
<main class="site-main">
|
<main class="site-main">
|
||||||
|
<canvas class="hero-waves" aria-hidden="true"></canvas>
|
||||||
<section class="hero-section">
|
<section class="hero-section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="hero-content">
|
<div class="hero-content">
|
||||||
<h1 data-cn="爱特工作室" data-en="IT STUDIO"></h1>
|
<h1 class="hero-title">
|
||||||
<p class="hero-description" data-cn="爱特工作室成立于2002年,致力于发现人才、培养人才、输送人才。现已拥有UI设计、Web开发、程序设计、Android开发、游戏设计、iOS开发六大技术方向,是海大网络技术的中坚力量!" data-en="Founded in 2002, IT Studio is dedicated to discovering, cultivating, and delivering talent. With six major technical directions including UI Design, Web Development, Programming, Android Development, Game Design, and iOS Development, we are the backbone of OUC's network technology!"></p>
|
<span class="hero-title-svg" aria-hidden="true"></span>
|
||||||
|
<span class="hero-title-text" data-cn="爱特工作室" data-en="IT STUDIO"></span>
|
||||||
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-scroll-indicator" aria-hidden="true">
|
||||||
|
<span class="scroll-arrow"></span>
|
||||||
|
<span class="scroll-text" data-cn="向下滑动开始" data-en="Scroll to begin"></span>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="services-section">
|
||||||
|
<div class="container">
|
||||||
<!-- 服务提供模块 -->
|
<!-- 服务提供模块 -->
|
||||||
<div class="services-provided">
|
<div class="services-provided">
|
||||||
<h2 data-cn="# 服务提供" data-en="# Our Services"></h2>
|
<h2 data-cn="# 服务提供" data-en="# Our Services"></h2>
|
||||||
|
|||||||
+1
-1
@@ -8,7 +8,7 @@ get_header();
|
|||||||
<div class="container intro-hero-grid">
|
<div class="container intro-hero-grid">
|
||||||
<div class="intro-copy">
|
<div class="intro-copy">
|
||||||
<h1 class="intro-title intro-animate" style="--delay: 0.05s" data-cn="与海同频的技术社团" data-en="A Tech Studio Tuned to the Ocean"></h1>
|
<h1 class="intro-title intro-animate" style="--delay: 0.05s" data-cn="与海同频的技术社团" data-en="A Tech Studio Tuned to the Ocean"></h1>
|
||||||
<p class="intro-lead intro-animate" style="--delay: 0.1s" data-cn="中国海洋大学爱特工作室,自 2002 年以来聚焦人才培养与真实项目,连接设计、开发与创新实践。" data-en="Since 2002, IT Studio at OUC connects design, engineering, and real projects to grow talent."></p>
|
<p class="intro-lead intro-animate stream-text" style="--delay: 0.1s" data-cn="中国海洋大学爱特工作室,自 2002 年以来聚焦人才培养与真实项目,连接设计、开发与创新实践。" data-en="Since 2002, IT Studio at OUC connects design, engineering, and real projects to grow talent."></p>
|
||||||
<p class="intro-sub intro-animate" style="--delay: 0.15s" data-cn="在海洋与科技之间,探索更有温度的数字创造。" data-en="Where ocean spirit meets modern engineering."></p>
|
<p class="intro-sub intro-animate" style="--delay: 0.15s" data-cn="在海洋与科技之间,探索更有温度的数字创造。" data-en="Where ocean spirit meets modern engineering."></p>
|
||||||
<div class="intro-cta-group intro-animate" style="--delay: 0.2s">
|
<div class="intro-cta-group intro-animate" style="--delay: 0.2s">
|
||||||
<a class="intro-btn intro-btn--primary" href="#overview" data-cn="开始探索" data-en="Explore" aria-label="Explore"></a>
|
<a class="intro-btn intro-btn--primary" href="#overview" data-cn="开始探索" data-en="Explore" aria-label="Explore"></a>
|
||||||
|
|||||||
@@ -0,0 +1,14 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="3000" height="2000" viewBox="0 500 3000 2000">
|
||||||
|
<defs>
|
||||||
|
<style>
|
||||||
|
.cls-1 {
|
||||||
|
fill: #000000;
|
||||||
|
stroke-width: 1px;
|
||||||
|
fill-rule: evenodd;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</defs>
|
||||||
|
<path id="形状_1" data-name="形状 1" class="cls-1" d="M382,1228l415-32,4,68s-219.245,8.45-339.022,13.07C416.965,1278.81,386,1280,386,1280Zm26,78,54-27,31,71,64-4-24-44,53-27,24,66,72-6,32-68h30l33,17-30,46,40-3,69,42-15,111-55,5-2-89-251,11-7,24,245-8-15,65-243-1-5,27,218-6,46,47-64,72,126,52-32,64-143-68-186,68-28-59,130-47-82-40,20-32-19-2L389,1720l-52-40,100-141,14-52H417l-8-48,54-4,7-23-72,1-2,66-59,12-10-145,71,3,1,8,36-3Zm151,258,108,4-30,29Zm364-141-34,127,31,12,21-59h30l1,95-69,26,19,44,50-24v111h37l2-129,38-18-12-34-25,10,1-81,27-2,6-46-31,2,1-65-44-5-1,67-15,2,8-21"/>
|
||||||
|
<path id="形状_2" data-name="形状 2" class="cls-1" d="M1067,1428l5,36,69-1-1,50-100,5,2,37h219l5-46-87,2,3-47,67-1,5-46-69,2,1-33-41-3-2,39Z"/>
|
||||||
|
<path id="形状_3" data-name="形状 3" class="cls-1" d="M1179,1560l45,4v23h37l-4,46-34,1-2,121-42,2-33-16,12-34,21,7,1-80H1054l-4-39,130-6Zm-74,83,43,50-25,25-50-46Zm217-298,371-14-4,61-155,1-5,202,188-4-5,62-413,1-8-53,182-3-5-203-141-1Zm480,4-122,169,39,27,28-34-1,280,47-5,10-327-11-6,57-69Zm102,2-81,177,42,19,45-79,33,1,2,327,48-3,1-104,112-3,8-55-118,8,2-56h97l5-52-102,4,2-65,113-2,3-59-177,6,20-39Zm424-59-41,37,24,22-109,8v-7l-59-2,3,115,48-6,5-55,301-4-5,61,46-4,18-80-53-35-129,7Zm-123,146,4,42,67,2-69,62,33,39,216-7,11,25,46-20-48-84-39,17,10,20-148,3,54-55,144-2,6-49Zm130,149,52,5v17l111-2-6,52-109,1-4,34,152-6-3,53-350,5-8-44,168-8-4-33H2207l-5-42,133-6v-26Z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
Reference in New Issue
Block a user