服务提供模块（尝试）

assets/css/main.css

@@ -143,6 +143,22 @@
   color: var(--accent-color);
 }
 
+body[lang="en"] .hero-content h1::before {
+  content: attr(data-en);
+}
+
+body:not([lang="en"]) .hero-content h1::before {
+  content: attr(data-cn);
+}
+
+.hero-content h1 {
+  font-size: 0;
+}
+
+.hero-content h1::before {
+  font-size: 3rem;
+}
+
 .hero-description {
   font-size: 1.125rem;
   line-height: 1.8;
@@ -151,6 +167,122 @@
   color: var(--text-color);
 }
 
+body[lang="en"] .hero-description::before {
+  content: attr(data-en);
+}
+
+body:not([lang="en"]) .hero-description::before {
+  content: attr(data-cn);
+}
+
+.hero-description {
+  font-size: 0;
+}
+
+.hero-description::before {
+  font-size: 1.125rem;
+}
+
+.services-provided {
+  margin-top: 4rem;
+  margin-bottom: 2rem;
+}
+
+.services-provided h2 {
+  font-size: 1.75rem;
+  margin-bottom: 1.5rem;
+  color: var(--text-color);
+  text-align: left;
+}
+
+body[lang="en"] .services-provided h2::before {
+  content: attr(data-en);
+}
+
+body:not([lang="en"]) .services-provided h2::before {
+  content: attr(data-cn);
+}
+
+.services-provided h2 {
+  font-size: 0;
+}
+
+.services-provided h2::before {
+  font-size: 1.75rem;
+}
+
+.services-grid-box {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 2rem;
+}
+
+.service-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 1.5rem;
+  text-decoration: none;
+}
+
+
+.service-icon {
+  margin-bottom: 1rem;
+}
+
+.service-icon svg {
+  width: 96px;
+  height: 96px;
+}
+
+.service-item span {
+  font-size: 1.5rem;
+  font-weight: 500;
+  color: var(--text-color);
+}
+
+body[lang="en"] .service-item span::before {
+  content: attr(data-en);
+}
+
+body:not([lang="en"]) .service-item span::before {
+  content: attr(data-cn);
+}
+
+.service-item span {
+  font-size: 0;
+}
+
+.service-item span::before {
+  font-size: 1.5rem;
+}
+
+@media (max-width: 1024px) {
+  .services-grid-box {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1.5rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .services-grid-box {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+  }
+
+  .service-icon svg {
+    width: 80px;
+    height: 80px;
+  }
+}
+
+@media (max-width: 480px) {
+  .services-grid-box {
+    grid-template-columns: 1fr;
+  }
+}
+
 .content-section {
   padding: 3rem 0;
 }
@@ -246,6 +378,22 @@ body:not([lang="en"]) h2[data-cn]::before {
   color: var(--text-color);
 }
 
+body[lang="en"] .footer-section h3::before {
+  content: attr(data-en);
+}
+
+body:not([lang="en"]) .footer-section h3::before {
+  content: attr(data-cn);
+}
+
+.footer-section h3 {
+  font-size: 0;
+}
+
+.footer-section h3::before {
+  font-size: 1.125rem;
+}
+
 .footer-links {
   list-style: none;
 }
@@ -259,6 +407,22 @@ body:not([lang="en"]) h2[data-cn]::before {
   font-size: 0.9rem;
 }
 
+body[lang="en"] .footer-links a::before {
+  content: attr(data-en);
+}
+
+body:not([lang="en"]) .footer-links a::before {
+  content: attr(data-cn);
+}
+
+.footer-links a[data-cn] {
+  font-size: 0;
+}
+
+.footer-links a[data-cn]::before {
+  font-size: 0.9rem;
+}
+
 .footer-bottom {
   text-align: center;
   padding-top: 2rem;
@@ -270,6 +434,22 @@ body:not([lang="en"]) h2[data-cn]::before {
   color: var(--gray-500);
 }
 
+body[lang="en"] .footer-bottom p::before {
+  content: attr(data-en);
+}
+
+body:not([lang="en"]) .footer-bottom p::before {
+  content: attr(data-cn);
+}
+
+.footer-bottom p {
+  font-size: 0;
+}
+
+.footer-bottom p::before {
+  font-size: 0.875rem;
+}
+
 @media (max-width: 1024px) {
   .nav-menu {
     gap: 1.5rem;

footer.php

@@ -2,24 +2,24 @@
     <div class="container">
         <div class="footer-content">
             <div class="footer-section">
-                <h3><?php _e('友情链接', 'itstudio'); ?></h3>
+                <h3 data-cn="友情链接" data-en="Links"></h3>
                 <ul class="footer-links">
-                    <li><a href="https://www.ouc.edu.cn" target="_blank" rel="noopener"><?php _e('中国海洋大学', 'itstudio'); ?></a></li>
+                    <li><a href="https://www.ouc.edu.cn" target="_blank" rel="noopener" data-cn="中国海洋大学" data-en="Ocean University of China"></a></li>
-                    <li><a href="https://cst.ouc.edu.cn" target="_blank" rel="noopener"><?php _e('信息科学与工程学部', 'itstudio'); ?></a></li>
+                    <li><a href="https://cst.ouc.edu.cn" target="_blank" rel="noopener" data-cn="信息科学与工程学部" data-en="College of Computer Science"></a></li>
                 </ul>
             </div>
 
             <div class="footer-section">
-                <h3><?php _e('联系我们', 'itstudio'); ?></h3>
+                <h3 data-cn="联系我们" data-en="Contact Us"></h3>
                 <ul class="footer-links">
                     <li>Email: contact@itstudio.club</li>
-                    <li><a href="https://github.com/itstudio-2002" target="_blank" rel="noopener">GitHub</a></li>
+                    <li><a href="https://github.com/ITStudioOUC/" target="_blank" rel="noopener">GitHub</a></li>
                 </ul>
             </div>
         </div>
 
         <div class="footer-bottom">
-            <p>&copy; <?php echo date('Y'); ?> <?php _e('中国海洋大学爱特工作室', 'itstudio'); ?>. <?php _e('保留所有权利', 'itstudio'); ?>.</p>
+            <p data-cn="&copy; <?php echo date('Y'); ?> 中国海洋大学爱特工作室. 保留所有权利." data-en="&copy; <?php echo date('Y'); ?> IT Studio, Ocean University of China. All rights reserved."></p>
         </div>
     </div>
 </footer>

header.php

@@ -92,7 +92,7 @@
                             <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                         </svg>
                     </a>
-                    <a href="https://space.bilibili.com/itstudio" target="_blank" rel="noopener noreferrer" aria-label="Bilibili">
+                    <a href="https://space.bilibili.com/3546373051910563" target="_blank" rel="noopener noreferrer" aria-label="Bilibili">
                         <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                             <path d="M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c0-.373.129-.689.386-.947.258-.257.574-.386.947-.386zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373Z"/>
                         </svg>

index.php

@@ -4,10 +4,170 @@
     <section class="hero-section">
         <div class="container">
             <div class="hero-content">
-                <h1><?php _e('IT STUDIO', 'itstudio'); ?></h1>
+                <h1 data-cn="爱特工作室" data-en="IT STUDIO"></h1>
-                <p class="hero-description">
+                <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>
-                    <?php _e('爱特工作室成立于2002年，致力于发现人才、培养人才、输送人才。现已拥有UI设计、Web开发、程序设计、Android开发、游戏设计、iOS开发六大技术方向，是海大网络技术的中坚力量！', 'itstudio'); ?>
+            </div>
-                </p>
+
+            <!-- 服务提供模块 -->
+            <div class="services-provided">
+                <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>
+                        </div>
+                        <span data-cn="资源站" data-en="Resources"></span>
+                    </a>
+
+                    <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>
+                        </div>
+                        <span data-cn="校内镜像站" data-en="Mirror Site"></span>
+                    </a>
+
+                    <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>
+                        </div>
+                        <span data-cn="代码托管" data-en="Git Hosting"></span>
+                    </a>
+
+                    <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>
+                        </div>
+                        <span data-cn="Minecraft服务器" data-en="Minecraft Server"></span>
+                    </a>
+
+                    <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>
+                        </div>
+                        <span data-cn="OUC论坛" data-en="OUC Forum"></span>
+                    </a>
+
+                    <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>
+                        </div>
+                        <span data-cn="电脑维修" data-en="PC Repair"></span>
+                    </a>
+
+                    <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>
+                        </div>
+                        <span data-cn="五八工坊预约" data-en="Workshop Booking"></span>
+                    </a>
+
+                    <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>
+                        </div>
+                        <span data-cn="OUC便民服务" data-en="OUC Services"></span>
+                    </a>
+                </div>
             </div>
         </div>
     </section>
@@ -16,7 +176,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(
@@ -44,7 +204,7 @@
                 </div>
 
                 <div class="blog-column">
-                    <h2 data-cn="技术博客" data-en="Tech Blog"></h2>
+                    <h2 data-cn="@技术博客" data-en="@Blog"></h2>
                     <div class="post-list">
                         <?php
                         $blogs = new WP_Query(array(