ITStudio_OUC/ITStudioMainSite
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

爱特介绍页初稿

Browse Source
This commit is contained in:
古宇恒
2026-02-12 23:33:46 +08:00
parent 8b105e37eb
commit d4483f204e
4 changed files with 665 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/intro.css
+377
View File
@@ -0,0 +1,377 @@
/* =========================================
Introduction Page (About)
========================================= */
.intro-page {
position: relative;
overflow: hidden;
background-color: var(--bg-body);
--intro-glow-primary: rgba(9, 105, 218, 0.14);
--intro-glow-accent: rgba(142, 136, 199, 0.14);
}
[data-theme="dark"] .intro-page {
--intro-glow-primary: rgba(88, 166, 255, 0.22);
--intro-glow-accent: rgba(142, 136, 199, 0.2);
}
.intro-page::before {
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 18% 8%, var(--intro-glow-primary), transparent 45%),
radial-gradient(circle at 85% 0%, var(--intro-glow-accent), transparent 40%),
linear-gradient(var(--border-muted) 1px, transparent 1px),
linear-gradient(90deg, var(--border-muted) 1px, transparent 1px);
background-size: auto, auto, 64px 64px, 64px 64px;
background-position: center top;
opacity: 0.7;
pointer-events: none;
}
.intro-about .site-header {
background-color: rgba(14, 22, 36, 0.78);
border-bottom-color: rgba(255, 255, 255, 0.06);
}
html:not([data-theme="dark"]) .intro-about .site-header {
background-color: rgba(246, 249, 252, 0.9);
border-bottom-color: rgba(36, 41, 47, 0.08);
}
.intro-page > * {
position: relative;
z-index: 1;
}
.intro-step {
padding: 120px 0;
scroll-margin-top: 110px;
}
.intro-hero {
padding-top: 140px;
padding-bottom: 120px;
}
.intro-hero-grid,
.intro-grid,
.intro-join-grid {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 64px;
align-items: center;
}
.intro-grid.reverse .intro-media,
.intro-grid.reverse .intro-join-media {
order: -1;
}
.intro-copy {
display: flex;
flex-direction: column;
gap: 16px;
}
.intro-hero .intro-copy {
gap: 14px;
}
.intro-title {
font-size: clamp(2.6rem, 4vw, 4rem);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.15;
margin-bottom: 0;
background: linear-gradient(120deg, var(--text-primary), var(--color-primary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.intro-heading {
font-size: clamp(2rem, 3vw, 2.8rem);
font-weight: 700;
letter-spacing: -0.01em;
margin-bottom: 0.5rem;
}
.intro-lead {
font-size: 1.2rem;
color: var(--text-secondary);
}
.intro-sub,
.intro-text {
color: var(--text-secondary);
font-size: 1.05rem;
}
.intro-cta-group {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin-top: 4px;
}
.intro-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 20px;
border-radius: var(--radius-sm);
border: 1px solid var(--color-primary);
font-weight: 600;
font-size: 1rem;
color: var(--text-primary);
background-color: transparent;
transition: all var(--duration-fast);
}
.intro-btn--primary {
background: linear-gradient(120deg, var(--color-primary), var(--color-primary-light));
color: #fff;
border-color: transparent;
box-shadow: var(--shadow-sm);
}
.intro-btn--primary:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.intro-btn--ghost:hover {
color: var(--color-primary);
border-color: var(--color-primary);
}
.intro-stats {
display: flex;
flex-wrap: wrap;
gap: 24px;
margin-top: 8px;
}
.intro-stat {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 16px;
border-radius: var(--radius-sm);
border: 1px solid var(--border-default);
background-color: var(--bg-card);
min-width: 120px;
}
.stat-number {
font-size: 1.4rem;
font-weight: 700;
color: var(--text-primary);
}
.stat-label {
font-size: 0.9rem;
color: var(--text-secondary);
}
.intro-media,
.intro-hero-media,
.intro-join-media {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.intro-hero-media {
align-items: stretch;
}
.media-card {
min-height: 200px;
border-radius: var(--radius-md);
border: 1px dashed var(--border-default);
background-color: var(--bg-card);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-family: var(--font-mono);
font-size: 0.9rem;
color: var(--text-secondary);
padding: 16px;
}
.media-card--tall {
grid-row: span 2;
min-height: 420px;
}
.media-card--wide {
grid-column: span 2;
min-height: 240px;
}
.intro-points {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 12px;
}
.intro-points li,
.intro-list li {
position: relative;
padding-left: 18px;
color: var(--text-secondary);
}
.intro-points li::before,
.intro-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--color-primary);
}
.intro-org-grid,
.intro-feature-grid,
.intro-adv-grid {
display: grid;
gap: 16px;
margin-top: 16px;
}
.intro-org-grid,
.intro-feature-grid {
grid-template-columns: repeat(3, 1fr);
}
.intro-adv-grid {
grid-template-columns: repeat(2, 1fr);
}
.intro-card {
border-radius: var(--radius-md);
border: 1px solid var(--border-default);
background-color: var(--bg-card);
padding: 20px;
display: flex;
flex-direction: column;
gap: 8px;
}
.intro-card h3 {
font-size: 1.1rem;
font-weight: 600;
}
.intro-card p {
color: var(--text-secondary);
font-size: 0.95rem;
}
.intro-list {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 4px;
}
.intro-join {
padding-bottom: 140px;
}
.intro-join-grid {
align-items: start;
}
.intro-join-content {
display: flex;
flex-direction: column;
gap: 16px;
}
.intro-join-media {
grid-template-columns: repeat(3, 1fr);
}
/* Animations */
.intro-animate {
transition: opacity 0.8s var(--ease-in-out), transform 0.8s var(--ease-in-out);
transition-delay: var(--delay, 0s);
}
body.has-intro-animations .intro-animate {
opacity: 0;
transform: translateY(30px);
}
body.has-intro-animations .intro-step.is-active .intro-animate {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.intro-animate {
transition: none !important;
opacity: 1 !important;
transform: none !important;
}
}
/* Responsive */
@media (max-width: 1100px) {
.intro-hero-grid,
.intro-grid,
.intro-join-grid {
grid-template-columns: 1fr;
}
.intro-grid.reverse .intro-media,
.intro-grid.reverse .intro-join-media {
order: 0;
}
.intro-org-grid,
.intro-feature-grid {
grid-template-columns: repeat(2, 1fr);
}
.intro-adv-grid {
grid-template-columns: 1fr;
}
.intro-join-media {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.intro-step {
padding: 80px 0;
}
.intro-hero {
padding-top: 110px;
}
.intro-title {
font-size: 2.2rem;
}
.intro-cta-group {
flex-direction: column;
align-items: flex-start;
}
.intro-org-grid,
.intro-feature-grid,
.intro-join-media {
grid-template-columns: 1fr;
}
}
assets/js/intro-scroll.js
+31
View File
@@ -0,0 +1,31 @@
(() => {
const steps = document.querySelectorAll('.intro-step');
if (!steps.length) return;
const markActive = () => {
const vh = window.innerHeight;
steps.forEach((step) => {
const rect = step.getBoundingClientRect();
const isActive = rect.top < vh * 0.8 && rect.bottom > vh * 0.2;
step.classList.toggle('is-active', isActive);
});
};
markActive();
document.body.classList.add('has-intro-animations');
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
entry.target.classList.toggle('is-active', entry.isIntersecting);
});
},
{
threshold: 0.35,
rootMargin: '0px 0px -15% 0px',
}
);
steps.forEach((step) => observer.observe(step));
window.addEventListener('resize', markActive);
})();
functions.php
+80
View File
@@ -33,6 +33,19 @@ function itstudio_enqueue_scripts() {
wp_enqueue_style('itstudio-front-page', get_template_directory_uri() . '/assets/css/front-page.css', array('itstudio-style'), '2.1.2');
}
// 仅在工作室介绍页加载（包含 /about fallback）
$is_about_fallback = false;
if (is_404()) {
global $wp;
$request = isset($wp->request) ? trim($wp->request, '/') : '';
$is_about_fallback = ($request === 'about');
}
if (is_page('about') || is_page_template('page-about.php') || $is_about_fallback) {
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);
}
// 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-lang-toggle', get_template_directory_uri() . '/assets/js/lang-toggle.js', array(), '1.0.0', true);
@@ -67,6 +80,22 @@ function itstudio_register_sidebars() {
}
add_action('widgets_init', 'itstudio_register_sidebars');
function itstudio_intro_body_class($classes) {
$is_about = is_page('about') || is_page_template('page-about.php');
if (!$is_about && is_404()) {
global $wp;
$request = isset($wp->request) ? trim($wp->request, '/') : '';
$is_about = ($request === 'about');
}
if ($is_about) {
$classes[] = 'intro-about';
}
return $classes;
}
add_filter('body_class', 'itstudio_intro_body_class');
function itstudio_custom_post_types() {
register_post_type('announcement', array(
'labels' => array(
@@ -82,6 +111,57 @@ function itstudio_custom_post_types() {
}
add_action('init', 'itstudio_custom_post_types');
// Fallback: render /about even if the page isn't created in WP admin.
function itstudio_about_fallback() {
if (!is_404()) {
return;
}
global $wp;
$request = isset($wp->request) ? trim($wp->request, '/') : '';
if ($request !== 'about') {
return;
}
$template = locate_template('page-about.php');
if ($template) {
global $wp_query;
if ($wp_query) {
$wp_query->is_404 = false;
$wp_query->is_page = true;
$wp_query->is_singular = true;
$virtual_post = new WP_Post((object) array(
'ID' => 0,
'post_type' => 'page',
'post_parent' => 0,
'post_title' => __('工作室介绍', 'itstudio'),
'post_status' => 'publish',
'post_name' => 'about',
'post_content' => '',
));
$wp_query->post = $virtual_post;
$wp_query->posts = array($virtual_post);
$wp_query->queried_object = $virtual_post;
$wp_query->queried_object_id = 0;
$wp_query->post_count = 1;
$wp_query->found_posts = 1;
$wp_query->max_num_pages = 1;
global $post;
$post = $virtual_post;
setup_postdata($post);
}
add_filter('document_title_parts', function ($parts) {
$parts['title'] = __('工作室介绍', 'itstudio');
return $parts;
});
status_header(200);
nocache_headers();
include $template;
exit;
}
}
add_action('template_redirect', 'itstudio_about_fallback');
/**
* GitHub 风格评论
*/
page-about.php
+177
View File
@@ -0,0 +1,177 @@
<?php
/* Template Name: IT Studio Introduction */
get_header();
?>
<main class="site-main intro-page">
<section class="intro-hero intro-step is-active" id="intro">
<div class="container intro-hero-grid">
<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>
<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-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">
<a class="intro-btn intro-btn--primary" href="#overview" data-cn="开始探索" data-en="Explore" aria-label="Explore"></a>
<a class="intro-btn intro-btn--ghost" href="<?php echo esc_url(home_url('/join')); ?>" data-cn="加入我们" data-en="Join Us" aria-label="Join Us"></a>
</div>
<div class="intro-stats intro-animate" style="--delay: 0.25s">
<div class="intro-stat">
<span class="stat-number">2002</span>
<span class="stat-label" data-cn="成立" data-en="Founded"></span>
</div>
<div class="intro-stat">
<span class="stat-number">6</span>
<span class="stat-label" data-cn="方向" data-en="Tracks"></span>
</div>
<div class="intro-stat">
<span class="stat-number">20+</span>
<span class="stat-label" data-cn="积累" data-en="Years"></span>
</div>
</div>
</div>
<div class="intro-hero-media">
<div class="media-card media-card--tall intro-animate" style="--delay: 0.15s" data-cn="视频占位：工作室剪影" data-en="Video Slot: Studio Reel"></div>
<div class="media-card intro-animate" style="--delay: 0.2s" data-cn="图片占位：成员日常" data-en="Image Slot: Daily Life"></div>
<div class="media-card intro-animate" style="--delay: 0.25s" data-cn="图片占位：赛事/项目" data-en="Image Slot: Projects & Competitions"></div>
</div>
</div>
</section>
<section class="intro-section intro-step" id="overview">
<div class="container intro-grid">
<div class="intro-copy">
<h2 class="intro-heading intro-animate" style="--delay: 0s" data-cn="工作室概述" data-en="Overview"></h2>
<p class="intro-text intro-animate" style="--delay: 0.05s" data-cn="依托信息科学与工程学部，爱特坚持项目驱动与教学并行，面向真实场景输出作品与人才。" data-en="Backed by the School of Information Science and Engineering, IT Studio blends project delivery with hands-on training."></p>
<ul class="intro-points">
<li class="intro-animate" style="--delay: 0.1s"><span data-cn="项目驱动，贯通设计到开发" data-en="Project-driven pipeline from design to delivery"></span></li>
<li class="intro-animate" style="--delay: 0.15s"><span data-cn="课堂与实践并行，培养工程思维" data-en="Learning meets practice to build engineering mindset"></span></li>
<li class="intro-animate" style="--delay: 0.2s"><span data-cn="开放协作，跨方向互相赋能" data-en="Open collaboration across tracks"></span></li>
</ul>
</div>
<div class="intro-media">
<div class="media-card media-card--wide intro-animate" style="--delay: 0.1s" data-cn="视频占位：项目发布" data-en="Video Slot: Project Launch"></div>
<div class="media-card intro-animate" style="--delay: 0.15s" data-cn="图片占位：工作室环境" data-en="Image Slot: Workspace"></div>
<div class="media-card intro-animate" style="--delay: 0.2s" data-cn="图片占位：团队合影" data-en="Image Slot: Team Photo"></div>
</div>
</div>
</section>
<section class="intro-section intro-step" id="structure">
<div class="container intro-grid reverse">
<div class="intro-copy">
<h2 class="intro-heading intro-animate" style="--delay: 0s" data-cn="组织架构" data-en="Organization"></h2>
<p class="intro-text intro-animate" style="--delay: 0.05s" data-cn="矩阵式结构让每个方向深耕专业，同时保持跨团队协作与统一标准。" data-en="A matrix structure keeps each track focused while enabling cross-team collaboration."></p>
<div class="intro-org-grid">
<div class="intro-card intro-animate" style="--delay: 0.1s">
<h3 data-cn="产品与设计" data-en="Product & Design"></h3>
<p data-cn="从需求到体验，定义产品路径" data-en="Define experience from insights to prototype"></p>
</div>
<div class="intro-card intro-animate" style="--delay: 0.12s">
<h3 data-cn="Web 开发" data-en="Web Development"></h3>
<p data-cn="构建稳定高效的应用与平台" data-en="Build reliable platforms and services"></p>
</div>
<div class="intro-card intro-animate" style="--delay: 0.14s">
<h3 data-cn="程序设计" data-en="Programming"></h3>
<p data-cn="算法与工程能力双线成长" data-en="Algorithmic rigor with engineering skill"></p>
</div>
<div class="intro-card intro-animate" style="--delay: 0.16s">
<h3 data-cn="移动开发" data-en="Mobile Development"></h3>
<p data-cn="打造便捷流畅的移动体验" data-en="Deliver polished mobile experiences"></p>
</div>
<div class="intro-card intro-animate" style="--delay: 0.18s">
<h3 data-cn="游戏与交互" data-en="Game & Interaction"></h3>
<p data-cn="创意玩法与交互体验探索" data-en="Experiment with interactive innovation"></p>
</div>
<div class="intro-card intro-animate" style="--delay: 0.2s">
<h3 data-cn="运营与传播" data-en="Operations & Media"></h3>
<p data-cn="记录成长与团队品牌传播" data-en="Tell stories and amplify impact"></p>
</div>
</div>
</div>
<div class="intro-media">
<div class="media-card media-card--wide intro-animate" style="--delay: 0.1s" data-cn="结构图占位：组织矩阵" data-en="Org Chart Slot"></div>
<div class="media-card intro-animate" style="--delay: 0.15s" data-cn="图片占位：部门协作" data-en="Image Slot: Collaboration"></div>
<div class="media-card intro-animate" style="--delay: 0.2s" data-cn="图片占位：技术分享" data-en="Image Slot: Tech Talk"></div>
</div>
</div>
</section>
<section class="intro-section intro-step" id="culture">
<div class="container intro-grid">
<div class="intro-copy">
<h2 class="intro-heading intro-animate" style="--delay: 0s" data-cn="社团特色" data-en="Culture"></h2>
<p class="intro-text intro-animate" style="--delay: 0.05s" data-cn="舒适环境与严谨技术并重，爱特强调分享、共创与持续成长。" data-en="We balance a comfortable space with rigorous craft, highlighting sharing and growth."></p>
<div class="intro-feature-grid">
<div class="intro-card intro-animate" style="--delay: 0.1s">
<h3 data-cn="海洋元素空间" data-en="Ocean-inspired Space"></h3>
<p data-cn="清爽明快的海洋色调与科技感布局" data-en="Ocean palettes with a modern tech layout"></p>
</div>
<div class="intro-card intro-animate" style="--delay: 0.14s">
<h3 data-cn="导师与学长共创" data-en="Mentors & Alumni"></h3>
<p data-cn="前辈指导与同行交流并行" data-en="Guided mentorship and peer exchange"></p>
</div>
<div class="intro-card intro-animate" style="--delay: 0.18s">
<h3 data-cn="分享与教学氛围" data-en="Teaching Culture"></h3>
<p data-cn="内部课程、公开分享与成果展示" data-en="Workshops, open talks, and demos"></p>
</div>
</div>
</div>
<div class="intro-media">
<div class="media-card media-card--tall intro-animate" style="--delay: 0.12s" data-cn="视频占位：空间巡礼" data-en="Video Slot: Studio Tour"></div>
<div class="media-card intro-animate" style="--delay: 0.16s" data-cn="图片占位：教学现场" data-en="Image Slot: Workshop"></div>
<div class="media-card intro-animate" style="--delay: 0.2s" data-cn="图片占位：文化活动" data-en="Image Slot: Community"></div>
</div>
</div>
</section>
<section class="intro-section intro-step" id="advantages">
<div class="container intro-grid reverse">
<div class="intro-copy">
<h2 class="intro-heading intro-animate" style="--delay: 0s" data-cn="独特优势" data-en="Advantages"></h2>
<p class="intro-text intro-animate" style="--delay: 0.05s" data-cn="资源与支持覆盖从想法到落地的全链路，帮助成员更快成长。" data-en="Resources cover the full cycle from idea to launch, accelerating growth."></p>
<div class="intro-adv-grid">
<div class="intro-card intro-animate" style="--delay: 0.1s">
<h3 data-cn="资源池" data-en="Resources"></h3>
<ul class="intro-list">
<li><span data-cn="高性能计算与私有服务器支持" data-en="High-performance compute and servers"></span></li>
<li><span data-cn="专属场地与硬件设备" data-en="Dedicated space and hardware"></span></li>
<li><span data-cn="校内导师与行业资源" data-en="Academic and industry mentors"></span></li>
<li><span data-cn="优秀学长学姐经验传承" data-en="Alumni knowledge sharing"></span></li>
</ul>
</div>
<div class="intro-card intro-animate" style="--delay: 0.14s">
<h3 data-cn="成员福利" data-en="Benefits"></h3>
<ul class="intro-list">
<li><span data-cn="主流 AI 工具与算力支持" data-en="Access to AI tools and compute"></span></li>
<li><span data-cn="赛事奖励与项目展示机会" data-en="Competitions and demo opportunities"></span></li>
<li><span data-cn="企业项目与实习推荐" data-en="Industry projects and internships"></span></li>
<li><span data-cn="礼品激励与成长认证" data-en="Rewards and growth recognition"></span></li>
</ul>
</div>
</div>
</div>
<div class="intro-media">
<div class="media-card media-card--wide intro-animate" style="--delay: 0.12s" data-cn="视频占位：算力与设备" data-en="Video Slot: Compute Lab"></div>
<div class="media-card intro-animate" style="--delay: 0.16s" data-cn="图片占位：资源展示" data-en="Image Slot: Resources"></div>
<div class="media-card intro-animate" style="--delay: 0.2s" data-cn="图片占位：奖励与成果" data-en="Image Slot: Achievements"></div>
</div>
</div>
</section>
<section class="intro-section intro-step intro-join" id="join">
<div class="container intro-join-grid">
<div class="intro-join-content">
<h2 class="intro-heading intro-animate" style="--delay: 0s" data-cn="加入爱特工作室" data-en="Join IT Studio"></h2>
<p class="intro-text intro-animate" style="--delay: 0.05s" data-cn="如果你热爱技术与创造，我们欢迎你。一起把想法变成作品。" data-en="If you love building with technology, you're welcome here. Let's turn ideas into impact."></p>
<a class="intro-btn intro-btn--primary intro-animate" style="--delay: 0.1s" href="<?php echo esc_url(home_url('/join')); ?>" data-cn="立即加入" data-en="Apply Now" aria-label="Apply Now"></a>
</div>
<div class="intro-join-media intro-animate" style="--delay: 0.15s">
<div class="media-card" data-cn="图片占位：招新现场" data-en="Image Slot: Recruitment"></div>
<div class="media-card" data-cn="图片占位：成员合影" data-en="Image Slot: Team Moment"></div>
<div class="media-card" data-cn="视频占位：未来愿景" data-en="Video Slot: Vision"></div>
</div>
</div>
</section>
</main>
<?php get_footer(); ?>