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-08 23:18:56 +08:00
parent a36c91a762
commit 3a19f3c311
13 changed files with 1407 additions and 1047 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.php
+77 -109
View File
@@ -10,22 +10,15 @@
<!-- 服务提供模块 -->
<div class="services-provided">
<h2 data-cn="@服务提供" data-en="@Our Services"></h2>
<h2 data-cn="# 服务提供" data-en="# Our Services"></h2>
<div class="services-grid-box">
<a href="#" class="service-item">
<div class="service-icon">
<svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad-res" x1="0" y1="64" x2="64" y2="0" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#bab5ec"/>
<stop offset="1" stop-color="#f1b7bf"/>
</linearGradient>
</defs>
<path d="M4,16 L24,16 L30,22 L60,22 L60,54 L4,54 Z" fill="#bab5ec" opacity="0.5"/>
<rect x="10" y="10" width="40" height="40" fill="#f8d1d9" rx="2" />
<rect x="16" y="18" width="20" height="2" fill="#bab5ec" />
<rect x="16" y="24" width="28" height="2" fill="#bab5ec" />
<path d="M4,28 L60,28 L60,54 A4,4 0 0,1 56,58 L8,58 A4,4 0 0,1 4,54 Z" fill="url(#grad-res)"/>
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M10 14L24 14L28 20H54C56.2091 20 58 21.7909 58 24V50C58 52.2091 56.2091 54 54 54H10C7.79086 54 6 52.2091 6 50V18C6 15.7909 7.79086 14 10 14Z" stroke="#ccd6f6"/>
<path d="M22 34H42" stroke="#64ffda"/>
<path d="M22 42H34" stroke="#64ffda"/>
<circle cx="48" cy="42" r="2" fill="#64ffda" stroke="none"/>
</svg>
</div>
<span data-cn="资源站" data-en="Resources"></span>
@@ -33,19 +26,14 @@
<a href="#" class="service-item">
<div class="service-icon">
<svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="mirror-gradient" x1="10" y1="60" x2="54" y2="4" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#bab5ec"/>
<stop offset="1" stop-color="#f1b7bf"/>
</linearGradient>
</defs>
<path d="M32,4 A28,28 0 1,1 4,32 A28,28 0 0,1 32,4 M32,22 A10,10 0 1,0 42,32 A10,10 0 0,0 32,22 Z" fill="url(#mirror-gradient)" stroke="#bab5ec" stroke-width="1" opacity="0.95"/>
<path d="M32,4 A28,28 0 0,1 60,32 L42,32 A10,10 0 0,0 32,22 Z" fill="#f8d1d9" opacity="0.8"/>
<circle cx="32" cy="32" r="7" fill="none" stroke="#f8d1d9" stroke-width="2" opacity="0.6" />
<rect x="14" y="42" width="4" height="4" rx="1" fill="#bab5ec" transform="rotate(45 16 44)" />
<rect x="50" y="14" width="3" height="3" rx="0.5" fill="#f8d1d9" />
<path d="M16,46 A22,22 0 0,0 48,46" fill="none" stroke="#f8d1d9" stroke-width="2" stroke-linecap="round" stroke-dasharray="4 4" opacity="0.5" />
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="32" cy="32" r="24" stroke="#ccd6f6"/>
<circle cx="32" cy="32" r="8" stroke="#ccd6f6"/>
<path d="M32 24V8" stroke="#64ffda"/>
<path d="M32 40V56" stroke="#233554"/>
<path d="M49 32H56" stroke="#64ffda"/>
<path d="M8 32H15" stroke="#233554"/>
<path d="M44 14C48 18 50 24 50 32" stroke="#64ffda" stroke-dasharray="4 4"/>
</svg>
</div>
<span data-cn="校内镜像站" data-en="Mirror Site"></span>
@@ -53,22 +41,13 @@
<a href="#" class="service-item">
<div class="service-icon">
<svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad-code" x1="10" y1="60" x2="50" y2="10" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#bab5ec"/>
<stop offset="1" stop-color="#f1b7bf"/>
</linearGradient>
</defs>
<rect x="8" y="8" width="48" height="48" rx="3" fill="none" stroke="#bab5ec" stroke-width="2"/>
<rect x="12" y="14" width="40" height="10" rx="1" fill="url(#grad-code)"/>
<circle cx="46" cy="19" r="2" fill="#f8d1d9"/>
<circle cx="40" cy="19" r="2" fill="#fff" opacity="0.5"/>
<rect x="12" y="27" width="40" height="10" rx="1" fill="url(#grad-code)"/>
<circle cx="46" cy="32" r="2" fill="#f8d1d9"/>
<rect x="12" y="40" width="40" height="10" rx="1" fill="url(#grad-code)"/>
<circle cx="46" cy="45" r="2" fill="#f8d1d9"/>
<circle cx="40" cy="45" r="2" fill="#fff" opacity="0.5"/>
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="16" y1="12" x2="16" y2="52" stroke="#ccd6f6"/>
<circle cx="16" cy="12" r="4" stroke="#ccd6f6"/>
<circle cx="16" cy="32" r="4" stroke="#ccd6f6"/>
<circle cx="16" cy="52" r="4" stroke="#ccd6f6"/>
<path d="M16 32C26 32 36 36 36 44V48" stroke="#64ffda"/>
<circle cx="36" cy="48" r="4" stroke="#64ffda"/>
</svg>
</div>
<span data-cn="代码托管" data-en="Git Hosting"></span>
@@ -76,17 +55,12 @@
<a href="#" class="service-item">
<div class="service-icon">
<svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad-mc" x1="0" y1="64" x2="64" y2="0" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#bab5ec"/>
<stop offset="1" stop-color="#f1b7bf"/>
</linearGradient>
</defs>
<path d="M32,6 L58,21 L32,36 L6,21 Z" fill="#f8d1d9"/>
<path d="M58,21 L58,51 L32,66 L32,36 Z" fill="#bab5ec"/>
<path d="M6,21 L32,36 L32,66 L6,51 Z" fill="url(#grad-mc)"/>
<rect x="28" y="30" width="8" height="8" transform="rotate(30 32 34) skewX(-30)" fill="#bab5ec" opacity="0.3"/>
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M32 8L54 20V44L32 56L10 44V20L32 8Z" stroke="#ccd6f6"/>
<path d="M10 20L32 32L54 20" stroke="#ccd6f6"/>
<path d="M32 56V32" stroke="#ccd6f6"/>
<path d="M26 16L32 20L38 16" stroke="#64ffda"/>
<path d="M46 29L46 38" stroke="#64ffda"/>
</svg>
</div>
<span data-cn="Minecraft服务器" data-en="Minecraft Server"></span>
@@ -94,17 +68,11 @@
<a href="#" class="service-item">
<div class="service-icon">
<svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad-chat" x1="0" y1="50" x2="50" y2="0" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#bab5ec"/>
<stop offset="1" stop-color="#f1b7bf"/>
</linearGradient>
</defs>
<path d="M28,10 L54,10 C56.2,10 58,11.8 58,14 L58,36 C58,38.2 56.2,40 54,40 L44,40 L44,46 L36,40 L28,40 C25.8,40 24,38.2 24,36 L24,14 C24,11.8 25.8,10 28,10 Z" fill="#bab5ec" opacity="0.4"/>
<path d="M8,20 L42,20 C44.2,20 46,21.8 46,24 L46,48 C46,50.2 44.2,52 42,52 L18,52 L10,58 L10,52 L8,52 C5.8,52 4,50.2 4,48 L4,24 C4,21.8 5.8,20 8,20 Z" fill="url(#grad-chat)"/>
<rect x="14" y="30" width="22" height="3" rx="1.5" fill="#f8d1d9"/>
<rect x="14" y="38" width="14" height="3" rx="1.5" fill="#f8d1d9"/>
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 16H42V40H20L12 48V16Z" stroke="#ccd6f6"/>
<path d="M26 10H56V34H44L38 40V34H26V10Z" stroke="#64ffda"/>
<line x1="32" y1="20" x2="50" y2="20" stroke="#64ffda"/>
<line x1="32" y1="26" x2="44" y2="26" stroke="#64ffda"/>
</svg>
</div>
<span data-cn="OUC论坛" data-en="OUC Forum"></span>
@@ -112,20 +80,13 @@
<a href="#" class="service-item">
<div class="service-icon">
<svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad-fix" x1="10" y1="50" x2="50" y2="10" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#bab5ec"/>
<stop offset="1" stop-color="#f1b7bf"/>
</linearGradient>
</defs>
<circle cx="40" cy="24" r="14" fill="none" stroke="#bab5ec" stroke-width="4" stroke-dasharray="6 3"/>
<circle cx="40" cy="24" r="5" fill="#bab5ec" opacity="0.5"/>
<g transform="translate(-5, 5)">
<rect x="16" y="34" width="30" height="10" rx="2" transform="rotate(-45 31 39)" fill="url(#grad-fix)"/>
<path d="M12,12 C16,8 22,8 26,12 L22,16 C20,14 18,14 16,16 L12,12 Z" fill="url(#grad-fix)" transform="rotate(-45 19 14)"/>
<circle cx="14" cy="48" r="3" fill="#f8d1d9"/>
</g>
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M46 14L50 18L26 42L22 38L46 14Z" stroke="#ccd6f6"/>
<path d="M22 38L14 46L18 50L26 42" stroke="#ccd6f6"/>
<path d="M14 46L10 54" stroke="#ccd6f6"/>
<path d="M45 28L36 19" stroke="#64ffda"/>
<path d="M20 44L14 50" stroke="#233554"/>
<path d="M50 15C53 12 58 12 60 14C62 16 62 21 59 24L34 49C32 51 29 51 27 49L25 47C23 45 23 42 25 40L50 15Z" stroke="#64ffda"/>
</svg>
</div>
<span data-cn="电脑维修" data-en="PC Repair"></span>
@@ -133,17 +94,14 @@
<a href="#" class="service-item">
<div class="service-icon">
<svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad-58" x1="0" y1="60" x2="60" y2="0" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#bab5ec"/>
<stop offset="1" stop-color="#f1b7bf"/>
</linearGradient>
</defs>
<path d="M8,12 L30,12 L28,20 L16,20 L14,28 C16,26 20,26 24,28 C28,30 28,36 24,40 C20,44 12,42 10,38" fill="none" stroke="url(#grad-58)" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M44,12 C38,12 36,20 44,24 C52,28 52,38 44,42 C36,38 36,28 44,24 C52,20 50,12 44,12 Z" fill="none" stroke="#bab5ec" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="54" cy="12" r="3" fill="#f8d1d9"/>
<rect x="4" y="46" width="6" height="6" transform="rotate(20)" fill="#bab5ec" opacity="0.6"/>
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="10" y="12" width="44" height="40" rx="4" stroke="#ccd6f6"/>
<path d="M10 24H54" stroke="#ccd6f6"/>
<path d="M20 6V16" stroke="#ccd6f6"/>
<path d="M44 6V16" stroke="#ccd6f6"/>
<circle cx="32" cy="38" r="6" stroke="#64ffda"/>
<path d="M32 38L36 34" stroke="#64ffda"/>
<circle cx="32" cy="38" r="2" fill="#64ffda" stroke="none"/>
</svg>
</div>
<span data-cn="五八工坊预约" data-en="Workshop Booking"></span>
@@ -151,18 +109,12 @@
<a href="#" class="service-item">
<div class="service-icon">
<svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad-heart" x1="10" y1="50" x2="54" y2="10" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#bab5ec"/>
<stop offset="1" stop-color="#f1b7bf"/>
</linearGradient>
</defs>
<path d="M32,54 L12,34 C6,28 6,18 16,14 C22,12 28,16 32,22" fill="url(#grad-heart)"/>
<path d="M32,54 L52,34 C58,28 58,18 48,14 C42,12 36,16 32,22" fill="#bab5ec" opacity="0.8"/>
<path d="M32,8 L32,14" stroke="#f8d1d9" stroke-width="3" stroke-linecap="round"/>
<path d="M12,10 L16,14" stroke="#f8d1d9" stroke-width="2" stroke-linecap="round"/>
<path d="M52,10 L48,14" stroke="#f8d1d9" stroke-width="2" stroke-linecap="round"/>
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M32 56C32 56 56 44 56 26C56 16 46 10 38 16C35 18 32 22 32 22C32 22 29 18 26 16C18 10 8 16 8 26C8 44 32 56 32 56Z" stroke="#ccd6f6"/>
<path d="M32 22V36" stroke="#64ffda"/>
<circle cx="32" cy="40" r="3" stroke="#64ffda"/>
<path d="M18 28H24L26 32" stroke="#233554"/>
<path d="M46 28H40L38 32" stroke="#64ffda"/>
</svg>
</div>
<span data-cn="OUC便民服务" data-en="OUC Services"></span>
@@ -176,7 +128,7 @@
<div class="container">
<div class="content-grid">
<div class="announcements-column">
<h2 data-cn="@公告通知" data-en="@Announcements"></h2>
<h2 data-cn="# 公告通知" data-en="# Announcements"></h2>
<div class="post-list">
<?php
$announcements = new WP_Query(array(
@@ -190,21 +142,29 @@
while ($announcements->have_posts()) : $announcements->the_post();
?>
<article class="post-item">
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<time datetime="<?php echo get_the_date('c'); ?>"><?php echo get_the_date(); ?></time>
<div class="post-content-wrapper">
<h3 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<div class="post-excerpt">
<?php the_excerpt(); ?>
</div>
<div class="post-meta">
<span class="post-author"><?php echo get_the_author(); ?></span>
<time datetime="<?php echo get_the_date('c'); ?>"><?php echo get_the_date('Y年m月d日'); ?></time>
</div>
</div>
</article>
<?php
endwhile;
wp_reset_postdata();
else :
?>
<p><?php _e('暂无公告', 'itstudio'); ?></p>
<p data-cn="暂无公告" data-en="No announcements found."></p>
<?php endif; ?>
</div>
</div>
<div class="blog-column">
<h2 data-cn="@技术博客" data-en="@Blog"></h2>
<h2 data-cn="# 技术博客" data-en="# Blog"></h2>
<div class="post-list">
<?php
$blogs = new WP_Query(array(
@@ -218,15 +178,23 @@
while ($blogs->have_posts()) : $blogs->the_post();
?>
<article class="post-item">
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<time datetime="<?php echo get_the_date('c'); ?>"><?php echo get_the_date(); ?></time>
<div class="post-content-wrapper">
<h3 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<div class="post-excerpt">
<?php the_excerpt(); ?>
</div>
<div class="post-meta">
<span class="post-author"><?php echo get_the_author(); ?></span>
<time datetime="<?php echo get_the_date('c'); ?>"><?php echo get_the_date('Y年m月d日'); ?></time>
</div>
</div>
</article>
<?php
endwhile;
wp_reset_postdata();
else :
?>
<p><?php _e('暂无博客文章', 'itstudio'); ?></p>
<p data-cn="暂无博客文章" data-en="No blog posts found."></p>
<?php endif; ?>
</div>
</div>