FUJI/src/pages/join-us.astro
2024-09-24 22:21:48 +08:00

269 lines
8.4 KiB
Text

---
import BaseLayout from "../layouts/BaseLayout.astro"
import mp4 from "./_assets/nbtca.mp4";
---
<BaseLayout primaryTitle="加入我们">
<div class="container">
<h2 class="life-at-apple__eyebrow">在 计算机协会</h2>
<p class="t-hero-headline-oversized">
<span
class="t-hero-headline-oversized-span"
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">
<div class="learn-more-link">
<a
href="/posts/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%8D%8F%E4%BC%9A%E5%85%A5%E7%A4%BE%E6%8C%87%E5%8D%97"
aria-label="进一步了解 NBTCA 的社区和文化"
>
了解在 NBTCA
</a>
<a class="learn-more-link-after">&gt; </a>
<br />
<br />
<a
href="/freshman/join"
aria-label="申请加入 NBTCA"
>
填写入社信息
</a>
<a class="learn-more-link-after">&gt; </a>
</div>
</div>
<video width="640" height="360" autoplay muted>
<source src={mp4} type="video/mp4" />
你的浏览器不支持视频标签。
</video>
</div>
</BaseLayout>
<style>
@media screen and (min-width: 680px) {
/*PC*/
.container {
width: 682px;
margin: 0 auto;
}
.gradient-warm {
-webkit-text-size-adjust: 100%;
--r-globalmessage-segment-height: 0px;
--r-globalnav-segmentbar-height: 0px;
--r-globalnav-height: 48px;
--rem: 16;
--r-globalnav-background-opened: #fafafc;
--r-globalnav-background-opened-dark: #161617;
--sk-focus-color: #0071e3;
--sk-focus-color-alt: rgb(0, 0, 0);
--sk-focus-offset: 1px;
--sk-focus-offset-container: 3px;
color: #333333;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
direction: ltr;
--body-container-width: 645px;
text-align: center;
font-size: 75px;
line-height: 1.06667;
font-weight: 600;
letter-spacing: 0;
font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC",
"Helvetica Neue", "Helvetica", "Arial", sans-serif !important;
quotes: "“" "”";
font-style: normal;
-webkit-text-fill-color: transparent;
-webkit-box-decoration-break: clone;
background: url(https://www.apple.com/careers/images/fy21/apple_jobs_gradient-final_Apple_Jobs_Gradients_Warm/desktop@2x.png);
background-size: 200% 100%;
-webkit-background-clip: text;
}
}
@media screen and (max-width: 680px) {
/*Mobile*/
.gradient-warm {
-webkit-text-size-adjust: 100%;
--r-globalmessage-segment-height: 0px;
--r-globalnav-segmentbar-height: 0px;
--r-globalnav-height: 48px;
--r-globalnav-background-opened: #fafafc;
--r-globalnav-background-opened-dark: #161617;
--sk-focus-color: #0071e3;
--sk-focus-color-alt: rgb(0, 0, 0);
--sk-focus-offset: 1px;
--sk-focus-offset-container: 3px;
color: #333333;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
direction: ltr;
--body-container-width: 645px;
text-align: center;
font-size: 38px;
line-height: 1.10538;
font-weight: 600;
letter-spacing: 0;
font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC",
"Helvetica Neue", "Helvetica", "Arial", sans-serif !important;
quotes: "“" "”";
font-style: normal;
-webkit-text-fill-color: transparent;
-webkit-box-decoration-break: clone;
background: url(/careers/images/fy21/apple_jobs_gradient-final_Apple_Jobs_Gradients_Warm/desktop@2x.png);
background-size: 200% 100%;
-webkit-background-clip: text;
}
}
.body-container {
-webkit-text-size-adjust: 100%;
color: #333333;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
direction: ltr;
font-weight: 400;
font-size: 17px;
line-height: 1.82353;
--body-container-width: 645px;
text-align: center;
letter-spacing: 0;
font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC",
"Helvetica Neue", "Helvetica", "Arial", sans-serif !important;
quotes: "“" "”";
font-style: normal;
margin-bottom: 60px;
width: 100%;
}
.life-at-apple__body-text {
-webkit-text-size-adjust: 100%;
--r-globalnav-height: 44px;
--r-globalmessage-segment-height: 0px;
--r-globalnav-segmentbar-height: 0px;
--r-globalnav-background-opened: #fafafc;
--r-globalnav-background-opened-dark: #161617;
--sk-focus-color: #0071e3;
--sk-focus-color-alt: rgb(0, 0, 0);
--sk-focus-offset: 1px;
--sk-focus-offset-container: 3px;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
direction: ltr;
--body-container-width: 645px;
text-align: center;
padding: 0;
font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC",
"Helvetica Neue", "Helvetica", "Arial", sans-serif !important;
quotes: "“" "”";
font-style: normal;
font-size: 30px;
line-height: 1.2;
font-weight: 400;
letter-spacing: 0;
color: #000;
margin: 20px 0 40px;
margin-top: 0;
margin-bottom: 0;
}
.life-at-apple__eyebrow {
-webkit-text-size-adjust: 100%;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
direction: ltr;
--body-container-width: 645px;
text-align: center;
padding: 0;
font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC",
"Helvetica Neue", "Helvetica", "Arial", sans-serif !important;
quotes: "“" "”";
font-style: normal;
font-size: 30px;
line-height: 1.2;
font-weight: 700;
letter-spacing: 0;
color: #000;
margin: 60px 0 0;
margin-bottom: 0;
}
.t-hero-headline-oversized {
-webkit-text-size-adjust: 100%;
color: #333333;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
direction: ltr;
--body-container-width: 645px;
text-align: center;
padding: 0;
font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC",
"Helvetica Neue", "Helvetica", "Arial", sans-serif !important;
quotes: "“" "”";
font-style: normal;
font-size: 75px;
line-height: 1.06667;
letter-spacing: 0;
font-weight: 600;
margin: 20px 0 40px;
}
.t-hero-headline-oversized-span {
-webkit-text-size-adjust: 100%;
color: #333333;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
direction: ltr;
--body-container-width: 645px;
text-align: center;
font-size: 75px;
line-height: 1.06667;
font-weight: 600;
letter-spacing: 0;
font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC",
"Helvetica Neue", "Helvetica", "Arial", sans-serif !important;
quotes: "“" "”";
font-style: normal;
-webkit-text-fill-color: transparent;
-webkit-box-decoration-break: clone;
background: url(https://www.apple.com/careers/images/fy21/apple_jobs_gradient-final_Apple_Jobs_Gradients_Warm/desktop@2x.png);
background-size: 200% 100%;
-webkit-background-clip: text;
}
.learn-more-link-after {
content: ">";
margin-left: 2.5px;
font-size: 20px;
transform: scaleX(0.5);
text-decoration: none;
}
.learn-more-link {
-webkit-text-size-adjust: 100%;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
direction: ltr;
--body-container-width: 645px;
text-align: center;
font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC",
"Helvetica Neue", "Helvetica", "Arial", sans-serif !important;
quotes: "“" "”";
font-style: normal;
color: #0070c9;
font-size: 20px;
line-height: 1.2;
font-weight: 400;
letter-spacing: 0;
}
.learn-more-link-container {
display: flex;
justify-content: center;
height: 100px;
}
</style>