join-us main

src/components/Navigation.astro

@@ -3,10 +3,12 @@ import { SITE_TITLE } from "../consts"
 import { ref } from "vue"
 import NavigationUser from "./NavigationUser.vue"
 
-const menuList = ref<{
+const menuList = ref<
-  link: string
+  {
-  name: string
+    link: string
-}[]>([
+    name: string
+  }[]
+>([
   {
     link: "/archive",
     name: "目录",
@@ -23,38 +25,44 @@ const menuList = ref<{
     link: "/about",
     name: "关于我们",
   },
-])
+  {
-
+    link: "/join-us",
+    name: "加入我们",
+  },
+]);
 ---
 
-  <nav class="nav">
+<nav class="nav">
-    <div class="nav-wrapper">
+  <div class="nav-wrapper">
-      <div class="nav-content-wrapper">
+    <div class="nav-content-wrapper">
-        <div class="flex items-center justify-between">
+      <div class="flex items-center justify-between">
-          <a href="/" class="nav-title flex items-center gap-3">
+        <a href="/" class="nav-title flex items-center gap-3">
-            <img
+          <img
-              src="https://oss.nbtca.space/CA-logo.svg"
+            src="https://oss.nbtca.space/CA-logo.svg"
-              alt=""
+            alt=""
-              style="width: 32px; aspect-ratio: 1;"
+            style="width: 32px; aspect-ratio: 1;"
-            />
+          />
-            <span class="hidden md:block">
+          <span class="hidden md:block">
-              {SITE_TITLE}
+            {SITE_TITLE}
-            </span>
+          </span>
-          </a>
+        </a>
-          <div class="flex items-center">
+        <div class="flex items-center">
-            {
+          {
-              menuList.value.map(menu =>
+            menuList.value.map(menu => (
-                (
+              <div class="px-3 lg:px-4">
-                  <div class="px-3 lg:px-4">
+                <a
-                    <a href={menu.link} class="nav-item-content hover:text-[#2997ff] text-nowrap">{menu.name}</a>
+                  href={menu.link}
-                  </div>
+                  class="nav-item-content hover:text-[#2997ff] text-nowrap"
-                ),
+                >
-              )
+                  {menu.name}
-            }
+                </a>
-            <div class="hidden lg:bock h-4 w-[0.5px] bg-gray-300 ml-1 mr-3"></div>
+              </div>
-            <NavigationUser client:load />
+            ))
-          </div>
+          }
+          <div class="hidden lg:bock h-4 w-[0.5px] bg-gray-300 ml-1 mr-3"></div>
+          <NavigationUser client:load />
         </div>
       </div>
     </div>
-  </nav>
+  </div>
+</nav>

src/pages/join-us.astro

@@ -1,37 +1,40 @@
 ---
-import BaseLayout from "../layouts/BaseLayout.astro";
+import BaseLayout from "../layouts/BaseLayout.astro"
+import mp4 from "./_assets/nbtca.mp4";
 ---
 
-  <BaseLayout primaryTitle="加入我们">
+<BaseLayout primaryTitle="加入我们">
-    <div class="container">
+  <div class="container">
-      <h2 class="life-at-apple__eyebrow">在 NBTCA 生活</h2>
+    <h2 class="life-at-apple__eyebrow">在 计算机协会</h2>
-      <p class="t-hero-headline-oversized">
+    <p class="t-hero-headline-oversized">
-        <span
+      <span
-          class="t-hero-headline-oversized-span"
+        class="t-hero-headline-oversized-span"
-          aria-label="加入我们，共同创造我们的社区。"
+        aria-label="加入我们，共同创造我们的社区。"
-        >
-          <span class="gradient-warm">加入我们，共同创造我们的社区。</span>
-        </span>
-      </p>
-      <div class="body-container">
-        <p class="life-at-apple__body-text">
-          探索我们的资源和文化：这里有丰富的资源和注重包容、成长和独创性的协作文化，助你缔造精彩人生。
-        </p>
-      </div>
-      <div class="learn-more-link-container">
-        <a
-          href="/careers/cn/life-at-apple.html"
-          class="learn-more-link"
-          aria-label="进一步了解 NBTCA 的社区和文化"
-        >了解在 NBTCA 生活
-        </a
       >
-        <a class="learn-more-link-after">&gt; </a>
+        <span class="gradient-warm">加入我们，共同创造我们的社区。</span>
-      </div>
+      </span>
+    </p>
+    <div class="body-container">
+      <p class="life-at-apple__body-text">九月二十五日，百团等你！</p>
     </div>
-  </BaseLayout>
+    <div class="learn-more-link-container">
+      <a
+        href="/careers/cn/life-at-apple.html"
+        class="learn-more-link"
+        aria-label="进一步了解 NBTCA 的社区和文化"
+      >
+        了解在 NBTCA
+      </a>
+      <a class="learn-more-link-after">&gt; </a>
+    </div>
+    <video width="640" height="360" autoplay muted>
+      <source src={mp4} type="video/mp4" />
+      你的浏览器不支持视频标签。
+    </video>
+  </div>
+</BaseLayout>
 
-    <style>
+<style>
   @media screen and (min-width: 680px) {
     /*PC*/
     .container {
@@ -253,4 +256,4 @@ import BaseLayout from "../layouts/BaseLayout.astro";
     justify-content: center;
     height: 100px;
   }
-    </style>
+</style>